@team-monolith/cds 1.4.7 → 1.4.9

package/dist/patterns/LexicalEditor/LexicalEditor.js

@@ -10,6 +10,22 @@ import { HorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode";
 import { getTheme } from "./theme";
 import { useTheme } from "@emotion/react";
 import Plugins from "./Plugins";
+function validateValue(value) {
+    var _a, _b;
+    if (value && typeof value !== "object") {
+        return false;
+    }
+    // value = {
+    //   root: {
+    //     children: any[]
+    //   }
+    // }
+    // value.root.children must be non-empty array
+    if (!((_b = (_a = value === null || value === void 0 ? void 0 : value.root) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.length)) {
+        return false;
+    }
+    return true;
+}
 export function LexicalEditor(props) {
     const { className, value, onChange, editable = true, children } = props;
     const theme = useTheme();
@@ -32,7 +48,7 @@ export function LexicalEditor(props) {
             HorizontalRuleNode,
         ],
         theme: getTheme(theme),
-        editorState: value ? JSON.stringify(value) : undefined,
+        editorState: validateValue(value) ? JSON.stringify(value) : undefined,
         editable: editable,
     };
     return (_jsxs(LexicalComposer, Object.assign({ initialConfig: initialConfig }, { children: [_jsx(Plugins, { className: className, onChange: onChange }), _jsx(_Fragment, { children: children })] })));

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/InsertImageDialog.js

@@ -1,16 +1,32 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import { INSERT_IMAGE_COMMAND } from ".";
 import { InsertImageUriDialogBody } from "./InsertImageUriDialogBody";
 import { InsertImageUploadedDialogBody } from "./InsertImageUploadedDialogBody";
 import styled from "@emotion/styled";
-import { AlertDialog, AlertDialogContent, AlertDialogTitle } from "../../../../components/AlertDialog";
-import { ImageFillIcon } from "../../../../icons";
+import { AlertDialog, AlertDialogContent, AlertDialogTitle, } from "../../../../components/AlertDialog";
+import { ImageFillIcon, LinkIcon, UploadLineIcon } from "../../../../icons";
 import Button from "../../../../components/Button";
+import { useTheme } from "@emotion/react";
+import { CodleDesignSystemContext } from "../../../../CodleDesignSystemProvider";
 export function InsertImageDialog(props) {
     const { open, activeEditor, onClose } = props;
+    const theme = useTheme();
     const [mode, setMode] = useState(null);
     const hasModifier = useRef(false);
+    const inputRef = useRef(null);
+    const cdsContext = useContext(CodleDesignSystemContext);
+    const [src, setSrc] = useState("");
+    const [altText, setAltText] = useState("");
     useEffect(() => {
         hasModifier.current = false;
         const handler = (e) => {
@@ -23,17 +39,70 @@ export function InsertImageDialog(props) {
     }, [activeEditor]);
     const onClick = (payload) => {
         activeEditor.dispatchCommand(INSERT_IMAGE_COMMAND, payload);
-        onClose();
+        handleOnClose();
     };
     const handleOnClose = () => {
         setMode(null);
+        setSrc("");
+        setAltText("");
         onClose();
     };
-    return (_jsxs(AlertDialog, Object.assign({ icon: _jsx(ImageFillIcon, {}), open: open, onClose: handleOnClose, disableIconPadding: true }, { children: [_jsx(AlertDialogTitle, Object.assign({ onClose: handleOnClose }, { children: "\uC774\uBBF8\uC9C0 \uC785\uB825\uD558\uAE30" })), !mode && (_jsx(AlertDialogContent, { children: _jsxs(Buttons, { children: [_jsx(Button, { color: "grey", size: "medium", fullWidth: true, label: "URL \uC785\uB825\uD558\uAE30", onClick: () => setMode("url") }), _jsx(Button, { color: "grey", size: "medium", fullWidth: true, label: "\uD30C\uC77C \uC62C\uB9AC\uAE30", onClick: () => setMode("file") })] }) })), mode === "url" && _jsx(InsertImageUriDialogBody, { onClick: onClick }), mode === "file" && _jsx(InsertImageUploadedDialogBody, { onClick: onClick })] })));
+    return (_jsxs(StyledAlertDialog, Object.assign({ icon: _jsx(ImageFillIcon, { color: theme.color.background.primary }), open: open, onClose: handleOnClose, disableIconPadding: true }, { children: [_jsx(StyledAlertDialogTitle, Object.assign({ onClose: handleOnClose }, { children: "\uC774\uBBF8\uC9C0 \uC0BD\uC785\uD558\uAE30" })), !mode && (_jsx(AlertDialogContent, { children: _jsxs(Buttons, { children: [_jsxs(ButtonAndDescription, { children: [_jsx(Description, { children: "\uC774\uBBF8\uC9C0 URL\uC744 \uC54C\uACE0 \uC788\uB2E4\uBA74" }), _jsx(Button, { color: "grey", size: "medium", fullWidth: true, label: "URL\uB85C \uC0BD\uC785\uD558\uAE30", startIcon: _jsx(LinkIcon, {}), onClick: () => setMode("url") })] }), _jsxs(ButtonAndDescription, { children: [_jsx(Description, { children: "\uAC16\uACE0 \uC788\uB294 \uC774\uBBF8\uC9C0\uB97C \uC0BD\uC785\uD558\uACE0 \uC2F6\uB2E4\uBA74" }), _jsx(Button, { color: "grey", size: "medium", fullWidth: true, label: "\uD30C\uC77C \uC120\uD0DD\uD558\uAE30", startIcon: _jsx(UploadLineIcon, {}), onClick: () => {
+                                        var _a;
+                                        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+                                    } }), _jsx(HiddenInput, { ref: inputRef, type: "file", accept: "image/*", onChange: (event) => __awaiter(this, void 0, void 0, function* () {
+                                        var _a, _b;
+                                        const file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
+                                        if (!file)
+                                            return;
+                                        const uploadByFile = (_b = cdsContext.lexical) === null || _b === void 0 ? void 0 : _b.uploadByFile;
+                                        if (uploadByFile) {
+                                            setSrc(yield uploadByFile(file));
+                                            setMode("file");
+                                        }
+                                    }) })] })] }) })), mode === "url" && (_jsx(InsertImageUriDialogBody, { src: src, setSrc: setSrc, altText: altText, setAltText: setAltText, onClick: onClick })), mode === "file" && (_jsx(InsertImageUploadedDialogBody, { src: src, setSrc: setSrc, altText: altText, setAltText: setAltText, onClick: onClick }))] })));
 }
+const StyledAlertDialog = styled(AlertDialog) `
+  gap: 16px;
+`;
+const StyledAlertDialogTitle = styled(AlertDialogTitle) `
+  color: ${({ theme }) => theme.color.foreground.neutralBase};
+  text-align: center;
+
+  /* Default/Heading/20px-Bd */
+  font-family: ${({ theme }) => theme.fontFamily.ui};
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 28px; /* 140% */
+  letter-spacing: 0.25px;
+`;
 const Buttons = styled.div `
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+
+  // Actions가 없는 경우 하단이 디자인과 맞지 않는다
+  margin-bottom: -16px;
+`;
+const ButtonAndDescription = styled.div `
   display: flex;
   flex-direction: column;
-  margin-top: 20px;
-  gap: 20px;
+  align-items: center;
+  gap: 8px;
+  flex: 1 0 0;
+`;
+const Description = styled.div `
+  color: ${({ theme }) => theme.color.foreground.neutralBaseDisabled};
+  text-align: center;
+
+  /* Default/Label/12px-Md */
+  font-family: ${({ theme }) => theme.fontFamily.ui};
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 16px; /* 133.333% */
+`;
+const HiddenInput = styled.input `
+  display: none;
 `;

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/InsertImageUploadedDialogBody.d.ts

@@ -1,5 +1,9 @@
 import { InsertImagePayload } from ".";
 export interface InsertImageUploadedDialogBodyProps {
+    src: string;
+    setSrc: (src: string) => void;
+    altText: string;
+    setAltText: (altText: string) => void;
     onClick: (payload: InsertImagePayload) => void;
 }
 export declare function InsertImageUploadedDialogBody(props: InsertImageUploadedDialogBodyProps): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/InsertImageUploadedDialogBody.js

@@ -8,23 +8,22 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useContext, useRef, useState } from "react";
+import { useContext, useRef } from "react";
 import styled from "@emotion/styled";
 import { CodleDesignSystemContext } from "../../../../CodleDesignSystemProvider";
-import { AlertDialogContent, AlertDialogActions } from "../../../../components/AlertDialog";
+import { AlertDialogContent, AlertDialogActions, } from "../../../../components/AlertDialog";
 import Button from "../../../../components/Button";
 import Input from "../../../../components/Input";
+import { RefreshLineIcon } from "../../../../icons";
 export function InsertImageUploadedDialogBody(props) {
-    const { onClick } = props;
-    const [src, setSrc] = useState("");
-    const [altText, setAltText] = useState("");
+    const { src, setSrc, altText, setAltText, onClick } = props;
     const inputRef = useRef(null);
     const cdsContext = useContext(CodleDesignSystemContext);
     const isDisabled = src === "";
-    return (_jsxs(_Fragment, { children: [_jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(Button, { fullWidth: true, color: "grey", size: "medium", label: "\uD30C\uC77C \uC62C\uB9AC\uAE30", onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(Button, { fullWidth: true, color: "grey", size: "medium", label: "\uD30C\uC77C \uBC14\uAFB8\uAE30", onClick: () => {
                                 var _a;
                                 (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
-                            } }), _jsx(HiddenInput, { ref: inputRef, type: "file", accept: "image/*", onChange: (event) => __awaiter(this, void 0, void 0, function* () {
+                            }, startIcon: _jsx(RefreshLineIcon, {}) }), _jsx(HiddenInput, { ref: inputRef, type: "file", accept: "image/*", onChange: (event) => __awaiter(this, void 0, void 0, function* () {
                                 var _a, _b;
                                 const file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
                                 if (!file)
@@ -33,17 +32,20 @@ export function InsertImageUploadedDialogBody(props) {
                                 if (uploadByFile) {
                                     setSrc(yield uploadByFile(file));
                                 }
-                            }) }), _jsx(Input, { fullWidth: true, label: "\uC124\uBA85", placeholder: "\uC774\uBBF8\uC9C0\uC5D0 \uB300\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: (e) => {
+                            }) }), _jsxs(ImagePreview, { children: ["\uC774\uBBF8\uC9C0 \uBBF8\uB9AC\uBCF4\uAE30", _jsx("img", { src: src, alt: altText })] }), _jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: (e) => {
                                 setAltText(e.target.value);
-                            }, value: altText })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { label: "\uD655\uC778", size: "large", color: "primary", disabled: isDisabled, onClick: () => onClick({ altText, src }) }) })] }));
+                            }, value: altText })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled, onClick: () => onClick({ altText, src }) }) })] }));
 }
 const Inputs = styled.div `
   display: flex;
   flex-direction: column;
-  gap: 20px;
-  margin-top: 20px;
-  margin-bottom: 10px;
+  gap: 16px;
 `;
 const HiddenInput = styled.input `
   display: none;
 `;
+const ImagePreview = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/InsertImageUriDialogBody.d.ts

@@ -1,5 +1,9 @@
 import { InsertImagePayload } from ".";
 export interface InsertImageUriDialogBodyProps {
+    src: string;
+    setSrc: (src: string) => void;
+    altText: string;
+    setAltText: (altText: string) => void;
     onClick: (payload: InsertImagePayload) => void;
 }
 export declare function InsertImageUriDialogBody(props: InsertImageUriDialogBodyProps): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/InsertImageUriDialogBody.js

@@ -1,24 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from "react";
 import styled from "@emotion/styled";
-import { AlertDialogContent, AlertDialogActions } from "../../../../components/AlertDialog";
+import { AlertDialogActions, AlertDialogContent, } from "../../../../components/AlertDialog";
 import Input from "../../../../components/Input";
+import { LinkIcon } from "../../../../icons";
 import Button from "../../../../components/Button";
 export function InsertImageUriDialogBody(props) {
-    const { onClick } = props;
-    const [src, setSrc] = useState("");
-    const [altText, setAltText] = useState("");
+    const { src, setSrc, altText, setAltText, onClick } = props;
     const isDisabled = src === "";
-    return (_jsxs(_Fragment, { children: [_jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(Input, { fullWidth: true, label: "URL", placeholder: "https://source.unsplash.com/random", color: "default", size: "medium", onChange: (e) => {
+    return (_jsxs(_Fragment, { children: [" ", _jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(Input, { fullWidth: true, label: "URL", placeholder: "https://www.pexels.com/photo/n-2848492/", color: "default", size: "medium", onChange: (e) => {
                                 setSrc(e.target.value);
-                            }, value: src }), _jsx(Input, { fullWidth: true, label: "\uC124\uBA85", placeholder: "\uC774\uBBF8\uC9C0\uC5D0 \uB300\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: (e) => {
+                            }, value: src, startIcon: _jsx(LinkIcon, {}) }), _jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: (e) => {
                                 setAltText(e.target.value);
-                            }, value: altText })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { label: "\uD655\uC778", size: "large", color: "primary", disabled: isDisabled, onClick: () => onClick({ altText, src }) }) })] }));
+                            }, value: altText })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled, onClick: () => onClick({ altText, src }) }) })] }));
 }
 const Inputs = styled.div `
   display: flex;
   flex-direction: column;
-  gap: 20px;
-  margin-top: 20px;
-  margin-bottom: 10px;
+  gap: 16px;
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.4.7",
+  "version": "1.4.9",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,