@soul-refiner/design-system 1.2.1 → 1.3.2

package/dist/components/atoms/hide/hide.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface HideButRenderProps extends React.PropsWithChildren {
+    displaceContent?: boolean;
+    show?: boolean;
+    styles?: React.CSSProperties;
+}
+export declare const HideButRender: ({ children, displaceContent, show, styles, }: HideButRenderProps) => React.JSX.Element;

package/dist/components/atoms/hide/hide.js

@@ -0,0 +1,9 @@
+import React from 'react';
+export const HideButRender = ({ children, displaceContent = false, show = false, styles, }) => {
+    return (React.createElement("div", { style: {
+            visibility: show ? 'visible' : 'hidden',
+            position: displaceContent || show ? 'initial' : 'absolute',
+            zIndex: -100,
+            ...styles,
+        } }, children));
+};

package/dist/components/atoms/hide/index.d.ts

@@ -0,0 +1 @@
+export { HideButRender } from './hide';

package/dist/components/atoms/hide/index.js

@@ -0,0 +1 @@
+export { HideButRender } from './hide';

package/dist/components/atoms/index.d.ts

@@ -1,5 +1,6 @@
 export { Box } from './box';
 export type { BoxProps } from './box';
+export { HideButRender } from './hide';
 export { SecToDuration } from './seconds_to_duration';
 export type { SecondsToDurationProps } from './seconds_to_duration';
 export { Display, H, P, Typography } from './typography';

package/dist/components/atoms/index.js

@@ -1,4 +1,5 @@
 export { Box } from './box';
+export { HideButRender } from './hide';
 export { SecToDuration } from './seconds_to_duration';
 export { Display, H, P, Typography } from './typography';
 export { TimeAgo } from './time_ago';

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

@@ -1,13 +1,7 @@
 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";
@@ -19,10 +13,19 @@ export declare const DEFAULT_CONTENT: ({
     }[];
     questionAnswerId: string;
     type: string;
+    thumbnail?: undefined;
 } | {
     children: {
         text: string;
     }[];
+    thumbnail: string;
     type: string;
     questionAnswerId?: undefined;
+} | {
+    children: {
+        text: string;
+    }[];
+    type: string;
+    questionAnswerId?: undefined;
+    thumbnail?: undefined;
 })[];

package/dist/components/editor/constants.js

@@ -1,13 +1,7 @@
 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_LINK = 'button-link';
 export const BUTTON_SUBSCRIBE = 'button-subscribe';
@@ -29,7 +23,16 @@ export const DEFAULT_CONTENT = [
             },
         ],
         questionAnswerId: 'q-n-a-ac0396ed-62ed-4a30-ba12-98f4fa2d364c',
-        type: 'q-n-a',
+        type: ELEMENT_QA,
+    },
+    {
+        children: [
+            {
+                text: 'Episode 2: A Warrior’s Roadmap',
+            },
+        ],
+        thumbnail: 'https://f005.backblazeb2.com/file/sr-platform/f7a84d1f4e70a940b63d7d6d96beab68.jpg',
+        type: ELEMENT_VIDEO,
     },
     {
         children: [

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

@@ -6,4 +6,5 @@ export declare const EditorContext: React.Context<{
     commentLoader: (props: {
         questionAnswerId: string;
     }) => React.ReactElement;
+    handleVideoClick?: ((id: number) => void) | undefined;
 }>;

package/dist/components/editor/context.js

@@ -2,4 +2,5 @@ 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

@@ -9,9 +9,10 @@ export interface EditorProps {
     }) => 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: ({ commentInputLoader, commentLoader, 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

@@ -10,8 +10,12 @@ import { blocks, inline, marks, utils } from './plugins';
 const plugins = createPlugins([...blocks, ...inline, ...marks, ...utils], {
     components: plateUI,
 });
-export const Editor = ({ commentInputLoader, commentLoader, editable, handleUploadImage, onChange, previousContent = DEFAULT_CONTENT, }) => {
-    return (React.createElement(EditorContext.Provider, { value: { commentInputLoader, commentLoader } },
+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 }),

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

@@ -11,6 +11,7 @@ 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
  */
@@ -60,6 +61,7 @@ export const blocks = [
     createHSixPlugin(),
     createResetNodePlugin(),
     createTablePlugin(),
+    createVideoTitlePlugin(),
 ];
 export const marks = [
     createBoldPlugin(),

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

@@ -5,6 +5,7 @@ import { ELEMENT_QA } from '../constants';
 import { EditorContext } from '../context';
 import { Button } from '../../actions';
 import { Box } from '../../atoms/box';
+import { HideButRender } from '../../atoms/hide';
 import { H } from '../../atoms/typography';
 import { ChevronDown } from '../../../icons/arrow/chevron_down';
 import { ChevronUp } from '../../../icons/arrow/chevron_up';
@@ -13,10 +14,10 @@ export const QuestionAnswerElement = React.forwardRef(({ children, element, ...p
     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(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 },
+            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;
@@ -25,10 +26,12 @@ export const QuestionAnswerElement = React.forwardRef(({ children, element, ...p
               fill: var(--color-grey-3);
             }
             `, type: "text", ...{ contentEditable: false } }, showAnswers ? 'Hide answers' : 'Show answers'),
-                showAnswers && React.createElement(Comments, { questionAnswerId: questionAnswerId }),
+                React.createElement(HideButRender, { show: 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;

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.2.1",
+  "version": "1.3.2",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {