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

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,61 @@ 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;
+        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;
+    borderDash?: number[];
+    borderDashOffset?: number;
+    hoverBackgroundColor?: string;
+    hoverBorderColor?: string;
+    hoverBorderWidth?: number;
+    pointStyle?: PointStyle;
+    offset?: number;
+    spacing?: number;
+    weight?: number;
+};
+export type IChartDataLabels = {
+    display?: boolean;
+    color?: string;
+};

package/package.json

@@ -1,131 +1,131 @@
-{
-  "name": "@lotte-innovate/ui-component-test",
-  "description": "Lotte UI Library",
-  "version": "0.1.33",
-  "private": false,
-  "type": "module",
-  "files": [
-    "dist/lib",
-    "dist/tailwind.config.d.ts",
-    "dist/tailwind.config.js",
-    "dist/globals.css"
-  ],
-  "main": "dist/lib/index.js",
-  "module": "dist/lib/index.js",
-  "types": "dist/lib/index.d.ts",
-  "publishConfig": {
-    "access": "public"
-  },
-  "browser": "./browser/specific/main.js",
-  "babel": {
-    "presets": [
-      "@babel/preset-react",
-      "@babel/preset-env"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "scripts": {
-    "dev": "next dev",
-    "lint": "next lint",
-    "prepare": "next build",
-    "start": "next start",
-    "storybook": "cross-env NODE_OPTIONS='--max-old-space-size=8192' storybook dev -p 6006",
-    "chromatic": "cross-env npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN",
-    "compile": "tsc --jsx react-jsx",
-    "build": "next build && npm run compile",
-    "build:css": "npx tailwindcss -i src/app/globals.css -o dist/globals.css --minify",
-    "build-storybook": "storybook build",
-    "clean": "rimraf dist && mkdir dist",
-    "update-tailwind": "node update-tailwind-import.js",
-    "build:all": "npm run clean && npm run compile && node src/utils/move.js && npm run build:css && tsc-alias && npm run update-tailwind",
-    "publish:npm": "npm run build:all && npm publish && node src/utils/post-publish.js"
-  },
-  "dependencies": {
-    "@babel/runtime": "^7.24.7",
-    "@babel/runtime-corejs3": "^7.24.7",
-    "@radix-ui/colors": "^3.0.0",
-    "@radix-ui/react-accordion": "^1.2.0",
-    "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-dialog": "^1.1.1",
-    "@radix-ui/react-dropdown-menu": "^2.1.1",
-    "@radix-ui/react-hover-card": "^1.1.1",
-    "@radix-ui/react-icons": "^1.3.0",
-    "@radix-ui/react-label": "^2.1.0",
-    "@radix-ui/react-menubar": "^1.1.1",
-    "@radix-ui/react-navigation-menu": "^1.2.0",
-    "@radix-ui/react-popover": "1.0.7",
-    "@radix-ui/react-radio-group": "^1.1.3",
-    "@radix-ui/react-select": "^2.1.1",
-    "@radix-ui/react-separator": "^1.1.0",
-    "@radix-ui/react-slider": "^1.2.0",
-    "@radix-ui/react-switch": "^1.1.0",
-    "@radix-ui/react-tabs": "^1.1.0",
-    "@radix-ui/react-toast": "^1.2.1",
-    "@radix-ui/react-tooltip": "^1.1.1",
-    "@radix-ui/themes": "^3.1.1",
-    "@stitches/core": "^1.2.8",
-    "@stitches/react": "^1.2.8",
-    "@storybook/addon-a11y": "^8.0.10",
-    "@storybook/addons": "^7.6.17",
-    "chart.js": "^4.4.4",
-    "chartjs-plugin-datalabels": "^2.2.0",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.0",
-    "cross-env": "^7.0.3",
-    "dotenv": "^16.4.5",
-    "lucide-react": "^0.364.0",
-    "next": "14.1.4",
-    "react": "^18",
-    "react-chartjs-2": "^5.2.0",
-    "react-dom": "^18",
-    "react-tabs": "^6.0.2",
-    "storybook-addon-deep-controls": "^0.7.1",
-    "storybook-dark-mode": "^4.0.2",
-    "tailwind-merge": "^2.2.2"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.24.7",
-    "@babel/core": "^7.24.7",
-    "@babel/plugin-transform-runtime": "^7.24.7",
-    "@babel/preset-env": "^7.25.4",
-    "@babel/preset-react": "^7.24.7",
-    "@babel/preset-typescript": "^7.24.7",
-    "@chromatic-com/storybook": "^1.2.25",
-    "@storybook/addon-essentials": "^8.0.4",
-    "@storybook/addon-interactions": "^8.0.4",
-    "@storybook/addon-links": "^8.0.4",
-    "@storybook/addon-styling-webpack": "^1.0.0",
-    "@storybook/blocks": "^8.0.4",
-    "@storybook/nextjs": "^8.0.4",
-    "@storybook/react": "^8.0.4",
-    "@storybook/test": "^8.0.4",
-    "@storybook/theming": "^8.2.4",
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "autoprefixer": "^10.0.1",
-    "chromatic": "^11.5.4",
-    "eslint": "^8",
-    "eslint-config-next": "14.1.4",
-    "eslint-plugin-storybook": "^0.8.0",
-    "postcss": "^8",
-    "prettier": "^3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.6",
-    "rimraf": "^6.0.1",
-    "storybook": "^8.2.6",
-    "tailwindcss": "^3.3.0",
-    "tsc-alias": "^1.8.10",
-    "typescript": "^5"
-  }
-}
+{
+  "name": "@lotte-innovate/ui-component-test",
+  "description": "Lotte UI Library",
+  "version": "0.1.34",
+  "private": false,
+  "type": "module",
+  "files": [
+    "dist/lib",
+    "dist/tailwind.config.d.ts",
+    "dist/tailwind.config.js",
+    "dist/globals.css"
+  ],
+  "main": "dist/lib/index.js",
+  "module": "dist/lib/index.js",
+  "types": "dist/lib/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "browser": "./browser/specific/main.js",
+  "babel": {
+    "presets": [
+      "@babel/preset-react",
+      "@babel/preset-env"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "scripts": {
+    "dev": "next dev",
+    "lint": "next lint",
+    "prepare": "next build",
+    "start": "next start",
+    "storybook": "cross-env NODE_OPTIONS='--max-old-space-size=8192' storybook dev -p 6006",
+    "chromatic": "cross-env npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN",
+    "compile": "tsc --jsx react-jsx",
+    "build": "next build && npm run compile",
+    "build:css": "npx tailwindcss -i src/app/globals.css -o dist/globals.css --minify",
+    "build-storybook": "storybook build",
+    "clean": "rimraf dist && mkdir dist",
+    "update-tailwind": "node update-tailwind-import.js",
+    "build:all": "npm run clean && npm run compile && node src/utils/move.js && npm run build:css && tsc-alias && npm run update-tailwind",
+    "publish:npm": "npm run build:all && npm publish && node src/utils/post-publish.js"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.24.7",
+    "@babel/runtime-corejs3": "^7.24.7",
+    "@radix-ui/colors": "^3.0.0",
+    "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-hover-card": "^1.1.1",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-menubar": "^1.1.1",
+    "@radix-ui/react-navigation-menu": "^1.2.0",
+    "@radix-ui/react-popover": "1.0.7",
+    "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slider": "^1.2.0",
+    "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-toast": "^1.2.1",
+    "@radix-ui/react-tooltip": "^1.1.1",
+    "@radix-ui/themes": "^3.1.1",
+    "@stitches/core": "^1.2.8",
+    "@stitches/react": "^1.2.8",
+    "@storybook/addon-a11y": "^8.0.10",
+    "@storybook/addons": "^7.6.17",
+    "chart.js": "^4.4.4",
+    "chartjs-plugin-datalabels": "^2.2.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "cross-env": "^7.0.3",
+    "dotenv": "^16.4.5",
+    "lucide-react": "^0.364.0",
+    "next": "14.1.4",
+    "react": "^18",
+    "react-chartjs-2": "^5.2.0",
+    "react-dom": "^18",
+    "react-tabs": "^6.0.2",
+    "storybook-addon-deep-controls": "^0.7.1",
+    "storybook-dark-mode": "^4.0.2",
+    "tailwind-merge": "^2.2.2"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.24.7",
+    "@babel/core": "^7.24.7",
+    "@babel/plugin-transform-runtime": "^7.24.7",
+    "@babel/preset-env": "^7.25.4",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
+    "@chromatic-com/storybook": "^1.2.25",
+    "@storybook/addon-essentials": "^8.0.4",
+    "@storybook/addon-interactions": "^8.0.4",
+    "@storybook/addon-links": "^8.0.4",
+    "@storybook/addon-styling-webpack": "^1.0.0",
+    "@storybook/blocks": "^8.0.4",
+    "@storybook/nextjs": "^8.0.4",
+    "@storybook/react": "^8.0.4",
+    "@storybook/test": "^8.0.4",
+    "@storybook/theming": "^8.2.4",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "autoprefixer": "^10.0.1",
+    "chromatic": "^11.5.4",
+    "eslint": "^8",
+    "eslint-config-next": "14.1.4",
+    "eslint-plugin-storybook": "^0.8.0",
+    "postcss": "^8",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.6",
+    "rimraf": "^6.0.1",
+    "storybook": "^8.2.6",
+    "tailwindcss": "^3.3.0",
+    "tsc-alias": "^1.8.10",
+    "typescript": "^5"
+  }
+}