mobigrid-module 1.0.2 → 1.0.3

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.
@@ -1,59 +0,0 @@
1
- import * as React from "react"
2
- import { cva, type VariantProps } from "class-variance-authority"
3
-
4
- import { cn } from "../../lib/utils"
5
-
6
- const alertVariants = cva(
7
- "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
8
- {
9
- variants: {
10
- variant: {
11
- default: "bg-background text-foreground",
12
- destructive:
13
- "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
14
- },
15
- },
16
- defaultVariants: {
17
- variant: "default",
18
- },
19
- }
20
- )
21
-
22
- const Alert = React.forwardRef<
23
- HTMLDivElement,
24
- React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
25
- >(({ className, variant, ...props }, ref) => (
26
- <div
27
- ref={ref}
28
- role="alert"
29
- className={cn(alertVariants({ variant }), className)}
30
- {...props}
31
- />
32
- ))
33
- Alert.displayName = "Alert"
34
-
35
- const AlertTitle = React.forwardRef<
36
- HTMLParagraphElement,
37
- React.HTMLAttributes<HTMLHeadingElement>
38
- >(({ className, ...props }, ref) => (
39
- <h5
40
- ref={ref}
41
- className={cn("mb-1 font-medium leading-none tracking-tight", className)}
42
- {...props}
43
- />
44
- ))
45
- AlertTitle.displayName = "AlertTitle"
46
-
47
- const AlertDescription = React.forwardRef<
48
- HTMLParagraphElement,
49
- React.HTMLAttributes<HTMLParagraphElement>
50
- >(({ className, ...props }, ref) => (
51
- <div
52
- ref={ref}
53
- className={cn("text-sm [&_p]:leading-relaxed", className)}
54
- {...props}
55
- />
56
- ))
57
- AlertDescription.displayName = "AlertDescription"
58
-
59
- export { Alert, AlertTitle, AlertDescription }
@@ -1,57 +0,0 @@
1
- import * as React from "react"
2
- import { Slot } from "@radix-ui/react-slot"
3
- import { cva, type VariantProps } from "class-variance-authority"
4
-
5
- import { cn } from "../../lib/utils"
6
-
7
- const buttonVariants = cva(
8
- "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",
9
- {
10
- variants: {
11
- variant: {
12
- default:
13
- "bg-primary text-primary-foreground shadow hover:bg-primary/90",
14
- destructive:
15
- "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
16
- outline:
17
- "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
18
- secondary:
19
- "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
20
- ghost: "hover:bg-accent hover:text-accent-foreground",
21
- link: "text-primary underline-offset-4 hover:underline",
22
- },
23
- size: {
24
- default: "h-9 px-4 py-2",
25
- sm: "h-8 rounded-md px-3 text-xs",
26
- lg: "h-10 rounded-md px-8",
27
- icon: "h-9 w-9",
28
- },
29
- },
30
- defaultVariants: {
31
- variant: "default",
32
- size: "default",
33
- },
34
- }
35
- )
36
-
37
- export interface ButtonProps
38
- extends React.ButtonHTMLAttributes<HTMLButtonElement>,
39
- VariantProps<typeof buttonVariants> {
40
- asChild?: boolean
41
- }
42
-
43
- const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
44
- ({ className, variant, size, 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
- />
52
- )
53
- }
54
- )
55
- Button.displayName = "Button"
56
-
57
- export { Button, buttonVariants }
@@ -1,70 +0,0 @@
1
- import * as React from "react"
2
- import { ChevronLeft, ChevronRight } from "lucide-react"
3
- import { DayPicker } from "react-day-picker"
4
-
5
- import { cn } from "../../lib/utils"
6
- import { buttonVariants } from "./button"
7
-
8
- export type CalendarProps = React.ComponentProps<typeof DayPicker>
9
-
10
- function Calendar({
11
- className,
12
- classNames,
13
- showOutsideDays = true,
14
- ...props
15
- }: CalendarProps) {
16
- return (
17
- <DayPicker
18
- showOutsideDays={showOutsideDays}
19
- className={cn("p-3", className)}
20
- classNames={{
21
- months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
22
- month: "space-y-4",
23
- caption: "flex justify-center pt-1 relative items-center",
24
- caption_label: "text-sm font-medium",
25
- nav: "space-x-1 flex items-center",
26
- nav_button: cn(
27
- buttonVariants({ variant: "outline" }),
28
- "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
29
- ),
30
- nav_button_previous: "absolute left-1",
31
- nav_button_next: "absolute right-1",
32
- table: "w-full border-collapse space-y-1",
33
- head_row: "flex",
34
- head_cell:
35
- "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
36
- row: "flex w-full mt-2",
37
- cell: cn(
38
- "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
39
- props.mode === "range"
40
- ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
41
- : "[&:has([aria-selected])]:rounded-md"
42
- ),
43
- day: cn(
44
- buttonVariants({ variant: "ghost" }),
45
- "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
46
- ),
47
- day_range_start: "day-range-start",
48
- day_range_end: "day-range-end",
49
- day_selected:
50
- "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
51
- day_today: "bg-accent text-accent-foreground",
52
- day_outside:
53
- "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
54
- day_disabled: "text-muted-foreground opacity-50",
55
- day_range_middle:
56
- "aria-selected:bg-accent aria-selected:text-accent-foreground",
57
- day_hidden: "invisible",
58
- ...classNames,
59
- }}
60
- components={{
61
- IconLeft: () => <ChevronLeft className="h-4 w-4" />,
62
- IconRight: () => <ChevronRight className="h-4 w-4" />,
63
- }}
64
- {...props}
65
- />
66
- )
67
- }
68
- Calendar.displayName = "Calendar"
69
-
70
- export { Calendar }
@@ -1,167 +0,0 @@
1
- import * as React from "react";
2
- import {
3
- addDays,
4
- startOfWeek,
5
- endOfWeek,
6
- startOfMonth,
7
- endOfMonth,
8
- subMonths,
9
- format,
10
- subYears,
11
- startOfYear,
12
- endOfYear,
13
- } from "date-fns";
14
- import { CalendarIcon } from "lucide-react";
15
- import { DateRange } from "react-day-picker";
16
-
17
- import { cn } from "../../lib/utils";
18
- import { Button } from "../../components/ui/button";
19
- import { Calendar } from "../../components/ui/calendar";
20
- import {
21
- Popover,
22
- PopoverContent,
23
- PopoverTrigger,
24
- } from "../../components/ui/popover";
25
- import {
26
- Select,
27
- SelectContent,
28
- SelectItem,
29
- SelectTrigger,
30
- SelectValue,
31
- } from "../../components/ui/select";
32
-
33
- export function DatePickerWithRange({
34
- className,
35
- dateFrom,
36
- dateTo,
37
- handleDateChange,
38
- }: React.HTMLAttributes<HTMLDivElement> & {
39
- dateFrom?: Date;
40
- dateTo?: Date;
41
- handleDateChange?: (range: DateRange | undefined) => void;
42
- }) {
43
- const [date, setDate] = React.useState<DateRange | undefined>({
44
- from: dateFrom || new Date(2022, 0, 20),
45
- to: dateTo || addDays(new Date(2022, 0, 20), 20),
46
- });
47
-
48
- const presets = [
49
- {
50
- label: "Hier",
51
- getValue: () => {
52
- const yesterday = new Date();
53
- yesterday.setDate(yesterday.getDate() - 1);
54
- return { from: yesterday, to: yesterday };
55
- },
56
- },
57
- {
58
- label: "Cette semaine",
59
- getValue: () => {
60
- const today = new Date();
61
- return { from: startOfWeek(today), to: endOfWeek(today) };
62
- },
63
- },
64
- {
65
- label: "Ce mois-ci",
66
- getValue: () => {
67
- const today = new Date();
68
- return { from: startOfMonth(today), to: endOfMonth(today) };
69
- },
70
- },
71
- {
72
- label: "Le mois dernier",
73
- getValue: () => {
74
- const today = new Date();
75
- const lastMonth = subMonths(today, 1);
76
- return { from: startOfMonth(lastMonth), to: endOfMonth(lastMonth) };
77
- },
78
- },
79
- {
80
- label: "Cette année",
81
- getValue: () => {
82
- const today = new Date();
83
- return { from: startOfYear(today), to: endOfYear(today) };
84
- },
85
- },
86
- {
87
- label: "L'année dernière",
88
- getValue: () => {
89
- const today = new Date();
90
- const lastYear = subYears(today, 1);
91
- return { from: startOfYear(lastYear), to: endOfYear(lastYear) };
92
- },
93
- },
94
- ];
95
-
96
- const handleSelect = (newDate: DateRange | undefined) => {
97
- setDate(newDate);
98
- handleDateChange?.(newDate);
99
- };
100
-
101
- return (
102
- <div className={cn("grid gap-2", className)}>
103
- <Popover>
104
- <PopoverTrigger asChild>
105
- <Button
106
- id="date"
107
- variant={"outline"}
108
- className={cn(
109
- "w-[300px] justify-start text-left font-normal",
110
- !date && "text-muted-foreground"
111
- )}
112
- >
113
- <CalendarIcon className="mr-2 h-4 w-4" />
114
- {date?.from ? (
115
- date.to ? (
116
- <>
117
- {format(date.from, "LLL dd, y")} -{" "}
118
- {format(date.to, "LLL dd, y")}
119
- </>
120
- ) : (
121
- format(date.from, "LLL dd, y")
122
- )
123
- ) : (
124
- <span>Choisissez une date</span>
125
- )}
126
- </Button>
127
- </PopoverTrigger>
128
- <PopoverContent
129
- className="flex w-auto flex-col space-y-4 p-4"
130
- align="start"
131
- >
132
- <Select
133
- onValueChange={(value) => {
134
- const preset = presets.find((preset) => preset.label === value);
135
- if (preset) {
136
- const newDate = preset.getValue();
137
- setDate(newDate);
138
- handleDateChange?.(newDate);
139
- }
140
- }}
141
- >
142
- <SelectTrigger className="w-[300px]">
143
- <SelectValue placeholder="Sélectionnez un préréglage" />
144
- </SelectTrigger>
145
- <SelectContent position="popper">
146
- {presets.map((preset) => (
147
- <SelectItem key={preset.label} value={preset.label}>
148
- {preset.label}
149
- </SelectItem>
150
- ))}
151
- </SelectContent>
152
- </Select>
153
- <div className="rounded-md border">
154
- <Calendar
155
- initialFocus
156
- mode="range"
157
- defaultMonth={date?.from}
158
- selected={date}
159
- onSelect={handleSelect}
160
- numberOfMonths={2}
161
- />
162
- </div>
163
- </PopoverContent>
164
- </Popover>
165
- </div>
166
- );
167
- }
@@ -1,120 +0,0 @@
1
- import * as React from "react"
2
- import * as DialogPrimitive from "@radix-ui/react-dialog"
3
- import { X } from "lucide-react"
4
-
5
- import { cn } from "../../lib/utils"
6
-
7
- const Dialog = DialogPrimitive.Root
8
-
9
- const DialogTrigger = DialogPrimitive.Trigger
10
-
11
- const DialogPortal = DialogPrimitive.Portal
12
-
13
- const DialogClose = DialogPrimitive.Close
14
-
15
- const DialogOverlay = React.forwardRef<
16
- React.ElementRef<typeof DialogPrimitive.Overlay>,
17
- React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
18
- >(({ className, ...props }, ref) => (
19
- <DialogPrimitive.Overlay
20
- ref={ref}
21
- className={cn(
22
- "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",
23
- className
24
- )}
25
- {...props}
26
- />
27
- ))
28
- DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
29
-
30
- const DialogContent = React.forwardRef<
31
- React.ElementRef<typeof DialogPrimitive.Content>,
32
- React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
33
- >(({ className, children, ...props }, ref) => (
34
- <DialogPortal>
35
- <DialogOverlay />
36
- <DialogPrimitive.Content
37
- ref={ref}
38
- className={cn(
39
- "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
40
- className
41
- )}
42
- {...props}
43
- >
44
- {children}
45
- <DialogPrimitive.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-accent data-[state=open]:text-muted-foreground">
46
- <X className="h-4 w-4" />
47
- <span className="sr-only">Close</span>
48
- </DialogPrimitive.Close>
49
- </DialogPrimitive.Content>
50
- </DialogPortal>
51
- ))
52
- DialogContent.displayName = DialogPrimitive.Content.displayName
53
-
54
- const DialogHeader = ({
55
- className,
56
- ...props
57
- }: React.HTMLAttributes<HTMLDivElement>) => (
58
- <div
59
- className={cn(
60
- "flex flex-col space-y-1.5 text-center sm:text-left",
61
- className
62
- )}
63
- {...props}
64
- />
65
- )
66
- DialogHeader.displayName = "DialogHeader"
67
-
68
- const DialogFooter = ({
69
- className,
70
- ...props
71
- }: React.HTMLAttributes<HTMLDivElement>) => (
72
- <div
73
- className={cn(
74
- "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
75
- className
76
- )}
77
- {...props}
78
- />
79
- )
80
- DialogFooter.displayName = "DialogFooter"
81
-
82
- const DialogTitle = React.forwardRef<
83
- React.ElementRef<typeof DialogPrimitive.Title>,
84
- React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
85
- >(({ className, ...props }, ref) => (
86
- <DialogPrimitive.Title
87
- ref={ref}
88
- className={cn(
89
- "text-lg font-semibold leading-none tracking-tight",
90
- className
91
- )}
92
- {...props}
93
- />
94
- ))
95
- DialogTitle.displayName = DialogPrimitive.Title.displayName
96
-
97
- const DialogDescription = React.forwardRef<
98
- React.ElementRef<typeof DialogPrimitive.Description>,
99
- React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
100
- >(({ className, ...props }, ref) => (
101
- <DialogPrimitive.Description
102
- ref={ref}
103
- className={cn("text-sm text-muted-foreground", className)}
104
- {...props}
105
- />
106
- ))
107
- DialogDescription.displayName = DialogPrimitive.Description.displayName
108
-
109
- export {
110
- Dialog,
111
- DialogPortal,
112
- DialogOverlay,
113
- DialogTrigger,
114
- DialogClose,
115
- DialogContent,
116
- DialogHeader,
117
- DialogFooter,
118
- DialogTitle,
119
- DialogDescription,
120
- }
@@ -1,22 +0,0 @@
1
- import * as React from "react"
2
-
3
- import { cn } from "../../lib/utils"
4
-
5
- const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
6
- ({ className, type, ...props }, ref) => {
7
- return (
8
- <input
9
- type={type}
10
- className={cn(
11
- "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
12
- className
13
- )}
14
- ref={ref}
15
- {...props}
16
- />
17
- )
18
- }
19
- )
20
- Input.displayName = "Input"
21
-
22
- export { Input }
@@ -1,117 +0,0 @@
1
- import * as React from "react"
2
- import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
3
-
4
- import { cn } from "../../lib/utils"
5
- import { ButtonProps, buttonVariants } from "../../components/ui/button"
6
-
7
- const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
8
- <nav
9
- role="navigation"
10
- aria-label="pagination"
11
- className={cn("mx-auto flex w-full justify-center", className)}
12
- {...props}
13
- />
14
- )
15
- Pagination.displayName = "Pagination"
16
-
17
- const PaginationContent = React.forwardRef<
18
- HTMLUListElement,
19
- React.ComponentProps<"ul">
20
- >(({ className, ...props }, ref) => (
21
- <ul
22
- ref={ref}
23
- className={cn("flex flex-row items-center gap-1", className)}
24
- {...props}
25
- />
26
- ))
27
- PaginationContent.displayName = "PaginationContent"
28
-
29
- const PaginationItem = React.forwardRef<
30
- HTMLLIElement,
31
- React.ComponentProps<"li">
32
- >(({ className, ...props }, ref) => (
33
- <li ref={ref} className={cn("", className)} {...props} />
34
- ))
35
- PaginationItem.displayName = "PaginationItem"
36
-
37
- type PaginationLinkProps = {
38
- isActive?: boolean
39
- } & Pick<ButtonProps, "size"> &
40
- React.ComponentProps<"a">
41
-
42
- const PaginationLink = ({
43
- className,
44
- isActive,
45
- size = "icon",
46
- ...props
47
- }: PaginationLinkProps) => (
48
- <a
49
- aria-current={isActive ? "page" : undefined}
50
- className={cn(
51
- buttonVariants({
52
- variant: isActive ? "outline" : "ghost",
53
- size,
54
- }),
55
- className
56
- )}
57
- {...props}
58
- />
59
- )
60
- PaginationLink.displayName = "PaginationLink"
61
-
62
- const PaginationPrevious = ({
63
- className,
64
- ...props
65
- }: React.ComponentProps<typeof PaginationLink>) => (
66
- <PaginationLink
67
- aria-label="Go to previous page"
68
- size="default"
69
- className={cn("gap-1 pl-2.5", className)}
70
- {...props}
71
- >
72
- <ChevronLeft className="h-4 w-4" />
73
- <span>Previous</span>
74
- </PaginationLink>
75
- )
76
- PaginationPrevious.displayName = "PaginationPrevious"
77
-
78
- const PaginationNext = ({
79
- className,
80
- ...props
81
- }: React.ComponentProps<typeof PaginationLink>) => (
82
- <PaginationLink
83
- aria-label="Go to next page"
84
- size="default"
85
- className={cn("gap-1 pr-2.5", className)}
86
- {...props}
87
- >
88
- <span>Next</span>
89
- <ChevronRight className="h-4 w-4" />
90
- </PaginationLink>
91
- )
92
- PaginationNext.displayName = "PaginationNext"
93
-
94
- const PaginationEllipsis = ({
95
- className,
96
- ...props
97
- }: React.ComponentProps<"span">) => (
98
- <span
99
- aria-hidden
100
- className={cn("flex h-9 w-9 items-center justify-center", className)}
101
- {...props}
102
- >
103
- <MoreHorizontal className="h-4 w-4" />
104
- <span className="sr-only">More pages</span>
105
- </span>
106
- )
107
- PaginationEllipsis.displayName = "PaginationEllipsis"
108
-
109
- export {
110
- Pagination,
111
- PaginationContent,
112
- PaginationLink,
113
- PaginationItem,
114
- PaginationPrevious,
115
- PaginationNext,
116
- PaginationEllipsis,
117
- }
@@ -1,31 +0,0 @@
1
- import * as React from "react"
2
- import * as PopoverPrimitive from "@radix-ui/react-popover"
3
-
4
- import { cn } from "../../lib/utils"
5
-
6
- const Popover = PopoverPrimitive.Root
7
-
8
- const PopoverTrigger = PopoverPrimitive.Trigger
9
-
10
- const PopoverAnchor = PopoverPrimitive.Anchor
11
-
12
- const PopoverContent = React.forwardRef<
13
- React.ElementRef<typeof PopoverPrimitive.Content>,
14
- React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
15
- >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
16
- <PopoverPrimitive.Portal>
17
- <PopoverPrimitive.Content
18
- ref={ref}
19
- align={align}
20
- sideOffset={sideOffset}
21
- className={cn(
22
- "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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",
23
- className
24
- )}
25
- {...props}
26
- />
27
- </PopoverPrimitive.Portal>
28
- ))
29
- PopoverContent.displayName = PopoverPrimitive.Content.displayName
30
-
31
- export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }