@lotte-innovate/ui-component-test 0.1.1 → 0.1.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/README.md +163 -163
- package/dist/lib/components/Tooltip/index.d.ts +1 -1
- package/package.json +129 -127
- package/dist/globals.css +0 -261147
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
|
+
```
|
|
@@ -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 |
|
|
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;
|
|
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,127 +1,129 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@lotte-innovate/ui-component-test",
|
|
3
|
-
"description": "Lotte UI Library",
|
|
4
|
-
"version": "0.1.
|
|
5
|
-
"private": false,
|
|
6
|
-
"type": "module",
|
|
7
|
-
"files": [
|
|
8
|
-
"dist/lib",
|
|
9
|
-
"dist/tailwind.config.d.ts",
|
|
10
|
-
"dist/tailwind.config.js"
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
-
"
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
"
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
"@babel/preset-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
"
|
|
29
|
-
"not
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
"last 1
|
|
34
|
-
"last 1
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
"
|
|
43
|
-
"
|
|
44
|
-
"storybook": "
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
-
"
|
|
49
|
-
"
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
"@
|
|
55
|
-
"@
|
|
56
|
-
"@
|
|
57
|
-
"@radix-ui/
|
|
58
|
-
"@radix-ui/react-
|
|
59
|
-
"@radix-ui/react-
|
|
60
|
-
"@radix-ui/react-
|
|
61
|
-
"@radix-ui/react-
|
|
62
|
-
"@radix-ui/react-
|
|
63
|
-
"@radix-ui/react-
|
|
64
|
-
"@radix-ui/react-
|
|
65
|
-
"@radix-ui/react-
|
|
66
|
-
"@radix-ui/react-
|
|
67
|
-
"@radix-ui/react-
|
|
68
|
-
"@radix-ui/react-
|
|
69
|
-
"@radix-ui/react-
|
|
70
|
-
"@radix-ui/react-
|
|
71
|
-
"@radix-ui/react-
|
|
72
|
-
"@radix-ui/react-
|
|
73
|
-
"@radix-ui/react-
|
|
74
|
-
"@radix-ui/
|
|
75
|
-
"@
|
|
76
|
-
"@
|
|
77
|
-
"@
|
|
78
|
-
"@
|
|
79
|
-
"
|
|
80
|
-
"
|
|
81
|
-
"
|
|
82
|
-
"
|
|
83
|
-
"
|
|
84
|
-
"
|
|
85
|
-
"
|
|
86
|
-
"
|
|
87
|
-
"react": "^
|
|
88
|
-
"
|
|
89
|
-
"react
|
|
90
|
-
"react-
|
|
91
|
-
"
|
|
92
|
-
"
|
|
93
|
-
"
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
"@babel/
|
|
99
|
-
"@babel/
|
|
100
|
-
"@babel/
|
|
101
|
-
"@babel/preset-
|
|
102
|
-
"@
|
|
103
|
-
"@
|
|
104
|
-
"@storybook
|
|
105
|
-
"@storybook/addon-
|
|
106
|
-
"@storybook/addon-
|
|
107
|
-
"@storybook/
|
|
108
|
-
"@storybook/
|
|
109
|
-
"@storybook/
|
|
110
|
-
"@storybook/
|
|
111
|
-
"@storybook/
|
|
112
|
-
"@
|
|
113
|
-
"@
|
|
114
|
-
"@types/
|
|
115
|
-
"
|
|
116
|
-
"
|
|
117
|
-
"
|
|
118
|
-
"
|
|
119
|
-
"eslint
|
|
120
|
-
"
|
|
121
|
-
"
|
|
122
|
-
"
|
|
123
|
-
"
|
|
124
|
-
"
|
|
125
|
-
"
|
|
126
|
-
|
|
127
|
-
|
|
1
|
+
{
|
|
2
|
+
"name": "@lotte-innovate/ui-component-test",
|
|
3
|
+
"description": "Lotte UI Library",
|
|
4
|
+
"version": "0.1.2",
|
|
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": "move dist/src/lib dist/lib && rimraf dist/src",
|
|
46
|
+
"build:css": "npx tailwindcss -i src/app/globals.css -o dist/globals.css",
|
|
47
|
+
"publish:npm": "rimraf dist && mkdir dist && tsc && npm run move && npm run build:css && tsc-alias && node update-tailwind-import.js",
|
|
48
|
+
"move:unix": "mv dist/src/lib dist/lib && rimraf dist/src",
|
|
49
|
+
"move:win": "move dist/src/lib dist/lib && rimraf dist/src",
|
|
50
|
+
"move": "cross-env-shell 'if [ \"$OS\" = \"Windows_NT\" ]; then npm run move:win; else npm run move:unix; fi'",
|
|
51
|
+
"chromatic": "cross-env npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN"
|
|
52
|
+
},
|
|
53
|
+
"dependencies": {
|
|
54
|
+
"@babel/runtime": "^7.24.7",
|
|
55
|
+
"@babel/runtime-corejs3": "^7.24.7",
|
|
56
|
+
"@lotte-innovate/ui-component-test": "^0.0.30",
|
|
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
|
+
"rimraf": "^6.0.1",
|
|
124
|
+
"storybook": "^8.2.6",
|
|
125
|
+
"tailwindcss": "^3.3.0",
|
|
126
|
+
"tsc-alias": "^1.8.10",
|
|
127
|
+
"typescript": "^5"
|
|
128
|
+
}
|
|
129
|
+
}
|