Adding stories

packages/core/helper-plugin/lib/src/components/Form/Form.stories.mdx

@@ -0,0 +1,75 @@
+<!--- EmptyStateLayout.stories.mdx --->
+
+import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
+import { Main, Row } from '@strapi/parts';
+import { TextInput } from '@strapi/parts/TextInput';
+import { Button } from '@strapi/parts/Button';
+import { Box } from '@strapi/parts/Box';
+import { Text } from '@strapi/parts/Text';
+import { Formik } from 'formik';
+import * as Yup from 'yup';
+import Form from './';
+
+<Meta title="components/Form" />
+
+# Form
+
+This component is used to display a Formik form with additionnal error handling on fields
+
+## Per field error
+
+<Canvas>
+  <Story name="Per field error">
+    <Main>
+      <Formik initialValues={{ email: '' }} validationSchema={Yup.object().shape({ email: Yup.string().email('Invalid email').required('Required')})}>
+        {({ handleSubmit, values, errors, handleChange }) => (
+          <Form onSubmit={handleSubmit}>
+            <TextInput
+              name="email"
+              label="Email"
+              hint="Enter a valid email"
+              value={values.email}
+              error={errors.email}
+              value={values.displayName}
+              onChange={handleChange}
+            />
+            <Button type="submit">Submit</Button>
+          </Form>
+        )}
+      </Formik>
+    </Main>
+  </Story>
+</Canvas>
+
+## Per form error
+
+Make sure to run this story in detached mode. The embeded iframe breaks the focus behaviour.
+
+<Canvas>
+  <Story name="Per form error">
+    <Main>
+      <Formik initialValues={{ email: '' }} validationSchema={Yup.object().shape({ email: Yup.string().email('Invalid email').required('Required')})} validateOnChange={false}>
+        {({ handleSubmit, values, errors, handleChange }) => (
+          <Form onSubmit={handleSubmit} noValidate>
+            {errors.email ? <Box padding={3} hasRadius background="danger100" color="danger600" tabIndex={-1} id="global-form-error">
+              <Text>The email is invalid</Text>
+            </Box> : null}
+            <TextInput
+              name="email"
+              label="Email"
+              hint="Enter a valid email"
+              value={values.email}
+              value={values.displayName}
+              onChange={handleChange}
+            />
+            <Button type="submit">Submit</Button>
+          </Form>
+        )}
+      </Formik>
+    </Main>
+  </Story>
+</Canvas>
+
+### Props
+
+<ArgsTable of={EmptyStateLayout} />

packages/core/helper-plugin/lib/src/index.js

@@ -23,7 +23,6 @@ export { default as HeaderSearch } from './old/components/HeaderSearch';
 export { default as IcoContainer } from './old/components/IcoContainer';
 export { default as InputAddon } from './old/components/InputAddon';
 export { default as EmptyState } from './old/components/EmptyState';
-export { default as Form } from './old/components/Form';
 export * from './old/components/Tabs';
 export * from './old/components/Select';
 
@@ -190,6 +189,7 @@ export { default as LoadingIndicatorPage } from './components/LoadingIndicatorPa
 export { default as SettingsPageTitle } from './components/SettingsPageTitle';
 export { default as Search } from './components/Search';
 export { default as Status } from './components/Status';
+export { default as Form } from './components/Form';
 
 // New icons
 export { default as SortIcon } from './icons/SortIcon';