@soul-refiner/design-system 0.2.19 → 0.2.21

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

@@ -3,7 +3,7 @@ import { TElement } from '@udecode/plate';
 export interface EditorProps {
     communityName: string;
     editable: boolean;
-    handleUploadImage: (dataURL: File) => Promise<string>;
+    handleUploadImage: (files: FileList) => Promise<string>;
     onChange: (newNodes: TElement[]) => void;
 }
 export declare const Editor: ({ editable, handleUploadImage, onChange, }: EditorProps) => React.JSX.Element;

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/navbar/navbar.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export interface EditorBarProps {
-    handleUploadImage: (dataURL: File) => Promise<string>;
+    handleUploadImage: (files: FileList) => Promise<string>;
 }
 export declare const EditorBar: ({ handleUploadImage }: EditorBarProps) => React.JSX.Element;
 export declare const MenuButton: import("styled-components").IStyledComponent<"web", "button", {

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

@@ -59,11 +59,11 @@ export const EditorBar = ({ handleUploadImage }) => {
             },
         ]);
     };
-    const handleImageChange = async (event) => {
-        const file = event.target?.files?.[0];
-        if (!file)
+    const handleImageChange = async () => {
+        const files = imageRef.current?.files;
+        if (!files)
             return;
-        const imageurl = await handleUploadImage(file);
+        const imageurl = await handleUploadImage(files);
         if (imageurl) {
             insertImage(editorRef, imageurl);
         }
@@ -71,8 +71,8 @@ export const EditorBar = ({ handleUploadImage }) => {
     const handleRedo = () => editorRef.redo();
     const handleUndo = () => editorRef.undo();
     const handleVideoChange = async (event) => {
-        const file = event.target?.files?.[0];
-        if (!file)
+        const files = videoRef.current?.files;
+        if (!files)
             return;
         /**
          * TODO: Insert video component

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

@@ -1,6 +1,6 @@
 import React from 'react';
 export interface EditorBarProps {
-    handleUploadImage: (dataURL: File) => Promise<string>;
+    handleUploadImage: (files: FileList) => Promise<string>;
 }
 export declare const EditorBar: ({ handleUploadImage }: EditorBarProps) => React.JSX.Element;
 export declare const MenuButton: import("styled-components").IStyledComponent<"web", "button", {

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

@@ -1,12 +1,11 @@
 import React from 'react';
 import styled from 'styled-components';
-import { insertImage, useLinkToolbarButton, useLinkToolbarButtonState, useListToolbarButton, useListToolbarButtonState, useMarkToolbarButton, useMarkToolbarButtonState, usePlateEditorRef, usePlateEditorState, } from '@udecode/plate';
+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 stateEditor = usePlateEditorState();
     const imageRef = React.useRef(null);
     const boldState = useMarkToolbarButtonState({ nodeType: MARK_BOLD });
     const { props: { pressed: currBold, onClick: handleBold }, } = useMarkToolbarButton(boldState);
@@ -24,11 +23,11 @@ export const EditorBar = ({ handleUploadImage }) => {
         nodeType: ELEMENT_UL,
     });
     const { props: { pressed: currUnorderedList, onClick: handleUnorderedList }, } = useListToolbarButton(unorderedListState);
-    const handleImageChange = async (event) => {
-        const file = event.target?.files?.[0];
-        if (!file)
+    const handleImageChange = async () => {
+        const files = imageRef.current?.files;
+        if (!files)
             return;
-        const imageurl = await handleUploadImage(file);
+        const imageurl = await handleUploadImage(files);
         if (imageurl) {
             insertImage(editorRef, imageurl);
         }

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

@@ -3,7 +3,7 @@ import { TElement } from '@udecode/plate';
 export interface SimpleEditorProps {
     communityName: string;
     editable: boolean;
-    handleUploadImage: (dataURL: File) => Promise<string>;
+    handleUploadImage: (files: FileList) => Promise<string>;
     onChange: (newNodes: TElement[]) => void;
     placeholder?: string;
 }

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('');
+    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));
+        }
+    };
+    /**
+     * when a user presses enter (submit) add the input to the values
+     * but don't add the same value twice
+     */
+    const handleMultipleAdd = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        const alreadyHasValue = value.includes(multipleValueToAdd);
+        if (onMultipleChange && !alreadyHasValue) {
+            onMultipleChange([...value, multipleValueToAdd]);
+        }
+        setMultipleValueToAdd('');
+    };
+    /**
+     * when the user clicks on the chip to remove it, remove it from the value
+     */
+    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,
                 " / ",
@@ -67,6 +111,7 @@ const Input = styled.input `
   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;
@@ -90,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.19",
+  "version": "0.2.21",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {