@soul-refiner/design-system 0.1.38 → 0.1.39

package/src/components/editor/constants.ts

@@ -1,181 +0,0 @@
-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

@@ -1,101 +0,0 @@
-'use client';
-
-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;
-  }
-
-  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'] > * {
-    margin: 24px 0px;
-  }
-
-  position: relative;
-  padding: 24px;
-  max-width: 1200px;
-  margin: 98px auto 0px;
-`;

package/src/components/editor/index.ts

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

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

@@ -1,137 +0,0 @@
-import React from 'react';
-import { Alignment, PlateEditor, setAlign } from '@udecode/plate';
-import {
-  useAlignDropdownMenu,
-  useAlignDropdownMenuState,
-} from '@udecode/plate-alignment';
-import { Dropdown } from '../../';
-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

@@ -1,146 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { Box, Button, H, Modal, P, Radio } from '../../';
-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

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