@contractspec/lib.ui-kit-web 3.7.1 → 3.7.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.
- package/dist/browser/ui/atoms/LoadingSpinner/index.js +0 -76
- package/dist/browser/ui/marketing/index.js +0 -210
- package/dist/browser/ui/organisms/ErrorBoundary/index.js +0 -183
- package/dist/browser/ui/organisms/ListPage/index.js +0 -1253
- package/dist/browser/ui/usecases/index.js +0 -283
- package/dist/ui/atoms/LoadingSpinner/index.js +0 -76
- package/dist/ui/marketing/index.js +0 -210
- package/dist/ui/organisms/ErrorBoundary/index.js +0 -183
- package/dist/ui/organisms/ListPage/index.js +0 -1253
- package/dist/ui/usecases/index.js +0 -283
- package/package.json +4 -4
|
@@ -5,82 +5,6 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
|
|
|
5
5
|
return require.apply(this, arguments);
|
|
6
6
|
throw Error('Dynamic require of "' + x + '" is not supported');
|
|
7
7
|
});
|
|
8
|
-
|
|
9
|
-
// ui/utils.ts
|
|
10
|
-
import { clsx } from "clsx";
|
|
11
|
-
import { twMerge } from "tailwind-merge";
|
|
12
|
-
function cn(...inputs) {
|
|
13
|
-
return twMerge(clsx(inputs));
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
// ui/atoms/LoadingSpinner/LoadingSpinner.tsx
|
|
17
|
-
import { Loader2 } from "lucide-react";
|
|
18
|
-
import { jsxDEV } from "react/jsx-dev-runtime";
|
|
19
|
-
var sizeClasses = {
|
|
20
|
-
sm: "h-4 w-4",
|
|
21
|
-
md: "h-6 w-6",
|
|
22
|
-
lg: "h-8 w-8",
|
|
23
|
-
xl: "h-12 w-12"
|
|
24
|
-
};
|
|
25
|
-
var LoadingSpinner = ({
|
|
26
|
-
size = "md",
|
|
27
|
-
className,
|
|
28
|
-
text,
|
|
29
|
-
fullScreen = false
|
|
30
|
-
}) => {
|
|
31
|
-
const spinner = /* @__PURE__ */ jsxDEV("div", {
|
|
32
|
-
className: cn("flex flex-col items-center justify-center gap-2", className),
|
|
33
|
-
children: [
|
|
34
|
-
/* @__PURE__ */ jsxDEV(Loader2, {
|
|
35
|
-
className: cn("text-primary-600 animate-spin", sizeClasses[size])
|
|
36
|
-
}, undefined, false, undefined, this),
|
|
37
|
-
text && /* @__PURE__ */ jsxDEV("p", {
|
|
38
|
-
className: "animate-pulse text-base text-gray-600",
|
|
39
|
-
children: text
|
|
40
|
-
}, undefined, false, undefined, this)
|
|
41
|
-
]
|
|
42
|
-
}, undefined, true, undefined, this);
|
|
43
|
-
if (fullScreen) {
|
|
44
|
-
return /* @__PURE__ */ jsxDEV("div", {
|
|
45
|
-
className: "fixed inset-0 z-50 flex items-center justify-center bg-white/80 backdrop-blur-xs",
|
|
46
|
-
children: spinner
|
|
47
|
-
}, undefined, false, undefined, this);
|
|
48
|
-
}
|
|
49
|
-
return spinner;
|
|
50
|
-
};
|
|
51
|
-
var SkeletonLine = ({
|
|
52
|
-
className
|
|
53
|
-
}) => /* @__PURE__ */ jsxDEV("div", {
|
|
54
|
-
className: cn("h-4 animate-pulse rounded-xs bg-gray-200", className)
|
|
55
|
-
}, undefined, false, undefined, this);
|
|
56
|
-
var SkeletonCard = ({
|
|
57
|
-
className
|
|
58
|
-
}) => /* @__PURE__ */ jsxDEV("div", {
|
|
59
|
-
className: cn("animate-pulse space-y-3 rounded-lg bg-gray-200 p-4", className),
|
|
60
|
-
children: [
|
|
61
|
-
/* @__PURE__ */ jsxDEV(SkeletonLine, {
|
|
62
|
-
className: "h-6 w-3/4"
|
|
63
|
-
}, undefined, false, undefined, this),
|
|
64
|
-
/* @__PURE__ */ jsxDEV(SkeletonLine, {
|
|
65
|
-
className: "h-4 w-full"
|
|
66
|
-
}, undefined, false, undefined, this),
|
|
67
|
-
/* @__PURE__ */ jsxDEV(SkeletonLine, {
|
|
68
|
-
className: "h-4 w-2/3"
|
|
69
|
-
}, undefined, false, undefined, this)
|
|
70
|
-
]
|
|
71
|
-
}, undefined, true, undefined, this);
|
|
72
|
-
var SkeletonTable = ({
|
|
73
|
-
rows = 5,
|
|
74
|
-
cols = 4
|
|
75
|
-
}) => /* @__PURE__ */ jsxDEV("div", {
|
|
76
|
-
className: "space-y-3",
|
|
77
|
-
children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxDEV("div", {
|
|
78
|
-
className: "flex space-x-4",
|
|
79
|
-
children: Array.from({ length: cols }).map((_2, j) => /* @__PURE__ */ jsxDEV(SkeletonLine, {
|
|
80
|
-
className: "flex-1"
|
|
81
|
-
}, j, false, undefined, this))
|
|
82
|
-
}, i, false, undefined, this))
|
|
83
|
-
}, undefined, false, undefined, this);
|
|
84
8
|
export {
|
|
85
9
|
SkeletonTable,
|
|
86
10
|
SkeletonLine,
|
|
@@ -5,216 +5,6 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
|
|
|
5
5
|
return require.apply(this, arguments);
|
|
6
6
|
throw Error('Dynamic require of "' + x + '" is not supported');
|
|
7
7
|
});
|
|
8
|
-
|
|
9
|
-
// ui/button.tsx
|
|
10
|
-
import { Slot } from "@radix-ui/react-slot";
|
|
11
|
-
import { cva } from "class-variance-authority";
|
|
12
|
-
import { cn } from "@contractspec/lib.ui-kit-core/utils";
|
|
13
|
-
import { jsxDEV } from "react/jsx-dev-runtime";
|
|
14
|
-
var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-hidden focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
|
|
15
|
-
variants: {
|
|
16
|
-
variant: {
|
|
17
|
-
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
18
|
-
destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
|
19
|
-
outline: "border bg-background shadow-2xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
|
20
|
-
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
21
|
-
ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
|
22
|
-
link: "text-primary underline-offset-4 hover:underline"
|
|
23
|
-
},
|
|
24
|
-
size: {
|
|
25
|
-
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
|
26
|
-
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
|
27
|
-
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
|
28
|
-
icon: "size-9"
|
|
29
|
-
}
|
|
30
|
-
},
|
|
31
|
-
defaultVariants: {
|
|
32
|
-
variant: "default",
|
|
33
|
-
size: "default"
|
|
34
|
-
}
|
|
35
|
-
});
|
|
36
|
-
function Button({
|
|
37
|
-
className,
|
|
38
|
-
variant,
|
|
39
|
-
size,
|
|
40
|
-
asChild = false,
|
|
41
|
-
ref,
|
|
42
|
-
...props
|
|
43
|
-
}) {
|
|
44
|
-
if (asChild) {
|
|
45
|
-
return /* @__PURE__ */ jsxDEV(Slot, {
|
|
46
|
-
"data-slot": "button",
|
|
47
|
-
className: cn(buttonVariants({ variant, size, className })),
|
|
48
|
-
...props
|
|
49
|
-
}, undefined, false, undefined, this);
|
|
50
|
-
}
|
|
51
|
-
return /* @__PURE__ */ jsxDEV("button", {
|
|
52
|
-
ref,
|
|
53
|
-
"data-slot": "button",
|
|
54
|
-
className: cn(buttonVariants({ variant, size, className })),
|
|
55
|
-
...props
|
|
56
|
-
}, undefined, false, undefined, this);
|
|
57
|
-
}
|
|
58
|
-
// ui/utils.ts
|
|
59
|
-
import { clsx } from "clsx";
|
|
60
|
-
import { twMerge } from "tailwind-merge";
|
|
61
|
-
function cn2(...inputs) {
|
|
62
|
-
return twMerge(clsx(inputs));
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
// ui/marketing/FeatureGrid.tsx
|
|
66
|
-
import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
|
|
67
|
-
function FeatureGrid({
|
|
68
|
-
items,
|
|
69
|
-
columns = 3,
|
|
70
|
-
className
|
|
71
|
-
}) {
|
|
72
|
-
const gridCols = columns === 4 ? "md:grid-cols-4" : columns === 2 ? "md:grid-cols-2" : "md:grid-cols-3";
|
|
73
|
-
return /* @__PURE__ */ jsxDEV2("section", {
|
|
74
|
-
className: cn2("mx-auto max-w-6xl py-12", className),
|
|
75
|
-
children: /* @__PURE__ */ jsxDEV2("div", {
|
|
76
|
-
className: cn2("grid grid-cols-1 gap-6", gridCols),
|
|
77
|
-
children: items.map((it, idx) => /* @__PURE__ */ jsxDEV2("div", {
|
|
78
|
-
className: "rounded-lg border p-6",
|
|
79
|
-
children: [
|
|
80
|
-
it.icon && /* @__PURE__ */ jsxDEV2("div", {
|
|
81
|
-
className: "text-primary mb-3",
|
|
82
|
-
children: it.icon
|
|
83
|
-
}, undefined, false, undefined, this),
|
|
84
|
-
/* @__PURE__ */ jsxDEV2("h3", {
|
|
85
|
-
className: "text-lg font-semibold",
|
|
86
|
-
children: it.title
|
|
87
|
-
}, undefined, false, undefined, this),
|
|
88
|
-
it.description && /* @__PURE__ */ jsxDEV2("p", {
|
|
89
|
-
className: "text-muted-foreground mt-2 text-base",
|
|
90
|
-
children: it.description
|
|
91
|
-
}, undefined, false, undefined, this)
|
|
92
|
-
]
|
|
93
|
-
}, idx, true, undefined, this))
|
|
94
|
-
}, undefined, false, undefined, this)
|
|
95
|
-
}, undefined, false, undefined, this);
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
// ui/marketing/Hero.tsx
|
|
99
|
-
import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
|
|
100
|
-
function Hero({
|
|
101
|
-
title,
|
|
102
|
-
subtitle,
|
|
103
|
-
primaryCta,
|
|
104
|
-
secondaryCta,
|
|
105
|
-
className
|
|
106
|
-
}) {
|
|
107
|
-
return /* @__PURE__ */ jsxDEV3("section", {
|
|
108
|
-
className: cn2("mx-auto max-w-4xl py-16 text-center", className),
|
|
109
|
-
children: [
|
|
110
|
-
/* @__PURE__ */ jsxDEV3("h1", {
|
|
111
|
-
className: "text-4xl font-bold tracking-tight md:text-5xl",
|
|
112
|
-
children: title
|
|
113
|
-
}, undefined, false, undefined, this),
|
|
114
|
-
subtitle && /* @__PURE__ */ jsxDEV3("p", {
|
|
115
|
-
className: "text-muted-foreground mt-4 text-lg md:text-xl",
|
|
116
|
-
children: subtitle
|
|
117
|
-
}, undefined, false, undefined, this),
|
|
118
|
-
(primaryCta || secondaryCta) && /* @__PURE__ */ jsxDEV3("div", {
|
|
119
|
-
className: "mt-8 flex items-center justify-center gap-3",
|
|
120
|
-
children: [
|
|
121
|
-
primaryCta && (primaryCta.href ? /* @__PURE__ */ jsxDEV3(Button, {
|
|
122
|
-
asChild: true,
|
|
123
|
-
size: "lg",
|
|
124
|
-
children: /* @__PURE__ */ jsxDEV3("a", {
|
|
125
|
-
href: primaryCta.href,
|
|
126
|
-
children: primaryCta.label
|
|
127
|
-
}, undefined, false, undefined, this)
|
|
128
|
-
}, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV3(Button, {
|
|
129
|
-
size: "lg",
|
|
130
|
-
onClick: primaryCta.onClick,
|
|
131
|
-
children: primaryCta.label
|
|
132
|
-
}, undefined, false, undefined, this)),
|
|
133
|
-
secondaryCta && (secondaryCta.href ? /* @__PURE__ */ jsxDEV3(Button, {
|
|
134
|
-
variant: "outline",
|
|
135
|
-
asChild: true,
|
|
136
|
-
size: "lg",
|
|
137
|
-
children: /* @__PURE__ */ jsxDEV3("a", {
|
|
138
|
-
href: secondaryCta.href,
|
|
139
|
-
children: secondaryCta.label
|
|
140
|
-
}, undefined, false, undefined, this)
|
|
141
|
-
}, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV3(Button, {
|
|
142
|
-
variant: "outline",
|
|
143
|
-
size: "lg",
|
|
144
|
-
onClick: secondaryCta.onClick,
|
|
145
|
-
children: secondaryCta.label
|
|
146
|
-
}, undefined, false, undefined, this))
|
|
147
|
-
]
|
|
148
|
-
}, undefined, true, undefined, this)
|
|
149
|
-
]
|
|
150
|
-
}, undefined, true, undefined, this);
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
// ui/marketing/PricingTable.tsx
|
|
154
|
-
import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
|
|
155
|
-
function PricingTable({
|
|
156
|
-
tiers,
|
|
157
|
-
className
|
|
158
|
-
}) {
|
|
159
|
-
return /* @__PURE__ */ jsxDEV4("section", {
|
|
160
|
-
className: cn2("mx-auto max-w-6xl py-12", className),
|
|
161
|
-
children: [
|
|
162
|
-
/* @__PURE__ */ jsxDEV4("div", {
|
|
163
|
-
className: "grid grid-cols-1 gap-6 md:grid-cols-3",
|
|
164
|
-
children: tiers.map((t, idx) => /* @__PURE__ */ jsxDEV4("div", {
|
|
165
|
-
className: cn2("flex flex-col rounded-lg border p-6", t.highlighted && "border-primary shadow-lg"),
|
|
166
|
-
children: [
|
|
167
|
-
/* @__PURE__ */ jsxDEV4("div", {
|
|
168
|
-
className: "text-muted-foreground mb-2 text-base font-medium",
|
|
169
|
-
children: t.name
|
|
170
|
-
}, undefined, false, undefined, this),
|
|
171
|
-
/* @__PURE__ */ jsxDEV4("div", {
|
|
172
|
-
className: "text-3xl font-semibold",
|
|
173
|
-
children: t.price
|
|
174
|
-
}, undefined, false, undefined, this),
|
|
175
|
-
t.tagline && /* @__PURE__ */ jsxDEV4("div", {
|
|
176
|
-
className: "text-muted-foreground mt-1 text-base",
|
|
177
|
-
children: t.tagline
|
|
178
|
-
}, undefined, false, undefined, this),
|
|
179
|
-
/* @__PURE__ */ jsxDEV4("ul", {
|
|
180
|
-
className: "mt-4 space-y-2 text-base",
|
|
181
|
-
children: t.features.map((f, i) => /* @__PURE__ */ jsxDEV4("li", {
|
|
182
|
-
className: "flex items-start gap-2",
|
|
183
|
-
children: [
|
|
184
|
-
/* @__PURE__ */ jsxDEV4("span", {
|
|
185
|
-
className: "bg-primary mt-1 h-1.5 w-1.5 rounded-full"
|
|
186
|
-
}, undefined, false, undefined, this),
|
|
187
|
-
/* @__PURE__ */ jsxDEV4("span", {
|
|
188
|
-
children: f
|
|
189
|
-
}, undefined, false, undefined, this)
|
|
190
|
-
]
|
|
191
|
-
}, i, true, undefined, this))
|
|
192
|
-
}, undefined, false, undefined, this),
|
|
193
|
-
t.cta && /* @__PURE__ */ jsxDEV4("div", {
|
|
194
|
-
className: "mt-6",
|
|
195
|
-
children: t.cta.href ? /* @__PURE__ */ jsxDEV4(Button, {
|
|
196
|
-
asChild: true,
|
|
197
|
-
className: "w-full",
|
|
198
|
-
children: /* @__PURE__ */ jsxDEV4("a", {
|
|
199
|
-
href: t.cta.href,
|
|
200
|
-
children: t.cta.label
|
|
201
|
-
}, undefined, false, undefined, this)
|
|
202
|
-
}, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV4(Button, {
|
|
203
|
-
className: "w-full",
|
|
204
|
-
onClick: t.cta.onClick,
|
|
205
|
-
children: t.cta.label
|
|
206
|
-
}, undefined, false, undefined, this)
|
|
207
|
-
}, undefined, false, undefined, this)
|
|
208
|
-
]
|
|
209
|
-
}, idx, true, undefined, this))
|
|
210
|
-
}, undefined, false, undefined, this),
|
|
211
|
-
/* @__PURE__ */ jsxDEV4("p", {
|
|
212
|
-
className: "text-muted-foreground mt-6 text-center text-base",
|
|
213
|
-
children: "Usage-based tiers inspired by generous free allowances and per-unit pricing."
|
|
214
|
-
}, undefined, false, undefined, this)
|
|
215
|
-
]
|
|
216
|
-
}, undefined, true, undefined, this);
|
|
217
|
-
}
|
|
218
8
|
export {
|
|
219
9
|
PricingTable,
|
|
220
10
|
Hero,
|
|
@@ -5,189 +5,6 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
|
|
|
5
5
|
return require.apply(this, arguments);
|
|
6
6
|
throw Error('Dynamic require of "' + x + '" is not supported');
|
|
7
7
|
});
|
|
8
|
-
|
|
9
|
-
// ui/button.tsx
|
|
10
|
-
import { Slot } from "@radix-ui/react-slot";
|
|
11
|
-
import { cva } from "class-variance-authority";
|
|
12
|
-
import { cn } from "@contractspec/lib.ui-kit-core/utils";
|
|
13
|
-
import { jsxDEV } from "react/jsx-dev-runtime";
|
|
14
|
-
var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-hidden focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
|
|
15
|
-
variants: {
|
|
16
|
-
variant: {
|
|
17
|
-
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
18
|
-
destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
|
19
|
-
outline: "border bg-background shadow-2xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
|
20
|
-
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
21
|
-
ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
|
22
|
-
link: "text-primary underline-offset-4 hover:underline"
|
|
23
|
-
},
|
|
24
|
-
size: {
|
|
25
|
-
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
|
26
|
-
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
|
27
|
-
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
|
28
|
-
icon: "size-9"
|
|
29
|
-
}
|
|
30
|
-
},
|
|
31
|
-
defaultVariants: {
|
|
32
|
-
variant: "default",
|
|
33
|
-
size: "default"
|
|
34
|
-
}
|
|
35
|
-
});
|
|
36
|
-
function Button({
|
|
37
|
-
className,
|
|
38
|
-
variant,
|
|
39
|
-
size,
|
|
40
|
-
asChild = false,
|
|
41
|
-
ref,
|
|
42
|
-
...props
|
|
43
|
-
}) {
|
|
44
|
-
if (asChild) {
|
|
45
|
-
return /* @__PURE__ */ jsxDEV(Slot, {
|
|
46
|
-
"data-slot": "button",
|
|
47
|
-
className: cn(buttonVariants({ variant, size, className })),
|
|
48
|
-
...props
|
|
49
|
-
}, undefined, false, undefined, this);
|
|
50
|
-
}
|
|
51
|
-
return /* @__PURE__ */ jsxDEV("button", {
|
|
52
|
-
ref,
|
|
53
|
-
"data-slot": "button",
|
|
54
|
-
className: cn(buttonVariants({ variant, size, className })),
|
|
55
|
-
...props
|
|
56
|
-
}, undefined, false, undefined, this);
|
|
57
|
-
}
|
|
58
|
-
// ui/organisms/ErrorBoundary/ErrorBoundary.tsx
|
|
59
|
-
import React from "react";
|
|
60
|
-
import { AlertTriangle, RefreshCw, Home } from "lucide-react";
|
|
61
|
-
import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
|
|
62
|
-
"use client";
|
|
63
|
-
var DefaultErrorFallback = ({
|
|
64
|
-
error,
|
|
65
|
-
errorId,
|
|
66
|
-
resetError
|
|
67
|
-
}) => {
|
|
68
|
-
const isDevelopment = false;
|
|
69
|
-
return /* @__PURE__ */ jsxDEV2("div", {
|
|
70
|
-
className: "flex min-h-screen items-center justify-center bg-gray-50 px-4",
|
|
71
|
-
children: /* @__PURE__ */ jsxDEV2("div", {
|
|
72
|
-
className: "w-full max-w-md rounded-lg bg-white p-6 text-center shadow-lg",
|
|
73
|
-
children: [
|
|
74
|
-
/* @__PURE__ */ jsxDEV2("div", {
|
|
75
|
-
className: "mb-4 flex justify-center",
|
|
76
|
-
children: /* @__PURE__ */ jsxDEV2(AlertTriangle, {
|
|
77
|
-
className: "h-12 w-12 text-red-500"
|
|
78
|
-
}, undefined, false, undefined, this)
|
|
79
|
-
}, undefined, false, undefined, this),
|
|
80
|
-
/* @__PURE__ */ jsxDEV2("h1", {
|
|
81
|
-
className: "mb-2 text-2xl font-semibold text-gray-900",
|
|
82
|
-
children: "Une erreur s'est produite"
|
|
83
|
-
}, undefined, false, undefined, this),
|
|
84
|
-
/* @__PURE__ */ jsxDEV2("p", {
|
|
85
|
-
className: "mb-6 text-gray-600",
|
|
86
|
-
children: "Nous nous excusons pour ce désagrément. Notre équipe a été notifiée et travaille à résoudre le problème."
|
|
87
|
-
}, undefined, false, undefined, this),
|
|
88
|
-
isDevelopment && /* @__PURE__ */ jsxDEV2("div", {
|
|
89
|
-
className: "mb-6 rounded-md bg-red-50 p-4 text-left",
|
|
90
|
-
children: [
|
|
91
|
-
/* @__PURE__ */ jsxDEV2("p", {
|
|
92
|
-
className: "mb-2 text-base font-medium text-red-800",
|
|
93
|
-
children: "Erreur de développement:"
|
|
94
|
-
}, undefined, false, undefined, this),
|
|
95
|
-
/* @__PURE__ */ jsxDEV2("p", {
|
|
96
|
-
className: "font-mono text-sm break-all text-red-700",
|
|
97
|
-
children: error.message
|
|
98
|
-
}, undefined, false, undefined, this),
|
|
99
|
-
errorId && /* @__PURE__ */ jsxDEV2("p", {
|
|
100
|
-
className: "mt-2 text-sm text-red-600",
|
|
101
|
-
children: [
|
|
102
|
-
"ID: ",
|
|
103
|
-
errorId
|
|
104
|
-
]
|
|
105
|
-
}, undefined, true, undefined, this)
|
|
106
|
-
]
|
|
107
|
-
}, undefined, true, undefined, this),
|
|
108
|
-
/* @__PURE__ */ jsxDEV2("div", {
|
|
109
|
-
className: "flex flex-col justify-center gap-3 sm:flex-row",
|
|
110
|
-
children: [
|
|
111
|
-
/* @__PURE__ */ jsxDEV2(Button, {
|
|
112
|
-
onClick: resetError,
|
|
113
|
-
className: "flex items-center gap-2",
|
|
114
|
-
children: [
|
|
115
|
-
/* @__PURE__ */ jsxDEV2(RefreshCw, {
|
|
116
|
-
className: "h-4 w-4"
|
|
117
|
-
}, undefined, false, undefined, this),
|
|
118
|
-
"Réessayer"
|
|
119
|
-
]
|
|
120
|
-
}, undefined, true, undefined, this),
|
|
121
|
-
/* @__PURE__ */ jsxDEV2(Button, {
|
|
122
|
-
onClick: () => window.location.href = "/",
|
|
123
|
-
variant: "secondary",
|
|
124
|
-
className: "flex items-center gap-2",
|
|
125
|
-
children: [
|
|
126
|
-
/* @__PURE__ */ jsxDEV2(Home, {
|
|
127
|
-
className: "h-4 w-4"
|
|
128
|
-
}, undefined, false, undefined, this),
|
|
129
|
-
"Accueil"
|
|
130
|
-
]
|
|
131
|
-
}, undefined, true, undefined, this)
|
|
132
|
-
]
|
|
133
|
-
}, undefined, true, undefined, this),
|
|
134
|
-
!isDevelopment && errorId && /* @__PURE__ */ jsxDEV2("p", {
|
|
135
|
-
className: "mt-4 text-sm text-gray-500",
|
|
136
|
-
children: [
|
|
137
|
-
"Code d'erreur: ",
|
|
138
|
-
errorId
|
|
139
|
-
]
|
|
140
|
-
}, undefined, true, undefined, this)
|
|
141
|
-
]
|
|
142
|
-
}, undefined, true, undefined, this)
|
|
143
|
-
}, undefined, false, undefined, this);
|
|
144
|
-
};
|
|
145
|
-
|
|
146
|
-
class ErrorBoundary extends React.Component {
|
|
147
|
-
constructor(props) {
|
|
148
|
-
super(props);
|
|
149
|
-
this.state = {
|
|
150
|
-
hasError: false,
|
|
151
|
-
error: null,
|
|
152
|
-
errorId: null
|
|
153
|
-
};
|
|
154
|
-
}
|
|
155
|
-
static getDerivedStateFromError(error) {
|
|
156
|
-
return {
|
|
157
|
-
hasError: true,
|
|
158
|
-
error
|
|
159
|
-
};
|
|
160
|
-
}
|
|
161
|
-
componentDidCatch(error, errorInfo) {
|
|
162
|
-
const errorId = `err_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
|
|
163
|
-
this.setState({ errorId });
|
|
164
|
-
this.props.onError?.(error, errorInfo);
|
|
165
|
-
if (false) {}
|
|
166
|
-
}
|
|
167
|
-
resetError = () => {
|
|
168
|
-
this.setState({
|
|
169
|
-
hasError: false,
|
|
170
|
-
error: null,
|
|
171
|
-
errorId: null
|
|
172
|
-
});
|
|
173
|
-
};
|
|
174
|
-
render() {
|
|
175
|
-
if (this.state.hasError && this.state.error) {
|
|
176
|
-
const FallbackComponent = this.props.fallback || DefaultErrorFallback;
|
|
177
|
-
return /* @__PURE__ */ jsxDEV2(FallbackComponent, {
|
|
178
|
-
error: this.state.error,
|
|
179
|
-
errorId: this.state.errorId,
|
|
180
|
-
resetError: this.resetError
|
|
181
|
-
}, undefined, false, undefined, this);
|
|
182
|
-
}
|
|
183
|
-
return this.props.children;
|
|
184
|
-
}
|
|
185
|
-
}
|
|
186
|
-
var useErrorHandler = () => {
|
|
187
|
-
return React.useCallback((error) => {
|
|
188
|
-
throw error;
|
|
189
|
-
}, []);
|
|
190
|
-
};
|
|
191
8
|
export {
|
|
192
9
|
useErrorHandler,
|
|
193
10
|
ErrorBoundary
|