@soul-refiner/design-system 1.1.11 → 1.2.1

package/dist/components/editor/constants.d.ts

@@ -14,37 +14,15 @@ export declare const BUTTON_SUBSCRIBE = "button-subscribe";
 export declare const COLORS: string[];
 export declare const PLACEHOLDER = "This is a placeholder";
 export declare const DEFAULT_CONTENT: ({
-    type: string;
     children: {
         text: string;
-        bold: boolean;
     }[];
-    align?: undefined;
-    url?: undefined;
-} | {
+    questionAnswerId: string;
     type: string;
-    children: ({
-        text: string;
-        italic?: undefined;
-    } | {
-        text: string;
-        italic: boolean;
-    })[];
-    align?: undefined;
-    url?: undefined;
 } | {
-    type: string;
-    align: string;
     children: {
         text: string;
-        bold: boolean;
     }[];
-    url?: undefined;
-} | {
     type: string;
-    url: string;
-    children: {
-        text: string;
-    }[];
-    align?: undefined;
+    questionAnswerId?: undefined;
 })[];

package/dist/components/editor/constants.js

@@ -9,12 +9,6 @@ export const ELEMENT_POLL = 'poll';
 export const ELEMENT_QA = 'q-n-a';
 export const ELEMENT_RECIPE = 'recipe';
 export const ELEMENT_VIDEO = 'video';
-// export const BUTTON_COMMENT = 'button-comment';
-// export const BUTTON_GIFT_SUBSCRIPTION = 'button-gift-subscription';
-// export const BUTTON_SHARE = 'button-share';
-// export const BUTTON_SHARE_PAGE = 'button-share-page';
-// export const BUTTON_SIGNUP = 'signup';
-// export const BUTTON_SPECIAL_OFFER = 'button-special-offer';
 export const BUTTON_LINK = 'button-link';
 export const BUTTON_SUBSCRIBE = 'button-subscribe';
 export const COLORS = [
@@ -29,105 +23,20 @@ export const COLORS = [
 export const PLACEHOLDER = 'This is a placeholder';
 export const DEFAULT_CONTENT = [
     {
-        type: 'h1',
         children: [
             {
-                text: 'Module 1:  The Warrior Identity',
-                bold: true,
+                text: 'What are you struggling with today and how is it affecting the people you love? This is a longer sentence to see what it looks like.',
             },
         ],
+        questionAnswerId: 'q-n-a-ac0396ed-62ed-4a30-ba12-98f4fa2d364c',
+        type: 'q-n-a',
     },
     {
-        type: 'p',
-        children: [
-            {
-                text: 'Welcome to Warpath. You’re about to embark on a journey towards lifelong healing, freedom and victory. This is a season of training. It’s sanctification on steroids, not for the faint-hearted, but for those who truly desire to live the rest of their lives for Jesus. No reserves, no retreats, no regrets.',
-            },
-            {
-                text: ' What was once your deepest, darkest secret will now become the word of your testimony that heals and liberates others.',
-            },
-        ],
-    },
-    {
-        type: 'p',
-        children: [
-            {
-                text: 'In this new season, God is calling you up. He’s calling you to a higher level, a place where you’re no longer part of the problem but are becoming a part of the solution.',
-            },
-            {
-                text: '',
-            },
-        ],
-    },
-    {
-        type: 'blockquote',
-        children: [
-            {
-                text: '"Warpath isn’t about just winning for you; that’s the beginning. Warpath is about you taking the battle and winning for others so they can have their families, and their marriages, and their destinies." \n— ',
-            },
-            {
-                text: 'Dr. Doug Weiss',
-                italic: true,
-            },
-        ],
-    },
-    // {
-    //   type: 'hr',
-    //   children: [
-    //     {
-    //       text: '',
-    //     },
-    //   ],
-    // },
-    {
-        type: 'h3',
-        align: 'center',
-        children: [
-            {
-                text: 'THE WARRIOR IDENTITY',
-                bold: true,
-            },
-        ],
-    },
-    // {
-    //   type: 'hr',
-    //   children: [
-    //     {
-    //       text: '',
-    //     },
-    //   ],
-    // },
-    {
-        type: 'img',
-        url: 'https://source.unsplash.com/1600x900/?christian',
         children: [
             {
                 text: '',
             },
         ],
-    },
-    {
         type: 'p',
-        children: [
-            {
-                text: 'Identity: You will have to grasp your true identity in Christ. You cannot look at this as a “what”, but instead about a “who”. We must become more like Christ, because He is a warrior.',
-            },
-        ],
-    },
-    {
-        type: 'p',
-        children: [
-            {
-                text: 'A different DNA: As a warrior, your spiritual genetic code will be different from those who haven’t tasted the victory and grace you’ve experienced from this battle. You’ve experienced truth as a person: Jesus; and it has forever changed you. You’ve been set apart as a “fighting man”, no longer a civilian idly consumed by the cares of this world, but a warrior who’s passionate about the Kingdom and craving some sweet revenge.',
-            },
-        ],
-    },
-    {
-        type: 'p',
-        children: [
-            {
-                text: '',
-            },
-        ],
     },
 ];

package/dist/components/editor/context.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare const EditorContext: React.Context<{
+    commentInputLoader: (props: {
+        questionAnswerId: string;
+    }) => React.ReactElement;
+    commentLoader: (props: {
+        questionAnswerId: string;
+    }) => React.ReactElement;
+}>;

package/dist/components/editor/context.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export const EditorContext = React.createContext({
+    commentInputLoader: () => React.createElement(React.Fragment, null),
+    commentLoader: () => React.createElement(React.Fragment, null),
+});

package/dist/components/editor/editor.d.ts

@@ -1,6 +1,12 @@
 import React from 'react';
 import { TElement } from '@udecode/plate';
 export interface EditorProps {
+    commentInputLoader: (props: {
+        questionAnswerId: string;
+    }) => React.ReactElement;
+    commentLoader: (props: {
+        questionAnswerId: string;
+    }) => React.ReactElement;
     communityName: string;
     editable: boolean;
     handleUploadImage: (files: FileList) => Promise<string>;
@@ -8,4 +14,4 @@ export interface EditorProps {
     previousContent?: TElement[];
 }
 export type EditorContent = TElement;
-export declare const Editor: ({ editable, handleUploadImage, onChange, previousContent, }: EditorProps) => React.JSX.Element;
+export declare const Editor: ({ commentInputLoader, commentLoader, editable, handleUploadImage, onChange, previousContent, }: EditorProps) => React.JSX.Element;

package/dist/components/editor/editor.js

@@ -3,17 +3,19 @@ import React from 'react';
 import styled from 'styled-components';
 import { createPlugins, Plate, PlateContent } from '@udecode/plate';
 import { DEFAULT_CONTENT, PLACEHOLDER } from './constants';
+import { EditorContext } from './context';
 import { EditorBar } from './navbar';
 import { plateUI } from './plate';
 import { blocks, inline, marks, utils } from './plugins';
 const plugins = createPlugins([...blocks, ...inline, ...marks, ...utils], {
     components: plateUI,
 });
-export const Editor = ({ editable, handleUploadImage, onChange, previousContent = DEFAULT_CONTENT, }) => {
-    return (React.createElement(Plate, { id: "main", initialValue: previousContent, onChange: onChange, plugins: plugins },
-        React.createElement(Wrapper, null,
-            editable && React.createElement(EditorBar, { handleUploadImage: handleUploadImage }),
-            React.createElement(PlateContent, { id: "main", autoFocus: true, placeholder: PLACEHOLDER, readOnly: !editable, spellCheck: true }))));
+export const Editor = ({ commentInputLoader, commentLoader, editable, handleUploadImage, onChange, previousContent = DEFAULT_CONTENT, }) => {
+    return (React.createElement(EditorContext.Provider, { value: { commentInputLoader, commentLoader } },
+        React.createElement(Plate, { id: "main", initialValue: previousContent, onChange: onChange, plugins: plugins },
+            React.createElement(Wrapper, null,
+                editable && React.createElement(EditorBar, { handleUploadImage: handleUploadImage }),
+                React.createElement(PlateContent, { id: "main", autoFocus: true, placeholder: PLACEHOLDER, readOnly: !editable, spellCheck: true })))));
 };
 const Wrapper = styled.div `
   * {

package/dist/components/editor/plugins/index.js

@@ -1,7 +1,8 @@
 /**
  * PLUGINS
  */
-import { createBlockquotePlugin, createCodeBlockPlugin, createHeadingPlugin, createHorizontalRulePlugin, createIndentListPlugin, createImagePlugin, createTextIndentPlugin, createListPlugin, createMediaEmbedPlugin, createResetNodePlugin, createTablePlugin, createBoldPlugin, createCodePlugin, createFontBackgroundColorPlugin, createFontSizePlugin, createFontFamilyPlugin, createItalicPlugin, createStrikethroughPlugin, createSubscriptPlugin, createSuperscriptPlugin, createUnderlinePlugin, createAlignPlugin, createIndentPlugin, createLineHeightPlugin, createLinkPlugin, createExitBreakPlugin, createHistoryPlugin, createSelectOnBackspacePlugin, createSoftBreakPlugin, } from '@udecode/plate';
+import { createBlockquotePlugin, createCodeBlockPlugin, createHeadingPlugin, createHorizontalRulePlugin, createIndentListPlugin, createImagePlugin, createTextIndentPlugin, createListPlugin, createMediaEmbedPlugin, createResetNodePlugin, createTablePlugin, createBoldPlugin, createCodePlugin, createFontBackgroundColorPlugin, createFontSizePlugin, createFontFamilyPlugin, createItalicPlugin, createStrikethroughPlugin, createSubscriptPlugin, createSuperscriptPlugin, createUnderlinePlugin, createAlignPlugin, createIndentPlugin, createLineHeightPlugin, createExitBreakPlugin, createHistoryPlugin, createSelectOnBackspacePlugin, createSoftBreakPlugin, } from '@udecode/plate';
+import { createLinkPlugin } from '@udecode/plate-link';
 import { createButtonsPlugin } from './buttons';
 import { exitBreakPlugin } from './exitBreak';
 import { resetBlockTypePlugin } from './resetBlockType';
@@ -9,6 +10,7 @@ import { selectOnBackspace } from './selectOnBackspace';
 import { softBreakPlugin } from './softBreak';
 import { createParagraphPlugin, createHOnePlugin, createHTwoPlugin, createHThreePlugin, createHFourPlugin, createHFivePlugin, createHSixPlugin, } from './text';
 import { LinkFloatingMenu } from './link';
+import { createQAPlugin } from './qa';
 /**
  * ELEMENT TYPES
  */
@@ -28,6 +30,7 @@ export const blocks = [
             disableEmbedInsert: true,
         },
     }),
+    createQAPlugin(),
     createTextIndentPlugin(),
     createIndentListPlugin({
         inject: {
@@ -95,7 +98,7 @@ export const inline = [
     }),
     createLineHeightPlugin(),
     createLinkPlugin({
-        renderAfterEditable: LinkFloatingMenu,
+        renderBeforeEditable: LinkFloatingMenu,
     }),
 ];
 export const utils = [

package/dist/components/editor/plugins/qa.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { PlateElementProps } from '@udecode/plate';
+export declare const QuestionAnswerElement: React.ForwardRefExoticComponent<Omit<PlateElementProps, "ref"> & React.RefAttributes<any>>;
+export declare const createQAPlugin: <OP = import("@udecode/utils").AnyObject, OV extends import("@udecode/slate").Value = import("@udecode/slate").Value, OE extends import("@udecode/plate-core").PlateEditor<OV> = import("@udecode/plate-core").PlateEditor<OV>>(override?: Partial<import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-core").NoInfer<OP>, OV, OE>> | undefined, overrideByKey?: import("@udecode/plate-core").OverrideByKey<OV, OE> | undefined) => import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-core").NoInfer<OP>, OV, OE>;

package/dist/components/editor/plugins/qa.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { createPluginFactory, PlateElement, } from '@udecode/plate';
+import styled from 'styled-components';
+import { ELEMENT_QA } from '../constants';
+import { EditorContext } from '../context';
+import { Button } from '../../actions';
+import { Box } from '../../atoms/box';
+import { H } from '../../atoms/typography';
+import { ChevronDown } from '../../../icons/arrow/chevron_down';
+import { ChevronUp } from '../../../icons/arrow/chevron_up';
+export const QuestionAnswerElement = React.forwardRef(({ children, element, ...props }, ref) => {
+    const { questionAnswerId } = element;
+    const { commentInputLoader: CommentInput, commentLoader: Comments } = React.useContext(EditorContext);
+    const [showAnswers, setShowAnswers] = React.useState(false);
+    return (React.createElement(PlateElement, { asChild: true, element: element, ref: ref, ...props },
+        React.createElement(Box, { "$dir": "column", "$gap": 8 },
+            React.createElement(Question, null,
+                React.createElement(H, { as: "p", "$fontSize": 18, "$lineHeight": 26, "$mediumBold": true }, children)),
+            React.createElement(Box, { "$dir": "column", "$gap": 24, "$padding": 24 },
+                React.createElement(Button, { as: "div", icon: showAnswers ? (React.createElement(ChevronUp, { color: "grey-3" })) : (React.createElement(ChevronDown, { color: "grey-3" })), onClick: () => setShowAnswers((prev) => !prev), size: "small", sx: `
+            width: fit-content;
+            flex-direction: row-reverse;
+            color: var(--color-grey-5);
+            &:not(:hover) svg {
+              fill: var(--color-grey-3);
+            }
+            `, type: "text", ...{ contentEditable: false } }, showAnswers ? 'Hide answers' : 'Show answers'),
+                showAnswers && React.createElement(Comments, { questionAnswerId: questionAnswerId }),
+                React.createElement(CommentInput, { questionAnswerId: questionAnswerId })))));
+});
+const Question = styled.div `
+  padding: 16px;
+  border-left: 8px solid var(--color-hue-blue-1);
+  border-radius: 8px;
+  background-color: var(--color-hue-blue-3);
+`;
+export const createQAPlugin = createPluginFactory({
+    key: ELEMENT_QA,
+    type: ELEMENT_QA,
+    isElement: true,
+    component: QuestionAnswerElement,
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "1.1.11",
+  "version": "1.2.1",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {