@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.
Files changed (161) hide show
  1. package/dist/frontend-core/frontend.generator.d.ts +0 -58
  2. package/dist/frontend-core/frontend.generator.js +6 -172
  3. package/dist/frontend-core/frontend.generator.js.map +1 -1
  4. package/dist/frontend-core/template/README.md +1 -1
  5. package/dist/frontend-core/template/src/components/admin/table-filter.tsx +1 -5
  6. package/dist/frontend-core/template/src/components/ui/color-mode-toggle/color-mode-toggle.tsx +10 -4
  7. package/dist/frontend-core/template/src/pages/dashboard/dashboard.page.tsx +2 -3
  8. package/dist/frontend-core/template/src/pages/error/default-error.page.tsx +1 -1
  9. package/dist/frontend-core/template/src/pages/error/not-found-error.page.tsx +1 -1
  10. package/dist/frontend-core/template/src/styles/styles.css +13 -1
  11. package/dist/frontend-core/template/tsconfig.json +2 -0
  12. package/dist/frontend-core/types/component.d.ts +1 -1
  13. package/dist/frontend-forms/generators/discriminated-union/fields.generator.js +4 -6
  14. package/dist/frontend-forms/generators/discriminated-union/fields.generator.js.map +1 -1
  15. package/dist/frontend-forms/generators/discriminated-union/inputs.generator.js +1 -1
  16. package/dist/frontend-forms/generators/discriminated-union/inputs.generator.js.map +1 -1
  17. package/dist/frontend-forms/generators/enum/inputs.generator.js +1 -1
  18. package/dist/frontend-forms/generators/enum/inputs.generator.js.map +1 -1
  19. package/dist/frontend-forms/generators/model/forms.generator.js +8 -12
  20. package/dist/frontend-forms/generators/model/forms.generator.js.map +1 -1
  21. package/dist/frontend-forms/generators/model/inputs.generator.js +2 -6
  22. package/dist/frontend-forms/generators/model/inputs.generator.js.map +1 -1
  23. package/dist/frontend-forms/template/src/components/ui/field/field.tsx +1 -4
  24. package/dist/frontend-tables/generators/model-table.generator.js +1 -5
  25. package/dist/frontend-tables/generators/model-table.generator.js.map +1 -1
  26. package/package.json +3 -2
  27. package/dist/frontend-core/template/src/components/ui/accordion/accordion.stories.tsx +0 -47
  28. package/dist/frontend-core/template/src/components/ui/accordion/accordion.tsx +0 -52
  29. package/dist/frontend-core/template/src/components/ui/admin-sidebar/admin-sidebar.tsx +0 -195
  30. package/dist/frontend-core/template/src/components/ui/alert/alert.stories.tsx +0 -61
  31. package/dist/frontend-core/template/src/components/ui/alert/alert.tsx +0 -45
  32. package/dist/frontend-core/template/src/components/ui/alert-dialog/alert-dialog.stories.tsx +0 -52
  33. package/dist/frontend-core/template/src/components/ui/alert-dialog/alert-dialog.tsx +0 -105
  34. package/dist/frontend-core/template/src/components/ui/avatar/avatar.stories.tsx +0 -30
  35. package/dist/frontend-core/template/src/components/ui/avatar/avatar.tsx +0 -39
  36. package/dist/frontend-core/template/src/components/ui/badge/badge.stories.tsx +0 -78
  37. package/dist/frontend-core/template/src/components/ui/badge/badge.tsx +0 -48
  38. package/dist/frontend-core/template/src/components/ui/breadcrumb/breadcrumb.stories.tsx +0 -67
  39. package/dist/frontend-core/template/src/components/ui/breadcrumb/breadcrumb.tsx +0 -85
  40. package/dist/frontend-core/template/src/components/ui/button/button.stories.tsx +0 -150
  41. package/dist/frontend-core/template/src/components/ui/button/button.tsx +0 -68
  42. package/dist/frontend-core/template/src/components/ui/calendar/calendar.stories.tsx +0 -160
  43. package/dist/frontend-core/template/src/components/ui/calendar/calendar.tsx +0 -293
  44. package/dist/frontend-core/template/src/components/ui/card/card.stories.tsx +0 -77
  45. package/dist/frontend-core/template/src/components/ui/card/card.tsx +0 -45
  46. package/dist/frontend-core/template/src/components/ui/card-hover/card-hover.stories.tsx +0 -29
  47. package/dist/frontend-core/template/src/components/ui/card-hover/card-hover.tsx +0 -28
  48. package/dist/frontend-core/template/src/components/ui/carousel/carousel.stories.tsx +0 -154
  49. package/dist/frontend-core/template/src/components/ui/carousel/carousel.tsx +0 -227
  50. package/dist/frontend-core/template/src/components/ui/checkbox/checkbox.stories.tsx +0 -106
  51. package/dist/frontend-core/template/src/components/ui/checkbox/checkbox.tsx +0 -88
  52. package/dist/frontend-core/template/src/components/ui/checkbox/shadcn-checkbox.stories.tsx +0 -90
  53. package/dist/frontend-core/template/src/components/ui/checkbox/shadcn-checkbox.tsx +0 -54
  54. package/dist/frontend-core/template/src/components/ui/collapse/collapse.stories.tsx +0 -52
  55. package/dist/frontend-core/template/src/components/ui/collapse/collapse.tsx +0 -9
  56. package/dist/frontend-core/template/src/components/ui/combobox/combobox.stories.tsx +0 -207
  57. package/dist/frontend-core/template/src/components/ui/combobox/combobox.tsx +0 -79
  58. package/dist/frontend-core/template/src/components/ui/command/command.stories.tsx +0 -186
  59. package/dist/frontend-core/template/src/components/ui/command/command.tsx +0 -165
  60. package/dist/frontend-core/template/src/components/ui/command-palette/command-palette.stories.tsx +0 -160
  61. package/dist/frontend-core/template/src/components/ui/command-palette/command-palette.tsx +0 -134
  62. package/dist/frontend-core/template/src/components/ui/content-frame/content-frame.stories.tsx +0 -198
  63. package/dist/frontend-core/template/src/components/ui/content-frame/content-frame.tsx +0 -100
  64. package/dist/frontend-core/template/src/components/ui/context-menu/context-menu.stories.tsx +0 -78
  65. package/dist/frontend-core/template/src/components/ui/context-menu/context-menu.tsx +0 -179
  66. package/dist/frontend-core/template/src/components/ui/data-grid/cell-variants/cell-variant-types.ts +0 -11
  67. package/dist/frontend-core/template/src/components/ui/data-grid/cell-variants/checkbox-cell.tsx +0 -116
  68. package/dist/frontend-core/template/src/components/ui/data-grid/cell-variants/date-cell.tsx +0 -157
  69. package/dist/frontend-core/template/src/components/ui/data-grid/cell-variants/gantt-cell.tsx +0 -82
  70. package/dist/frontend-core/template/src/components/ui/data-grid/cell-variants/long-text-cell.tsx +0 -180
  71. package/dist/frontend-core/template/src/components/ui/data-grid/cell-variants/multi-select-cell.tsx +0 -280
  72. package/dist/frontend-core/template/src/components/ui/data-grid/cell-variants/number-cell.tsx +0 -169
  73. package/dist/frontend-core/template/src/components/ui/data-grid/cell-variants/react-node-cell.tsx +0 -33
  74. package/dist/frontend-core/template/src/components/ui/data-grid/cell-variants/select-cell.tsx +0 -175
  75. package/dist/frontend-core/template/src/components/ui/data-grid/cell-variants/short-text-cell.tsx +0 -138
  76. package/dist/frontend-core/template/src/components/ui/data-grid/cell-variants/utils/gantt-timeline.tsx +0 -92
  77. package/dist/frontend-core/template/src/components/ui/data-grid/cell-variants/utils/gantt-timerange-picker.tsx +0 -330
  78. package/dist/frontend-core/template/src/components/ui/data-grid/data-grid-cell-wrapper.tsx +0 -212
  79. package/dist/frontend-core/template/src/components/ui/data-grid/data-grid-cell.tsx +0 -157
  80. package/dist/frontend-core/template/src/components/ui/data-grid/data-grid-column-header.tsx +0 -340
  81. package/dist/frontend-core/template/src/components/ui/data-grid/data-grid-context-menu.tsx +0 -271
  82. package/dist/frontend-core/template/src/components/ui/data-grid/data-grid-row.tsx +0 -123
  83. package/dist/frontend-core/template/src/components/ui/data-grid/data-grid-search.tsx +0 -211
  84. package/dist/frontend-core/template/src/components/ui/data-grid/data-grid-types.ts +0 -159
  85. package/dist/frontend-core/template/src/components/ui/data-grid/data-grid-utils.ts +0 -67
  86. package/dist/frontend-core/template/src/components/ui/data-grid/data-grid-view-menu.tsx +0 -360
  87. package/dist/frontend-core/template/src/components/ui/data-grid/data-grid.stories.tsx +0 -780
  88. package/dist/frontend-core/template/src/components/ui/data-grid/data-grid.tsx +0 -217
  89. package/dist/frontend-core/template/src/components/ui/data-grid/hooks/use-callback-ref.ts +0 -22
  90. package/dist/frontend-core/template/src/components/ui/data-grid/hooks/use-data-grid.tsx +0 -1892
  91. package/dist/frontend-core/template/src/components/ui/data-grid/hooks/use-debounced-callback.ts +0 -19
  92. package/dist/frontend-core/template/src/components/ui/data-grid/styles.css +0 -3
  93. package/dist/frontend-core/template/src/components/ui/data-table/context-menu-simple.tsx +0 -141
  94. package/dist/frontend-core/template/src/components/ui/data-table/data-table.stories.tsx +0 -146
  95. package/dist/frontend-core/template/src/components/ui/data-table/data-table.tsx +0 -447
  96. package/dist/frontend-core/template/src/components/ui/data-table/renderers/country-array-cell-renderer.tsx +0 -77
  97. package/dist/frontend-core/template/src/components/ui/data-table/renderers/country-cell-renderer.tsx +0 -56
  98. package/dist/frontend-core/template/src/components/ui/data-table/renderers/favorite-cell-renderer.tsx +0 -68
  99. package/dist/frontend-core/template/src/components/ui/data-table/renderers/links-cell-renderer.tsx +0 -205
  100. package/dist/frontend-core/template/src/components/ui/data-table/utils/columns.ts +0 -351
  101. package/dist/frontend-core/template/src/components/ui/data-table/utils/data-table.utils.ts +0 -49
  102. package/dist/frontend-core/template/src/components/ui/date-picker/date-picker.stories.tsx +0 -149
  103. package/dist/frontend-core/template/src/components/ui/date-picker/date-picker.tsx +0 -30
  104. package/dist/frontend-core/template/src/components/ui/dialog/dialog.stories.tsx +0 -80
  105. package/dist/frontend-core/template/src/components/ui/dialog/dialog.tsx +0 -134
  106. package/dist/frontend-core/template/src/components/ui/drawer/drawer.stories.tsx +0 -104
  107. package/dist/frontend-core/template/src/components/ui/drawer/drawer.tsx +0 -87
  108. package/dist/frontend-core/template/src/components/ui/dropdown-menu/dropdown-menu.stories.tsx +0 -168
  109. package/dist/frontend-core/template/src/components/ui/dropdown-menu/dropdown-menu.tsx +0 -225
  110. package/dist/frontend-core/template/src/components/ui/input/input.stories.tsx +0 -141
  111. package/dist/frontend-core/template/src/components/ui/input/input.tsx +0 -47
  112. package/dist/frontend-core/template/src/components/ui/label/label.stories.tsx +0 -41
  113. package/dist/frontend-core/template/src/components/ui/label/label.tsx +0 -20
  114. package/dist/frontend-core/template/src/components/ui/loader/loader.stories.tsx +0 -45
  115. package/dist/frontend-core/template/src/components/ui/loader/loader.tsx +0 -17
  116. package/dist/frontend-core/template/src/components/ui/mark-value-renderer/mark-value-renderer.stories.tsx +0 -114
  117. package/dist/frontend-core/template/src/components/ui/mark-value-renderer/mark-value-renderer.tsx +0 -48
  118. package/dist/frontend-core/template/src/components/ui/menubar/menu.stories.tsx +0 -134
  119. package/dist/frontend-core/template/src/components/ui/menubar/menubar.tsx +0 -208
  120. package/dist/frontend-core/template/src/components/ui/modal/modal.stories.tsx +0 -297
  121. package/dist/frontend-core/template/src/components/ui/modal/modal.tsx +0 -80
  122. package/dist/frontend-core/template/src/components/ui/navigation-menu/navigation-menu.stories.tsx +0 -213
  123. package/dist/frontend-core/template/src/components/ui/navigation-menu/navigation-menu.tsx +0 -142
  124. package/dist/frontend-core/template/src/components/ui/pagination/pagination.stories.tsx +0 -49
  125. package/dist/frontend-core/template/src/components/ui/pagination/pagination.tsx +0 -84
  126. package/dist/frontend-core/template/src/components/ui/popover/popover.stories.tsx +0 -82
  127. package/dist/frontend-core/template/src/components/ui/popover/popover.tsx +0 -55
  128. package/dist/frontend-core/template/src/components/ui/progress/progress.stories.tsx +0 -80
  129. package/dist/frontend-core/template/src/components/ui/progress/progress.tsx +0 -17
  130. package/dist/frontend-core/template/src/components/ui/radio-group/radio-group.stories.tsx +0 -154
  131. package/dist/frontend-core/template/src/components/ui/radio-group/radio-group.tsx +0 -68
  132. package/dist/frontend-core/template/src/components/ui/resizable/resizable.stories.tsx +0 -73
  133. package/dist/frontend-core/template/src/components/ui/resizable/resizeable.tsx +0 -38
  134. package/dist/frontend-core/template/src/components/ui/scroll-area/scroll-area.stories.tsx +0 -55
  135. package/dist/frontend-core/template/src/components/ui/scroll-area/scroll-area.tsx +0 -39
  136. package/dist/frontend-core/template/src/components/ui/select/select.stories.tsx +0 -297
  137. package/dist/frontend-core/template/src/components/ui/select/select.tsx +0 -227
  138. package/dist/frontend-core/template/src/components/ui/separator/separator.tsx +0 -21
  139. package/dist/frontend-core/template/src/components/ui/separator/seperator.stories.tsx +0 -25
  140. package/dist/frontend-core/template/src/components/ui/sheet/sheet.stories.tsx +0 -45
  141. package/dist/frontend-core/template/src/components/ui/sheet/sheet.tsx +0 -107
  142. package/dist/frontend-core/template/src/components/ui/skeleton/skeleton.stories.tsx +0 -26
  143. package/dist/frontend-core/template/src/components/ui/skeleton/skeleton.tsx +0 -7
  144. package/dist/frontend-core/template/src/components/ui/slider/slider.stories.tsx +0 -101
  145. package/dist/frontend-core/template/src/components/ui/slider/slider.tsx +0 -98
  146. package/dist/frontend-core/template/src/components/ui/spinner/spinner.stories.tsx +0 -19
  147. package/dist/frontend-core/template/src/components/ui/spinner/spinner.tsx +0 -21
  148. package/dist/frontend-core/template/src/components/ui/switch/switch.stories.tsx +0 -33
  149. package/dist/frontend-core/template/src/components/ui/switch/switch.tsx +0 -28
  150. package/dist/frontend-core/template/src/components/ui/tabs/tabs.stories.tsx +0 -215
  151. package/dist/frontend-core/template/src/components/ui/tabs/tabs.tsx +0 -70
  152. package/dist/frontend-core/template/src/components/ui/textarea/textarea.stories.tsx +0 -138
  153. package/dist/frontend-core/template/src/components/ui/textarea/textarea.tsx +0 -40
  154. package/dist/frontend-core/template/src/components/ui/toast/toast.mdx +0 -31
  155. package/dist/frontend-core/template/src/components/ui/toast/toast.stories.tsx +0 -89
  156. package/dist/frontend-core/template/src/components/ui/toggle/toggle.stories.tsx +0 -65
  157. package/dist/frontend-core/template/src/components/ui/toggle/toggle.tsx +0 -38
  158. package/dist/frontend-core/template/src/components/ui/toggle-group/toggle-group.stories.tsx +0 -85
  159. package/dist/frontend-core/template/src/components/ui/toggle-group/toggle-group.tsx +0 -54
  160. package/dist/frontend-core/template/src/components/ui/tooltip/tooltip.stories.tsx +0 -29
  161. 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,7 +0,0 @@
1
- import { cn } from '@lib/utils'
2
-
3
- function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
4
- return <div className={cn('animate-pulse rounded-md bg-primary/10', className)} {...props} />
5
- }
6
-
7
- export { Skeleton }
@@ -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
- }