@soul-refiner/design-system 1.1.11 → 1.3.1

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

@@ -1,50 +1,31 @@
 export { ELEMENT_BLOCKQUOTE, ELEMENT_CODE_LINE, ELEMENT_CODE_SYNTAX, ELEMENT_DEFAULT, ELEMENT_H1, ELEMENT_H2, ELEMENT_H3, ELEMENT_H4, ELEMENT_H5, ELEMENT_H6, ELEMENT_HR, ELEMENT_IMAGE, ELEMENT_LI, ELEMENT_LIC, ELEMENT_LINK, ELEMENT_MEDIA, ELEMENT_MEDIA_EMBED, ELEMENT_MENTION, ELEMENT_MENTION_INPUT, ELEMENT_OL, ELEMENT_PARAGRAPH, ELEMENT_TABLE, ELEMENT_TD, ELEMENT_TH, ELEMENT_TODO_LI, ELEMENT_TR, ELEMENT_UL, MARK_BG_COLOR, MARK_BOLD, MARK_CODE, MARK_COLOR, MARK_FONT_FAMILY, MARK_FONT_SIZE, MARK_FONT_WEIGHT, MARK_HIGHLIGHT, MARK_ITALIC, MARK_KBD, MARK_SEARCH_HIGHLIGHT, MARK_STRIKETHROUGH, MARK_SUBSCRIPT, MARK_SUPERSCRIPT, MARK_UNDERLINE, } from '@udecode/plate';
-export declare const ELEMENT_AUDIO = "audio";
-export declare const ELEMENT_BIBLE_QUOTE = "bible-quote";
 export declare const ELEMENT_BUTTON = "button";
-export declare const ELEMENT_EXAMPLE = "example";
-export declare const ELEMENT_FOOTNOTE = "footnote";
 export declare const ELEMENT_PAYWALL = "paywall";
-export declare const ELEMENT_POLL = "poll";
 export declare const ELEMENT_QA = "q-n-a";
-export declare const ELEMENT_RECIPE = "recipe";
 export declare const ELEMENT_VIDEO = "video";
 export declare const BUTTON_LINK = "button-link";
 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;
+    thumbnail?: undefined;
 } | {
-    type: string;
-    align: string;
     children: {
         text: string;
-        bold: boolean;
     }[];
-    url?: undefined;
-} | {
+    thumbnail: string;
     type: string;
-    url: string;
+    questionAnswerId?: undefined;
+} | {
     children: {
         text: string;
     }[];
-    align?: undefined;
+    type: string;
+    questionAnswerId?: undefined;
+    thumbnail?: undefined;
 })[];

package/dist/components/editor/constants.js

@@ -1,20 +1,8 @@
 export { ELEMENT_BLOCKQUOTE, ELEMENT_CODE_LINE, ELEMENT_CODE_SYNTAX, ELEMENT_DEFAULT, ELEMENT_H1, ELEMENT_H2, ELEMENT_H3, ELEMENT_H4, ELEMENT_H5, ELEMENT_H6, ELEMENT_HR, ELEMENT_IMAGE, ELEMENT_LI, ELEMENT_LIC, ELEMENT_LINK, ELEMENT_MEDIA, ELEMENT_MEDIA_EMBED, ELEMENT_MENTION, ELEMENT_MENTION_INPUT, ELEMENT_OL, ELEMENT_PARAGRAPH, ELEMENT_TABLE, ELEMENT_TD, ELEMENT_TH, ELEMENT_TODO_LI, ELEMENT_TR, ELEMENT_UL, MARK_BG_COLOR, MARK_BOLD, MARK_CODE, MARK_COLOR, MARK_FONT_FAMILY, MARK_FONT_SIZE, MARK_FONT_WEIGHT, MARK_HIGHLIGHT, MARK_ITALIC, MARK_KBD, MARK_SEARCH_HIGHLIGHT, MARK_STRIKETHROUGH, MARK_SUBSCRIPT, MARK_SUPERSCRIPT, MARK_UNDERLINE, } from '@udecode/plate';
-export const ELEMENT_AUDIO = 'audio';
-export const ELEMENT_BIBLE_QUOTE = 'bible-quote';
 export const ELEMENT_BUTTON = 'button';
-export const ELEMENT_EXAMPLE = 'example';
-export const ELEMENT_FOOTNOTE = 'footnote';
 export const ELEMENT_PAYWALL = 'paywall';
-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 +17,29 @@ 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: ELEMENT_QA,
     },
     {
-        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,
+                text: 'Episode 2: A Warrior’s Roadmap',
             },
         ],
+        thumbnail: 'https://f005.backblazeb2.com/file/sr-platform/f7a84d1f4e70a940b63d7d6d96beab68.jpg',
+        type: ELEMENT_VIDEO,
     },
-    // {
-    //   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,10 @@
+import React from 'react';
+export declare const EditorContext: React.Context<{
+    commentInputLoader: (props: {
+        questionAnswerId: string;
+    }) => React.ReactElement;
+    commentLoader: (props: {
+        questionAnswerId: string;
+    }) => React.ReactElement;
+    handleVideoClick?: ((id: number) => void) | undefined;
+}>;

package/dist/components/editor/context.js

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

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

@@ -1,11 +1,18 @@
 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>;
+    handleUploadImage?: (files: FileList) => Promise<string>;
+    handleVideoClick?: (id: number) => void;
     onChange: (newNodes: TElement[]) => void;
     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, handleVideoClick, onChange, previousContent, }: EditorProps) => React.JSX.Element;

package/dist/components/editor/editor.js

@@ -3,17 +3,23 @@ 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, handleVideoClick, onChange, previousContent = DEFAULT_CONTENT, }) => {
+    return (React.createElement(EditorContext.Provider, { value: {
+            commentInputLoader,
+            commentLoader,
+            handleVideoClick,
+        } },
+        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/navbar/navbar.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export interface EditorBarProps {
-    handleUploadImage: (files: FileList) => Promise<string>;
+    handleUploadImage?: (files: FileList) => Promise<string>;
 }
 export declare const EditorBar: ({ handleUploadImage }: EditorBarProps) => React.JSX.Element;
 export declare const MenuButton: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {

package/dist/components/editor/navbar/navbar.js

@@ -61,7 +61,7 @@ export const EditorBar = ({ handleUploadImage }) => {
     };
     const handleImageChange = async () => {
         const files = imageRef.current?.files;
-        if (!files)
+        if (!files || !handleUploadImage)
             return;
         const imageurl = await handleUploadImage(files);
         if (imageurl) {

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,8 @@ 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';
+import { createVideoTitlePlugin } from './video';
 /**
  * ELEMENT TYPES
  */
@@ -28,6 +31,7 @@ export const blocks = [
             disableEmbedInsert: true,
         },
     }),
+    createQAPlugin(),
     createTextIndentPlugin(),
     createIndentListPlugin({
         inject: {
@@ -57,6 +61,7 @@ export const blocks = [
     createHSixPlugin(),
     createResetNodePlugin(),
     createTablePlugin(),
+    createVideoTitlePlugin(),
 ];
 export const marks = [
     createBoldPlugin(),
@@ -95,7 +100,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,43 @@
+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(React.Fragment, null,
+            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, ...{ contentEditable: false } },
+                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 `
+  margin-bottom: 8px;
+  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/dist/components/editor/plugins/video.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { PlateElementProps } from '@udecode/plate';
+export declare const VideoTitleElement: React.ForwardRefExoticComponent<Omit<PlateElementProps, "ref"> & React.RefAttributes<any>>;
+export declare const createVideoTitlePlugin: <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/video.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { createPluginFactory, isEditorReadOnly, PlateElement, } from '@udecode/plate';
+import Image from 'next/image';
+import { ELEMENT_H2, ELEMENT_VIDEO } from '../constants';
+import { EditorContext } from '../context';
+import { Box } from '../../atoms/box';
+import { H } from '../../atoms/typography';
+import { PlaySolid } from '../../../icons/audio_video/play_solid';
+export const VideoTitleElement = React.forwardRef(function VideoTitle({ children, editor, element, ...props }, ref) {
+    const editable = !isEditorReadOnly(editor);
+    const { thumbnail, id } = element;
+    const { handleVideoClick } = React.useContext(EditorContext);
+    const handleClick = () => {
+        if (handleVideoClick && !editable) {
+            handleVideoClick(id);
+        }
+    };
+    return (React.createElement(PlateElement, { asChild: true, editor: editor, element: element, ref: ref, ...props },
+        React.createElement(Box, { "$align": "center", "$gap": 24, onClick: handleClick, sx: editable ? '' : 'cursor: pointer;', ...{ contentEditable: false } },
+            React.createElement(Box, { "$align": "center", "$justify": "center", sx: "position: relative;" },
+                React.createElement(Image, { alt: "thumbnail", height: 96, src: thumbnail, style: {
+                        borderRadius: '8px',
+                    }, width: 171 }),
+                React.createElement(PlaySolid, { color: "white", size: 32, sx: "position: absolute;" })),
+            React.createElement(H, { as: "h2", "$bold": true, "$color": "grey-2", "$fontSize": 24, "$lineHeight": 36, "$textClampLines": 3 }, children))));
+});
+export const createVideoTitlePlugin = createPluginFactory({
+    key: ELEMENT_VIDEO,
+    type: ELEMENT_VIDEO,
+    isElement: true,
+    component: VideoTitleElement,
+    then: () => ({
+        inject: {
+            props: {
+                classNames: undefined,
+                validTypes: [ELEMENT_H2],
+            },
+        },
+    }),
+});

package/package.json

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