@soul-refiner/design-system 0.1.26 → 0.1.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.1.26",
+  "version": "0.1.28",
   "main": "src/index.ts",
   "license": "MIT",
   "publishConfig": {
@@ -47,7 +47,7 @@
   },
   "dependencies": {
     "@emoji-mart/react": "^1.1.1",
-    "@udecode/plate": "^21.1.2",
+    "@udecode/plate": "^22.0.1",
     "emoji-mart": "^5.5.2",
     "react": "^18.2.0",
     "react-dnd": "^16.0.1",
@@ -59,23 +59,24 @@
     "slate": "^0.94.1",
     "slate-history": "^0.93.0",
     "slate-hyperscript": "^0.77.0",
-    "slate-react": "^0.94.0",
+    "slate-react": "^0.97.1",
     "styled-components": "^6.0.0-rc.3"
   },
   "peerDependencies": {
     "@emoji-mart/react": "^1.1.1",
-    "@udecode/plate": "^21.1.2",
+    "@udecode/plate": "^22.0.1",
     "emoji-mart": "^5.5.2",
     "react": "^18.2.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
+    "react-tooltip": "^5.18.0",
     "scheduler": "^0.23.0",
     "slate": "^0.94.1",
     "slate-history": "^0.93.0",
     "slate-hyperscript": "^0.77.0",
-    "slate-react": "^0.94.0",
-    "styled-components": "^6.0.0-rc.1"
+    "slate-react": "^0.97.1",
+    "styled-components": "^6.0.0-rc.3"
   }
 }

package/src/components/atoms/typography/typography.tsx

@@ -42,6 +42,6 @@ export const Typography = styled.p<TypographyProps>`
   ${Styles.color}
   ${Styles.weight}
   ${Styles.typography}
-  ${Styles.textClamp}
   ${Styles.styleable}
+  ${({ $textClampLines }) => ($textClampLines ? Styles.textClamp : '')}
 `;

package/src/components/editor/constants.ts

@@ -1,6 +1,5 @@
 export {
   ELEMENT_BLOCKQUOTE,
-  ELEMENT_CODE_BLOCK,
   ELEMENT_CODE_LINE,
   ELEMENT_CODE_SYNTAX,
   ELEMENT_DEFAULT,
@@ -55,13 +54,13 @@ 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_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_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_SUBSCRIBE = 'button-subscribe';
 
 export const COLORS = [
@@ -86,103 +85,48 @@ export const DEFAULT_CONTENT = [
       },
     ],
   },
-  // {
-  //   id: "video-234jlnlknsdlkfjwlkjaa",
-  //   parentId: "course-1lk4j3k4jlkj2l4k2j34lkj",
-  //   children: [
-  //     {
-  //       text: "The DNA of a Warrior",
-  //     },
-  //   ],
-  //   captions: [],
-  //   duration: 3765,
-  //   source: "",
-  //   synopsis:
-  //     "Understanding the battlefield is the first key to winning the war for sexual purity. In this episode, you will discover hell's strategies against the 21st Century Church and be introduced to the four components of the noose of sexual bondage. Learn the first key steps to freedom and how to stay pure.",
-  //   thumbnail: "video-thumbnail.jpg",
-  //   title: "The DNA of a Warrior",
-  //   type: "video",
-  // },
-  // {
-  //   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.",
-  //     },
-  //     {
-  //       type: "footnote",
-  //       children: [
-  //         {
-  //           text: "This is a footnote",
-  //         },
-  //       ],
-  //     },
-  //     {
-  //       text: " What was once your deepest, darkest secret will now become the word of your testimony that heals and liberates others.",
-  //     },
-  //   ],
-  // },
-  // {
-  //   type: "q-n-a",
-  //   children: [
-  //     {
-  //       type: "p",
-  //       children: [
-  //         {
-  //           text: "Ask your question...",
-  //         },
-  //       ],
-  //     },
-  //   ],
-  // },
   {
     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: '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.',
       },
-      // {
-      //   type: "footnote",
-      //   children: [
-      //     {
-      //       text: "This is another footnote",
-      //     },
-      //   ],
-      // },
       {
-        text: '',
+        text: ' What was once your deepest, darkest secret will now become the word of your testimony that heals and liberates others.',
       },
     ],
   },
   {
-    type: 'blockquote',
+    type: 'p',
     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: '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: 'Dr. Doug Weiss',
-        italic: true,
+        text: '',
       },
     ],
   },
   {
-    type: 'hr',
+    type: 'blockquote',
     children: [
       {
-        text: '',
+        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— ',
       },
-    ],
-  },
-  {
-    type: 'h2',
-    children: [
       {
-        text: 'Lesson Overview',
-        bold: true,
+        text: 'Dr. Doug Weiss',
+        italic: true,
       },
     ],
   },
+  // {
+  //   type: 'hr',
+  //   children: [
+  //     {
+  //       text: '',
+  //     },
+  //   ],
+  // },
   {
     type: 'h3',
     align: 'center',
@@ -193,14 +137,14 @@ export const DEFAULT_CONTENT = [
       },
     ],
   },
-  {
-    type: 'hr',
-    children: [
-      {
-        text: '',
-      },
-    ],
-  },
+  // {
+  //   type: 'hr',
+  //   children: [
+  //     {
+  //       text: '',
+  //     },
+  //   ],
+  // },
   {
     type: 'img',
     url: 'https://source.unsplash.com/1600x900/?christian',
@@ -226,57 +170,6 @@ export const DEFAULT_CONTENT = [
       },
     ],
   },
-  {
-    type: 'code_block',
-    lang: 'typescript',
-    children: [
-      {
-        type: 'code_line',
-        children: [
-          {
-            text: 'const variable = "DO_NOT_USE"',
-          },
-        ],
-      },
-    ],
-  },
-  // {
-  //   type: "paywall",
-  //   children: [
-  //     {
-  //       type: "h2",
-  //       children: [
-  //         {
-  //           text: "Keep reading with a paid subscription",
-  //         },
-  //       ],
-  //     },
-  //     {
-  //       type: "p",
-  //       children: [
-  //         {
-  //           text: "Subscribe to ",
-  //         },
-  //         {
-  //           text: "Soul Refiner",
-  //           italic: true,
-  //         },
-  //         {
-  //           text: " to keep reading this content.",
-  //         },
-  //       ],
-  //     },
-  //     {
-  //       type: "button",
-  //       buttonType: "button-subscribe",
-  //       children: [
-  //         {
-  //           text: "Get Access",
-  //         },
-  //       ],
-  //     },
-  //   ],
-  // },
   {
     type: 'p',
     children: [

package/src/components/editor/editor.tsx

@@ -13,10 +13,15 @@ const plugins = createPlugins([...blocks, ...inline, ...marks, ...utils], {
 export interface EditorProps {
   communityName: string;
   editable: boolean;
+  handleUploadImage: (dataURL: File) => Promise<string>;
   onChange: (newNodes: TElement[]) => void;
 }
 
-export const Editor = ({ communityName, editable, onChange }: EditorProps) => {
+export const Editor = ({
+  editable,
+  handleUploadImage,
+  onChange,
+}: EditorProps) => {
   return (
     <PlateProvider
       id="main"
@@ -25,7 +30,7 @@ export const Editor = ({ communityName, editable, onChange }: EditorProps) => {
       plugins={plugins}
     >
       <Wrapper>
-        <EditorBar communityName={communityName} />
+        <EditorBar handleUploadImage={handleUploadImage} />
         <Plate
           id="main"
           editableProps={{
@@ -43,6 +48,44 @@ export const Editor = ({ communityName, editable, onChange }: EditorProps) => {
 const Wrapper = styled.div`
   * {
     font-family: Inter;
+    outline: none;
+  }
+
+  .slate-bold {
+    font-weight: 700;
+  }
+
+  .slate-italic {
+    font-style: italic;
+  }
+
+  .slate-strikethrough {
+    text-decoration: line-through;
+  }
+
+  .slate-underline {
+    text-decoration: underline;
+  }
+
+  li {
+    color: var(--color-grey-3);
+  }
+
+  .slate-code {
+    & > * {
+      font-family: 'Roboto Mono';
+      & > * {
+        font-family: 'Roboto Mono';
+        & > * {
+          font-family: 'Roboto Mono';
+        }
+      }
+    }
+
+    background-color: var(--color-grey-9);
+    padding: 0.4em 0.4em;
+    font-size: 0.8em;
+    line-height: 0.8em;
   }
 
   & > [data-slate-editor='true'] > * {

package/src/components/editor/navbar/alignment_dropdown.tsx

@@ -1,12 +1,14 @@
 import React from 'react';
 import {
   Alignment,
-  AlignToolbarButton,
-  isCollapsed,
+  // isCollapsed,
   PlateEditor,
   setAlign,
-  someNode,
 } from '@udecode/plate';
+import {
+  useAlignDropdownMenu,
+  useAlignDropdownMenuState,
+} from '@udecode/plate-alignment';
 import { Dropdown } from 'components';
 import {
   PlayerListPlay,
@@ -15,12 +17,41 @@ import {
   AlignLeft,
   AlignRight,
 } from 'icons';
+import { MenuButton } from './navbar';
 
 export interface AlignmentDropdownProps {
   editorRef: PlateEditor;
 }
 
+const items = [
+  {
+    value: 'left',
+    icon: AlignLeft,
+  },
+  {
+    value: 'center',
+    icon: AlignCenter,
+  },
+  {
+    value: 'right',
+    icon: AlignRight,
+  },
+  {
+    value: 'justify',
+    icon: AlignJustified,
+  },
+];
+
 export const AlignmentDropdown = ({ editorRef }: AlignmentDropdownProps) => {
+  const alignState = useAlignDropdownMenuState();
+  const { radioGroupProps } = useAlignDropdownMenu(alignState);
+
+  const current = radioGroupProps.value;
+
+  const IconValue =
+    items.find((item) => item.value === radioGroupProps.value)?.icon ??
+    PlayerListPlay;
+
   const handleAlign = (event: React.FormEvent) => {
     const value = (event.target as HTMLElement)?.getAttribute(
       'data-value'
@@ -33,62 +64,79 @@ export const AlignmentDropdown = ({ editorRef }: AlignmentDropdownProps) => {
     });
   };
 
-  const alignment = (() => {
-    if (!isCollapsed(editorRef?.selection)) {
-      return 'multiple-lines';
-    } else if (
-      someNode(editorRef, { match: { align: 'center' } }) ? true : undefined
-    ) {
-      return 'center';
-    } else if (
-      someNode(editorRef, { match: { align: 'right' } }) ? true : undefined
-    ) {
-      return 'right';
-    } else if (
-      someNode(editorRef, { match: { align: 'justify' } }) ? true : undefined
-    ) {
-      return 'justify';
-    } else {
-      return 'left';
-    }
-  })();
-
   return (
     <Dropdown
-      closeOnBlur={false}
-      closeOnChange={false}
       onChange={handleAlign}
+      offset={[0, 0]}
+      options={[
+        {
+          icon: (
+            <MenuButton $active={current === 'left'}>
+              <AlignLeft size={24} color="grey-5" />
+            </MenuButton>
+          ),
+          sx: 'gap: 0px; padding: 4px;',
+          value: 'left',
+        },
+        {
+          icon: (
+            <MenuButton $active={current === 'center'}>
+              <AlignCenter size={24} color="grey-5" />
+            </MenuButton>
+          ),
+          sx: 'gap: 0px; padding: 4px;',
+          value: 'center',
+        },
+        {
+          icon: (
+            <MenuButton $active={current === 'right'}>
+              <AlignRight size={24} color="grey-5" />
+            </MenuButton>
+          ),
+          sx: 'gap: 0px; padding: 4px;',
+          value: 'right',
+        },
+        {
+          icon: (
+            <MenuButton $active={current === 'justify'}>
+              <AlignJustified size={24} color="grey-5" />
+            </MenuButton>
+          ),
+          sx: 'gap: 0px; padding: 4px;',
+          value: 'justify',
+        },
+      ]}
       maintainState={false}
-      trigger={<PlayerListPlay size={24} color="grey-5" />}
-    >
-      <AlignToolbarButton
-        as="div"
-        active={alignment === 'left' ? true : undefined}
-        data-value="left"
-        value="left"
-        icon={<AlignLeft size={24} color="grey-5" />}
-      />
-      <AlignToolbarButton
-        as="div"
-        active={alignment === 'center' ? true : undefined}
-        data-value="center"
-        value="center"
-        icon={<AlignCenter size={24} color="grey-5" />}
-      />
-      <AlignToolbarButton
-        as="div"
-        active={alignment === 'right' ? true : undefined}
-        data-value="right"
-        value="right"
-        icon={<AlignRight size={24} color="grey-5" />}
-      />
-      <AlignToolbarButton
-        as="div"
-        active={alignment === 'justify' ? true : undefined}
-        data-value="justify"
-        value="justify"
-        icon={<AlignJustified size={24} color="grey-5" />}
-      />
-    </Dropdown>
+      trigger={<IconValue size={24} color="grey-5" />}
+    />
   );
 };
+
+// <AlignToolbarButton
+// as="div"
+// active={alignment === 'left' ? true : undefined}
+// data-value="left"
+// value="left"
+// icon={<AlignLeft size={24} color="grey-5" />}
+// />
+// <AlignToolbarButton
+// as="div"
+// active={alignment === 'center' ? true : undefined}
+// data-value="center"
+// value="center"
+// icon={<AlignCenter size={24} color="grey-5" />}
+// />
+// <AlignToolbarButton
+// as="div"
+// active={alignment === 'right' ? true : undefined}
+// data-value="right"
+// value="right"
+// icon={<AlignRight size={24} color="grey-5" />}
+// />
+// <AlignToolbarButton
+// as="div"
+// active={alignment === 'justify' ? true : undefined}
+// data-value="justify"
+// value="justify"
+// icon={<AlignJustified size={24} color="grey-5" />}
+// />

package/src/components/editor/navbar/button_modal.tsx

@@ -0,0 +1,146 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box, Button, H, Modal, P, Radio } from 'components';
+import { Close, InsertButton } from 'icons';
+import { MenuButton } from './navbar';
+import { BUTTON_LINK, BUTTON_SUBSCRIBE } from '../constants';
+
+interface ButtonModalProps {
+  onButtonInsert: (type: string) => void;
+}
+
+export const ButtonModal = ({ onButtonInsert }: ButtonModalProps) => {
+  const [buttonType, setButtonType] = React.useState<string | undefined>();
+
+  const handleButtonInsert = () => {
+    buttonType && onButtonInsert(buttonType);
+    setButtonType(undefined);
+  };
+
+  return (
+    <Modal>
+      <Modal.Trigger>
+        <MenuButton>
+          <InsertButton size={24} color="grey-5" />
+        </MenuButton>
+      </Modal.Trigger>
+      <Modal.Content sx="border-radius: 16px; max-width: 782px; width: 100%; margin: 24px; padding: 0px;">
+        <Box $dir="column">
+          <Box
+            $align="center"
+            $justify="space-between"
+            sx="padding: 24px; box-shadow: var(--elevation-2);"
+          >
+            <Box $align="center" $gap={32}>
+              <IconWrapper>
+                <InsertButton size={24} color="hue-blue-1" />
+              </IconWrapper>
+              <H $bold $color="hue-blue-1" $fontSize={20} $lineHeight={28}>
+                Insert Button
+              </H>
+            </Box>
+            <Close
+              size={24}
+              sx="&:hover { cursor: pointer; border-radius: 50%; background-color: var(--color-grey-9); }"
+            />
+          </Box>
+          <Box $dir="column" $gap={24} sx="padding: 24px 48px 24px 24px;">
+            <ButtonItem
+              active={buttonType === BUTTON_SUBSCRIBE}
+              description="A button encouraging the reader to purchase a paid subscription to your community"
+              onClick={() => setButtonType(BUTTON_SUBSCRIBE)}
+              title="Subscribe Now"
+            >
+              <Button size="small" sx="width: 130px;">
+                Subscribe
+              </Button>
+            </ButtonItem>
+            <ButtonItem
+              active={buttonType === BUTTON_LINK}
+              description="A button that links to a URL"
+              onClick={() => setButtonType(BUTTON_LINK)}
+              title="Link Button"
+            >
+              <Button size="small" sx="width: 130px;">
+                Link
+              </Button>
+            </ButtonItem>
+          </Box>
+          <Box
+            $padding={24}
+            $gap={16}
+            sx="padding: 24px; background-color: var(--color-white); border-top: 1px solid var(--color-grey-8);"
+          >
+            <Modal.Dismiss>
+              <Button
+                size="small"
+                sx="flex: 1;"
+                type="outlined"
+                onClick={() => setButtonType(undefined)}
+              >
+                Cancel
+              </Button>
+            </Modal.Dismiss>
+            <Modal.Dismiss>
+              <Button size="small" sx="flex: 1;" onClick={handleButtonInsert}>
+                Confirm
+              </Button>
+            </Modal.Dismiss>
+          </Box>
+        </Box>
+      </Modal.Content>
+    </Modal>
+  );
+};
+
+const IconWrapper = styled.div`
+  height: 48px;
+  width: 48px;
+  box-sizing: border-box;
+  padding: 12px;
+  border-radius: 8px;
+  background-color: var(--color-hue-blue-2);
+`;
+
+interface ButtonItemProps extends React.PropsWithChildren {
+  active?: boolean;
+  description: string;
+  onClick: () => void;
+  title: string;
+}
+
+const ButtonItem = ({
+  active,
+  children,
+  description,
+  onClick,
+  title,
+}: ButtonItemProps) => (
+  <Box
+    $dir="column"
+    onClick={onClick}
+    sx="border-radius: 16px; box-shadow: var(--elevation-2); cursor: pointer;"
+  >
+    <Box
+      sx={`
+        padding: 24px; 
+        background-color: var(--color-blue-10);
+        border-radius: 8px 8px 0px 0px;
+        border-bottom: 1px solid var(--color-grey-9);
+      `}
+    >
+      <Radio checked={!!active} sx="align-items: flex-start;" value={title} />
+      <Box $dir="column">
+        <P $semiBold>{title}</P>
+        <P>{description}</P>
+      </Box>
+    </Box>
+    <Box
+      $align="center"
+      $justify="center"
+      sx="border-radius: 0px 0px 8px 8px; padding: 24px;"
+    >
+      {children}
+    </Box>
+  </Box>
+);