@postxl/generators 1.1.1 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/frontend-core/frontend.generator.d.ts +0 -58
- package/dist/frontend-core/frontend.generator.js +6 -172
- package/dist/frontend-core/frontend.generator.js.map +1 -1
- package/dist/frontend-core/template/README.md +1 -1
- package/dist/frontend-core/template/src/components/admin/table-filter.tsx +1 -5
- package/dist/frontend-core/template/src/components/ui/color-mode-toggle/color-mode-toggle.tsx +10 -4
- package/dist/frontend-core/template/src/pages/dashboard/dashboard.page.tsx +2 -3
- package/dist/frontend-core/template/src/pages/error/default-error.page.tsx +1 -1
- package/dist/frontend-core/template/src/pages/error/not-found-error.page.tsx +1 -1
- package/dist/frontend-core/template/src/styles/styles.css +13 -1
- package/dist/frontend-core/template/tsconfig.json +2 -0
- package/dist/frontend-core/types/component.d.ts +1 -1
- package/dist/frontend-forms/generators/discriminated-union/fields.generator.js +4 -6
- package/dist/frontend-forms/generators/discriminated-union/fields.generator.js.map +1 -1
- package/dist/frontend-forms/generators/discriminated-union/inputs.generator.js +1 -1
- package/dist/frontend-forms/generators/discriminated-union/inputs.generator.js.map +1 -1
- package/dist/frontend-forms/generators/enum/inputs.generator.js +1 -1
- package/dist/frontend-forms/generators/enum/inputs.generator.js.map +1 -1
- package/dist/frontend-forms/generators/model/forms.generator.js +8 -12
- package/dist/frontend-forms/generators/model/forms.generator.js.map +1 -1
- package/dist/frontend-forms/generators/model/inputs.generator.js +2 -6
- package/dist/frontend-forms/generators/model/inputs.generator.js.map +1 -1
- package/dist/frontend-forms/template/src/components/ui/field/field.tsx +1 -4
- package/dist/frontend-tables/generators/model-table.generator.js +1 -5
- package/dist/frontend-tables/generators/model-table.generator.js.map +1 -1
- package/package.json +3 -2
- package/dist/frontend-core/template/src/components/ui/accordion/accordion.stories.tsx +0 -47
- package/dist/frontend-core/template/src/components/ui/accordion/accordion.tsx +0 -52
- package/dist/frontend-core/template/src/components/ui/admin-sidebar/admin-sidebar.tsx +0 -195
- package/dist/frontend-core/template/src/components/ui/alert/alert.stories.tsx +0 -61
- package/dist/frontend-core/template/src/components/ui/alert/alert.tsx +0 -45
- package/dist/frontend-core/template/src/components/ui/alert-dialog/alert-dialog.stories.tsx +0 -52
- package/dist/frontend-core/template/src/components/ui/alert-dialog/alert-dialog.tsx +0 -105
- package/dist/frontend-core/template/src/components/ui/avatar/avatar.stories.tsx +0 -30
- package/dist/frontend-core/template/src/components/ui/avatar/avatar.tsx +0 -39
- package/dist/frontend-core/template/src/components/ui/badge/badge.stories.tsx +0 -78
- package/dist/frontend-core/template/src/components/ui/badge/badge.tsx +0 -48
- package/dist/frontend-core/template/src/components/ui/breadcrumb/breadcrumb.stories.tsx +0 -67
- package/dist/frontend-core/template/src/components/ui/breadcrumb/breadcrumb.tsx +0 -85
- package/dist/frontend-core/template/src/components/ui/button/button.stories.tsx +0 -150
- package/dist/frontend-core/template/src/components/ui/button/button.tsx +0 -68
- package/dist/frontend-core/template/src/components/ui/calendar/calendar.stories.tsx +0 -160
- package/dist/frontend-core/template/src/components/ui/calendar/calendar.tsx +0 -293
- package/dist/frontend-core/template/src/components/ui/card/card.stories.tsx +0 -77
- package/dist/frontend-core/template/src/components/ui/card/card.tsx +0 -45
- package/dist/frontend-core/template/src/components/ui/card-hover/card-hover.stories.tsx +0 -29
- package/dist/frontend-core/template/src/components/ui/card-hover/card-hover.tsx +0 -28
- package/dist/frontend-core/template/src/components/ui/carousel/carousel.stories.tsx +0 -154
- package/dist/frontend-core/template/src/components/ui/carousel/carousel.tsx +0 -227
- package/dist/frontend-core/template/src/components/ui/checkbox/checkbox.stories.tsx +0 -106
- package/dist/frontend-core/template/src/components/ui/checkbox/checkbox.tsx +0 -88
- package/dist/frontend-core/template/src/components/ui/checkbox/shadcn-checkbox.stories.tsx +0 -90
- package/dist/frontend-core/template/src/components/ui/checkbox/shadcn-checkbox.tsx +0 -54
- package/dist/frontend-core/template/src/components/ui/collapse/collapse.stories.tsx +0 -52
- package/dist/frontend-core/template/src/components/ui/collapse/collapse.tsx +0 -9
- package/dist/frontend-core/template/src/components/ui/combobox/combobox.stories.tsx +0 -207
- package/dist/frontend-core/template/src/components/ui/combobox/combobox.tsx +0 -79
- package/dist/frontend-core/template/src/components/ui/command/command.stories.tsx +0 -186
- package/dist/frontend-core/template/src/components/ui/command/command.tsx +0 -165
- package/dist/frontend-core/template/src/components/ui/command-palette/command-palette.stories.tsx +0 -160
- package/dist/frontend-core/template/src/components/ui/command-palette/command-palette.tsx +0 -134
- package/dist/frontend-core/template/src/components/ui/content-frame/content-frame.stories.tsx +0 -198
- package/dist/frontend-core/template/src/components/ui/content-frame/content-frame.tsx +0 -100
- package/dist/frontend-core/template/src/components/ui/context-menu/context-menu.stories.tsx +0 -78
- package/dist/frontend-core/template/src/components/ui/context-menu/context-menu.tsx +0 -179
- package/dist/frontend-core/template/src/components/ui/data-grid/cell-variants/cell-variant-types.ts +0 -11
- package/dist/frontend-core/template/src/components/ui/data-grid/cell-variants/checkbox-cell.tsx +0 -116
- package/dist/frontend-core/template/src/components/ui/data-grid/cell-variants/date-cell.tsx +0 -157
- package/dist/frontend-core/template/src/components/ui/data-grid/cell-variants/gantt-cell.tsx +0 -82
- package/dist/frontend-core/template/src/components/ui/data-grid/cell-variants/long-text-cell.tsx +0 -180
- package/dist/frontend-core/template/src/components/ui/data-grid/cell-variants/multi-select-cell.tsx +0 -280
- package/dist/frontend-core/template/src/components/ui/data-grid/cell-variants/number-cell.tsx +0 -169
- package/dist/frontend-core/template/src/components/ui/data-grid/cell-variants/react-node-cell.tsx +0 -33
- package/dist/frontend-core/template/src/components/ui/data-grid/cell-variants/select-cell.tsx +0 -175
- package/dist/frontend-core/template/src/components/ui/data-grid/cell-variants/short-text-cell.tsx +0 -138
- package/dist/frontend-core/template/src/components/ui/data-grid/cell-variants/utils/gantt-timeline.tsx +0 -92
- package/dist/frontend-core/template/src/components/ui/data-grid/cell-variants/utils/gantt-timerange-picker.tsx +0 -330
- package/dist/frontend-core/template/src/components/ui/data-grid/data-grid-cell-wrapper.tsx +0 -212
- package/dist/frontend-core/template/src/components/ui/data-grid/data-grid-cell.tsx +0 -157
- package/dist/frontend-core/template/src/components/ui/data-grid/data-grid-column-header.tsx +0 -340
- package/dist/frontend-core/template/src/components/ui/data-grid/data-grid-context-menu.tsx +0 -271
- package/dist/frontend-core/template/src/components/ui/data-grid/data-grid-row.tsx +0 -123
- package/dist/frontend-core/template/src/components/ui/data-grid/data-grid-search.tsx +0 -211
- package/dist/frontend-core/template/src/components/ui/data-grid/data-grid-types.ts +0 -159
- package/dist/frontend-core/template/src/components/ui/data-grid/data-grid-utils.ts +0 -67
- package/dist/frontend-core/template/src/components/ui/data-grid/data-grid-view-menu.tsx +0 -360
- package/dist/frontend-core/template/src/components/ui/data-grid/data-grid.stories.tsx +0 -780
- package/dist/frontend-core/template/src/components/ui/data-grid/data-grid.tsx +0 -217
- package/dist/frontend-core/template/src/components/ui/data-grid/hooks/use-callback-ref.ts +0 -22
- package/dist/frontend-core/template/src/components/ui/data-grid/hooks/use-data-grid.tsx +0 -1892
- package/dist/frontend-core/template/src/components/ui/data-grid/hooks/use-debounced-callback.ts +0 -19
- package/dist/frontend-core/template/src/components/ui/data-grid/styles.css +0 -3
- package/dist/frontend-core/template/src/components/ui/data-table/context-menu-simple.tsx +0 -141
- package/dist/frontend-core/template/src/components/ui/data-table/data-table.stories.tsx +0 -146
- package/dist/frontend-core/template/src/components/ui/data-table/data-table.tsx +0 -447
- package/dist/frontend-core/template/src/components/ui/data-table/renderers/country-array-cell-renderer.tsx +0 -77
- package/dist/frontend-core/template/src/components/ui/data-table/renderers/country-cell-renderer.tsx +0 -56
- package/dist/frontend-core/template/src/components/ui/data-table/renderers/favorite-cell-renderer.tsx +0 -68
- package/dist/frontend-core/template/src/components/ui/data-table/renderers/links-cell-renderer.tsx +0 -205
- package/dist/frontend-core/template/src/components/ui/data-table/utils/columns.ts +0 -351
- package/dist/frontend-core/template/src/components/ui/data-table/utils/data-table.utils.ts +0 -49
- package/dist/frontend-core/template/src/components/ui/date-picker/date-picker.stories.tsx +0 -149
- package/dist/frontend-core/template/src/components/ui/date-picker/date-picker.tsx +0 -30
- package/dist/frontend-core/template/src/components/ui/dialog/dialog.stories.tsx +0 -80
- package/dist/frontend-core/template/src/components/ui/dialog/dialog.tsx +0 -134
- package/dist/frontend-core/template/src/components/ui/drawer/drawer.stories.tsx +0 -104
- package/dist/frontend-core/template/src/components/ui/drawer/drawer.tsx +0 -87
- package/dist/frontend-core/template/src/components/ui/dropdown-menu/dropdown-menu.stories.tsx +0 -168
- package/dist/frontend-core/template/src/components/ui/dropdown-menu/dropdown-menu.tsx +0 -225
- package/dist/frontend-core/template/src/components/ui/input/input.stories.tsx +0 -141
- package/dist/frontend-core/template/src/components/ui/input/input.tsx +0 -47
- package/dist/frontend-core/template/src/components/ui/label/label.stories.tsx +0 -41
- package/dist/frontend-core/template/src/components/ui/label/label.tsx +0 -20
- package/dist/frontend-core/template/src/components/ui/loader/loader.stories.tsx +0 -45
- package/dist/frontend-core/template/src/components/ui/loader/loader.tsx +0 -17
- package/dist/frontend-core/template/src/components/ui/mark-value-renderer/mark-value-renderer.stories.tsx +0 -114
- package/dist/frontend-core/template/src/components/ui/mark-value-renderer/mark-value-renderer.tsx +0 -48
- package/dist/frontend-core/template/src/components/ui/menubar/menu.stories.tsx +0 -134
- package/dist/frontend-core/template/src/components/ui/menubar/menubar.tsx +0 -208
- package/dist/frontend-core/template/src/components/ui/modal/modal.stories.tsx +0 -297
- package/dist/frontend-core/template/src/components/ui/modal/modal.tsx +0 -80
- package/dist/frontend-core/template/src/components/ui/navigation-menu/navigation-menu.stories.tsx +0 -213
- package/dist/frontend-core/template/src/components/ui/navigation-menu/navigation-menu.tsx +0 -142
- package/dist/frontend-core/template/src/components/ui/pagination/pagination.stories.tsx +0 -49
- package/dist/frontend-core/template/src/components/ui/pagination/pagination.tsx +0 -84
- package/dist/frontend-core/template/src/components/ui/popover/popover.stories.tsx +0 -82
- package/dist/frontend-core/template/src/components/ui/popover/popover.tsx +0 -55
- package/dist/frontend-core/template/src/components/ui/progress/progress.stories.tsx +0 -80
- package/dist/frontend-core/template/src/components/ui/progress/progress.tsx +0 -17
- package/dist/frontend-core/template/src/components/ui/radio-group/radio-group.stories.tsx +0 -154
- package/dist/frontend-core/template/src/components/ui/radio-group/radio-group.tsx +0 -68
- package/dist/frontend-core/template/src/components/ui/resizable/resizable.stories.tsx +0 -73
- package/dist/frontend-core/template/src/components/ui/resizable/resizeable.tsx +0 -38
- package/dist/frontend-core/template/src/components/ui/scroll-area/scroll-area.stories.tsx +0 -55
- package/dist/frontend-core/template/src/components/ui/scroll-area/scroll-area.tsx +0 -39
- package/dist/frontend-core/template/src/components/ui/select/select.stories.tsx +0 -297
- package/dist/frontend-core/template/src/components/ui/select/select.tsx +0 -227
- package/dist/frontend-core/template/src/components/ui/separator/separator.tsx +0 -21
- package/dist/frontend-core/template/src/components/ui/separator/seperator.stories.tsx +0 -25
- package/dist/frontend-core/template/src/components/ui/sheet/sheet.stories.tsx +0 -45
- package/dist/frontend-core/template/src/components/ui/sheet/sheet.tsx +0 -107
- package/dist/frontend-core/template/src/components/ui/skeleton/skeleton.stories.tsx +0 -26
- package/dist/frontend-core/template/src/components/ui/skeleton/skeleton.tsx +0 -7
- package/dist/frontend-core/template/src/components/ui/slider/slider.stories.tsx +0 -101
- package/dist/frontend-core/template/src/components/ui/slider/slider.tsx +0 -98
- package/dist/frontend-core/template/src/components/ui/spinner/spinner.stories.tsx +0 -19
- package/dist/frontend-core/template/src/components/ui/spinner/spinner.tsx +0 -21
- package/dist/frontend-core/template/src/components/ui/switch/switch.stories.tsx +0 -33
- package/dist/frontend-core/template/src/components/ui/switch/switch.tsx +0 -28
- package/dist/frontend-core/template/src/components/ui/tabs/tabs.stories.tsx +0 -215
- package/dist/frontend-core/template/src/components/ui/tabs/tabs.tsx +0 -70
- package/dist/frontend-core/template/src/components/ui/textarea/textarea.stories.tsx +0 -138
- package/dist/frontend-core/template/src/components/ui/textarea/textarea.tsx +0 -40
- package/dist/frontend-core/template/src/components/ui/toast/toast.mdx +0 -31
- package/dist/frontend-core/template/src/components/ui/toast/toast.stories.tsx +0 -89
- package/dist/frontend-core/template/src/components/ui/toggle/toggle.stories.tsx +0 -65
- package/dist/frontend-core/template/src/components/ui/toggle/toggle.tsx +0 -38
- package/dist/frontend-core/template/src/components/ui/toggle-group/toggle-group.stories.tsx +0 -85
- package/dist/frontend-core/template/src/components/ui/toggle-group/toggle-group.tsx +0 -54
- package/dist/frontend-core/template/src/components/ui/tooltip/tooltip.stories.tsx +0 -29
- package/dist/frontend-core/template/src/components/ui/tooltip/tooltip.tsx +0 -29
|
@@ -1,227 +0,0 @@
|
|
|
1
|
-
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons'
|
|
2
|
-
import * as SelectPrimitive from '@radix-ui/react-select'
|
|
3
|
-
import { Slot } from '@radix-ui/react-slot'
|
|
4
|
-
|
|
5
|
-
import { cva, type VariantProps } from 'class-variance-authority'
|
|
6
|
-
import * as React from 'react'
|
|
7
|
-
|
|
8
|
-
import { cn } from '@lib/utils'
|
|
9
|
-
|
|
10
|
-
type SelectProps = React.ComponentProps<typeof SelectPrimitive.Root> & {
|
|
11
|
-
/**
|
|
12
|
-
* E2E test_id to identify the select.
|
|
13
|
-
*/
|
|
14
|
-
__e2e_test_id__?: string
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
function Select({ __e2e_test_id__, ...rest }: SelectProps) {
|
|
18
|
-
return <SelectPrimitive.Root data-test-id={__e2e_test_id__} {...rest} />
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {
|
|
22
|
-
return <SelectPrimitive.Group data-slot="select-group" {...props} />
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
|
|
26
|
-
return <SelectPrimitive.Value data-slot="select-value" {...props} />
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
const selectTriggerVariants = cva(
|
|
30
|
-
"data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex items-center gap-2 rounded-md border text-md shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50",
|
|
31
|
-
{
|
|
32
|
-
variants: {
|
|
33
|
-
size: {
|
|
34
|
-
default: 'h-9 px-3 py-2',
|
|
35
|
-
sm: 'h-8 px-2.5 py-1.5',
|
|
36
|
-
lg: 'h-10 px-4 py-2.5',
|
|
37
|
-
xs: 'h-7 px-2 py-1',
|
|
38
|
-
},
|
|
39
|
-
variant: {
|
|
40
|
-
default:
|
|
41
|
-
'justify-between border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 bg-transparent',
|
|
42
|
-
simple:
|
|
43
|
-
'justify-start bg-background cursor-pointer border-foreground text-left data-[placeholder]:border-(--discreet-border)',
|
|
44
|
-
},
|
|
45
|
-
},
|
|
46
|
-
defaultVariants: {
|
|
47
|
-
size: 'default',
|
|
48
|
-
variant: 'default',
|
|
49
|
-
},
|
|
50
|
-
},
|
|
51
|
-
)
|
|
52
|
-
const selectTriggerTextVariants = cva('', {
|
|
53
|
-
variants: {
|
|
54
|
-
variant: {
|
|
55
|
-
default: '',
|
|
56
|
-
simple: 'overflow-hidden whitespace-nowrap text-ellipsis',
|
|
57
|
-
},
|
|
58
|
-
},
|
|
59
|
-
defaultVariants: {
|
|
60
|
-
variant: 'default',
|
|
61
|
-
},
|
|
62
|
-
})
|
|
63
|
-
|
|
64
|
-
function SelectTrigger({
|
|
65
|
-
className,
|
|
66
|
-
size,
|
|
67
|
-
variant,
|
|
68
|
-
children,
|
|
69
|
-
asChild = false,
|
|
70
|
-
...props
|
|
71
|
-
}: React.ComponentProps<typeof SelectPrimitive.Trigger> &
|
|
72
|
-
VariantProps<typeof selectTriggerVariants> & { asChild?: boolean }) {
|
|
73
|
-
const Comp = asChild ? Slot : SelectPrimitive.Trigger
|
|
74
|
-
|
|
75
|
-
return (
|
|
76
|
-
<Comp
|
|
77
|
-
data-slot="select-trigger"
|
|
78
|
-
data-size={size}
|
|
79
|
-
className={cn(selectTriggerVariants({ size, variant, className }), '[&[data-state=open]>svg]:rotate-180')}
|
|
80
|
-
{...props}
|
|
81
|
-
>
|
|
82
|
-
<span className={cn('flex-1', selectTriggerTextVariants({ variant }))}>{children}</span>
|
|
83
|
-
<SelectPrimitive.Icon asChild>
|
|
84
|
-
<ChevronDownIcon className="flex-none size-4 opacity-50 " />
|
|
85
|
-
</SelectPrimitive.Icon>
|
|
86
|
-
</Comp>
|
|
87
|
-
)
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
function SelectContent({
|
|
91
|
-
className,
|
|
92
|
-
children,
|
|
93
|
-
position = 'popper',
|
|
94
|
-
...props
|
|
95
|
-
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
|
|
96
|
-
return (
|
|
97
|
-
<SelectPrimitive.Portal>
|
|
98
|
-
<SelectPrimitive.Content
|
|
99
|
-
data-slot="select-content"
|
|
100
|
-
className={cn(
|
|
101
|
-
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
|
|
102
|
-
className,
|
|
103
|
-
position === 'popper' &&
|
|
104
|
-
'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
|
|
105
|
-
)}
|
|
106
|
-
position={position}
|
|
107
|
-
{...props}
|
|
108
|
-
>
|
|
109
|
-
<SelectScrollUpButton />
|
|
110
|
-
<SelectPrimitive.Viewport
|
|
111
|
-
className={cn(
|
|
112
|
-
'p-1',
|
|
113
|
-
position === 'popper' &&
|
|
114
|
-
'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1',
|
|
115
|
-
)}
|
|
116
|
-
>
|
|
117
|
-
{children}
|
|
118
|
-
</SelectPrimitive.Viewport>
|
|
119
|
-
<SelectScrollDownButton />
|
|
120
|
-
</SelectPrimitive.Content>
|
|
121
|
-
</SelectPrimitive.Portal>
|
|
122
|
-
)
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
|
|
126
|
-
return (
|
|
127
|
-
<SelectPrimitive.Label
|
|
128
|
-
data-slot="select-label"
|
|
129
|
-
className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
|
|
130
|
-
{...props}
|
|
131
|
-
/>
|
|
132
|
-
)
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
const selectItemVariants = cva(
|
|
136
|
-
"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded pr-8 pl-2 text-md outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
|
|
137
|
-
{
|
|
138
|
-
variants: {
|
|
139
|
-
type: {
|
|
140
|
-
default: '',
|
|
141
|
-
deselect: 'italic text-muted-foreground focus:text-muted-foreground',
|
|
142
|
-
},
|
|
143
|
-
spacing: {
|
|
144
|
-
sm: 'py-1',
|
|
145
|
-
md: 'py-1.5',
|
|
146
|
-
lg: 'py-2.5',
|
|
147
|
-
},
|
|
148
|
-
},
|
|
149
|
-
defaultVariants: {
|
|
150
|
-
type: 'default',
|
|
151
|
-
spacing: 'md',
|
|
152
|
-
},
|
|
153
|
-
},
|
|
154
|
-
)
|
|
155
|
-
|
|
156
|
-
function SelectItem({
|
|
157
|
-
className,
|
|
158
|
-
children,
|
|
159
|
-
type,
|
|
160
|
-
spacing,
|
|
161
|
-
...props
|
|
162
|
-
}: React.ComponentProps<typeof SelectPrimitive.Item> & VariantProps<typeof selectItemVariants>) {
|
|
163
|
-
return (
|
|
164
|
-
<SelectPrimitive.Item
|
|
165
|
-
data-slot="select-item"
|
|
166
|
-
className={cn(selectItemVariants({ type, spacing, className }))}
|
|
167
|
-
{...props}
|
|
168
|
-
>
|
|
169
|
-
<span className="absolute right-2 flex size-3.5 items-center justify-center">
|
|
170
|
-
<SelectPrimitive.ItemIndicator>
|
|
171
|
-
<CheckIcon className="size-4 " />
|
|
172
|
-
</SelectPrimitive.ItemIndicator>
|
|
173
|
-
</span>
|
|
174
|
-
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
|
175
|
-
</SelectPrimitive.Item>
|
|
176
|
-
)
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
|
|
180
|
-
return (
|
|
181
|
-
<SelectPrimitive.Separator
|
|
182
|
-
data-slot="select-separator"
|
|
183
|
-
className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
|
|
184
|
-
{...props}
|
|
185
|
-
/>
|
|
186
|
-
)
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
|
|
190
|
-
return (
|
|
191
|
-
<SelectPrimitive.ScrollUpButton
|
|
192
|
-
data-slot="select-scroll-up-button"
|
|
193
|
-
className={cn('flex cursor-default items-center justify-center py-1', className)}
|
|
194
|
-
{...props}
|
|
195
|
-
>
|
|
196
|
-
<ChevronUpIcon className="size-4" />
|
|
197
|
-
</SelectPrimitive.ScrollUpButton>
|
|
198
|
-
)
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
function SelectScrollDownButton({
|
|
202
|
-
className,
|
|
203
|
-
...props
|
|
204
|
-
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
|
|
205
|
-
return (
|
|
206
|
-
<SelectPrimitive.ScrollDownButton
|
|
207
|
-
data-slot="select-scroll-down-button"
|
|
208
|
-
className={cn('flex cursor-default items-center justify-center py-1', className)}
|
|
209
|
-
{...props}
|
|
210
|
-
>
|
|
211
|
-
<ChevronDownIcon className="size-4" />
|
|
212
|
-
</SelectPrimitive.ScrollDownButton>
|
|
213
|
-
)
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
export {
|
|
217
|
-
Select,
|
|
218
|
-
SelectContent,
|
|
219
|
-
SelectGroup,
|
|
220
|
-
SelectItem,
|
|
221
|
-
SelectLabel,
|
|
222
|
-
SelectScrollDownButton,
|
|
223
|
-
SelectScrollUpButton,
|
|
224
|
-
SelectSeparator,
|
|
225
|
-
SelectTrigger,
|
|
226
|
-
SelectValue,
|
|
227
|
-
}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import * as SeparatorPrimitive from '@radix-ui/react-separator'
|
|
2
|
-
|
|
3
|
-
import * as React from 'react'
|
|
4
|
-
|
|
5
|
-
import { cn } from '@lib/utils'
|
|
6
|
-
|
|
7
|
-
const Separator = React.forwardRef<
|
|
8
|
-
React.ElementRef<typeof SeparatorPrimitive.Root>,
|
|
9
|
-
React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
|
|
10
|
-
>(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
|
|
11
|
-
<SeparatorPrimitive.Root
|
|
12
|
-
ref={ref}
|
|
13
|
-
decorative={decorative}
|
|
14
|
-
orientation={orientation}
|
|
15
|
-
className={cn('shrink-0 bg-border', orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]', className)}
|
|
16
|
-
{...props}
|
|
17
|
-
/>
|
|
18
|
-
))
|
|
19
|
-
Separator.displayName = SeparatorPrimitive.Root.displayName
|
|
20
|
-
|
|
21
|
-
export { Separator }
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { Separator } from './separator'
|
|
2
|
-
import React from 'react'
|
|
3
|
-
import { Meta, StoryObj } from '@storybook/react-vite'
|
|
4
|
-
|
|
5
|
-
const meta: Meta<typeof Separator> = {
|
|
6
|
-
title: 'Separator',
|
|
7
|
-
component: Separator,
|
|
8
|
-
tags: ['autodocs'],
|
|
9
|
-
argTypes: {
|
|
10
|
-
orientation: {
|
|
11
|
-
control: 'radio',
|
|
12
|
-
options: ['horizontal', 'vertical'],
|
|
13
|
-
},
|
|
14
|
-
},
|
|
15
|
-
}
|
|
16
|
-
export default meta
|
|
17
|
-
|
|
18
|
-
export const Default: StoryObj<typeof meta> = {
|
|
19
|
-
args: { orientation: 'horizontal' },
|
|
20
|
-
render: (args) => (
|
|
21
|
-
<div className="flex items-center justify-center h-56">
|
|
22
|
-
<Separator orientation={args.orientation} />
|
|
23
|
-
</div>
|
|
24
|
-
),
|
|
25
|
-
}
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
Sheet,
|
|
3
|
-
SheetClose,
|
|
4
|
-
SheetContent,
|
|
5
|
-
SheetDescription,
|
|
6
|
-
SheetFooter,
|
|
7
|
-
SheetHeader,
|
|
8
|
-
SheetTitle,
|
|
9
|
-
SheetTrigger,
|
|
10
|
-
} from './sheet'
|
|
11
|
-
import { Meta, StoryObj } from '@storybook/react-vite'
|
|
12
|
-
import { Button } from '@components/ui/button/button'
|
|
13
|
-
|
|
14
|
-
const meta: Meta<typeof Sheet> = {
|
|
15
|
-
title: 'Sheet',
|
|
16
|
-
component: Sheet,
|
|
17
|
-
tags: ['autodocs'],
|
|
18
|
-
parameters: {
|
|
19
|
-
layout: 'centered',
|
|
20
|
-
},
|
|
21
|
-
}
|
|
22
|
-
export default meta
|
|
23
|
-
|
|
24
|
-
export const Default: StoryObj<typeof meta> = {
|
|
25
|
-
render: () => (
|
|
26
|
-
<div className="flex items-center justify-center">
|
|
27
|
-
<Sheet>
|
|
28
|
-
<SheetTrigger asChild>
|
|
29
|
-
<Button variant="outline">Open</Button>
|
|
30
|
-
</SheetTrigger>
|
|
31
|
-
<SheetContent>
|
|
32
|
-
<SheetHeader>
|
|
33
|
-
<SheetTitle>Edit profile</SheetTitle>
|
|
34
|
-
<SheetDescription>Make changes to your profile here. Click save when you're done.</SheetDescription>
|
|
35
|
-
</SheetHeader>
|
|
36
|
-
<SheetFooter>
|
|
37
|
-
<SheetClose asChild>
|
|
38
|
-
<Button type="submit">Save changes</Button>
|
|
39
|
-
</SheetClose>
|
|
40
|
-
</SheetFooter>
|
|
41
|
-
</SheetContent>
|
|
42
|
-
</Sheet>
|
|
43
|
-
</div>
|
|
44
|
-
),
|
|
45
|
-
}
|
|
@@ -1,107 +0,0 @@
|
|
|
1
|
-
import * as SheetPrimitive from '@radix-ui/react-dialog'
|
|
2
|
-
import { Cross2Icon } from '@radix-ui/react-icons'
|
|
3
|
-
|
|
4
|
-
import { cva, type VariantProps } from 'class-variance-authority'
|
|
5
|
-
import * as React from 'react'
|
|
6
|
-
|
|
7
|
-
import { cn } from '@lib/utils'
|
|
8
|
-
|
|
9
|
-
const Sheet = SheetPrimitive.Root
|
|
10
|
-
|
|
11
|
-
const SheetTrigger = SheetPrimitive.Trigger
|
|
12
|
-
|
|
13
|
-
const SheetClose = SheetPrimitive.Close
|
|
14
|
-
|
|
15
|
-
const SheetPortal = SheetPrimitive.Portal
|
|
16
|
-
|
|
17
|
-
const SheetOverlay = React.forwardRef<
|
|
18
|
-
React.ElementRef<typeof SheetPrimitive.Overlay>,
|
|
19
|
-
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
|
|
20
|
-
>(({ className, ...props }, ref) => (
|
|
21
|
-
<SheetPrimitive.Overlay
|
|
22
|
-
className={cn(
|
|
23
|
-
'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
|
|
24
|
-
className,
|
|
25
|
-
)}
|
|
26
|
-
{...props}
|
|
27
|
-
ref={ref}
|
|
28
|
-
/>
|
|
29
|
-
))
|
|
30
|
-
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
|
|
31
|
-
|
|
32
|
-
const sheetVariants = cva(
|
|
33
|
-
'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out',
|
|
34
|
-
{
|
|
35
|
-
variants: {
|
|
36
|
-
side: {
|
|
37
|
-
top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
|
|
38
|
-
bottom:
|
|
39
|
-
'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
|
|
40
|
-
left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
|
|
41
|
-
right:
|
|
42
|
-
'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
|
|
43
|
-
},
|
|
44
|
-
},
|
|
45
|
-
defaultVariants: {
|
|
46
|
-
side: 'right',
|
|
47
|
-
},
|
|
48
|
-
},
|
|
49
|
-
)
|
|
50
|
-
|
|
51
|
-
type SheetContentProps = React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content> &
|
|
52
|
-
VariantProps<typeof sheetVariants>
|
|
53
|
-
|
|
54
|
-
const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Content>, SheetContentProps>(
|
|
55
|
-
({ side = 'right', className, children, ...props }, ref) => (
|
|
56
|
-
<SheetPortal>
|
|
57
|
-
<SheetOverlay />
|
|
58
|
-
<SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
|
|
59
|
-
<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
|
|
60
|
-
<Cross2Icon className="h-4 w-4" />
|
|
61
|
-
<span className="sr-only">Close</span>
|
|
62
|
-
</SheetPrimitive.Close>
|
|
63
|
-
{children}
|
|
64
|
-
</SheetPrimitive.Content>
|
|
65
|
-
</SheetPortal>
|
|
66
|
-
),
|
|
67
|
-
)
|
|
68
|
-
SheetContent.displayName = SheetPrimitive.Content.displayName
|
|
69
|
-
|
|
70
|
-
const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
|
|
71
|
-
<div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
|
|
72
|
-
)
|
|
73
|
-
SheetHeader.displayName = 'SheetHeader'
|
|
74
|
-
|
|
75
|
-
const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
|
|
76
|
-
<div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
|
|
77
|
-
)
|
|
78
|
-
SheetFooter.displayName = 'SheetFooter'
|
|
79
|
-
|
|
80
|
-
const SheetTitle = React.forwardRef<
|
|
81
|
-
React.ElementRef<typeof SheetPrimitive.Title>,
|
|
82
|
-
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
|
|
83
|
-
>(({ className, ...props }, ref) => (
|
|
84
|
-
<SheetPrimitive.Title ref={ref} className={cn('text-lg font-semibold text-foreground', className)} {...props} />
|
|
85
|
-
))
|
|
86
|
-
SheetTitle.displayName = SheetPrimitive.Title.displayName
|
|
87
|
-
|
|
88
|
-
const SheetDescription = React.forwardRef<
|
|
89
|
-
React.ElementRef<typeof SheetPrimitive.Description>,
|
|
90
|
-
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
|
|
91
|
-
>(({ className, ...props }, ref) => (
|
|
92
|
-
<SheetPrimitive.Description ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
|
|
93
|
-
))
|
|
94
|
-
SheetDescription.displayName = SheetPrimitive.Description.displayName
|
|
95
|
-
|
|
96
|
-
export {
|
|
97
|
-
Sheet,
|
|
98
|
-
SheetPortal,
|
|
99
|
-
SheetOverlay,
|
|
100
|
-
SheetTrigger,
|
|
101
|
-
SheetClose,
|
|
102
|
-
SheetContent,
|
|
103
|
-
SheetHeader,
|
|
104
|
-
SheetFooter,
|
|
105
|
-
SheetTitle,
|
|
106
|
-
SheetDescription,
|
|
107
|
-
}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { Skeleton } from './skeleton'
|
|
2
|
-
import { Meta, StoryObj } from '@storybook/react-vite'
|
|
3
|
-
|
|
4
|
-
const meta: Meta<typeof Skeleton> = {
|
|
5
|
-
title: 'Skeleton',
|
|
6
|
-
component: Skeleton,
|
|
7
|
-
tags: ['autodocs'],
|
|
8
|
-
parameters: {
|
|
9
|
-
layout: 'centered',
|
|
10
|
-
},
|
|
11
|
-
}
|
|
12
|
-
export default meta
|
|
13
|
-
|
|
14
|
-
export const Default: StoryObj<typeof meta> = {
|
|
15
|
-
render: (args) => (
|
|
16
|
-
<div className="flex items-center justify-center">
|
|
17
|
-
<div className="flex flex-col space-y-3">
|
|
18
|
-
<Skeleton className="h-[125px] w-[250px] rounded-xl" />
|
|
19
|
-
<div className="space-y-2">
|
|
20
|
-
<Skeleton className="h-4 w-[250px]" />
|
|
21
|
-
<Skeleton className="h-4 w-[200px]" />
|
|
22
|
-
</div>
|
|
23
|
-
</div>
|
|
24
|
-
</div>
|
|
25
|
-
),
|
|
26
|
-
}
|
|
@@ -1,101 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react-vite'
|
|
2
|
-
import { expect, userEvent, screen } from 'storybook/test'
|
|
3
|
-
import { useState } from 'react'
|
|
4
|
-
import { Slider } from './slider'
|
|
5
|
-
|
|
6
|
-
const meta = {
|
|
7
|
-
title: 'Slider',
|
|
8
|
-
component: Slider,
|
|
9
|
-
parameters: {
|
|
10
|
-
layout: 'centered',
|
|
11
|
-
},
|
|
12
|
-
tags: ['autodocs'],
|
|
13
|
-
argTypes: {
|
|
14
|
-
min: { control: 'number' },
|
|
15
|
-
max: { control: 'number' },
|
|
16
|
-
step: { control: 'number' },
|
|
17
|
-
defaultValue: { control: 'object' },
|
|
18
|
-
sliderVariant: {
|
|
19
|
-
control: 'select',
|
|
20
|
-
options: ['default', 'gray'],
|
|
21
|
-
},
|
|
22
|
-
knobVariant: {
|
|
23
|
-
control: 'select',
|
|
24
|
-
options: ['default', 'gray'],
|
|
25
|
-
},
|
|
26
|
-
},
|
|
27
|
-
args: {
|
|
28
|
-
min: 0,
|
|
29
|
-
max: 100,
|
|
30
|
-
step: 1,
|
|
31
|
-
defaultValue: [25],
|
|
32
|
-
sliderVariant: 'default',
|
|
33
|
-
knobVariant: 'default',
|
|
34
|
-
},
|
|
35
|
-
} satisfies Meta<typeof Slider>
|
|
36
|
-
|
|
37
|
-
export default meta
|
|
38
|
-
|
|
39
|
-
type Story = StoryObj<typeof meta>
|
|
40
|
-
|
|
41
|
-
export const Default: Story = {
|
|
42
|
-
args: {
|
|
43
|
-
defaultValue: [25],
|
|
44
|
-
className: 'w-64',
|
|
45
|
-
},
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
export const Variants: Story = {
|
|
49
|
-
render: () => {
|
|
50
|
-
return (
|
|
51
|
-
<div className="space-y-4">
|
|
52
|
-
<div className="flex flex-col items-center space-y-2">
|
|
53
|
-
<Slider defaultValue={[25]} className="w-64" />
|
|
54
|
-
<span>Default</span>
|
|
55
|
-
</div>
|
|
56
|
-
<div className="flex flex-col items-center space-y-2">
|
|
57
|
-
<Slider defaultValue={[25, 75]} className="w-64" />
|
|
58
|
-
<span>Range</span>
|
|
59
|
-
</div>
|
|
60
|
-
<div className="flex flex-col items-center space-y-2">
|
|
61
|
-
<Slider defaultValue={[25]} sliderVariant="gray" className="w-64" />
|
|
62
|
-
<span>Gray Slider</span>
|
|
63
|
-
</div>
|
|
64
|
-
<div className="flex flex-col items-center space-y-2">
|
|
65
|
-
<Slider defaultValue={[25]} knobVariant="gray" className="w-64" />
|
|
66
|
-
<span>Gray Knob</span>
|
|
67
|
-
</div>
|
|
68
|
-
<div className="flex flex-col items-center space-y-2">
|
|
69
|
-
<Slider defaultValue={[25]} sliderVariant="gray" knobVariant="gray" className="w-64" />
|
|
70
|
-
<span>Gray Both</span>
|
|
71
|
-
</div>
|
|
72
|
-
</div>
|
|
73
|
-
)
|
|
74
|
-
},
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
export const InteractiveTest: Story = {
|
|
78
|
-
render: () => {
|
|
79
|
-
const [value, setValue] = useState<number[]>([30])
|
|
80
|
-
return (
|
|
81
|
-
<div className="space-y-4">
|
|
82
|
-
<Slider value={value} onValueChange={setValue} className="w-64" data-testid="controlled-slider" />
|
|
83
|
-
<p data-testid="slider-value">Value: {value}</p>
|
|
84
|
-
</div>
|
|
85
|
-
)
|
|
86
|
-
},
|
|
87
|
-
play: async () => {
|
|
88
|
-
// Find the slider
|
|
89
|
-
const slider = screen.getByTestId('controlled-slider')
|
|
90
|
-
const valueText = screen.getByTestId('slider-value')
|
|
91
|
-
|
|
92
|
-
// Get the thumb and track to simulate interactions
|
|
93
|
-
const thumb = slider.querySelector('[data-orientation]')
|
|
94
|
-
|
|
95
|
-
// Click on a different position on the slider
|
|
96
|
-
await userEvent.click(screen.getByTestId('controlled-slider'))
|
|
97
|
-
|
|
98
|
-
// Check if the value updates (approximate check)
|
|
99
|
-
await expect(valueText.textContent).toBe('Value: 0')
|
|
100
|
-
},
|
|
101
|
-
}
|
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
import * as SliderPrimitive from '@radix-ui/react-slider'
|
|
2
|
-
|
|
3
|
-
import { cva, type VariantProps } from 'class-variance-authority'
|
|
4
|
-
import type { CSSProperties } from 'react'
|
|
5
|
-
import * as React from 'react'
|
|
6
|
-
|
|
7
|
-
import { cn } from '@lib/utils'
|
|
8
|
-
|
|
9
|
-
const sliderVariants = cva('absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full', {
|
|
10
|
-
variants: {
|
|
11
|
-
sliderVariant: {
|
|
12
|
-
default: 'bg-primary',
|
|
13
|
-
gray: 'bg-muted-foreground',
|
|
14
|
-
},
|
|
15
|
-
},
|
|
16
|
-
defaultVariants: {
|
|
17
|
-
sliderVariant: 'default',
|
|
18
|
-
},
|
|
19
|
-
})
|
|
20
|
-
|
|
21
|
-
const knobVariants = cva(
|
|
22
|
-
'bg-background block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',
|
|
23
|
-
{
|
|
24
|
-
variants: {
|
|
25
|
-
knobVariant: {
|
|
26
|
-
default: 'border-primary ring-ring/50 hover:ring-4 focus-visible:ring-4',
|
|
27
|
-
gray: 'border-muted-foreground border-2',
|
|
28
|
-
},
|
|
29
|
-
},
|
|
30
|
-
defaultVariants: {
|
|
31
|
-
knobVariant: 'default',
|
|
32
|
-
},
|
|
33
|
-
},
|
|
34
|
-
)
|
|
35
|
-
|
|
36
|
-
type SliderProps = React.ComponentProps<typeof SliderPrimitive.Root> &
|
|
37
|
-
VariantProps<typeof sliderVariants> &
|
|
38
|
-
VariantProps<typeof knobVariants> & { knobSize?: number }
|
|
39
|
-
|
|
40
|
-
function Slider({
|
|
41
|
-
className,
|
|
42
|
-
defaultValue,
|
|
43
|
-
value,
|
|
44
|
-
min = 0,
|
|
45
|
-
max = 100,
|
|
46
|
-
sliderVariant,
|
|
47
|
-
knobVariant,
|
|
48
|
-
knobSize,
|
|
49
|
-
...props
|
|
50
|
-
}: SliderProps) {
|
|
51
|
-
const _values = React.useMemo(() => {
|
|
52
|
-
if (Array.isArray(value)) {
|
|
53
|
-
return value
|
|
54
|
-
} else if (Array.isArray(defaultValue)) {
|
|
55
|
-
return defaultValue
|
|
56
|
-
}
|
|
57
|
-
return [min, max]
|
|
58
|
-
}, [value, defaultValue, min, max])
|
|
59
|
-
|
|
60
|
-
return (
|
|
61
|
-
<SliderPrimitive.Root
|
|
62
|
-
data-slot="slider"
|
|
63
|
-
defaultValue={defaultValue}
|
|
64
|
-
value={value}
|
|
65
|
-
min={min}
|
|
66
|
-
max={max}
|
|
67
|
-
className={cn(
|
|
68
|
-
'cursor-pointer relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
|
|
69
|
-
className,
|
|
70
|
-
)}
|
|
71
|
-
{...props}
|
|
72
|
-
>
|
|
73
|
-
<SliderPrimitive.Track
|
|
74
|
-
data-slot="slider-track"
|
|
75
|
-
className={cn(
|
|
76
|
-
'bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5',
|
|
77
|
-
)}
|
|
78
|
-
>
|
|
79
|
-
<SliderPrimitive.Range data-slot="slider-range" className={cn(sliderVariants({ sliderVariant }))} />
|
|
80
|
-
</SliderPrimitive.Track>
|
|
81
|
-
{Array.from({ length: _values.length }, (_, index) => (
|
|
82
|
-
<SliderPrimitive.Thumb
|
|
83
|
-
data-slot="slider-thumb"
|
|
84
|
-
key={index}
|
|
85
|
-
className={cn(
|
|
86
|
-
knobVariants({
|
|
87
|
-
knobVariant,
|
|
88
|
-
}),
|
|
89
|
-
knobSize ? 'size-(--knob-size)' : '',
|
|
90
|
-
)}
|
|
91
|
-
style={{ '--knob-size': `${knobSize}px` } as CSSProperties}
|
|
92
|
-
/>
|
|
93
|
-
))}
|
|
94
|
-
</SliderPrimitive.Root>
|
|
95
|
-
)
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
export { Slider, sliderVariants, knobVariants }
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react-vite'
|
|
2
|
-
import { Spinner } from './spinner'
|
|
3
|
-
|
|
4
|
-
const meta = {
|
|
5
|
-
title: 'Spinner',
|
|
6
|
-
component: Spinner,
|
|
7
|
-
parameters: {
|
|
8
|
-
layout: 'centered',
|
|
9
|
-
},
|
|
10
|
-
tags: ['autodocs'],
|
|
11
|
-
} satisfies Meta<typeof Spinner>
|
|
12
|
-
|
|
13
|
-
export default meta
|
|
14
|
-
|
|
15
|
-
type Story = StoryObj<typeof meta>
|
|
16
|
-
|
|
17
|
-
export const Default: Story = {
|
|
18
|
-
render: () => <Spinner classNames="w-8 h-8" />,
|
|
19
|
-
}
|