@team-monolith/cds 1.65.0 → 1.65.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/@types/emotion.d.ts +0 -14
- package/dist/CodleDesignSystemProvider.js +0 -28
- package/dist/icons/Custom.d.ts +0 -12
- package/dist/icons/Custom.js +0 -56
- package/dist/index.d.ts +0 -2
- package/dist/index.js +0 -2
- package/dist/patterns/LexicalEditor/convertToMarkdown.d.ts +2 -1
- package/dist/patterns/LexicalEditor/convertToMarkdown.js +2 -2
- package/dist/patterns/LexicalEditor/plugins/MarkdownTransformers/index.d.ts +2 -0
- package/dist/patterns/LexicalEditor/plugins/MarkdownTransformers/index.js +34 -0
- package/package.json +1 -2
- package/dist/components/Book/Book.d.ts +0 -18
- package/dist/components/Book/Book.js +0 -251
- package/dist/components/Book/index.d.ts +0 -2
- package/dist/components/Book/index.js +0 -2
- package/dist/icons/custom/badge-gold.svg +0 -11
- package/dist/icons/custom/badge-green.svg +0 -11
- package/dist/icons/custom/badge-silver.svg +0 -11
package/@types/emotion.d.ts
CHANGED
|
@@ -106,20 +106,6 @@ interface CodleColors {
|
|
|
106
106
|
ebookAlt: string;
|
|
107
107
|
makecode: string;
|
|
108
108
|
makecodeAlt: string;
|
|
109
|
-
decorativeRed: string;
|
|
110
|
-
decorativePink: string;
|
|
111
|
-
decorativeAmber: string;
|
|
112
|
-
decorativeGrass: string;
|
|
113
|
-
decorativeGreen: string;
|
|
114
|
-
decorativeBlue: string;
|
|
115
|
-
decorativeIndigo: string;
|
|
116
|
-
decorativePurple: string;
|
|
117
|
-
decorativeBrown: string;
|
|
118
|
-
decorativeCopper: string;
|
|
119
|
-
decorativeGold: string;
|
|
120
|
-
decorativeSilver: string;
|
|
121
|
-
decorativeGray: string;
|
|
122
|
-
decorativeBlack: string;
|
|
123
109
|
};
|
|
124
110
|
blanket: {
|
|
125
111
|
neutral: string;
|
|
@@ -111,20 +111,6 @@ export const light = {
|
|
|
111
111
|
ebookAlt: "#E0F2FF",
|
|
112
112
|
makecode: "#AA278F",
|
|
113
113
|
makecodeAlt: "#FFE0F9",
|
|
114
|
-
decorativeRed: "#D73152",
|
|
115
|
-
decorativePink: "#D13D78",
|
|
116
|
-
decorativeAmber: "#CC4827",
|
|
117
|
-
decorativeGrass: "#6E7B3F",
|
|
118
|
-
decorativeGreen: "#26864B",
|
|
119
|
-
decorativeBlue: "#0076D0",
|
|
120
|
-
decorativeIndigo: "#5863FF",
|
|
121
|
-
decorativePurple: "#9A3BBC",
|
|
122
|
-
decorativeBrown: "#996C49",
|
|
123
|
-
decorativeCopper: "#8A6470",
|
|
124
|
-
decorativeGold: "#876E3F",
|
|
125
|
-
decorativeSilver: "#6A7781",
|
|
126
|
-
decorativeGray: "#747474",
|
|
127
|
-
decorativeBlack: "#474658",
|
|
128
114
|
},
|
|
129
115
|
blanket: {
|
|
130
116
|
neutral: COLOR.alpha030,
|
|
@@ -242,20 +228,6 @@ export const dark = {
|
|
|
242
228
|
ebookAlt: "#475966",
|
|
243
229
|
makecode: "#AA278F",
|
|
244
230
|
makecodeAlt: "#664760",
|
|
245
|
-
decorativeRed: "#D73152",
|
|
246
|
-
decorativePink: "#D13D78",
|
|
247
|
-
decorativeAmber: "#CC4827",
|
|
248
|
-
decorativeGrass: "#6E7B3F",
|
|
249
|
-
decorativeGreen: "#26864B",
|
|
250
|
-
decorativeBlue: "#0076D0",
|
|
251
|
-
decorativeIndigo: "#5863FF",
|
|
252
|
-
decorativePurple: "#9A3BBC",
|
|
253
|
-
decorativeBrown: "#996C49",
|
|
254
|
-
decorativeCopper: "#8A6470",
|
|
255
|
-
decorativeGold: "#876E3F",
|
|
256
|
-
decorativeSilver: "#6A7781",
|
|
257
|
-
decorativeGray: "#747474",
|
|
258
|
-
decorativeBlack: "#474658",
|
|
259
231
|
},
|
|
260
232
|
blanket: {
|
|
261
233
|
neutral: COLOR.alphaf20,
|
package/dist/icons/Custom.d.ts
CHANGED
|
@@ -316,15 +316,3 @@ export declare const customMakecodeColorSvg: string;
|
|
|
316
316
|
export declare const CustomMakecodeColorIcon: React.ForwardRefExoticComponent<{
|
|
317
317
|
className?: string | undefined;
|
|
318
318
|
} & React.RefAttributes<any>>;
|
|
319
|
-
export declare const customBadgeGreenSvg: string;
|
|
320
|
-
export declare const CustomBadgeGreenIcon: React.ForwardRefExoticComponent<{
|
|
321
|
-
className?: string | undefined;
|
|
322
|
-
} & React.RefAttributes<any>>;
|
|
323
|
-
export declare const customBadgeSilverSvg: string;
|
|
324
|
-
export declare const CustomBadgeSilverIcon: React.ForwardRefExoticComponent<{
|
|
325
|
-
className?: string | undefined;
|
|
326
|
-
} & React.RefAttributes<any>>;
|
|
327
|
-
export declare const customBadgeGoldSvg: string;
|
|
328
|
-
export declare const CustomBadgeGoldIcon: React.ForwardRefExoticComponent<{
|
|
329
|
-
className?: string | undefined;
|
|
330
|
-
} & React.RefAttributes<any>>;
|
package/dist/icons/Custom.js
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
3
|
-
/* eslint-disable react/display-name */
|
|
4
2
|
import { uid } from "uid";
|
|
5
3
|
import { useMemo, forwardRef } from "react";
|
|
6
4
|
import customClassSvgImport from "./custom/class.svg";
|
|
@@ -358,57 +356,3 @@ export const customMakecodeColorSvg = customMakecodeColorSvgImport;
|
|
|
358
356
|
export const CustomMakecodeColorIcon = forwardRef((props, ref) => {
|
|
359
357
|
return (_jsxs("svg", Object.assign({}, props, { ref: ref, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M2.5 18V14.3C2.5 13.4716 1.82843 12.8 1 12.8H0.5V11.2H1C1.82843 11.2 2.5 10.5284 2.5 9.7V6C2.5 4.34315 3.84315 3 5.5 3H6.5V5H5.5C4.94772 5 4.5 5.44772 4.5 6V10.1C4.5 10.9858 3.92408 11.7372 3.12623 12C3.92408 12.2628 4.5 13.0142 4.5 13.9V18C4.5 18.5523 4.94772 19 5.5 19H6.5V21H5.5C3.84315 21 2.5 19.6569 2.5 18ZM21.5 14.3V18C21.5 19.6569 20.1569 21 18.5 21H17.5V19H18.5C19.0523 19 19.5 18.5523 19.5 18V13.9C19.5 13.0142 20.0759 12.2628 20.8738 12C20.0759 11.7372 19.5 10.9858 19.5 10.1V6C19.5 5.44772 19.0523 5 18.5 5H17.5V3H18.5C20.1569 3 21.5 4.34315 21.5 6V9.7C21.5 10.5284 22.1716 11.2 23 11.2H23.5V12.8H23C22.1716 12.8 21.5 13.4716 21.5 14.3Z", fill: "#FFE0F9" }), _jsx("path", { d: "M14.599 6.46154C14.368 6.46154 14.2188 6.21672 14.2885 6.00491C14.3609 5.78494 14.4 5.5507 14.4 5.30769C14.4 4.03319 13.3255 3 12 3C10.6745 3 9.6 4.03319 9.6 5.30769C9.6 5.5507 9.63906 5.78494 9.71148 6.00491C9.78121 6.21672 9.63201 6.46154 9.40096 6.46154H7.2C6.53726 6.46154 6 6.97813 6 7.61538V16.8462C6 17.4834 6.53726 18 7.2 18H16.8C17.4627 18 18 17.4834 18 16.8462V14.7298C18 14.5077 17.7454 14.3642 17.5251 14.4313C17.2963 14.5009 17.0527 14.5385 16.8 14.5385C15.4745 14.5385 14.4 13.5053 14.4 12.2308C14.4 10.9563 15.4745 9.92308 16.8 9.92308C17.0527 9.92308 17.2963 9.96064 17.5251 10.0303C17.7454 10.0973 18 9.95386 18 9.73169V7.61539C18 6.97813 17.4627 6.46154 16.8 6.46154H14.599Z", fill: "#AA278F" })] })));
|
|
360
358
|
});
|
|
361
|
-
import customBadgeGreenSvgImport from "./custom/badge-green.svg";
|
|
362
|
-
export const customBadgeGreenSvg = customBadgeGreenSvgImport;
|
|
363
|
-
export const CustomBadgeGreenIcon = forwardRef((props, ref) => {
|
|
364
|
-
const uniqueId = useMemo(uid, []);
|
|
365
|
-
return (_jsxs("svg", Object.assign({}, props, { ref: ref, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12Z", fill: `url(#paint0_linear_${uniqueId})` }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 21C16.9706 21 2 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23Z", fill: "#363636", style: {
|
|
366
|
-
fill: "color(display-p3 0.2118 0.2118 0.2118)",
|
|
367
|
-
fillOpacity: 1,
|
|
368
|
-
} }), _jsx("path", { d: "M10.5 14.1177L17 8L18 8.94118L10.5 16L6 11.7647L7 10.8236L10.5 14.1177Z", fill: "#363636", style: {
|
|
369
|
-
fill: "color(display-p3 0.2118 0.2118 0.2118)",
|
|
370
|
-
fillOpacity: 1,
|
|
371
|
-
} }), _jsx("defs", { children: _jsxs("linearGradient", Object.assign({ id: `paint0_linear_${uniqueId}`, x1: "12", y1: "1", x2: "12", y2: "23", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#EBFF54", style: {
|
|
372
|
-
stopColor: "color(display-p3 0.9217 1.0000 0.3286)",
|
|
373
|
-
stopOpacity: 1,
|
|
374
|
-
} }), _jsx("stop", { offset: "1", stopColor: "#BFFF00", style: {
|
|
375
|
-
stopColor: "color(display-p3 0.7500 1.0000 0.0000)",
|
|
376
|
-
stopOpacity: 1,
|
|
377
|
-
} })] })) })] })));
|
|
378
|
-
});
|
|
379
|
-
import customBadgeSilverSvgImport from "./custom/badge-silver.svg";
|
|
380
|
-
export const customBadgeSilverSvg = customBadgeSilverSvgImport;
|
|
381
|
-
export const CustomBadgeSilverIcon = forwardRef((props, ref) => {
|
|
382
|
-
const uniqueId = useMemo(uid, []);
|
|
383
|
-
return (_jsxs("svg", Object.assign({}, props, { ref: ref, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M2 1V13.8215C2 18.8902 6.47651 23 12 23C17.5235 23 22 18.8912 22 13.8215V1H2Z", fill: `url(#paint0_linear_${uniqueId})` }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4 3V13.8215C4 17.6278 7.41639 21 12 21C16.5838 21 20 17.6287 20 13.8215V3H4ZM2 13.8215C2 18.8902 6.47651 23 12 23C17.5235 23 22 18.8912 22 13.8215V1H2V13.8215Z", fill: "#363636", style: {
|
|
384
|
-
fill: "color(display-p3 0.2118 0.2118 0.2118)",
|
|
385
|
-
fillOpacity: 1,
|
|
386
|
-
} }), _jsx("path", { d: "M10.5 14.1178L17 8.00009L18 8.94127L10.5 16.0001L6 11.7648L7 10.8237L10.5 14.1178Z", fill: "#363636", style: {
|
|
387
|
-
fill: "color(display-p3 0.2118 0.2118 0.2118)",
|
|
388
|
-
fillOpacity: 1,
|
|
389
|
-
} }), _jsx("defs", { children: _jsxs("linearGradient", Object.assign({ id: `paint0_linear_${uniqueId}`, x1: "12", y1: "1", x2: "12", y2: "23", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#EFEFF8", style: {
|
|
390
|
-
stopColor: "color(display-p3 0.9362 0.9356 0.9710)",
|
|
391
|
-
stopOpacity: 1,
|
|
392
|
-
} }), _jsx("stop", { offset: "1", stopColor: "#D2EEF7", style: {
|
|
393
|
-
stopColor: "color(display-p3 0.8235 0.9333 0.9686)",
|
|
394
|
-
stopOpacity: 1,
|
|
395
|
-
} })] })) })] })));
|
|
396
|
-
});
|
|
397
|
-
import customBadgeGoldSvgImport from "./custom/badge-gold.svg";
|
|
398
|
-
export const customBadgeGoldSvg = customBadgeGoldSvgImport;
|
|
399
|
-
export const CustomBadgeGoldIcon = forwardRef((props, ref) => {
|
|
400
|
-
const uniqueId = useMemo(uid, []);
|
|
401
|
-
return (_jsxs("svg", Object.assign({}, props, { ref: ref, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M10.0723 2.06023C11.2727 1.40005 12.7273 1.40005 13.9277 2.06023L19.9277 5.36023C21.2059 6.06324 22 7.40633 22 8.86509V15.1349C22 16.5937 21.2059 17.9368 19.9277 18.6398L13.9277 21.9398C12.7273 22.6 11.2727 22.6 10.0723 21.9398L4.07232 18.6398C2.79413 17.9368 2 16.5937 2 15.1349V8.86509C2 7.40633 2.79413 6.06324 4.07232 5.36023L10.0723 2.06023Z", fill: `url(#paint0_linear_${uniqueId})` }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M18.9638 7.11266L12.9638 3.81266C12.3637 3.48257 11.6363 3.48257 11.0362 3.81266L5.03616 7.11266C4.39707 7.46417 4 8.13571 4 8.86509V15.1349C4 15.8643 4.39707 16.5359 5.03616 16.8874L11.0362 20.1874C11.6363 20.5174 12.3637 20.5174 12.9638 20.1874L18.9638 16.8874C19.6029 16.5359 20 15.8643 20 15.1349V8.86509C20 8.13571 19.6029 7.46417 18.9638 7.11266ZM13.9277 2.06023C12.7273 1.40005 11.2727 1.40005 10.0723 2.06023L4.07232 5.36023C2.79413 6.06324 2 7.40633 2 8.86509V15.1349C2 16.5937 2.79413 17.9368 4.07232 18.6398L10.0723 21.9398C11.2727 22.6 12.7273 22.6 13.9277 21.9398L19.9277 18.6398C21.2059 17.9368 22 16.5937 22 15.1349V8.86509C22 7.40633 21.2059 6.06324 19.9277 5.36023L13.9277 2.06023Z", fill: "#FFCC00", style: {
|
|
402
|
-
fill: "color(display-p3 1.0000 0.8000 0.0000)",
|
|
403
|
-
fillOpacity: 1,
|
|
404
|
-
} }), _jsx("path", { d: "M10.5 14.1177L17 8L18 8.94118L10.5 16L6 11.7647L7 10.8236L10.5 14.1177Z", fill: "#FFCC00", style: {
|
|
405
|
-
fill: "color(display-p3 1.0000 0.8000 0.0000)",
|
|
406
|
-
fillOpacity: 1,
|
|
407
|
-
} }), _jsx("defs", { children: _jsxs("linearGradient", Object.assign({ id: `paint0_linear_${uniqueId}`, x1: "12", y1: "1.00001", x2: "12", y2: "23", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#29335C", style: {
|
|
408
|
-
stopColor: "color(display-p3 0.1617 0.1985 0.3626)",
|
|
409
|
-
stopOpacity: 1,
|
|
410
|
-
} }), _jsx("stop", { offset: "1", stopColor: "#2C2F37", style: {
|
|
411
|
-
stopColor: "color(display-p3 0.1725 0.1843 0.2157)",
|
|
412
|
-
stopOpacity: 1,
|
|
413
|
-
} })] })) })] })));
|
|
414
|
-
});
|
package/dist/index.d.ts
CHANGED
|
@@ -3,8 +3,6 @@ export * from "./components/AlertDialog";
|
|
|
3
3
|
export * from "./components/DecoratedNumber";
|
|
4
4
|
export { default as Banner } from "./components/Banner";
|
|
5
5
|
export * from "./components/Banner";
|
|
6
|
-
export { default as Book } from "./components/Book";
|
|
7
|
-
export * from "./components/Book";
|
|
8
6
|
export { default as Button } from "./components/Button";
|
|
9
7
|
export * from "./components/Button";
|
|
10
8
|
export { default as CheckboxInput } from "./components/CheckboxInput";
|
package/dist/index.js
CHANGED
|
@@ -3,8 +3,6 @@ export * from "./components/AlertDialog";
|
|
|
3
3
|
export * from "./components/DecoratedNumber";
|
|
4
4
|
export { default as Banner } from "./components/Banner";
|
|
5
5
|
export * from "./components/Banner";
|
|
6
|
-
export { default as Book } from "./components/Book";
|
|
7
|
-
export * from "./components/Book";
|
|
8
6
|
export { default as Button } from "./components/Button";
|
|
9
7
|
export * from "./components/Button";
|
|
10
8
|
export { default as CheckboxInput } from "./components/CheckboxInput";
|
|
@@ -1,2 +1,3 @@
|
|
|
1
1
|
import { SerializedEditorState } from "lexical";
|
|
2
|
-
|
|
2
|
+
import { Transformer } from "@lexical/markdown";
|
|
3
|
+
export declare function convertToMarkdown(serializedLexical: SerializedEditorState, transformers?: Transformer[]): string;
|
|
@@ -2,7 +2,7 @@ import { createEditor } from "lexical";
|
|
|
2
2
|
import { $convertToMarkdownString } from "@lexical/markdown";
|
|
3
3
|
import { CODLE_TRANSFORMERS } from "./plugins/MarkdownTransformers";
|
|
4
4
|
import { nodes } from "./nodes";
|
|
5
|
-
export function convertToMarkdown(serializedLexical) {
|
|
5
|
+
export function convertToMarkdown(serializedLexical, transformers) {
|
|
6
6
|
// Create a Lexical editor instance
|
|
7
7
|
const editor = createEditor({
|
|
8
8
|
nodes,
|
|
@@ -15,7 +15,7 @@ export function convertToMarkdown(serializedLexical) {
|
|
|
15
15
|
// Convert the Lexical editor state to Markdown string
|
|
16
16
|
let markdown = "";
|
|
17
17
|
editor.update(() => {
|
|
18
|
-
markdown = $convertToMarkdownString(CODLE_TRANSFORMERS);
|
|
18
|
+
markdown = $convertToMarkdownString(transformers !== null && transformers !== void 0 ? transformers : CODLE_TRANSFORMERS);
|
|
19
19
|
});
|
|
20
20
|
return markdown;
|
|
21
21
|
}
|
|
@@ -9,4 +9,6 @@ import { ElementTransformer, TextMatchTransformer, Transformer } from "@lexical/
|
|
|
9
9
|
export declare const HR: ElementTransformer;
|
|
10
10
|
export declare const IMAGE: TextMatchTransformer;
|
|
11
11
|
export declare const TABLE: ElementTransformer;
|
|
12
|
+
export declare const IMAGE_LLM: TextMatchTransformer;
|
|
12
13
|
export declare const CODLE_TRANSFORMERS: Array<Transformer>;
|
|
14
|
+
export declare const LLM_TRANSFORMERS: Array<Transformer>;
|
|
@@ -188,6 +188,29 @@ const SHEET_INPUT = {
|
|
|
188
188
|
regExp: /a^/,
|
|
189
189
|
replace: () => { },
|
|
190
190
|
};
|
|
191
|
+
// LLM에게 의미없는 이미지 URL을 제공하지 않습니다.
|
|
192
|
+
export const IMAGE_LLM = {
|
|
193
|
+
dependencies: [ImageNode],
|
|
194
|
+
export: (node) => {
|
|
195
|
+
if (!$isImageNode(node)) {
|
|
196
|
+
return null;
|
|
197
|
+
}
|
|
198
|
+
return `![${node.getAltText()}]()`;
|
|
199
|
+
},
|
|
200
|
+
importRegExp: /!(?:\[([^[]*)\])(?:\(([^(]+)\))/,
|
|
201
|
+
regExp: /!(?:\[([^[]*)\])(?:\(([^(]+)\))$/,
|
|
202
|
+
replace: (textNode, match) => {
|
|
203
|
+
const [, altText, src] = match;
|
|
204
|
+
const imageNode = $createImageNode({
|
|
205
|
+
altText,
|
|
206
|
+
maxWidth: 800,
|
|
207
|
+
src,
|
|
208
|
+
});
|
|
209
|
+
textNode.replace(imageNode);
|
|
210
|
+
},
|
|
211
|
+
trigger: ")",
|
|
212
|
+
type: "text-match",
|
|
213
|
+
};
|
|
191
214
|
export const CODLE_TRANSFORMERS = [
|
|
192
215
|
TABLE,
|
|
193
216
|
HR,
|
|
@@ -196,5 +219,16 @@ export const CODLE_TRANSFORMERS = [
|
|
|
196
219
|
...ELEMENT_TRANSFORMERS,
|
|
197
220
|
...TEXT_FORMAT_TRANSFORMERS,
|
|
198
221
|
...TEXT_MATCH_TRANSFORMERS,
|
|
222
|
+
];
|
|
223
|
+
// LLM에 전달하기 위한 용도로 사용되는 Transformer들의 모음입니다.
|
|
224
|
+
// Export 만을 지원하기도 합니다.
|
|
225
|
+
export const LLM_TRANSFORMERS = [
|
|
226
|
+
TABLE,
|
|
227
|
+
HR,
|
|
228
|
+
IMAGE_LLM,
|
|
229
|
+
CHECK_LIST,
|
|
230
|
+
...ELEMENT_TRANSFORMERS,
|
|
231
|
+
...TEXT_FORMAT_TRANSFORMERS,
|
|
232
|
+
...TEXT_MATCH_TRANSFORMERS,
|
|
199
233
|
SHEET_INPUT,
|
|
200
234
|
];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@team-monolith/cds",
|
|
3
|
-
"version": "1.65.
|
|
3
|
+
"version": "1.65.2",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -13,7 +13,6 @@
|
|
|
13
13
|
"@types/node": "^16.11.26",
|
|
14
14
|
"@types/react": "^18.2.28",
|
|
15
15
|
"@types/react-dom": "^18.2.13",
|
|
16
|
-
"framer-motion": "^11.3.19",
|
|
17
16
|
"hex-to-css-filter": "^5.4.0",
|
|
18
17
|
"lexical": "^0.12.4",
|
|
19
18
|
"lodash": "^4.17.21",
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
export interface BookProps {
|
|
3
|
-
className?: string;
|
|
4
|
-
title?: string;
|
|
5
|
-
subtitle?: string;
|
|
6
|
-
subtitleBold?: string;
|
|
7
|
-
isHidden?: boolean;
|
|
8
|
-
buttons?: React.ReactNode;
|
|
9
|
-
/** 전달하면 controlled component로 애니메이션을 제어할 수 있다 */
|
|
10
|
-
open?: boolean;
|
|
11
|
-
onHoverStart?: () => void;
|
|
12
|
-
onHoverEnd?: () => void;
|
|
13
|
-
onCoverClick?: () => void;
|
|
14
|
-
icon?: React.ReactNode;
|
|
15
|
-
coverColor: string;
|
|
16
|
-
}
|
|
17
|
-
declare const _default: React.ForwardRefExoticComponent<BookProps & React.RefAttributes<HTMLDivElement>>;
|
|
18
|
-
export default _default;
|
|
@@ -1,251 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
|
|
2
|
-
/** @jsxImportSource @emotion/react */
|
|
3
|
-
import { css, useTheme } from "@emotion/react";
|
|
4
|
-
import styled from "@emotion/styled";
|
|
5
|
-
import { forwardRef, useState } from "react";
|
|
6
|
-
import shadows from "../../foundation/shadows";
|
|
7
|
-
import { EyeOffFillIcon } from "../../icons";
|
|
8
|
-
import { motion } from "framer-motion";
|
|
9
|
-
// 이 ZINDEX는 Book 컴포넌트 내의 Stacking Context 에서 활용되므로
|
|
10
|
-
// 다른 글로벌 ZINDEX와 충돌을 고려할 필요가 없습니다.
|
|
11
|
-
const ZINDEX_BUTTONS = 5;
|
|
12
|
-
const ZINDEX_HIDE = 4;
|
|
13
|
-
const ZINDEX_TEXT = 3;
|
|
14
|
-
const ZINDEX_COVER = 2;
|
|
15
|
-
const ZINDEX_ICON = 1;
|
|
16
|
-
const BOOK_HEIGHT = 235;
|
|
17
|
-
const HOVER_Y_OFFSET = 12;
|
|
18
|
-
const SHELF_HEIGHT = 16;
|
|
19
|
-
const BOOK_SHELF_GAP = 10;
|
|
20
|
-
const BUTTONS_HEIGHT = 36; // Button의 높이는 36px (small)로 가정합니다.
|
|
21
|
-
const coverMotion = {
|
|
22
|
-
closed: {
|
|
23
|
-
y: 0,
|
|
24
|
-
boxShadow: shadows.shadow04,
|
|
25
|
-
transition: { duration: 0.3 },
|
|
26
|
-
},
|
|
27
|
-
open: {
|
|
28
|
-
y: -HOVER_Y_OFFSET,
|
|
29
|
-
boxShadow: shadows.shadow16,
|
|
30
|
-
transition: { duration: 0.3 },
|
|
31
|
-
},
|
|
32
|
-
};
|
|
33
|
-
const textMotion = {
|
|
34
|
-
closed: {
|
|
35
|
-
paddingBottom: 12,
|
|
36
|
-
transition: { duration: 0.3 },
|
|
37
|
-
},
|
|
38
|
-
open: {
|
|
39
|
-
paddingBottom: 12 + BUTTONS_HEIGHT + 4,
|
|
40
|
-
transition: { duration: 0.3 },
|
|
41
|
-
},
|
|
42
|
-
};
|
|
43
|
-
const buttonsMotion = {
|
|
44
|
-
closed: {
|
|
45
|
-
opacity: 0,
|
|
46
|
-
pointerEvents: "none",
|
|
47
|
-
transition: { duration: 0.3 },
|
|
48
|
-
},
|
|
49
|
-
open: {
|
|
50
|
-
opacity: 1,
|
|
51
|
-
pointerEvents: "auto",
|
|
52
|
-
transition: { duration: 0.3 },
|
|
53
|
-
},
|
|
54
|
-
};
|
|
55
|
-
const CARD_COLOR_PALETTE = (theme) => ({
|
|
56
|
-
border: theme.color.foreground.primaryDisabled,
|
|
57
|
-
text: theme.color.foreground.neutralAlt,
|
|
58
|
-
});
|
|
59
|
-
/**
|
|
60
|
-
* Framer Motion의 whileHover를 사용하지 않고 직접 애니메이션 상태를 관리합니다.
|
|
61
|
-
* 내부적으로는 간단한 애니메이션 상태 관리가 있으며, 필요한 경우
|
|
62
|
-
* open 상태를 전달하여 외부에서 관리할 수 있습니다.
|
|
63
|
-
*
|
|
64
|
-
* 사유1)
|
|
65
|
-
* 모바일에서는 hover가 없기 때문에 whileHover를 사용할 수 없습니다.
|
|
66
|
-
* 클릭(탭)을 통해 열고 닫을 수 있어야 합니다.
|
|
67
|
-
*
|
|
68
|
-
* 사유2)
|
|
69
|
-
* 관리/배부 드랍다운 Modal이 Card 위로 그려져 hoverEnd를 유발하기 때문에
|
|
70
|
-
* 특성 상황에서는 hoverEnd가 발생했어도 Card를 열고 있어야 합니다.
|
|
71
|
-
* @param props
|
|
72
|
-
* @param ref
|
|
73
|
-
* @returns
|
|
74
|
-
*/
|
|
75
|
-
function Book(props, ref) {
|
|
76
|
-
const { className, title, subtitle, subtitleBold, coverColor, isHidden = false, buttons, open: controlledOpen, onHoverStart, onHoverEnd, onCoverClick, icon, } = props;
|
|
77
|
-
const theme = useTheme();
|
|
78
|
-
const [open, setOpen] = useState(false);
|
|
79
|
-
return (_jsxs(Container, Object.assign({ initial: "closed", animate: (controlledOpen !== undefined ? controlledOpen : open)
|
|
80
|
-
? "open"
|
|
81
|
-
: "closed", ref: ref, onHoverStart: () => {
|
|
82
|
-
setOpen(true);
|
|
83
|
-
onHoverStart === null || onHoverStart === void 0 ? void 0 : onHoverStart();
|
|
84
|
-
}, onHoverEnd: () => {
|
|
85
|
-
setOpen(false);
|
|
86
|
-
onHoverEnd === null || onHoverEnd === void 0 ? void 0 : onHoverEnd();
|
|
87
|
-
} }, { children: [_jsxs(Cover, Object.assign({ className: className, css: onCoverClick &&
|
|
88
|
-
css `
|
|
89
|
-
cursor: pointer;
|
|
90
|
-
`, backgroundColor: coverColor, variants: coverMotion, onClick: () => {
|
|
91
|
-
setOpen(!open);
|
|
92
|
-
onCoverClick === null || onCoverClick === void 0 ? void 0 : onCoverClick();
|
|
93
|
-
} }, { children: [icon && _jsx(CoverIcon, { children: icon }), isHidden && (_jsxs(_Fragment, { children: [_jsx(Hide, {}), _jsx(EyeOffFillIcon, { color: theme.color.foreground.neutralAlt, css: css `
|
|
94
|
-
position: absolute;
|
|
95
|
-
z-index: ${ZINDEX_HIDE};
|
|
96
|
-
left: 50%;
|
|
97
|
-
top: 50%;
|
|
98
|
-
transform: translate(-50%, -50%);
|
|
99
|
-
opacity: 0.8;
|
|
100
|
-
|
|
101
|
-
width: 24px;
|
|
102
|
-
height: 24px;
|
|
103
|
-
` })] })), _jsxs(CoverTexts, Object.assign({ variants: buttons ? textMotion : undefined }, { children: [_jsx(Subtitle, { children: subtitle }), _jsx(Subtitle, Object.assign({ css: css `
|
|
104
|
-
font-weight: 800;
|
|
105
|
-
` }, { children: subtitleBold })), _jsx(CoverTitle, { children: title })] })), _jsx(BookGradient, {}), _jsx(Buttons, Object.assign({ variants: buttonsMotion, onClick: (e) => {
|
|
106
|
-
// Button 클릭 시에도 CoverClick 이벤트가 발생하지 않도록 막습니다.
|
|
107
|
-
e.stopPropagation();
|
|
108
|
-
} }, { children: buttons }))] })), _jsx(Shelf, {})] })));
|
|
109
|
-
}
|
|
110
|
-
export default forwardRef(Book);
|
|
111
|
-
const Container = styled(motion.div) `
|
|
112
|
-
position: relative;
|
|
113
|
-
|
|
114
|
-
width: 200px;
|
|
115
|
-
height: ${BOOK_HEIGHT + HOVER_Y_OFFSET + SHELF_HEIGHT + BOOK_SHELF_GAP}px;
|
|
116
|
-
|
|
117
|
-
padding-top: ${HOVER_Y_OFFSET}px;
|
|
118
|
-
`;
|
|
119
|
-
const Cover = styled(motion.div)(({ backgroundColor }) => css `
|
|
120
|
-
height: ${BOOK_HEIGHT}px;
|
|
121
|
-
|
|
122
|
-
border-radius: 8px;
|
|
123
|
-
background: ${backgroundColor};
|
|
124
|
-
box-shadow: ${shadows.shadow04};
|
|
125
|
-
|
|
126
|
-
display: flex;
|
|
127
|
-
flex-direction: row;
|
|
128
|
-
gap: 12px;
|
|
129
|
-
overflow: hidden;
|
|
130
|
-
|
|
131
|
-
position: relative;
|
|
132
|
-
bottom: 0px;
|
|
133
|
-
z-index: ${ZINDEX_COVER};
|
|
134
|
-
`);
|
|
135
|
-
const CoverTexts = styled(motion.div) `
|
|
136
|
-
width: 100%;
|
|
137
|
-
height: 100%;
|
|
138
|
-
padding: 12px 12px 12px 24px;
|
|
139
|
-
|
|
140
|
-
position: absolute;
|
|
141
|
-
top: 0;
|
|
142
|
-
left: 0;
|
|
143
|
-
z-index: ${ZINDEX_TEXT};
|
|
144
|
-
|
|
145
|
-
display: flex;
|
|
146
|
-
flex-direction: column;
|
|
147
|
-
gap: 4px;
|
|
148
|
-
`;
|
|
149
|
-
const CoverTitle = styled.h1(({ theme }) => css `
|
|
150
|
-
word-wrap: break-word;
|
|
151
|
-
word-break: keep-all;
|
|
152
|
-
|
|
153
|
-
margin: auto 0 8px 0;
|
|
154
|
-
color: ${CARD_COLOR_PALETTE(theme).text};
|
|
155
|
-
|
|
156
|
-
/* Alt/Paragraph/16px-Eb */
|
|
157
|
-
font-family: ${theme.fontFamily.title};
|
|
158
|
-
font-size: 16px;
|
|
159
|
-
font-style: normal;
|
|
160
|
-
font-weight: 800;
|
|
161
|
-
line-height: 24px;
|
|
162
|
-
|
|
163
|
-
/* multiline 말줄임말 적용 css */
|
|
164
|
-
overflow: hidden;
|
|
165
|
-
text-overflow: ellipsis;
|
|
166
|
-
display: -webkit-box;
|
|
167
|
-
-webkit-line-clamp: 7;
|
|
168
|
-
-webkit-box-orient: vertical;
|
|
169
|
-
`);
|
|
170
|
-
const BookGradient = styled.div `
|
|
171
|
-
width: 200px;
|
|
172
|
-
height: ${BOOK_HEIGHT}px;
|
|
173
|
-
background: linear-gradient(
|
|
174
|
-
180deg,
|
|
175
|
-
rgba(255, 255, 255, 0) 0%,
|
|
176
|
-
rgba(0, 0, 0, 0.75) 100%
|
|
177
|
-
),
|
|
178
|
-
linear-gradient(
|
|
179
|
-
90deg,
|
|
180
|
-
#999 0%,
|
|
181
|
-
#fbfbfb 2%,
|
|
182
|
-
#fbfbfb 4%,
|
|
183
|
-
#cdcdcd 6%,
|
|
184
|
-
#fbfbfb 10%,
|
|
185
|
-
#fbfbfb 100%
|
|
186
|
-
);
|
|
187
|
-
mix-blend-mode: multiply;
|
|
188
|
-
|
|
189
|
-
position: absolute;
|
|
190
|
-
top: 0;
|
|
191
|
-
left: 0;
|
|
192
|
-
border-radius: 8px;
|
|
193
|
-
z-index: ${ZINDEX_COVER};
|
|
194
|
-
`;
|
|
195
|
-
const Buttons = styled(motion.div) `
|
|
196
|
-
display: flex;
|
|
197
|
-
gap: 8px;
|
|
198
|
-
width: 100%;
|
|
199
|
-
padding: 0 12px 0 24px;
|
|
200
|
-
|
|
201
|
-
position: absolute;
|
|
202
|
-
bottom: 12px;
|
|
203
|
-
z-index: ${ZINDEX_BUTTONS};
|
|
204
|
-
`;
|
|
205
|
-
const Shelf = styled.div(({ theme }) => css `
|
|
206
|
-
height: ${SHELF_HEIGHT}px;
|
|
207
|
-
width: calc(100% + 32px);
|
|
208
|
-
border-radius: 4px;
|
|
209
|
-
background: ${theme.color.background.neutralAltActive};
|
|
210
|
-
|
|
211
|
-
position: absolute;
|
|
212
|
-
bottom: 0px;
|
|
213
|
-
left: -16px;
|
|
214
|
-
`);
|
|
215
|
-
const Hide = styled.div(({ theme }) => css `
|
|
216
|
-
position: absolute;
|
|
217
|
-
left: 0;
|
|
218
|
-
top: 0;
|
|
219
|
-
|
|
220
|
-
width: 100%;
|
|
221
|
-
height: 100%;
|
|
222
|
-
|
|
223
|
-
background: ${theme.color.blanket.neutral};
|
|
224
|
-
border-radius: 8px;
|
|
225
|
-
|
|
226
|
-
z-index: ${ZINDEX_HIDE};
|
|
227
|
-
`);
|
|
228
|
-
const Subtitle = styled.div(({ theme }) => css `
|
|
229
|
-
color: ${CARD_COLOR_PALETTE(theme).text};
|
|
230
|
-
|
|
231
|
-
/* Default/Label/12px-Md */
|
|
232
|
-
font-family: ${theme.fontFamily.ui};
|
|
233
|
-
font-size: 12px;
|
|
234
|
-
font-style: normal;
|
|
235
|
-
font-weight: 500;
|
|
236
|
-
line-height: 16px; /* 133.333% */
|
|
237
|
-
`);
|
|
238
|
-
const CoverIcon = styled.div(({ theme }) => css `
|
|
239
|
-
position: absolute;
|
|
240
|
-
top: 50%;
|
|
241
|
-
left: 100px;
|
|
242
|
-
transform: translateY(-50%);
|
|
243
|
-
|
|
244
|
-
svg {
|
|
245
|
-
width: 120px;
|
|
246
|
-
height: 120px;
|
|
247
|
-
color: ${theme.color.blanket.neutral};
|
|
248
|
-
}
|
|
249
|
-
|
|
250
|
-
z-index: ${ZINDEX_ICON};
|
|
251
|
-
`);
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M10.0723 2.06023C11.2727 1.40005 12.7273 1.40005 13.9277 2.06023L19.9277 5.36023C21.2059 6.06324 22 7.40633 22 8.86509V15.1349C22 16.5937 21.2059 17.9368 19.9277 18.6398L13.9277 21.9398C12.7273 22.6 11.2727 22.6 10.0723 21.9398L4.07232 18.6398C2.79413 17.9368 2 16.5937 2 15.1349V8.86509C2 7.40633 2.79413 6.06324 4.07232 5.36023L10.0723 2.06023Z" fill="url(#paint0_linear_4029_17034)" style=""/>
|
|
3
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.9638 7.11266L12.9638 3.81266C12.3637 3.48257 11.6363 3.48257 11.0362 3.81266L5.03616 7.11266C4.39707 7.46417 4 8.13571 4 8.86509V15.1349C4 15.8643 4.39707 16.5359 5.03616 16.8874L11.0362 20.1874C11.6363 20.5174 12.3637 20.5174 12.9638 20.1874L18.9638 16.8874C19.6029 16.5359 20 15.8643 20 15.1349V8.86509C20 8.13571 19.6029 7.46417 18.9638 7.11266ZM13.9277 2.06023C12.7273 1.40005 11.2727 1.40005 10.0723 2.06023L4.07232 5.36023C2.79413 6.06324 2 7.40633 2 8.86509V15.1349C2 16.5937 2.79413 17.9368 4.07232 18.6398L10.0723 21.9398C11.2727 22.6 12.7273 22.6 13.9277 21.9398L19.9277 18.6398C21.2059 17.9368 22 16.5937 22 15.1349V8.86509C22 7.40633 21.2059 6.06324 19.9277 5.36023L13.9277 2.06023Z" fill="#FFCC00" style="fill:#FFCC00;fill:color(display-p3 1.0000 0.8000 0.0000);fill-opacity:1;"/>
|
|
4
|
-
<path d="M10.5 14.1177L17 8L18 8.94118L10.5 16L6 11.7647L7 10.8236L10.5 14.1177Z" fill="#FFCC00" style="fill:#FFCC00;fill:color(display-p3 1.0000 0.8000 0.0000);fill-opacity:1;"/>
|
|
5
|
-
<defs>
|
|
6
|
-
<linearGradient id="paint0_linear_4029_17034" x1="12" y1="1.00001" x2="12" y2="23" gradientUnits="userSpaceOnUse">
|
|
7
|
-
<stop stop-color="#29335C" style="stop-color:#29335C;stop-color:color(display-p3 0.1617 0.1985 0.3626);stop-opacity:1;"/>
|
|
8
|
-
<stop offset="1" stop-color="#2C2F37" style="stop-color:#2C2F37;stop-color:color(display-p3 0.1725 0.1843 0.2157);stop-opacity:1;"/>
|
|
9
|
-
</linearGradient>
|
|
10
|
-
</defs>
|
|
11
|
-
</svg>
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12Z" fill="url(#paint0_linear_4029_17032)" style=""/>
|
|
3
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23Z" fill="#363636" style="fill:#363636;fill:color(display-p3 0.2118 0.2118 0.2118);fill-opacity:1;"/>
|
|
4
|
-
<path d="M10.5 14.1177L17 8L18 8.94118L10.5 16L6 11.7647L7 10.8236L10.5 14.1177Z" fill="#363636" style="fill:#363636;fill:color(display-p3 0.2118 0.2118 0.2118);fill-opacity:1;"/>
|
|
5
|
-
<defs>
|
|
6
|
-
<linearGradient id="paint0_linear_4029_17032" x1="12" y1="1" x2="12" y2="23" gradientUnits="userSpaceOnUse">
|
|
7
|
-
<stop stop-color="#EBFF54" style="stop-color:#EBFF54;stop-color:color(display-p3 0.9217 1.0000 0.3286);stop-opacity:1;"/>
|
|
8
|
-
<stop offset="1" stop-color="#BFFF00" style="stop-color:#BFFF00;stop-color:color(display-p3 0.7500 1.0000 0.0000);stop-opacity:1;"/>
|
|
9
|
-
</linearGradient>
|
|
10
|
-
</defs>
|
|
11
|
-
</svg>
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M2 1V13.8215C2 18.8902 6.47651 23 12 23C17.5235 23 22 18.8912 22 13.8215V1H2Z" fill="url(#paint0_linear_4029_17033)" style=""/>
|
|
3
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 3V13.8215C4 17.6278 7.41639 21 12 21C16.5838 21 20 17.6287 20 13.8215V3H4ZM2 13.8215C2 18.8902 6.47651 23 12 23C17.5235 23 22 18.8912 22 13.8215V1H2V13.8215Z" fill="#363636" style="fill:#363636;fill:color(display-p3 0.2118 0.2118 0.2118);fill-opacity:1;"/>
|
|
4
|
-
<path d="M10.5 14.1178L17 8.00009L18 8.94127L10.5 16.0001L6 11.7648L7 10.8237L10.5 14.1178Z" fill="#363636" style="fill:#363636;fill:color(display-p3 0.2118 0.2118 0.2118);fill-opacity:1;"/>
|
|
5
|
-
<defs>
|
|
6
|
-
<linearGradient id="paint0_linear_4029_17033" x1="12" y1="1" x2="12" y2="23" gradientUnits="userSpaceOnUse">
|
|
7
|
-
<stop stop-color="#EFEFF8" style="stop-color:#EFEFF8;stop-color:color(display-p3 0.9362 0.9356 0.9710);stop-opacity:1;"/>
|
|
8
|
-
<stop offset="1" stop-color="#D2EEF7" style="stop-color:#D2EEF7;stop-color:color(display-p3 0.8235 0.9333 0.9686);stop-opacity:1;"/>
|
|
9
|
-
</linearGradient>
|
|
10
|
-
</defs>
|
|
11
|
-
</svg>
|