mobigrid-module 1.1.6 → 1.1.8

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 (48) hide show
  1. package/dist/components/CustomTable/CustomTable.d.ts +8 -0
  2. package/dist/components/CustomTable/Pagination.d.ts +8 -0
  3. package/dist/components/Icon.d.ts +6 -0
  4. package/dist/components/InvalidConfig.d.ts +2 -0
  5. package/dist/components/Layout/PageHeader.d.ts +13 -0
  6. package/dist/components/LoadingConfig.d.ts +2 -0
  7. package/dist/components/ui/alert.d.ts +8 -0
  8. package/dist/components/ui/button.d.ts +11 -0
  9. package/dist/components/ui/calendar.d.ts +8 -0
  10. package/dist/components/ui/date-picker-with-range.d.ts +7 -0
  11. package/dist/components/ui/dialog.d.ts +19 -0
  12. package/dist/components/ui/input.d.ts +3 -0
  13. package/dist/components/ui/pagination.d.ts +28 -0
  14. package/dist/components/ui/popover.d.ts +7 -0
  15. package/dist/components/ui/select.d.ts +13 -0
  16. package/dist/components/ui/sonner.d.ts +5 -0
  17. package/dist/components/ui/table.d.ts +10 -0
  18. package/dist/index.cjs +53 -0
  19. package/dist/index.cjs.map +1 -0
  20. package/dist/index.d.ts +9 -0
  21. package/dist/index.esm.js +70 -0
  22. package/dist/index.esm.js.map +1 -0
  23. package/dist/index.js +53 -0
  24. package/dist/index.js.map +1 -0
  25. package/dist/lib/utils.d.ts +2 -0
  26. package/dist/vite.config.d.ts +2 -0
  27. package/package.json +12 -9
  28. package/components/CustomTable/CustomTable.tsx +0 -182
  29. package/components/CustomTable/Pagination.tsx +0 -136
  30. package/components/Icon.tsx +0 -27
  31. package/components/InvalidConfig.tsx +0 -26
  32. package/components/Layout/PageHeader.tsx +0 -270
  33. package/components/LoadingConfig.tsx +0 -38
  34. package/components/ui/alert.tsx +0 -59
  35. package/components/ui/button.tsx +0 -57
  36. package/components/ui/calendar.tsx +0 -99
  37. package/components/ui/date-picker-with-range.tsx +0 -176
  38. package/components/ui/dialog.tsx +0 -132
  39. package/components/ui/input.tsx +0 -22
  40. package/components/ui/pagination.tsx +0 -142
  41. package/components/ui/popover.tsx +0 -31
  42. package/components/ui/select.tsx +0 -208
  43. package/components/ui/sonner.tsx +0 -30
  44. package/components/ui/table.tsx +0 -120
  45. package/index.d.ts +0 -55
  46. package/index.tsx +0 -209
  47. package/lib/utils.ts +0 -6
  48. package/tsconfig.json +0 -36
@@ -1,38 +0,0 @@
1
- import React from "react";
2
-
3
- export default function LoadingConfig() {
4
- return (
5
- <div
6
- style={{
7
- display: "flex",
8
- justifyContent: "center",
9
- alignItems: "center",
10
- height: "100vh",
11
- }}
12
- >
13
- <div style={{ position: "absolute" }}>
14
- <svg
15
- className="animate-spin h-5 w-5 mx-auto mb-2"
16
- xmlns="http://www.w3.org/2000/svg"
17
- fill="none"
18
- viewBox="0 0 24 24"
19
- >
20
- <circle
21
- className="opacity-25"
22
- cx="12"
23
- cy="12"
24
- r="10"
25
- stroke="currentColor"
26
- strokeWidth="4"
27
- ></circle>
28
- <path
29
- className="opacity-75"
30
- fill="currentColor"
31
- 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"
32
- ></path>
33
- </svg>
34
- <div>Loading configuration...</div>
35
- </div>
36
- </div>
37
- );
38
- }
@@ -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,99 +0,0 @@
1
- import * as React from "react";
2
- import { DayPicker } from "react-day-picker";
3
-
4
- import { cn } from "../../lib/utils";
5
- import { buttonVariants } from "./button";
6
-
7
- export type CalendarProps = React.ComponentProps<typeof DayPicker>;
8
-
9
- function Calendar({
10
- className,
11
- classNames,
12
- showOutsideDays = true,
13
- ...props
14
- }: CalendarProps) {
15
- return (
16
- <DayPicker
17
- showOutsideDays={showOutsideDays}
18
- className={cn("p-3", className)}
19
- classNames={{
20
- months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
21
- month: "space-y-4",
22
- caption: "flex justify-center pt-1 relative items-center",
23
- caption_label: "text-sm font-medium",
24
- nav: "space-x-1 flex items-center",
25
- nav_button: cn(
26
- buttonVariants({ variant: "outline" }),
27
- "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
28
- ),
29
- nav_button_previous: "absolute left-1",
30
- nav_button_next: "absolute right-1",
31
- table: "w-full border-collapse space-y-1",
32
- head_row: "flex",
33
- head_cell:
34
- "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
35
- row: "flex w-full mt-2",
36
- cell: cn(
37
- "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",
38
- props.mode === "range"
39
- ? "[&: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"
40
- : "[&:has([aria-selected])]:rounded-md"
41
- ),
42
- day: cn(
43
- buttonVariants({ variant: "ghost" }),
44
- "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
45
- ),
46
- day_range_start: "day-range-start",
47
- day_range_end: "day-range-end",
48
- day_selected:
49
- "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
50
- day_today: "bg-accent text-accent-foreground",
51
- day_outside:
52
- "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
53
- day_disabled: "text-muted-foreground opacity-50",
54
- day_range_middle:
55
- "aria-selected:bg-accent aria-selected:text-accent-foreground",
56
- day_hidden: "invisible",
57
- ...classNames,
58
- }}
59
- components={{
60
- IconLeft: () => (
61
- <svg
62
- xmlns="http://www.w3.org/2000/svg"
63
- fill="none"
64
- viewBox="0 0 24 24"
65
- strokeWidth="1.5"
66
- stroke="currentColor"
67
- className="size-6"
68
- >
69
- <path
70
- strokeLinecap="round"
71
- strokeLinejoin="round"
72
- d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"
73
- />
74
- </svg>
75
- ),
76
- IconRight: () => (
77
- <svg
78
- xmlns="http://www.w3.org/2000/svg"
79
- fill="none"
80
- viewBox="0 0 24 24"
81
- strokeWidth="1.5"
82
- stroke="currentColor"
83
- className="size-6"
84
- >
85
- <path
86
- strokeLinecap="round"
87
- strokeLinejoin="round"
88
- d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"
89
- />
90
- </svg>
91
- ),
92
- }}
93
- {...props}
94
- />
95
- );
96
- }
97
- Calendar.displayName = "Calendar";
98
-
99
- export { Calendar };
@@ -1,176 +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 { DateRange } from "react-day-picker";
15
-
16
- import { cn } from "../../lib/utils";
17
- import { Button } from "./button";
18
- import { Calendar } from "./calendar";
19
- import { Popover, PopoverContent, PopoverTrigger } from "./popover";
20
- import {
21
- Select,
22
- SelectContent,
23
- SelectItem,
24
- SelectTrigger,
25
- SelectValue,
26
- } from "./select";
27
-
28
- export function DatePickerWithRange({
29
- className,
30
- dateFrom,
31
- dateTo,
32
- handleDateChange,
33
- }: React.HTMLAttributes<HTMLDivElement> & {
34
- dateFrom?: Date;
35
- dateTo?: Date;
36
- handleDateChange?: (range: DateRange | undefined) => void;
37
- }) {
38
- const [date, setDate] = React.useState<DateRange | undefined>({
39
- from: dateFrom || new Date(2022, 0, 20),
40
- to: dateTo || addDays(new Date(2022, 0, 20), 20),
41
- });
42
-
43
- const presets = [
44
- {
45
- label: "Hier",
46
- getValue: () => {
47
- const yesterday = new Date();
48
- yesterday.setDate(yesterday.getDate() - 1);
49
- return { from: yesterday, to: yesterday };
50
- },
51
- },
52
- {
53
- label: "Cette semaine",
54
- getValue: () => {
55
- const today = new Date();
56
- return { from: startOfWeek(today), to: endOfWeek(today) };
57
- },
58
- },
59
- {
60
- label: "Ce mois-ci",
61
- getValue: () => {
62
- const today = new Date();
63
- return { from: startOfMonth(today), to: endOfMonth(today) };
64
- },
65
- },
66
- {
67
- label: "Le mois dernier",
68
- getValue: () => {
69
- const today = new Date();
70
- const lastMonth = subMonths(today, 1);
71
- return { from: startOfMonth(lastMonth), to: endOfMonth(lastMonth) };
72
- },
73
- },
74
- {
75
- label: "Cette année",
76
- getValue: () => {
77
- const today = new Date();
78
- return { from: startOfYear(today), to: endOfYear(today) };
79
- },
80
- },
81
- {
82
- label: "L'année dernière",
83
- getValue: () => {
84
- const today = new Date();
85
- const lastYear = subYears(today, 1);
86
- return { from: startOfYear(lastYear), to: endOfYear(lastYear) };
87
- },
88
- },
89
- ];
90
-
91
- const handleSelect = (newDate: DateRange | undefined) => {
92
- setDate(newDate);
93
- handleDateChange?.(newDate);
94
- };
95
-
96
- return (
97
- <div className={cn("grid gap-2", className)}>
98
- <Popover>
99
- <PopoverTrigger asChild>
100
- <Button
101
- id="date"
102
- variant={"outline"}
103
- className={cn(
104
- "w-[300px] justify-start text-left font-normal",
105
- !date && "text-muted-foreground"
106
- )}
107
- >
108
- <svg
109
- xmlns="http://www.w3.org/2000/svg"
110
- fill="none"
111
- viewBox="0 0 24 24"
112
- strokeWidth="1.5"
113
- stroke="currentColor"
114
- className="size-6"
115
- >
116
- <path
117
- strokeLinecap="round"
118
- strokeLinejoin="round"
119
- d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
120
- />
121
- </svg>
122
-
123
- {date?.from ? (
124
- date.to ? (
125
- <>
126
- {format(date.from, "LLL dd, y")} -{" "}
127
- {format(date.to, "LLL dd, y")}
128
- </>
129
- ) : (
130
- format(date.from, "LLL dd, y")
131
- )
132
- ) : (
133
- <span>Choisissez une date</span>
134
- )}
135
- </Button>
136
- </PopoverTrigger>
137
- <PopoverContent
138
- className="flex w-auto flex-col space-y-4 p-4"
139
- align="start"
140
- >
141
- <Select
142
- onValueChange={(value) => {
143
- const preset = presets.find((preset) => preset.label === value);
144
- if (preset) {
145
- const newDate = preset.getValue();
146
- setDate(newDate);
147
- handleDateChange?.(newDate);
148
- }
149
- }}
150
- >
151
- <SelectTrigger className="w-[300px]">
152
- <SelectValue placeholder="Sélectionnez un préréglage" />
153
- </SelectTrigger>
154
- <SelectContent position="popper">
155
- {presets.map((preset) => (
156
- <SelectItem key={preset.label} value={preset.label}>
157
- {preset.label}
158
- </SelectItem>
159
- ))}
160
- </SelectContent>
161
- </Select>
162
- <div className="rounded-md border">
163
- <Calendar
164
- initialFocus
165
- mode="range"
166
- defaultMonth={date?.from}
167
- selected={date}
168
- onSelect={handleSelect}
169
- numberOfMonths={2}
170
- />
171
- </div>
172
- </PopoverContent>
173
- </Popover>
174
- </div>
175
- );
176
- }
@@ -1,132 +0,0 @@
1
- import * as React from "react";
2
- import * as DialogPrimitive from "@radix-ui/react-dialog";
3
-
4
- import { cn } from "../../lib/utils";
5
-
6
- const Dialog = DialogPrimitive.Root;
7
-
8
- const DialogTrigger = DialogPrimitive.Trigger;
9
-
10
- const DialogPortal = DialogPrimitive.Portal;
11
-
12
- const DialogClose = DialogPrimitive.Close;
13
-
14
- const DialogOverlay = React.forwardRef<
15
- React.ElementRef<typeof DialogPrimitive.Overlay>,
16
- React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
17
- >(({ className, ...props }, ref) => (
18
- <DialogPrimitive.Overlay
19
- ref={ref}
20
- className={cn(
21
- "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",
22
- className
23
- )}
24
- {...props}
25
- />
26
- ));
27
- DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
28
-
29
- const DialogContent = React.forwardRef<
30
- React.ElementRef<typeof DialogPrimitive.Content>,
31
- React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
32
- >(({ className, children, ...props }, ref) => (
33
- <DialogPortal>
34
- <DialogOverlay />
35
- <DialogPrimitive.Content
36
- ref={ref}
37
- className={cn(
38
- "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",
39
- className
40
- )}
41
- {...props}
42
- >
43
- {children}
44
- <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">
45
- <svg
46
- xmlns="http://www.w3.org/2000/svg"
47
- fill="none"
48
- viewBox="0 0 24 24"
49
- strokeWidth="1.5"
50
- stroke="currentColor"
51
- className="size-6"
52
- >
53
- <path
54
- strokeLinecap="round"
55
- strokeLinejoin="round"
56
- d="M6 18 18 6M6 6l12 12"
57
- />
58
- </svg>
59
- <span className="sr-only">Close</span>
60
- </DialogPrimitive.Close>
61
- </DialogPrimitive.Content>
62
- </DialogPortal>
63
- ));
64
- DialogContent.displayName = DialogPrimitive.Content.displayName;
65
-
66
- const DialogHeader = ({
67
- className,
68
- ...props
69
- }: React.HTMLAttributes<HTMLDivElement>) => (
70
- <div
71
- className={cn(
72
- "flex flex-col space-y-1.5 text-center sm:text-left",
73
- className
74
- )}
75
- {...props}
76
- />
77
- );
78
- DialogHeader.displayName = "DialogHeader";
79
-
80
- const DialogFooter = ({
81
- className,
82
- ...props
83
- }: React.HTMLAttributes<HTMLDivElement>) => (
84
- <div
85
- className={cn(
86
- "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
87
- className
88
- )}
89
- {...props}
90
- />
91
- );
92
- DialogFooter.displayName = "DialogFooter";
93
-
94
- const DialogTitle = React.forwardRef<
95
- React.ElementRef<typeof DialogPrimitive.Title>,
96
- React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
97
- >(({ className, ...props }, ref) => (
98
- <DialogPrimitive.Title
99
- ref={ref}
100
- className={cn(
101
- "text-lg font-semibold leading-none tracking-tight",
102
- className
103
- )}
104
- {...props}
105
- />
106
- ));
107
- DialogTitle.displayName = DialogPrimitive.Title.displayName;
108
-
109
- const DialogDescription = React.forwardRef<
110
- React.ElementRef<typeof DialogPrimitive.Description>,
111
- React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
112
- >(({ className, ...props }, ref) => (
113
- <DialogPrimitive.Description
114
- ref={ref}
115
- className={cn("text-sm text-muted-foreground", className)}
116
- {...props}
117
- />
118
- ));
119
- DialogDescription.displayName = DialogPrimitive.Description.displayName;
120
-
121
- export {
122
- Dialog,
123
- DialogPortal,
124
- DialogOverlay,
125
- DialogTrigger,
126
- DialogClose,
127
- DialogContent,
128
- DialogHeader,
129
- DialogFooter,
130
- DialogTitle,
131
- DialogDescription,
132
- };
@@ -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 }