@soul-refiner/design-system 0.1.25 → 0.1.27

package/src/components/editor/plugins/image.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import styled from 'styled-components';
+import {
+  Box,
+  Caption,
+  CaptionTextarea,
+  Image,
+  PlateElement,
+  PlateElementProps,
+  Resizable,
+  TImageElement,
+  useMediaState,
+  Value,
+} from '@udecode/plate';
+import { useReadOnly } from 'slate-react';
+
+const align = 'center';
+
+export const ImageElement = ({
+  ...props
+}: PlateElementProps<Value, TImageElement>) => {
+  const { children, nodeProps } = props;
+
+  const readOnly = useReadOnly();
+
+  useMediaState();
+
+  return (
+    <PlateElement {...props}>
+      <Figure className="group" contentEditable={false}>
+        <Resizable
+          style={{
+            alignItems: 'center',
+            width: '100%',
+            maxWidth: '100%',
+            marginLeft: 'auto',
+            marginRight: 'auto',
+          }}
+          options={{
+            renderHandleLeft: (htmlProps) => <Box {...htmlProps} />,
+            renderHandleRight: (htmlProps) => <Box {...htmlProps} />,
+            align,
+            readOnly,
+          }}
+        >
+          <Image {...nodeProps} />
+        </Resizable>
+        <Caption className="HERE">
+          <Textarea
+            $readOnly={readOnly}
+            placeholder="Write a caption..."
+            readOnly={readOnly}
+          />
+        </Caption>
+      </Figure>
+      {children}
+    </PlateElement>
+  );
+};
+
+const Figure = styled.figure`
+  position: relative;
+  margin: 0px;
+  width: 100%;
+
+  img {
+    width: 100%;
+  }
+`;
+
+const Textarea = styled(CaptionTextarea)<{ $readOnly: boolean }>`
+  width: 100%;
+  padding: 8px 16px;
+  box-sizing: border-box;
+  text-align: center;
+  resize: none;
+  outline: none;
+  border: 1px solid
+    ${({ $readOnly }) => ($readOnly ? 'transparent' : 'var(--color-grey-9)')};
+`;

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

@@ -0,0 +1,165 @@
+/**
+ * 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 { createButtonsPlugin } from './buttons';
+import { exitBreakPlugin } from './exitBreak';
+import { resetBlockTypePlugin } from './resetBlockType';
+import { selectOnBackspace } from './selectOnBackspace';
+import { softBreakPlugin } from './softBreak';
+import {
+  createParagraphPlugin,
+  createHOnePlugin,
+  createHTwoPlugin,
+  createHThreePlugin,
+  createHFourPlugin,
+  createHFivePlugin,
+  createHSixPlugin,
+} from './text';
+
+import { LinkFloatingMenu } from './link';
+
+/**
+ * ELEMENT TYPES
+ */
+import {
+  ELEMENT_PARAGRAPH,
+  ELEMENT_H1,
+  ELEMENT_H2,
+  ELEMENT_H3,
+  ELEMENT_H4,
+  ELEMENT_H5,
+  ELEMENT_H6,
+  ELEMENT_OL,
+  ELEMENT_UL,
+} from '../constants';
+
+/**
+ * ELEMENT TYPES
+ */
+export const blocks = [
+  createButtonsPlugin(),
+  createBlockquotePlugin(),
+  createCodeBlockPlugin(),
+  createHeadingPlugin(),
+  createHorizontalRulePlugin(),
+  createImagePlugin({
+    options: {
+      disableUploadInsert: true,
+      disableCaption: true,
+      disableEmbedInsert: true,
+    },
+  }),
+  createTextIndentPlugin(),
+  createIndentListPlugin({
+    inject: {
+      props: {
+        validTypes: [
+          ELEMENT_PARAGRAPH,
+          ELEMENT_H1,
+          ELEMENT_H2,
+          ELEMENT_H3,
+          ELEMENT_H4,
+          ELEMENT_H5,
+          ELEMENT_H6,
+          ELEMENT_OL,
+          ELEMENT_UL,
+        ],
+      },
+    },
+  }),
+  createListPlugin(),
+  createMediaEmbedPlugin(),
+  createParagraphPlugin(),
+  createHOnePlugin(),
+  createHTwoPlugin(),
+  createHThreePlugin(),
+  createHFourPlugin(),
+  createHFivePlugin(),
+  createHSixPlugin(),
+  // createPaywallPlugin(),
+  // createQAPlugin(),
+  createResetNodePlugin(),
+  createTablePlugin(),
+  // createVideoPlugin(),
+];
+
+export const marks = [
+  createBoldPlugin(),
+  createCodePlugin(),
+  createFontBackgroundColorPlugin(),
+  createFontSizePlugin(),
+  createFontFamilyPlugin(),
+  createItalicPlugin(),
+  createStrikethroughPlugin(),
+  createSubscriptPlugin(),
+  createSuperscriptPlugin(),
+  createUnderlinePlugin(),
+];
+
+export const inline = [
+  createAlignPlugin({
+    inject: {
+      props: {
+        validTypes: [
+          ELEMENT_PARAGRAPH,
+          ELEMENT_H1,
+          ELEMENT_H2,
+          ELEMENT_H3,
+          ELEMENT_H4,
+          ELEMENT_H5,
+          ELEMENT_H6,
+        ],
+      },
+    },
+  }),
+  createIndentPlugin({
+    inject: {
+      props: {
+        validTypes: [ELEMENT_PARAGRAPH, ELEMENT_H1],
+      },
+    },
+  }),
+  createLineHeightPlugin(),
+  createLinkPlugin({
+    renderAfterEditable: LinkFloatingMenu,
+  }),
+];
+
+export const utils = [
+  createExitBreakPlugin(exitBreakPlugin),
+  createHistoryPlugin(),
+  createResetNodePlugin(resetBlockTypePlugin),
+  createSelectOnBackspacePlugin(selectOnBackspace),
+  createSoftBreakPlugin(softBreakPlugin),
+];

package/src/components/editor/plugins/link.tsx

@@ -0,0 +1,144 @@
+import React from 'react';
+import styled from 'styled-components';
+import {
+  FloatingLinkUrlInput,
+  LinkOpenButton,
+  PlateElement,
+  PlateElementProps,
+  TEditableProps,
+  TLinkElement,
+  useFloatingLinkEdit,
+  useFloatingLinkEditState,
+  useFloatingLinkInsert,
+  useFloatingLinkInsertState,
+  useFloatingLinkSelectors,
+  useLink,
+  Value,
+} from '@udecode/plate';
+import { Box } from 'components';
+import { AASansSerif, Link, Upload } from 'icons';
+
+export const LinkElement = React.forwardRef<
+  React.ElementRef<typeof PlateElement>,
+  PlateElementProps<Value, TLinkElement>
+>(({ children, ...props }, ref) => {
+  const { props: linkProps } = useLink({ element: props.element });
+
+  return (
+    <PlateElement asChild ref={ref} {...linkProps} {...(props as any)}>
+      <a>{children}</a>
+    </PlateElement>
+  );
+});
+
+export const LinkFloatingMenu = ({ readOnly }: TEditableProps) => {
+  const isEditing = useFloatingLinkSelectors().isEditing();
+
+  const state = useFloatingLinkInsertState();
+  const {
+    props: insertProps,
+    ref: insertRef,
+    textInputProps,
+  } = useFloatingLinkInsert(state);
+
+  const editState = useFloatingLinkEditState();
+  const {
+    props: editProps,
+    ref: editRef,
+    editButtonProps,
+  } = useFloatingLinkEdit(editState);
+
+  if (readOnly) return null;
+
+  const input = (
+    <Box
+      $dir="column"
+      sx={`
+        background-color: var(--color-white);
+        gap: 16px;
+        padding: 16px;
+        border-radius: 16px;
+        box-shadow: var(--elevation-2);
+      `}
+    >
+      <Box $align="center" $justify="center" $gap={8}>
+        <Box $align="center" $justify="center">
+          <Link />
+        </Box>
+        <FloatingLinkUrlInput
+          style={{
+            border: 'none',
+            outline: 'none',
+            padding: '8px 12px',
+          }}
+          placeholder="Paste link"
+        />
+      </Box>
+      <Box $align="center" $justify="center" $gap={8}>
+        <Box $align="center" $justify="center">
+          <AASansSerif />
+        </Box>
+        <Input placeholder="Text to display" {...textInputProps} />
+      </Box>
+    </Box>
+  );
+
+  const editContent = isEditing ? (
+    input
+  ) : (
+    <Box
+      $align="center"
+      $justify="center"
+      sx={`
+        box-sizing: box-content;
+        background-color: var(--color-white);
+        gap: 8px;
+        padding: 16px;
+        border-radius: 16px;
+        box-shadow: var(--elevation-2);
+
+        a,
+        button {
+          padding: 8px 12px;
+          background-color: transparent;
+          outline: none;
+          border: none;
+          border-radius: 8px;
+          cursor: pointer;
+          width: max-content;
+          font-size: 16px;
+          line-height: 16px;
+
+          &:hover {
+            background-color: var(--color-grey-9);
+          }
+        }
+      `}
+      $gap={8}
+    >
+      <button type="button" {...editButtonProps}>
+        Edit link
+      </button>
+      <LinkOpenButton>
+        <Upload />
+      </LinkOpenButton>
+    </Box>
+  );
+
+  return (
+    <>
+      <div ref={insertRef} {...insertProps}>
+        {input}
+      </div>
+      <div ref={editRef} {...editProps}>
+        {editContent}
+      </div>
+    </>
+  );
+};
+
+const Input = styled.input`
+  border: none;
+  outline: none;
+  padding: 8px 12px;
+`;

package/src/components/editor/plugins/list.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { PlateElement, PlateElementProps } from '@udecode/plate';
+import { styled } from 'styled-components';
+
+export const ListElement = ({
+  children,
+  variant = 'ul',
+  ...props
+}: PlateElementProps & {
+  variant: 'ul' | 'ol';
+}) => {
+  const Element = variant;
+
+  return (
+    <PlateElement asChild {...props}>
+      <>
+        <Element>
+          {React.Children.map(children, (child) => (
+            <Li>{child}</Li>
+          ))}
+        </Element>
+      </>
+    </PlateElement>
+  );
+};
+
+const Li = styled.li`
+  margin: 16px 0px;
+  padding-left: 8px;
+
+  &::marker {
+    color: var(--color-grey-4);
+  }
+`;

package/src/components/editor/plugins/resetBlockType.ts

@@ -0,0 +1,29 @@
+import { isBlockAboveEmpty, isSelectionAtBlockStart } from '@udecode/plate';
+
+import {
+  ELEMENT_BLOCKQUOTE,
+  ELEMENT_PARAGRAPH,
+  ELEMENT_TODO_LI,
+} from '../constants';
+
+const resetBlockTypesCommonRule = {
+  types: [ELEMENT_BLOCKQUOTE, ELEMENT_TODO_LI],
+  defaultType: ELEMENT_PARAGRAPH,
+};
+
+export const resetBlockTypePlugin = {
+  options: {
+    rules: [
+      {
+        ...resetBlockTypesCommonRule,
+        hotkey: 'Enter',
+        predicate: isBlockAboveEmpty,
+      },
+      {
+        ...resetBlockTypesCommonRule,
+        hotkey: 'Backspace',
+        predicate: isSelectionAtBlockStart,
+      },
+    ],
+  },
+};

package/src/components/editor/plugins/selectOnBackspace.ts

@@ -0,0 +1,7 @@
+import { ELEMENT_HR, ELEMENT_IMAGE, ELEMENT_MEDIA_EMBED } from '../constants';
+
+export const selectOnBackspace = {
+  options: {
+    query: { allow: [ELEMENT_HR, ELEMENT_IMAGE, ELEMENT_MEDIA_EMBED] },
+  },
+};

package/src/components/editor/plugins/softBreak.ts

@@ -0,0 +1,19 @@
+import {
+  ELEMENT_BLOCKQUOTE,
+  ELEMENT_CODE_BLOCK,
+  ELEMENT_TD,
+} from '@udecode/plate';
+
+export const softBreakPlugin = {
+  options: {
+    rules: [
+      { hotkey: 'shift+enter' },
+      {
+        hotkey: 'enter',
+        query: {
+          allow: [ELEMENT_CODE_BLOCK, ELEMENT_BLOCKQUOTE, ELEMENT_TD],
+        },
+      },
+    ],
+  },
+};

package/src/components/editor/plugins/text.tsx

@@ -0,0 +1,142 @@
+import React from 'react';
+import {
+  createPluginFactory,
+  PlateElement,
+  PlateElementProps,
+  PlateRenderElementProps,
+} from '@udecode/plate';
+import { H, P } from 'components';
+import * as Elements from '../constants';
+
+export const ParagraphElement = React.forwardRef<
+  React.ElementRef<typeof PlateElement>,
+  PlateElementProps
+>(({ children, ...props }: PlateRenderElementProps, ref) => {
+  return (
+    <PlateElement asChild ref={ref} {...props}>
+      <>
+        <P as="div">{children}</P>
+      </>
+    </PlateElement>
+  );
+});
+
+export const createParagraphPlugin = createPluginFactory({
+  key: Elements.ELEMENT_PARAGRAPH,
+  type: Elements.ELEMENT_PARAGRAPH,
+  isElement: true,
+});
+
+export const HOneElement = React.forwardRef<
+  React.ElementRef<typeof PlateElement>,
+  PlateElementProps
+>(({ children, ...props }: PlateRenderElementProps, ref) => {
+  return (
+    <PlateElement asChild ref={ref} {...props}>
+      <>
+        <H.One>{children}</H.One>
+      </>
+    </PlateElement>
+  );
+});
+
+export const createHOnePlugin = createPluginFactory({
+  key: Elements.ELEMENT_H1,
+  type: Elements.ELEMENT_H1,
+  isElement: true,
+});
+
+export const HTwoElement = React.forwardRef<
+  React.ElementRef<typeof PlateElement>,
+  PlateElementProps
+>(({ children, ...props }: PlateRenderElementProps, ref) => {
+  return (
+    <PlateElement asChild ref={ref} {...props}>
+      <>
+        <H.Two>{children}</H.Two>
+      </>
+    </PlateElement>
+  );
+});
+
+export const createHTwoPlugin = createPluginFactory({
+  key: Elements.ELEMENT_H2,
+  type: Elements.ELEMENT_H2,
+  isElement: true,
+});
+
+export const HThreeElement = React.forwardRef<
+  React.ElementRef<typeof PlateElement>,
+  PlateElementProps
+>(({ children, ...props }: PlateRenderElementProps, ref) => {
+  return (
+    <PlateElement asChild ref={ref} {...props}>
+      <>
+        <H.Three>{children}</H.Three>
+      </>
+    </PlateElement>
+  );
+});
+
+export const createHThreePlugin = createPluginFactory({
+  key: Elements.ELEMENT_H3,
+  type: Elements.ELEMENT_H3,
+  isElement: true,
+});
+
+export const HFourElement = React.forwardRef<
+  React.ElementRef<typeof PlateElement>,
+  PlateElementProps
+>(({ children, ...props }: PlateRenderElementProps, ref) => {
+  return (
+    <PlateElement asChild ref={ref} {...props}>
+      <>
+        <H.Four>{children}</H.Four>
+      </>
+    </PlateElement>
+  );
+});
+
+export const createHFourPlugin = createPluginFactory({
+  key: Elements.ELEMENT_H4,
+  type: Elements.ELEMENT_H4,
+  isElement: true,
+});
+
+export const HFiveElement = React.forwardRef<
+  React.ElementRef<typeof PlateElement>,
+  PlateElementProps
+>(({ children, ...props }: PlateRenderElementProps, ref) => {
+  return (
+    <PlateElement asChild ref={ref} {...props}>
+      <>
+        <H.Five>{children}</H.Five>
+      </>
+    </PlateElement>
+  );
+});
+
+export const createHFivePlugin = createPluginFactory({
+  key: Elements.ELEMENT_H5,
+  type: Elements.ELEMENT_H5,
+  isElement: true,
+});
+
+export const HSixElement = React.forwardRef<
+  React.ElementRef<typeof PlateElement>,
+  PlateElementProps
+>(({ children, ...props }: PlateRenderElementProps, ref) => {
+  return (
+    <PlateElement asChild ref={ref} {...props}>
+      <>
+        <H.Six>{children}</H.Six>
+      </>
+    </PlateElement>
+  );
+});
+
+export const createHSixPlugin = createPluginFactory({
+  key: Elements.ELEMENT_H6,
+  type: Elements.ELEMENT_H6,
+  isElement: true,
+});

package/src/components/index.ts

@@ -1,6 +1,7 @@
 export * from './actions';
 export * from './atoms';
 export * from './card';
+export * from './editor';
 export * from './feedback';
 export * from './iconography';
 export * from './input';

package/src/components/input/radio/radio.tsx

@@ -18,7 +18,7 @@ export interface RadioProps extends NativeProps {
   checked: boolean;
   disabled?: boolean;
   label?: string;
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   name?: string;
   reversed?: boolean;
   sx?: string;
@@ -37,7 +37,7 @@ const Radio = ({
 }: RadioProps) => {
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     event.stopPropagation();
-    onChange(event);
+    onChange && onChange(event);
   };
 
   return (

package/src/components/surfaces/modal/modal.tsx

@@ -47,6 +47,7 @@ Modal.Trigger = ModalTrigger;
 
 const ModalDismiss = ({
   children: child,
+
   setClosed,
 }: {
   children: React.ReactElement;
@@ -73,6 +74,7 @@ export interface ModalContentProps extends React.PropsWithChildren {
   footer?: React.ReactElement;
   header?: React.ReactElement;
   setClosed?: () => void;
+  sx?: string;
 }
 
 const ModalContent = ({
@@ -81,6 +83,7 @@ const ModalContent = ({
   footer,
   header,
   setClosed,
+  sx,
   ...props
 }: ModalContentProps) => {
   const [open, setOpen] = React.useContext(ModalContext);
@@ -96,7 +99,7 @@ const ModalContent = ({
       $open={open}
       onClick={handleOutsideClick}
     >
-      <Content {...props}>
+      <Content {...props} $sx={sx}>
         {header && (
           <div className="header">
             <div>{header}</div>
@@ -144,7 +147,7 @@ const Wrapper = styled.div<{
   overflow: hidden;
 `;
 
-const Content = styled.div`
+const Content = styled.div<{ $sx?: string }>`
   position: absolute;
   z-index: 101;
   background-color: var(--color-white);
@@ -169,4 +172,5 @@ const Content = styled.div`
     position: relative;
     padding-top: 16px;
   }
+  ${({ $sx }) => ($sx ? $sx : '')}
 `;

package/src/icons/text/align_justified.tsx

@@ -7,7 +7,7 @@ export const AlignJustified = (props: IconProps) => {
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M14.6673 4.66671V3.33337H1.33398V4.66671H14.6673ZM12.6673 6.00004V7.33337H3.33398V6.00004H12.6673ZM14.6673 10V8.66671H1.33398V10H14.6673ZM12.6673 12.6667V11.3334H3.33398V12.6667H12.6673Z"
+        d="M14.6673 4.66671V3.33337H1.33398V4.66671H14.6673ZM14.6673 6.00004V7.33337H1.33398V6.00004H14.6673ZM14.6673 10V8.66671H1.33398V10H14.6673ZM14.6673 12.6667V11.3334H1.33398V12.6667H14.6673Z"
       />
     </Icon>
   );