@team-monolith/cds 1.56.0 → 1.56.2

package/dist/patterns/LexicalEditor/nodes/Form/FormInput.js

@@ -0,0 +1,51 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ErrorWarningFillIcon, Input } from "../../../..";
+import { Controller } from "react-hook-form";
+import { useState } from "react";
+export function FormInput(props) {
+    const { name, control, rules, baseColor = "default", transform = (value) => value } = props, inputComponentProps = __rest(props, ["name", "control", "rules", "baseColor", "transform"]);
+    const [inputFocused, setInputFocused] = useState(false);
+    return (_jsx(Controller, { name: name, control: control, rules: rules, render: ({ field: { onChange, value }, fieldState: { invalid, error }, }) => {
+            const onChangeHandler = (e) => {
+                onChange(transform(e.target.value));
+            };
+            // multiline 여부에 따라 inputProps의 type이 변경되므로 (union type)
+            // type-safety를 보장하기 위해 if 문을 분기하여 inputProps에 `name` 을 추가합니다.
+            // 코드 반복 없이 가능할까요?
+            if (inputComponentProps.multiline) {
+                const { inputProps } = inputComponentProps, other = __rest(inputComponentProps, ["inputProps"]);
+                return (_jsx(Input, Object.assign({ color: invalid
+                        ? "activeDanger"
+                        : inputFocused
+                            ? "activePrimary"
+                            : baseColor, onChange: onChangeHandler, value: value !== null && value !== void 0 ? value : "", hintIcon: invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: error === null || error === void 0 ? void 0 : error.message, inputProps: Object.assign(Object.assign({ name }, inputProps), { onFocus: () => {
+                            setInputFocused(true);
+                        }, onBlur: () => {
+                            setInputFocused(false);
+                        } }) }, other)));
+            }
+            else {
+                const { inputProps } = inputComponentProps, other = __rest(inputComponentProps, ["inputProps"]);
+                return (_jsx(Input, Object.assign({ color: invalid
+                        ? "activeDanger"
+                        : inputFocused
+                            ? "activePrimary"
+                            : baseColor, onChange: onChangeHandler, value: value !== null && value !== void 0 ? value : "", hintIcon: invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: error === null || error === void 0 ? void 0 : error.message, inputProps: Object.assign(Object.assign({ name }, inputProps), { onFocus: () => {
+                            setInputFocused(true);
+                        }, onBlur: () => {
+                            setInputFocused(false);
+                        } }) }, other)));
+            }
+        } }));
+}

package/dist/patterns/LexicalEditor/nodes/Form/index.d.ts

@@ -0,0 +1 @@
+export * from "./FormInput";

package/dist/patterns/LexicalEditor/nodes/Form/index.js

@@ -0,0 +1 @@
+export * from "./FormInput";

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/Evaluation.d.ts

@@ -0,0 +1,16 @@
+import { ToggleButtonDatum } from "../../../../../ToggleButtonGroup";
+import { EvaluationItem } from "../../SelfEvaluationNode";
+/** 데이터를 받아 자기평가 항목들과 ToggleButtonGroup을 그리는 컴포넌트입니다.
+ * 비지니스 로직이 포함되어 있지 않습니다.
+ */
+export declare function Evaluation(props: {
+    className?: string;
+    /** 자기 평가 항목들 */
+    evaluations: EvaluationItem[];
+    /** ToggleButton의 데이터 배열 */
+    data: ToggleButtonDatum[];
+    /** 블럭을 클릭했을 때 실행될 콜백. 전달하지 않으면 cursor: pointer가 적용되지 않습니다. */
+    onClick?: () => void;
+    /** 전달하지 않으면 ToggleButtonGroup 호버, 클릭 동작이 없습니다. (pointer-events: none) */
+    onChange?: (evaluations: EvaluationItem[]) => void;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/Evaluation.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
+import { ToggleButtonGroup, } from "../../../../../ToggleButtonGroup";
+import _ from "lodash";
+const TOGGLE_BUTTON_GROUP_WIDTH = 320;
+/** 데이터를 받아 자기평가 항목들과 ToggleButtonGroup을 그리는 컴포넌트입니다.
+ * 비지니스 로직이 포함되어 있지 않습니다.
+ */
+export function Evaluation(props) {
+    const { className, evaluations, data, onClick, onChange } = props;
+    return (_jsxs(Container, Object.assign({ className: className, onClick: onClick }, { children: [_jsx(Header, { children: _jsx(LabelArea, { children: data.map(({ label }, index) => (_jsx(Label, { children: label }, index))) }) }), evaluations.map(({ question, selectedLabelIndex }, index) => (_jsxs(Item, { children: [_jsx(Index, { children: index + 1 }), _jsx(Question, { children: question.text }), _jsx(StyledToggleButtonGroup, { data: data, activeIndex: selectedLabelIndex, setActiveIndex: !onChange
+                            ? undefined
+                            : (activeIndex) => {
+                                const newEvaluations = _.cloneDeep(evaluations);
+                                newEvaluations[index].selectedLabelIndex = activeIndex;
+                                onChange(newEvaluations);
+                            } })] }, index)))] })));
+}
+const Container = styled.div(({ onClick }) => css `
+    ${onClick && "cursor: pointer;"}
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    align-self: stretch;
+  `);
+const Header = styled.div(({ theme }) => css `
+    border-bottom: 1px solid ${theme.color.background.neutralAltActive};
+    display: flex;
+    padding: 8px 0px;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 8px;
+    align-self: stretch;
+  `);
+const LabelArea = styled.div `
+  display: flex;
+  width: ${TOGGLE_BUTTON_GROUP_WIDTH}px;
+  justify-content: space-between;
+  align-items: flex-start;
+`;
+const Label = styled.span(({ theme }) => css `
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    text-align: center;
+    /* Default/Label/12px-Md */
+    font-family: Pretendard;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px; /* 133.333% */
+  `);
+const Item = styled.div(({ theme }) => css `
+    display: flex;
+    padding: 4px 0px;
+    align-items: center;
+    gap: 8px;
+    align-self: stretch;
+    border-bottom: 1px solid ${theme.color.background.neutralAltActive};
+  `);
+const Index = styled.div(({ theme }) => css `
+    display: flex;
+    width: 20px;
+    height: 20px;
+    padding: 4px;
+
+    user-select: none; /* Standard syntax */
+
+    border-radius: 4px;
+    background: ${theme.color.background.neutralBase};
+    border: 1px solid ${theme.color.background.neutralAltActive};
+
+    justify-content: center;
+    align-items: center;
+
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    font-family: ${theme.fontFamily.ui};
+    font-size: 14px;
+    font-weight: 800;
+    line-height: 16px;
+  `);
+const Question = styled.div(({ theme }) => css `
+    display: flex;
+    padding: 4px 8px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 8px;
+    flex: 1 0 0;
+    align-self: stretch;
+
+    color: ${theme.color.foreground.neutralBase};
+    /* Default/Paragraph/16px-Rg */
+    font-family: ${theme.fontFamily.ui};
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px; /* 150% */
+  `);
+const StyledToggleButtonGroup = styled(ToggleButtonGroup) `
+  flex: none;
+  width: ${TOGGLE_BUTTON_GROUP_WIDTH}px;
+`;

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/FormIconAndLabel/FormIconAndLabel.d.ts

@@ -0,0 +1,7 @@
+import { Control } from "react-hook-form";
+import { SettingFormData } from "../SettingForm";
+/** 아이콘, 레이블을 설정하는 Form입니다. */
+export declare function FormIconAndLabel(props: {
+    control: Control<SettingFormData, any>;
+    labelsLength: number;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/FormIconAndLabel/FormIconAndLabel.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Controller } from "react-hook-form";
+import { css, useTheme } from "@emotion/react";
+import { ICON_DATA, ICON_TYPES } from "../../../../iconData";
+import styled from "@emotion/styled";
+import { Dropdown, DropdownItem } from "../../../../../../../Dropdown";
+import { FormLabel } from "./FormLabel";
+import { ArrowDownSFillIcon } from "../../../../../../../..";
+/** 아이콘, 레이블을 설정하는 Form입니다. */
+export function FormIconAndLabel(props) {
+    const { control, labelsLength } = props;
+    const theme = useTheme();
+    const iconDataMap = ICON_DATA(theme);
+    return (_jsx(Controller, { control: control, name: "iconType", render: ({ field: { value, onChange } }) => {
+            const { startIcon, title, icons } = iconDataMap[value];
+            return (_jsxs(_Fragment, { children: [_jsx(Dropdown, Object.assign({ label: "아이콘: " + title, size: "small", color: "grey", closeOnItemClick: true, bold: true, startIcon: startIcon, endIcon: _jsx(ArrowDownSFillIcon, {}), menuProps: {
+                            menuCss: css `
+                  width: 216px;
+                `,
+                            anchorOrigin: {
+                                vertical: "bottom",
+                                horizontal: "center",
+                            },
+                            transformOrigin: {
+                                vertical: "top",
+                                horizontal: "center",
+                            },
+                        } }, { children: ICON_TYPES.map((type, index) => {
+                            const { title, startIcon } = iconDataMap[type];
+                            return (_jsx(DropdownItem, { index: index, label: title, preserveIconColor: true, startIcon: startIcon, onClick: () => {
+                                    onChange(type);
+                                } }, index));
+                        }) })), Array.from({ length: labelsLength }).map((_, index) => (_jsxs(LabelLine, { children: [_jsx(Icon, { children: icons[index].onIcon }), _jsx(FormLabel, { control: control, index: index })] }, index)))] }));
+        } }));
+}
+const LabelLine = styled.div `
+  display: flex;
+  align-items: flex-start;
+  gap: 4px;
+  align-self: stretch;
+`;
+const Icon = styled.div(({ theme }) => css `
+    display: flex;
+    min-width: 36px;
+    min-height: 36px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+
+    border-radius: 8px;
+    border: 0.5px solid ${theme.color.background.neutralAltActive};
+  `);

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/FormIconAndLabel/FormLabel.d.ts

@@ -0,0 +1,7 @@
+import { Control } from "react-hook-form";
+import { SettingFormData } from "../SettingForm";
+/** 레이블을 설정하는 Form입니다. */
+export declare function FormLabel(props: {
+    control: Control<SettingFormData, any>;
+    index: number;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/FormIconAndLabel/FormLabel.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useController } from "react-hook-form";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
+import { FormInput } from "../../../../../Form";
+const LABEL_RULES = {
+    required: "필수 입력 항목입니다.",
+    maxLength: 12,
+};
+/** 레이블을 설정하는 Form입니다. */
+export function FormLabel(props) {
+    const { control, index } = props;
+    // endIcon에 들어갈 value, error를 사용하기 위해 useController를 사용합니다.
+    const { field: { value }, fieldState: { error }, } = useController({
+        control,
+        name: `labels.${index}`,
+        rules: LABEL_RULES,
+    });
+    return (_jsx(FormInput, { control: control, name: `labels.${index}`, rules: LABEL_RULES, size: "small", endIcon: _jsx(Counter, Object.assign({ error: Boolean(error) }, { children: value.length + "/" + LABEL_RULES.maxLength })), fullWidth: true }));
+}
+const Counter = styled.span(({ theme, error }) => css `
+    color: ${error
+    ? theme.color.foreground.dangerActive
+    : theme.color.foreground.neutralBase};
+    font-family: ${theme.fontFamily.ui};
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 20px; /* 142.857% */
+  `);

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/FormIconAndLabel/index.d.ts

@@ -0,0 +1 @@
+export * from "./FormIconAndLabel";

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/FormIconAndLabel/index.js

@@ -0,0 +1 @@
+export * from "./FormIconAndLabel";

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/FormQuestion.d.ts

@@ -0,0 +1,9 @@
+/** @jsxImportSource @emotion/react */
+import { Control } from "react-hook-form";
+import { SettingFormData } from "./SettingForm";
+/** 평가 항목을 설정하는 Form입니다. */
+export declare function FormQuestion(props: {
+    index: number;
+    control: Control<SettingFormData, any>;
+    onDelete?: () => void;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/FormQuestion.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
+import { DeleteBinLineIcon, SquareButton } from "../../../../../../..";
+import { FormInput } from "../../../../Form";
+/** 평가 항목을 설정하는 Form입니다. */
+export function FormQuestion(props) {
+    const { control, index, onDelete } = props;
+    return (_jsxs(Item, { children: [_jsx(Index, { children: index + 1 }), _jsx(FormInput, { control: control, name: `evaluations.${index}.question.text`, rules: {
+                    required: "필수 입력 항목입니다.",
+                }, size: "small", placeholder: `${index + 1}번 평가 항목`, multiline: true, fullWidth: true }), onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete }))] }));
+}
+const Item = styled.div(({ theme }) => css `
+    display: flex;
+    padding: 4px 12px;
+    align-items: center;
+    gap: 4px;
+    align-self: stretch;
+    border-radius: 8px;
+    background: ${theme.color.background.neutralAlt};
+  `);
+const Index = styled.div(({ theme }) => css `
+    display: flex;
+    width: 20px;
+    height: 20px;
+    padding: 4px;
+
+    user-select: none; /* Standard syntax */
+
+    border-radius: 4px;
+    background: ${theme.color.background.neutralBase};
+    border: 1px solid ${theme.color.background.neutralAltActive};
+
+    justify-content: center;
+    align-items: center;
+
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    font-family: ${theme.fontFamily.ui};
+    font-size: 14px;
+    font-weight: 800;
+    line-height: 16px;
+  `);

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/SettingForm.d.ts

@@ -0,0 +1,17 @@
+/** @jsxImportSource @emotion/react */
+import { NodeKey } from "lexical";
+import { EvaluationItem, IconType } from "../../../SelfEvaluationNode";
+export interface SettingFormData {
+    iconType: IconType;
+    labels: string[];
+    evaluations: EvaluationItem[];
+}
+/** 자기평가 edit의 설정 컴포넌트입니다. */
+export declare function SettingForm(props: {
+    className?: string;
+    iconType: IconType;
+    labels: string[];
+    evaluations: EvaluationItem[];
+    nodeKey: NodeKey;
+    onClose: () => void;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/SettingForm.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { $getNodeByKey } from "lexical";
+import { $isSelfEvaluationNode, } from "../../../SelfEvaluationNode";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useFieldArray, useForm } from "react-hook-form";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
+import { AddFillIcon, Button, EmojiStickerLineIcon, shadows, } from "../../../../../../..";
+import { FormIconAndLabel } from "./FormIconAndLabel";
+import { FormQuestion } from "./FormQuestion";
+/** 자기평가 edit의 설정 컴포넌트입니다. */
+export function SettingForm(props) {
+    const { className, iconType, labels, evaluations, nodeKey, onClose } = props;
+    const [editor] = useLexicalComposerContext();
+    const { control, handleSubmit } = useForm({
+        mode: "all",
+        defaultValues: {
+            iconType,
+            labels,
+            evaluations,
+        },
+    });
+    const { fields, append, remove } = useFieldArray({
+        control,
+        name: "evaluations",
+        keyName: "uid",
+    });
+    const onSubmit = (data) => {
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if (!$isSelfEvaluationNode(node)) {
+                return;
+            }
+            node.setIconType(data.iconType);
+            node.setLabels(data.labels);
+            node.setEvaluations(data.evaluations);
+        });
+        onClose();
+    };
+    return (_jsxs(Form, Object.assign({ className: className, onSubmit: handleSubmit(onSubmit) }, { children: [_jsxs(Title, { children: [_jsx(EmojiStickerLineIcon, { css: css `
+            width: 12px;
+            height: 12px;
+          ` }), "3\uB2E8\uACC4 \uD3C9\uAC00"] }), _jsxs(Content, { children: [_jsxs(Left, { children: [_jsx(Label, { children: "\uD3C9\uAC00 \uD56D\uBAA9" }), fields.map((field, index) => (_jsx(FormQuestion, { index: index, control: control, onDelete: index !== 0
+                                    ? () => {
+                                        remove(index);
+                                    }
+                                    : undefined }, field.uid))), _jsx(Button, { color: "grey", size: "small", startIcon: _jsx(AddFillIcon, {}), label: "\uD3C9\uAC00 \uD56D\uBAA9 \uCD94\uAC00", onClick: () => {
+                                    append({
+                                        question: { text: "평가 항목을 입력하세요." },
+                                        selectedLabelIndex: null,
+                                    });
+                                } })] }), _jsxs(Right, { children: [_jsx(Label, { children: "\uC544\uC774\uCF58, \uB808\uC774\uBE14" }), _jsx(FormIconAndLabel, { control: control, labelsLength: labels.length })] })] }), _jsxs(Buttons, { children: [_jsx(Button, { color: "grey", size: "xsmall", label: "\uB2EB\uAE30", onClick: onClose }), _jsx(Button, { color: "primary", size: "xsmall", label: "\uC774\uB300\uB85C \uB123\uAE30", bold: true, type: "submit" })] })] })));
+}
+const Form = styled.form(({ theme }) => css `
+    display: flex;
+    flex-direction: column;
+    border-radius: 6px;
+    border: 1px solid ${theme.color.background.neutralAltActive};
+    background: ${theme.color.background.neutralBase};
+    box-shadow: ${shadows.shadow08};
+  `);
+const Title = styled.div(({ theme }) => css `
+    display: flex;
+    padding: 8px 12px;
+    gap: 4px;
+    align-items: center;
+    color: ${theme.color.foreground.neutralBase};
+    /* Default/Label/12px-Md */
+    font-family: ${theme.fontFamily.ui};
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px; /* 133.333% */
+  `);
+const Content = styled.div(({ theme }) => css `
+    display: flex;
+    border-top: 1px solid ${theme.color.background.neutralAltActive};
+    border-bottom: 1px solid ${theme.color.background.neutralAltActive};
+  `);
+const Left = styled.div `
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px;
+`;
+const Right = styled.div `
+  width: 240px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+`;
+const Label = styled.div(({ theme }) => css `
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    /* Default/Label/12px-Md */
+    font-family: ${theme.fontFamily.ui};
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px; /* 133.333% */
+  `);
+const Buttons = styled.div `
+  display: flex;
+  padding: 12px;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+`;

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/index.d.ts

@@ -0,0 +1 @@
+export * from "./SettingForm";

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/index.js

@@ -0,0 +1 @@
+export * from "./SettingForm";

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Evaluation";
+export * from "./SettingForm";

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/index.js

@@ -0,0 +1,2 @@
+export * from "./Evaluation";
+export * from "./SettingForm";

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/EvaluationComponent.d.ts

@@ -0,0 +1,10 @@
+/** @jsxImportSource @emotion/react */
+import { NodeKey } from "lexical";
+import { EvaluationItem, IconType } from "../SelfEvaluationNode";
+/** SelfEvaluationNode를 그리는 컴포넌트입니다. */
+export declare function EvaluationComponent(props: {
+    iconType: IconType;
+    labels: string[];
+    evaluations: EvaluationItem[];
+    nodeKey: NodeKey;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/EvaluationComponent.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { $getNodeByKey } from "lexical";
+import { $isSelfEvaluationNode, } from "../SelfEvaluationNode";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useContext, useState } from "react";
+import useLexicalEditable from "@lexical/react/useLexicalEditable";
+import { LexicalCustomConfigContext } from "../../../LexicalCustomConfigContext";
+import { Evaluation, SettingForm } from "./Evaluation";
+import { ICON_DATA } from "../iconData";
+import { css, useTheme } from "@emotion/react";
+import SquareButton from "../../../../../components/SquareButton";
+import { Settings3FillIcon } from "../../../../../icons";
+import _ from "lodash";
+const EVALUATION_EDIT_WIDTH = 620;
+/** SelfEvaluationNode를 그리는 컴포넌트입니다. */
+export function EvaluationComponent(props) {
+    const { iconType, labels, evaluations, nodeKey } = props;
+    const theme = useTheme();
+    const [editor] = useLexicalComposerContext();
+    const isEditable = useLexicalEditable();
+    const { freezeProblemNode } = useContext(LexicalCustomConfigContext);
+    const [settingOpen, setSettingOpen] = useState(false);
+    const { icons } = ICON_DATA(theme)[iconType];
+    // label과 icons를 매핑하여 ToggelButtonData로 변환합니다.
+    // 만약 둘의 길이가 같지 않다면 짧은 길이에 맞춰집니다.
+    const data = _.zipWith(labels, icons, (label, { onIcon, offIcon }) => ({
+        label,
+        onIcon,
+        offIcon,
+    }));
+    // view
+    if (!isEditable) {
+        return (_jsx(Evaluation, { data: data, evaluations: evaluations, onChange: freezeProblemNode
+                ? undefined
+                : (evaluations) => {
+                    editor.update(() => {
+                        const node = $getNodeByKey(nodeKey);
+                        if (!$isSelfEvaluationNode(node)) {
+                            return;
+                        }
+                        node.setEvaluations(evaluations);
+                    });
+                } }));
+    }
+    // edit
+    return (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ css: css `
+          display: flex;
+          gap: 4px;
+        ` }, { children: [_jsx(Evaluation, { css: css `
+            width: ${EVALUATION_EDIT_WIDTH}px;
+          `, data: data, evaluations: evaluations, onClick: () => setSettingOpen((open) => !open) }), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
+                            setSettingOpen((open) => !open);
+                        } })] })), settingOpen && (_jsx(SettingForm, { css: css `
+            width: ${EVALUATION_EDIT_WIDTH}px;
+          `, iconType: iconType, labels: labels, evaluations: evaluations, nodeKey: nodeKey, onClose: () => setSettingOpen(false) }))] }));
+}

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/index.d.ts

@@ -0,0 +1 @@
+export * from "./EvaluationComponent";

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/index.js

@@ -0,0 +1 @@
+export * from "./EvaluationComponent";

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/SelfEvaluationNode.d.ts

@@ -0,0 +1,45 @@
+import { DecoratorNode, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from "lexical";
+import { ReactNode } from "react";
+export type IconType = "emoji" | "ascendingNumber" | "descendingNumber";
+/** 자기 평가 항목 */
+export interface EvaluationItem {
+    question: {
+        text: string;
+    };
+    selectedLabelIndex: number | null;
+}
+export interface SelfEvaluationPayload {
+    /** 아이콘 프리셋 타입 */
+    iconType: IconType;
+    /** 자기평가 레이블 */
+    labels: string[];
+    /** 자기평가 항목들 */
+    evaluations: EvaluationItem[];
+    key?: NodeKey;
+}
+export type SerializedSelfEvaluationNode = Spread<SelfEvaluationPayload, SerializedLexicalNode>;
+/** 3단계 평가 입력칸을 나타내는 노드입니다.
+ * 도구 이름으로서는 "3단계 평가 입력 칸"으로 나타나지만, n단계로 확장 가능합니다.
+ */
+export declare class SelfEvaluationNode extends DecoratorNode<ReactNode> {
+    __iconType: IconType;
+    __labels: string[];
+    __evaluations: EvaluationItem[];
+    isInline(): boolean;
+    static getType(): string;
+    getIconType(): IconType;
+    getLabels(): string[];
+    getEvaluations(): EvaluationItem[];
+    setIconType(iconType: IconType): void;
+    setLabels(labels: string[]): void;
+    setEvaluations(evaluations: EvaluationItem[]): void;
+    static clone(node: SelfEvaluationNode): SelfEvaluationNode;
+    constructor(iconType: IconType, labels: string[], evaluations: EvaluationItem[], key?: NodeKey);
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(): boolean;
+    static importJSON(serializedNode: SerializedSelfEvaluationNode): SelfEvaluationNode;
+    exportJSON(): SerializedSelfEvaluationNode;
+    decorate(): ReactNode;
+}
+export declare function $createSelfEvaluationNode(payload: SelfEvaluationPayload): SelfEvaluationNode;
+export declare function $isSelfEvaluationNode(node: LexicalNode | null | undefined): node is SelfEvaluationNode;