@digigov/form 0.13.2 → 1.0.0-6b93ebf2

package/es/create-simple-form.mdx

@@ -4,21 +4,23 @@ title: Create a simple Digigov Form
 sidebar_label: Creating simple forms
 ---
 
-import LeadText from "@site/src/components/LeadText";
+import LeadText from '@site/src/components/LeadText';
 
-<LeadText>This guide walks through building a simple form page, complete with
-validation and data serialisation.</LeadText>
+<LeadText>
+  This guide walks through building a simple form page, complete with validation
+  and data serialisation.
+</LeadText>
 
 ## What we are building
 
 Before we start diving into more advanced usecases, let's first create a form
 asking users for their personal information.
 
-* First name
-* Last name
-* AFM (Greek tax number)
-* Telephone number
-* Marital status
+- First name
+- Last name
+- AFM (Greek tax number)
+- Telephone number
+- Marital status
 
 As you can see, this form is pretty basic. But even for a basic form like this
 we want to implement features that will help our users submit their data. We
@@ -39,13 +41,15 @@ primitive elements.
 import React from 'react';
 
 export default function SimpleForm() {
-  return <form>
-    <label>
-      Name:
-      <input type="text" name="name" />
-    </label>
-    <input type="submit" value="Submit" />
-  </form>
+  return (
+    <form>
+      <label>
+        Name:
+        <input type="text" name="name" />
+      </label>
+      <input type="submit" value="Submit" />
+    </form>
+  );
 }
 ```
 
@@ -65,9 +69,7 @@ import Form from '@digigov/form';
 
 export default function SimpleForm() {
   // highlight-start
-  return <Form>
-    {/* this is where the fields are going to be placed */}
-  </Form>
+  return <Form>{/* this is where the fields are going to be placed */}</Form>;
   // highlight-end
 }
 ```
@@ -82,11 +84,11 @@ Let's go ahead and import the `Field` component and use it to render an input
 field and a label. This component creates and manages any necessary React
 components transparently. All you need to do is describe a few React props.
 
-* `key`
-* `name`
-* `type`
-* `label`
-* `required`
+- `key`
+- `name`
+- `type`
+- `label`
+- `required`
 
 These props can be then passed down the `Field` component which will be rendered
 by `FormBuilder`.
@@ -100,21 +102,23 @@ import React from 'react';
 import Form, { Field } from '@digigov/form';
 
 export default function SimpleForm() {
-  return <Form>
-    // highlight-start
-    <Field
-      key="firstName"
-      name="firstName"
-      label={{ primary: "First name" }}
-      type="string"
-      required
-    />
-    // highlight-end
-  </Form>
+  return (
+    <Form>
+      // highlight-start
+      <Field
+        key="firstName"
+        name="firstName"
+        label={{ primary: 'First name' }}
+        type="string"
+        required
+      />
+      // highlight-end
+    </Form>
+  );
 }
 ```
 
-Hooray! 🎉 
+Hooray! 🎉
 
 It looks like the first two fields of our awesome form are working as
 expected. They are pretty basic, string inputs, accepting data input but they
@@ -125,22 +129,24 @@ import React from 'react';
 import Form, { Field } from '@digigov/form';
 
 export default function SimpleForm() {
-  return <Form>
-    <Field
-      key="firstName"
-      name="firstName"
-      label={{ primary: "First name" }}
-      type="string"
-      required
-    />
-    <Field
-      key="lastName"
-      name="lastName"
-      label={{ primary: "Last name" }}
-      type="string"
-      required
-    />
-  </Form>
+  return (
+    <Form>
+      <Field
+        key="firstName"
+        name="firstName"
+        label={{ primary: 'First name' }}
+        type="string"
+        required
+      />
+      <Field
+        key="lastName"
+        name="lastName"
+        label={{ primary: 'Last name' }}
+        type="string"
+        required
+      />
+    </Form>
+  );
 }
 ```
 
@@ -150,7 +156,7 @@ Before we proceed with adding the rest of the fields, we should first make sure
 that the form is working, validating and submitting data.
 
 Let's modify the previous example and use a `@digigov/ui/form/Button` to submit
-data. First we should import the button component  and use it right at the
+data. First we should import the button component and use it right at the
 bottom of our form.
 
 It is important to note that you should make sure the Button has a
@@ -162,28 +168,30 @@ enter key) or using any other tools eg. screen readers.
 import React from 'react';
 import Form, { Field } from '@digigov/form';
 // highlight-next-line
-import Button from '@digigov/ui/core/Button';
+import Button from '@digigov/ui/form/Button';
 
 export default function SimpleForm() {
-  return <Form>
-    {/* this is where the fields are going to be placed */}
-    <Field
-      key="firstName"
-      name="firstName"
-      label={{ primary: "First name" }}
-      type="string"
-      required
-    />
-    <Field
-      key="lastName"
-      name="lastName"
-      label={{ primary: "Last name" }}
-      type="string"
-      required
-    />
-    // highlight-next-line
-    <Button type="submit">Continue</Button>
-  </Form>
+  return (
+    <Form>
+      {/* this is where the fields are going to be placed */}
+      <Field
+        key="firstName"
+        name="firstName"
+        label={{ primary: 'First name' }}
+        type="string"
+        required
+      />
+      <Field
+        key="lastName"
+        name="lastName"
+        label={{ primary: 'Last name' }}
+        type="string"
+        required
+      />
+      // highlight-next-line
+      <Button type="submit">Continue</Button>
+    </Form>
+  );
 }
 ```
 
@@ -198,33 +206,35 @@ affects the submit behaviour.
 ```jsx live
 import React from 'react';
 import Form, { Field } from '@digigov/form';
-import Button from '@digigov/ui/core/Button';
+import Button from '@digigov/ui/form/Button';
 
 export default function SimpleForm() {
-  return <Form>
-    {/* this is where the fields are going to be placed */}
-    <Field
-      key="firstName"
-      name="firstName"
-      label={{ primary: "First name" }}
-      type="string"
-      required
-    />
-    <Field
-      key="lastName"
-      name="lastName"
-      label={{ primary: "Last name" }}
-      type="string"
-      required
-    />
-    <Button type="submit">Continue</Button>
-  </Form>
+  return (
+    <Form>
+      {/* this is where the fields are going to be placed */}
+      <Field
+        key="firstName"
+        name="firstName"
+        label={{ primary: 'First name' }}
+        type="string"
+        required
+      />
+      <Field
+        key="lastName"
+        name="lastName"
+        label={{ primary: 'Last name' }}
+        type="string"
+        required
+      />
+      <Button type="submit">Continue</Button>
+    </Form>
+  );
 }
 ```
 
 Straightaway, the form is actually doing something and it is validating our
 inputs with almost zero coding needed.
- 
+
 That's good. But we have yet to gather data in our code when users submit the form.
 
 Note. We should note that behind the scenes the Digigov Form inherits a prop (from [React Hook Form](https://react-hook-form.com/api/useform/)) called `shouldFocusError`
@@ -252,43 +262,47 @@ information.
 // highlight-next-line
 import React, { useState } from 'react';
 import Form, { Field } from '@digigov/form';
-import Button from '@digigov/ui/core/Button';
+import Button from '@digigov/ui/form/Button';
 
 export default function SimpleForm() {
   // highlight-start
-  const [submittedData, setSubmittedData] = useState({})
+  const [submittedData, setSubmittedData] = useState({});
   const handleSubmit = (data) => {
     setSubmittedData(data);
-  }
-  return <>
-    <Form onSubmit={handleSubmit}>
-  // highlight-end
-      {/* this is where the fields are going to be placed */}
-      <Field
-        key="firstName"
-        name="firstName"
-        label={{ primary: "First name" }}
-        type="string"
-        required
-      />
-      <Field
-        key="lastName"
-        name="lastName"
-        label={{ primary: "Last name" }}
-        type="string"
-        required
-      />
-      <Button type="submit">Continue</Button>
-    </Form>
-    // highlight-start
-    {<>
-      You submitted the following values
-      <pre><code>
-        {JSON.stringify(submittedData)}
-      </code></pre>
-    </>}
-    // highlight-end
-  </>
+  };
+  return (
+    <>
+      <Form onSubmit={handleSubmit}>
+        // highlight-end
+        {/* this is where the fields are going to be placed */}
+        <Field
+          key="firstName"
+          name="firstName"
+          label={{ primary: 'First name' }}
+          type="string"
+          required
+        />
+        <Field
+          key="lastName"
+          name="lastName"
+          label={{ primary: 'Last name' }}
+          type="string"
+          required
+        />
+        <Button type="submit">Continue</Button>
+      </Form>
+      // highlight-start
+      {
+        <>
+          You submitted the following values
+          <pre>
+            <code>{JSON.stringify(submittedData)}</code>
+          </pre>
+        </>
+      }
+      // highlight-end
+    </>
+  );
 }
 ```
 
@@ -302,40 +316,44 @@ button or press enter and see what happens.
 ```jsx live
 import React, { useState } from 'react';
 import Form, { Field } from '@digigov/form';
-import Button from '@digigov/ui/core/Button';
+import Button from '@digigov/ui/form/Button';
 import Paragraph from '@digigov/ui/typography/Paragraph';
 
 export default function SimpleForm() {
-  const [submittedData, setSubmittedData] = useState({})
+  const [submittedData, setSubmittedData] = useState({});
   const handleSubmit = (data) => {
     setSubmittedData(data);
-  }
-  return <>
-    <Form onSubmit={handleSubmit}>
-      {/* this is where the fields are going to be placed */}
-      <Field
-        key="firstName"
-        name="firstName"
-        label={{ primary: "First name" }}
-        type="string"
-        required
-      />
-      <Field
-        key="lastName"
-        name="lastName"
-        label={{ primary: "Last name" }}
-        type="string"
-        required
-      />
-      <Button type="submit">Continue</Button>
-    </Form>
-    {<Paragraph>
-      You have submitted the following values
-      <pre><code>
-        {JSON.stringify(submittedData)}
-      </code></pre>
-    </Paragraph>}
-  </>
+  };
+  return (
+    <>
+      <Form onSubmit={handleSubmit}>
+        {/* this is where the fields are going to be placed */}
+        <Field
+          key="firstName"
+          name="firstName"
+          label={{ primary: 'First name' }}
+          type="string"
+          required
+        />
+        <Field
+          key="lastName"
+          name="lastName"
+          label={{ primary: 'Last name' }}
+          type="string"
+          required
+        />
+        <Button type="submit">Continue</Button>
+      </Form>
+      {
+        <Paragraph>
+          You have submitted the following values
+          <pre>
+            <code>{JSON.stringify(submittedData)}</code>
+          </pre>
+        </Paragraph>
+      }
+    </>
+  );
 }
 ```
 
@@ -370,8 +388,8 @@ the format of this tax number
   name="taxNumber"
   type="afm"
   label={{
-    primary: "Tax number",
-    secondary: "Tax number is your AFM number, given to you by AADE"
+    primary: 'Tax number',
+    secondary: 'Tax number is your AFM number, given to you by AADE',
   }}
   required
 />
@@ -386,8 +404,8 @@ A similar field can be used for the phone number. You can use the
   name="phoneNumber"
   type="phone_number"
   label={{
-    primary: "Phone number",
-    secondary: "You can enter any landline phone number."
+    primary: 'Phone number',
+    secondary: 'You can enter any landline phone number.',
   }}
   required
 />
@@ -398,29 +416,28 @@ A similar field can be used for the phone number. You can use the
 Last but not least, we should create a single choice field, which will be
 rendered as a radio group of answers.
 
-
 ```jsx
 <Field
   key="maritalStatus"
   name="maritalStatus"
   type="choice:single"
-  label={{primary: "Marital status"}}
+  label={{ primary: 'Marital status' }}
   required
   extra={{
     options: [
       {
-        label: {primary: "Married"},
+        label: { primary: 'Married' },
         value: 'married',
       },
       {
-        label: {primary: "Cohabitation agreement"},
+        label: { primary: 'Cohabitation agreement' },
         value: 'cohabitation',
       },
       {
-        label: {primary: "Prefer not to answer"},
+        label: { primary: 'Prefer not to answer' },
         value: 'wontanswer',
-      }
-    ]
+      },
+    ],
   }}
 />
 ```
@@ -435,84 +452,88 @@ Feel free to fill the form in the example and submit it.
 ```jsx live
 import React, { useState } from 'react';
 import Form, { Field } from '@digigov/form';
-import Button from '@digigov/ui/core/Button';
+import Button from '@digigov/ui/form/Button';
 import Paragraph from '@digigov/ui/typography/Paragraph';
 
 export default function SimpleForm() {
-  const [submittedData, setSubmittedData] = useState({})
+  const [submittedData, setSubmittedData] = useState({});
   const handleSubmit = (data) => {
     setSubmittedData(data);
-  }
-  return <>
-    <Form onSubmit={handleSubmit}>
-      {/* this is where the fields are going to be placed */}
-      <Field
-        key="firstName"
-        name="firstName"
-        label={{ primary: "First name" }}
-        type="string"
-        required
-      />
-      <Field
-        key="lastName"
-        name="lastName"
-        label={{ primary: "Last name" }}
-        type="string"
-        required
-      />
-      <Field
-        key="taxNumber"
-        name="taxNumber"
-        type="afm"
-        label={{
-          primary: "Tax number",
-          secondary: "Tax number is your AFM number, given to you by AADE"
-        }}
-        required
-      />
-      <Field
-        key="phoneNumber"
-        name="phoneNumber"
-        type="phone_number"
-        label={{
-          primary: "Phone number",
-          secondary: "You can enter any landline phone number."
-        }}
-        required
-      />
-      <Field
-        key="maritalStatus"
-        name="maritalStatus"
-        type="choice:single"
-        label={{primary: "Marital status"}}
-        required
-        extra={{
-          options: [
-            {
-              label: {primary: "Married"},
-              value: 'married',
-            },
-            {
-              label: {primary: "Cohabitation agreement"},
-              value: 'cohabitation',
-            },
-            {
-              label: {primary: "Prefer not to answer"},
-              value: 'wontanswer',
-            }
-          ]
-        }}
-      />
-      <Button type="submit">Continue</Button>
-    </Form>
-    {<Paragraph>
-      You have submitted the following values
-      <pre><code>
-        {JSON.stringify(submittedData)}
-      </code></pre>
-    </Paragraph>}
-  </>
+  };
+  return (
+    <>
+      <Form onSubmit={handleSubmit}>
+        {/* this is where the fields are going to be placed */}
+        <Field
+          key="firstName"
+          name="firstName"
+          label={{ primary: 'First name' }}
+          type="string"
+          required
+        />
+        <Field
+          key="lastName"
+          name="lastName"
+          label={{ primary: 'Last name' }}
+          type="string"
+          required
+        />
+        <Field
+          key="taxNumber"
+          name="taxNumber"
+          type="afm"
+          label={{
+            primary: 'Tax number',
+            secondary: 'Tax number is your AFM number, given to you by AADE',
+          }}
+          required
+        />
+        <Field
+          key="phoneNumber"
+          name="phoneNumber"
+          type="phone_number"
+          label={{
+            primary: 'Phone number',
+            secondary: 'You can enter any landline phone number.',
+          }}
+          required
+        />
+        <Field
+          key="maritalStatus"
+          name="maritalStatus"
+          type="choice:single"
+          label={{ primary: 'Marital status' }}
+          required
+          extra={{
+            options: [
+              {
+                label: { primary: 'Married' },
+                value: 'married',
+              },
+              {
+                label: { primary: 'Cohabitation agreement' },
+                value: 'cohabitation',
+              },
+              {
+                label: { primary: 'Prefer not to answer' },
+                value: 'wontanswer',
+              },
+            ],
+          }}
+        />
+        <Button type="submit">Continue</Button>
+      </Form>
+      {
+        <Paragraph>
+          You have submitted the following values
+          <pre>
+            <code>{JSON.stringify(submittedData)}</code>
+          </pre>
+        </Paragraph>
+      }
+    </>
+  );
 }
 ```
 
-Perfect! We now have a finished form, complete with field validation.
+Perfect! We now have a finished form, complete with field validation.