@lotte-innovate/ui-component-test 0.0.10 → 0.0.11

Sign up to get free protection for your applications and to get access to all the features.
Files changed (269) hide show
  1. package/README.md +163 -163
  2. package/dist/Typography/Header/index.d.ts +1 -1
  3. package/dist/Typography/Header/{index.js → index.jsx} +5 -2
  4. package/dist/Typography/Text/{index.js → index.jsx} +6 -3
  5. package/dist/Typography/index.d.ts +2 -2
  6. package/dist/Typography/index.js +3 -3
  7. package/dist/app/layout.d.ts +1 -1
  8. package/dist/app/{layout.js → layout.jsx} +3 -2
  9. package/dist/app/page.d.ts +2 -1
  10. package/dist/app/page.jsx +42 -0
  11. package/dist/app/template/badgeTemplate.d.ts +2 -1
  12. package/dist/app/template/badgeTemplate.jsx +82 -0
  13. package/dist/app/template/buttonTemplate.d.ts +2 -1
  14. package/dist/app/template/buttonTemplate.jsx +82 -0
  15. package/dist/app/template/colorPicker.d.ts +2 -1
  16. package/dist/app/template/colorPicker.jsx +19 -0
  17. package/dist/app/template/textTemplate.d.ts +2 -1
  18. package/dist/app/template/textTemplate.jsx +72 -0
  19. package/dist/app/template/theme.d.ts +2 -2
  20. package/dist/app/template/theme.jsx +44 -0
  21. package/dist/components/Accordion/{index.js → index.jsx} +17 -5
  22. package/dist/components/AlertDialog/{AlertDialogAction.js → AlertDialogAction.jsx} +5 -4
  23. package/dist/components/AlertDialog/{AlertDialogCancel.js → AlertDialogCancel.jsx} +5 -4
  24. package/dist/components/AlertDialog/{AlertDialogContent.js → AlertDialogContent.jsx} +8 -4
  25. package/dist/components/AlertDialog/{AlertDialogDescription.js → AlertDialogDescription.jsx} +5 -15
  26. package/dist/components/AlertDialog/{AlertDialogTitle.js → AlertDialogTitle.jsx} +5 -15
  27. package/dist/components/AlertDialog/{AlertDialogTrigger.js → AlertDialogTrigger.jsx} +5 -4
  28. package/dist/components/AlertDialog/{index.js → index.jsx} +2 -14
  29. package/dist/components/AspectRatio/{index.js → index.jsx} +5 -4
  30. package/dist/components/Avatar/{index.js → index.jsx} +8 -4
  31. package/dist/components/Badge/{index.js → index.jsx} +4 -3
  32. package/dist/components/BubbleChart/index.d.ts +2 -1
  33. package/dist/components/BubbleChart/{index.js → index.jsx} +3 -3
  34. package/dist/components/Button/{index.js → index.jsx} +5 -4
  35. package/dist/components/Callout/{CalloutIcon.js → CalloutIcon.jsx} +9 -4
  36. package/dist/components/Callout/{CalloutText.js → CalloutText.jsx} +5 -15
  37. package/dist/components/Callout/{index.js → index.jsx} +7 -4
  38. package/dist/components/Card/{index.js → index.jsx} +5 -4
  39. package/dist/components/Checkbox/{index.js → index.jsx} +12 -4
  40. package/dist/components/CheckboxCard/{index.js → index.jsx} +6 -4
  41. package/dist/components/CheckboxGroup/{CheckboxGroupItem.js → CheckboxGroupItem.jsx} +6 -14
  42. package/dist/components/CheckboxGroup/{index.js → index.jsx} +6 -3
  43. package/dist/components/ContextMenu/{ContextMenuCheckboxItem.js → ContextMenuCheckboxItem.jsx} +8 -15
  44. package/dist/components/ContextMenu/{ContextMenuContent.js → ContextMenuContent.jsx} +7 -4
  45. package/dist/components/ContextMenu/{ContextMenuGroup.js → ContextMenuGroup.jsx} +4 -14
  46. package/dist/components/ContextMenu/{ContextMenuItem.js → ContextMenuItem.jsx} +6 -4
  47. package/dist/components/ContextMenu/{ContextMenuItemIndicator.js → ContextMenuItemIndicator.jsx} +5 -4
  48. package/dist/components/ContextMenu/{ContextMenuLabel.js → ContextMenuLabel.jsx} +5 -4
  49. package/dist/components/ContextMenu/{ContextMenuRadioGroup.js → ContextMenuRadioGroup.jsx} +6 -14
  50. package/dist/components/ContextMenu/{ContextMenuRadioItem.js → ContextMenuRadioItem.jsx} +8 -15
  51. package/dist/components/ContextMenu/{ContextMenuSeparator.js → ContextMenuSeparator.jsx} +5 -15
  52. package/dist/components/ContextMenu/{ContextMenuSubContent.js → ContextMenuSubContent.jsx} +10 -7
  53. package/dist/components/ContextMenu/{ContextMenuSubTrigger.js → ContextMenuSubTrigger.jsx} +10 -15
  54. package/dist/components/ContextMenu/{ContextMenuTrigger.js → ContextMenuTrigger.jsx} +5 -15
  55. package/dist/components/ContextMenu/{index.js → index.jsx} +4 -14
  56. package/dist/components/DataList/{DataListItem.js → DataListItem.jsx} +5 -4
  57. package/dist/components/DataList/{DataListLabel.js → DataListLabel.jsx} +5 -4
  58. package/dist/components/DataList/{DataListValue.js → DataListValue.jsx} +5 -4
  59. package/dist/components/DataList/{index.js → index.jsx} +7 -15
  60. package/dist/components/Dialog/{DialogAction.js → DialogAction.jsx} +5 -15
  61. package/dist/components/Dialog/{DialogCancel.js → DialogCancel.jsx} +5 -15
  62. package/dist/components/Dialog/{DialogContent.js → DialogContent.jsx} +5 -4
  63. package/dist/components/Dialog/{DialogDescription.js → DialogDescription.jsx} +5 -15
  64. package/dist/components/Dialog/{DialogSlot.js → DialogSlot.jsx} +5 -15
  65. package/dist/components/Dialog/{DialogTitle.js → DialogTitle.jsx} +5 -15
  66. package/dist/components/Dialog/{DialogTrigger.js → DialogTrigger.jsx} +4 -14
  67. package/dist/components/Dialog/{index.js → index.jsx} +4 -14
  68. package/dist/components/DoughnutChart/index.d.ts +2 -1
  69. package/dist/components/DoughnutChart/{index.js → index.jsx} +3 -3
  70. package/dist/components/DropdownMenu/{DropdonMenuRadioGroup.js → DropdonMenuRadioGroup.jsx} +6 -14
  71. package/dist/components/DropdownMenu/{DropdonMenuSubContent.js → DropdonMenuSubContent.jsx} +11 -8
  72. package/dist/components/DropdownMenu/{DropdownMenuCheckboxItem.js → DropdownMenuCheckboxItem.jsx} +8 -15
  73. package/dist/components/DropdownMenu/{DropdownMenuContent.js → DropdownMenuContent.jsx} +7 -4
  74. package/dist/components/DropdownMenu/{DropdownMenuItem.js → DropdownMenuItem.jsx} +6 -4
  75. package/dist/components/DropdownMenu/{DropdownMenuItemIndicator.js → DropdownMenuItemIndicator.jsx} +5 -4
  76. package/dist/components/DropdownMenu/{DropdownMenuLable.js → DropdownMenuLable.jsx} +5 -4
  77. package/dist/components/DropdownMenu/{DropdownMenuRadioItem.js → DropdownMenuRadioItem.jsx} +8 -15
  78. package/dist/components/DropdownMenu/{DropdownMenuSeparator.js → DropdownMenuSeparator.jsx} +3 -15
  79. package/dist/components/DropdownMenu/{DropdownMenuSub.js → DropdownMenuSub.jsx} +2 -14
  80. package/dist/components/DropdownMenu/{DropdownMenuSubTrigger.js → DropdownMenuSubTrigger.jsx} +7 -14
  81. package/dist/components/DropdownMenu/{DropdownMenuTrigger.js → DropdownMenuTrigger.jsx} +4 -14
  82. package/dist/components/DropdownMenu/{index.js → index.jsx} +2 -14
  83. package/dist/components/HoverCard/{HoverCardContent.js → HoverCardContent.jsx} +4 -3
  84. package/dist/components/HoverCard/{HoverCardTrigger.js → HoverCardTrigger.jsx} +4 -14
  85. package/dist/components/HoverCard/{index.js → index.jsx} +4 -14
  86. package/dist/components/IconButton/{index.js → index.jsx} +3 -2
  87. package/dist/components/Inset/{index.js → index.jsx} +6 -3
  88. package/dist/components/Label/{index.js → index.jsx} +3 -2
  89. package/dist/components/Menubar/{MenubarCheckboxItem.js → MenubarCheckboxItem.jsx} +8 -15
  90. package/dist/components/Menubar/{MenubarContent.js → MenubarContent.jsx} +11 -8
  91. package/dist/components/Menubar/{MenubarItem.js → MenubarItem.jsx} +6 -4
  92. package/dist/components/Menubar/{MenubarItemIndicator.js → MenubarItemIndicator.jsx} +5 -4
  93. package/dist/components/Menubar/{MenubarMenu.js → MenubarMenu.jsx} +2 -14
  94. package/dist/components/Menubar/{MenubarRadioGroup.js → MenubarRadioGroup.jsx} +6 -14
  95. package/dist/components/Menubar/{MenubarRadioItem.js → MenubarRadioItem.jsx} +8 -15
  96. package/dist/components/Menubar/{MenubarSeparator.js → MenubarSeparator.jsx} +5 -15
  97. package/dist/components/Menubar/{MenubarSub.js → MenubarSub.jsx} +2 -14
  98. package/dist/components/Menubar/{MenubarSubContent.js → MenubarSubContent.jsx} +6 -5
  99. package/dist/components/Menubar/{MenubarSubTrigger.js → MenubarSubTrigger.jsx} +8 -15
  100. package/dist/components/Menubar/{MenubarTrigger.js → MenubarTrigger.jsx} +5 -4
  101. package/dist/components/Menubar/{index.js → index.jsx} +7 -4
  102. package/dist/components/NavigationMenu/{NavigationMenuContent.js → NavigationMenuContent.jsx} +5 -4
  103. package/dist/components/NavigationMenu/NavigationMenuIndicator.jsx +22 -0
  104. package/dist/components/NavigationMenu/{NavigationMenuItem.js → NavigationMenuItem.jsx} +4 -14
  105. package/dist/components/NavigationMenu/{NavigationMenuLink.js → NavigationMenuLink.jsx} +5 -4
  106. package/dist/components/NavigationMenu/{NavigationMenuList.js → NavigationMenuList.jsx} +6 -4
  107. package/dist/components/NavigationMenu/{NavigationMenuTrigger.js → NavigationMenuTrigger.jsx} +6 -4
  108. package/dist/components/NavigationMenu/{NavigationMenuViewport.js → NavigationMenuViewport.jsx} +5 -4
  109. package/dist/components/NavigationMenu/{index.js → index.jsx} +7 -15
  110. package/dist/components/PieChart/index.d.ts +2 -1
  111. package/dist/components/PieChart/{index.js → index.jsx} +3 -3
  112. package/dist/components/Popover/{PopoverClose.js → PopoverClose.jsx} +4 -14
  113. package/dist/components/Popover/{PopoverContent.js → PopoverContent.jsx} +4 -3
  114. package/dist/components/Popover/{PopoverTrigger.js → PopoverTrigger.jsx} +4 -14
  115. package/dist/components/Popover/{index.js → index.jsx} +4 -14
  116. package/dist/components/Progress/{index.js → index.jsx} +4 -3
  117. package/dist/components/RadarChart/index.d.ts +2 -1
  118. package/dist/components/RadarChart/{index.js → index.jsx} +2 -2
  119. package/dist/components/Radio/{index.js → index.jsx} +8 -13
  120. package/dist/components/RadioCards/{RadioCardsItem.js → RadioCardsItem.jsx} +4 -14
  121. package/dist/components/RadioCards/{index.js → index.jsx} +6 -3
  122. package/dist/components/RadioGroup/{RadioGroupItem.js → RadioGroupItem.jsx} +4 -14
  123. package/dist/components/RadioGroup/{index.js → index.jsx} +6 -14
  124. package/dist/components/ScrollArea/{index.js → index.jsx} +6 -14
  125. package/dist/components/SegmentedControl/{SegmentedControlItem.js → SegmentedControlItem.jsx} +4 -14
  126. package/dist/components/SegmentedControl/{index.js → index.jsx} +5 -2
  127. package/dist/components/Select/{index.js → index.jsx} +24 -9
  128. package/dist/components/Separator/{index.js → index.jsx} +6 -3
  129. package/dist/components/Skeleton/{index.js → index.jsx} +6 -3
  130. package/dist/components/Slider/{index.js → index.jsx} +4 -3
  131. package/dist/components/Spinner/{index.js → index.jsx} +5 -2
  132. package/dist/components/TabNav/{index.js → index.jsx} +8 -14
  133. package/dist/components/Table/{index.js → index.jsx} +23 -8
  134. package/dist/components/Tabs/{index.js → index.jsx} +14 -5
  135. package/dist/components/TextArea/{index.js → index.jsx} +3 -2
  136. package/dist/components/TextField/{index.js → index.jsx} +9 -4
  137. package/dist/components/Toast/{ToastActionButton.js → ToastActionButton.jsx} +5 -4
  138. package/dist/components/Toast/{ToastDescription.js → ToastDescription.jsx} +7 -15
  139. package/dist/components/Toast/{ToastTitle.js → ToastTitle.jsx} +5 -15
  140. package/dist/components/Toast/{index.js → index.jsx} +10 -4
  141. package/dist/components/Toggle/{ToggleWithText.js → ToggleWithText.jsx} +6 -4
  142. package/dist/components/Toggle/{index.js → index.jsx} +4 -3
  143. package/dist/components/ToggleGroup/{index.js → index.jsx} +6 -3
  144. package/dist/components/ToggleGroup/{toggleGroupItem.js → toggleGroupItem.jsx} +4 -14
  145. package/dist/components/ToggleSwitch/{index.js → index.jsx} +6 -2
  146. package/dist/components/Tooltip/index.d.ts +1 -1
  147. package/dist/components/Tooltip/{index.js → index.jsx} +12 -3
  148. package/dist/components/index.d.ts +2 -0
  149. package/dist/index.d.ts +5 -2
  150. package/dist/index.js +3 -0
  151. package/dist/stories/Welcome.d.ts +2 -1
  152. package/dist/stories/Welcome.jsx +48 -0
  153. package/dist/stories/accordion/Accordion.stories.d.ts +1 -1
  154. package/dist/stories/accordion/{Accordion.stories.js → Accordion.stories.jsx} +20 -2
  155. package/dist/stories/alert-dialog/AlertDialog.stories.d.ts +1 -1
  156. package/dist/stories/alert-dialog/{AlertDialog.stories.js → AlertDialog.stories.jsx} +15 -2
  157. package/dist/stories/aspect-ratio/AspectRatio.stories.d.ts +3 -3
  158. package/dist/stories/aspect-ratio/AspectRatio.stories.jsx +106 -0
  159. package/dist/stories/avatar/Avatar.stories.d.ts +5 -5
  160. package/dist/stories/avatar/{Avatar.stories.js → Avatar.stories.jsx} +17 -6
  161. package/dist/stories/badge/Badge.stories.d.ts +6 -6
  162. package/dist/stories/badge/{Badge.stories.js → Badge.stories.jsx} +51 -7
  163. package/dist/stories/bubble-chart/BubbleChart.stories.d.ts +5 -4
  164. package/dist/stories/bubble-chart/{BubbleChart.stories.js → BubbleChart.stories.jsx} +12 -4
  165. package/dist/stories/button/Button.stories.d.ts +7 -7
  166. package/dist/stories/button/{Button.stories.js → Button.stories.jsx} +41 -8
  167. package/dist/stories/button/IconButton.stories.d.ts +4 -4
  168. package/dist/stories/button/{IconButton.stories.js → IconButton.stories.jsx} +18 -5
  169. package/dist/stories/callout/Callout.stories.d.ts +7 -7
  170. package/dist/stories/callout/Callout.stories.jsx +205 -0
  171. package/dist/stories/card/Card.stories.d.ts +5 -5
  172. package/dist/stories/card/{Card.stories.js → Card.stories.jsx} +56 -6
  173. package/dist/stories/checkbox/Checkbox.stories.d.ts +6 -6
  174. package/dist/stories/checkbox/{Checkbox.stories.js → Checkbox.stories.jsx} +63 -7
  175. package/dist/stories/checkbox/CheckboxCard.stories.d.ts +5 -5
  176. package/dist/stories/checkbox/{CheckboxCard.stories.js → CheckboxCard.stories.jsx} +41 -6
  177. package/dist/stories/checkbox/CheckboxGroup.stories.d.ts +3 -3
  178. package/dist/stories/checkbox/{CheckboxGroup.stories.js → CheckboxGroup.stories.jsx} +76 -4
  179. package/dist/stories/context-menu/ContextMenu.stories.d.ts +4 -4
  180. package/dist/stories/context-menu/{ContextMenu.stories.js → ContextMenu.stories.jsx} +74 -5
  181. package/dist/stories/data-list/DataList.stories.d.ts +4 -4
  182. package/dist/stories/data-list/DataList.stories.jsx +185 -0
  183. package/dist/stories/dialog/Dialog.stories.d.ts +1 -1
  184. package/dist/stories/dialog/{Dialog.stories.js → Dialog.stories.jsx} +25 -2
  185. package/dist/stories/doughnut-chart/DoughnutChart.stories.d.ts +5 -4
  186. package/dist/stories/doughnut-chart/{DoughnutChart.stories.js → DoughnutChart.stories.jsx} +12 -4
  187. package/dist/stories/dropdown-menu/DropdownMenu.stories.d.ts +4 -4
  188. package/dist/stories/dropdown-menu/DropdownMenu.stories.jsx +170 -0
  189. package/dist/stories/header/Header.stories.d.ts +6 -6
  190. package/dist/stories/header/{Header.stories.js → Header.stories.jsx} +26 -7
  191. package/dist/stories/hover-card/HoverCard.stories.d.ts +2 -2
  192. package/dist/stories/hover-card/{HoverCard.stories.js → HoverCard.stories.jsx} +30 -3
  193. package/dist/stories/inset/Inset.stories.d.ts +2 -2
  194. package/dist/stories/inset/{Inset.stories.js → Inset.stories.jsx} +27 -12
  195. package/dist/stories/label/Label.stories.d.ts +4 -4
  196. package/dist/stories/label/{Label.stories.js → Label.stories.jsx} +26 -5
  197. package/dist/stories/menubar/Menubar.stories.d.ts +1 -1
  198. package/dist/stories/menubar/{Menubar.stories.js → Menubar.stories.jsx} +45 -8
  199. package/dist/stories/navigation-menu/NavigationMenu.stories.d.ts +13 -13
  200. package/dist/stories/navigation-menu/{NavigationMenu.stories.js → NavigationMenu.stories.jsx} +69 -4
  201. package/dist/stories/pie-chart/PieChart.stories.d.ts +6 -5
  202. package/dist/stories/pie-chart/{PieChart.stories.js → PieChart.stories.jsx} +32 -13
  203. package/dist/stories/popover/Popover.stories.d.ts +2 -2
  204. package/dist/stories/popover/{Popover.stories.js → Popover.stories.jsx} +42 -9
  205. package/dist/stories/progress/Progress.stories.d.ts +4 -4
  206. package/dist/stories/progress/{Progress.stories.js → Progress.stories.jsx} +11 -6
  207. package/dist/stories/radar-chart/RadarChart.stories.d.ts +6 -5
  208. package/dist/stories/radar-chart/{RadarChart.stories.js → RadarChart.stories.jsx} +4 -5
  209. package/dist/stories/radio/Radio.stories.d.ts +3 -3
  210. package/dist/stories/radio/{Radio.stories.js → Radio.stories.jsx} +14 -4
  211. package/dist/stories/radio/RadioCards.stories.d.ts +4 -4
  212. package/dist/stories/radio/{RadioCards.stories.js → RadioCards.stories.jsx} +64 -5
  213. package/dist/stories/radio/RadioGroup.stories.d.ts +4 -4
  214. package/dist/stories/radio/{RadioGroup.stories.js → RadioGroup.stories.jsx} +59 -5
  215. package/dist/stories/scroll-area/ScrollArea.stories.d.ts +2 -2
  216. package/dist/stories/scroll-area/ScrollArea.stories.jsx +123 -0
  217. package/dist/stories/segmented-control/SegmentedControl.stories.d.ts +4 -4
  218. package/dist/stories/segmented-control/{SegmentedControl.stories.js → SegmentedControl.stories.jsx} +26 -5
  219. package/dist/stories/select/Select.stories.d.ts +5 -5
  220. package/dist/stories/select/{Select.stories.js → Select.stories.jsx} +67 -6
  221. package/dist/stories/separator/Separator.stories.d.ts +4 -4
  222. package/dist/stories/separator/{Separator.stories.js → Separator.stories.jsx} +29 -5
  223. package/dist/stories/skeleton/Skeleton.stories.d.ts +5 -5
  224. package/dist/stories/skeleton/{Skeleton.stories.js → Skeleton.stories.jsx} +33 -6
  225. package/dist/stories/slider/Slider.stories.d.ts +4 -4
  226. package/dist/stories/slider/{Slider.stories.js → Slider.stories.jsx} +16 -5
  227. package/dist/stories/spinner/Spinner.stories.d.ts +5 -5
  228. package/dist/stories/spinner/{Spinner.stories.js → Spinner.stories.jsx} +31 -6
  229. package/dist/stories/switch/Switch.stories.d.ts +4 -4
  230. package/dist/stories/switch/{Switch.stories.js → Switch.stories.jsx} +16 -5
  231. package/dist/stories/tab-nav/TabNav.stories.d.ts +1 -1
  232. package/dist/stories/tab-nav/{TabNav.stories.js → TabNav.stories.jsx} +11 -2
  233. package/dist/stories/table/Table.stories.d.ts +1 -1
  234. package/dist/stories/table/{Table.stories.js → Table.stories.jsx} +29 -2
  235. package/dist/stories/tabs/Tabs.stories.d.ts +1 -1
  236. package/dist/stories/tabs/{Tabs.stories.js → Tabs.stories.jsx} +19 -2
  237. package/dist/stories/text/Text.stories.d.ts +5 -5
  238. package/dist/stories/text/{Text.stories.js → Text.stories.jsx} +21 -6
  239. package/dist/stories/textArea/TextArea.stories.d.ts +5 -5
  240. package/dist/stories/textArea/{TextArea.stories.js → TextArea.stories.jsx} +22 -6
  241. package/dist/stories/textfield/TextField.stories.d.ts +5 -5
  242. package/dist/stories/textfield/{TextField.stories.js → TextField.stories.jsx} +38 -6
  243. package/dist/stories/toast/Toast.stories.d.ts +3 -3
  244. package/dist/stories/toast/{Toast.stories.js → Toast.stories.jsx} +22 -4
  245. package/dist/stories/toggle/Toggle.stories.d.ts +5 -5
  246. package/dist/stories/toggle/{Toggle.stories.js → Toggle.stories.jsx} +23 -6
  247. package/dist/stories/toggle/ToggleGroup.stories.d.ts +3 -3
  248. package/dist/stories/toggle/{ToggleGroup.stories.js → ToggleGroup.stories.jsx} +39 -6
  249. package/dist/stories/tooltip/Tooltip.stories.d.ts +3 -3
  250. package/dist/stories/tooltip/{Tooltip.stories.js → Tooltip.stories.jsx} +17 -4
  251. package/dist/tsconfig.tsbuildinfo +1 -1
  252. package/package.json +118 -120
  253. package/dist/app/page.js +0 -6
  254. package/dist/app/template/badgeTemplate.js +0 -11
  255. package/dist/app/template/buttonTemplate.js +0 -11
  256. package/dist/app/template/colorPicker.js +0 -14
  257. package/dist/app/template/textTemplate.js +0 -23
  258. package/dist/app/template/theme.js +0 -12
  259. package/dist/components/Input/Input.stories.d.ts +0 -77
  260. package/dist/components/Input/Input.stories.js +0 -74
  261. package/dist/components/Input/index.d.ts +0 -14
  262. package/dist/components/Input/index.js +0 -53
  263. package/dist/components/NavigationMenu/NavigationMenuIndicator.js +0 -31
  264. package/dist/stories/Welcome.js +0 -30
  265. package/dist/stories/aspect-ratio/AspectRatio.stories.js +0 -78
  266. package/dist/stories/callout/Callout.stories.js +0 -104
  267. package/dist/stories/data-list/DataList.stories.js +0 -87
  268. package/dist/stories/dropdown-menu/DropdownMenu.stories.js +0 -75
  269. package/dist/stories/scroll-area/ScrollArea.stories.js +0 -63
package/package.json CHANGED
@@ -1,120 +1,118 @@
1
- {
2
- "name": "@lotte-innovate/ui-component-test",
3
- "description": "Lotte UI Library",
4
- "version": "0.0.10",
5
- "private": false,
6
- "type": "module",
7
- "files": [
8
- "dist"
9
- ],
10
- "main": "dist/index.js",
11
- "module": "dist/index.js",
12
- "types": "dist/index.d.ts",
13
- "publishConfig": {
14
- "access": "public"
15
- },
16
- "browser": "./browser/specific/main.js",
17
- "babel": {
18
- "presets": [
19
- "@babel/preset-react",
20
- "@babel/preset-env"
21
- ]
22
- },
23
- "browserslist": {
24
- "production": [
25
- ">0.2%",
26
- "not dead",
27
- "not op_mini all"
28
- ],
29
- "development": [
30
- "last 1 chrome version",
31
- "last 1 firefox version",
32
- "last 1 safari version"
33
- ]
34
- },
35
- "scripts": {
36
- "dev": "next dev",
37
- "build": "next build && tsc",
38
- "prepare": "next build",
39
- "start": "next start",
40
- "lint": "next lint",
41
- "storybook": "cross-env NODE_OPTIONS='--max-old-space-size=8192' storybook dev -p 6006",
42
- "build-storybook": "storybook build",
43
- "publish:npm": "rimraf dist && mkdir dist && tsc",
44
- "chromatic": "cross-env npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN"
45
- },
46
- "dependencies": {
47
- "@babel/runtime": "^7.24.7",
48
- "@babel/runtime-corejs3": "^7.24.7",
49
- "@radix-ui/colors": "^3.0.0",
50
- "@radix-ui/react-accordion": "^1.2.0",
51
- "@radix-ui/react-checkbox": "^1.0.4",
52
- "@radix-ui/react-dialog": "^1.1.1",
53
- "@radix-ui/react-dropdown-menu": "^2.1.1",
54
- "@radix-ui/react-hover-card": "^1.1.1",
55
- "@radix-ui/react-icons": "^1.3.0",
56
- "@radix-ui/react-label": "^2.1.0",
57
- "@radix-ui/react-menubar": "^1.1.1",
58
- "@radix-ui/react-navigation-menu": "^1.2.0",
59
- "@radix-ui/react-popover": "1.0.7",
60
- "@radix-ui/react-radio-group": "^1.1.3",
61
- "@radix-ui/react-select": "^2.1.1",
62
- "@radix-ui/react-separator": "^1.1.0",
63
- "@radix-ui/react-slider": "^1.2.0",
64
- "@radix-ui/react-switch": "^1.1.0",
65
- "@radix-ui/react-tabs": "^1.1.0",
66
- "@radix-ui/react-toast": "^1.2.1",
67
- "@radix-ui/react-tooltip": "^1.1.1",
68
- "@radix-ui/themes": "^3.1.1",
69
- "@stitches/core": "^1.2.8",
70
- "@stitches/react": "^1.2.8",
71
- "@storybook/addon-a11y": "^8.0.10",
72
- "@storybook/addons": "^7.6.17",
73
- "chart.js": "^4.4.4",
74
- "chartjs-plugin-datalabels": "^2.2.0",
75
- "class-variance-authority": "^0.7.0",
76
- "clsx": "^2.1.0",
77
- "cross-env": "^7.0.3",
78
- "dotenv": "^16.4.5",
79
- "lucide-react": "^0.364.0",
80
- "next": "14.1.4",
81
- "react": "^18",
82
- "react-chartjs-2": "^5.2.0",
83
- "react-dom": "^18",
84
- "react-tabs": "^6.0.2",
85
- "storybook-addon-deep-controls": "^0.7.1",
86
- "storybook-dark-mode": "^4.0.2",
87
- "tailwind-merge": "^2.2.2"
88
- },
89
- "devDependencies": {
90
- "@babel/cli": "^7.24.7",
91
- "@babel/core": "^7.24.7",
92
- "@babel/plugin-transform-runtime": "^7.24.7",
93
- "@babel/preset-env": "^7.25.4",
94
- "@babel/preset-react": "^7.24.7",
95
- "@babel/preset-typescript": "^7.24.7",
96
- "@chromatic-com/storybook": "^1.2.25",
97
- "@storybook/addon-essentials": "^8.0.4",
98
- "@storybook/addon-interactions": "^8.0.4",
99
- "@storybook/addon-links": "^8.0.4",
100
- "@storybook/addon-styling-webpack": "^1.0.0",
101
- "@storybook/blocks": "^8.0.4",
102
- "@storybook/nextjs": "^8.0.4",
103
- "@storybook/react": "^8.0.4",
104
- "@storybook/test": "^8.0.4",
105
- "@storybook/theming": "^8.2.4",
106
- "@types/node": "^20",
107
- "@types/react": "^18",
108
- "@types/react-dom": "^18",
109
- "autoprefixer": "^10.0.1",
110
- "chromatic": "^11.5.4",
111
- "eslint": "^8",
112
- "eslint-config-next": "14.1.4",
113
- "eslint-plugin-storybook": "^0.8.0",
114
- "postcss": "^8",
115
- "rimraf": "^6.0.1",
116
- "storybook": "^8.2.6",
117
- "tailwindcss": "^3.3.0",
118
- "typescript": "^5"
119
- }
120
- }
1
+ {
2
+ "name": "@lotte-innovate/ui-component-test",
3
+ "description": "Lotte UI Library",
4
+ "version": "0.0.11",
5
+ "private": false,
6
+ "type": "module",
7
+ "files": [
8
+ "dist"
9
+ ],
10
+ "main": "dist/index.js",
11
+ "types": "dist/index.d.ts",
12
+ "publishConfig": {
13
+ "access": "public"
14
+ },
15
+ "browser": "./browser/specific/main.js",
16
+ "babel": {
17
+ "presets": [
18
+ "@babel/preset-react"
19
+ ]
20
+ },
21
+ "browserslist": {
22
+ "production": [
23
+ ">0.2%",
24
+ "not dead",
25
+ "not op_mini all"
26
+ ],
27
+ "development": [
28
+ "last 1 chrome version",
29
+ "last 1 firefox version",
30
+ "last 1 safari version"
31
+ ]
32
+ },
33
+ "scripts": {
34
+ "dev": "next dev",
35
+ "build": "tsc",
36
+ "prepare": "next build",
37
+ "start": "next start",
38
+ "lint": "next lint",
39
+ "storybook": "cross-env NODE_OPTIONS='--max-old-space-size=8192' storybook dev -p 6006",
40
+ "build-storybook": "storybook build",
41
+ "publish:npm": "rimraf dist && mkdir dist && tsc",
42
+ "chromatic": "cross-env npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN"
43
+ },
44
+ "dependencies": {
45
+ "@babel/runtime": "^7.24.7",
46
+ "@babel/runtime-corejs3": "^7.24.7",
47
+ "@radix-ui/colors": "^3.0.0",
48
+ "@radix-ui/react-accordion": "^1.2.0",
49
+ "@radix-ui/react-checkbox": "^1.0.4",
50
+ "@radix-ui/react-dialog": "^1.1.1",
51
+ "@radix-ui/react-dropdown-menu": "^2.1.1",
52
+ "@radix-ui/react-hover-card": "^1.1.1",
53
+ "@radix-ui/react-icons": "^1.3.0",
54
+ "@radix-ui/react-label": "^2.1.0",
55
+ "@radix-ui/react-menubar": "^1.1.1",
56
+ "@radix-ui/react-navigation-menu": "^1.2.0",
57
+ "@radix-ui/react-popover": "1.0.7",
58
+ "@radix-ui/react-radio-group": "^1.1.3",
59
+ "@radix-ui/react-select": "^2.1.1",
60
+ "@radix-ui/react-separator": "^1.1.0",
61
+ "@radix-ui/react-slider": "^1.2.0",
62
+ "@radix-ui/react-switch": "^1.1.0",
63
+ "@radix-ui/react-tabs": "^1.1.0",
64
+ "@radix-ui/react-toast": "^1.2.1",
65
+ "@radix-ui/react-tooltip": "^1.1.1",
66
+ "@radix-ui/themes": "^3.1.1",
67
+ "@stitches/core": "^1.2.8",
68
+ "@stitches/react": "^1.2.8",
69
+ "@storybook/addon-a11y": "^8.0.10",
70
+ "@storybook/addons": "^7.6.17",
71
+ "chart.js": "^4.4.4",
72
+ "chartjs-plugin-datalabels": "^2.2.0",
73
+ "class-variance-authority": "^0.7.0",
74
+ "clsx": "^2.1.0",
75
+ "cross-env": "^7.0.3",
76
+ "dotenv": "^16.4.5",
77
+ "lucide-react": "^0.364.0",
78
+ "next": "14.1.4",
79
+ "react": "^18",
80
+ "react-chartjs-2": "^5.2.0",
81
+ "react-dom": "^18",
82
+ "react-tabs": "^6.0.2",
83
+ "storybook-addon-deep-controls": "^0.7.1",
84
+ "storybook-dark-mode": "^4.0.2",
85
+ "tailwind-merge": "^2.2.2"
86
+ },
87
+ "devDependencies": {
88
+ "@babel/cli": "^7.24.7",
89
+ "@babel/core": "^7.24.7",
90
+ "@babel/plugin-transform-runtime": "^7.24.7",
91
+ "@babel/preset-env": "^7.24.7",
92
+ "@babel/preset-react": "^7.24.7",
93
+ "@babel/preset-typescript": "^7.24.7",
94
+ "@chromatic-com/storybook": "^1.2.25",
95
+ "@storybook/addon-essentials": "^8.0.4",
96
+ "@storybook/addon-interactions": "^8.0.4",
97
+ "@storybook/addon-links": "^8.0.4",
98
+ "@storybook/addon-styling-webpack": "^1.0.0",
99
+ "@storybook/blocks": "^8.0.4",
100
+ "@storybook/nextjs": "^8.0.4",
101
+ "@storybook/react": "^8.0.4",
102
+ "@storybook/test": "^8.0.4",
103
+ "@storybook/theming": "^8.2.4",
104
+ "@types/node": "^20",
105
+ "@types/react": "^18",
106
+ "@types/react-dom": "^18",
107
+ "autoprefixer": "^10.0.1",
108
+ "chromatic": "^11.5.4",
109
+ "eslint": "^8",
110
+ "eslint-config-next": "14.1.4",
111
+ "eslint-plugin-storybook": "^0.8.0",
112
+ "postcss": "^8",
113
+ "rimraf": "^6.0.1",
114
+ "storybook": "^8.2.6",
115
+ "tailwindcss": "^3.3.0",
116
+ "typescript": "^5"
117
+ }
118
+ }
package/dist/app/page.js DELETED
@@ -1,6 +0,0 @@
1
- 'use client';
2
- import { jsx as _jsx } from "react/jsx-runtime";
3
- // import { Button } from '@lotte-innovate/ui-component-test';
4
- export default function Home() {
5
- return _jsx("div", {});
6
- }
@@ -1,11 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
3
- import 'react-tabs/style/react-tabs.css';
4
- import { radiusOptions, scalingOptions } from '../../constants';
5
- import Badge from 'components/Badge';
6
- import { colorOptions } from 'color/constants';
7
- var BadgeTemplate = function (_a) {
8
- var radiusTheme = _a.radiusTheme, scalingTheme = _a.scalingTheme, fontWeightTheme = _a.fontWeightTheme, colorTheme = _a.colorTheme, mode = _a.mode;
9
- return (_jsxs("div", { className: "m-3", children: [_jsx("div", { className: " font-extrabold", children: "Badge" }), _jsx("div", { className: "", children: _jsx("div", { className: "border p-2 space-x-2", children: _jsxs(Tabs, { className: "", children: [_jsxs(TabList, { children: [_jsx(Tab, { children: "Theme colors" }), _jsx(Tab, { children: "All colors" }), _jsx(Tab, { children: "All sizes" })] }), _jsxs(TabPanel, { children: [_jsx("p", { className: "", children: "Main Color \uC801\uC6A9 \uBC43\uC9C0" }), _jsx(Badge, { radius: radiusTheme, scaling: scalingTheme, color: colorTheme, children: "Badge" }), _jsx(Badge, { radius: radiusTheme, scaling: scalingTheme, color: colorTheme, children: "outline" })] }), _jsx(TabPanel, { children: _jsxs("table", { children: [_jsxs("tr", { children: [_jsx("th", {}), _jsx("th", { children: "default" }), _jsx("th", { children: "outline" })] }), colorOptions === null || colorOptions === void 0 ? void 0 : colorOptions.map(function (color) { return (_jsxs("tr", { children: [_jsx("th", { children: color }), _jsx("td", { children: _jsx(Badge, { radius: radiusTheme, scaling: scalingTheme, color: color, children: "Badge" }) }), _jsx("td", { children: _jsx(Badge, { radius: radiusTheme, scaling: scalingTheme, color: color, children: "outline" }) })] }, color)); })] }) }), _jsxs(TabPanel, { children: [_jsxs("table", { children: [_jsxs("tr", { children: [_jsx("th", {}), radiusOptions.map(function (radius) { return (_jsx("th", { children: radius }, radius)); })] }), scalingOptions.map(function (scale) { return (_jsxs("tr", { children: [_jsx("th", { children: scale }), radiusOptions.map(function (radius) { return (_jsx("td", { children: _jsx(Badge, { scaling: scale, radius: radius, color: colorTheme, children: "Badge" }) }, radius)); })] }, scale)); })] }), _jsx("table", { children: scalingOptions.map(function (scale) { return (_jsxs("tr", { children: [_jsx("th", { children: scale }), radiusOptions.map(function (radius) { return (_jsx("td", { children: _jsx(Badge, { scaling: scale, radius: radius, color: colorTheme, children: "outline" }) }, radius)); })] }, scale)); }) })] })] }) }) })] }));
10
- };
11
- export default BadgeTemplate;
@@ -1,11 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
3
- import 'react-tabs/style/react-tabs.css';
4
- import { radiusOptions, scalingOptions } from '../../constants';
5
- import Button from 'components/Button';
6
- import { colorOptions } from 'color/constants';
7
- var ButtonTemplate = function (_a) {
8
- var radiusTheme = _a.radiusTheme, scalingTheme = _a.scalingTheme, fontWeightTheme = _a.fontWeightTheme, colorTheme = _a.colorTheme, mode = _a.mode;
9
- return (_jsxs("div", { className: "m-3", children: [_jsx("div", { className: " font-extrabold", children: "Button" }), _jsx("div", { className: "", children: _jsx("div", { className: "border p-2 space-x-2", children: _jsxs(Tabs, { className: "", children: [_jsxs(TabList, { children: [_jsx(Tab, { children: "Theme colors" }), _jsx(Tab, { children: "All colors" }), _jsx(Tab, { children: "All sizes" })] }), _jsxs(TabPanel, { children: [_jsx("p", { className: "", children: "Main Color \uC801\uC6A9 Button" }), _jsx(Button, { radius: radiusTheme, scaling: scalingTheme, weight: fontWeightTheme, color: colorTheme, children: "Button" }), _jsx(Button, { radius: radiusTheme, scaling: scalingTheme, weight: fontWeightTheme, color: colorTheme, children: "outline" })] }), _jsx(TabPanel, { children: _jsxs("table", { children: [_jsxs("tr", { children: [_jsx("th", {}), _jsx("th", { children: "default" }), _jsx("th", { children: "outline" })] }), colorOptions === null || colorOptions === void 0 ? void 0 : colorOptions.map(function (color) { return (_jsxs("tr", { children: [_jsx("th", { children: color }), _jsx("td", { children: _jsx(Button, { radius: radiusTheme, scaling: scalingTheme, weight: fontWeightTheme, color: color, children: "Button" }) }), _jsx("td", { children: _jsx(Button, { radius: radiusTheme, scaling: scalingTheme, weight: fontWeightTheme, color: color, children: "outline" }) })] }, color)); })] }) }), _jsxs(TabPanel, { children: [_jsxs("table", { children: [_jsxs("tr", { children: [_jsx("th", {}), radiusOptions.map(function (radius) { return (_jsx("th", { children: radius }, radius)); })] }), scalingOptions.map(function (scale) { return (_jsxs("tr", { children: [_jsx("th", { children: scale }), radiusOptions.map(function (radius) { return (_jsx("td", { children: _jsx(Button, { scaling: scale, radius: radius, weight: fontWeightTheme, color: colorTheme, children: "Button" }) }, radius)); })] }, scale)); })] }), _jsx("table", { children: scalingOptions.map(function (scale) { return (_jsxs("tr", { children: [_jsx("th", { children: scale }), radiusOptions.map(function (radius) { return (_jsx("td", { children: _jsx(Button, { scaling: scale, radius: radius, weight: fontWeightTheme, color: colorTheme, children: "outline" }) }, radius)); })] }, scale)); }) })] })] }) }) })] }));
10
- };
11
- export default ButtonTemplate;
@@ -1,14 +0,0 @@
1
- 'use client';
2
- import { jsx as _jsx } from "react/jsx-runtime";
3
- import { bgColorStyle } from '../../constants';
4
- var ColorPicker = function (_a) {
5
- var setColorTheme = _a.setColorTheme, mode = _a.mode;
6
- var handleColorClick = function (color) {
7
- setColorTheme(color);
8
- };
9
- return (_jsx("div", { children: _jsx("div", { className: "flex flex-row flex-wrap gap-2", children: Object.entries(bgColorStyle).map(function (_a) {
10
- var key = _a[0], value = _a[1];
11
- return (_jsx("button", { className: "w-12 p-2 rounded-full text-xs cursor-pointer hover:border-gray-900 ".concat(value, " text-white hover:text-black"), children: key.replace('Dark', '') }, key));
12
- }) }) }));
13
- };
14
- export default ColorPicker;
@@ -1,23 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
3
- import 'react-tabs/style/react-tabs.css';
4
- import { scalingOptions, weightOptions } from '../../constants';
5
- import { Text } from '../../Typography/Text';
6
- import { colorOptions } from 'color/constants';
7
- var TextTemplate = function (_a) {
8
- var scalingTheme = _a.scalingTheme, fontWeightTheme = _a.fontWeightTheme, colorTheme = _a.colorTheme, mode = _a.mode;
9
- return (_jsxs("div", { className: "m-3", children: [_jsx("div", { className: " font-extrabold", children: "Text" }), _jsx("div", { className: "", children: _jsx("div", { className: "border p-2 space-x-2", children: _jsxs(Tabs, { className: "", children: [_jsxs(TabList, { children: [_jsx(Tab, { children: "All colors" }), _jsx(Tab, { children: "All sizes" }), _jsx(Tab, { children: "All weights" })] }), _jsx(TabPanel, { children: _jsx("table", { children: _jsx("tbody", { children: colorOptions === null || colorOptions === void 0 ? void 0 : colorOptions.map(function (color) { return (_jsxs("tr", { children: [_jsx("td", { children: color }), _jsx("td", { children: _jsx(Text
10
- // scaling={scalingTheme}
11
- , {
12
- // scaling={scalingTheme}
13
- weight: fontWeightTheme, color: color, children: "The quick brown fox jumps over the lazy dog." }) })] }, color)); }) }) }) }), _jsx(TabPanel, { children: _jsx("table", { children: _jsx("tbody", { children: scalingOptions === null || scalingOptions === void 0 ? void 0 : scalingOptions.map(function (scale) { return (_jsxs("tr", { children: [_jsx("td", { children: scale }), _jsx("td", { children: _jsx(Text
14
- // scaling={scale}
15
- , {
16
- // scaling={scale}
17
- weight: fontWeightTheme, color: colorTheme, children: "The quick brown fox jumps over the lazy dog." }) })] }, scale)); }) }) }) }), _jsx(TabPanel, { children: _jsx("table", { children: _jsx("tbody", { children: weightOptions === null || weightOptions === void 0 ? void 0 : weightOptions.map(function (weight) { return (_jsxs("tr", { children: [_jsx("td", { children: weight }), _jsx("td", { children: _jsx(Text
18
- // scaling={scalingTheme}
19
- , {
20
- // scaling={scalingTheme}
21
- weight: weight, color: colorTheme, children: "The quick brown fox jumps over the lazy dog." }) })] }, weight)); }) }) }) })] }) }) })] }));
22
- };
23
- export default TextTemplate;
@@ -1,12 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import ColorPicker from './colorPicker';
3
- import { radiusOptions, scalingOptions, weightOptions } from '../../constants';
4
- var Theme = function (_a) {
5
- var setRadiusTheme = _a.setRadiusTheme, setScalingTheme = _a.setScalingTheme, setFontWeightTheme = _a.setFontWeightTheme, setColorTheme = _a.setColorTheme, setFontColorTheme = _a.setFontColorTheme, mode = _a.mode;
6
- var setColor = function (color) {
7
- setColorTheme(color);
8
- setFontColorTheme(color);
9
- };
10
- return (_jsxs("div", { className: "flex flex-col p-3", children: [_jsx("p", { className: "text-2xl font-bold", children: "Themes" }), _jsxs("div", { className: "flex flex-col text-xl gap-2", children: ["Accent Color", _jsx(ColorPicker, { mode: mode, setColorTheme: setColor })] }), _jsxs("div", { className: "flex gap-4", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx("p", { children: "Radius" }), _jsx("select", { className: "border border-gray-900", onChange: function (e) { return setRadiusTheme(e.target.value); }, defaultValue: 'full', children: radiusOptions.map(function (item) { return (_jsx("option", { value: item, children: item }, item)); }) })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx("p", { children: "Scaling" }), _jsx("select", { className: "border border-gray-900", onChange: function (e) { return setScalingTheme(e.target.value); }, children: scalingOptions.map(function (item) { return (_jsx("option", { value: item, children: item }, item)); }) })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx("p", { children: "Font Weight" }), _jsx("select", { className: "border border-gray-900", onChange: function (e) { return setFontWeightTheme(e.target.value); }, defaultValue: 'semibold', children: weightOptions.map(function (item) { return (_jsx("option", { value: item, children: item }, item)); }) })] })] })] }));
11
- };
12
- export default Theme;
@@ -1,77 +0,0 @@
1
- /// <reference types="react" />
2
- import type { StoryObj } from '@storybook/react';
3
- import { InputProps } from './index';
4
- import { IRadius, IScaling, IWeight } from '../../types';
5
- declare const meta: {
6
- title: string;
7
- component: ({ radius, scaling, weight, color, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
8
- parameters: {
9
- layout: string;
10
- themes: {
11
- themeOverride: string;
12
- };
13
- docs: {
14
- page: null;
15
- description: {
16
- component: string;
17
- };
18
- };
19
- };
20
- tags: string[];
21
- argTypes: {
22
- radius: {
23
- options: IRadius[];
24
- control: {
25
- type: string;
26
- };
27
- description: string;
28
- defaultValue: {
29
- summary: string;
30
- };
31
- };
32
- scaling: {
33
- options: IScaling[];
34
- control: {
35
- type: string;
36
- };
37
- description: string;
38
- defaultValue: {
39
- summary: string;
40
- };
41
- };
42
- weight: {
43
- options: IWeight[];
44
- control: {
45
- type: string;
46
- };
47
- description: string;
48
- defaultValue: {
49
- summary: string;
50
- };
51
- };
52
- onChange: {
53
- table: {
54
- category: string;
55
- };
56
- };
57
- color: {
58
- options: import("../../types").IColor[];
59
- description: string;
60
- defaultValue: {
61
- summary: string;
62
- };
63
- control: {
64
- type: string;
65
- };
66
- };
67
- };
68
- args: {
69
- onClick: import("@vitest/spy").Mock<[event: import("react").MouseEvent<HTMLInputElement, MouseEvent>], void>;
70
- };
71
- };
72
- export default meta;
73
- type Story = StoryObj<typeof meta>;
74
- export declare const Default: Story;
75
- export declare const Radius: (args: InputProps) => import("react/jsx-runtime").JSX.Element;
76
- export declare const Scaling: (args: InputProps) => import("react/jsx-runtime").JSX.Element;
77
- export declare const Weight: (args: InputProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,74 +0,0 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
- import { jsx as _jsx } from "react/jsx-runtime";
13
- import { fn } from '@storybook/test';
14
- import { Input } from './index';
15
- import { radiusOptions, scalingOptions, weightOptions } from '../../../src/constants';
16
- import { colorOptions } from 'color/constants';
17
- var meta = {
18
- title: '작업중/Input',
19
- component: Input,
20
- parameters: {
21
- layout: 'centered',
22
- themes: {
23
- themeOverride: 'dark',
24
- },
25
- docs: {
26
- page: null,
27
- description: {
28
- component: '',
29
- },
30
- },
31
- },
32
- tags: ['autodocs'],
33
- argTypes: {
34
- radius: {
35
- options: radiusOptions,
36
- control: { type: 'select' },
37
- description: '둥글기',
38
- defaultValue: { summary: 'small' },
39
- },
40
- scaling: {
41
- options: scalingOptions,
42
- control: { type: 'select' },
43
- description: '크기',
44
- defaultValue: { summary: '100%' },
45
- },
46
- weight: {
47
- options: weightOptions,
48
- control: { type: 'select' },
49
- description: '폰트 두께',
50
- defaultValue: { summary: 'normal' },
51
- },
52
- onChange: {
53
- table: {
54
- category: 'EVENT HANDLER',
55
- },
56
- },
57
- color: {
58
- options: colorOptions,
59
- description: 'background color',
60
- defaultValue: { summary: 'blue' },
61
- control: { type: 'select' },
62
- },
63
- },
64
- args: {
65
- onClick: fn(),
66
- },
67
- };
68
- export default meta;
69
- export var Default = {
70
- args: {},
71
- };
72
- export var Radius = function (args) { return (_jsx("div", { className: "flex space-x-2", children: radiusOptions.map(function (radius) { return (_jsx(Input, __assign({}, args, { radius: radius }), radius)); }) })); };
73
- export var Scaling = function (args) { return (_jsx("div", { className: "flex items-center space-x-2", children: scalingOptions.map(function (scaling) { return (_jsx(Input, __assign({}, args, { scaling: scaling }), scaling)); }) })); };
74
- export var Weight = function (args) { return (_jsx("div", { className: "flex items-center space-x-2", children: weightOptions.map(function (weight) { return (_jsx(Input, __assign({}, args, { weight: weight }), weight)); }) })); };
@@ -1,14 +0,0 @@
1
- import React from 'react';
2
- import { VariantProps } from 'class-variance-authority';
3
- import { IColor } from '../../types';
4
- export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof inputVariants> {
5
- color?: IColor;
6
- }
7
- declare const inputVariants: (props?: ({
8
- radius?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
9
- scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
10
- weight?: "medium" | "regular" | "semibold" | "bold" | null | undefined;
11
- color?: string | null | undefined;
12
- } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
13
- export declare const Input: ({ radius, scaling, weight, color, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
14
- export default Input;
@@ -1,53 +0,0 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
- var __rest = (this && this.__rest) || function (s, e) {
13
- var t = {};
14
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
15
- t[p] = s[p];
16
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
17
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
19
- t[p[i]] = s[p[i]];
20
- }
21
- return t;
22
- };
23
- import { jsx as _jsx } from "react/jsx-runtime";
24
- import { cva } from 'class-variance-authority';
25
- import { cn } from '../../utils/utils';
26
- import { bgColorStyle, radiusVariants, weightVariants } from '../../constants';
27
- var inputVariants = cva('inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', {
28
- variants: {
29
- radius: __assign({}, radiusVariants['base']),
30
- scaling: {
31
- '90%': 'text-xs py-1 px-2',
32
- '95%': 'text-sm py-1 px-2',
33
- '100%': 'text-base py-2 px-6',
34
- '105%': 'text-lg py-3 px-6',
35
- '110%': 'text-xl py-3 px-6',
36
- },
37
- weight: __assign({}, weightVariants),
38
- color: bgColorStyle(),
39
- },
40
- defaultVariants: {
41
- radius: 'small',
42
- },
43
- });
44
- export var Input = function (_a) {
45
- var radius = _a.radius, scaling = _a.scaling, weight = _a.weight, color = _a.color, props = __rest(_a, ["radius", "scaling", "weight", "color"]);
46
- return (_jsx("input", __assign({ className: cn(inputVariants({
47
- radius: radius,
48
- scaling: scaling,
49
- weight: weight,
50
- color: color,
51
- })) }, props)));
52
- };
53
- export default Input;
@@ -1,31 +0,0 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
- var __rest = (this && this.__rest) || function (s, e) {
13
- var t = {};
14
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
15
- t[p] = s[p];
16
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
17
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
19
- t[p[i]] = s[p[i]];
20
- }
21
- return t;
22
- };
23
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
24
- import { forwardRef } from 'react';
25
- import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
26
- import { cn } from 'utils/utils';
27
- export var NavigationMenuIndicator = forwardRef(function (_a, ref) {
28
- var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
29
- return (_jsxs(NavigationMenuPrimitive.Indicator, __assign({ ref: ref, className: "flex z-[1] top-full h-[10px] items-end justify-center overflow-hidden\n data-[state=visible]:animate-fadeIn data-[state=hidden]:animate-fadeOut \n transition-[width,transform_250ms_ease]" }, props, { children: [_jsx("div", { className: cn("relative top-[70%] h-[10px] w-[10px] rotate-[45deg] rounded-tl-[2px] \n bg-white dark:bg-slateDark-2 shadow-slate-4 shadow dark:shadow-slateDark-4", className) }), children] })));
30
- });
31
- NavigationMenuIndicator.displayName = 'NavigationMenuIndicator';
@@ -1,30 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useEffect } from 'react';
3
- import Landing from './assets/landing.svg';
4
- import Logo from './assets/logo.svg';
5
- import Figma from './assets/figma.svg';
6
- import Gitlab from './assets/gitlab.svg';
7
- import Image from 'next/image';
8
- import Button from 'components/Button';
9
- var addParentClass = function () {
10
- var elements = document.querySelectorAll('.welcome-wrap');
11
- elements.forEach(function (element) {
12
- var parent = element.parentElement.parentElement;
13
- if (parent) {
14
- parent.classList.add('welcome-wrap-layout');
15
- }
16
- });
17
- };
18
- var Welcome = function () {
19
- useEffect(function () {
20
- addParentClass();
21
- }, []);
22
- var navigateToGitlab = function () {
23
- window.open('http://s-gitlab.ldcc.co.kr/l-ui/ui-component', '_blank');
24
- };
25
- var navigateToFigma = function () {
26
- window.open('https://www.figma.com/design/tlcB7UYdvUNzPk5T66FqLf/UI-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%EA%B3%B5%EC%9C%A0%EC%9A%A9?node-id=0-1&t=k7fMSU17MKc42lzy-0', '_blank');
27
- };
28
- return (_jsxs("div", { className: "welcome-wrap", children: [_jsxs("div", { children: [_jsxs("div", { children: [_jsx(Image, { className: "w-[150px] h-auto", layout: "fixed", src: Logo, alt: "LOTTE INNOVATE" }), _jsx("p", { className: "welcome-sub", children: "Style Guide UI Kit" }), _jsx("h1", { className: "welcome-title", children: "LOTTE UI Library" })] }), _jsxs("div", { className: "flex gap-2 pt-[40px]", children: [_jsxs(Button, { color: "slate", radius: "medium", scaling: "100%", weight: "medium", size: 'x-large', appearance: 'outline', onClick: navigateToGitlab, className: "relative z-10", children: [_jsx(Image, { src: Gitlab, width: 0, height: 0, alt: "Gitlab", className: "mr-2" }), "GitLab"] }), _jsxs(Button, { color: "slate", radius: "medium", scaling: "100%", weight: "medium", size: 'x-large', appearance: 'outline', onClick: navigateToFigma, className: "relative z-10", children: [_jsx(Image, { src: Figma, width: 0, height: 0, alt: "Figma", className: "mr-2" }), "Figma"] })] })] }), _jsx(Image, { className: "absolute bottom-0 w-auto", src: Landing, width: 0, height: 0, alt: "\uCEF4\uD3EC\uB10C\uD2B8 \uC774\uBBF8\uC9C0\uC785\uB2C8\uB2E4." })] }));
29
- };
30
- export default Welcome;