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 = {
+}
+
+