@soul-refiner/design-system 2.0.0-alpha.30 → 2.0.0-alpha.4

package/dist/src/components/editor/plugins/utils/softBreak.js

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

package/dist/src/components/editor/plugins/utils/utils.js

@@ -0,0 +1,15 @@
+import { createExitBreakPlugin, createHistoryPlugin, createResetNodePlugin, createSelectOnBackspacePlugin, createSoftBreakPlugin } from '@udecode/plate';
+import { exitBreakPlugin } from './exitBreak.js';
+import { resetBlockTypePlugin } from './resetBlockType.js';
+import { selectOnBackspace } from './selectOnBackspace.js';
+import { softBreakPlugin } from './softBreak.js';
+
+const utils = [
+    createExitBreakPlugin(exitBreakPlugin),
+    createHistoryPlugin(),
+    createResetNodePlugin(resetBlockTypePlugin),
+    createSelectOnBackspacePlugin(selectOnBackspace),
+    createSoftBreakPlugin(softBreakPlugin),
+];
+
+export { utils };

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

@@ -0,0 +1,122 @@
+import React__default from 'react';
+import styled from 'styled-components';
+import { useEditorRef, useMarkToolbarButtonState, MARK_BOLD, useMarkToolbarButton, MARK_ITALIC, MARK_UNDERLINE, useLinkToolbarButtonState, useLinkToolbarButton, useListToolbarButtonState, ELEMENT_OL, useListToolbarButton, ELEMENT_UL, insertImage, insertNode, ELEMENT_PARAGRAPH } from '@udecode/plate';
+import { Tooltip } from '../../feedback/tooltip/tooltip.js';
+import { AlignmentDropdown } from '../navbar/alignment_dropdown.js';
+import { StyleDropdown } from '../navbar/style_dropdown.js';
+import { Bold } from '../../../icons/basic/bold.js';
+import { Image } from '../../../icons/basic/image.js';
+import { Italic } from '../../../icons/basic/italic.js';
+import { Link } from '../../../icons/basic/link.js';
+import { ListOrdered } from '../../../icons/text/list_ordered.js';
+import { ListUnordered } from '../../../icons/text/list_unordered.js';
+import { Redo } from '../../../icons/arrow/redo.js';
+import { Underline } from '../../../icons/basic/underline.js';
+import { Undo } from '../../../icons/arrow/undo.js';
+import { MenuButton } from '../styles/menu_button.js';
+
+const EditorBar = ({ handleUploadImage }) => {
+    const editorRef = useEditorRef('main');
+    const imageRef = React__default.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 () => {
+        const files = imageRef.current?.files;
+        if (!files)
+            return;
+        const imageurl = await handleUploadImage(files);
+        if (imageurl) {
+            insertImage(editorRef, imageurl);
+            insertNode(editorRef, {
+                type: ELEMENT_PARAGRAPH,
+                children: [{ text: ' ' }],
+            });
+        }
+    };
+    const handleRedo = () => editorRef.redo();
+    const handleUndo = () => editorRef.undo();
+    return (React__default.createElement(Menu, { "aria-label": "editor-navigation" },
+        React__default.createElement(MenuSection, null,
+            React__default.createElement(Tooltip, { content: "Undo", place: "top" },
+                React__default.createElement(MenuButton, { "$active": false, onClick: handleUndo },
+                    React__default.createElement(Undo, { size: 24, color: "grey-5" }))),
+            React__default.createElement(Tooltip, { content: "Redo", place: "top" },
+                React__default.createElement(MenuButton, { "$active": false, onClick: handleRedo },
+                    React__default.createElement(Redo, { size: 24, color: "grey-5" })))),
+        React__default.createElement(Divider, null),
+        React__default.createElement(MenuSection, null,
+            React__default.createElement(StyleDropdown, { editorRef: editorRef })),
+        React__default.createElement(Divider, null),
+        React__default.createElement(MenuSection, null,
+            React__default.createElement(MenuButton, { "$active": false, as: "div" },
+                React__default.createElement(AlignmentDropdown, { editorRef: editorRef }))),
+        React__default.createElement(Divider, null),
+        React__default.createElement(MenuSection, null,
+            React__default.createElement(Tooltip, { content: "Bold", place: "top" },
+                React__default.createElement(MenuButton, { "$active": currBold, onClick: handleBold },
+                    React__default.createElement(Bold, { size: 24, color: "grey-5" }))),
+            React__default.createElement(Tooltip, { content: "Italic", place: "top" },
+                React__default.createElement(MenuButton, { "$active": currItalic, onClick: handleItalic },
+                    React__default.createElement(Italic, { size: 24, color: "grey-5" }))),
+            React__default.createElement(Tooltip, { content: "Underline", place: "top" },
+                React__default.createElement(MenuButton, { "$active": currUnderline, onClick: handleUnderline },
+                    React__default.createElement(Underline, { size: 24, color: "grey-5" })))),
+        React__default.createElement(Divider, null),
+        React__default.createElement(MenuSection, null,
+            React__default.createElement(Tooltip, { content: "Link", place: "top" },
+                React__default.createElement(MenuButton, { "$active": currLink, onClick: handleLink },
+                    React__default.createElement(Link, { size: 24, color: "grey-5" }))),
+            React__default.createElement(Tooltip, { content: "Image", place: "top" },
+                React__default.createElement(MenuButton, { "$active": false, as: "label", onChange: handleImageChange },
+                    React__default.createElement("div", null,
+                        React__default.createElement("input", { accept: "image/*", ref: imageRef, style: { display: 'none' }, type: "file" }),
+                        React__default.createElement(Image, { size: 24, color: "grey-5" }))))),
+        React__default.createElement(Divider, null),
+        React__default.createElement(MenuSection, null,
+            React__default.createElement(Tooltip, { content: "Unordered List", place: "top" },
+                React__default.createElement(MenuButton, { "$active": currUnorderedList, onClick: handleUnorderedList },
+                    React__default.createElement(ListUnordered, { size: 24, color: "grey-5" }))),
+            React__default.createElement(Tooltip, { content: "Ordered List", place: "top" },
+                React__default.createElement(MenuButton, { "$active": currOrderedList, onClick: handleOrderedList },
+                    React__default.createElement(ListOrdered, { size: 24, color: "grey-5" }))))));
+};
+const Menu = styled.nav.withConfig({ displayName: "Menu", componentId: "sc-18hwzho" }) `
+  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.withConfig({ displayName: "MenuSection", componentId: "sc-360yvm" }) `
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  width: fit-content;
+  flex-shrink: 0;
+`;
+const Divider = styled.div.withConfig({ displayName: "Divider", componentId: "sc-lfonyv" }) `
+  width: 1px;
+  height: 28px;
+  background-color: var(--color-grey-9);
+`;
+
+export { EditorBar };

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

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

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

@@ -0,0 +1,92 @@
+"use client";
+import React__default from 'react';
+import styled from 'styled-components';
+import { Plate, PlateContent } from '@udecode/plate';
+import { plugins } from './plugins.js';
+import { EditorBar } from './navbar.js';
+
+const SimpleEditor = ({ editable, handleUploadImage, onChange, placeholder = '', previousContent = [
+    {
+        type: 'p',
+        children: [
+            {
+                text: '',
+            },
+        ],
+    },
+], }) => {
+    return (React__default.createElement(Plate, { id: "main", initialValue: previousContent, onChange: onChange, plugins: plugins },
+        React__default.createElement(Wrapper, null,
+            editable && React__default.createElement(EditorBar, { handleUploadImage: handleUploadImage }),
+            React__default.createElement(InnerWrapper, null,
+                React__default.createElement(PlateContent, { id: "main", autoFocus: true, placeholder: placeholder, readOnly: !editable, spellCheck: true })))));
+};
+const InnerWrapper = styled.div.withConfig({ displayName: "InnerWrapper", componentId: "sc-1ehza2k" }) `
+  & > div {
+    padding: 24px;
+    min-height: 224px;
+    box-sizing: border-box;
+
+    & > div {
+      margin: 24px 0px;
+    }
+  }
+`;
+const Wrapper = styled.div.withConfig({ displayName: "Wrapper", componentId: "sc-18lk8h1" }) `
+  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: var(--font-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 {
+    margin: 8px 0px;
+    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;
+  }
+`;
+
+export { SimpleEditor };

package/dist/src/components/editor/styles/menu_button.js

@@ -0,0 +1,34 @@
+"use client";
+import styled from 'styled-components';
+
+const MenuButton = styled.button.withConfig({ displayName: "MenuButton", componentId: "sc-1r4gmyn" }) `
+  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'};
+`;
+
+export { MenuButton };

package/dist/src/components/feedback/animated_toast/animated_toast.js

@@ -0,0 +1,58 @@
+"use client";
+import React__default from 'react';
+import { styled } from 'styled-components';
+import { Toast } from '../toast/toast.js';
+
+const AnimatedToast = ({ message, type, onClose, animationDuration = 4, }) => {
+    const [toastIsClosed, setToastIsClosed] = React__default.useState(false);
+    const timer = React__default.useRef(null);
+    React__default.useEffect(() => {
+        timer.current = setTimeout(() => {
+            setToastIsClosed(true);
+            !!onClose && onClose();
+        }, animationDuration * 1000);
+        return () => {
+            clearTimeout(timer.current);
+        };
+    }, [animationDuration, onClose]);
+    return (React__default.createElement(Container, null,
+        React__default.createElement(ToastAnimation, { className: `${toastIsClosed ? 'toast-closed' : ''}` },
+            React__default.createElement(Toast, { content: message, type: type, isAnimated: true, animationDuration: animationDuration }))));
+};
+const Container = styled.div.withConfig({ displayName: "Container", componentId: "sc-1tc79dg" }) `
+  position: fixed;
+  z-index: 9999;
+  bottom: 16px;
+  right: 16px;
+`;
+const ToastAnimation = styled.div.withConfig({ displayName: "ToastAnimation", componentId: "sc-5rn8x0" }) `
+  animation: slide-in 0.4s ease-in-out forwards;
+
+  &.toast-closed {
+    animation: slide-out 0.4s ease-in-out forwards;
+  }
+
+  @keyframes slide-out {
+    0% {
+      opacity: 1;
+      transform: translateX(0%);
+    }
+    100% {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+  }
+
+  @keyframes slide-in {
+    0% {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+    100% {
+      opacity: 1;
+      transform: translateX(0%);
+    }
+  }
+`;
+
+export { AnimatedToast };

package/dist/src/components/feedback/badge/badge.js

@@ -0,0 +1,69 @@
+"use client";
+import React__default from 'react';
+import styled from 'styled-components';
+import { Close } from '../../../icons/basic/close.js';
+
+const colorLookup = {
+    blue: {
+        primary: 'var(--color-hue-blue-1)',
+        secondary: 'var(--color-hue-blue-2)',
+        bg: 'var(--color-hue-blue-3)',
+    },
+    green: {
+        primary: 'var(--color-green-3)',
+        secondary: 'var(--color-green-8)',
+        bg: 'var(--color-green-10)',
+    },
+    orange: {
+        primary: 'var(--color-hue-orange-1)',
+        secondary: 'var(--color-hue-orange-2)',
+        bg: 'var(--color-hue-orange-3)',
+    },
+    purple: {
+        primary: 'var(--color-hue-purple-1)',
+        secondary: 'var(--color-hue-purple-2)',
+        bg: 'var(--color-hue-purple-3)',
+    },
+    red: {
+        primary: 'var(--color-red-4)',
+        secondary: 'var(--color-red-9)',
+        bg: 'var(--color-red-10)',
+    },
+};
+const Badge = ({ children, color, dot, onDismiss }) => {
+    const bgColor = colorLookup[color].bg;
+    const textColor = colorLookup[color].primary;
+    const borderColor = colorLookup[color].secondary;
+    return (React__default.createElement(Component, { "$bgColor": bgColor, "$borderColor": borderColor, "$textColor": textColor },
+        dot && React__default.createElement(Dot, { "$secondaryColor": textColor }),
+        children,
+        onDismiss && React__default.createElement(Close, { size: 16 })));
+};
+const Component = styled.div.withConfig({ displayName: "Component", componentId: "sc-bwkn28" }) `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 1px 7px;
+  border-radius: 32px;
+  background-color: ${({ $bgColor }) => $bgColor};
+  color: ${({ $textColor }) => $textColor};
+  border: 1px solid ${({ $borderColor }) => $borderColor};
+  font-family: var(--font-inter);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  user-select: none;
+
+  svg {
+    fill: currentColor;
+    cursor: pointer;
+  }
+`;
+const Dot = styled.div.withConfig({ displayName: "Dot", componentId: "sc-1rozlb2" }) `
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: ${({ $secondaryColor }) => $secondaryColor};
+`;
+
+export { Badge };

package/dist/src/components/feedback/banner/banner.js

@@ -0,0 +1,89 @@
+"use client";
+import React__default from 'react';
+import styled from 'styled-components';
+import { Styles } from '../../../common/styles.js';
+import { Box } from '../../atoms/box/box.js';
+import { Button } from '../../actions/button/button.js';
+import { P } from '../../atoms/typography/paragraph.js';
+import { AlertCircle } from '../../../icons/notifications/alert_circle.js';
+import { AlertOctogon } from '../../../icons/notifications/alert_octogon.js';
+import { AlertTriangle } from '../../../icons/notifications/alert_triangle.js';
+import { Close } from '../../../icons/basic/close.js';
+import { Information } from '../../../icons/notifications/information.js';
+
+const Banner = ({ content, href, onClose, title, type, setContentInNewLine = false, additionalContent, sx, }) => {
+    const iconLookup = {
+        error: React__default.createElement(AlertOctogon, { size: 24 }),
+        info: React__default.createElement(Information, { size: 24 }),
+        success: React__default.createElement(AlertCircle, { size: 24 }),
+        warning: React__default.createElement(AlertTriangle, { size: 24 }),
+    };
+    return (React__default.createElement(Wrapper, { as: "output", "$dir": "row", "$gap": 8, "$type": type, "$sx": sx },
+        iconLookup[type],
+        React__default.createElement(Box, { "$dir": setContentInNewLine ? 'column' : 'row', "$gap": 4 },
+            React__default.createElement(P, { as: "span", "$semiBold": true }, title),
+            React__default.createElement(P, { as: "span", sx: setContentInNewLine ? 'margin-top: 12px;' : '' }, content),
+            additionalContent && React__default.createElement(P, { as: "span" }, additionalContent),
+            href && (React__default.createElement(P, { as: "a", href: href, "$color": "primary-blue-2" }, "Read more"))),
+        onClose && (React__default.createElement(Button, { icon: React__default.createElement(Close, { size: 24 }), onClick: onClose, type: "special" }))));
+};
+const Wrapper = styled.output.withConfig({ displayName: "Wrapper", componentId: "sc-plp57j" }) `
+  width: 100%;
+  box-sizing: border-box;
+  padding: 12px 16px;
+  display: flex;
+  background-color: ${({ $type }) => $type === 'error'
+    ? 'var(--color-red-9)'
+    : $type === 'info'
+        ? 'var(--color-blue-9)'
+        : $type === 'success'
+            ? 'var(--color-green-9)'
+            : 'var(--color-orange-9)'};
+  border-bottom: 1px solid
+    ${({ $type }) => $type === 'error'
+    ? 'var(--color-red-4)'
+    : $type === 'info'
+        ? 'var(--color-blue-4)'
+        : $type === 'success'
+            ? 'var(--color-green-3)'
+            : 'var(--color-orange-5)'};
+  box-shadow: var(--elevation-2);
+  border-radius: var(--small);
+
+  & > svg {
+    fill: ${({ $type }) => $type === 'error'
+    ? 'var(--color-red-4)'
+    : $type === 'info'
+        ? 'var(--color-blue-4)'
+        : $type === 'success'
+            ? 'var(--color-green-3)'
+            : 'var(--color-orange-5)'};
+  }
+
+  a {
+    position: relative;
+    cursor: pointer;
+
+    &::after {
+      position: absolute;
+      content: '';
+      width: 100%;
+      height: 1px;
+      right: 0px;
+      left: 0px;
+      bottom: 0px;
+      background-color: var(--color-primary-blue-2);
+    }
+  }
+
+  button {
+    padding: 0px;
+    margin-left: auto;
+  }
+
+  ${Styles.flex}
+
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+
+export { Banner };