feat: add storybooks to list_project components

src/features/Projects/pages/ListProjectPage/Components/CapabilitiesInput/CapabilitiesInput.stories.tsx

@@ -0,0 +1,21 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { WrapFormController } from 'src/utils/storybook/utils';
+import CapabilitiesInput from './CapabilitiesInput';
+
+export default {
+    title: 'Projects/List Project Page/Inputs/Capabilites Input',
+    component: CapabilitiesInput,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof CapabilitiesInput>;
+
+
+const Template: ComponentStory<typeof CapabilitiesInput> = (args) => WrapFormController('v', [])(<CapabilitiesInput {...args as any} ></CapabilitiesInput>)
+
+
+export const Default = Template.bind({});
+Default.args = {
+}
+
+

src/features/Projects/pages/ListProjectPage/Components/CapabilitiesInput/CapabilitiesInput.tsx

@@ -8,7 +8,7 @@ interface Props {
     onChange?: (v: string[]) => void;
 }
 
-export default function CapablitiesInput(props: Props) {
+export default function CapabilitiesInput(props: Props) {
 
 
     const handleClick = (clickedValue: string) => {

src/features/Projects/pages/ListProjectPage/Components/CategoriesInput/CategoriesInput.stories.tsx

@@ -0,0 +1,20 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { WrapFormController } from 'src/utils/storybook/utils';
+import CategoriesInput from './CategoriesInput';
+
+export default {
+    title: 'Projects/List Project Page/Inputs/Categories Input',
+    component: CategoriesInput,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof CategoriesInput>;
+
+
+const Template: ComponentStory<typeof CategoriesInput> = (args) => WrapFormController('v', [])(<CategoriesInput {...args as any} ></CategoriesInput>)
+
+export const Default = Template.bind({});
+Default.args = {
+}
+
+

src/features/Projects/pages/ListProjectPage/Components/ExtrasTab/ExtrasTab.stories.tsx

@@ -0,0 +1,20 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import ExtrasTab from './ExtrasTab';
+
+export default {
+    title: 'Projects/List Project Page/Tabs/Extras',
+    component: ExtrasTab,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof ExtrasTab>;
+
+
+const Template: ComponentStory<typeof ExtrasTab> = (args) => <ExtrasTab {...args as any} ></ExtrasTab>
+
+
+export const Default = Template.bind({});
+Default.args = {
+}
+
+

src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.stories.tsx

@@ -0,0 +1,20 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import ProjectDetailsTab from './ProjectDetailsTab';
+
+export default {
+    title: 'Projects/List Project Page/Tabs/Project Details',
+    component: ProjectDetailsTab,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof ProjectDetailsTab>;
+
+
+const Template: ComponentStory<typeof ProjectDetailsTab> = (args) => <ProjectDetailsTab {...args as any} ></ProjectDetailsTab>
+
+
+export const Default = Template.bind({});
+Default.args = {
+}
+
+

src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx

@@ -11,7 +11,7 @@ import Card from "src/Components/Card/Card";
 import { FaDiscord, FaTwitter } from "react-icons/fa";
 import { FiCamera, FiGithub, FiTwitter } from "react-icons/fi";
 import CategoriesInput from "../CategoriesInput/CategoriesInput";
-import CapablitiesInput from "../CapablitiesInput/CapablitiesInput";
+import CapabilitiesInput from "../CapabilitiesInput/CapabilitiesInput";
 
 
 interface IProjectDetails {
@@ -267,7 +267,7 @@ export default function ProjectDetailsTab({ data, onClose }: Props) {
                             control={control}
                             name="capabilities"
                             render={({ field: { onChange, value } }) => (
-                                <CapablitiesInput
+                                <CapabilitiesInput
                                     value={value}
                                     onChange={onChange}
                                 />

src/features/Projects/pages/ListProjectPage/Components/RecruitRolesInput/RecruiterRolesInput.stories.tsx

@@ -0,0 +1,21 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { WrapFormController } from 'src/utils/storybook/utils';
+import RecruitRolesInput from './RecruitRolesInput';
+
+export default {
+    title: 'Projects/List Project Page/Inputs/Recruiter Roles Input',
+    component: RecruitRolesInput,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof RecruitRolesInput>;
+
+
+const Template: ComponentStory<typeof RecruitRolesInput> = (args) => WrapFormController('v', [])(<RecruitRolesInput {...args as any} ></RecruitRolesInput>)
+
+
+export const Default = Template.bind({});
+Default.args = {
+}
+
+

src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/TeamMembersInput.stories.tsx

@@ -0,0 +1,21 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { WrapFormController } from 'src/utils/storybook/utils';
+import TeamMembersInput from './TeamMembersInput';
+
+export default {
+    title: 'Projects/List Project Page/Inputs/Team Members Input',
+    component: TeamMembersInput,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof TeamMembersInput>;
+
+
+const Template: ComponentStory<typeof TeamMembersInput> = (args) => WrapFormController('v', [])(<TeamMembersInput {...args as any} ></TeamMembersInput>)
+
+
+export const Default = Template.bind({});
+Default.args = {
+}
+
+

src/features/Projects/pages/ListProjectPage/Components/TeamTab/TeamTab.stories.tsx

@@ -0,0 +1,20 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import TeamTab from './TeamTab';
+
+export default {
+    title: 'Projects/List Project Page/Tabs/Team',
+    component: TeamTab,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof TeamTab>;
+
+
+const Template: ComponentStory<typeof TeamTab> = (args) => <TeamTab {...args as any} ></TeamTab>
+
+
+export const Default = Template.bind({});
+Default.args = {
+}
+
+

src/features/Projects/pages/ListProjectPage/Components/TournamentsInput/TournamentsInput.stories.tsx

@@ -0,0 +1,21 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { WrapFormController } from 'src/utils/storybook/utils';
+import TournamentsInput from './TournamentsInput';
+
+export default {
+    title: 'Projects/List Project Page/Inputs/Tournaments Input',
+    component: TournamentsInput,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof TournamentsInput>;
+
+
+const Template: ComponentStory<typeof TournamentsInput> = (args) => WrapFormController('v', [])(<TournamentsInput {...args as any} ></TournamentsInput>)
+
+
+export const Default = Template.bind({});
+Default.args = {
+}
+
+

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;
+
+}