buildgrid-ui 1.1.0-dev.8 → 1.1.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/blocks/help-carousel/help-carousel.d.ts +9 -0
- package/dist/blocks/help-carousel/index.d.ts +1 -0
- package/dist/blocks/index.d.ts +4 -0
- package/dist/blocks/month-navigator/index.d.ts +1 -0
- package/dist/blocks/month-navigator/month-navigator.d.ts +9 -0
- package/dist/blocks/pagination-controls/index.d.ts +1 -0
- package/dist/blocks/pagination-controls/pagination-controls.d.ts +7 -0
- package/dist/blocks/sidebar/index.d.ts +1 -0
- package/dist/blocks/sidebar/sidebar.d.ts +26 -0
- package/dist/buildgrid-ui.es.js +10607 -4877
- package/dist/buildgrid-ui.umd.js +134 -63
- package/dist/components/adaptive-input/index.d.ts +1 -0
- package/dist/components/alert-dialog/alert-dialog.d.ts +20 -0
- package/dist/components/alert-dialog/index.d.ts +1 -0
- package/dist/components/autocomplete/autocomplete.d.ts +1 -0
- package/dist/components/badge/badge.d.ts +1 -1
- package/dist/components/button/button.d.ts +1 -1
- package/dist/components/calendar/calendar.d.ts +8 -0
- package/dist/components/calendar/index.d.ts +1 -0
- package/dist/components/currency-input/currency-input.d.ts +1 -1
- package/dist/components/dialog/dialog.d.ts +19 -0
- package/dist/components/dialog/index.d.ts +1 -0
- package/dist/components/index.d.ts +16 -1
- package/dist/components/label/index.d.ts +1 -0
- package/dist/components/label/label.d.ts +5 -0
- package/dist/components/navigation-menu/index.d.ts +1 -0
- package/dist/components/navigation-menu/navigation-menu.d.ts +12 -0
- package/dist/components/pagination/index.d.ts +1 -0
- package/dist/components/pagination/pagination.d.ts +28 -0
- package/dist/components/radio-group/index.d.ts +1 -0
- package/dist/components/radio-group/radio-group.d.ts +5 -0
- package/dist/components/select/index.d.ts +1 -0
- package/dist/components/select/select.d.ts +13 -0
- package/dist/components/table/index.d.ts +1 -0
- package/dist/components/table/table.d.ts +10 -0
- package/dist/components/tabs/index.d.ts +1 -0
- package/dist/components/tabs/tabs.d.ts +7 -0
- package/dist/components/textarea/index.d.ts +1 -0
- package/dist/components/textarea/textarea.d.ts +3 -0
- package/dist/components/toaster/index.d.ts +2 -0
- package/dist/components/toaster/toaster.d.ts +9 -0
- package/dist/components/toggle/index.d.ts +1 -0
- package/dist/components/toggle/toggle.d.ts +12 -0
- package/dist/components/toggle-group/index.d.ts +1 -0
- package/dist/components/toggle-group/toggle-group.d.ts +12 -0
- package/dist/components/tooltip/index.d.ts +1 -0
- package/dist/components/tooltip/tooltip.d.ts +7 -0
- package/dist/index.d.ts +3 -1
- package/dist/lib/hooks/index.d.ts +5 -0
- package/dist/lib/hooks/use-debounce.d.ts +2 -0
- package/dist/lib/hooks/use-dialog.d.ts +30 -0
- package/dist/lib/hooks/use-media-query.d.ts +1 -0
- package/dist/lib/hooks/use-mobile.d.ts +1 -0
- package/dist/lib/hooks/use-pwa-install.d.ts +7 -0
- package/dist/lib/utils/index.d.ts +2 -0
- package/package.json +19 -2
- package/.editorconfig +0 -5
- package/.eslintrc.json +0 -3
- package/.github/workflows/release.yml +0 -25
- package/.husky/commit-msg +0 -1
- package/.prettierignore +0 -6
- package/.prettierrc +0 -6
- package/.releaserc.json +0 -40
- package/.storybook/main.ts +0 -26
- package/.storybook/preview.ts +0 -15
- package/CHANGELOG.md +0 -53
- package/commitlint.config.js +0 -3
- package/components.json +0 -21
- package/dist/components/adaptative-input/index.d.ts +0 -1
- package/dist/lib/index.d.ts +0 -2
- package/eslint.config.mjs +0 -13
- package/postcss.config.js +0 -6
- package/src/components/adaptative-input/adaptative-input.stories.tsx +0 -31
- package/src/components/adaptative-input/adaptative-input.tsx +0 -66
- package/src/components/adaptative-input/index.ts +0 -1
- package/src/components/autocomplete/autocomplete.stories.tsx +0 -84
- package/src/components/autocomplete/autocomplete.tsx +0 -136
- package/src/components/autocomplete/index.ts +0 -1
- package/src/components/avatar/avatar.stories.tsx +0 -29
- package/src/components/avatar/avatar.tsx +0 -48
- package/src/components/avatar/index.ts +0 -1
- package/src/components/badge/badge.stories.tsx +0 -30
- package/src/components/badge/badge.tsx +0 -34
- package/src/components/badge/index.ts +0 -1
- package/src/components/button/button.stories.tsx +0 -62
- package/src/components/button/button.tsx +0 -82
- package/src/components/button/index.ts +0 -1
- package/src/components/card/card.stories.tsx +0 -41
- package/src/components/card/card.tsx +0 -61
- package/src/components/card/index.ts +0 -1
- package/src/components/checkbox/checkbox.stories.tsx +0 -36
- package/src/components/checkbox/checkbox.tsx +0 -28
- package/src/components/checkbox/index.ts +0 -1
- package/src/components/currency-input/currency-input.stories.tsx +0 -28
- package/src/components/currency-input/currency-input.tsx +0 -93
- package/src/components/currency-input/index.ts +0 -1
- package/src/components/dropdown-menu/dropdown-menu.stories.tsx +0 -90
- package/src/components/dropdown-menu/dropdown-menu.tsx +0 -192
- package/src/components/dropdown-menu/index.ts +0 -1
- package/src/components/index.ts +0 -15
- package/src/components/input/index.ts +0 -1
- package/src/components/input/input.stories.tsx +0 -22
- package/src/components/input/input.tsx +0 -41
- package/src/components/password-input/index.ts +0 -1
- package/src/components/password-input/password-input.stories.tsx +0 -26
- package/src/components/password-input/password-input.tsx +0 -98
- package/src/components/popover/index.ts +0 -1
- package/src/components/popover/popover.stories.tsx +0 -32
- package/src/components/popover/popover.tsx +0 -30
- package/src/components/progress/index.ts +0 -1
- package/src/components/progress/progress.stories.tsx +0 -21
- package/src/components/progress/progress.tsx +0 -26
- package/src/components/skeleton/index.ts +0 -1
- package/src/components/skeleton/skeleton.stories.tsx +0 -24
- package/src/components/skeleton/skeleton.tsx +0 -19
- package/src/components/switch/index.ts +0 -1
- package/src/components/switch/switch.stories.tsx +0 -21
- package/src/components/switch/switch.tsx +0 -26
- package/src/index.ts +0 -2
- package/src/lib/index.ts +0 -2
- package/src/lib/utils/cn.ts +0 -6
- package/src/lib/utils/formatters.ts +0 -55
- package/src/styles/tailwind.css +0 -66
- package/tailwind.config.js +0 -57
- package/tsconfig.app.json +0 -10
- package/tsconfig.json +0 -29
- package/vite.config.ts +0 -34
- /package/dist/components/{adaptative-input/adaptative-input.d.ts → adaptive-input/adaptive-input.d.ts} +0 -0
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
import { Slot } from '@radix-ui/react-slot'
|
|
2
|
-
import { cva, type VariantProps } from 'class-variance-authority'
|
|
3
|
-
import * as React from 'react'
|
|
4
|
-
import { cn } from '../../lib/utils/cn'
|
|
5
|
-
|
|
6
|
-
const buttonVariants = cva(
|
|
7
|
-
'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
|
|
8
|
-
{
|
|
9
|
-
variants: {
|
|
10
|
-
variant: {
|
|
11
|
-
default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
|
|
12
|
-
destructive:
|
|
13
|
-
'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
|
|
14
|
-
outline:
|
|
15
|
-
'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
|
|
16
|
-
secondary:
|
|
17
|
-
'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
|
|
18
|
-
ghost: 'hover:bg-accent hover:text-accent-foreground',
|
|
19
|
-
link: 'text-primary underline-offset-4 hover:underline',
|
|
20
|
-
},
|
|
21
|
-
size: {
|
|
22
|
-
default: 'h-9 px-4 py-2',
|
|
23
|
-
sm: 'h-8 rounded-md px-3 text-xs',
|
|
24
|
-
lg: 'h-10 rounded-md px-8',
|
|
25
|
-
xl: 'h-12 rounded-md px-10 text-xl',
|
|
26
|
-
icon: 'h-9 w-9',
|
|
27
|
-
},
|
|
28
|
-
},
|
|
29
|
-
defaultVariants: {
|
|
30
|
-
variant: 'default',
|
|
31
|
-
size: 'default',
|
|
32
|
-
},
|
|
33
|
-
},
|
|
34
|
-
)
|
|
35
|
-
|
|
36
|
-
export interface ButtonProps
|
|
37
|
-
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
|
38
|
-
VariantProps<typeof buttonVariants> {
|
|
39
|
-
isLoading?: boolean
|
|
40
|
-
asChild?: boolean
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
|
44
|
-
({ className, variant, size, isLoading = false, asChild = false, ...props }, ref) => {
|
|
45
|
-
const Comp = asChild ? Slot : 'button'
|
|
46
|
-
return (
|
|
47
|
-
<Comp
|
|
48
|
-
className={cn(buttonVariants({ variant, size, className }))}
|
|
49
|
-
ref={ref}
|
|
50
|
-
{...props}
|
|
51
|
-
disabled={isLoading || props.disabled}
|
|
52
|
-
>
|
|
53
|
-
{isLoading && (
|
|
54
|
-
<svg
|
|
55
|
-
className="animate-spin -ml-1 h-5 w-5"
|
|
56
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
57
|
-
fill="none"
|
|
58
|
-
viewBox="0 0 24 24"
|
|
59
|
-
>
|
|
60
|
-
<circle
|
|
61
|
-
className="opacity-25"
|
|
62
|
-
cx="12"
|
|
63
|
-
cy="12"
|
|
64
|
-
r="10"
|
|
65
|
-
stroke="currentColor"
|
|
66
|
-
strokeWidth="4"
|
|
67
|
-
/>
|
|
68
|
-
<path
|
|
69
|
-
className="opacity-75"
|
|
70
|
-
fill="currentColor"
|
|
71
|
-
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
|
72
|
-
/>
|
|
73
|
-
</svg>
|
|
74
|
-
)}
|
|
75
|
-
{props.children}
|
|
76
|
-
</Comp>
|
|
77
|
-
)
|
|
78
|
-
},
|
|
79
|
-
)
|
|
80
|
-
Button.displayName = 'Button'
|
|
81
|
-
|
|
82
|
-
export { Button, buttonVariants }
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './button'
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
// organize-imports-ignore
|
|
2
|
-
import React from 'react'
|
|
3
|
-
import type { Meta, StoryObj } from '@storybook/react'
|
|
4
|
-
import {
|
|
5
|
-
Card,
|
|
6
|
-
CardContent,
|
|
7
|
-
CardDescription,
|
|
8
|
-
CardFooter,
|
|
9
|
-
CardHeader,
|
|
10
|
-
CardTitle,
|
|
11
|
-
} from './Card'
|
|
12
|
-
import { Button } from '../button/button'
|
|
13
|
-
|
|
14
|
-
const meta: Meta<typeof Card> = {
|
|
15
|
-
component: Card,
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
export default meta
|
|
19
|
-
type Story = StoryObj<typeof Button>
|
|
20
|
-
|
|
21
|
-
const Template = () => {
|
|
22
|
-
return (
|
|
23
|
-
<Card className="w-96">
|
|
24
|
-
<CardHeader>
|
|
25
|
-
<CardTitle>Title</CardTitle>
|
|
26
|
-
<CardDescription>Description</CardDescription>
|
|
27
|
-
</CardHeader>
|
|
28
|
-
<CardContent className="px-0 pt-2">
|
|
29
|
-
<div className="bg-gray-200 w-full h-40 p-6">Content goes here</div>
|
|
30
|
-
</CardContent>
|
|
31
|
-
<CardFooter>
|
|
32
|
-
<Button variant="outline">Close</Button>
|
|
33
|
-
</CardFooter>
|
|
34
|
-
</Card>
|
|
35
|
-
)
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
export const Default: Story = {
|
|
39
|
-
render: Template.bind({}),
|
|
40
|
-
args: {},
|
|
41
|
-
}
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import * as React from 'react'
|
|
2
|
-
|
|
3
|
-
import { cn } from '@/lib/utils/cn'
|
|
4
|
-
|
|
5
|
-
const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
|
6
|
-
({ className, ...props }, ref) => (
|
|
7
|
-
<div
|
|
8
|
-
ref={ref}
|
|
9
|
-
className={cn('rounded-xl border bg-card text-card-foreground shadow', className)}
|
|
10
|
-
{...props}
|
|
11
|
-
/>
|
|
12
|
-
),
|
|
13
|
-
)
|
|
14
|
-
Card.displayName = 'Card'
|
|
15
|
-
|
|
16
|
-
const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
|
17
|
-
({ className, ...props }, ref) => (
|
|
18
|
-
<div
|
|
19
|
-
ref={ref}
|
|
20
|
-
className={cn('flex flex-col space-y-1.5 p-6', className)}
|
|
21
|
-
{...props}
|
|
22
|
-
/>
|
|
23
|
-
),
|
|
24
|
-
)
|
|
25
|
-
CardHeader.displayName = 'CardHeader'
|
|
26
|
-
|
|
27
|
-
const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
|
28
|
-
({ className, ...props }, ref) => (
|
|
29
|
-
<div
|
|
30
|
-
ref={ref}
|
|
31
|
-
className={cn('font-semibold leading-none tracking-tight pb-4', className)}
|
|
32
|
-
{...props}
|
|
33
|
-
/>
|
|
34
|
-
),
|
|
35
|
-
)
|
|
36
|
-
CardTitle.displayName = 'CardTitle'
|
|
37
|
-
|
|
38
|
-
const CardDescription = React.forwardRef<
|
|
39
|
-
HTMLDivElement,
|
|
40
|
-
React.HTMLAttributes<HTMLDivElement>
|
|
41
|
-
>(({ className, ...props }, ref) => (
|
|
42
|
-
<div ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
|
|
43
|
-
))
|
|
44
|
-
CardDescription.displayName = 'CardDescription'
|
|
45
|
-
|
|
46
|
-
const CardContent = React.forwardRef<
|
|
47
|
-
HTMLDivElement,
|
|
48
|
-
React.HTMLAttributes<HTMLDivElement>
|
|
49
|
-
>(({ className, ...props }, ref) => (
|
|
50
|
-
<div ref={ref} className={cn('p-6 py-0', className)} {...props} />
|
|
51
|
-
))
|
|
52
|
-
CardContent.displayName = 'CardContent'
|
|
53
|
-
|
|
54
|
-
const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
|
55
|
-
({ className, ...props }, ref) => (
|
|
56
|
-
<div ref={ref} className={cn('flex items-center p-6 pt-6', className)} {...props} />
|
|
57
|
-
),
|
|
58
|
-
)
|
|
59
|
-
CardFooter.displayName = 'CardFooter'
|
|
60
|
-
|
|
61
|
-
export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './card'
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
// organize-imports-ignore
|
|
2
|
-
import React from 'react'
|
|
3
|
-
import type { Meta, StoryObj } from '@storybook/react'
|
|
4
|
-
|
|
5
|
-
import { Checkbox } from './checkbox'
|
|
6
|
-
|
|
7
|
-
const meta: Meta<typeof Checkbox> = {
|
|
8
|
-
component: Checkbox,
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
export default meta
|
|
12
|
-
type Story = StoryObj<typeof Checkbox>
|
|
13
|
-
|
|
14
|
-
const Template = () => {
|
|
15
|
-
return (
|
|
16
|
-
<div className="items-top flex space-x-2">
|
|
17
|
-
<Checkbox id="terms1" />
|
|
18
|
-
<div className="grid gap-1.5 leading-none">
|
|
19
|
-
<label
|
|
20
|
-
htmlFor="terms1"
|
|
21
|
-
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
|
22
|
-
>
|
|
23
|
-
Accept terms and conditions
|
|
24
|
-
</label>
|
|
25
|
-
<p className="text-sm text-muted-foreground">
|
|
26
|
-
You agree to our Terms of Service and Privacy Policy.
|
|
27
|
-
</p>
|
|
28
|
-
</div>
|
|
29
|
-
</div>
|
|
30
|
-
)
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
export const Default: Story = {
|
|
34
|
-
render: Template.bind({}),
|
|
35
|
-
args: {},
|
|
36
|
-
}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
|
|
2
|
-
import { Check } from 'lucide-react'
|
|
3
|
-
import * as React from 'react'
|
|
4
|
-
|
|
5
|
-
import { cn } from '@/lib/utils/cn'
|
|
6
|
-
|
|
7
|
-
const Checkbox = React.forwardRef<
|
|
8
|
-
React.ElementRef<typeof CheckboxPrimitive.Root>,
|
|
9
|
-
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
|
|
10
|
-
>(({ className, ...props }, ref) => (
|
|
11
|
-
<CheckboxPrimitive.Root
|
|
12
|
-
ref={ref}
|
|
13
|
-
className={cn(
|
|
14
|
-
'peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
|
|
15
|
-
className,
|
|
16
|
-
)}
|
|
17
|
-
{...props}
|
|
18
|
-
>
|
|
19
|
-
<CheckboxPrimitive.Indicator
|
|
20
|
-
className={cn('flex items-center justify-center text-current')}
|
|
21
|
-
>
|
|
22
|
-
<Check className="h-4 w-4" />
|
|
23
|
-
</CheckboxPrimitive.Indicator>
|
|
24
|
-
</CheckboxPrimitive.Root>
|
|
25
|
-
))
|
|
26
|
-
Checkbox.displayName = CheckboxPrimitive.Root.displayName
|
|
27
|
-
|
|
28
|
-
export { Checkbox }
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './checkbox'
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
// organize-imports-ignore
|
|
2
|
-
import React from 'react'
|
|
3
|
-
import type { Meta, StoryObj } from '@storybook/react'
|
|
4
|
-
|
|
5
|
-
import { CurrencyInput } from './currency-input'
|
|
6
|
-
import { DollarSign } from 'lucide-react'
|
|
7
|
-
|
|
8
|
-
const meta: Meta<typeof CurrencyInput> = {
|
|
9
|
-
title: 'Components/input/currency',
|
|
10
|
-
component: CurrencyInput,
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
export default meta
|
|
14
|
-
type Story = StoryObj<typeof CurrencyInput>
|
|
15
|
-
|
|
16
|
-
const Template = () => {
|
|
17
|
-
const [value, setValue] = React.useState(0)
|
|
18
|
-
return (
|
|
19
|
-
<div className="w-96">
|
|
20
|
-
<CurrencyInput value={value} onValueChange={(number) => setValue(number)} />
|
|
21
|
-
</div>
|
|
22
|
-
)
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
export const Default: Story = {
|
|
26
|
-
render: Template.bind({}),
|
|
27
|
-
args: {},
|
|
28
|
-
}
|
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
import React, { useEffect, useImperativeHandle, useRef, useState } from 'react'
|
|
2
|
-
import { AdaptiveInput, AdaptiveInputProps } from '../adaptative-input'
|
|
3
|
-
|
|
4
|
-
export interface CurrencyInputProps extends AdaptiveInputProps {
|
|
5
|
-
currencySymbol?: string
|
|
6
|
-
decimalSeparator?: string
|
|
7
|
-
thousandSeparator?: string
|
|
8
|
-
onValueChange: (value: number) => void
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
const CurrencyInput = React.forwardRef<HTMLInputElement, CurrencyInputProps>(
|
|
12
|
-
(props, ref) => {
|
|
13
|
-
const {
|
|
14
|
-
currencySymbol = '$',
|
|
15
|
-
decimalSeparator = '.',
|
|
16
|
-
thousandSeparator = ',',
|
|
17
|
-
onValueChange,
|
|
18
|
-
className,
|
|
19
|
-
value = 0,
|
|
20
|
-
...rest
|
|
21
|
-
} = props
|
|
22
|
-
|
|
23
|
-
const inputRef = useRef<HTMLInputElement>(null)
|
|
24
|
-
|
|
25
|
-
useImperativeHandle(ref, () => inputRef.current as HTMLInputElement)
|
|
26
|
-
|
|
27
|
-
const [inputValue, setInputValue] = useState<string>('') // String to show in input
|
|
28
|
-
|
|
29
|
-
// Function to format the numeric value into a currency format
|
|
30
|
-
const formatNumber = (numericValue: number): string => {
|
|
31
|
-
const parts = numericValue.toFixed(2).split('.') // Ensure two decimal places
|
|
32
|
-
const integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousandSeparator) // Add thousand separators
|
|
33
|
-
return `${currencySymbol} ${integerPart}${decimalSeparator}${parts[1]}`
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
// Handle input change
|
|
37
|
-
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
38
|
-
const rawValue = e.target.value
|
|
39
|
-
const numericValue = parseFloat(rawValue.replace(/\D/g, '')) / 100
|
|
40
|
-
|
|
41
|
-
// Update the input with formatted value
|
|
42
|
-
setInputValue(formatNumber(numericValue))
|
|
43
|
-
|
|
44
|
-
// Send the numeric value (without formatting) to the parent component
|
|
45
|
-
onValueChange(numericValue)
|
|
46
|
-
|
|
47
|
-
// Move the cursor to the end of the input value
|
|
48
|
-
if (inputRef.current) {
|
|
49
|
-
window.requestAnimationFrame(() => {
|
|
50
|
-
inputRef.current?.setSelectionRange(
|
|
51
|
-
inputRef.current.value.length,
|
|
52
|
-
inputRef.current.value.length,
|
|
53
|
-
)
|
|
54
|
-
})
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
// Prevent cursor from being set elsewhere except at the end
|
|
59
|
-
const handleFocus = () => {
|
|
60
|
-
if (inputRef.current) {
|
|
61
|
-
inputRef.current.setSelectionRange(
|
|
62
|
-
inputRef.current.value.length,
|
|
63
|
-
inputRef.current.value.length,
|
|
64
|
-
)
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
// Set the initial formatted value when the component mounts or the value prop changes
|
|
69
|
-
useEffect(() => {
|
|
70
|
-
setInputValue(formatNumber(+value))
|
|
71
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
72
|
-
}, [value])
|
|
73
|
-
|
|
74
|
-
return (
|
|
75
|
-
<AdaptiveInput
|
|
76
|
-
type="text"
|
|
77
|
-
inputMode="numeric"
|
|
78
|
-
value={inputValue}
|
|
79
|
-
ref={inputRef}
|
|
80
|
-
onChange={handleInputChange}
|
|
81
|
-
onFocus={handleFocus}
|
|
82
|
-
onClick={handleFocus} // Ensures that even if the user clicks, the cursor is forced to the end
|
|
83
|
-
placeholder={`${currencySymbol} 0${decimalSeparator}00`}
|
|
84
|
-
className={className}
|
|
85
|
-
{...rest}
|
|
86
|
-
/>
|
|
87
|
-
)
|
|
88
|
-
},
|
|
89
|
-
)
|
|
90
|
-
|
|
91
|
-
CurrencyInput.displayName = 'CurrencyInput'
|
|
92
|
-
|
|
93
|
-
export { CurrencyInput }
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './currency-input'
|
|
@@ -1,90 +0,0 @@
|
|
|
1
|
-
// organize-imports-ignore
|
|
2
|
-
import React from 'react'
|
|
3
|
-
import type { Meta, StoryObj } from '@storybook/react'
|
|
4
|
-
|
|
5
|
-
import {
|
|
6
|
-
DropdownMenu,
|
|
7
|
-
DropdownMenuContent,
|
|
8
|
-
DropdownMenuItem,
|
|
9
|
-
DropdownMenuLabel,
|
|
10
|
-
DropdownMenuPortal,
|
|
11
|
-
DropdownMenuSeparator,
|
|
12
|
-
DropdownMenuSub,
|
|
13
|
-
DropdownMenuSubContent,
|
|
14
|
-
DropdownMenuSubTrigger,
|
|
15
|
-
DropdownMenuTrigger,
|
|
16
|
-
} from './dropdown-menu'
|
|
17
|
-
import { Button } from '../button/button'
|
|
18
|
-
import {
|
|
19
|
-
Key,
|
|
20
|
-
Mail,
|
|
21
|
-
MessageSquare,
|
|
22
|
-
Pencil,
|
|
23
|
-
PlusCircle,
|
|
24
|
-
Settings2,
|
|
25
|
-
Trash,
|
|
26
|
-
UserPlus,
|
|
27
|
-
} from 'lucide-react'
|
|
28
|
-
|
|
29
|
-
const meta: Meta<typeof DropdownMenu> = {
|
|
30
|
-
component: DropdownMenu,
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
export default meta
|
|
34
|
-
type Story = StoryObj<typeof DropdownMenu>
|
|
35
|
-
|
|
36
|
-
const Template = () => {
|
|
37
|
-
return (
|
|
38
|
-
<DropdownMenu>
|
|
39
|
-
<DropdownMenuTrigger asChild>
|
|
40
|
-
<Button variant="outline" size="icon">
|
|
41
|
-
<Settings2 className="w-6 h-6" />
|
|
42
|
-
<span className="sr-only">Open settings</span>
|
|
43
|
-
</Button>
|
|
44
|
-
</DropdownMenuTrigger>
|
|
45
|
-
<DropdownMenuContent align="end">
|
|
46
|
-
<DropdownMenuLabel>Jhon Doe</DropdownMenuLabel>
|
|
47
|
-
<DropdownMenuSeparator />
|
|
48
|
-
<DropdownMenuItem>
|
|
49
|
-
<Pencil /> Edit
|
|
50
|
-
</DropdownMenuItem>
|
|
51
|
-
<DropdownMenuItem>
|
|
52
|
-
<Trash /> Delete
|
|
53
|
-
</DropdownMenuItem>
|
|
54
|
-
<DropdownMenuSeparator />
|
|
55
|
-
<DropdownMenuItem>
|
|
56
|
-
<Key /> Send password reset
|
|
57
|
-
</DropdownMenuItem>
|
|
58
|
-
<DropdownMenuSeparator />
|
|
59
|
-
<DropdownMenuSub>
|
|
60
|
-
<DropdownMenuSubTrigger>
|
|
61
|
-
<UserPlus />
|
|
62
|
-
<span>Invite users</span>
|
|
63
|
-
</DropdownMenuSubTrigger>
|
|
64
|
-
<DropdownMenuPortal>
|
|
65
|
-
<DropdownMenuSubContent>
|
|
66
|
-
<DropdownMenuItem>
|
|
67
|
-
<Mail />
|
|
68
|
-
<span>Email</span>
|
|
69
|
-
</DropdownMenuItem>
|
|
70
|
-
<DropdownMenuItem>
|
|
71
|
-
<MessageSquare />
|
|
72
|
-
<span>Message</span>
|
|
73
|
-
</DropdownMenuItem>
|
|
74
|
-
<DropdownMenuSeparator />
|
|
75
|
-
<DropdownMenuItem>
|
|
76
|
-
<PlusCircle />
|
|
77
|
-
<span>More...</span>
|
|
78
|
-
</DropdownMenuItem>
|
|
79
|
-
</DropdownMenuSubContent>
|
|
80
|
-
</DropdownMenuPortal>
|
|
81
|
-
</DropdownMenuSub>
|
|
82
|
-
</DropdownMenuContent>
|
|
83
|
-
</DropdownMenu>
|
|
84
|
-
)
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
export const Default: Story = {
|
|
88
|
-
render: Template.bind({}),
|
|
89
|
-
args: {},
|
|
90
|
-
}
|
|
@@ -1,192 +0,0 @@
|
|
|
1
|
-
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
|
|
2
|
-
import { Check, ChevronRight, Circle } from 'lucide-react'
|
|
3
|
-
import * as React from 'react'
|
|
4
|
-
|
|
5
|
-
import { cn } from '@/lib/utils/cn'
|
|
6
|
-
|
|
7
|
-
const DropdownMenu = DropdownMenuPrimitive.Root
|
|
8
|
-
|
|
9
|
-
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
|
|
10
|
-
|
|
11
|
-
const DropdownMenuGroup = DropdownMenuPrimitive.Group
|
|
12
|
-
|
|
13
|
-
const DropdownMenuPortal = DropdownMenuPrimitive.Portal
|
|
14
|
-
|
|
15
|
-
const DropdownMenuSub = DropdownMenuPrimitive.Sub
|
|
16
|
-
|
|
17
|
-
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
|
|
18
|
-
|
|
19
|
-
const DropdownMenuSubTrigger = React.forwardRef<
|
|
20
|
-
React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
|
|
21
|
-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
|
|
22
|
-
inset?: boolean
|
|
23
|
-
}
|
|
24
|
-
>(({ className, inset, children, ...props }, ref) => (
|
|
25
|
-
<DropdownMenuPrimitive.SubTrigger
|
|
26
|
-
ref={ref}
|
|
27
|
-
className={cn(
|
|
28
|
-
'flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
|
|
29
|
-
inset && 'pl-8',
|
|
30
|
-
className,
|
|
31
|
-
)}
|
|
32
|
-
{...props}
|
|
33
|
-
>
|
|
34
|
-
{children}
|
|
35
|
-
<ChevronRight className="ml-auto" />
|
|
36
|
-
</DropdownMenuPrimitive.SubTrigger>
|
|
37
|
-
))
|
|
38
|
-
DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
|
|
39
|
-
|
|
40
|
-
const DropdownMenuSubContent = React.forwardRef<
|
|
41
|
-
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
|
|
42
|
-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
|
|
43
|
-
>(({ className, ...props }, ref) => (
|
|
44
|
-
<DropdownMenuPrimitive.SubContent
|
|
45
|
-
ref={ref}
|
|
46
|
-
className={cn(
|
|
47
|
-
'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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',
|
|
48
|
-
className,
|
|
49
|
-
)}
|
|
50
|
-
{...props}
|
|
51
|
-
/>
|
|
52
|
-
))
|
|
53
|
-
DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName
|
|
54
|
-
|
|
55
|
-
const DropdownMenuContent = React.forwardRef<
|
|
56
|
-
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
|
|
57
|
-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
|
|
58
|
-
>(({ className, sideOffset = 4, ...props }, ref) => (
|
|
59
|
-
<DropdownMenuPrimitive.Portal>
|
|
60
|
-
<DropdownMenuPrimitive.Content
|
|
61
|
-
ref={ref}
|
|
62
|
-
sideOffset={sideOffset}
|
|
63
|
-
className={cn(
|
|
64
|
-
'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
|
|
65
|
-
'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',
|
|
66
|
-
className,
|
|
67
|
-
)}
|
|
68
|
-
{...props}
|
|
69
|
-
/>
|
|
70
|
-
</DropdownMenuPrimitive.Portal>
|
|
71
|
-
))
|
|
72
|
-
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
|
|
73
|
-
|
|
74
|
-
const DropdownMenuItem = React.forwardRef<
|
|
75
|
-
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
|
|
76
|
-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
|
|
77
|
-
inset?: boolean
|
|
78
|
-
}
|
|
79
|
-
>(({ className, inset, ...props }, ref) => (
|
|
80
|
-
<DropdownMenuPrimitive.Item
|
|
81
|
-
ref={ref}
|
|
82
|
-
className={cn(
|
|
83
|
-
'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
|
|
84
|
-
inset && 'pl-8',
|
|
85
|
-
className,
|
|
86
|
-
)}
|
|
87
|
-
{...props}
|
|
88
|
-
/>
|
|
89
|
-
))
|
|
90
|
-
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
|
|
91
|
-
|
|
92
|
-
const DropdownMenuCheckboxItem = React.forwardRef<
|
|
93
|
-
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
|
|
94
|
-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
|
|
95
|
-
>(({ className, children, checked, ...props }, ref) => (
|
|
96
|
-
<DropdownMenuPrimitive.CheckboxItem
|
|
97
|
-
ref={ref}
|
|
98
|
-
className={cn(
|
|
99
|
-
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
|
|
100
|
-
className,
|
|
101
|
-
)}
|
|
102
|
-
checked={checked}
|
|
103
|
-
{...props}
|
|
104
|
-
>
|
|
105
|
-
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
|
106
|
-
<DropdownMenuPrimitive.ItemIndicator>
|
|
107
|
-
<Check className="h-4 w-4" />
|
|
108
|
-
</DropdownMenuPrimitive.ItemIndicator>
|
|
109
|
-
</span>
|
|
110
|
-
{children}
|
|
111
|
-
</DropdownMenuPrimitive.CheckboxItem>
|
|
112
|
-
))
|
|
113
|
-
DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName
|
|
114
|
-
|
|
115
|
-
const DropdownMenuRadioItem = React.forwardRef<
|
|
116
|
-
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
|
|
117
|
-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
|
|
118
|
-
>(({ className, children, ...props }, ref) => (
|
|
119
|
-
<DropdownMenuPrimitive.RadioItem
|
|
120
|
-
ref={ref}
|
|
121
|
-
className={cn(
|
|
122
|
-
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
|
|
123
|
-
className,
|
|
124
|
-
)}
|
|
125
|
-
{...props}
|
|
126
|
-
>
|
|
127
|
-
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
|
128
|
-
<DropdownMenuPrimitive.ItemIndicator>
|
|
129
|
-
<Circle className="h-2 w-2 fill-current" />
|
|
130
|
-
</DropdownMenuPrimitive.ItemIndicator>
|
|
131
|
-
</span>
|
|
132
|
-
{children}
|
|
133
|
-
</DropdownMenuPrimitive.RadioItem>
|
|
134
|
-
))
|
|
135
|
-
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
|
|
136
|
-
|
|
137
|
-
const DropdownMenuLabel = React.forwardRef<
|
|
138
|
-
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
|
|
139
|
-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
|
|
140
|
-
inset?: boolean
|
|
141
|
-
}
|
|
142
|
-
>(({ className, inset, ...props }, ref) => (
|
|
143
|
-
<DropdownMenuPrimitive.Label
|
|
144
|
-
ref={ref}
|
|
145
|
-
className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
|
|
146
|
-
{...props}
|
|
147
|
-
/>
|
|
148
|
-
))
|
|
149
|
-
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
|
|
150
|
-
|
|
151
|
-
const DropdownMenuSeparator = React.forwardRef<
|
|
152
|
-
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
|
|
153
|
-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
|
|
154
|
-
>(({ className, ...props }, ref) => (
|
|
155
|
-
<DropdownMenuPrimitive.Separator
|
|
156
|
-
ref={ref}
|
|
157
|
-
className={cn('-mx-1 my-1 h-px bg-muted', className)}
|
|
158
|
-
{...props}
|
|
159
|
-
/>
|
|
160
|
-
))
|
|
161
|
-
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
|
|
162
|
-
|
|
163
|
-
const DropdownMenuShortcut = ({
|
|
164
|
-
className,
|
|
165
|
-
...props
|
|
166
|
-
}: React.HTMLAttributes<HTMLSpanElement>) => {
|
|
167
|
-
return (
|
|
168
|
-
<span
|
|
169
|
-
className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
|
|
170
|
-
{...props}
|
|
171
|
-
/>
|
|
172
|
-
)
|
|
173
|
-
}
|
|
174
|
-
DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'
|
|
175
|
-
|
|
176
|
-
export {
|
|
177
|
-
DropdownMenu,
|
|
178
|
-
DropdownMenuCheckboxItem,
|
|
179
|
-
DropdownMenuContent,
|
|
180
|
-
DropdownMenuGroup,
|
|
181
|
-
DropdownMenuItem,
|
|
182
|
-
DropdownMenuLabel,
|
|
183
|
-
DropdownMenuPortal,
|
|
184
|
-
DropdownMenuRadioGroup,
|
|
185
|
-
DropdownMenuRadioItem,
|
|
186
|
-
DropdownMenuSeparator,
|
|
187
|
-
DropdownMenuShortcut,
|
|
188
|
-
DropdownMenuSub,
|
|
189
|
-
DropdownMenuSubContent,
|
|
190
|
-
DropdownMenuSubTrigger,
|
|
191
|
-
DropdownMenuTrigger,
|
|
192
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './dropdown-menu'
|
package/src/components/index.ts
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
export * from './adaptative-input'
|
|
2
|
-
export * from './autocomplete'
|
|
3
|
-
export * from './avatar'
|
|
4
|
-
export * from './badge'
|
|
5
|
-
export * from './button'
|
|
6
|
-
export * from './card'
|
|
7
|
-
export * from './checkbox'
|
|
8
|
-
export * from './currency-input'
|
|
9
|
-
export * from './dropdown-menu'
|
|
10
|
-
export * from './input'
|
|
11
|
-
export * from './password-input'
|
|
12
|
-
export * from './popover'
|
|
13
|
-
export * from './progress'
|
|
14
|
-
export * from './skeleton'
|
|
15
|
-
export * from './switch'
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './input'
|