From 680871de622fd121d65b33f04131ada0d50f7dd8 Mon Sep 17 00:00:00 2001
From: Bogdan Bodnar <bogdan.bodnar@nic.cz>
Date: Mon, 30 Sep 2019 11:26:06 +0200
Subject: [PATCH] Core review docs fixes.

---
 docs/forms.md                    |  2 -
 src/bootstrap/Checkbox.md        |  2 +-
 src/bootstrap/EmailInput.md      |  2 +-
 src/bootstrap/Modal.md           |  2 +-
 src/bootstrap/NumberInput.md     |  2 +-
 src/bootstrap/PasswordInput.md   |  2 +-
 src/bootstrap/RadioSet.md        |  2 +-
 src/bootstrap/TextInput.md       |  2 +-
 src/form/components/ForisForm.md | 73 ++++++++++++++++++++++++++++++++
 styleguide.config.js             |  1 -
 10 files changed, 80 insertions(+), 10 deletions(-)
 delete mode 100644 docs/forms.md
 create mode 100644 src/form/components/ForisForm.md

diff --git a/docs/forms.md b/docs/forms.md
deleted file mode 100644
index bb1a83e..0000000
--- a/docs/forms.md
+++ /dev/null
@@ -1,2 +0,0 @@
-`<ForisForm/>` is HOC which encapsulates entire form logic and provided children required props.
-This component structure provides comfort API and allows to create typical Foris module forms easily.
diff --git a/src/bootstrap/Checkbox.md b/src/bootstrap/Checkbox.md
index 3816bf6..a4a5bbf 100644
--- a/src/bootstrap/Checkbox.md
+++ b/src/bootstrap/Checkbox.md
@@ -11,6 +11,6 @@ const [value, setValue] = useState(false);
     value={value}
     label="Some label" 
     helpText="Read the small text!"
-    onChange={e => setValue(e.target.value)}
+    onChange={event =>setValue(event.target.value)}
 />
 ```
diff --git a/src/bootstrap/EmailInput.md b/src/bootstrap/EmailInput.md
index 72f8ea8..b9ac8bc 100644
--- a/src/bootstrap/EmailInput.md
+++ b/src/bootstrap/EmailInput.md
@@ -11,7 +11,7 @@ const [email, setEmail] = useState('Wrong email');
         value={email}
         label="Some label" 
         helpText="Read the small text!"
-        onChange={e => setEmail(e.target.value)}
+        onChange={event =>setEmail(event.target.value)}
     />
     <button type="submit">Try to submit</button>
 </form>
diff --git a/src/bootstrap/Modal.md b/src/bootstrap/Modal.md
index 026399f..70b733f 100644
--- a/src/bootstrap/Modal.md
+++ b/src/bootstrap/Modal.md
@@ -3,7 +3,7 @@ Bootstrap modal component.
 it's required to have an element `<div id={"modal-container"}/>` somewhere on the page since modals are rendered in portals.
 
 ```js
-    <div id={"modal-container"}/>
+    <div id="modal-container"/>
 ```
 
 I have no idea why example doesn't work here but you can investigate HTML code and Foris project.
diff --git a/src/bootstrap/NumberInput.md b/src/bootstrap/NumberInput.md
index a2c7fb6..098efdf 100644
--- a/src/bootstrap/NumberInput.md
+++ b/src/bootstrap/NumberInput.md
@@ -12,6 +12,6 @@ const [value, setValue] = useState(42);
     helpText="Read the small text!"
     min='33'
     max='54'
-    onChange={e => setValue(e.target.value)}
+    onChange={event =>setValue(event.target.value)}
 />
 ```
diff --git a/src/bootstrap/PasswordInput.md b/src/bootstrap/PasswordInput.md
index 7eef4aa..c0f2ed4 100644
--- a/src/bootstrap/PasswordInput.md
+++ b/src/bootstrap/PasswordInput.md
@@ -12,6 +12,6 @@ const [value, setValue] = useState('secret');
     value={value}
     label="Some password" 
     helpText="Read the small text!"
-    onChange={e => setValue(e.target.value)}
+    onChange={event =>setValue(event.target.value)}
 />
 ```
diff --git a/src/bootstrap/RadioSet.md b/src/bootstrap/RadioSet.md
index 8c29017..5ccc534 100644
--- a/src/bootstrap/RadioSet.md
+++ b/src/bootstrap/RadioSet.md
@@ -17,7 +17,7 @@ const [value, setValue] = useState(CHOICES[0].value);
         value={value}
         name='some-radio'
         choices={CHOICES}
-        onChange={e => setValue(e.target.value)}
+        onChange={event =>setValue(event.target.value)}
     />
     <p>Selected value: {value}</p>
 </>
diff --git a/src/bootstrap/TextInput.md b/src/bootstrap/TextInput.md
index 26472e6..944d01c 100644
--- a/src/bootstrap/TextInput.md
+++ b/src/bootstrap/TextInput.md
@@ -10,6 +10,6 @@ const [value, setValue] = useState('Bla bla');
     value={value}
     label="Some text" 
     helpText="Read the small text!"
-    onChange={e => setValue(e.target.value)}
+    onChange={event =>setValue(event.target.value)}
 />
 ```
diff --git a/src/form/components/ForisForm.md b/src/form/components/ForisForm.md
new file mode 100644
index 0000000..c3fa814
--- /dev/null
+++ b/src/form/components/ForisForm.md
@@ -0,0 +1,73 @@
+`<ForisForm/>` is Higher-Order Component which encapsulates entire form logic and provides with children required props.
+This component structure provides comfort API and allows to create typical Foris module forms easily.
+
+## Example of usage of `<ForisForm/>`
+You can pass more forms as children.
+```js
+<ForisForm
+    ws={ws}
+    forisConfig={{
+        endpoint: API_URLs.wan,
+        wsModule: "wan",
+    }}
+    prepData={prepData}
+    prepDataToSubmit={prepDataToSubmit}
+    validator={validator}
+>
+    <WANForm />
+    <WAN6Form />
+    <MACForm />
+</ForisForm>
+```
+
+### Example of children forms `props` usage
+
+```js
+export default function MACForm({
+    formData, formErrors, setFormValue, ...props
+}) {
+    const macSettings = formData.mac_settings;
+    const errors = (formErrors || {}).mac_settings || {};
+    return (
+        <>
+            <h3>{_("MAC")}</h3>
+            <CheckBox
+                label={_("Custom MAC address")}
+                checked={macSettings.custom_mac_enabled}
+                helpText={HELP_TEXTS.custom_mac_enabled}
+
+                onChange={setFormValue(
+                    (value) => ({ mac_settings: { custom_mac_enabled: { $set: value } } }),
+                )}
+
+                {...props}
+            />
+            {macSettings.custom_mac_enabled
+                ? (
+                    <TextInput
+                        label={_("MAC address")}
+                        value={macSettings.custom_mac || ""}
+                        helpText={HELP_TEXTS.custom_mac}
+                        error={errors.custom_mac}
+                        required
+
+                        onChange={setFormValue(
+                            (value) => ({ mac_settings: { custom_mac: { $set: value } } }),
+                        )}
+
+                        {...props}
+                    />
+                )
+                : null}
+        </>
+    );
+}
+```
+The <ForisForm/> passes subsequent `props` to the child components.
+
+| Prop           | Type   | Description                                                                |
+|----------------|--------|----------------------------------------------------------------------------|
+| `formData`     | object | Data returned from API.                                                    |
+| `formErrors`   | object | Errors returned after validation via validator.                            |
+| `setFormValue` | func   | Function for data update. It takes update rule as arg (see example above). |
+| `disabled`     | bool   | Flag to disable form elements (during updates or loadings e.t.c.).         |
diff --git a/styleguide.config.js b/styleguide.config.js
index a34211e..128925c 100644
--- a/styleguide.config.js
+++ b/styleguide.config.js
@@ -14,7 +14,6 @@ module.exports = {
         },
         {
             name: "Foris forms",
-            content: "docs/forms.md",
             components: [
                 "src/form/components/ForisForm.js",
                 "src/form/components/alerts.js",