feat: add storybooks to list_project components

src/utils/storybook/decorators.tsx

@@ -16,7 +16,7 @@ import "src/styles/index.scss";
 import 'react-loading-skeleton/dist/skeleton.css'
 import { ApolloProvider } from '@apollo/client';
 import { apolloClient } from '../apollo';
-import { FormProvider, useForm, UseFormProps } from 'react-hook-form';
+import { FormProvider, useForm, UseFormProps, Controller } from 'react-hook-form';
 import ModalsContainer from 'src/Components/Modals/ModalsContainer/ModalsContainer';
 
 
@@ -123,6 +123,7 @@ export function WrapForm<T = any>(options?: Partial<UseFormProps<T>>): Decorator
 }
 
 
+
 export const WithModals: DecoratorFn = (Component) => <>
     <Component />
     <ModalsContainer />

src/utils/storybook/utils.tsx

@@ -1,3 +1,5 @@
+import React, { ReactElement, ReactNode } from "react"
+import { Controller, useForm } from "react-hook-form"
 import { RootState } from "src/redux/store"
 
 export type ModifyArgs = Partial<{
@@ -8,3 +10,30 @@ export type ModifyArgs = Partial<{
 }>
 
 
+
+export function WrapFormController<K extends string, V extends any>(key: K, defaultValue: V) {
+
+    const Func = (Story: ReactElement) => {
+        const { control } = useForm({
+            defaultValues: {
+                [key]: defaultValue as any
+            }
+        })
+        return <Controller
+            control={control}
+            name={key}
+            render={({ field: { onChange, value, onBlur } }) => {
+                console.log(value);
+                return React.cloneElement(Story, { value, onChange, onBlur })
+                // <Story
+                //     value={value}
+                //     onChange={onChange}
+                //     onBlur={onBlur}
+                // />
+            }}
+        />
+    }
+
+    return Func;
+
+}