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

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.
@@ -156,6 +156,40 @@ export var commonArgTypes = {
156
156
  options: sizeOptions,
157
157
  defaultValue: { summary: 'medium' },
158
158
  },
159
+ isColorMixed: {
160
+ table: {
161
+ category: 'Props',
162
+ type: { summary: 'boolean' },
163
+ },
164
+ 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",
165
+ control: 'readonly',
166
+ defaultValue: { summary: 'true' },
167
+ },
168
+ chartAppearance: {
169
+ table: {
170
+ category: 'Props',
171
+ type: { summary: 'solid | soft' },
172
+ },
173
+ options: ['solid', 'soft'],
174
+ control: 'readonly',
175
+ defaultValue: { summary: 'solid' },
176
+ 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",
177
+ },
178
+ datasets: {
179
+ name: 'datasets',
180
+ description: '차트에 사용할 데이터셋',
181
+ table: {
182
+ category: 'Props',
183
+ type: { summary: 'object' },
184
+ },
185
+ },
186
+ labels: {
187
+ description: '차트 위에 표시될 라벨들',
188
+ table: {
189
+ category: 'Props',
190
+ type: { summary: 'object' },
191
+ },
192
+ },
159
193
  };
160
194
  export var chartColorStyle = function () {
161
195
  var colorValues = lightColors;
@@ -167,7 +201,7 @@ export var chartColorStyle = function () {
167
201
  };
168
202
  export var chartTitleArgTypes = {
169
203
  title: {
170
- description: '차트 타이틀',
204
+ description: '차트 타이틀',
171
205
  table: {
172
206
  category: 'Props',
173
207
  type: { summary: 'object' },
@@ -223,7 +257,7 @@ export var chartTitleArgTypes = {
223
257
  };
224
258
  export var chartLegendArgTypes = {
225
259
  legend: {
226
- description: '차트 타이틀',
260
+ description: '차트 범례',
227
261
  table: {
228
262
  category: 'Props',
229
263
  type: { summary: 'object' },
@@ -246,7 +280,7 @@ export var chartLegendArgTypes = {
246
280
  },
247
281
  control: { type: 'select' },
248
282
  options: ['start', 'center', 'end'],
249
- defaultValue: { summary: 'top' },
283
+ defaultValue: { summary: 'center' },
250
284
  },
251
285
  'legend.position': {
252
286
  description: '범례 위치',
@@ -283,7 +317,7 @@ export var chartLegendArgTypes = {
283
317
  type: { summary: 'boolean' },
284
318
  },
285
319
  control: { type: 'boolean' },
286
- defaultValue: { summary: true },
320
+ defaultValue: { summary: false },
287
321
  },
288
322
  'legend.title.text': {
289
323
  description: '범례 타이틀 문구',
@@ -294,6 +328,25 @@ export var chartLegendArgTypes = {
294
328
  control: { type: 'text' },
295
329
  defaultValue: { summary: '' },
296
330
  },
331
+ 'legend.labels.usePointStyle': {
332
+ description: '범례 스타일 사용여부',
333
+ table: {
334
+ category: 'Legend Props',
335
+ type: { summary: 'boolean' },
336
+ },
337
+ control: { type: 'boolean' },
338
+ defaultValue: { summary: 'false' },
339
+ },
340
+ 'legend.labels.pointStyle': {
341
+ description: "- \uB77C\uBCA8 \uD3EC\uC778\uD2B8 \uC2A4\uD0C0\uC77C\n - usePointStyle\uAC00 true\uC778 \uACBD\uC6B0 \uC801\uC6A9",
342
+ table: {
343
+ category: 'Legend Props',
344
+ type: { summary: pointStyleList.join(' | ') },
345
+ },
346
+ control: { type: 'select' },
347
+ options: pointStyleList,
348
+ defaultValue: { summary: 'false' },
349
+ },
297
350
  };
298
351
  export var chartDatasetsArgsTypes = {
299
352
  'datasets[n].data': {
@@ -380,6 +433,60 @@ export var chartDatasetsArgsTypes = {
380
433
  type: { summary: 'boolean' },
381
434
  },
382
435
  },
436
+ 'datasets[n].borderDash': {
437
+ 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",
438
+ table: {
439
+ category: 'Dataset Props',
440
+ type: { summary: 'number[]' },
441
+ },
442
+ },
443
+ 'datasets[n].borderDashOffset': {
444
+ 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",
445
+ table: {
446
+ category: 'Dataset Props',
447
+ type: { summary: 'number' },
448
+ },
449
+ },
450
+ 'datasets[n].offset': {
451
+ description: '각 섹션 사이의 간격 조정',
452
+ table: {
453
+ category: 'Dataset Props',
454
+ type: { summary: 'number' },
455
+ },
456
+ },
457
+ 'datasets[n].weight': {
458
+ description: '각 섹션의 상대적인 두께를 설정, 섹션이 차지하는 공간의 비율을 조정',
459
+ table: {
460
+ category: 'Dataset Props',
461
+ type: { summary: 'number' },
462
+ },
463
+ },
464
+ };
465
+ export var chartDatalabelsArgsTypes = {
466
+ datalabels: {
467
+ table: {
468
+ disable: true,
469
+ },
470
+ },
471
+ 'datalabels.display': {
472
+ description: '차트 데이터 라벨 표시 여부',
473
+ table: {
474
+ category: 'Datalabels Props',
475
+ type: { summary: 'boolean' },
476
+ },
477
+ control: { type: 'boolean' },
478
+ defaultValue: { summary: false },
479
+ },
480
+ 'datalabels.color': {
481
+ description: '차트 데이터 라벨 색상',
482
+ table: {
483
+ category: 'Datalabels Props',
484
+ type: { summary: 'string' },
485
+ },
486
+ control: { type: 'select' },
487
+ options: ['white', 'gray', 'black'],
488
+ defaultValue: { summary: 'gray' },
489
+ },
383
490
  };
384
491
  export var blackText = ['sky', 'mint', 'lime', 'yellow', 'amber', 'orange', 'white'];
385
492
  export var primaryColorStyle = function () {
@@ -9,3 +9,61 @@ export type PointStyle = 'circle' | 'cross' | 'crossRot' | 'dash' | 'line' | 're
9
9
  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';
10
10
  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';
11
11
  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';
12
+ export type IChartTitle = {
13
+ text?: string | string[];
14
+ display?: boolean;
15
+ position?: 'top' | 'right' | 'bottom' | 'left';
16
+ align?: 'start' | 'center' | 'end';
17
+ font?: {
18
+ size?: number;
19
+ weight?: 'normal' | 'bold' | 'lighter' | 'bolder' | number;
20
+ lineHeight?: number;
21
+ };
22
+ };
23
+ export type IChartLegend = {
24
+ display?: boolean;
25
+ align?: 'start' | 'center' | 'end';
26
+ position?: 'top' | 'right' | 'bottom' | 'left';
27
+ maxHeight?: number;
28
+ maxWidth?: number;
29
+ fullSize?: boolean;
30
+ reverse?: boolean;
31
+ labels?: {
32
+ boxWidth?: number;
33
+ boxHeight?: number;
34
+ padding?: number;
35
+ textAlign?: 'left' | 'right' | 'center';
36
+ color?: string;
37
+ usePointStyle?: boolean;
38
+ pointStyleWidth?: number;
39
+ useBorderRadius?: boolean;
40
+ borderRadius?: number;
41
+ };
42
+ rtl?: boolean;
43
+ textDirection?: 'rtl' | 'ltr';
44
+ title?: {
45
+ color?: string;
46
+ display?: boolean;
47
+ padding?: number;
48
+ text?: string;
49
+ };
50
+ };
51
+ export type IChartDatasets = {
52
+ label?: string;
53
+ backgroundColor?: string[] | string;
54
+ borderColor?: string[] | string;
55
+ borderWidth?: number;
56
+ borderDash?: number[];
57
+ borderDashOffset?: number;
58
+ hoverBackgroundColor?: string;
59
+ hoverBorderColor?: string;
60
+ hoverBorderWidth?: number;
61
+ pointStyle?: PointStyle;
62
+ offset?: number;
63
+ spacing?: number;
64
+ weight?: number;
65
+ };
66
+ export type IChartDataLabels = {
67
+ display?: boolean;
68
+ color?: string;
69
+ };
package/package.json CHANGED
@@ -1,131 +1,131 @@
1
- {
2
- "name": "@lotte-innovate/ui-component-test",
3
- "description": "Lotte UI Library",
4
- "version": "0.1.33",
5
- "private": false,
6
- "type": "module",
7
- "files": [
8
- "dist/lib",
9
- "dist/tailwind.config.d.ts",
10
- "dist/tailwind.config.js",
11
- "dist/globals.css"
12
- ],
13
- "main": "dist/lib/index.js",
14
- "module": "dist/lib/index.js",
15
- "types": "dist/lib/index.d.ts",
16
- "publishConfig": {
17
- "access": "public"
18
- },
19
- "browser": "./browser/specific/main.js",
20
- "babel": {
21
- "presets": [
22
- "@babel/preset-react",
23
- "@babel/preset-env"
24
- ]
25
- },
26
- "browserslist": {
27
- "production": [
28
- ">0.2%",
29
- "not dead",
30
- "not op_mini all"
31
- ],
32
- "development": [
33
- "last 1 chrome version",
34
- "last 1 firefox version",
35
- "last 1 safari version"
36
- ]
37
- },
38
- "scripts": {
39
- "dev": "next dev",
40
- "lint": "next lint",
41
- "prepare": "next build",
42
- "start": "next start",
43
- "storybook": "cross-env NODE_OPTIONS='--max-old-space-size=8192' storybook dev -p 6006",
44
- "chromatic": "cross-env npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN",
45
- "compile": "tsc --jsx react-jsx",
46
- "build": "next build && npm run compile",
47
- "build:css": "npx tailwindcss -i src/app/globals.css -o dist/globals.css --minify",
48
- "build-storybook": "storybook build",
49
- "clean": "rimraf dist && mkdir dist",
50
- "update-tailwind": "node update-tailwind-import.js",
51
- "build:all": "npm run clean && npm run compile && node src/utils/move.js && npm run build:css && tsc-alias && npm run update-tailwind",
52
- "publish:npm": "npm run build:all && npm publish && node src/utils/post-publish.js"
53
- },
54
- "dependencies": {
55
- "@babel/runtime": "^7.24.7",
56
- "@babel/runtime-corejs3": "^7.24.7",
57
- "@radix-ui/colors": "^3.0.0",
58
- "@radix-ui/react-accordion": "^1.2.0",
59
- "@radix-ui/react-checkbox": "^1.0.4",
60
- "@radix-ui/react-dialog": "^1.1.1",
61
- "@radix-ui/react-dropdown-menu": "^2.1.1",
62
- "@radix-ui/react-hover-card": "^1.1.1",
63
- "@radix-ui/react-icons": "^1.3.0",
64
- "@radix-ui/react-label": "^2.1.0",
65
- "@radix-ui/react-menubar": "^1.1.1",
66
- "@radix-ui/react-navigation-menu": "^1.2.0",
67
- "@radix-ui/react-popover": "1.0.7",
68
- "@radix-ui/react-radio-group": "^1.1.3",
69
- "@radix-ui/react-select": "^2.1.1",
70
- "@radix-ui/react-separator": "^1.1.0",
71
- "@radix-ui/react-slider": "^1.2.0",
72
- "@radix-ui/react-switch": "^1.1.0",
73
- "@radix-ui/react-tabs": "^1.1.0",
74
- "@radix-ui/react-toast": "^1.2.1",
75
- "@radix-ui/react-tooltip": "^1.1.1",
76
- "@radix-ui/themes": "^3.1.1",
77
- "@stitches/core": "^1.2.8",
78
- "@stitches/react": "^1.2.8",
79
- "@storybook/addon-a11y": "^8.0.10",
80
- "@storybook/addons": "^7.6.17",
81
- "chart.js": "^4.4.4",
82
- "chartjs-plugin-datalabels": "^2.2.0",
83
- "class-variance-authority": "^0.7.0",
84
- "clsx": "^2.1.0",
85
- "cross-env": "^7.0.3",
86
- "dotenv": "^16.4.5",
87
- "lucide-react": "^0.364.0",
88
- "next": "14.1.4",
89
- "react": "^18",
90
- "react-chartjs-2": "^5.2.0",
91
- "react-dom": "^18",
92
- "react-tabs": "^6.0.2",
93
- "storybook-addon-deep-controls": "^0.7.1",
94
- "storybook-dark-mode": "^4.0.2",
95
- "tailwind-merge": "^2.2.2"
96
- },
97
- "devDependencies": {
98
- "@babel/cli": "^7.24.7",
99
- "@babel/core": "^7.24.7",
100
- "@babel/plugin-transform-runtime": "^7.24.7",
101
- "@babel/preset-env": "^7.25.4",
102
- "@babel/preset-react": "^7.24.7",
103
- "@babel/preset-typescript": "^7.24.7",
104
- "@chromatic-com/storybook": "^1.2.25",
105
- "@storybook/addon-essentials": "^8.0.4",
106
- "@storybook/addon-interactions": "^8.0.4",
107
- "@storybook/addon-links": "^8.0.4",
108
- "@storybook/addon-styling-webpack": "^1.0.0",
109
- "@storybook/blocks": "^8.0.4",
110
- "@storybook/nextjs": "^8.0.4",
111
- "@storybook/react": "^8.0.4",
112
- "@storybook/test": "^8.0.4",
113
- "@storybook/theming": "^8.2.4",
114
- "@types/node": "^20",
115
- "@types/react": "^18",
116
- "@types/react-dom": "^18",
117
- "autoprefixer": "^10.0.1",
118
- "chromatic": "^11.5.4",
119
- "eslint": "^8",
120
- "eslint-config-next": "14.1.4",
121
- "eslint-plugin-storybook": "^0.8.0",
122
- "postcss": "^8",
123
- "prettier": "^3.3.3",
124
- "prettier-plugin-tailwindcss": "^0.6.6",
125
- "rimraf": "^6.0.1",
126
- "storybook": "^8.2.6",
127
- "tailwindcss": "^3.3.0",
128
- "tsc-alias": "^1.8.10",
129
- "typescript": "^5"
130
- }
131
- }
1
+ {
2
+ "name": "@lotte-innovate/ui-component-test",
3
+ "description": "Lotte UI Library",
4
+ "version": "0.1.34",
5
+ "private": false,
6
+ "type": "module",
7
+ "files": [
8
+ "dist/lib",
9
+ "dist/tailwind.config.d.ts",
10
+ "dist/tailwind.config.js",
11
+ "dist/globals.css"
12
+ ],
13
+ "main": "dist/lib/index.js",
14
+ "module": "dist/lib/index.js",
15
+ "types": "dist/lib/index.d.ts",
16
+ "publishConfig": {
17
+ "access": "public"
18
+ },
19
+ "browser": "./browser/specific/main.js",
20
+ "babel": {
21
+ "presets": [
22
+ "@babel/preset-react",
23
+ "@babel/preset-env"
24
+ ]
25
+ },
26
+ "browserslist": {
27
+ "production": [
28
+ ">0.2%",
29
+ "not dead",
30
+ "not op_mini all"
31
+ ],
32
+ "development": [
33
+ "last 1 chrome version",
34
+ "last 1 firefox version",
35
+ "last 1 safari version"
36
+ ]
37
+ },
38
+ "scripts": {
39
+ "dev": "next dev",
40
+ "lint": "next lint",
41
+ "prepare": "next build",
42
+ "start": "next start",
43
+ "storybook": "cross-env NODE_OPTIONS='--max-old-space-size=8192' storybook dev -p 6006",
44
+ "chromatic": "cross-env npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN",
45
+ "compile": "tsc --jsx react-jsx",
46
+ "build": "next build && npm run compile",
47
+ "build:css": "npx tailwindcss -i src/app/globals.css -o dist/globals.css --minify",
48
+ "build-storybook": "storybook build",
49
+ "clean": "rimraf dist && mkdir dist",
50
+ "update-tailwind": "node update-tailwind-import.js",
51
+ "build:all": "npm run clean && npm run compile && node src/utils/move.js && npm run build:css && tsc-alias && npm run update-tailwind",
52
+ "publish:npm": "npm run build:all && npm publish && node src/utils/post-publish.js"
53
+ },
54
+ "dependencies": {
55
+ "@babel/runtime": "^7.24.7",
56
+ "@babel/runtime-corejs3": "^7.24.7",
57
+ "@radix-ui/colors": "^3.0.0",
58
+ "@radix-ui/react-accordion": "^1.2.0",
59
+ "@radix-ui/react-checkbox": "^1.0.4",
60
+ "@radix-ui/react-dialog": "^1.1.1",
61
+ "@radix-ui/react-dropdown-menu": "^2.1.1",
62
+ "@radix-ui/react-hover-card": "^1.1.1",
63
+ "@radix-ui/react-icons": "^1.3.0",
64
+ "@radix-ui/react-label": "^2.1.0",
65
+ "@radix-ui/react-menubar": "^1.1.1",
66
+ "@radix-ui/react-navigation-menu": "^1.2.0",
67
+ "@radix-ui/react-popover": "1.0.7",
68
+ "@radix-ui/react-radio-group": "^1.1.3",
69
+ "@radix-ui/react-select": "^2.1.1",
70
+ "@radix-ui/react-separator": "^1.1.0",
71
+ "@radix-ui/react-slider": "^1.2.0",
72
+ "@radix-ui/react-switch": "^1.1.0",
73
+ "@radix-ui/react-tabs": "^1.1.0",
74
+ "@radix-ui/react-toast": "^1.2.1",
75
+ "@radix-ui/react-tooltip": "^1.1.1",
76
+ "@radix-ui/themes": "^3.1.1",
77
+ "@stitches/core": "^1.2.8",
78
+ "@stitches/react": "^1.2.8",
79
+ "@storybook/addon-a11y": "^8.0.10",
80
+ "@storybook/addons": "^7.6.17",
81
+ "chart.js": "^4.4.4",
82
+ "chartjs-plugin-datalabels": "^2.2.0",
83
+ "class-variance-authority": "^0.7.0",
84
+ "clsx": "^2.1.0",
85
+ "cross-env": "^7.0.3",
86
+ "dotenv": "^16.4.5",
87
+ "lucide-react": "^0.364.0",
88
+ "next": "14.1.4",
89
+ "react": "^18",
90
+ "react-chartjs-2": "^5.2.0",
91
+ "react-dom": "^18",
92
+ "react-tabs": "^6.0.2",
93
+ "storybook-addon-deep-controls": "^0.7.1",
94
+ "storybook-dark-mode": "^4.0.2",
95
+ "tailwind-merge": "^2.2.2"
96
+ },
97
+ "devDependencies": {
98
+ "@babel/cli": "^7.24.7",
99
+ "@babel/core": "^7.24.7",
100
+ "@babel/plugin-transform-runtime": "^7.24.7",
101
+ "@babel/preset-env": "^7.25.4",
102
+ "@babel/preset-react": "^7.24.7",
103
+ "@babel/preset-typescript": "^7.24.7",
104
+ "@chromatic-com/storybook": "^1.2.25",
105
+ "@storybook/addon-essentials": "^8.0.4",
106
+ "@storybook/addon-interactions": "^8.0.4",
107
+ "@storybook/addon-links": "^8.0.4",
108
+ "@storybook/addon-styling-webpack": "^1.0.0",
109
+ "@storybook/blocks": "^8.0.4",
110
+ "@storybook/nextjs": "^8.0.4",
111
+ "@storybook/react": "^8.0.4",
112
+ "@storybook/test": "^8.0.4",
113
+ "@storybook/theming": "^8.2.4",
114
+ "@types/node": "^20",
115
+ "@types/react": "^18",
116
+ "@types/react-dom": "^18",
117
+ "autoprefixer": "^10.0.1",
118
+ "chromatic": "^11.5.4",
119
+ "eslint": "^8",
120
+ "eslint-config-next": "14.1.4",
121
+ "eslint-plugin-storybook": "^0.8.0",
122
+ "postcss": "^8",
123
+ "prettier": "^3.3.3",
124
+ "prettier-plugin-tailwindcss": "^0.6.6",
125
+ "rimraf": "^6.0.1",
126
+ "storybook": "^8.2.6",
127
+ "tailwindcss": "^3.3.0",
128
+ "tsc-alias": "^1.8.10",
129
+ "typescript": "^5"
130
+ }
131
+ }