@soul-refiner/design-system 0.2.18 → 0.2.20

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

@@ -1,2 +1,4 @@
 export { Editor } from './editor';
 export type { EditorProps } from './editor';
+export { SimpleEditor } from './simple_editor';
+export type { SimpleEditorProps } from './simple_editor';

package/dist/components/editor/index.js

@@ -1 +1,2 @@
 export { Editor } from './editor';
+export { SimpleEditor } from './simple_editor';

package/dist/components/editor/navbar/alignment_dropdown.js

@@ -2,7 +2,11 @@ import React from 'react';
 import { setAlign } from '@udecode/plate';
 import { useAlignDropdownMenu, useAlignDropdownMenuState, } from '@udecode/plate-alignment';
 import { Dropdown } from '../../';
-import { PlayerListPlay, AlignCenter, AlignJustified, AlignLeft, AlignRight, } from '../../../icons';
+import { AlignCenter } from '../../../icons/text/align_center';
+import { AlignJustified } from '../../../icons/text/align_justified';
+import { AlignLeft } from '../../../icons/text/align_left';
+import { AlignRight } from '../../../icons/text/align_right';
+import { PlayerListPlay } from '../../../icons';
 import { MenuButton } from './navbar';
 const items = [
     {

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { createPluginFactory, PlateElement, } from '@udecode/plate';
-import { H, P } from '../../';
+import { P } from '../../atoms/typography/paragraph';
+import { H } from '../../atoms/typography/heading';
 import * as Elements from '../constants';
 export const ParagraphElement = React.forwardRef(({ children, ...props }, ref) => {
     const textAlign = props?.style?.textAlign;

package/dist/components/editor/simple_editor/index.d.ts

@@ -0,0 +1,2 @@
+export { SimpleEditor } from './simple_editor';
+export type { SimpleEditorProps } from './simple_editor';

package/dist/components/editor/simple_editor/index.js

@@ -0,0 +1 @@
+export { SimpleEditor } from './simple_editor';

package/dist/components/editor/simple_editor/navbar.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface EditorBarProps {
+    handleUploadImage: (dataURL: File) => Promise<string>;
+}
+export declare const EditorBar: ({ handleUploadImage }: EditorBarProps) => React.JSX.Element;
+export declare const MenuButton: import("styled-components").IStyledComponent<"web", "button", {
+    $active?: boolean | undefined;
+}, never>;

package/dist/components/editor/simple_editor/navbar.js

@@ -0,0 +1,127 @@
+import React from 'react';
+import styled from 'styled-components';
+import { insertImage, useLinkToolbarButton, useLinkToolbarButtonState, useListToolbarButton, useListToolbarButtonState, useMarkToolbarButton, useMarkToolbarButtonState, usePlateEditorRef, } from '@udecode/plate';
+import { Tooltip } from '../../';
+import { Bold, Image, Italic, Link, ListOrdered, ListUnordered, Redo, Underline, Undo, } from '../../../icons';
+import { ELEMENT_OL, ELEMENT_UL, MARK_BOLD, MARK_ITALIC, MARK_UNDERLINE, } from '../constants';
+export const EditorBar = ({ handleUploadImage }) => {
+    const editorRef = usePlateEditorRef('main');
+    const imageRef = React.useRef(null);
+    const boldState = useMarkToolbarButtonState({ nodeType: MARK_BOLD });
+    const { props: { pressed: currBold, onClick: handleBold }, } = useMarkToolbarButton(boldState);
+    const italicState = useMarkToolbarButtonState({ nodeType: MARK_ITALIC });
+    const { props: { pressed: currItalic, onClick: handleItalic }, } = useMarkToolbarButton(italicState);
+    const underlineState = useMarkToolbarButtonState({
+        nodeType: MARK_UNDERLINE,
+    });
+    const { props: { pressed: currUnderline, onClick: handleUnderline }, } = useMarkToolbarButton(underlineState);
+    const linkState = useLinkToolbarButtonState();
+    const { props: { pressed: currLink, onClick: handleLink }, } = useLinkToolbarButton(linkState);
+    const orderedListState = useListToolbarButtonState({ nodeType: ELEMENT_OL });
+    const { props: { pressed: currOrderedList, onClick: handleOrderedList }, } = useListToolbarButton(orderedListState);
+    const unorderedListState = useListToolbarButtonState({
+        nodeType: ELEMENT_UL,
+    });
+    const { props: { pressed: currUnorderedList, onClick: handleUnorderedList }, } = useListToolbarButton(unorderedListState);
+    const handleImageChange = async (event) => {
+        const file = event.target?.files?.[0];
+        if (!file)
+            return;
+        const imageurl = await handleUploadImage(file);
+        if (imageurl) {
+            insertImage(editorRef, imageurl);
+        }
+    };
+    const handleRedo = () => editorRef.redo();
+    const handleUndo = () => editorRef.undo();
+    return (React.createElement(Menu, { "aria-label": "editor-navigation" },
+        React.createElement(MenuSection, null,
+            React.createElement(Tooltip, { content: "Undo", place: "top" },
+                React.createElement(MenuButton, { "$active": false, onClick: handleUndo },
+                    React.createElement(Undo, { size: 24, color: "grey-5" }))),
+            React.createElement(Tooltip, { content: "Redo", place: "top" },
+                React.createElement(MenuButton, { "$active": false, onClick: handleRedo },
+                    React.createElement(Redo, { size: 24, color: "grey-5" })))),
+        React.createElement(Divider, null),
+        React.createElement(MenuSection, null,
+            React.createElement(Tooltip, { content: "Bold", place: "top" },
+                React.createElement(MenuButton, { "$active": currBold, onClick: handleBold },
+                    React.createElement(Bold, { size: 24, color: "grey-5" }))),
+            React.createElement(Tooltip, { content: "Italic", place: "top" },
+                React.createElement(MenuButton, { "$active": currItalic, onClick: handleItalic },
+                    React.createElement(Italic, { size: 24, color: "grey-5" }))),
+            React.createElement(Tooltip, { content: "Underline", place: "top" },
+                React.createElement(MenuButton, { "$active": currUnderline, onClick: handleUnderline },
+                    React.createElement(Underline, { size: 24, color: "grey-5" })))),
+        React.createElement(Divider, null),
+        React.createElement(MenuSection, null,
+            React.createElement(Tooltip, { content: "Link", place: "top" },
+                React.createElement(MenuButton, { "$active": currLink, onClick: handleLink },
+                    React.createElement(Link, { size: 24, color: "grey-5" }))),
+            React.createElement(Tooltip, { content: "Image", place: "top" },
+                React.createElement(MenuButton, { "$active": false, as: "label", onChange: handleImageChange },
+                    React.createElement("div", { onClick: () => imageRef.current?.click() },
+                        React.createElement("input", { accept: "image/*", ref: imageRef, style: { display: 'none' }, type: "file" }),
+                        React.createElement(Image, { size: 24, color: "grey-5" }))))),
+        React.createElement(Divider, null),
+        React.createElement(MenuSection, null,
+            React.createElement(Tooltip, { content: "Unordered List", place: "top" },
+                React.createElement(MenuButton, { "$active": currUnorderedList, onClick: handleUnorderedList },
+                    React.createElement(ListUnordered, { size: 24, color: "grey-5" }))),
+            React.createElement(Tooltip, { content: "Ordered List", place: "top" },
+                React.createElement(MenuButton, { "$active": currOrderedList, onClick: handleOrderedList },
+                    React.createElement(ListOrdered, { size: 24, color: "grey-5" }))))));
+};
+const Menu = styled.nav `
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  max-width: 1200px;
+  margin: 0;
+  padding: 14px 24px;
+  background-color: var(--color-white);
+  box-sizing: border-box;
+  border-radius: 8px 8px 0px 0px;
+  box-shadow: var(--elevation-1);
+`;
+const MenuSection = styled.div `
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  width: fit-content;
+  flex-shrink: 0;
+`;
+export const MenuButton = styled.button `
+  padding: 2px;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  box-sizing: border-box;
+  height: 28px;
+  width: 28px;
+  border-radius: 2px;
+
+  &:hover:not(:disabled) {
+    padding: 1px;
+    border: 1px solid var(--color-grey-8);
+  }
+
+  &:active:not(:disabled) {
+    background-color: var(--color-grey-9);
+  }
+
+  &:disabled {
+    background-color: var(--color-white) !important;
+    cursor: initial;
+    svg {
+      fill: var(--color-grey-7) !important;
+    }
+  }
+
+  background-color: ${({ $active }) => $active ? 'var(--color-grey-9)' : 'transparent'};
+`;
+const Divider = styled.div `
+  width: 1px;
+  height: 28px;
+  background-color: var(--color-grey-9);
+`;

package/dist/components/editor/simple_editor/plugins.d.ts

@@ -0,0 +1 @@
+export declare const plugins: import("@udecode/plate").PlatePlugin<any, import("@udecode/plate").Value, import("@udecode/plate").PlateEditor<import("@udecode/plate").Value>>[];

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

@@ -0,0 +1,90 @@
+import { createPlugins, createHeadingPlugin, createIndentListPlugin, createImagePlugin, createTextIndentPlugin, createListPlugin, createMediaEmbedPlugin, createResetNodePlugin, createBoldPlugin, createCodePlugin, createFontBackgroundColorPlugin, createFontSizePlugin, createFontFamilyPlugin, createItalicPlugin, createStrikethroughPlugin, createSubscriptPlugin, createSuperscriptPlugin, createUnderlinePlugin, createAlignPlugin, createIndentPlugin, createLineHeightPlugin, createLinkPlugin, createExitBreakPlugin, createHistoryPlugin, createSelectOnBackspacePlugin, createSoftBreakPlugin, } from '@udecode/plate';
+import { createParagraphPlugin, createHOnePlugin, createHTwoPlugin, createHThreePlugin, createHFourPlugin, createHFivePlugin, createHSixPlugin, } from '../plugins/text';
+import { ELEMENT_PARAGRAPH, ELEMENT_H1, ELEMENT_H2, ELEMENT_H3, ELEMENT_H4, ELEMENT_H5, ELEMENT_H6, ELEMENT_OL, ELEMENT_UL, } from '../constants';
+import { exitBreakPlugin } from '../plugins/exitBreak';
+import { LinkFloatingMenu } from '../plugins/link';
+import { resetBlockTypePlugin } from '../plugins/resetBlockType';
+import { selectOnBackspace } from '../plugins/selectOnBackspace';
+import { softBreakPlugin } from '../plugins/softBreak';
+import { plateUI } from '../plate';
+export const plugins = createPlugins([
+    createHeadingPlugin(),
+    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(),
+    createResetNodePlugin(),
+    createBoldPlugin(),
+    createCodePlugin(),
+    createFontBackgroundColorPlugin(),
+    createFontSizePlugin(),
+    createFontFamilyPlugin(),
+    createItalicPlugin(),
+    createStrikethroughPlugin(),
+    createSubscriptPlugin(),
+    createSuperscriptPlugin(),
+    createUnderlinePlugin(),
+    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,
+    }),
+    createExitBreakPlugin(exitBreakPlugin),
+    createHistoryPlugin(),
+    createResetNodePlugin(resetBlockTypePlugin),
+    createSelectOnBackspacePlugin(selectOnBackspace),
+    createSoftBreakPlugin(softBreakPlugin),
+], {
+    components: plateUI,
+});

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TElement } from '@udecode/plate';
+export interface SimpleEditorProps {
+    communityName: string;
+    editable: boolean;
+    handleUploadImage: (dataURL: File) => Promise<string>;
+    onChange: (newNodes: TElement[]) => void;
+    placeholder?: string;
+}
+export declare const SimpleEditor: ({ editable, handleUploadImage, onChange, placeholder, }: SimpleEditorProps) => React.JSX.Element;

package/dist/components/editor/simple_editor/simple_editor.js

@@ -0,0 +1,85 @@
+'use client';
+import React from 'react';
+import styled from 'styled-components';
+import { Plate, PlateProvider } from '@udecode/plate';
+import { plugins } from './plugins';
+import { EditorBar } from './navbar';
+export const SimpleEditor = ({ editable, handleUploadImage, onChange, placeholder = '', }) => {
+    return (React.createElement(PlateProvider, { id: "main", initialValue: [
+            {
+                type: 'p',
+                children: [
+                    {
+                        text: '',
+                    },
+                ],
+            },
+        ], onChange: onChange, plugins: plugins },
+        React.createElement(Wrapper, null,
+            React.createElement(EditorBar, { handleUploadImage: handleUploadImage }),
+            React.createElement(InnerWrapper, null,
+                React.createElement(Plate, { id: "main", editableProps: {
+                        readOnly: !editable,
+                        spellCheck: true,
+                        autoFocus: true,
+                        placeholder: placeholder,
+                    } })))));
+};
+const InnerWrapper = styled.div `
+  padding: 24px;
+`;
+const Wrapper = styled.div `
+  position: relative;
+  max-width: 1200px;
+  width: 100%;
+  min-height: 224px;
+  border: 1px solid var(--color-grey-8);
+  border-radius: 8px;
+  background-color: var(--color-white);
+
+  * {
+    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;
+  }
+`;

package/dist/components/feedback/chip/chip.js

@@ -56,7 +56,7 @@ export const Chip = ({ children, color, dot, onDismiss, size }) => {
     return (React.createElement(Component, { "$bgColor": bgColor, "$size": size, "$textColor": textColor },
         dot && React.createElement(Dot, { "$secondaryColor": dotColor }),
         children,
-        onDismiss && React.createElement(Close, { size: 16 })));
+        onDismiss && React.createElement(Close, { size: 16, onClick: onDismiss })));
 };
 const Component = styled.div `
   display: flex;

package/dist/components/input/text_input/text_input.d.ts

@@ -9,11 +9,13 @@ export type Props = {
     helperText?: string;
     label?: string;
     maxCharacters?: number;
+    multiple?: boolean;
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    onMultipleChange?: (values: string[]) => void;
     placeholder?: string;
     size?: TextInputSize;
     sx?: string;
-    value: string;
+    value: string | string[];
 };
 interface DisabledProps extends Props {
     disabled?: true;
@@ -31,5 +33,5 @@ interface WarningProps extends Props {
     warning?: true;
 }
 export type TextInputProps = DisabledProps | SuccessfulProps | WarningProps;
-export declare const TextInput: ({ bg, disabled, helperText, icon, label, maxCharacters, onChange, placeholder, size, successful, sx, value, warning, }: TextInputProps) => React.JSX.Element;
+export declare const TextInput: ({ bg, disabled, helperText, icon, label, maxCharacters, multiple, onChange, onMultipleChange, placeholder, size, successful, sx, value, warning, }: TextInputProps) => React.JSX.Element;
 export {};

package/dist/components/input/text_input/text_input.js

@@ -1,13 +1,57 @@
 'use client';
 import React from 'react';
 import styled from 'styled-components';
+import { Chip } from '../../feedback/chip/chip';
 import { CheckmarkCircle, AlertCircle } from '../../../icons';
-export const TextInput = ({ bg = 'var(--color-blue-10)', disabled, helperText, icon, label, maxCharacters, onChange, placeholder, size = 'large', successful, sx, value, warning, }) => {
+export const TextInput = ({ bg = 'var(--color-blue-10)', disabled, helperText, icon, label, maxCharacters, multiple, onChange, onMultipleChange, placeholder, size = 'large', successful, sx, value, warning, }) => {
+    const id = React.useId();
+    const isMultiple = multiple;
+    const [multipleValueToAdd, setMultipleValueToAdd] = React.useState('');
+    /**
+     * @todo make multiple wrapper a form
+     * on enter set multiple change and clear local value
+     * use local value to be text box
+     * have text box be flex shrink competing with chips
+     *
+     */
+    const handleMultipleValueToAdd = (event) => {
+        setMultipleValueToAdd(event.target.value);
+    };
+    /**
+     * when there is no text in the input,
+     * pop the previous multiple value out
+     */
+    const handleMultipleValueDelete = (event) => {
+        if (value.length &&
+            onMultipleChange &&
+            !multipleValueToAdd &&
+            (event.key === 'Delete' || event.key === 'Backspace')) {
+            onMultipleChange(value.slice(0, value.length - 1));
+        }
+    };
+    const handleMultipleAdd = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        const alreadyHasValue = value.includes(multipleValueToAdd);
+        if (onMultipleChange && !alreadyHasValue) {
+            onMultipleChange([...value, multipleValueToAdd]);
+        }
+        setMultipleValueToAdd('');
+    };
+    const handleMultipleItemRemoval = (removalItem) => {
+        onMultipleChange &&
+            onMultipleChange(value.filter((item) => item !== removalItem));
+    };
     return (React.createElement(Label, { "$disabled": disabled, "$size": size, "$sx": sx },
         label,
         React.createElement(InputWrapper, { "$bg": bg, "$size": size, "$successful": successful, "$warning": warning },
             icon,
-            React.createElement(Input, { disabled: disabled, onChange: onChange, placeholder: placeholder, value: maxCharacters ? value.slice(0, maxCharacters - 1) : value, "$size": size }),
+            isMultiple && (React.createElement(MultipleInputWrapper, { onSubmit: handleMultipleAdd },
+                value.filter(Boolean).map((item, index) => (React.createElement(Chip, { key: id + item + index, color: "blue", size: "small", onDismiss: () => handleMultipleItemRemoval(item) }, item))),
+                React.createElement(Input, { onChange: handleMultipleValueToAdd, onKeyDown: handleMultipleValueDelete, value: multipleValueToAdd, "$size": size }))),
+            !isMultiple && (React.createElement(Input, { disabled: disabled, onChange: onChange, placeholder: placeholder, value: maxCharacters
+                    ? value.slice(0, maxCharacters - 1)
+                    : value, "$size": size })),
             maxCharacters && (React.createElement(MaxCharactersText, { "$size": size },
                 value.length,
                 " / ",
@@ -62,10 +106,12 @@ const InputWrapper = styled.div `
   ${({ $warning }) => $warning ? 'border-color: var(--color-red-4) !important;' : ''}
 `;
 const Input = styled.input `
+  padding: 0px;
   flex: 1;
   font-family: Inter;
   font-size: ${({ $size }) => ($size === 'small' ? 14 : 16)}px;
   line-height: ${({ $size }) => ($size === 'small' ? 20 : 24)}px;
+  color: var(--color-grey-3);
   border: none;
   outline: none;
   border-radius: 8px;
@@ -89,3 +135,8 @@ const MaxCharactersText = styled.span `
   font-weight: 400;
   line-height: 20px;
 `;
+const MultipleInputWrapper = styled.form `
+  display: flex;
+  flex-flow: row wrap;
+  gap: 8px 16px;
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.2.18",
+  "version": "0.2.20",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {