feat(doc): add guide about form

ovh · Nov 28, 2024 · 03d24b8 · 03d24b8
1 parent fe58535
commit 03d24b8
Show file tree

Hide file tree

Showing 5 changed files with 336 additions and 20 deletions.
diff --git a/packages/examples/react-webpack/src/app/App.tsx b/packages/examples/react-webpack/src/app/App.tsx
@@ -2,8 +2,8 @@
 import React, { type ReactElement } from 'react';
 import styles from './app.scss';
 // import { Gallery } from './components/gallery/Gallery';
-// import { FormFormik } from './components/formFormik/FormFormik';
-import { FormHookForm } from './components/formHookForm/FormHookForm';
+import { FormFormik } from './components/formFormik/FormFormik';
+// import { FormHookForm } from './components/formHookForm/FormHookForm';
 // import { FormNative } from './components/formNative/FormNative';
 // import { TestModal } from './components/testModal/TestModal';
 // import { TestSelect } from './components/testSelect/TestSelect';
@@ -14,8 +14,8 @@ function App(): ReactElement {
   return (
     <div className={ styles.app }>
       {/*<Gallery />*/}
-      {/*<FormFormik />*/}
-      <FormHookForm />
+      <FormFormik />
+      {/*<FormHookForm />*/}
       {/*<FormNative />*/}
       {/*<QueryClientProvider client={queryClient}>*/}
       {/*  <TestSelect />*/}

diff --git a/packages/examples/react-webpack/src/app/components/formNative/FormNative.tsx b/packages/examples/react-webpack/src/app/components/formNative/FormNative.tsx
@@ -1,23 +1,20 @@
 import { ODS_INPUT_TYPE } from '@ovhcloud/ods-components';
 import { OdsButton, OdsCheckbox, OdsDatepicker, OdsInput, OdsPassword, OdsPhoneNumber, OdsQuantity, OdsRadio, OdsSelect, OdsSwitch, OdsSwitchItem, OdsTextarea, OdsTimepicker } from '@ovhcloud/ods-components/react';
-import React, { type ReactElement, useRef, useState } from 'react';
+import React, { type FormEvent, type ReactElement, useRef, useState } from 'react';
 import styles from './formNative.scss';
 
 function FormNative(): ReactElement {
   const formRef = useRef<HTMLFormElement>(null);
   const [areAllRequired, setAreAllRequired] = useState(false);
 
-  async function onSubmit(e: any) {
+  function onSubmit(e: FormEvent) {
     e.preventDefault();
-    e.stopPropagation();
 
     const formData = new FormData(formRef.current!);
 
     for (const [key, value] of formData) {
       console.log(`${key}: ${value}`)
     }
-
-    return false;
   }
 
   function onAllRequiredToggle() {

diff --git a/packages/examples/vanilla-webpack/src/index.html b/packages/examples/vanilla-webpack/src/index.html
@@ -34,17 +34,17 @@
   </form>
 
   <script>
-    // const formElement = document.querySelector('form');
-    //
-    // formElement.addEventListener('submit', (e) => {
-    //   e.preventDefault();
-    //
-    //   const formData = new FormData(formElement)
-    //
-    //   for (const [key, value] of formData) {
-    //     console.log(`${key}: ${value}`)
-    //   }
-    // });
+    const formElement = document.querySelector('form');
+
+    formElement.addEventListener('submit', (e) => {
+      // e.preventDefault();
+
+      const formData = new FormData(formElement)
+
+      for (const [key, value] of formData) {
+        console.log(`${key}: ${value}`)
+      }
+    });
   </script>
 </body>
 </html>
diff --git a/packages/storybook/.storybook/preview.tsx b/packages/storybook/.storybook/preview.tsx
@@ -140,6 +140,9 @@ const preview: Preview = {
               'Style Customization',
               '*',
             ],
+            'Guides', [
+              '*',
+            ],
           ],
           'ODS Components', [
             'Gallery',