@soul-refiner/design-system 0.1.25 → 0.1.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.1.25",
+  "version": "0.1.27",
   "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/actions/dropdown/dropdown.tsx

@@ -180,7 +180,8 @@ const Dropdown = ({
     >
       {React.cloneElement(
         trigger,
-        typeof trigger.type === 'string'
+        typeof trigger.type === 'string' ||
+          (trigger.type as any)?.displayName !== 'Button'
           ? { onClick: handleOpen }
           : { isDropdownOpen: open, onClick: handleOpen }
       )}
@@ -254,7 +255,7 @@ export interface DropdownOptionProps {
   color?: string;
   disabled?: boolean;
   icon?: React.ReactElement;
-  label: React.ReactNode;
+  label?: React.ReactNode;
   onClick?: (event: React.MouseEvent<HTMLDivElement>) => void | undefined;
   selected: boolean;
   sublabel?: string;
@@ -285,15 +286,17 @@ const Option = ({
     >
       {checkbox ? <Checkbox selected={selected} /> : icon}
       <Box $dir="column" $display="flex">
-        <P
-          $color="grey-4"
-          $fontSize={14}
-          $lineHeight={20}
-          $mediumBold
-          $textClampLines={1}
-        >
-          {label}
-        </P>
+        {label && (
+          <P
+            $color="grey-4"
+            $fontSize={14}
+            $lineHeight={20}
+            $mediumBold
+            $textClampLines={1}
+          >
+            {label}
+          </P>
+        )}
         {sublabel && (
           <P
             $color="grey-4"

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

@@ -0,0 +1,181 @@
+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 = [
+  'var(--color-turquoise-5)',
+  'var(--color-green-5)',
+  'var(--color-blue-5)',
+  'var(--color-purple-5)',
+  'var(--color-yellow-5)',
+  'var(--color-orange-5)',
+  'var(--color-red-5)',
+];
+
+export const PLACEHOLDER = 'This is a placeholder';
+
+export const DEFAULT_CONTENT = [
+  {
+    type: 'h1',
+    children: [
+      {
+        text: 'Module 1:  The Warrior Identity',
+        bold: true,
+      },
+    ],
+  },
+  {
+    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/src/components/editor/editor.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import styled from 'styled-components';
+import { createPlugins, Plate, PlateProvider, TElement } from '@udecode/plate';
+import { DEFAULT_CONTENT, PLACEHOLDER } from './constants';
+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 interface EditorProps {
+  communityName: string;
+  editable: boolean;
+  handleUploadImage: (dataURL: File) => Promise<string>;
+  onChange: (newNodes: TElement[]) => void;
+}
+
+export const Editor = ({
+  editable,
+  handleUploadImage,
+  onChange,
+}: EditorProps) => {
+  return (
+    <PlateProvider
+      id="main"
+      initialValue={DEFAULT_CONTENT}
+      onChange={onChange}
+      plugins={plugins}
+    >
+      <Wrapper>
+        <EditorBar handleUploadImage={handleUploadImage} />
+        <Plate
+          id="main"
+          editableProps={{
+            readOnly: !editable,
+            spellCheck: true,
+            autoFocus: true,
+            placeholder: PLACEHOLDER,
+          }}
+        />
+      </Wrapper>
+    </PlateProvider>
+  );
+};
+
+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;
+  }
+
+  .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'] > * {
+    margin: 24px 0px;
+  }
+
+  position: relative;
+  padding: 24px;
+  max-width: 1200px;
+  margin: 98px auto 0px;
+`;

package/src/components/editor/index.ts

@@ -0,0 +1,2 @@
+export { Editor } from './editor';
+export type { EditorProps } from './editor';

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

@@ -0,0 +1,142 @@
+import React from 'react';
+import {
+  Alignment,
+  // isCollapsed,
+  PlateEditor,
+  setAlign,
+} from '@udecode/plate';
+import {
+  useAlignDropdownMenu,
+  useAlignDropdownMenuState,
+} from '@udecode/plate-alignment';
+import { Dropdown } from 'components';
+import {
+  PlayerListPlay,
+  AlignCenter,
+  AlignJustified,
+  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'
+    ) as Alignment | null;
+
+    if (!value) return;
+
+    setAlign(editorRef, {
+      value: value,
+    });
+  };
+
+  return (
+    <Dropdown
+      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={<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>
+);

package/src/components/editor/navbar/index.ts

@@ -0,0 +1,2 @@
+export { EditorBar } from './navbar';
+export type { EditorBarProps } from './navbar';