@team-monolith/cds 1.55.0 → 1.56.0

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

@@ -1,43 +0,0 @@
-import { DecoratorNode, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from "lexical";
-import { ReactNode } from "react";
-export type IconType = "emoji" | "ascendingNumber" | "descendingNumber";
-export interface SelfEvaluationPayload {
-    /** 아이콘 프리셋 타입 */
-    iconType: IconType;
-    /** 자기평가 레이블 */
-    labels: string[];
-    /** 자기평가 항목들 */
-    descriptions: string[];
-    /** 선택된 레이블 인덱스 */
-    selectedLabelIndexes: (number | null)[];
-    key?: NodeKey;
-}
-export type SerializedSelfEvaluationNode = Spread<SelfEvaluationPayload, SerializedLexicalNode>;
-/** 3단계 평가 입력칸을 나타내는 노드입니다.
- * 도구 이름으로서는 "3단계 평가 입력 칸"으로 나타나지만, n단계로 확장 가능합니다.
- */
-export declare class SelfEvaluationNode extends DecoratorNode<ReactNode> {
-    __iconType: IconType;
-    __labels: string[];
-    __descriptions: string[];
-    __selectedLabelIndexes: (number | null)[];
-    isInline(): boolean;
-    static getType(): string;
-    getIconType(): IconType;
-    getLabels(): string[];
-    getDescriptions(): string[];
-    getSelectedLabelIndexes(): (number | null)[];
-    setIconType(iconType: IconType): void;
-    setLabels(labels: string[]): void;
-    setDescriptions(descriptions: string[]): void;
-    setSelectedLabelIndexes(selectedLabelIndexes: (number | null)[]): void;
-    static clone(node: SelfEvaluationNode): SelfEvaluationNode;
-    constructor(iconType: IconType, labels: string[], descriptions: string[], selectedLabelIndexes: (number | null)[], 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;

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

@@ -1,91 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { $applyNodeReplacement, DecoratorNode, } from "lexical";
-import { addClassNamesToElement } from "@lexical/utils";
-import { EvaluationComponent } from "./EvaluationComponent";
-/** 3단계 평가 입력칸을 나타내는 노드입니다.
- * 도구 이름으로서는 "3단계 평가 입력 칸"으로 나타나지만, n단계로 확장 가능합니다.
- */
-export class SelfEvaluationNode extends DecoratorNode {
-    isInline() {
-        return false;
-    }
-    static getType() {
-        return "self-evaluation";
-    }
-    getIconType() {
-        return this.__iconType;
-    }
-    getLabels() {
-        return this.__labels;
-    }
-    getDescriptions() {
-        return this.__descriptions;
-    }
-    getSelectedLabelIndexes() {
-        return this.__selectedLabelIndexes;
-    }
-    setIconType(iconType) {
-        const self = this.getWritable();
-        self.__iconType = iconType;
-    }
-    setLabels(labels) {
-        const self = this.getWritable();
-        self.__labels = labels;
-    }
-    setDescriptions(descriptions) {
-        const self = this.getWritable();
-        self.__descriptions = descriptions;
-    }
-    setSelectedLabelIndexes(selectedLabelIndexes) {
-        const self = this.getWritable();
-        self.__selectedLabelIndexes = selectedLabelIndexes;
-    }
-    static clone(node) {
-        return new SelfEvaluationNode(node.__iconType, node.__labels, node.__descriptions, node.__selectedLabelIndexes);
-    }
-    constructor(iconType, labels, descriptions, selectedLabelIndexes, key) {
-        super(key);
-        this.__iconType = iconType;
-        this.__labels = labels;
-        this.__descriptions = descriptions;
-        this.__selectedLabelIndexes = selectedLabelIndexes;
-    }
-    createDOM(config) {
-        // Define the DOM element here
-        const root = document.createElement("div");
-        addClassNamesToElement(root, config.theme.selfEvaluation);
-        return root;
-    }
-    updateDOM() {
-        return false;
-    }
-    static importJSON(serializedNode) {
-        return $createSelfEvaluationNode({
-            key: serializedNode.key,
-            iconType: serializedNode.iconType,
-            labels: serializedNode.labels,
-            descriptions: serializedNode.descriptions,
-            selectedLabelIndexes: serializedNode.selectedLabelIndexes,
-        });
-    }
-    exportJSON() {
-        return {
-            type: "self-evaluation",
-            version: 1,
-            iconType: this.__iconType,
-            labels: this.__labels,
-            descriptions: this.__descriptions,
-            selectedLabelIndexes: this.__selectedLabelIndexes,
-        };
-    }
-    decorate() {
-        return (_jsx(EvaluationComponent, { iconType: this.__iconType, labels: this.__labels, descriptions: this.__descriptions, selectedLabelIndexes: this.__selectedLabelIndexes, nodeKey: this.getKey() }));
-    }
-}
-export function $createSelfEvaluationNode(payload) {
-    const { iconType, labels, descriptions, selectedLabelIndexes, key } = payload;
-    return $applyNodeReplacement(new SelfEvaluationNode(iconType, labels, descriptions, selectedLabelIndexes, key));
-}
-export function $isSelfEvaluationNode(node) {
-    return node instanceof SelfEvaluationNode;
-}

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

@@ -1,14 +0,0 @@
-import React from "react";
-import { IconType } from "./SelfEvaluationNode";
-import { Theme } from "@emotion/react";
-interface IconData {
-    startIcon: React.ReactNode;
-    title: string;
-    icons: {
-        onIcon: React.ReactNode;
-        offIcon: React.ReactNode;
-    }[];
-}
-export declare const ICON_TYPES: IconType[];
-export declare const ICON_DATA: (theme: Theme) => Record<IconType, IconData>;
-export {};

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

@@ -1,61 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { CustomEmoGoodColorIcon, CustomEmoGoodIcon, CustomEmoGreatColorIcon, CustomEmoGreatIcon, CustomEmoNeutralColorIcon, CustomEmoNeutralIcon, } from "../../../../icons/Custom";
-import { Number1Icon, Number2Icon, Number3Icon } from "../../../../icons";
-export const ICON_TYPES = [
-    "emoji",
-    "ascendingNumber",
-    "descendingNumber",
-];
-export const ICON_DATA = (theme) => ({
-    emoji: {
-        startIcon: _jsx(CustomEmoGreatColorIcon, {}),
-        title: "이모지",
-        icons: [
-            {
-                onIcon: _jsx(CustomEmoGreatColorIcon, {}),
-                offIcon: _jsx(CustomEmoGreatIcon, {}),
-            },
-            { onIcon: _jsx(CustomEmoGoodColorIcon, {}), offIcon: _jsx(CustomEmoGoodIcon, {}) },
-            {
-                onIcon: _jsx(CustomEmoNeutralColorIcon, {}),
-                offIcon: _jsx(CustomEmoNeutralIcon, {}),
-            },
-        ],
-    },
-    ascendingNumber: {
-        startIcon: _jsx(Number1Icon, {}),
-        title: "숫자, 1-2-3",
-        icons: [
-            {
-                onIcon: _jsx(Number1Icon, { color: theme.color.background.primary }),
-                offIcon: _jsx(Number1Icon, {}),
-            },
-            {
-                onIcon: _jsx(Number2Icon, { color: theme.color.background.primary }),
-                offIcon: _jsx(Number2Icon, {}),
-            },
-            {
-                onIcon: _jsx(Number3Icon, { color: theme.color.background.primary }),
-                offIcon: _jsx(Number3Icon, {}),
-            },
-        ],
-    },
-    descendingNumber: {
-        startIcon: _jsx(Number3Icon, {}),
-        title: "숫자, 3-2-1",
-        icons: [
-            {
-                onIcon: _jsx(Number3Icon, { color: theme.color.background.primary }),
-                offIcon: _jsx(Number3Icon, {}),
-            },
-            {
-                onIcon: _jsx(Number2Icon, { color: theme.color.background.primary }),
-                offIcon: _jsx(Number2Icon, {}),
-            },
-            {
-                onIcon: _jsx(Number1Icon, { color: theme.color.background.primary }),
-                offIcon: _jsx(Number1Icon, {}),
-            },
-        ],
-    },
-});

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

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

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

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

package/dist/patterns/LexicalEditor/plugins/SelfEvaluationPlugin/index.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import { LexicalCommand } from "lexical";
-import { SelfEvaluationPayload } from "../../nodes/SelfEvaluationNode";
-export declare const INSERT_SELF_EVALUATION_COMMAND: LexicalCommand<SelfEvaluationPayload>;
-export default function SelfEvaluationPlugin(): JSX.Element | null;

package/dist/patterns/LexicalEditor/plugins/SelfEvaluationPlugin/index.js

@@ -1,20 +0,0 @@
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { $insertNodeToNearestRoot } from "@lexical/utils";
-import { COMMAND_PRIORITY_EDITOR, createCommand, } from "lexical";
-import { useEffect } from "react";
-import { $createSelfEvaluationNode, SelfEvaluationNode, } from "../../nodes/SelfEvaluationNode";
-export const INSERT_SELF_EVALUATION_COMMAND = createCommand("INSERT_SELF_EVALUATION_COMMAND");
-export default function SelfEvaluationPlugin() {
-    const [editor] = useLexicalComposerContext();
-    useEffect(() => {
-        if (!editor.hasNodes([SelfEvaluationNode])) {
-            throw new Error("SelfEvaluationNode: SelfEvaluationNode not registered on editor");
-        }
-        editor.registerCommand(INSERT_SELF_EVALUATION_COMMAND, (payload) => {
-            const selfEvaluationNode = $createSelfEvaluationNode(payload);
-            $insertNodeToNearestRoot(selfEvaluationNode);
-            return true;
-        }, COMMAND_PRIORITY_EDITOR);
-    }, [editor]);
-    return null;
-}

package/dist/patterns/ToggleButtonGroup/ToggleButton.d.ts

@@ -1,9 +0,0 @@
-import { ToggleButtonDatum } from "./ToggleButtonGroup";
-/** 하나의 ToggleButton을 그립니다. */
-export declare function ToggleButton(props: {
-    datum: ToggleButtonDatum;
-    /** tooltip의 placement */
-    placement: "bottom-start" | "bottom" | "bottom-end";
-    isActive: boolean;
-    onClick: () => void;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/ToggleButtonGroup/ToggleButton.js

@@ -1,54 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import styled from "@emotion/styled";
-import { HOVER, Tooltip } from "../..";
-import { css } from "@emotion/react";
-import { toggleButtonGroupClasses, } from "./ToggleButtonGroup";
-/** 하나의 ToggleButton을 그립니다. */
-export function ToggleButton(props) {
-    const { datum, placement, isActive, onClick } = props;
-    const { label, onIcon, offIcon } = datum;
-    if (isActive) {
-        return (_jsxs(Active, Object.assign({ className: toggleButtonGroupClasses.toggleButton.active, onClick: onClick }, { children: [onIcon, label] })));
-    }
-    return (_jsx(Tooltip, Object.assign({ placement: placement, text: label }, { children: _jsx(Inactive, Object.assign({ className: toggleButtonGroupClasses.toggleButton.inactive, onClick: onClick }, { children: offIcon })) })));
-}
-const Active = styled.div(({ theme }) => css `
-    cursor: pointer;
-    display: flex;
-    padding: 8px 12px;
-    justify-content: center;
-    align-items: center;
-    gap: 8px;
-
-    border-radius: 99px;
-    background: ${theme.color.blanket.neutralLight};
-
-    color: ${theme.color.foreground.neutralBase};
-    font-family: ${theme.fontFamily.ui};
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 20px; /* 125% */
-
-    svg {
-      width: 24px;
-      height: 24px;
-    }
-  `);
-const Inactive = styled.div `
-  cursor: pointer;
-  display: flex;
-  padding: 8px 12px;
-  justify-content: center;
-  align-items: center;
-
-  opacity: 0.6;
-  ${HOVER(css `
-    opacity: 1;
-  `)}
-
-  svg {
-    width: 24px;
-    height: 24px;
-  }
-`;

package/dist/patterns/ToggleButtonGroup/ToggleButtonGroup.d.ts

@@ -1,29 +0,0 @@
-/// <reference types="react" />
-export declare const toggleButtonGroupClasses: {
-    readonly container: "ToggleButtonGroup-container";
-    readonly toggleButton: {
-        readonly active: "ToggleButtonGroup-ToggleButton-active";
-        readonly inactive: "ToggleButtonGroup-ToggleButton-inactive";
-    };
-};
-export interface ToggleButtonDatum {
-    /** ToggleButton의 레이블. 호버시 툴팁 또는 활성화시 나타납니다. */
-    label: React.ReactNode;
-    /** on 일때의 아이콘. 내부에서 사이즈가 24x24로 조정됩니다. */
-    onIcon: React.ReactNode;
-    /** off 일때의 아이콘. 내부에서 사이즈가 24x24로 조정됩니다.*/
-    offIcon: React.ReactNode;
-}
-/** n개의 toggleButton이 모여있는 형태를 나타내는 컴포넌트입니다.
- * 동작은 SegmentedControl과 비슷합니다.
- * 렉시컬 블록으로 활용하기 위해 선택된 버튼의 인덱스 상태를 외부에서 관리합니다.
- */
-export declare function ToggleButtonGroup(props: {
-    className?: string;
-    /** ToggleButton의 데이터 배열 */
-    data: ToggleButtonDatum[];
-    /** 활성화될 ToggleButton의 index */
-    activeIndex: number | null;
-    /** activeIndex set 함수 */
-    setActiveIndex: (index: number | null) => void;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/ToggleButtonGroup/ToggleButtonGroup.js

@@ -1,42 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled from "@emotion/styled";
-import { ToggleButton } from "./ToggleButton";
-export const toggleButtonGroupClasses = {
-    container: "ToggleButtonGroup-container",
-    toggleButton: {
-        active: "ToggleButtonGroup-ToggleButton-active",
-        inactive: "ToggleButtonGroup-ToggleButton-inactive",
-    },
-};
-/** n개의 toggleButton이 모여있는 형태를 나타내는 컴포넌트입니다.
- * 동작은 SegmentedControl과 비슷합니다.
- * 렉시컬 블록으로 활용하기 위해 선택된 버튼의 인덱스 상태를 외부에서 관리합니다.
- */
-export function ToggleButtonGroup(props) {
-    const { className, data, activeIndex, setActiveIndex } = props;
-    return (_jsx(Container, Object.assign({ className: `${className} ${toggleButtonGroupClasses.container}` }, { children: data.map((datum, index) => {
-            const isFirst = index === 0;
-            const isLast = index === data.length - 1;
-            const isFirstAndLast = isFirst && isLast;
-            const isActive = activeIndex === index;
-            return (_jsx(ToggleButton, { isActive: isActive, onClick: () => {
-                    setActiveIndex(isActive ? null : index);
-                }, datum: datum, placement: isFirstAndLast
-                    ? "bottom"
-                    : isFirst
-                        ? "bottom-start"
-                        : isLast
-                            ? "bottom-end"
-                            : "bottom" }, index));
-        }) })));
-}
-const Container = styled.div `
-  display: flex;
-  padding: 4px;
-  justify-content: space-between;
-  align-items: center;
-  flex: 1 0 0;
-
-  border-radius: 24px;
-  background: linear-gradient(90deg, #eff7ed 0%, #faefe3 100%);
-`;

package/dist/patterns/ToggleButtonGroup/index.d.ts

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

package/dist/patterns/ToggleButtonGroup/index.js

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