@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.
- package/README.md +163 -163
- package/dist/Typography/Header/index.d.ts +1 -1
- package/dist/Typography/Header/{index.js → index.jsx} +5 -2
- package/dist/Typography/Text/{index.js → index.jsx} +6 -3
- package/dist/Typography/index.d.ts +2 -2
- package/dist/Typography/index.js +3 -3
- package/dist/app/layout.d.ts +1 -1
- package/dist/app/{layout.js → layout.jsx} +3 -2
- package/dist/app/page.d.ts +2 -1
- package/dist/app/page.jsx +42 -0
- package/dist/app/template/badgeTemplate.d.ts +2 -1
- package/dist/app/template/badgeTemplate.jsx +82 -0
- package/dist/app/template/buttonTemplate.d.ts +2 -1
- package/dist/app/template/buttonTemplate.jsx +82 -0
- package/dist/app/template/colorPicker.d.ts +2 -1
- package/dist/app/template/colorPicker.jsx +19 -0
- package/dist/app/template/textTemplate.d.ts +2 -1
- package/dist/app/template/textTemplate.jsx +72 -0
- package/dist/app/template/theme.d.ts +2 -2
- package/dist/app/template/theme.jsx +44 -0
- package/dist/components/Accordion/{index.js → index.jsx} +17 -5
- package/dist/components/AlertDialog/{AlertDialogAction.js → AlertDialogAction.jsx} +5 -4
- package/dist/components/AlertDialog/{AlertDialogCancel.js → AlertDialogCancel.jsx} +5 -4
- package/dist/components/AlertDialog/{AlertDialogContent.js → AlertDialogContent.jsx} +8 -4
- package/dist/components/AlertDialog/{AlertDialogDescription.js → AlertDialogDescription.jsx} +5 -15
- package/dist/components/AlertDialog/{AlertDialogTitle.js → AlertDialogTitle.jsx} +5 -15
- package/dist/components/AlertDialog/{AlertDialogTrigger.js → AlertDialogTrigger.jsx} +5 -4
- package/dist/components/AlertDialog/{index.js → index.jsx} +2 -14
- package/dist/components/AspectRatio/{index.js → index.jsx} +5 -4
- package/dist/components/Avatar/{index.js → index.jsx} +8 -4
- package/dist/components/Badge/{index.js → index.jsx} +4 -3
- package/dist/components/BubbleChart/index.d.ts +2 -1
- package/dist/components/BubbleChart/{index.js → index.jsx} +3 -3
- package/dist/components/Button/{index.js → index.jsx} +5 -4
- package/dist/components/Callout/{CalloutIcon.js → CalloutIcon.jsx} +9 -4
- package/dist/components/Callout/{CalloutText.js → CalloutText.jsx} +5 -15
- package/dist/components/Callout/{index.js → index.jsx} +7 -4
- package/dist/components/Card/{index.js → index.jsx} +5 -4
- package/dist/components/Checkbox/{index.js → index.jsx} +12 -4
- package/dist/components/CheckboxCard/{index.js → index.jsx} +6 -4
- package/dist/components/CheckboxGroup/{CheckboxGroupItem.js → CheckboxGroupItem.jsx} +6 -14
- package/dist/components/CheckboxGroup/{index.js → index.jsx} +6 -3
- package/dist/components/ContextMenu/{ContextMenuCheckboxItem.js → ContextMenuCheckboxItem.jsx} +8 -15
- package/dist/components/ContextMenu/{ContextMenuContent.js → ContextMenuContent.jsx} +7 -4
- package/dist/components/ContextMenu/{ContextMenuGroup.js → ContextMenuGroup.jsx} +4 -14
- package/dist/components/ContextMenu/{ContextMenuItem.js → ContextMenuItem.jsx} +6 -4
- package/dist/components/ContextMenu/{ContextMenuItemIndicator.js → ContextMenuItemIndicator.jsx} +5 -4
- package/dist/components/ContextMenu/{ContextMenuLabel.js → ContextMenuLabel.jsx} +5 -4
- package/dist/components/ContextMenu/{ContextMenuRadioGroup.js → ContextMenuRadioGroup.jsx} +6 -14
- package/dist/components/ContextMenu/{ContextMenuRadioItem.js → ContextMenuRadioItem.jsx} +8 -15
- package/dist/components/ContextMenu/{ContextMenuSeparator.js → ContextMenuSeparator.jsx} +5 -15
- package/dist/components/ContextMenu/{ContextMenuSubContent.js → ContextMenuSubContent.jsx} +10 -7
- package/dist/components/ContextMenu/{ContextMenuSubTrigger.js → ContextMenuSubTrigger.jsx} +10 -15
- package/dist/components/ContextMenu/{ContextMenuTrigger.js → ContextMenuTrigger.jsx} +5 -15
- package/dist/components/ContextMenu/{index.js → index.jsx} +4 -14
- package/dist/components/DataList/{DataListItem.js → DataListItem.jsx} +5 -4
- package/dist/components/DataList/{DataListLabel.js → DataListLabel.jsx} +5 -4
- package/dist/components/DataList/{DataListValue.js → DataListValue.jsx} +5 -4
- package/dist/components/DataList/{index.js → index.jsx} +7 -15
- package/dist/components/Dialog/{DialogAction.js → DialogAction.jsx} +5 -15
- package/dist/components/Dialog/{DialogCancel.js → DialogCancel.jsx} +5 -15
- package/dist/components/Dialog/{DialogContent.js → DialogContent.jsx} +5 -4
- package/dist/components/Dialog/{DialogDescription.js → DialogDescription.jsx} +5 -15
- package/dist/components/Dialog/{DialogSlot.js → DialogSlot.jsx} +5 -15
- package/dist/components/Dialog/{DialogTitle.js → DialogTitle.jsx} +5 -15
- package/dist/components/Dialog/{DialogTrigger.js → DialogTrigger.jsx} +4 -14
- package/dist/components/Dialog/{index.js → index.jsx} +4 -14
- package/dist/components/DoughnutChart/index.d.ts +2 -1
- package/dist/components/DoughnutChart/{index.js → index.jsx} +3 -3
- package/dist/components/DropdownMenu/{DropdonMenuRadioGroup.js → DropdonMenuRadioGroup.jsx} +6 -14
- package/dist/components/DropdownMenu/{DropdonMenuSubContent.js → DropdonMenuSubContent.jsx} +11 -8
- package/dist/components/DropdownMenu/{DropdownMenuCheckboxItem.js → DropdownMenuCheckboxItem.jsx} +8 -15
- package/dist/components/DropdownMenu/{DropdownMenuContent.js → DropdownMenuContent.jsx} +7 -4
- package/dist/components/DropdownMenu/{DropdownMenuItem.js → DropdownMenuItem.jsx} +6 -4
- package/dist/components/DropdownMenu/{DropdownMenuItemIndicator.js → DropdownMenuItemIndicator.jsx} +5 -4
- package/dist/components/DropdownMenu/{DropdownMenuLable.js → DropdownMenuLable.jsx} +5 -4
- package/dist/components/DropdownMenu/{DropdownMenuRadioItem.js → DropdownMenuRadioItem.jsx} +8 -15
- package/dist/components/DropdownMenu/{DropdownMenuSeparator.js → DropdownMenuSeparator.jsx} +3 -15
- package/dist/components/DropdownMenu/{DropdownMenuSub.js → DropdownMenuSub.jsx} +2 -14
- package/dist/components/DropdownMenu/{DropdownMenuSubTrigger.js → DropdownMenuSubTrigger.jsx} +7 -14
- package/dist/components/DropdownMenu/{DropdownMenuTrigger.js → DropdownMenuTrigger.jsx} +4 -14
- package/dist/components/DropdownMenu/{index.js → index.jsx} +2 -14
- package/dist/components/HoverCard/{HoverCardContent.js → HoverCardContent.jsx} +4 -3
- package/dist/components/HoverCard/{HoverCardTrigger.js → HoverCardTrigger.jsx} +4 -14
- package/dist/components/HoverCard/{index.js → index.jsx} +4 -14
- package/dist/components/IconButton/{index.js → index.jsx} +3 -2
- package/dist/components/Inset/{index.js → index.jsx} +6 -3
- package/dist/components/Label/{index.js → index.jsx} +3 -2
- package/dist/components/Menubar/{MenubarCheckboxItem.js → MenubarCheckboxItem.jsx} +8 -15
- package/dist/components/Menubar/{MenubarContent.js → MenubarContent.jsx} +11 -8
- package/dist/components/Menubar/{MenubarItem.js → MenubarItem.jsx} +6 -4
- package/dist/components/Menubar/{MenubarItemIndicator.js → MenubarItemIndicator.jsx} +5 -4
- package/dist/components/Menubar/{MenubarMenu.js → MenubarMenu.jsx} +2 -14
- package/dist/components/Menubar/{MenubarRadioGroup.js → MenubarRadioGroup.jsx} +6 -14
- package/dist/components/Menubar/{MenubarRadioItem.js → MenubarRadioItem.jsx} +8 -15
- package/dist/components/Menubar/{MenubarSeparator.js → MenubarSeparator.jsx} +5 -15
- package/dist/components/Menubar/{MenubarSub.js → MenubarSub.jsx} +2 -14
- package/dist/components/Menubar/{MenubarSubContent.js → MenubarSubContent.jsx} +6 -5
- package/dist/components/Menubar/{MenubarSubTrigger.js → MenubarSubTrigger.jsx} +8 -15
- package/dist/components/Menubar/{MenubarTrigger.js → MenubarTrigger.jsx} +5 -4
- package/dist/components/Menubar/{index.js → index.jsx} +7 -4
- package/dist/components/NavigationMenu/{NavigationMenuContent.js → NavigationMenuContent.jsx} +5 -4
- package/dist/components/NavigationMenu/NavigationMenuIndicator.jsx +22 -0
- package/dist/components/NavigationMenu/{NavigationMenuItem.js → NavigationMenuItem.jsx} +4 -14
- package/dist/components/NavigationMenu/{NavigationMenuLink.js → NavigationMenuLink.jsx} +5 -4
- package/dist/components/NavigationMenu/{NavigationMenuList.js → NavigationMenuList.jsx} +6 -4
- package/dist/components/NavigationMenu/{NavigationMenuTrigger.js → NavigationMenuTrigger.jsx} +6 -4
- package/dist/components/NavigationMenu/{NavigationMenuViewport.js → NavigationMenuViewport.jsx} +5 -4
- package/dist/components/NavigationMenu/{index.js → index.jsx} +7 -15
- package/dist/components/PieChart/index.d.ts +2 -1
- package/dist/components/PieChart/{index.js → index.jsx} +3 -3
- package/dist/components/Popover/{PopoverClose.js → PopoverClose.jsx} +4 -14
- package/dist/components/Popover/{PopoverContent.js → PopoverContent.jsx} +4 -3
- package/dist/components/Popover/{PopoverTrigger.js → PopoverTrigger.jsx} +4 -14
- package/dist/components/Popover/{index.js → index.jsx} +4 -14
- package/dist/components/Progress/{index.js → index.jsx} +4 -3
- package/dist/components/RadarChart/index.d.ts +2 -1
- package/dist/components/RadarChart/{index.js → index.jsx} +2 -2
- package/dist/components/Radio/{index.js → index.jsx} +8 -13
- package/dist/components/RadioCards/{RadioCardsItem.js → RadioCardsItem.jsx} +4 -14
- package/dist/components/RadioCards/{index.js → index.jsx} +6 -3
- package/dist/components/RadioGroup/{RadioGroupItem.js → RadioGroupItem.jsx} +4 -14
- package/dist/components/RadioGroup/{index.js → index.jsx} +6 -14
- package/dist/components/ScrollArea/{index.js → index.jsx} +6 -14
- package/dist/components/SegmentedControl/{SegmentedControlItem.js → SegmentedControlItem.jsx} +4 -14
- package/dist/components/SegmentedControl/{index.js → index.jsx} +5 -2
- package/dist/components/Select/{index.js → index.jsx} +24 -9
- package/dist/components/Separator/{index.js → index.jsx} +6 -3
- package/dist/components/Skeleton/{index.js → index.jsx} +6 -3
- package/dist/components/Slider/{index.js → index.jsx} +4 -3
- package/dist/components/Spinner/{index.js → index.jsx} +5 -2
- package/dist/components/TabNav/{index.js → index.jsx} +8 -14
- package/dist/components/Table/{index.js → index.jsx} +23 -8
- package/dist/components/Tabs/{index.js → index.jsx} +14 -5
- package/dist/components/TextArea/{index.js → index.jsx} +3 -2
- package/dist/components/TextField/{index.js → index.jsx} +9 -4
- package/dist/components/Toast/{ToastActionButton.js → ToastActionButton.jsx} +5 -4
- package/dist/components/Toast/{ToastDescription.js → ToastDescription.jsx} +7 -15
- package/dist/components/Toast/{ToastTitle.js → ToastTitle.jsx} +5 -15
- package/dist/components/Toast/{index.js → index.jsx} +10 -4
- package/dist/components/Toggle/{ToggleWithText.js → ToggleWithText.jsx} +6 -4
- package/dist/components/Toggle/{index.js → index.jsx} +4 -3
- package/dist/components/ToggleGroup/{index.js → index.jsx} +6 -3
- package/dist/components/ToggleGroup/{toggleGroupItem.js → toggleGroupItem.jsx} +4 -14
- package/dist/components/ToggleSwitch/{index.js → index.jsx} +6 -2
- package/dist/components/Tooltip/index.d.ts +1 -1
- package/dist/components/Tooltip/{index.js → index.jsx} +12 -3
- package/dist/components/index.d.ts +2 -0
- package/dist/index.d.ts +5 -2
- package/dist/index.js +3 -0
- package/dist/stories/Welcome.d.ts +2 -1
- package/dist/stories/Welcome.jsx +48 -0
- package/dist/stories/accordion/Accordion.stories.d.ts +1 -1
- package/dist/stories/accordion/{Accordion.stories.js → Accordion.stories.jsx} +20 -2
- package/dist/stories/alert-dialog/AlertDialog.stories.d.ts +1 -1
- package/dist/stories/alert-dialog/{AlertDialog.stories.js → AlertDialog.stories.jsx} +15 -2
- package/dist/stories/aspect-ratio/AspectRatio.stories.d.ts +3 -3
- package/dist/stories/aspect-ratio/AspectRatio.stories.jsx +106 -0
- package/dist/stories/avatar/Avatar.stories.d.ts +5 -5
- package/dist/stories/avatar/{Avatar.stories.js → Avatar.stories.jsx} +17 -6
- package/dist/stories/badge/Badge.stories.d.ts +6 -6
- package/dist/stories/badge/{Badge.stories.js → Badge.stories.jsx} +51 -7
- package/dist/stories/bubble-chart/BubbleChart.stories.d.ts +5 -4
- package/dist/stories/bubble-chart/{BubbleChart.stories.js → BubbleChart.stories.jsx} +12 -4
- package/dist/stories/button/Button.stories.d.ts +7 -7
- package/dist/stories/button/{Button.stories.js → Button.stories.jsx} +41 -8
- package/dist/stories/button/IconButton.stories.d.ts +4 -4
- package/dist/stories/button/{IconButton.stories.js → IconButton.stories.jsx} +18 -5
- package/dist/stories/callout/Callout.stories.d.ts +7 -7
- package/dist/stories/callout/Callout.stories.jsx +205 -0
- package/dist/stories/card/Card.stories.d.ts +5 -5
- package/dist/stories/card/{Card.stories.js → Card.stories.jsx} +56 -6
- package/dist/stories/checkbox/Checkbox.stories.d.ts +6 -6
- package/dist/stories/checkbox/{Checkbox.stories.js → Checkbox.stories.jsx} +63 -7
- package/dist/stories/checkbox/CheckboxCard.stories.d.ts +5 -5
- package/dist/stories/checkbox/{CheckboxCard.stories.js → CheckboxCard.stories.jsx} +41 -6
- package/dist/stories/checkbox/CheckboxGroup.stories.d.ts +3 -3
- package/dist/stories/checkbox/{CheckboxGroup.stories.js → CheckboxGroup.stories.jsx} +76 -4
- package/dist/stories/context-menu/ContextMenu.stories.d.ts +4 -4
- package/dist/stories/context-menu/{ContextMenu.stories.js → ContextMenu.stories.jsx} +74 -5
- package/dist/stories/data-list/DataList.stories.d.ts +4 -4
- package/dist/stories/data-list/DataList.stories.jsx +185 -0
- package/dist/stories/dialog/Dialog.stories.d.ts +1 -1
- package/dist/stories/dialog/{Dialog.stories.js → Dialog.stories.jsx} +25 -2
- package/dist/stories/doughnut-chart/DoughnutChart.stories.d.ts +5 -4
- package/dist/stories/doughnut-chart/{DoughnutChart.stories.js → DoughnutChart.stories.jsx} +12 -4
- package/dist/stories/dropdown-menu/DropdownMenu.stories.d.ts +4 -4
- package/dist/stories/dropdown-menu/DropdownMenu.stories.jsx +170 -0
- package/dist/stories/header/Header.stories.d.ts +6 -6
- package/dist/stories/header/{Header.stories.js → Header.stories.jsx} +26 -7
- package/dist/stories/hover-card/HoverCard.stories.d.ts +2 -2
- package/dist/stories/hover-card/{HoverCard.stories.js → HoverCard.stories.jsx} +30 -3
- package/dist/stories/inset/Inset.stories.d.ts +2 -2
- package/dist/stories/inset/{Inset.stories.js → Inset.stories.jsx} +27 -12
- package/dist/stories/label/Label.stories.d.ts +4 -4
- package/dist/stories/label/{Label.stories.js → Label.stories.jsx} +26 -5
- package/dist/stories/menubar/Menubar.stories.d.ts +1 -1
- package/dist/stories/menubar/{Menubar.stories.js → Menubar.stories.jsx} +45 -8
- package/dist/stories/navigation-menu/NavigationMenu.stories.d.ts +13 -13
- package/dist/stories/navigation-menu/{NavigationMenu.stories.js → NavigationMenu.stories.jsx} +69 -4
- package/dist/stories/pie-chart/PieChart.stories.d.ts +6 -5
- package/dist/stories/pie-chart/{PieChart.stories.js → PieChart.stories.jsx} +32 -13
- package/dist/stories/popover/Popover.stories.d.ts +2 -2
- package/dist/stories/popover/{Popover.stories.js → Popover.stories.jsx} +42 -9
- package/dist/stories/progress/Progress.stories.d.ts +4 -4
- package/dist/stories/progress/{Progress.stories.js → Progress.stories.jsx} +11 -6
- package/dist/stories/radar-chart/RadarChart.stories.d.ts +6 -5
- package/dist/stories/radar-chart/{RadarChart.stories.js → RadarChart.stories.jsx} +4 -5
- package/dist/stories/radio/Radio.stories.d.ts +3 -3
- package/dist/stories/radio/{Radio.stories.js → Radio.stories.jsx} +14 -4
- package/dist/stories/radio/RadioCards.stories.d.ts +4 -4
- package/dist/stories/radio/{RadioCards.stories.js → RadioCards.stories.jsx} +64 -5
- package/dist/stories/radio/RadioGroup.stories.d.ts +4 -4
- package/dist/stories/radio/{RadioGroup.stories.js → RadioGroup.stories.jsx} +59 -5
- package/dist/stories/scroll-area/ScrollArea.stories.d.ts +2 -2
- package/dist/stories/scroll-area/ScrollArea.stories.jsx +123 -0
- package/dist/stories/segmented-control/SegmentedControl.stories.d.ts +4 -4
- package/dist/stories/segmented-control/{SegmentedControl.stories.js → SegmentedControl.stories.jsx} +26 -5
- package/dist/stories/select/Select.stories.d.ts +5 -5
- package/dist/stories/select/{Select.stories.js → Select.stories.jsx} +67 -6
- package/dist/stories/separator/Separator.stories.d.ts +4 -4
- package/dist/stories/separator/{Separator.stories.js → Separator.stories.jsx} +29 -5
- package/dist/stories/skeleton/Skeleton.stories.d.ts +5 -5
- package/dist/stories/skeleton/{Skeleton.stories.js → Skeleton.stories.jsx} +33 -6
- package/dist/stories/slider/Slider.stories.d.ts +4 -4
- package/dist/stories/slider/{Slider.stories.js → Slider.stories.jsx} +16 -5
- package/dist/stories/spinner/Spinner.stories.d.ts +5 -5
- package/dist/stories/spinner/{Spinner.stories.js → Spinner.stories.jsx} +31 -6
- package/dist/stories/switch/Switch.stories.d.ts +4 -4
- package/dist/stories/switch/{Switch.stories.js → Switch.stories.jsx} +16 -5
- package/dist/stories/tab-nav/TabNav.stories.d.ts +1 -1
- package/dist/stories/tab-nav/{TabNav.stories.js → TabNav.stories.jsx} +11 -2
- package/dist/stories/table/Table.stories.d.ts +1 -1
- package/dist/stories/table/{Table.stories.js → Table.stories.jsx} +29 -2
- package/dist/stories/tabs/Tabs.stories.d.ts +1 -1
- package/dist/stories/tabs/{Tabs.stories.js → Tabs.stories.jsx} +19 -2
- package/dist/stories/text/Text.stories.d.ts +5 -5
- package/dist/stories/text/{Text.stories.js → Text.stories.jsx} +21 -6
- package/dist/stories/textArea/TextArea.stories.d.ts +5 -5
- package/dist/stories/textArea/{TextArea.stories.js → TextArea.stories.jsx} +22 -6
- package/dist/stories/textfield/TextField.stories.d.ts +5 -5
- package/dist/stories/textfield/{TextField.stories.js → TextField.stories.jsx} +38 -6
- package/dist/stories/toast/Toast.stories.d.ts +3 -3
- package/dist/stories/toast/{Toast.stories.js → Toast.stories.jsx} +22 -4
- package/dist/stories/toggle/Toggle.stories.d.ts +5 -5
- package/dist/stories/toggle/{Toggle.stories.js → Toggle.stories.jsx} +23 -6
- package/dist/stories/toggle/ToggleGroup.stories.d.ts +3 -3
- package/dist/stories/toggle/{ToggleGroup.stories.js → ToggleGroup.stories.jsx} +39 -6
- package/dist/stories/tooltip/Tooltip.stories.d.ts +3 -3
- package/dist/stories/tooltip/{Tooltip.stories.js → Tooltip.stories.jsx} +17 -4
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +118 -120
- package/dist/app/page.js +0 -6
- package/dist/app/template/badgeTemplate.js +0 -11
- package/dist/app/template/buttonTemplate.js +0 -11
- package/dist/app/template/colorPicker.js +0 -14
- package/dist/app/template/textTemplate.js +0 -23
- package/dist/app/template/theme.js +0 -12
- package/dist/components/Input/Input.stories.d.ts +0 -77
- package/dist/components/Input/Input.stories.js +0 -74
- package/dist/components/Input/index.d.ts +0 -14
- package/dist/components/Input/index.js +0 -53
- package/dist/components/NavigationMenu/NavigationMenuIndicator.js +0 -31
- package/dist/stories/Welcome.js +0 -30
- package/dist/stories/aspect-ratio/AspectRatio.stories.js +0 -78
- package/dist/stories/callout/Callout.stories.js +0 -104
- package/dist/stories/data-list/DataList.stories.js +0 -87
- package/dist/stories/dropdown-menu/DropdownMenu.stories.js +0 -75
- 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.
|
5
|
-
"private": false,
|
6
|
-
"type": "module",
|
7
|
-
"files": [
|
8
|
-
"dist"
|
9
|
-
],
|
10
|
-
"main": "dist/index.js",
|
11
|
-
"
|
12
|
-
"
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
"
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
"
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
"last 1
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
"
|
37
|
-
"
|
38
|
-
"
|
39
|
-
"
|
40
|
-
"
|
41
|
-
"
|
42
|
-
"
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
"@
|
48
|
-
"@
|
49
|
-
"@radix-ui/
|
50
|
-
"@radix-ui/react-
|
51
|
-
"@radix-ui/react-
|
52
|
-
"@radix-ui/react-
|
53
|
-
"@radix-ui/react-
|
54
|
-
"@radix-ui/react-
|
55
|
-
"@radix-ui/react-
|
56
|
-
"@radix-ui/react-
|
57
|
-
"@radix-ui/react-
|
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/
|
67
|
-
"@
|
68
|
-
"@
|
69
|
-
"@
|
70
|
-
"@
|
71
|
-
"
|
72
|
-
"
|
73
|
-
"
|
74
|
-
"
|
75
|
-
"
|
76
|
-
"
|
77
|
-
"
|
78
|
-
"
|
79
|
-
"
|
80
|
-
"
|
81
|
-
"react": "^18",
|
82
|
-
"react-
|
83
|
-
"
|
84
|
-
"
|
85
|
-
"
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
"@babel/
|
91
|
-
"@babel/
|
92
|
-
"@babel/
|
93
|
-
"@babel/preset-
|
94
|
-
"@
|
95
|
-
"@
|
96
|
-
"@
|
97
|
-
"@storybook/addon-
|
98
|
-
"@storybook/addon-
|
99
|
-
"@storybook/
|
100
|
-
"@storybook/
|
101
|
-
"@storybook/
|
102
|
-
"@storybook/
|
103
|
-
"@storybook/
|
104
|
-
"@
|
105
|
-
"@
|
106
|
-
"@types/
|
107
|
-
"
|
108
|
-
"
|
109
|
-
"
|
110
|
-
"
|
111
|
-
"eslint": "^8",
|
112
|
-
"
|
113
|
-
"
|
114
|
-
"
|
115
|
-
"
|
116
|
-
"
|
117
|
-
|
118
|
-
|
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,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';
|
package/dist/stories/Welcome.js
DELETED
@@ -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;
|