@lotte-innovate/ui-component-test 0.0.6 → 0.0.8

Sign up to get free protection for your applications and to get access to all the features.
Files changed (206) hide show
  1. package/README.md +163 -163
  2. package/dist/Typography/Header/index.d.ts +1 -1
  3. package/dist/Typography/Header/index.jsx +4 -4
  4. package/dist/Typography/Text/index.d.ts +1 -1
  5. package/dist/Typography/Text/index.jsx +4 -4
  6. package/dist/Typography/index.js +3 -2
  7. package/dist/app/layout.jsx +2 -2
  8. package/dist/app/page.d.ts +1 -1
  9. package/dist/app/page.jsx +3 -39
  10. package/dist/app/template/badgeTemplate.jsx +71 -71
  11. package/dist/app/template/buttonTemplate.jsx +71 -71
  12. package/dist/app/template/colorPicker.jsx +6 -6
  13. package/dist/app/template/textTemplate.jsx +55 -55
  14. package/dist/app/template/theme.jsx +32 -32
  15. package/dist/components/Accordion/index.jsx +13 -13
  16. package/dist/components/AlertDialog/AlertDialogAction.jsx +2 -2
  17. package/dist/components/AlertDialog/AlertDialogCancel.jsx +2 -2
  18. package/dist/components/AlertDialog/AlertDialogContent.jsx +5 -5
  19. package/dist/components/AlertDialog/AlertDialogDescription.jsx +2 -2
  20. package/dist/components/AlertDialog/AlertDialogTitle.jsx +2 -2
  21. package/dist/components/AlertDialog/AlertDialogTrigger.jsx +2 -2
  22. package/dist/components/AspectRatio/index.jsx +2 -2
  23. package/dist/components/Avatar/index.jsx +5 -5
  24. package/dist/components/Badge/index.jsx +2 -2
  25. package/dist/components/BubbleChart/index.d.ts +1 -1
  26. package/dist/components/Button/index.jsx +2 -2
  27. package/dist/components/Callout/CalloutIcon.jsx +6 -6
  28. package/dist/components/Callout/CalloutText.jsx +2 -2
  29. package/dist/components/Callout/index.jsx +4 -4
  30. package/dist/components/Card/index.jsx +2 -2
  31. package/dist/components/Checkbox/index.jsx +9 -9
  32. package/dist/components/CheckboxCard/index.jsx +3 -3
  33. package/dist/components/CheckboxGroup/CheckboxGroupItem.jsx +4 -4
  34. package/dist/components/CheckboxGroup/index.jsx +4 -4
  35. package/dist/components/ContextMenu/ContextMenuCheckboxItem.jsx +5 -5
  36. package/dist/components/ContextMenu/ContextMenuContent.jsx +4 -4
  37. package/dist/components/ContextMenu/ContextMenuGroup.jsx +2 -2
  38. package/dist/components/ContextMenu/ContextMenuItem.jsx +3 -3
  39. package/dist/components/ContextMenu/ContextMenuItemIndicator.jsx +2 -2
  40. package/dist/components/ContextMenu/ContextMenuLabel.jsx +2 -2
  41. package/dist/components/ContextMenu/ContextMenuRadioGroup.jsx +4 -4
  42. package/dist/components/ContextMenu/ContextMenuRadioItem.jsx +5 -5
  43. package/dist/components/ContextMenu/ContextMenuSeparator.jsx +2 -2
  44. package/dist/components/ContextMenu/ContextMenuSubContent.jsx +4 -4
  45. package/dist/components/ContextMenu/ContextMenuSubTrigger.jsx +7 -7
  46. package/dist/components/ContextMenu/ContextMenuTrigger.jsx +2 -2
  47. package/dist/components/ContextMenu/index.jsx +2 -2
  48. package/dist/components/DataList/DataListItem.jsx +2 -2
  49. package/dist/components/DataList/DataListLabel.jsx +2 -2
  50. package/dist/components/DataList/DataListValue.jsx +2 -2
  51. package/dist/components/DataList/index.jsx +4 -4
  52. package/dist/components/Dialog/DialogAction.jsx +2 -2
  53. package/dist/components/Dialog/DialogCancel.jsx +2 -2
  54. package/dist/components/Dialog/DialogContent.jsx +2 -2
  55. package/dist/components/Dialog/DialogDescription.jsx +2 -2
  56. package/dist/components/Dialog/DialogSlot.jsx +2 -2
  57. package/dist/components/Dialog/DialogTitle.jsx +2 -2
  58. package/dist/components/Dialog/DialogTrigger.jsx +2 -2
  59. package/dist/components/Dialog/index.jsx +2 -2
  60. package/dist/components/DropdownMenu/DropdonMenuRadioGroup.jsx +4 -4
  61. package/dist/components/DropdownMenu/DropdonMenuSubContent.jsx +4 -4
  62. package/dist/components/DropdownMenu/DropdownMenuCheckboxItem.jsx +5 -5
  63. package/dist/components/DropdownMenu/DropdownMenuContent.jsx +4 -4
  64. package/dist/components/DropdownMenu/DropdownMenuItem.jsx +3 -3
  65. package/dist/components/DropdownMenu/DropdownMenuItemIndicator.jsx +2 -2
  66. package/dist/components/DropdownMenu/DropdownMenuLable.jsx +2 -2
  67. package/dist/components/DropdownMenu/DropdownMenuRadioItem.jsx +5 -5
  68. package/dist/components/DropdownMenu/DropdownMenuSubTrigger.jsx +5 -5
  69. package/dist/components/DropdownMenu/DropdownMenuTrigger.jsx +2 -2
  70. package/dist/components/HoverCard/HoverCardContent.jsx +2 -2
  71. package/dist/components/HoverCard/HoverCardTrigger.jsx +2 -2
  72. package/dist/components/HoverCard/index.jsx +2 -2
  73. package/dist/components/IconButton/index.jsx +2 -2
  74. package/dist/components/Input/Input.stories.jsx +6 -6
  75. package/dist/components/Inset/index.jsx +4 -4
  76. package/dist/components/Label/index.jsx +2 -2
  77. package/dist/components/Menubar/MenubarCheckboxItem.jsx +5 -5
  78. package/dist/components/Menubar/MenubarContent.jsx +4 -4
  79. package/dist/components/Menubar/MenubarItem.jsx +3 -3
  80. package/dist/components/Menubar/MenubarItemIndicator.jsx +2 -2
  81. package/dist/components/Menubar/MenubarRadioGroup.jsx +4 -4
  82. package/dist/components/Menubar/MenubarRadioItem.jsx +5 -5
  83. package/dist/components/Menubar/MenubarSeparator.jsx +2 -2
  84. package/dist/components/Menubar/MenubarSubContent.jsx +2 -2
  85. package/dist/components/Menubar/MenubarSubTrigger.jsx +5 -5
  86. package/dist/components/Menubar/MenubarTrigger.jsx +2 -2
  87. package/dist/components/Menubar/index.jsx +4 -4
  88. package/dist/components/NavigationMenu/NavigationMenuContent.jsx +2 -2
  89. package/dist/components/NavigationMenu/NavigationMenuIndicator.jsx +3 -3
  90. package/dist/components/NavigationMenu/NavigationMenuItem.jsx +2 -2
  91. package/dist/components/NavigationMenu/NavigationMenuLink.jsx +2 -2
  92. package/dist/components/NavigationMenu/NavigationMenuList.jsx +3 -3
  93. package/dist/components/NavigationMenu/NavigationMenuTrigger.jsx +3 -3
  94. package/dist/components/NavigationMenu/NavigationMenuViewport.jsx +2 -2
  95. package/dist/components/NavigationMenu/index.jsx +4 -4
  96. package/dist/components/Popover/PopoverClose.jsx +2 -2
  97. package/dist/components/Popover/PopoverContent.jsx +2 -2
  98. package/dist/components/Popover/PopoverTrigger.jsx +2 -2
  99. package/dist/components/Popover/index.jsx +2 -2
  100. package/dist/components/Progress/index.d.ts +3 -3
  101. package/dist/components/Progress/index.jsx +2 -2
  102. package/dist/components/RadarChart/index.d.ts +1 -1
  103. package/dist/components/Radio/index.d.ts +1 -1
  104. package/dist/components/Radio/index.jsx +7 -7
  105. package/dist/components/RadioCards/RadioCardsItem.jsx +2 -2
  106. package/dist/components/RadioCards/index.d.ts +1 -1
  107. package/dist/components/RadioCards/index.jsx +4 -4
  108. package/dist/components/RadioGroup/RadioGroupItem.jsx +2 -2
  109. package/dist/components/RadioGroup/index.d.ts +1 -1
  110. package/dist/components/RadioGroup/index.jsx +4 -4
  111. package/dist/components/ScrollArea/index.jsx +4 -4
  112. package/dist/components/SegmentedControl/SegmentedControlItem.jsx +2 -2
  113. package/dist/components/SegmentedControl/index.d.ts +1 -1
  114. package/dist/components/SegmentedControl/index.jsx +4 -4
  115. package/dist/components/Select/index.d.ts +1 -1
  116. package/dist/components/Select/index.jsx +16 -16
  117. package/dist/components/Separator/index.d.ts +1 -1
  118. package/dist/components/Separator/index.jsx +4 -4
  119. package/dist/components/Skeleton/index.d.ts +1 -1
  120. package/dist/components/Skeleton/index.jsx +4 -4
  121. package/dist/components/Slider/index.d.ts +1 -1
  122. package/dist/components/Slider/index.jsx +2 -2
  123. package/dist/components/Spinner/index.d.ts +1 -1
  124. package/dist/components/Spinner/index.jsx +4 -4
  125. package/dist/components/TabNav/index.jsx +6 -6
  126. package/dist/components/Table/index.d.ts +2 -2
  127. package/dist/components/Table/index.jsx +16 -16
  128. package/dist/components/Tabs/index.d.ts +1 -1
  129. package/dist/components/Tabs/index.jsx +10 -10
  130. package/dist/components/TextArea/index.d.ts +3 -3
  131. package/dist/components/TextArea/index.jsx +2 -2
  132. package/dist/components/TextField/index.d.ts +1 -1
  133. package/dist/components/TextField/index.jsx +6 -6
  134. package/dist/components/Toast/ToastActionButton.d.ts +3 -3
  135. package/dist/components/Toast/ToastActionButton.jsx +2 -2
  136. package/dist/components/Toast/ToastDescription.d.ts +1 -1
  137. package/dist/components/Toast/ToastDescription.jsx +4 -4
  138. package/dist/components/Toast/ToastTitle.d.ts +1 -1
  139. package/dist/components/Toast/ToastTitle.jsx +2 -2
  140. package/dist/components/Toast/index.d.ts +3 -3
  141. package/dist/components/Toast/index.jsx +7 -7
  142. package/dist/components/Toggle/ToggleWithText.jsx +3 -3
  143. package/dist/components/Toggle/index.d.ts +3 -3
  144. package/dist/components/Toggle/index.jsx +2 -2
  145. package/dist/components/ToggleGroup/index.d.ts +1 -1
  146. package/dist/components/ToggleGroup/index.jsx +4 -4
  147. package/dist/components/ToggleGroup/toggleGroupItem.jsx +2 -2
  148. package/dist/components/ToggleSwitch/index.d.ts +3 -3
  149. package/dist/components/ToggleSwitch/index.jsx +5 -5
  150. package/dist/components/Tooltip/index.d.ts +1 -1
  151. package/dist/components/Tooltip/index.jsx +10 -10
  152. package/dist/components/index.d.ts +0 -2
  153. package/dist/index.d.ts +0 -5
  154. package/dist/index.js +3 -5
  155. package/dist/stories/Welcome.jsx +19 -19
  156. package/dist/stories/accordion/Accordion.stories.jsx +19 -19
  157. package/dist/stories/alert-dialog/AlertDialog.stories.jsx +14 -14
  158. package/dist/stories/aspect-ratio/AspectRatio.stories.jsx +29 -29
  159. package/dist/stories/avatar/Avatar.stories.jsx +12 -12
  160. package/dist/stories/badge/Badge.stories.jsx +44 -44
  161. package/dist/stories/bubble-chart/BubbleChart.stories.jsx +9 -9
  162. package/dist/stories/button/Button.stories.jsx +34 -34
  163. package/dist/stories/button/IconButton.stories.jsx +14 -14
  164. package/dist/stories/callout/Callout.stories.jsx +107 -107
  165. package/dist/stories/card/Card.stories.jsx +51 -51
  166. package/dist/stories/checkbox/Checkbox.stories.jsx +57 -57
  167. package/dist/stories/checkbox/CheckboxCard.stories.jsx +36 -36
  168. package/dist/stories/checkbox/CheckboxGroup.stories.jsx +73 -73
  169. package/dist/stories/context-menu/ContextMenu.stories.jsx +70 -70
  170. package/dist/stories/data-list/DataList.stories.jsx +102 -102
  171. package/dist/stories/dialog/Dialog.stories.jsx +24 -24
  172. package/dist/stories/doughnut-chart/DoughnutChart.stories.jsx +9 -9
  173. package/dist/stories/dropdown-menu/DropdownMenu.stories.jsx +96 -96
  174. package/dist/stories/header/Header.stories.jsx +20 -20
  175. package/dist/stories/hover-card/HoverCard.stories.jsx +28 -28
  176. package/dist/stories/inset/Inset.stories.jsx +16 -16
  177. package/dist/stories/label/Label.stories.jsx +22 -22
  178. package/dist/stories/menubar/Menubar.stories.jsx +38 -38
  179. package/dist/stories/navigation-menu/NavigationMenu.stories.d.ts +9 -9
  180. package/dist/stories/navigation-menu/NavigationMenu.stories.jsx +67 -67
  181. package/dist/stories/pie-chart/PieChart.stories.jsx +20 -20
  182. package/dist/stories/popover/Popover.stories.jsx +34 -34
  183. package/dist/stories/progress/Progress.stories.jsx +6 -6
  184. package/dist/stories/radio/Radio.stories.jsx +11 -11
  185. package/dist/stories/radio/RadioCards.stories.jsx +60 -60
  186. package/dist/stories/radio/RadioGroup.stories.jsx +55 -55
  187. package/dist/stories/scroll-area/ScrollArea.stories.jsx +61 -61
  188. package/dist/stories/segmented-control/SegmentedControl.stories.jsx +22 -22
  189. package/dist/stories/select/Select.stories.jsx +62 -62
  190. package/dist/stories/separator/Separator.stories.jsx +25 -25
  191. package/dist/stories/skeleton/Skeleton.stories.jsx +28 -28
  192. package/dist/stories/slider/Slider.stories.jsx +12 -12
  193. package/dist/stories/spinner/Spinner.stories.jsx +26 -26
  194. package/dist/stories/switch/Switch.stories.jsx +12 -12
  195. package/dist/stories/tab-nav/TabNav.stories.jsx +10 -10
  196. package/dist/stories/table/Table.stories.jsx +28 -28
  197. package/dist/stories/tabs/Tabs.stories.jsx +18 -18
  198. package/dist/stories/text/Text.stories.jsx +16 -16
  199. package/dist/stories/textArea/TextArea.stories.jsx +17 -17
  200. package/dist/stories/textfield/TextField.stories.jsx +33 -33
  201. package/dist/stories/toast/Toast.stories.jsx +19 -19
  202. package/dist/stories/toggle/Toggle.stories.jsx +18 -18
  203. package/dist/stories/toggle/ToggleGroup.stories.jsx +34 -34
  204. package/dist/stories/tooltip/Tooltip.stories.jsx +14 -14
  205. package/dist/tsconfig.tsbuildinfo +1 -1
  206. package/package.json +119 -118
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
+ ```
@@ -5,7 +5,7 @@ export interface HeaderProps extends VariantProps<typeof headerVariants> {
5
5
  color?: IColor;
6
6
  }
7
7
  declare let headerVariants: (props?: ({
8
- weight?: "regular" | "medium" | "semibold" | "bold" | null | undefined;
8
+ weight?: "medium" | "regular" | "semibold" | "bold" | null | undefined;
9
9
  headers?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | null | undefined;
10
10
  color?: string | null | undefined;
11
11
  } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
@@ -48,10 +48,10 @@ export var Header = React.forwardRef(function (_a, ref) {
48
48
  var className = _a.className, children = _a.children, size = _a.size, weight = _a.weight, color = _a.color, headers = _a.headers, align = _a.align, rootProps = __rest(_a, ["className", "children", "size", "weight", "color", "headers", "align"]);
49
49
  if (!headers)
50
50
  headers = 'h1';
51
- return (<Theme>
52
- <HeadingTheme ref={ref} as={headers} size={size} align={align} className={cn('leading-normal', headerVariants({ weight: weight, color: color }), className)} {...rootProps}>
53
- {children}
54
- </HeadingTheme>
51
+ return (<Theme>
52
+ <HeadingTheme ref={ref} as={headers} size={size} align={align} className={cn('leading-normal', headerVariants({ weight: weight, color: color }), className)} {...rootProps}>
53
+ {children}
54
+ </HeadingTheme>
55
55
  </Theme>);
56
56
  });
57
57
  Header.displayName = 'Header';
@@ -9,7 +9,7 @@ export interface TextProps extends VariantProps<typeof textVariants> {
9
9
  align?: 'left' | 'center' | 'right';
10
10
  }
11
11
  declare const textVariants: (props?: ({
12
- weight?: "regular" | "medium" | "semibold" | "bold" | "light" | null | undefined;
12
+ weight?: "medium" | "regular" | "semibold" | "bold" | "light" | null | undefined;
13
13
  color?: string | null | undefined;
14
14
  } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
15
15
  export declare const Text: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & TextProps & React.RefAttributes<HTMLSpanElement>>;
@@ -37,10 +37,10 @@ var textVariants = cva('text', {
37
37
  });
38
38
  export var Text = forwardRef(function (_a, ref) {
39
39
  var className = _a.className, children = _a.children, as = _a.as, align = _a.align, weight = _a.weight, color = _a.color, size = _a.size, props = __rest(_a, ["className", "children", "as", "align", "weight", "color", "size"]);
40
- return (<Theme>
41
- <TextTheme as={as} ref={ref} size={size} align={align} className={cn(textVariants({ weight: weight, color: color }), className)} {...props}>
42
- {children}
43
- </TextTheme>
40
+ return (<Theme>
41
+ <TextTheme as={as} ref={ref} size={size} align={align} className={cn(textVariants({ weight: weight, color: color }), className)} {...props}>
42
+ {children}
43
+ </TextTheme>
44
44
  </Theme>);
45
45
  });
46
46
  Text.displayName = 'Text';
@@ -1,2 +1,3 @@
1
- export { default as Header } from '../Typography/Header';
2
- export { default as Text } from '../Typography/Text';
1
+ // Typography
2
+ export { default as Header } from './Header';
3
+ export { default as Text } from './Text';
@@ -7,7 +7,7 @@ export var metadata = {
7
7
  };
8
8
  export default function RootLayout(_a) {
9
9
  var children = _a.children;
10
- return (<html lang="en">
11
- <body className={inter.className}>{children}</body>
10
+ return (<html lang="en">
11
+ <body className={inter.className}>{children}</body>
12
12
  </html>);
13
13
  }
@@ -1,2 +1,2 @@
1
1
  import React from 'react';
2
- export default function Home(): false | React.JSX.Element;
2
+ export default function Home(): React.JSX.Element;
package/dist/app/page.jsx CHANGED
@@ -1,42 +1,6 @@
1
1
  'use client';
2
- import React, { useEffect, useState } from 'react';
3
- import Theme from './template/theme';
4
- import BadgeTemplate from './template/badgeTemplate';
5
- import ButtonTemplate from './template/buttonTemplate';
6
- import TextTemplate from './template/textTemplate';
7
- import Button from 'components/Button';
8
- import { Toast, ToastActionButton, ToastDescription } from 'components/Toast';
2
+ import React from 'react';
3
+ // import { Button } from '@lotte-innovate/ui-component-test';
9
4
  export default function Home() {
10
- var _a = useState('full'), radiusTheme = _a[0], setRadiusTheme = _a[1];
11
- var _b = useState('95%'), scalingTheme = _b[0], setScalingTheme = _b[1];
12
- var _c = useState('semibold'), fontWeightTheme = _c[0], setFontWeightTheme = _c[1];
13
- var _d = useState('blue'), colorTheme = _d[0], setColorTheme = _d[1];
14
- var _e = useState('blue'), fontColorTheme = _e[0], setFontColorTheme = _e[1];
15
- var _f = useState('light'), mode = _f[0], setMode = _f[1];
16
- var _g = useState(false), mounted = _g[0], setMounted = _g[1];
17
- var _h = useState(false), open = _h[0], setOpen = _h[1];
18
- useEffect(function () {
19
- setMounted(true);
20
- }, []);
21
- return (mounted && (<div className={"flex flex-col w-full h-auto min-h-screen ".concat(mode == 'light' ? 'bg-white text-black' : 'bg-black text-white', " p-3")}>
22
- <div onClick={function () {
23
- setMode(mode === 'light' ? 'dark' : 'light');
24
- }}>
25
- {mode === 'light' ? 'light' : 'dark'}
26
- </div>
27
- <Button onClick={function () { return setOpen(true); }} className="w-[200px]" scaling={'95%'}>
28
- toast
29
- </Button>
30
- <Toast openToast={open} setOpenToast={setOpen}>
31
- <ToastDescription>There was a problem with your request.</ToastDescription>
32
- <ToastActionButton altText="액션버튼">버튼</ToastActionButton>
33
- </Toast>
34
- <Theme setRadiusTheme={setRadiusTheme} setScalingTheme={setScalingTheme} setFontWeightTheme={setFontWeightTheme} setColorTheme={setColorTheme} setFontColorTheme={setFontColorTheme} mode={mode}/>
35
-
36
- <BadgeTemplate radiusTheme={radiusTheme} scalingTheme={scalingTheme} fontWeightTheme={fontWeightTheme} colorTheme={colorTheme} mode={mode}/>
37
-
38
- <ButtonTemplate radiusTheme={radiusTheme} scalingTheme={scalingTheme} fontWeightTheme={fontWeightTheme} colorTheme={colorTheme} mode={mode}/>
39
-
40
- <TextTemplate scalingTheme={scalingTheme} fontWeightTheme={fontWeightTheme} colorTheme={fontColorTheme} mode={mode}/>
41
- </div>));
5
+ return <div>{/* <Button>버튼</Button> */}</div>;
42
6
  }
@@ -6,77 +6,77 @@ import Badge from 'components/Badge';
6
6
  import { colorOptions } from 'color/constants';
7
7
  var BadgeTemplate = function (_a) {
8
8
  var radiusTheme = _a.radiusTheme, scalingTheme = _a.scalingTheme, fontWeightTheme = _a.fontWeightTheme, colorTheme = _a.colorTheme, mode = _a.mode;
9
- return (<div className="m-3">
10
- <div className=" font-extrabold">Badge</div>
11
- <div className="">
12
- <div className="border p-2 space-x-2">
13
- <Tabs className="">
14
- <TabList>
15
- <Tab>Theme colors</Tab>
16
- <Tab>All colors</Tab>
17
- <Tab>All sizes</Tab>
18
- </TabList>
19
- <TabPanel>
20
- <p className="">Main Color 적용 뱃지</p>
21
- <Badge radius={radiusTheme} scaling={scalingTheme} color={colorTheme}>
22
- Badge
23
- </Badge>
24
- <Badge radius={radiusTheme} scaling={scalingTheme} color={colorTheme}>
25
- outline
26
- </Badge>
27
- </TabPanel>
28
- <TabPanel>
29
- <table>
30
- <tr>
31
- <th></th>
32
- <th>default</th>
33
- <th>outline</th>
34
- </tr>
35
- {colorOptions === null || colorOptions === void 0 ? void 0 : colorOptions.map(function (color) { return (<tr key={color}>
36
- <th>{color}</th>
37
- <td>
38
- <Badge radius={radiusTheme} scaling={scalingTheme} color={color}>
39
- Badge
40
- </Badge>
41
- </td>
42
- <td>
43
- <Badge radius={radiusTheme} scaling={scalingTheme} color={color}>
44
- outline
45
- </Badge>
46
- </td>
47
- </tr>); })}
48
- </table>
49
- </TabPanel>
50
- <TabPanel>
51
- <table>
52
- <tr>
53
- <th></th>
54
- {radiusOptions.map(function (radius) { return (<th key={radius}>{radius}</th>); })}
55
- </tr>
56
- {scalingOptions.map(function (scale) { return (<tr key={scale}>
57
- <th>{scale}</th>
58
- {radiusOptions.map(function (radius) { return (<td key={radius}>
59
- <Badge scaling={scale} radius={radius} color={colorTheme}>
60
- Badge
61
- </Badge>
62
- </td>); })}
63
- </tr>); })}
64
- </table>
65
-
66
- <table>
67
- {scalingOptions.map(function (scale) { return (<tr key={scale}>
68
- <th>{scale}</th>
69
- {radiusOptions.map(function (radius) { return (<td key={radius}>
70
- <Badge scaling={scale} radius={radius} color={colorTheme}>
71
- outline
72
- </Badge>
73
- </td>); })}
74
- </tr>); })}
75
- </table>
76
- </TabPanel>
77
- </Tabs>
78
- </div>
79
- </div>
9
+ return (<div className="m-3">
10
+ <div className=" font-extrabold">Badge</div>
11
+ <div className="">
12
+ <div className="border p-2 space-x-2">
13
+ <Tabs className="">
14
+ <TabList>
15
+ <Tab>Theme colors</Tab>
16
+ <Tab>All colors</Tab>
17
+ <Tab>All sizes</Tab>
18
+ </TabList>
19
+ <TabPanel>
20
+ <p className="">Main Color 적용 뱃지</p>
21
+ <Badge radius={radiusTheme} scaling={scalingTheme} color={colorTheme}>
22
+ Badge
23
+ </Badge>
24
+ <Badge radius={radiusTheme} scaling={scalingTheme} color={colorTheme}>
25
+ outline
26
+ </Badge>
27
+ </TabPanel>
28
+ <TabPanel>
29
+ <table>
30
+ <tr>
31
+ <th></th>
32
+ <th>default</th>
33
+ <th>outline</th>
34
+ </tr>
35
+ {colorOptions === null || colorOptions === void 0 ? void 0 : colorOptions.map(function (color) { return (<tr key={color}>
36
+ <th>{color}</th>
37
+ <td>
38
+ <Badge radius={radiusTheme} scaling={scalingTheme} color={color}>
39
+ Badge
40
+ </Badge>
41
+ </td>
42
+ <td>
43
+ <Badge radius={radiusTheme} scaling={scalingTheme} color={color}>
44
+ outline
45
+ </Badge>
46
+ </td>
47
+ </tr>); })}
48
+ </table>
49
+ </TabPanel>
50
+ <TabPanel>
51
+ <table>
52
+ <tr>
53
+ <th></th>
54
+ {radiusOptions.map(function (radius) { return (<th key={radius}>{radius}</th>); })}
55
+ </tr>
56
+ {scalingOptions.map(function (scale) { return (<tr key={scale}>
57
+ <th>{scale}</th>
58
+ {radiusOptions.map(function (radius) { return (<td key={radius}>
59
+ <Badge scaling={scale} radius={radius} color={colorTheme}>
60
+ Badge
61
+ </Badge>
62
+ </td>); })}
63
+ </tr>); })}
64
+ </table>
65
+
66
+ <table>
67
+ {scalingOptions.map(function (scale) { return (<tr key={scale}>
68
+ <th>{scale}</th>
69
+ {radiusOptions.map(function (radius) { return (<td key={radius}>
70
+ <Badge scaling={scale} radius={radius} color={colorTheme}>
71
+ outline
72
+ </Badge>
73
+ </td>); })}
74
+ </tr>); })}
75
+ </table>
76
+ </TabPanel>
77
+ </Tabs>
78
+ </div>
79
+ </div>
80
80
  </div>);
81
81
  };
82
82
  export default BadgeTemplate;