@lotte-innovate/ui-component-test 0.1.11 → 0.2.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (10) hide show
  1. package/README.md +163 -163
  2. package/dist/lib/components/Skeleton/index.d.ts +1 -0
  3. package/dist/lib/components/Skeleton/index.js +1 -0
  4. package/dist/lib/components/Slider/index.d.ts +1 -0
  5. package/dist/lib/components/Slider/index.js +1 -0
  6. package/dist/lib/components/TextField/index.d.ts +1 -0
  7. package/dist/lib/components/TextField/index.js +1 -0
  8. package/dist/lib/components/Tooltip/index.d.ts +1 -1
  9. package/package.json +125 -131
  10. package/dist/globals.css +0 -293826
package/README.md CHANGED
@@ -1,163 +1,163 @@
1
- # radix-ui 라이브러리 활용 Storybook UI Component 만들기
2
-
3
- <br />
4
-
5
- ## 사전 설치 라이브러리
6
-
7
- - radix-ui
8
- - 주요 컴포넌트 사용 시 활용할 Headless UI 라이브러리
9
-
10
- ```shell
11
- npm install @radix-ui/react-popover@latest -E
12
- ```
13
-
14
- - storybook
15
- - 컴포넌트 관리를 위해 사용
16
-
17
- ```shell
18
- npx sb init
19
- npx storybook@latest add @storybook/addon-styling-webpack
20
- ```
21
-
22
- - clsx
23
- - 조건부 className 작성을 위해 사용
24
-
25
- ```shell
26
- npm i clsx
27
- ```
28
-
29
- - tailwind-merge
30
- - 스타일 충돌 없이 자바스크립트에서 tailwind CSS 클래스를 효율적으로 병합하는 기능을 가진 라이브러리
31
-
32
- ```shell
33
- npm i tailwind-merge
34
- ```
35
-
36
- - class-variance-authority (CVA)
37
- - 일관성 있는 UI를 정의하고 사용할 수 있도록 도와주는 툴로써 shadcn/ui 컴포넌트의 핵심 도구
38
-
39
- ```shell
40
- npm i class-variance-authority
41
- ```
42
-
43
- <br />
44
-
45
- ## 실행
46
-
47
- - 스토리북 실행
48
-
49
- ```shell
50
- npm run storybook
51
- ```
52
-
53
- > 접속주소(포트 6006 사용 시): `http://localhost:6006`
54
-
55
- - 웹페이지 실행
56
-
57
- ```shell
58
- npm run dev
59
- ```
60
-
61
- > 접속주소(포트 3000 사용 시): `http://localhost:3000`
62
-
63
- ## package publish
64
-
65
- - 타입스크립트 컴파일
66
-
67
- ```shell
68
- npm run publish:npm
69
- ```
70
-
71
- - npm package 배포 시
72
-
73
- - npm 로그인
74
-
75
- ```shell
76
- npm login
77
- ```
78
-
79
- - package.json 버전 수정 후 컴파일 진행
80
-
81
- ```shell
82
- npm run publish:npm
83
- ```
84
-
85
- - 패키지 배포
86
-
87
- ```shell
88
- npm publish
89
- ```
90
-
91
- - npm scope 배포
92
- - npm 로그인 후, 조직 생성 시 @계정명 으로 scope 생성
93
- scope로 생성된 패키지는 npm publish 시, 아래 옵션 추가
94
-
95
- ```shell
96
- npm publish --access=public
97
- ```
98
-
99
-
100
- - npm package 미배포시
101
-
102
- - package.json 버전 수정 후 컴파일 진행
103
-
104
- ```shell
105
- npm run publish:npm
106
- ```
107
-
108
- - dist/ 파일 및 설정파일 추출 후 전달
109
-
110
- ## 사용자 이용 방법
111
-
112
- ### npm 배포 시
113
-
114
- - npm package 설치
115
-
116
- ```sh
117
- npm install <package_name>
118
- ```
119
-
120
- ### npm 미배포시
121
-
122
- - 전달 받은 package 모듈 파일을 node_modules/ 폴더에 추가
123
-
124
- ### tailwind 설정 방법
125
-
126
- - tailwind config 파일 설정
127
-
128
- ```js
129
- // tailwind.config.ts
130
- import type { Config } from 'tailwindcss';
131
- // UI 라이브러리 tailwind config 파일 호출
132
- // >>>>>>>> 추가
133
- const packageTailwindConfig = require('ui-component-test/tailwind.config.js');
134
- // >>>>>>>>
135
-
136
- const config: Config = {
137
- content: [
138
- './src/pages/**/*.{js,ts,jsx,tsx,mdx,zip}',
139
- './src/components/**/*.{js,ts,jsx,tsx,mdx,zip}',
140
- './src/app/**/*.{js,ts,jsx,tsx,mdx,zip}',
141
- // 해당 프로젝트 css 표준 컴포넌트에 적용 가능
142
- // >>>>>>>> 추가
143
- './node_modules/ui-component-test/**/*.{js,ts,jsx,tsx,mdx,zip}',
144
- // >>>>>>>>
145
- ],
146
- theme: {
147
- extend: {
148
- backgroundImage: {
149
- 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
150
- 'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
151
- },
152
- colors: {},
153
- // UI 라이브러리 tailwind config 파일 적용
154
- // >>>>>>>> 추가
155
- ...packageTailwindConfig?.theme?.extend,
156
- // >>>>>>>>
157
- },
158
- },
159
- plugins: [],
160
- };
161
- export default config;
162
-
163
- ```
1
+ # radix-ui 라이브러리 활용 Storybook UI Component 만들기
2
+
3
+ <br />
4
+
5
+ ## 사전 설치 라이브러리
6
+
7
+ - radix-ui
8
+ - 주요 컴포넌트 사용 시 활용할 Headless UI 라이브러리
9
+
10
+ ```shell
11
+ npm install @radix-ui/react-popover@latest -E
12
+ ```
13
+
14
+ - storybook
15
+ - 컴포넌트 관리를 위해 사용
16
+
17
+ ```shell
18
+ npx sb init
19
+ npx storybook@latest add @storybook/addon-styling-webpack
20
+ ```
21
+
22
+ - clsx
23
+ - 조건부 className 작성을 위해 사용
24
+
25
+ ```shell
26
+ npm i clsx
27
+ ```
28
+
29
+ - tailwind-merge
30
+ - 스타일 충돌 없이 자바스크립트에서 tailwind CSS 클래스를 효율적으로 병합하는 기능을 가진 라이브러리
31
+
32
+ ```shell
33
+ npm i tailwind-merge
34
+ ```
35
+
36
+ - class-variance-authority (CVA)
37
+ - 일관성 있는 UI를 정의하고 사용할 수 있도록 도와주는 툴로써 shadcn/ui 컴포넌트의 핵심 도구
38
+
39
+ ```shell
40
+ npm i class-variance-authority
41
+ ```
42
+
43
+ <br />
44
+
45
+ ## 실행
46
+
47
+ - 스토리북 실행
48
+
49
+ ```shell
50
+ npm run storybook
51
+ ```
52
+
53
+ > 접속주소(포트 6006 사용 시): `http://localhost:6006`
54
+
55
+ - 웹페이지 실행
56
+
57
+ ```shell
58
+ npm run dev
59
+ ```
60
+
61
+ > 접속주소(포트 3000 사용 시): `http://localhost:3000`
62
+
63
+ ## package publish
64
+
65
+ - 타입스크립트 컴파일
66
+
67
+ ```shell
68
+ npm run publish:npm
69
+ ```
70
+
71
+ - npm package 배포 시
72
+
73
+ - npm 로그인
74
+
75
+ ```shell
76
+ npm login
77
+ ```
78
+
79
+ - package.json 버전 수정 후 컴파일 진행
80
+
81
+ ```shell
82
+ npm run publish:npm
83
+ ```
84
+
85
+ - 패키지 배포
86
+
87
+ ```shell
88
+ npm publish
89
+ ```
90
+
91
+ - npm scope 배포
92
+ - npm 로그인 후, 조직 생성 시 @계정명 으로 scope 생성
93
+ scope로 생성된 패키지는 npm publish 시, 아래 옵션 추가
94
+
95
+ ```shell
96
+ npm publish --access=public
97
+ ```
98
+
99
+
100
+ - npm package 미배포시
101
+
102
+ - package.json 버전 수정 후 컴파일 진행
103
+
104
+ ```shell
105
+ npm run publish:npm
106
+ ```
107
+
108
+ - dist/ 파일 및 설정파일 추출 후 전달
109
+
110
+ ## 사용자 이용 방법
111
+
112
+ ### npm 배포 시
113
+
114
+ - npm package 설치
115
+
116
+ ```sh
117
+ npm install <package_name>
118
+ ```
119
+
120
+ ### npm 미배포시
121
+
122
+ - 전달 받은 package 모듈 파일을 node_modules/ 폴더에 추가
123
+
124
+ ### tailwind 설정 방법
125
+
126
+ - tailwind config 파일 설정
127
+
128
+ ```js
129
+ // tailwind.config.ts
130
+ import type { Config } from 'tailwindcss';
131
+ // UI 라이브러리 tailwind config 파일 호출
132
+ // >>>>>>>> 추가
133
+ const packageTailwindConfig = require('ui-component-test/tailwind.config.js');
134
+ // >>>>>>>>
135
+
136
+ const config: Config = {
137
+ content: [
138
+ './src/pages/**/*.{js,ts,jsx,tsx,mdx,zip}',
139
+ './src/components/**/*.{js,ts,jsx,tsx,mdx,zip}',
140
+ './src/app/**/*.{js,ts,jsx,tsx,mdx,zip}',
141
+ // 해당 프로젝트 css 표준 컴포넌트에 적용 가능
142
+ // >>>>>>>> 추가
143
+ './node_modules/ui-component-test/**/*.{js,ts,jsx,tsx,mdx,zip}',
144
+ // >>>>>>>>
145
+ ],
146
+ theme: {
147
+ extend: {
148
+ backgroundImage: {
149
+ 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
150
+ 'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
151
+ },
152
+ colors: {},
153
+ // UI 라이브러리 tailwind config 파일 적용
154
+ // >>>>>>>> 추가
155
+ ...packageTailwindConfig?.theme?.extend,
156
+ // >>>>>>>>
157
+ },
158
+ },
159
+ plugins: [],
160
+ };
161
+ export default config;
162
+
163
+ ```
package/dist/lib/components/Skeleton/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import '@radix-ui/themes/styles.css';
2
3
  import { VariantProps } from 'class-variance-authority';
3
4
  import { IColor } from '../../../lib/types';
4
5
  export interface SkeletonProps extends VariantProps<typeof separatorVariants> {
package/dist/lib/components/Skeleton/index.js CHANGED
@@ -22,6 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
22
22
  };
23
23
  import { jsx as _jsx } from "react/jsx-runtime";
24
24
  import React from 'react';
25
+ import '@radix-ui/themes/styles.css';
25
26
  import { cva } from 'class-variance-authority';
26
27
  import { Theme, Skeleton as SkeletonTheme } from '@radix-ui/themes';
27
28
  import { cn } from '../../../lib/utils/utils';
package/dist/lib/components/Slider/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import '@radix-ui/themes/styles.css';
2
3
  import { VariantProps } from 'class-variance-authority';
3
4
  import { IScaling } from '../../../lib/types';
4
5
  export interface SliderProps extends VariantProps<typeof sliderVariants> {
package/dist/lib/components/Slider/index.js CHANGED
@@ -22,6 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
22
22
  };
23
23
  import { jsx as _jsx } from "react/jsx-runtime";
24
24
  import React from 'react';
25
+ import '@radix-ui/themes/styles.css';
25
26
  import { cva } from 'class-variance-authority';
26
27
  import { cn } from '../../../lib/utils/utils';
27
28
  import { radiusVariants } from '../../../lib/constants';
package/dist/lib/components/TextField/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import '@radix-ui/themes/styles.css';
2
3
  import { VariantProps } from 'class-variance-authority';
3
4
  import { TextField as TextFieldTheme } from '@radix-ui/themes';
4
5
  import { IScaling } from '../../../lib/types';
package/dist/lib/components/TextField/index.js CHANGED
@@ -22,6 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
22
22
  };
23
23
  import { jsx as _jsx } from "react/jsx-runtime";
24
24
  import React from 'react';
25
+ import '@radix-ui/themes/styles.css';
25
26
  import { cva } from 'class-variance-authority';
26
27
  import { cn } from '../../../lib/utils/utils';
27
28
  import { bgColorStyle, radiusVariants } from '../../../lib/constants';
package/dist/lib/components/Tooltip/index.d.ts CHANGED
@@ -11,7 +11,7 @@ export interface TooltipProps extends React.InputHTMLAttributes<HTMLInputElement
11
11
  side?: 'top' | 'right' | 'bottom' | 'left';
12
12
  }
13
13
  declare const tooltipVariants: (props?: ({
14
- scaling?: number | typeof Symbol.iterator | "concat" | "indexOf" | "lastIndexOf" | "slice" | "length" | "includes" | "at" | "toLocaleString" | typeof Symbol.unscopables | "map" | "filter" | "fill" | "values" | "toString" | "pop" | "push" | "join" | "reverse" | "shift" | "sort" | "splice" | "unshift" | "every" | "some" | "forEach" | "reduce" | "reduceRight" | "find" | "findIndex" | "copyWithin" | "entries" | "keys" | "flatMap" | "flat" | "findLast" | "findLastIndex" | "toReversed" | "toSorted" | "toSpliced" | "with" | null | undefined;
14
+ scaling?: number | typeof Symbol.iterator | typeof Symbol.unscopables | "concat" | "indexOf" | "lastIndexOf" | "slice" | "length" | "includes" | "at" | "toLocaleString" | "map" | "filter" | "fill" | "values" | "toString" | "pop" | "push" | "join" | "reverse" | "shift" | "sort" | "splice" | "unshift" | "every" | "some" | "forEach" | "reduce" | "reduceRight" | "find" | "findIndex" | "copyWithin" | "entries" | "keys" | "flatMap" | "flat" | "findLast" | "findLastIndex" | "toReversed" | "toSorted" | "toSpliced" | "with" | null | undefined;
15
15
  weight?: "bold" | "medium" | "regular" | "semibold" | null | undefined;
16
16
  radius?: "small" | "none" | "medium" | "large" | "full" | null | undefined;
17
17
  color?: string | null | undefined;
package/package.json CHANGED
@@ -1,131 +1,125 @@
1
- {
2
- "name": "@lotte-innovate/ui-component-test",
3
- "description": "Lotte UI Library",
4
- "version": "0.1.11",
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
- "dist/styles.css"
13
- ],
14
- "main": "dist/lib/index.js",
15
- "module": "dist/lib/index.js",
16
- "types": "dist/lib/index.d.ts",
17
- "publishConfig": {
18
- "access": "public"
19
- },
20
- "browser": "./browser/specific/main.js",
21
- "babel": {
22
- "presets": [
23
- "@babel/preset-react",
24
- "@babel/preset-env"
25
- ]
26
- },
27
- "browserslist": {
28
- "production": [
29
- ">0.2%",
30
- "not dead",
31
- "not op_mini all"
32
- ],
33
- "development": [
34
- "last 1 chrome version",
35
- "last 1 firefox version",
36
- "last 1 safari version"
37
- ]
38
- },
39
- "scripts": {
40
- "dev": "next dev",
41
- "lint": "next lint",
42
- "prepare": "next build",
43
- "start": "next start",
44
- "storybook": "cross-env NODE_OPTIONS='--max-old-space-size=8192' storybook dev -p 6006",
45
- "chromatic": "cross-env npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN",
46
- "compile": "tsc --jsx react-jsx",
47
- "build": "next build && npm run compile",
48
- "build:css": "npx tailwindcss -i src/app/globals.css -o dist/globals.css",
49
- "build-storybook": "storybook build",
50
- "clean": "rimraf dist && mkdir dist",
51
- "update-tailwind": "node update-tailwind-import.js",
52
- "build:all": "npm run clean && npm run compile && node src/utils/move.js && npm run build:css && tsc-alias && npm run update-tailwind",
53
- "publish:npm": "npm run build:all && npm publish"
54
- },
55
- "dependencies": {
56
- "@babel/runtime": "^7.24.7",
57
- "@babel/runtime-corejs3": "^7.24.7",
58
- "@lotte-innovate/ui-component-test": "^0.0.30",
59
- "@radix-ui/colors": "^3.0.0",
60
- "@radix-ui/react-accordion": "^1.2.0",
61
- "@radix-ui/react-checkbox": "^1.0.4",
62
- "@radix-ui/react-dialog": "^1.1.1",
63
- "@radix-ui/react-dropdown-menu": "^2.1.1",
64
- "@radix-ui/react-hover-card": "^1.1.1",
65
- "@radix-ui/react-icons": "^1.3.0",
66
- "@radix-ui/react-label": "^2.1.0",
67
- "@radix-ui/react-menubar": "^1.1.1",
68
- "@radix-ui/react-navigation-menu": "^1.2.0",
69
- "@radix-ui/react-popover": "1.0.7",
70
- "@radix-ui/react-radio-group": "^1.1.3",
71
- "@radix-ui/react-select": "^2.1.1",
72
- "@radix-ui/react-separator": "^1.1.0",
73
- "@radix-ui/react-slider": "^1.2.0",
74
- "@radix-ui/react-switch": "^1.1.0",
75
- "@radix-ui/react-tabs": "^1.1.0",
76
- "@radix-ui/react-toast": "^1.2.1",
77
- "@radix-ui/react-tooltip": "^1.1.1",
78
- "@radix-ui/themes": "^3.1.1",
79
- "@stitches/core": "^1.2.8",
80
- "@stitches/react": "^1.2.8",
81
- "@storybook/addon-a11y": "^8.0.10",
82
- "@storybook/addons": "^7.6.17",
83
- "chart.js": "^4.4.4",
84
- "chartjs-plugin-datalabels": "^2.2.0",
85
- "class-variance-authority": "^0.7.0",
86
- "clsx": "^2.1.0",
87
- "cross-env": "^7.0.3",
88
- "dotenv": "^16.4.5",
89
- "lucide-react": "^0.364.0",
90
- "next": "14.1.4",
91
- "react": "^18",
92
- "react-chartjs-2": "^5.2.0",
93
- "react-dom": "^18",
94
- "react-tabs": "^6.0.2",
95
- "storybook-addon-deep-controls": "^0.7.1",
96
- "storybook-dark-mode": "^4.0.2",
97
- "tailwind-merge": "^2.2.2"
98
- },
99
- "devDependencies": {
100
- "@babel/cli": "^7.24.7",
101
- "@babel/core": "^7.24.7",
102
- "@babel/plugin-transform-runtime": "^7.24.7",
103
- "@babel/preset-env": "^7.25.4",
104
- "@babel/preset-react": "^7.24.7",
105
- "@babel/preset-typescript": "^7.24.7",
106
- "@chromatic-com/storybook": "^1.2.25",
107
- "@storybook/addon-essentials": "^8.0.4",
108
- "@storybook/addon-interactions": "^8.0.4",
109
- "@storybook/addon-links": "^8.0.4",
110
- "@storybook/addon-styling-webpack": "^1.0.0",
111
- "@storybook/blocks": "^8.0.4",
112
- "@storybook/nextjs": "^8.0.4",
113
- "@storybook/react": "^8.0.4",
114
- "@storybook/test": "^8.0.4",
115
- "@storybook/theming": "^8.2.4",
116
- "@types/node": "^20",
117
- "@types/react": "^18",
118
- "@types/react-dom": "^18",
119
- "autoprefixer": "^10.0.1",
120
- "chromatic": "^11.5.4",
121
- "eslint": "^8",
122
- "eslint-config-next": "14.1.4",
123
- "eslint-plugin-storybook": "^0.8.0",
124
- "postcss": "^8",
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.2.0",
5
+ "private": false,
6
+ "type": "module",
7
+ "files": [
8
+ "dist/lib",
9
+ "dist/tailwind.config.d.ts",
10
+ "dist/tailwind.config.js"
11
+ ],
12
+ "main": "dist/lib/index.js",
13
+ "module": "dist/lib/index.js",
14
+ "types": "dist/lib/index.d.ts",
15
+ "publishConfig": {
16
+ "access": "public"
17
+ },
18
+ "browser": "./browser/specific/main.js",
19
+ "babel": {
20
+ "presets": [
21
+ "@babel/preset-react",
22
+ "@babel/preset-env"
23
+ ]
24
+ },
25
+ "browserslist": {
26
+ "production": [
27
+ ">0.2%",
28
+ "not dead",
29
+ "not op_mini all"
30
+ ],
31
+ "development": [
32
+ "last 1 chrome version",
33
+ "last 1 firefox version",
34
+ "last 1 safari version"
35
+ ]
36
+ },
37
+ "scripts": {
38
+ "dev": "next dev",
39
+ "build": "next build && tsc",
40
+ "prepare": "next build",
41
+ "start": "next start",
42
+ "lint": "next lint",
43
+ "storybook": "cross-env NODE_OPTIONS='--max-old-space-size=8192' storybook dev -p 6006",
44
+ "build-storybook": "storybook build",
45
+ "move-files": "mv dist/src/lib dist/lib && rm -rf dist/src",
46
+ "publish:npm": "rimraf dist && mkdir dist && tsc && npm run move-files && tsc-alias && node update-tailwind-import.js",
47
+ "chromatic": "cross-env npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN"
48
+ },
49
+ "dependencies": {
50
+ "@babel/runtime": "^7.24.7",
51
+ "@babel/runtime-corejs3": "^7.24.7",
52
+ "@lotte-innovate/ui-component-test": "^0.0.30",
53
+ "@radix-ui/colors": "^3.0.0",
54
+ "@radix-ui/react-accordion": "^1.2.0",
55
+ "@radix-ui/react-checkbox": "^1.0.4",
56
+ "@radix-ui/react-dialog": "^1.1.1",
57
+ "@radix-ui/react-dropdown-menu": "^2.1.1",
58
+ "@radix-ui/react-hover-card": "^1.1.1",
59
+ "@radix-ui/react-icons": "^1.3.0",
60
+ "@radix-ui/react-label": "^2.1.0",
61
+ "@radix-ui/react-menubar": "^1.1.1",
62
+ "@radix-ui/react-navigation-menu": "^1.2.0",
63
+ "@radix-ui/react-popover": "1.0.7",
64
+ "@radix-ui/react-radio-group": "^1.1.3",
65
+ "@radix-ui/react-select": "^2.1.1",
66
+ "@radix-ui/react-separator": "^1.1.0",
67
+ "@radix-ui/react-slider": "^1.2.0",
68
+ "@radix-ui/react-switch": "^1.1.0",
69
+ "@radix-ui/react-tabs": "^1.1.0",
70
+ "@radix-ui/react-toast": "^1.2.1",
71
+ "@radix-ui/react-tooltip": "^1.1.1",
72
+ "@radix-ui/themes": "^3.1.1",
73
+ "@stitches/core": "^1.2.8",
74
+ "@stitches/react": "^1.2.8",
75
+ "@storybook/addon-a11y": "^8.0.10",
76
+ "@storybook/addons": "^7.6.17",
77
+ "chart.js": "^4.4.4",
78
+ "chartjs-plugin-datalabels": "^2.2.0",
79
+ "class-variance-authority": "^0.7.0",
80
+ "clsx": "^2.1.0",
81
+ "cross-env": "^7.0.3",
82
+ "dotenv": "^16.4.5",
83
+ "lucide-react": "^0.364.0",
84
+ "next": "14.1.4",
85
+ "react": "^18",
86
+ "react-chartjs-2": "^5.2.0",
87
+ "react-dom": "^18",
88
+ "react-tabs": "^6.0.2",
89
+ "storybook-addon-deep-controls": "^0.7.1",
90
+ "storybook-dark-mode": "^4.0.2",
91
+ "tailwind-merge": "^2.2.2"
92
+ },
93
+ "devDependencies": {
94
+ "@babel/cli": "^7.24.7",
95
+ "@babel/core": "^7.24.7",
96
+ "@babel/plugin-transform-runtime": "^7.24.7",
97
+ "@babel/preset-env": "^7.25.4",
98
+ "@babel/preset-react": "^7.24.7",
99
+ "@babel/preset-typescript": "^7.24.7",
100
+ "@chromatic-com/storybook": "^1.2.25",
101
+ "@storybook/addon-essentials": "^8.0.4",
102
+ "@storybook/addon-interactions": "^8.0.4",
103
+ "@storybook/addon-links": "^8.0.4",
104
+ "@storybook/addon-styling-webpack": "^1.0.0",
105
+ "@storybook/blocks": "^8.0.4",
106
+ "@storybook/nextjs": "^8.0.4",
107
+ "@storybook/react": "^8.0.4",
108
+ "@storybook/test": "^8.0.4",
109
+ "@storybook/theming": "^8.2.4",
110
+ "@types/node": "^20",
111
+ "@types/react": "^18",
112
+ "@types/react-dom": "^18",
113
+ "autoprefixer": "^10.0.1",
114
+ "chromatic": "^11.5.4",
115
+ "eslint": "^8",
116
+ "eslint-config-next": "14.1.4",
117
+ "eslint-plugin-storybook": "^0.8.0",
118
+ "postcss": "^8",
119
+ "rimraf": "^6.0.1",
120
+ "storybook": "^8.2.6",
121
+ "tailwindcss": "^3.3.0",
122
+ "tsc-alias": "^1.8.10",
123
+ "typescript": "^5"
124
+ }
125
+ }