@team-monolith/cds 0.27.0 → 0.29.0

package/dist/patterns/ReactEditorJS/i18n.d.ts

@@ -0,0 +1,127 @@
+declare const I18n: {
+    messages: {
+        ui: {
+            blockTunes: {
+                toggler: {
+                    "Click to tune": string;
+                    "or drag to move": string;
+                };
+            };
+            inlineToolbar: {
+                converter: {
+                    "Convert to": string;
+                };
+            };
+            toolbar: {
+                toolbox: {
+                    Add: string;
+                };
+            };
+            popover: {
+                Filter: string;
+                "Nothing found": string;
+            };
+        };
+        toolNames: {
+            Text: string;
+            HeadingBig: string;
+            HeadingMedium: string;
+            HeadingSmall: string;
+            ListUnordered: string;
+            ListOrdered: string;
+            Warning: string;
+            Code: string;
+            Quote: string;
+            Callout: string;
+            Delimiter: string;
+            Table: string;
+            Image: string;
+            Link: string;
+            Marker: string;
+            Bold: string;
+            Italic: string;
+            InlineCode: string;
+            Toggle: string;
+            StrikeThrough: string;
+            Underline: string;
+        };
+        tools: {
+            header: {
+                header: string;
+                sub_header: string;
+                sub_sub_header: string;
+            };
+            sub_header: {
+                header: string;
+                sub_header: string;
+                sub_sub_header: string;
+            };
+            sub_sub_header: {
+                header: string;
+                sub_header: string;
+                sub_sub_header: string;
+            };
+            bulleted_list: {
+                Ordered: string;
+                Unordered: string;
+            };
+            numbered_list: {
+                Ordered: string;
+                Unordered: string;
+            };
+            quote: {
+                Grey: string;
+                Red: string;
+                Yellow: string;
+                Blue: string;
+                Green: string;
+            };
+            callout: {
+                Grey: string;
+                Red: string;
+                Yellow: string;
+                Blue: string;
+                Green: string;
+            };
+            link: {
+                "Add a link": string;
+            };
+            raw: {
+                "Light Theme": string;
+                "Dark Theme": string;
+            };
+            stub: {
+                "The block can not be displayed correctly.": string;
+            };
+            table: {
+                "With headings": string;
+                "Without headings": string;
+                Heading: string;
+                "Add column to left": string;
+                "Add column to right": string;
+                "Delete column": string;
+                "Add row above": string;
+                "Add row below": string;
+                "Delete row": string;
+            };
+            image: {
+                "With border": string;
+                "Stretch image": string;
+                "With background": string;
+            };
+        };
+        blockTunes: {
+            delete: {
+                Delete: string;
+                "Click to delete": string;
+            };
+            moveUp: {
+                "Move up": string;
+            };
+            moveDown: {
+                "Move down": string;
+            };
+        };
+    };
+};
+export default I18n;

package/dist/patterns/ReactEditorJS/i18n.js

@@ -0,0 +1,127 @@
+var I18n = {
+    messages: {
+        ui: {
+            blockTunes: {
+                toggler: {
+                    "Click to tune": "클릭하여 변환",
+                    "or drag to move": "드래그하여 이동",
+                },
+            },
+            inlineToolbar: {
+                converter: {
+                    "Convert to": "블록 유형 변경",
+                },
+            },
+            toolbar: {
+                toolbox: {
+                    Add: "추가하기",
+                },
+            },
+            popover: {
+                Filter: "찾기",
+                "Nothing found": "항목이 없습니다.",
+            },
+        },
+        toolNames: {
+            Text: "본문",
+            HeadingBig: "큰 제목",
+            HeadingMedium: "중간 제목",
+            HeadingSmall: "작은 제목",
+            ListUnordered: "일반 목록",
+            ListOrdered: "숫자 목록",
+            Warning: "경고",
+            Code: "코드 블록",
+            Quote: "인용 블록",
+            Callout: "주목 블록",
+            Delimiter: "구분선",
+            Table: "표",
+            Image: "이미지",
+            Link: "링크",
+            Marker: "마커",
+            Bold: "굵게",
+            Italic: "기울임",
+            InlineCode: "인라인 코드",
+            Toggle: "토글",
+            StrikeThrough: "취소선",
+            Underline: "밑줄",
+        },
+        tools: {
+            header: {
+                header: "큰 제목",
+                sub_header: "중간 제목",
+                sub_sub_header: "작은 제목",
+            },
+            sub_header: {
+                header: "큰 제목",
+                sub_header: "중간 제목",
+                sub_sub_header: "작은 제목",
+            },
+            sub_sub_header: {
+                header: "큰 제목",
+                sub_header: "중간 제목",
+                sub_sub_header: "작은 제목",
+            },
+            bulleted_list: {
+                Ordered: "숫자 목록",
+                Unordered: "일반 목록",
+            },
+            numbered_list: {
+                Ordered: "숫자 목록",
+                Unordered: "일반 목록",
+            },
+            quote: {
+                Grey: "회색",
+                Red: "빨간색",
+                Yellow: "노란색",
+                Blue: "파란색",
+                Green: "초록색",
+            },
+            callout: {
+                Grey: "회색",
+                Red: "빨간색",
+                Yellow: "노란색",
+                Blue: "파란색",
+                Green: "초록색",
+            },
+            link: {
+                "Add a link": "링크 추가하기",
+            },
+            raw: {
+                "Light Theme": "밝은 배경",
+                "Dark Theme": "어두운 배경",
+            },
+            stub: {
+                "The block can not be displayed correctly.": "이 블록은 올바르게 표시될 수 없습니다.",
+            },
+            table: {
+                "With headings": "제목 행 있음",
+                "Without headings": "제목 행 없음",
+                Heading: "제목",
+                "Add column to left": "왼쪽에 열 추가",
+                "Add column to right": "오른쪽에 열 추가",
+                "Delete column": "이 열 삭제",
+                "Add row above": "위에 행 추가",
+                "Add row below": "아래에 행 추가",
+                "Delete row": "이 행 삭제",
+            },
+            image: {
+                "With border": "테두리 넣기",
+                "Stretch image": "이미지 폭 넓게",
+                "With background": "배경 넣기",
+            },
+        },
+        blockTunes: {
+            delete: {
+                Delete: "블록 삭제",
+                "Click to delete": "클릭하여 삭제하기",
+            },
+            moveUp: {
+                "Move up": "위로 이동",
+            },
+            moveDown: {
+                "Move down": "아래로 이동",
+            },
+        },
+    },
+};
+export default I18n;

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

@@ -0,0 +1,2 @@
+export * from "./ReactEditorJS";
+export * from "./FormEditorJS";

package/dist/patterns/ReactEditorJS/index.js

@@ -0,0 +1,2 @@
+export * from "./ReactEditorJS";
+export * from "./FormEditorJS";

package/dist/patterns/ReactEditorJS/tools.d.ts

@@ -0,0 +1,78 @@
+import { Bold, HeaderBig, HeaderMedium, HeaderSmall, ListOrdered, ListUnordered, Raw, Delimiter, Table, Image, Quote, Callout, Italic, InlineCode, StrikeThrough, Underline, MoveDown, MoveUp, Delete } from "./customTools";
+declare const TOOLS: {
+    paragraph: {
+        class: any;
+        toolbox: {
+            icon: string;
+        };
+    };
+    header: {
+        class: typeof HeaderBig;
+        inlineToolbar: string[];
+    };
+    sub_header: {
+        class: typeof HeaderMedium;
+        inlineToolbar: string[];
+    };
+    sub_sub_header: {
+        class: typeof HeaderSmall;
+        inlineToolbar: string[];
+    };
+    bulleted_list: {
+        class: typeof ListUnordered;
+        inlineToolbar: string[];
+        pasteConfig: {
+            tags: string[];
+        };
+    };
+    numbered_list: {
+        class: typeof ListOrdered;
+        inlineToolbar: string[];
+        config: {
+            defaultStyle: string;
+        };
+        pasteConfig: {
+            tags: string[];
+        };
+    };
+    quote: typeof Quote;
+    callout: typeof Callout;
+    raw: {
+        class: typeof Raw;
+        config: {
+            placeholder: string;
+        };
+    };
+    delimiter: typeof Delimiter;
+    table: {
+        class: typeof Table;
+        config: {
+            withHeadings: boolean;
+        };
+    };
+    image: typeof Image;
+    bold: {
+        class: typeof Bold;
+        shortcut: string;
+    };
+    italic: {
+        class: typeof Italic;
+        shortcut: string;
+    };
+    inlineCode: {
+        class: typeof InlineCode;
+        shortcut: string;
+    };
+    strikeThrough: {
+        class: typeof StrikeThrough;
+        shortcut: string;
+    };
+    underline: {
+        class: typeof Underline;
+        shortcut: string;
+    };
+    moveUp: typeof MoveUp;
+    delete: typeof Delete;
+    moveDown: typeof MoveDown;
+};
+export default TOOLS;

package/dist/patterns/ReactEditorJS/tools.js

@@ -0,0 +1,104 @@
+import Paragraph from "@editorjs/paragraph";
+import { textSvg } from "../../icons";
+import { Bold, HeaderBig, HeaderMedium, HeaderSmall, ListOrdered, ListUnordered, Raw, Delimiter, Table, Image, Quote, Callout, Italic, InlineCode, StrikeThrough, Underline, MoveDown, MoveUp, Delete, } from "./customTools";
+var INLINE_TOOLBAR = [
+    "bold",
+    "italic",
+    "underline",
+    "strikeThrough",
+    "inlineCode",
+    "link",
+];
+var TOOLS = {
+    // 블록 툴: 순서대로 툴바에 나열됩니다.
+    paragraph: {
+        class: Paragraph,
+        // https://github.com/editor-js/paragraph/blob/master/src/index.js
+        toolbox: {
+            icon: "<img src=\"".concat(textSvg, "\" />"),
+        },
+    },
+    header: {
+        class: HeaderBig,
+        inlineToolbar: INLINE_TOOLBAR,
+    },
+    sub_header: {
+        class: HeaderMedium,
+        inlineToolbar: INLINE_TOOLBAR,
+    },
+    sub_sub_header: {
+        class: HeaderSmall,
+        inlineToolbar: INLINE_TOOLBAR,
+    },
+    bulleted_list: {
+        class: ListUnordered,
+        inlineToolbar: INLINE_TOOLBAR,
+        pasteConfig: {
+            tags: ["UL", "LI"],
+        },
+    },
+    numbered_list: {
+        class: ListOrdered,
+        inlineToolbar: INLINE_TOOLBAR,
+        config: {
+            defaultStyle: "ordered",
+        },
+        pasteConfig: {
+            tags: ["OL", "LI"],
+        },
+    },
+    // 현재 토글에 버그가 있어 기능을 비활성화 합니다.
+    // toggle: {
+    //   class: Toggle,
+    //   inlineToolbar: INLINE_TOOLBAR,
+    //   toolbox: {
+    //     icon: `<img src="${arrowRightSFillSvg}" />`,
+    //   },
+    //   config: {
+    //     placeholder: "토글",
+    //     defaultContent: "토글 내부 항목",
+    //   },
+    // },
+    quote: Quote,
+    callout: Callout,
+    raw: {
+        class: Raw,
+        config: {
+            placeholder: "코드를 입력하세요.",
+        },
+    },
+    delimiter: Delimiter,
+    table: {
+        class: Table,
+        config: {
+            withHeadings: true,
+        },
+    },
+    image: Image,
+    // 인라인 툴 : ReactEditorJS에서 inlineToolbar를 지정하여 노출합니다.
+    bold: {
+        class: Bold,
+        shortcut: "CMD+B",
+    },
+    italic: {
+        class: Italic,
+        shortcut: "CMD+I",
+    },
+    inlineCode: {
+        class: InlineCode,
+        shortcut: "CMD+SHIFT+M",
+    },
+    strikeThrough: {
+        class: StrikeThrough,
+        shortcut: "CMD+SHIFT+X",
+    },
+    underline: {
+        class: Underline,
+        shortcut: "CMD+SHIFT+U",
+    },
+    // 블록 변경(tune) 툴
+    moveUp: MoveUp,
+    delete: Delete,
+    moveDown: MoveDown,
+};
+export default TOOLS;

package/dist/patterns/SegmentedControl/SegmentedControlButton.js

@@ -44,6 +44,6 @@ export var SegmentedControlButton = React.forwardRef(function SegmentedControlBu
     var isActive = context.multiSelect
         ? context.value.includes(props.value)
         : context.value === props.value;
-    return (_jsx(Button, __assign({ css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          display: flex;\n          justify-content: center;\n          flex-grow: 1;\n          ", "\n        "], ["\n          display: flex;\n          justify-content: center;\n          flex-grow: 1;\n          ", "\n        "])), isActive && "box-shadow: ".concat(shadows.shadow04, ";")) }, other, { ref: ref, color: isActive ? "primary" : "textNeutral", size: context.size, onClick: handleClick })));
+    return (_jsx(Button, __assign({ css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          display: flex;\n          justify-content: center;\n          flex-grow: 1;\n          ", "\n        "], ["\n          display: flex;\n          justify-content: center;\n          flex-grow: 1;\n          ", "\n        "])), isActive && "box-shadow: ".concat(shadows.shadow04, ";")) }, other, { ref: ref, color: isActive ? "white" : "textNeutral", size: context.size, onClick: handleClick })));
 });
 var templateObject_1;

package/dist/patterns/SegmentedControl/SegmentedControlGroup.js

@@ -33,7 +33,7 @@ import React from "react";
 export var SegmentedControlGroup = React.forwardRef(function SegmentedControlGroup(props, ref) {
     var _a = props.component, Component = _a === void 0 ? "div" : _a, className = props.className, children = props.children, fullWidth = props.fullWidth, multiSelect = props.multiSelect;
     var theme = useTheme();
-    return (_jsx(Component, __assign({ ref: ref, className: className, css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        display: flex;\n        gap: 4px;\n\n        width: ", ";\n        background-color: ", ";\n        border-radius: 8px;\n        border: 1px solid ", ";\n      "], ["\n        display: flex;\n        gap: 4px;\n\n        width: ", ";\n        background-color: ", ";\n        border-radius: 8px;\n        border: 1px solid ", ";\n      "])), fullWidth ? "100%" : "fit-content", theme.color.background.neutralAlt, theme.color.background.neutralAltActive) }, { children: _jsx(SegmentedControlGroupPropsContext.Provider, __assign({ value: __assign(__assign({}, props), { onClick: function (newValue) {
+    return (_jsx(Component, __assign({ ref: ref, className: className, css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          display: flex;\n          padding: 4px;\n\n          width: ", ";\n          background-color: ", ";\n          border-radius: 8px;\n          border: 1px solid ", ";\n        "], ["\n          display: flex;\n          padding: 4px;\n\n          width: ", ";\n          background-color: ", ";\n          border-radius: 8px;\n          border: 1px solid ", ";\n        "])), fullWidth ? "100%" : "fit-content", theme.color.background.neutralAlt, theme.color.background.neutralAltActive) }, { children: _jsx(SegmentedControlGroupPropsContext.Provider, __assign({ value: __assign(__assign({}, props), { onClick: function (newValue) {
                     var _a, _b, _c;
                     if (multiSelect) {
                         if (props.value.includes(newValue)) {

package/package.json

@@ -1,18 +1,32 @@
 {
   "name": "@team-monolith/cds",
-  "version": "0.27.0",
+  "version": "0.29.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,
   "dependencies": {
+    "@editorjs/delimiter": "^1.4.0",
+    "@editorjs/header": "^2.8.1",
+    "@editorjs/image": "^2.9.0",
+    "@editorjs/inline-code": "^1.5.0",
+    "@editorjs/nested-list": "^1.4.1",
+    "@editorjs/quote": "^2.6.0",
+    "@editorjs/raw": "^2.5.0",
+    "@editorjs/table": "^2.3.0",
+    "@editorjs/underline": "^1.1.0",
     "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
     "@mui/material": "^5.13.6",
+    "@sentry/react": "^7.80.1",
     "@types/node": "^16.11.26",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
+    "editorjs-strikethrough": "^1.0.0",
+    "hex-to-css-filter": "^5.4.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-editor-js": "^2.1.0",
+    "react-hook-form": "^7.48.2",
     "remixicon": "^3.4.0",
     "typescript": "^4.5.5",
     "uid": "^2.0.2"