Merge pull request #176 from peakshift/feature/stories-template

Feature: 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/ErrorsContainer/ErrorsContainer.tsx

@@ -10,6 +10,7 @@ const ErrorsContainer = forwardRef<HTMLDivElement, Props>((props, ref) => {
 
     const { formState: { isValid, isSubmitted, errors } } = useFormContext<IStoryFormInputs>();
 
+
     const hasErrors = Object.values(errors).length > 0
 
     return (

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

@@ -0,0 +1,134 @@
+import React from 'react'
+import { useFormContext } from 'react-hook-form';
+import Skeleton from 'react-loading-skeleton';
+import Card from 'src/Components/Card/Card'
+import { useOfficialTagsQuery } from 'src/graphql';
+import { CreateStoryType } from '../../CreateStoryPage/CreateStoryPage';
+
+export default function TemplatesCard() {
+
+
+    const { formState: { isDirty }, reset } = useFormContext<CreateStoryType>();
+    const officalTags = useOfficialTagsQuery();
+
+    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,
+                tags: officalTags.data?.officialTags.filter(tag => template.value.tags.includes(tag.title)) ?? []
+            })
+        }
+    }
+
+
+
+    return (
+        <Card>
+            <p className="text-body2 font-bolder">Story templates</p>
+            <ul className=''>
+                {officalTags.loading && Array(3).fill(0).map((_, idx) => <li key={idx} className='py-16 border-b-[1px] border-gray-200 last-of-type:border-b-0 last-of-type:pb-0  ' >
+                    <p
+                        className="hover:underline"                     >
+                        <Skeleton width="12ch" />
+                    </p>
+                    <p className="text-body5 text-gray-400 mt-4"><Skeleton width="25ch" /></p>
+                </li>)}
+                {!officalTags.loading && 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: "Hi, I'm ___ 👋",
+        body:
+            `### About me 👋
+Tell the community about yourself, your hobbies, and interests...
+
+#### How did you get into bitcoin?
+We've all been down the rabit hole, let's hear your side of things...
+
+#### What's something that excites you about the space now?
+What's ignigniting your maker spark? Is it a new layer spec, event, or app? We want to hear about it...
+
+#### What's your spirit animal/star sign?
+It's important, ok...
+
+### My roles & skills 🦄
+Let everyone know what roles you usually take in your product teams, plus some of your top skills and levels...
+
+#### How can you help others?
+Those skills sound awesome, is there anything you could help other makers with in particular? I'm sure they'd return the favour...
+
+### What I'm currently working on 🧑‍💻
+Working on anything exciting? List your current projects here so other makers can check out your work...
+
+#### What can the BOLT.FUN community help you with right now?
+Is there anything you need help with? There are plenty of makers around ready to help you out...
+`,
+        tags: ['introduction']
+    },
+},
+{
+    id: 2,
+    title: "🚀  Product launch / update",
+    description: "Launch your product with a story",
+    value: {
+        title: "Introducing ___ 🚀",
+        body:
+            `### Product feature/name 🚀
+What is the product/feature you are launching? Tell others a bit more about what you’ve been working on?
+
+### Problems & Solutions 🚨
+What problems does this product/feature solve? Really show it off and convince makers why it’s so awesome...
+
+### How was it built? 🛠
+Tell other makers about how you built this product/feature? What lightning specs, codebases, templates, packages, etc does it use? Maybe others can learn from your experience...
+
+### Blockers & Issues ✋
+Did you have any trouble building this product/feature? It’s good to share these details for others to learn from...
+
+### Try it out 🔗
+Got a link to your product/feature? Post it here for others to find...`,
+        tags: ["product", "activity"]
+    }
+},
+{
+    id: 3,
+    title: "🚦 Weekly Report",
+    description: "Let others know about your recent activity",
+    value: {
+        title: "PPPs: Week ___ 🚀",
+        body: `### Plans 📆
+- Start writing your plans for next week here...
+
+### Progress ✅
+- Start writing your progress from last week here...
+
+### Problems ✋
+
+- Start writing your problems and blockers from last week here...
+
+### Links 🔗
+- Reference your Github issues, notes, or anything else you might want to add...`, tags: ['activity']
+    },
+}
+]

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),
-
+    cover_image: imageSchema.default(null).nullable(),
 }).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 .";