@ukhomeoffice/cop-react-form-renderer 5.0.0-alpha → 5.0.1

package/dist/components/FormRenderer/FormRenderer.stories.mdx

@@ -0,0 +1,183 @@
+<!-- Global imports -->
+
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import {
+  Button,
+  Details,
+  Heading,
+  Link,
+  Panel,
+} from '@ukhomeoffice/cop-react-components';
+import { useState } from 'react';
+import withMock from 'storybook-addon-mock';
+
+<!-- Local imports -->
+import FormRenderer from './FormRenderer';
+
+<!-- JSON documents -->
+import CIVIL_SERVANT from '../../json/areYouACivilServant.json';
+import FIRST_FORM from '../../json/firstForm.json';
+import GRADE from '../../json/grade.json';
+import TEAMS from '../../json/team.json';
+import USER_PROFILE_DATA from '../../json/userProfile.data.json';
+import USER_PROFILE from '../../json/userProfile.json';
+
+<Meta
+  title='Components/Form renderer'
+  id='D-FormRenderer'
+  component={FormRenderer}
+  decorators={[withMock]}
+/>
+
+<Heading size='xl' caption='Components'>
+  Form renderer
+</Heading>
+
+Renders a form with <Link href="https://ukhomeoffice.github.io/cop-react-components/?path=/docs/d-alert--default-story">COP React components</Link>,
+on the basis of a <Link href="/?path=/docs/f-json-form">JSON</Link> that describes which elements are required.
+
+<Canvas withToolbar>
+  <Story
+    name='Default'
+    parameters={{
+      mockData: [
+        {
+          url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
+          method: 'GET',
+          status: 200,
+          response: CIVIL_SERVANT,
+        },
+        {
+          url: `${USER_PROFILE_DATA.urls.refData}/grade`,
+          method: 'GET',
+          status: 200,
+          response: GRADE,
+        },
+        {
+          url: `${USER_PROFILE_DATA.urls.refData}/team`,
+          method: 'GET',
+          status: 200,
+          response: TEAMS,
+        },
+      ],
+    }}
+  >
+    {() => {
+      return <FormRenderer {...USER_PROFILE} data={USER_PROFILE_DATA} />;
+    }}
+  </Story>
+</Canvas>
+
+<Details summary='Properties' className='no-indent'>
+  <ArgsTable of={FormRenderer} />
+</Details>
+
+## CYA type
+
+<Canvas>
+  <Story name='CYA'>
+    {() => {
+      const [complete, setComplete] = useState(false);
+      const [returnLater, setReturnLater] = useState(false);
+      const reset = () => {
+        setComplete(false);
+        setReturnLater(false);
+      };
+      return (
+        <>
+          {!complete && !returnLater && (
+            <FormRenderer
+              {...FIRST_FORM}
+              data={{}}
+              hooks={{
+                onRequest: (req) => {
+                  // Do whatever you need to do to the request in here, such as adding an Authorization header.
+                  console.log('onRequest hook called');
+                  return req;
+                },
+                onFormLoad: () => {
+                  console.log('onFormLoad called');
+                },
+                onFormComplete: () => {
+                  console.log('onFormComplete called');
+                  setComplete(true);
+                },
+                onPageChange: (pageId) => {
+                  console.log('onPageChange called', pageId);
+                  setReturnLater(!!pageId === false);
+                },
+                onSubmit: (type, payload, onSuccess, onError) => {
+                  console.log(
+                    'onSubmit called of type',
+                    type,
+                    'called, with the payload',
+                    payload
+                  );
+                  onSuccess();
+                }
+              }}
+            />
+          )}
+          {complete && (
+            <div>
+              <Panel title='Submission successful'>
+                Your submission was successful.
+              </Panel>
+              <Button onClick={() => reset()}>Start again</Button>
+            </div>
+          )}
+          {!complete && returnLater && (
+            <div>
+              <Panel title='Saved to return later'>
+                You clicked on "Save and return later".
+              </Panel>
+              <Button onClick={() => reset()}>Start again</Button>
+            </div>
+          )}
+        </>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Read-only style
+
+<Canvas>
+  <Story
+    name='Read-only style'
+    parameters={{
+      mockData: [
+        {
+          url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
+          method: 'GET',
+          status: 200,
+          response: CIVIL_SERVANT,
+        },
+        {
+          url: `${USER_PROFILE_DATA.urls.refData}/grade`,
+          method: 'GET',
+          status: 200,
+          response: GRADE,
+        },
+        {
+          url: `${USER_PROFILE_DATA.urls.refData}/team`,
+          method: 'GET',
+          status: 200,
+          response: TEAMS,
+        },
+      ],
+    }}
+  >
+    {() => {
+      return (
+        <FormRenderer
+          {...USER_PROFILE}
+          data={USER_PROFILE_DATA}
+          summaryListClassModifiers='no-border'
+          hide_title={true}
+          noChangeAction={true}
+        />
+      );
+    }}
+  </Story>
+</Canvas>