feat: add stories templates

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

@@ -2,6 +2,7 @@ import { createAction } from '@reduxjs/toolkit';
 import React, { useCallback, useState } from 'react'
 import { useFormContext } from 'react-hook-form';
 import Button from 'src/Components/Button/Button';
+import Card from 'src/Components/Card/Card';
 import LoadingPage from 'src/Components/LoadingPage/LoadingPage';
 import { isStory } from 'src/features/Posts/types';
 import { Post_Type, useDeleteStoryMutation, useGetMyDraftsQuery, usePostDetailsLazyQuery } from 'src/graphql'
@@ -95,11 +96,11 @@ export default function DraftsContainer({ id, type, onDraftLoad }: Props) {
 
         <div id={id}>
             {(!myDraftsQuery.loading && myDraftsQuery.data?.getMyDrafts && myDraftsQuery.data.getMyDrafts.length > 0) &&
-                <div className="bg-white border-2 border-gray-200 rounded-16 p-16">
+                <Card>
                     <p className="text-body2 font-bolder mb-16">Saved Drafts</p>
                     <ul className=''>
                         {myDraftsQuery.data.getMyDrafts.map(draft =>
-                            <li key={draft.id} className='py-16 border-b-[1px] border-gray-200 last-of-type:border-b-0  ' >
+                            <li key={draft.id} className='py-16 border-b-[1px] border-gray-200 last-of-type:border-b-0 last-of-type:pb-0' >
                                 <p
                                     className="hover:underline"
                                     role={'button'}
@@ -113,7 +114,7 @@ export default function DraftsContainer({ id, type, onDraftLoad }: Props) {
                                 </div>
                             </li>)}
                     </ul>
-                </div>}
+                </Card>}
             {loading && <LoadingPage />}
         </div>
     )

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

@@ -0,0 +1,94 @@
+import React from 'react'
+import { useFormContext } from 'react-hook-form';
+import Card from 'src/Components/Card/Card'
+import { IStoryFormInputs } from '../../CreateStoryPage/CreateStoryPage';
+
+export default function TemplatesCard() {
+
+
+    const { formState: { isDirty }, reset } = useFormContext<IStoryFormInputs>();
+
+    const clickTemplate = (template: typeof templates[number]) => {
+        if (!isDirty || window.confirm("Your current unsaved changes will be lost, are you sure you want to continue?")) {
+            reset({
+                id: -1 * Math.random(),
+                is_published: false,
+                title: template.value.title,
+                body: template.value.body,
+            })
+        }
+    }
+
+    return (
+        <Card>
+            <p className="text-body2 font-bolder">Story templates</p>
+            <ul className=''>
+                {templates.map(template =>
+                    <li key={template.id} className='py-16 border-b-[1px] border-gray-200 last-of-type:border-b-0 last-of-type:pb-0  ' >
+                        <p
+                            className="hover:underline"
+                            role={'button'}
+                            onClick={() => clickTemplate(template)}
+                        >
+                            {template.title}
+                        </p>
+                        <p className="text-body5 text-gray-400 mt-4">{template.description}</p>
+                    </li>)}
+            </ul>
+        </Card>
+    )
+}
+
+
+const templates = [{
+    id: 1,
+    title: "👋  Maker intro",
+    description: "Tell the community about yourself",
+    value: {
+        title: "Hello!! I'm [Your Name]",
+        body:
+            `### Who am I?
+I'm a [Your age] years old [Your job] who have been working on this field for [Years of experience] years.
+
+### What I love?
+I usually like to [Your hobby] and I also love to participate in [Some activity you like]
+
+### Why I joined this community?
+The main reason is because [Reason for joining]`
+    },
+},
+{
+    id: 2,
+    title: "🚀  Product launch / update",
+    description: "Launch your product with a story",
+    value: {
+        title: "[Your product's name] is Live now!!",
+        body:
+            `### What is [Your product]??
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam doloremque eaque natus aperiam voluptas obcaecati qui dolores molestiae incidunt perspiciatis sed, illo odit. Voluptatum qui fugit quidem inventore illum veritatis.
+
+### Another question goes here
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempore quia et dolore accusantium blanditiis odio, ab nihil. Expedita animi labore voluptates, officiis tenetur totam?
+
+### A final thing in mind
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias magnam doloremque quisquam dolore odio sit atque incidunt esse vel dolor laboriosam a, laudantium ut quia fuga placeat non maiores. Odio unde harum autem commodi, tempora corporis consequuntur? Aliquam, quaerat ex.`
+    },
+},
+{
+    id: 3,
+    title: "🚦 My weekly PPPs",
+    description: "Let others know about your recent activity",
+    value: {
+        title: "My weekly PPP on [Product's name]",
+        body:
+            `### What did I do this week?
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam doloremque eaque natus aperiam voluptas obcaecati qui dolores molestiae incidunt perspiciatis sed, illo odit. Voluptatum qui fugit quidem inventore illum veritatis.
+
+### What challenges have I faced?
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempore quia et dolore accusantium blanditiis odio, ab nihil. Expedita animi labore voluptates, officiis tenetur totam?
+
+### What important lessons did I learn?
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias magnam doloremque quisquam dolore odio sit atque incidunt esse vel dolor laboriosam a, laudantium ut quia fuga placeat non maiores. Odio unde harum autem commodi, tempora corporis consequuntur? Aliquam, quaerat ex.`
+    },
+}
+]

src/features/Posts/pages/CreatePostPage/CreateStoryPage/CreateStoryPage.tsx

@@ -13,16 +13,17 @@ import * as yup from "yup";
 import DraftsContainer from "../Components/DraftsContainer/DraftsContainer";
 import ErrorsContainer from "../Components/ErrorsContainer/ErrorsContainer";
 import StoryForm from "../Components/StoryForm/StoryForm";
+import TemplatesCard from "../Components/TemplatesCard/TemplatesCard";
 import styles from './styles.module.scss'
 
 
 
 const schema = yup.object({
+    id: yup.number().transform(v => v <= 0 ? undefined : v).nullable(),
     title: yup.string().trim().required().min(10, 'Story title must be 2+ words').transform(v => v.replace(/(\r\n|\n|\r)/gm, "")),
     tags: yup.array().of(tagSchema).required().min(1, 'Add at least one tag'),
     body: yup.string().required("Write some content in the post").min(50, 'Post must contain at least 10+ words'),
     cover_image: imageSchema.nullable(true),
-
 }).required();
 
 
@@ -86,7 +87,9 @@ function CreateStoryPage() {
                 />
 
                 <ErrorsContainer id='errors' ref={errorsContainerRef} />
-
+                <div id="templates" className="mb-24">
+                    <TemplatesCard />
+                </div>
                 <DraftsContainer id='drafts' type={Post_Type.Story} onDraftLoad={resetForm} />
 
             </div>

src/features/Posts/pages/CreatePostPage/CreateStoryPage/styles.module.scss

@@ -16,6 +16,7 @@
     "errors"
     "preview-switch"
     "form"
+    "templates"
     "drafts";
 
   :global {
@@ -31,6 +32,9 @@
     #drafts {
       grid-area: drafts;
     }
+    #templates {
+      grid-area: templates;
+    }
   }
 
   @include gt-xl {
@@ -40,6 +44,7 @@
     grid-template-areas:
       "preview-switch preview-switch"
       "form errors"
+      "form templates"
       "form drafts"
       "form .";