@digigov/form 0.10.8 → 0.10.9

package/src/FieldObject/index.tsx

@@ -0,0 +1,92 @@
+import React, { useMemo } from 'react';
+import { CalculatedField, FieldProps } from '@digigov/form/Field/types';
+import Fieldset, { FieldsetCaption } from '@digigov/form/Fieldset';
+import { useTranslation } from '@digigov/ui/app/i18n';
+import { FieldBase } from '@digigov/form/Field/FieldBase';
+import { calculateField } from '@digigov/form/Field/utils';
+import { FieldsetLegend } from '@digigov/react-core';
+import { ErrorOption, UseFormReturn } from 'react-hook-form';
+import { FieldSpec } from '@digigov/form/types';
+
+export interface FieldObjectProps extends Omit<FieldProps, 'key'> {
+  control: UseFormReturn['control'];
+  register: UseFormReturn['register'];
+  reset: UseFormReturn['reset'];
+  formState: UseFormReturn['formState'];
+  error?: ErrorOption;
+}
+
+export const FieldObject: React.FC<FieldObjectProps> = ({
+  name,
+  label,
+  extra,
+  control,
+  register,
+  reset,
+  formState,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Fieldset>
+      {label?.primary && (
+        <FieldsetLegend size="s">{t(label.primary)}</FieldsetLegend>
+      )}
+      {label?.secondary && (
+        <FieldsetCaption>{t(label.secondary)}</FieldsetCaption>
+      )}
+      {extra?.fields.map((field) => (
+        <FieldObjectItem
+          key={`${name}.${field.key}`}
+          name={`${name}.${field.key}`}
+          control={control}
+          register={register}
+          reset={reset}
+          field={field}
+          error={formState.errors && formState.errors[field.key]}
+          formState={formState}
+        />
+      ))}
+    </Fieldset>
+  );
+};
+
+export interface FieldObjectItemProps {
+  name: string;
+  field: FieldSpec;
+  control: UseFormReturn['control'];
+  register: UseFormReturn['register'];
+  reset: UseFormReturn['reset'];
+  formState: UseFormReturn['formState'];
+  error?: ErrorOption;
+}
+
+const FieldObjectItem: React.FC<FieldObjectItemProps> = ({
+  name,
+  children,
+  field,
+  error,
+  control,
+  formState,
+  reset,
+  register,
+}) => {
+  const calculatedField: CalculatedField = useMemo(
+    () => calculateField(children, field),
+    [field]
+  );
+
+  const customError = error ? error : formState?.errors[name];
+  return (
+    <FieldBase
+      {...calculatedField}
+      name={name}
+      control={control}
+      reset={reset}
+      register={register}
+      error={customError}
+    />
+  );
+};
+
+export default FieldObject;

package/src/Fieldset/FieldsetWithContext.tsx

@@ -0,0 +1,41 @@
+import React, { useContext, useMemo } from 'react';
+import { FormContext } from '@digigov/form/FormContext';
+import { FieldsetSpec } from '@digigov/form/types';
+import Field from '@digigov/form/Field';
+import { useTranslation } from '@digigov/ui/app/i18n';
+import {
+  Fieldset,
+  FieldsetLabel,
+  FieldsetCaption,
+  FieldsetBody,
+} from '@digigov/form/Fieldset/';
+
+export const FieldsetWithContext: React.FC<{ name: string }> = ({ name }) => {
+  const { label, body, fields } = useFieldset(name);
+  const { t } = useTranslation();
+  return useMemo(
+    () => (
+      <Fieldset>
+        {label?.primary && <FieldsetLabel>{t(label.primary)}</FieldsetLabel>}
+        {label?.secondary && (
+          <FieldsetCaption>{t(label.secondary)}</FieldsetCaption>
+        )}
+        {body && <FieldsetBody>{body}</FieldsetBody>}
+        {fields.map((field) => (
+          <Field key={field} name={field} />
+        ))}
+      </Fieldset>
+    ),
+    [label?.primary, label?.secondary, body, fields]
+  );
+};
+
+const useFieldset = (name: string): FieldsetSpec => {
+  const { fieldsetsMap } = useContext(FormContext);
+  if (fieldsetsMap && fieldsetsMap[name]) {
+    return useMemo(() => fieldsetsMap[name], [name]);
+  } else {
+    if (!fieldsetsMap) throw new Error(`Fieldsets is not defined`);
+    throw new Error(`No fieldset with name ${name} found`);
+  }
+};

package/src/Fieldset/index.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import Grid from '@digigov/ui/layouts/Grid';
+import Fieldset from '@digigov/react-core/Fieldset';
+import FieldsetLegend from '@digigov/react-core/FieldsetLegend';
+import Hint from '@digigov/react-core/Hint';
+import NormalText from '@digigov/ui/typography/NormalText';
+import {
+  FieldsetLabelProps,
+  FieldsetCaptionProps,
+  FieldsetBodyProps,
+} from '@digigov/form/Fieldset/types';
+
+export const FieldsetLabel: React.FC<FieldsetLabelProps> = ({
+  children,
+  ...props
+}) => {
+  return (
+    <FieldsetLegend heading size="xl" {...props}>
+      {children}
+    </FieldsetLegend>
+  );
+};
+
+export const FieldsetCaption: React.FC<FieldsetCaptionProps> = ({
+  children,
+  ...props
+}) => {
+  return <Hint {...props}>{children}</Hint>;
+};
+
+export const FieldsetBody: React.FC<FieldsetBodyProps> = ({ children }) => {
+  return (
+    <Grid item xs={12}>
+      <NormalText>{children}</NormalText>
+    </Grid>
+  );
+};
+
+export { Fieldset };
+export default Fieldset;

package/src/Fieldset/types.tsx

@@ -0,0 +1,6 @@
+import { FieldsetLegendProps } from "@digigov/react-core/FieldsetLegend";
+import { HintProps } from "@digigov/react-core/Hint";
+
+export interface FieldsetLabelProps extends FieldsetLegendProps {}
+export interface FieldsetCaptionProps extends HintProps{}
+export interface FieldsetBodyProps {}

package/src/Form.stories.js

@@ -0,0 +1,5 @@
+export default {
+  title: 'Digigov Form',
+};
+export * from '@digigov/form/__stories__/IntField';
+export * from '@digigov/form/__stories__/AutoCompleteField';

package/src/Form.stories.playwright.json

@@ -0,0 +1,71 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-form--int-field": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div:nth-child(1)>label>input",
+                "text": "2.2"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            }
+          ],
+          "id": "7wMj7iTumGC-",
+          "title": "Show validation errors"
+        },
+        {
+          "actions": [
+            {
+              "name": "keyboard.press",
+              "args": {
+                "key": "Tab"
+              }
+            },
+            {
+              "name": "keyboard.press",
+              "args": {
+                "key": "Tab"
+              }
+            }
+          ],
+          "id": "e7W6ZshKZmsE",
+          "title": "Focus with keyboard"
+        },
+        {
+          "actions": [
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div:nth-child(1)>label>input",
+                "text": "1"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            }
+          ],
+          "id": "DBqARxwPma5a",
+          "title": "Add number"
+        }
+      ]
+    }
+  }
+}

package/src/FormBuilder/FormBuilder.mdx

@@ -0,0 +1,271 @@
+---
+id: FormBuilder
+title: FormBuilder
+sidebar_label: FormBuilder
+---
+
+`FormBuilder` is a React component that provides an easy way to efficiently create reusable form page. Forms are a flexible mechanism for collecting user input because there are suitable widgets for entering many different types of data, including text boxes, checkboxes, radio buttons, dropdowns and so on  for submission to a server. Actually when we use `stepForm` for building step-forms all we do is to render `FormBuilder` component.
+
+`stepForm` component: 
+
+<Story packageName="@digigov/form" component="FormBuilder" story="Default.tsx" />
+
+### Importing and using FormBuilder Component
+
+To import `FormBuilder` component simply import it from `'@digigov/form`.
+
+```javascript
+
+import {FormBuilder} from '@digigov/form';
+
+```
+Now you can use the current component inisde of your component
+
+
+```javascript
+import BasicLayout, {
+  Top,
+  Content,
+  Main,
+  Bottom,
+} from '@digigov/ui/layouts/Basic';
+import {FormBuilder} from '@digigov/form';
+
+export default function MyComponent({ props }) {
+
+  return (
+    <BasicLayout>
+      .
+      .
+      <Content>
+        <Main>
+          .
+          .
+          <FormBuilder></FormBuilder>
+          .
+          .
+        </Main>
+      </Content>
+      <Bottom>
+        <GovGRFooter />
+      </Bottom>
+    </BasicLayout>
+  );
+}
+}
+```
+
+### Props
+
+`FormBuilder` component accepts several arguments as input props.
+
+| Name          |      Type     |  Default      | Description |
+| ------------- | :-----------: | :-----------: | :-----------: | 
+| children      | node |        |      allow you to pass components as data.  |
+| steps      | array |        |      an array which includes each step-form format data |
+| name      | string |        |      the name of the step.  |
+| title      | string |        |     the title from each step   |
+| fields      | array |        |     an array of object fields which they describe each field for each step-form |
+| key      | string |        |     the key value of the input field |
+| label      | object |        |    an object prop which describes the label primary and the secondary name of the field   |
+| primary      | string |        |    the name of te field |
+| required      | boolean |   false     |   describes the validation of the field  |
+| submitButton      | boolean |     false   |  if true, it creates a button to continue to the next step   |
+| type      | string |        |    describes the format of each field, e.x  `type:'string'` is a simple input format field |
+
+
+
+### Field types
+
+Below are demostrated some examples for each type of field
+
+
+### FormBuilder implementation
+
+The examples above are implemented by using the code below
+
+```javascript
+
+import React, { useState } from 'react';
+import BasicLayout, {
+  Top,
+  Content,
+  Main,
+  Bottom,
+} from '@digigov/ui/layouts/Basic';
+import Header, { HeaderTitle } from '@digigov/ui/app/Header';
+import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
+import GovGRFooter from '@digigov/ui/govgr/Footer';
+import Button from '@digigov/ui/core/Button';
+import PageTitle, {
+  PageTitleSection,
+  PageTitleCaption,
+  PageTitleHeading,
+} from '@digigov/ui/app/PageTitle';
+import BackButton from '@digigov/ui/core/Button/BackButton';
+import FormBuilder, { Fieldset, FieldsetLabel, Field } from '@digigov/form';
+import { useTranslation } from '@digigov/ui/app';
+
+const FIELDS = [
+  {
+    key: 'phone',
+    label: {
+      primary: 'Mobile phone',
+      secondary: 'A valid mobile number, eg. +306988848888',
+    },
+    required: true,
+    type: 'mobile_phone',
+  },
+  {
+    key: 'choice_single',
+    label: { primary: 'Is this true or not' },
+    type: 'choice:single',
+    required: true,
+    extra: {
+      options: [
+        {
+          label: { primary: 'Yes' },
+          value: 'yes',
+        },
+        {
+          label: { primary: 'No', secondary: 'Explanation about no option' },
+          value: 'no',
+        },
+      ],
+    },
+  },
+  {
+    key: 'choice_single_notitle',
+    type: 'choice:single',
+    extra: {
+      options: [
+        {
+          label: { primary: 'One' },
+          value: '1',
+        },
+        {
+          label: { primary: 'Two' },
+          value: '2',
+        },
+      ],
+    },
+  },
+  {
+    key: 'choice_multiple',
+    label: 'Select from below',
+    type: 'choice:multiple',
+    extra: {
+      options: [
+        {
+          label: { primary: 'Choice 1', secondary: 'Choice 1 explanation' },
+          value: 'choice_1',
+        },
+        {
+          label: { primary: 'Choice 2' },
+          value: 'choice_2',
+        },
+      ],
+    },
+  },
+  {
+    key: 'choice_single_select',
+    label: 'Select from below',
+    type: 'choice:single',
+    extra: {
+      options: [
+        {
+          label: { primary: 'Choice 1', secondary: 'Choice 1 explanation' },
+          value: 'choice_1',
+        },
+        {
+          label: { primary: 'Choice 2 lenghty explanation without reason' },
+          value: 'choice_2',
+        },
+      ],
+      component: 'Select',
+    },
+  },
+  {
+    key: 'number',
+    label: { primary: 'A positive number' },
+    required: true,
+    width: '100px',
+    type: 'int',
+  },
+  {
+    key: 'string',
+    label: null,
+    width: '100px',
+    required: true,
+    type: 'string',
+  },
+];
+const initialValues = {
+  phone: '6988888888',
+  choice_multiple: ['choice_2'],
+  string: 'default content',
+};
+
+const useStyles = makeStyles(
+  {
+    top: { minHeight: '75px' },
+    main: {},
+    side: {},
+  },
+  { name: 'MuiSite' }
+);
+
+export default function Index() {
+  const styles = useStyles();
+  const [data, setData] = useState(null);
+  const { t } = useTranslation();
+  return (
+    <BasicLayout>
+      <Top className={styles.top}>
+        <Header>
+          <GovGRLogo />
+          <HeaderTitle>Service name</HeaderTitle>
+        </Header>
+      </Top>
+      <Content>
+        <Main className={styles.main}>
+          <BackButton>{t('button.back')}</BackButton>
+          <PageTitle>
+            <PageTitleSection>
+              <PageTitleCaption>Before we start</PageTitleCaption>
+            </PageTitleSection>
+            <PageTitleHeading>Submit a form</PageTitleHeading>
+          </PageTitle>
+          <FormBuilder
+            fields={FIELDS}
+            onSubmit={setData}
+            initial={initialValues}
+          >
+            <Fieldset>
+              <FieldsetLabel>This is a fieldset</FieldsetLabel>
+              {FIELDS.map((field) => (
+                <Field key={field.key} name={field.key} />
+              ))}
+            </Fieldset>
+            <Button type="submit">{t('button.continue')}</Button>
+          </FormBuilder>
+          {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
+        </Main>
+      </Content>
+      <Bottom>
+        <GovGRFooter />
+      </Bottom>
+    </BasicLayout>
+  );
+}
+
+```
+
+
+
+
+
+
+
+
+

package/src/FormBuilder/FormBuilder.stories.js

@@ -0,0 +1,7 @@
+import FormBuilder from '@digigov/form/FormBuilder';
+export default {
+  title: 'Digigov Form/FormBuilder',
+  component: FormBuilder,
+  displayName: 'FormBuilder'
+};
+export * from '@digigov/form/FormBuilder/__stories__/Default';

package/src/FormBuilder/FormBuilder.stories.playwright.json

@@ -0,0 +1,52 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-form-formbuilder--default": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div>label>input",
+                "text": "hello"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            }
+          ],
+          "id": "96MZZJqDNLCc",
+          "title": "type and submit"
+        },
+        {
+          "actions": [
+            {
+              "name": "keyboard.press",
+              "args": {
+                "key": "Tab"
+              }
+            },
+            {
+              "name": "keyboard.press",
+              "args": {
+                "key": "Tab"
+              }
+            },
+            {
+              "name": "keyboard.press",
+              "args": {
+                "key": "Enter"
+              }
+            }
+          ],
+          "id": "El5R6WiI7IMr",
+          "title": "focus and show validation error"
+        }
+      ]
+    }
+  }
+}