@lotte-innovate/ui-component-test 0.1.33 → 0.1.35

package/dist/lib/constants.d.ts

@@ -173,6 +173,52 @@ export declare const commonArgTypes: {
             summary: string;
         };
     };
+    isColorMixed: {
+        table: {
+            category: string;
+            type: {
+                summary: string;
+            };
+        };
+        description: string;
+        control: string;
+        defaultValue: {
+            summary: string;
+        };
+    };
+    chartAppearance: {
+        table: {
+            category: string;
+            type: {
+                summary: string;
+            };
+        };
+        options: string[];
+        control: string;
+        defaultValue: {
+            summary: string;
+        };
+        description: string;
+    };
+    datasets: {
+        name: string;
+        description: string;
+        table: {
+            category: string;
+            type: {
+                summary: string;
+            };
+        };
+    };
+    labels: {
+        description: string;
+        table: {
+            category: string;
+            type: {
+                summary: string;
+            };
+        };
+    };
 };
 export declare const chartColorStyle: () => Record<string, string>;
 export declare const chartTitleArgTypes: {
@@ -381,6 +427,37 @@ export declare const chartLegendArgTypes: {
             summary: string;
         };
     };
+    'legend.labels.usePointStyle': {
+        description: string;
+        table: {
+            category: string;
+            type: {
+                summary: string;
+            };
+        };
+        control: {
+            type: string;
+        };
+        defaultValue: {
+            summary: string;
+        };
+    };
+    'legend.labels.pointStyle': {
+        description: string;
+        table: {
+            category: string;
+            type: {
+                summary: string;
+            };
+        };
+        control: {
+            type: string;
+        };
+        options: (string | boolean)[];
+        defaultValue: {
+            summary: string;
+        };
+    };
 };
 export declare const chartDatasetsArgsTypes: {
     'datasets[n].data': {
@@ -491,6 +568,80 @@ export declare const chartDatasetsArgsTypes: {
             };
         };
     };
+    'datasets[n].borderDash': {
+        description: string;
+        table: {
+            category: string;
+            type: {
+                summary: string;
+            };
+        };
+    };
+    'datasets[n].borderDashOffset': {
+        description: string;
+        table: {
+            category: string;
+            type: {
+                summary: string;
+            };
+        };
+    };
+    'datasets[n].offset': {
+        description: string;
+        table: {
+            category: string;
+            type: {
+                summary: string;
+            };
+        };
+    };
+    'datasets[n].weight': {
+        description: string;
+        table: {
+            category: string;
+            type: {
+                summary: string;
+            };
+        };
+    };
+};
+export declare const chartDatalabelsArgsTypes: {
+    datalabels: {
+        table: {
+            disable: boolean;
+        };
+    };
+    'datalabels.display': {
+        description: string;
+        table: {
+            category: string;
+            type: {
+                summary: string;
+            };
+        };
+        control: {
+            type: string;
+        };
+        defaultValue: {
+            summary: boolean;
+        };
+    };
+    'datalabels.color': {
+        description: string;
+        table: {
+            category: string;
+            type: {
+                summary: string;
+            };
+        };
+        control: {
+            type: string;
+        };
+        options: string[];
+        defaultValue: {
+            summary: string;
+        };
+    };
 };
 export declare const blackText: string[];
 export declare const primaryColorStyle: () => Record<string, string>;

package/dist/lib/constants.js

@@ -156,6 +156,40 @@ export var commonArgTypes = {
         options: sizeOptions,
         defaultValue: { summary: 'medium' },
     },
+    isColorMixed: {
+        table: {
+            category: 'Props',
+            type: { summary: 'boolean' },
+        },
+        description: "- \uCC28\uD2B8 \uAE30\uBCF8 \uC0C9\uC0C1 \uC2A4\uD0C0\uC77C \n        - true\uC778 \uACBD\uC6B0 \uC0C9\uC0C1\uC774 \uAD50\uCC28\uB428, false\uC778 \uACBD\uC6B0 \uC0C9\uC0C1 \uC21C\uCC28\uC801\uC73C\uB85C \uC0AC\uC6A9",
+        control: 'readonly',
+        defaultValue: { summary: 'true' },
+    },
+    chartAppearance: {
+        table: {
+            category: 'Props',
+            type: { summary: 'solid | soft' },
+        },
+        options: ['solid', 'soft'],
+        control: 'readonly',
+        defaultValue: { summary: 'solid' },
+        description: "- \uCC28\uD2B8 \uAE30\uBCF8 \uC0C9\uC0C1 \uC2A4\uD0C0\uC77C \n  - \uBC30\uACBD\uC0C9\uACFC \uD14C\uB450\uB9AC\uC0C9 \uAE30\uBCF8 \uC2A4\uD0C0\uC77C\uC744 \uC9C0\uC815\uD574\uC900\uB2E4",
+    },
+    datasets: {
+        name: 'datasets',
+        description: '차트에 사용할 데이터셋',
+        table: {
+            category: 'Props',
+            type: { summary: 'object' },
+        },
+    },
+    labels: {
+        description: '차트 위에 표시될 라벨들',
+        table: {
+            category: 'Props',
+            type: { summary: 'object' },
+        },
+    },
 };
 export var chartColorStyle = function () {
     var colorValues = lightColors;
@@ -167,7 +201,7 @@ export var chartColorStyle = function () {
 };
 export var chartTitleArgTypes = {
     title: {
-        description: '바 차트 타이틀',
+        description: '차트 타이틀',
         table: {
             category: 'Props',
             type: { summary: 'object' },
@@ -223,7 +257,7 @@ export var chartTitleArgTypes = {
 };
 export var chartLegendArgTypes = {
     legend: {
-        description: '차트 타이틀',
+        description: '차트 범례',
         table: {
             category: 'Props',
             type: { summary: 'object' },
@@ -246,7 +280,7 @@ export var chartLegendArgTypes = {
         },
         control: { type: 'select' },
         options: ['start', 'center', 'end'],
-        defaultValue: { summary: 'top' },
+        defaultValue: { summary: 'center' },
     },
     'legend.position': {
         description: '범례 위치',
@@ -283,7 +317,7 @@ export var chartLegendArgTypes = {
             type: { summary: 'boolean' },
         },
         control: { type: 'boolean' },
-        defaultValue: { summary: true },
+        defaultValue: { summary: false },
     },
     'legend.title.text': {
         description: '범례 타이틀 문구',
@@ -294,6 +328,25 @@ export var chartLegendArgTypes = {
         control: { type: 'text' },
         defaultValue: { summary: '' },
     },
+    'legend.labels.usePointStyle': {
+        description: '범례 스타일 사용여부',
+        table: {
+            category: 'Legend Props',
+            type: { summary: 'boolean' },
+        },
+        control: { type: 'boolean' },
+        defaultValue: { summary: 'false' },
+    },
+    'legend.labels.pointStyle': {
+        description: "- \uB77C\uBCA8 \uD3EC\uC778\uD2B8 \uC2A4\uD0C0\uC77C\n      - usePointStyle\uAC00 true\uC778 \uACBD\uC6B0 \uC801\uC6A9",
+        table: {
+            category: 'Legend Props',
+            type: { summary: pointStyleList.join(' | ') },
+        },
+        control: { type: 'select' },
+        options: pointStyleList,
+        defaultValue: { summary: 'false' },
+    },
 };
 export var chartDatasetsArgsTypes = {
     'datasets[n].data': {
@@ -380,6 +433,60 @@ export var chartDatasetsArgsTypes = {
             type: { summary: 'boolean' },
         },
     },
+    'datasets[n].borderDash': {
+        description: "- \uCC28\uD2B8\uC758 \uAC01 \uC139\uC158\uC758 \uD14C\uB450\uB9AC\uB97C \uC810\uC120\uC73C\uB85C \uB9CC\uB4EC\n        - ex)[5,5]: 5\uD53D\uC140 \uAE38\uC774\uC758 \uC120\uACFC 5\uD53D\uC140 \uAE38\uC774\uC758 \uAC04\uACA9",
+        table: {
+            category: 'Dataset Props',
+            type: { summary: 'number[]' },
+        },
+    },
+    'datasets[n].borderDashOffset': {
+        description: "- \uC810\uC120\uC758 \uC2DC\uC791 \uC704\uCE58 \uC870\uC815\n      - ex) 2: \uC810\uC120\uC758 \uC2DC\uC791 \uC9C0\uC810\uC744 2\uD53D\uC140 \uC774\uB3D9",
+        table: {
+            category: 'Dataset Props',
+            type: { summary: 'number' },
+        },
+    },
+    'datasets[n].offset': {
+        description: '각 섹션 사이의 간격 조정',
+        table: {
+            category: 'Dataset Props',
+            type: { summary: 'number' },
+        },
+    },
+    'datasets[n].weight': {
+        description: '각 섹션의 상대적인 두께를 설정, 섹션이 차지하는 공간의 비율을 조정',
+        table: {
+            category: 'Dataset Props',
+            type: { summary: 'number' },
+        },
+    },
+};
+export var chartDatalabelsArgsTypes = {
+    datalabels: {
+        table: {
+            disable: true,
+        },
+    },
+    'datalabels.display': {
+        description: '차트 데이터 라벨 표시 여부',
+        table: {
+            category: 'Datalabels Props',
+            type: { summary: 'boolean' },
+        },
+        control: { type: 'boolean' },
+        defaultValue: { summary: false },
+    },
+    'datalabels.color': {
+        description: '차트 데이터 라벨 색상',
+        table: {
+            category: 'Datalabels Props',
+            type: { summary: 'string' },
+        },
+        control: { type: 'select' },
+        options: ['white', 'gray', 'black'],
+        defaultValue: { summary: 'gray' },
+    },
 };
 export var blackText = ['sky', 'mint', 'lime', 'yellow', 'amber', 'orange', 'white'];
 export var primaryColorStyle = function () {

package/dist/lib/types.d.ts

@@ -9,3 +9,73 @@ export type PointStyle = 'circle' | 'cross' | 'crossRot' | 'dash' | 'line' | 're
 export type IColor = 'slate' | 'olive' | 'sand' | 'tomato' | 'red' | 'ruby' | 'crimson' | 'pink' | 'plum' | 'purple' | 'violet' | 'iris' | 'indigo' | 'blue' | 'cyan' | 'teal' | 'jade' | 'green' | 'grass' | 'brown' | 'bronze' | 'gold' | 'sky' | 'mint' | 'lime' | 'yellow' | 'amber' | 'orange' | 'black' | 'white';
 export type IDarkColor = 'blackDark' | 'whiteDark' | 'slateDark' | 'oliveDark' | 'sandDark' | 'tomatoDark' | 'redDark' | 'rubyDark' | 'crimsonDark' | 'pinkDark' | 'plumDark' | 'purpleDark' | 'violetDark' | 'irisDark' | 'indigoDark' | 'blueDark' | 'cyanDark' | 'tealDark' | 'jadeDark' | 'greenDark' | 'grassDark' | 'brownDark' | 'bronzeDark' | 'goldDark' | 'skyDark' | 'mintDark' | 'limeDark' | 'yellowDark' | 'amberDark' | 'orangeDark' | 'slateDarkA' | 'oliveDarkA' | 'sandDarkA' | 'tomatoDarkA' | 'redDarkA' | 'rubyDarkA' | 'crimsonDarkA' | 'pinkDarkA' | 'plumDarkA' | 'purpleDarkA' | 'violetDarkA' | 'irisDarkA' | 'indigoDarkA' | 'blueDarkA' | 'cyanDarkA' | 'tealDarkA' | 'jadeDarkA' | 'greenDarkA' | 'grassDarkA' | 'brownDarkA' | 'bronzeDarkA' | 'goldDarkA' | 'skyDarkA' | 'mintDarkA' | 'limeDarkA' | 'yellowDarkA' | 'amberDarkA' | 'orangeDarkA';
 export type IAlphaColor = 'slateA' | 'oliveA' | 'sandA' | 'tomatoA' | 'redA' | 'rubyA' | 'crimsonA' | 'pinkA' | 'plumA' | 'purpleA' | 'violetA' | 'irisA' | 'indigoA' | 'blueA' | 'cyanA' | 'tealA' | 'jadeA' | 'greenA' | 'grassA' | 'brownA' | 'bronzeA' | 'goldA' | 'skyA' | 'mintA' | 'limeA' | 'yellowA' | 'amberA' | 'orangeA';
+export type IChartTitle = {
+    text?: string | string[];
+    display?: boolean;
+    position?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+    font?: {
+        size?: number;
+        weight?: 'normal' | 'bold' | 'lighter' | 'bolder' | number;
+        lineHeight?: number;
+    };
+};
+export type IChartLegend = {
+    display?: boolean;
+    align?: 'start' | 'center' | 'end';
+    position?: 'top' | 'right' | 'bottom' | 'left';
+    maxHeight?: number;
+    maxWidth?: number;
+    fullSize?: boolean;
+    reverse?: boolean;
+    labels?: {
+        boxWidth?: number;
+        boxHeight?: number;
+        padding?: number;
+        textAlign?: 'left' | 'right' | 'center';
+        color?: string;
+        usePointStyle?: boolean;
+        pointStyle?: PointStyle;
+        pointStyleWidth?: number;
+        useBorderRadius?: boolean;
+        borderRadius?: number;
+    };
+    rtl?: boolean;
+    textDirection?: 'rtl' | 'ltr';
+    title?: {
+        color?: string;
+        display?: boolean;
+        padding?: number;
+        text?: string;
+    };
+};
+export type IChartDatasets = {
+    label?: string;
+    backgroundColor?: string[] | string;
+    borderColor?: string[] | string;
+    borderWidth?: number;
+    borderRadius?: number;
+    borderDash?: number[];
+    borderDashOffset?: number;
+    hoverBackgroundColor?: string;
+    hoverBorderColor?: string;
+    hoverBorderWidth?: number;
+    pointStyle?: PointStyle;
+    offset?: number;
+    spacing?: number;
+    weight?: number;
+    order?: number;
+    hidden?: boolean;
+};
+export type IChartDataLabels = {
+    display?: boolean;
+    color?: string;
+    align?: 'start' | 'center' | 'end' | number;
+    backgroundColor?: string | ((context: any) => string);
+    borderColor?: string;
+    borderRadius?: number;
+    borderWidth?: number;
+    font?: object;
+    formatter?: (x: number) => number;
+    padding?: number;
+};

package/dist/lib/utils/useDarkMode.d.ts

@@ -0,0 +1 @@
+export declare const useDarkMode: (isRAxes?: boolean) => any[];

package/dist/lib/utils/useDarkMode.js

@@ -0,0 +1,49 @@
+import { slateA, slateDarkA } from '../../lib/color/alpha';
+import { useEffect, useState } from 'react';
+export var useDarkMode = function (isRAxes) {
+    if (isRAxes === void 0) { isRAxes = false; }
+    var lightmode = {};
+    var darkmode = {};
+    if (isRAxes === true) {
+        lightmode = {
+            r: { grid: { color: slateA[8] } },
+        };
+        darkmode = {
+            r: { grid: { color: slateDarkA[8] }, ticks: { backdropColor: 'rgba(0, 0, 0, 0)' } },
+        };
+    }
+    else {
+        lightmode = {
+            x: { grid: { color: slateA[8] } },
+            y: { grid: { color: slateA[8] } },
+        };
+        darkmode = {
+            x: { grid: { color: slateDarkA[8] } },
+            y: { grid: { color: slateDarkA[8] } },
+        };
+    }
+    var _a = useState(checkDarkMode()), isDarkMode = _a[0], setIsDarkMode = _a[1];
+    var _b = useState({
+        linescale: {},
+    }), defaultOptions = _b[0], setDefaultOptions = _b[1];
+    function checkDarkMode() {
+        return document.body.classList.contains('dark');
+    }
+    useEffect(function () {
+        setIsDarkMode(checkDarkMode());
+        setDefaultOptions({ linescale: !checkDarkMode() ? lightmode : darkmode });
+        var mutationObserver = new MutationObserver(function (mutations) {
+            mutations.forEach(function (mutation) {
+                if (mutation.attributeName === 'class') {
+                    setIsDarkMode(checkDarkMode());
+                    setDefaultOptions({ linescale: !checkDarkMode() ? lightmode : darkmode });
+                }
+            });
+        });
+        mutationObserver.observe(document.body, { attributes: true });
+        return function () {
+            mutationObserver.disconnect();
+        };
+    }, []);
+    return [isDarkMode, defaultOptions];
+};

package/dist/tailwind.config.js

@@ -27,16 +27,14 @@ var darkClasses = [];
 var colorScale = Array.from({ length: 12 }, function (_, i) { return (i + 1).toString(); });
 var allColorOptions = [colorOptions, alphaColorOptions];
 var generateClasses = function (colorList, colorScale) {
-    var classPrefixes = ['accent', 'fill', 'border', 'outline', 'bg', 'text'];
+    var classPrefixes = ['fill', 'border', 'bg', 'text'];
     return colorList.flatMap(function (color) {
         return colorScale.flatMap(function (scale) { return classPrefixes.map(function (prefix) { return "".concat(prefix, "-").concat(color, "-").concat(scale); }); });
     });
 };
 var generateDarkClasses = function (colorList, colorScale) {
     var classPrefixes = [
-        'dark:accent',
         'dark:fill',
-        'dark:outline',
         'dark:border',
         'dark:bg',
         'dark:text',
@@ -46,7 +44,6 @@ var generateDarkClasses = function (colorList, colorScale) {
         'dark:active:bg',
         'dark:active:border',
         'dark:active:text',
-        'dark:before:checked:bg',
         'dark:data-[state=on]:bg',
         'dark:data-[state=open]:bg',
         'dark:data-[state=on]:text',
@@ -69,7 +66,7 @@ var config = {
         './src/stories/**/*.{js,ts,jsx,tsx,mdx,zip}',
         './src/**/*.{js,ts,jsx,tsx,mdx,zip}',
     ],
-    safelist: __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], classes, true), classes.map(function (cls) { return "hover:".concat(cls); }), true), classes.map(function (cls) { return "active:".concat(cls); }), true), classes.map(function (cls) { return "before:".concat(cls); }), true), classes.map(function (cls) { return "data-[state=checked]:".concat(cls); }), true), classes.map(function (cls) { return "data-[state=unchecked]:".concat(cls); }), true), classes.map(function (cls) { return "data-[state=on]:".concat(cls); }), true), classes.map(function (cls) { return "data-[state=on]:hover:".concat(cls); }), true), classes.map(function (cls) { return "data-[state=open]:".concat(cls); }), true), classes.map(function (cls) { return "after:checked:".concat(cls); }), true), classes.map(function (cls) { return "before:checked:".concat(cls); }), true), darkClasses, true),
+    safelist: __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], classes, true), classes.map(function (cls) { return "hover:".concat(cls); }), true), classes.map(function (cls) { return "active:".concat(cls); }), true), classes.map(function (cls) { return "before:".concat(cls); }), true), classes.map(function (cls) { return "data-[state=checked]:".concat(cls); }), true), classes.map(function (cls) { return "data-[state=unchecked]:".concat(cls); }), true), classes.map(function (cls) { return "data-[state=on]:".concat(cls); }), true), classes.map(function (cls) { return "data-[state=open]:".concat(cls); }), true), darkClasses, true),
     theme: {
         extend: {
             fontFamily: {