update: build story files for draftsContainer & storyForm

src/features/Posts/pages/CreatePostPage/Components/DraftsContainer/DraftContainer.stories.tsx

@@ -0,0 +1,30 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Post_Type } from 'src/graphql';
+import { WithModals, WrapForm } from 'src/utils/storybook/decorators';
+import { IStoryFormInputs } from '../../CreateStoryPage/CreateStoryPage';
+
+import DraftsContainer from './DraftsContainer';
+
+export default {
+    title: 'Posts/Create Post Page/Drafts Container',
+    component: DraftsContainer,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+    decorators: [WithModals, WrapForm<IStoryFormInputs>({
+        defaultValues: {
+            tags: [],
+            cover_image: [],
+        }
+    })]
+} as ComponentMeta<typeof DraftsContainer>;
+
+
+const Template: ComponentStory<typeof DraftsContainer> = (args) => <div className="max-w-[1000px]"><DraftsContainer {...args as any} ></DraftsContainer></div>
+
+export const Default = Template.bind({});
+Default.args = {
+    type: Post_Type.Story
+}
+
+

src/features/Posts/pages/CreatePostPage/Components/DraftsContainer/DraftsContainer.tsx

@@ -94,7 +94,7 @@ export default function DraftsContainer({ type, onDraftLoad }: Props) {
 
         <>
             {(!myDraftsQuery.loading && myDraftsQuery.data?.getMyDrafts && myDraftsQuery.data.getMyDrafts.length > 0) &&
-                <div className="border-2 border-gray-200 rounded-16 p-16">
+                <div className="bg-white border-2 border-gray-200 rounded-16 p-16">
                     <p className="text-body2 font-bolder mb-16">Saved Drafts</p>
                     <ul className=''>
                         {myDraftsQuery.data.getMyDrafts.map(draft =>
@@ -107,7 +107,7 @@ export default function DraftsContainer({ type, onDraftLoad }: Props) {
                                     {draft.title}
                                 </p>
                                 <div className="flex gap-4 text-body5">
-                                    <p className="text-gray-400">Last edited {getDateDifference(draft.updatedAt)} ago</p>
+                                    <p className="text-gray-400">Last edited {getDateDifference(draft.updatedAt, { dense: true })} ago</p>
                                     <Button size='sm' color='none' className='text-blue-500 !p-0' onClick={() => deleteDraft(draft.id)}>Delete draft</Button>
                                 </div>
                             </li>)}

src/features/Posts/pages/CreatePostPage/Components/StoryForm/StoryForm.stories.tsx

@@ -1,5 +1,6 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { WithModals } from 'src/utils/storybook/decorators';
+import { WithModals, WrapForm } from 'src/utils/storybook/decorators';
+import { IStoryFormInputs } from '../../CreateStoryPage/CreateStoryPage';
 
 import StoryForm from './StoryForm';
 
@@ -9,7 +10,12 @@ export default {
     argTypes: {
         backgroundColor: { control: 'color' },
     },
-    decorators: [WithModals]
+    decorators: [WithModals, WrapForm<IStoryFormInputs>({
+        defaultValues: {
+            tags: [],
+            cover_image: [],
+        }
+    })]
 } as ComponentMeta<typeof StoryForm>;
 
 

src/mocks/handlers.ts

@@ -1,6 +1,6 @@
 
 import { graphql } from 'msw'
-import { allCategories, getAllHackathons, getCategory, getFeed, getPostById, getProject, getTrendingPosts, hottestProjects, me, newProjects, popularTags, profile, projectsByCategory, searchProjects } from './resolvers'
+import { allCategories, getAllHackathons, getCategory, getFeed, getMyDrafts, getPostById, getProject, getTrendingPosts, hottestProjects, me, newProjects, popularTags, profile, projectsByCategory, searchProjects } from './resolvers'
 import {
     NavCategoriesQuery,
     ExploreProjectsQuery,
@@ -28,6 +28,7 @@ import {
     DonationsStatsQuery,
     MeQuery,
     ProfileQuery,
+    GetMyDraftsQuery,
 } from 'src/graphql'
 
 const delay = (ms = 1000) => new Promise((res) => setTimeout(res, ms + Math.random() * 1000))
@@ -212,4 +213,14 @@ export const handlers = [
         )
     }),
 
+    graphql.query<GetMyDraftsQuery>('GetMyDrafts', async (req, res, ctx) => {
+        await delay()
+
+        return res(
+            ctx.data({
+                getMyDrafts: getMyDrafts()
+            })
+        )
+    }),
+
 ]

src/mocks/resolvers.ts

@@ -77,4 +77,8 @@ export function me() {
 
 export function profile() {
     return MOCK_DATA['user']
+}
+
+export function getMyDrafts(): Query['getMyDrafts'] {
+    return MOCK_DATA['posts'].stories;
 }

src/utils/storybook/decorators.tsx

@@ -113,10 +113,9 @@ export const centerDecorator: DecoratorFn = (Story) => {
     </div>
 }
 
-
-export const WrapForm: (options?: Partial<UseFormProps>) => DecoratorFn = options => {
+export function WrapForm<T = any>(options?: Partial<UseFormProps<T>>): DecoratorFn {
     const Func: DecoratorFn = (Story) => {
-        const methods = useForm(options);
+        const methods = useForm<T>(options);
         return <FormProvider {...methods} >
             <Story />
         </FormProvider>