From f98a1a422e0d3854c04d058e7828fdde3968d1c5 Mon Sep 17 00:00:00 2001
From: mfrachet <marvin.frachet@strapi.io>
Date: Tue, 7 Sep 2021 16:23:05 +0200
Subject: [PATCH] Adding stories

---
 .../lib/src/components/Form/Form.stories.mdx  | 75 +++++++++++++++++++
 .../src/{old => }/components/Form/index.js    |  0
 packages/core/helper-plugin/lib/src/index.js  |  2 +-
 3 files changed, 76 insertions(+), 1 deletion(-)
 create mode 100644 packages/core/helper-plugin/lib/src/components/Form/Form.stories.mdx
 rename packages/core/helper-plugin/lib/src/{old => }/components/Form/index.js (100%)

diff --git a/packages/core/helper-plugin/lib/src/components/Form/Form.stories.mdx b/packages/core/helper-plugin/lib/src/components/Form/Form.stories.mdx
new file mode 100644
index 000000000000..8650c3f19d5a
--- /dev/null
+++ b/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} />
diff --git a/packages/core/helper-plugin/lib/src/old/components/Form/index.js b/packages/core/helper-plugin/lib/src/components/Form/index.js
similarity index 100%
rename from packages/core/helper-plugin/lib/src/old/components/Form/index.js
rename to packages/core/helper-plugin/lib/src/components/Form/index.js
diff --git a/packages/core/helper-plugin/lib/src/index.js b/packages/core/helper-plugin/lib/src/index.js
index 3963c0eb07ad..0052c821d7f2 100644
--- a/packages/core/helper-plugin/lib/src/index.js
+++ b/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';