@adhese/sdk-devtools 0.11.6 → 0.12.1
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/CHANGELOG.md +20 -0
- package/dist/AdheseContext.js +19 -0
- package/dist/AdheseContext.js.map +1 -0
- package/dist/Devtools.hooks.js +24 -0
- package/dist/Devtools.hooks.js.map +1 -0
- package/dist/Devtools.js +79 -0
- package/dist/Devtools.js.map +1 -0
- package/dist/cjs/AdheseContext.cjs +19 -0
- package/dist/cjs/AdheseContext.cjs.map +1 -0
- package/dist/cjs/Devtools.cjs +79 -0
- package/dist/cjs/Devtools.cjs.map +1 -0
- package/dist/cjs/Devtools.hooks.cjs +24 -0
- package/dist/cjs/Devtools.hooks.cjs.map +1 -0
- package/dist/cjs/components/badge.cjs +27 -0
- package/dist/cjs/components/badge.cjs.map +1 -0
- package/dist/cjs/components/button.cjs +49 -0
- package/dist/cjs/components/button.cjs.map +1 -0
- package/dist/cjs/components/editSlot.cjs +110 -0
- package/dist/cjs/components/editSlot.cjs.map +1 -0
- package/dist/cjs/components/form.cjs +110 -0
- package/dist/cjs/components/form.cjs.map +1 -0
- package/dist/cjs/components/fronttailSettings.cjs +94 -0
- package/dist/cjs/components/fronttailSettings.cjs.map +1 -0
- package/dist/cjs/components/input.cjs +22 -0
- package/dist/cjs/components/input.cjs.map +1 -0
- package/dist/cjs/components/label.cjs +38 -0
- package/dist/cjs/components/label.cjs.map +1 -0
- package/dist/cjs/components/logTable.cjs +67 -0
- package/dist/cjs/components/logTable.cjs.map +1 -0
- package/dist/cjs/components/parametersTable.cjs +40 -0
- package/dist/cjs/components/parametersTable.cjs.map +1 -0
- package/dist/cjs/components/previewButton.cjs +19 -0
- package/dist/cjs/components/previewButton.cjs.map +1 -0
- package/dist/cjs/components/settings.cjs +10 -0
- package/dist/cjs/components/settings.cjs.map +1 -0
- package/dist/cjs/components/sheet.cjs +118 -0
- package/dist/cjs/components/sheet.cjs.map +1 -0
- package/dist/cjs/components/slotsTable.cjs +230 -0
- package/dist/cjs/components/slotsTable.cjs.map +1 -0
- package/dist/cjs/components/switch.cjs +45 -0
- package/dist/cjs/components/switch.cjs.map +1 -0
- package/dist/cjs/components/table.cjs +91 -0
- package/dist/cjs/components/table.cjs.map +1 -0
- package/dist/cjs/components/tabs.cjs +65 -0
- package/dist/cjs/components/tabs.cjs.map +1 -0
- package/dist/cjs/devtools.composables.cjs +116 -0
- package/dist/cjs/devtools.composables.cjs.map +1 -0
- package/dist/cjs/main.cjs +16 -0
- package/dist/cjs/main.cjs.map +1 -0
- package/dist/cjs/modifiedSlots.store.cjs +63 -0
- package/dist/cjs/modifiedSlots.store.cjs.map +1 -0
- package/dist/cjs/package.json.cjs +7 -0
- package/dist/cjs/package.json.cjs.map +1 -0
- package/dist/cjs/sdkDevtools.cjs +17 -0
- package/dist/cjs/sdkDevtools.cjs.map +1 -0
- package/dist/cjs/utils.cjs +9 -0
- package/dist/cjs/utils.cjs.map +1 -0
- package/dist/components/badge.js +27 -0
- package/dist/components/badge.js.map +1 -0
- package/dist/components/button.js +49 -0
- package/dist/components/button.js.map +1 -0
- package/dist/components/editSlot.js +110 -0
- package/dist/components/editSlot.js.map +1 -0
- package/dist/components/form.js +110 -0
- package/dist/components/form.js.map +1 -0
- package/dist/components/fronttailSettings.js +94 -0
- package/dist/components/fronttailSettings.js.map +1 -0
- package/dist/components/input.js +22 -0
- package/dist/components/input.js.map +1 -0
- package/dist/components/label.js +21 -0
- package/dist/components/label.js.map +1 -0
- package/dist/components/logTable.js +67 -0
- package/dist/components/logTable.js.map +1 -0
- package/dist/components/parametersTable.js +40 -0
- package/dist/components/parametersTable.js.map +1 -0
- package/dist/components/previewButton.js +19 -0
- package/dist/components/previewButton.js.map +1 -0
- package/dist/components/settings.js +10 -0
- package/dist/components/settings.js.map +1 -0
- package/dist/components/sheet.js +101 -0
- package/dist/components/sheet.js.map +1 -0
- package/dist/components/slotsTable.js +230 -0
- package/dist/components/slotsTable.js.map +1 -0
- package/dist/components/switch.js +28 -0
- package/dist/components/switch.js.map +1 -0
- package/dist/components/table.js +91 -0
- package/dist/components/table.js.map +1 -0
- package/dist/components/tabs.js +48 -0
- package/dist/components/tabs.js.map +1 -0
- package/dist/devtools.composables.js +116 -0
- package/dist/devtools.composables.js.map +1 -0
- package/dist/main.js +16 -0
- package/dist/main.js.map +1 -0
- package/dist/modifiedSlots.store.js +63 -0
- package/dist/modifiedSlots.store.js.map +1 -0
- package/dist/package.json.js +7 -0
- package/dist/package.json.js.map +1 -0
- package/dist/sdkDevtools.d.ts +11 -0
- package/dist/sdkDevtools.js +17 -0
- package/dist/sdkDevtools.js.map +1 -0
- package/dist/utils.js +9 -0
- package/dist/utils.js.map +1 -0
- package/package.json +11 -8
- package/dist/devtools-Cbms1xWf.cjs +0 -816
- package/dist/devtools-Cbms1xWf.cjs.map +0 -1
- package/dist/devtools-CjRcI3Xd.js +0 -797
- package/dist/devtools-CjRcI3Xd.js.map +0 -1
- package/dist/index.cjs +0 -47
- package/dist/index.cjs.map +0 -1
- package/dist/index.d.ts +0 -14
- package/dist/index.js +0 -47
- package/dist/index.js.map +0 -1
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo, useState, useCallback, useId } from "react";
|
|
3
|
+
import { getCookie, hasCookie, deleteCookie, setCookie } from "@adhese/sdk-shared";
|
|
4
|
+
import { cn } from "../utils.js";
|
|
5
|
+
import { useAdheseContext } from "../AdheseContext.js";
|
|
6
|
+
import { Switch } from "./switch.js";
|
|
7
|
+
import { Label } from "./label.js";
|
|
8
|
+
import { Input } from "./input.js";
|
|
9
|
+
import { Button } from "./button.js";
|
|
10
|
+
const cookieKey = "debugKey";
|
|
11
|
+
function setDebugCookie(value) {
|
|
12
|
+
setCookie({
|
|
13
|
+
key: cookieKey,
|
|
14
|
+
value,
|
|
15
|
+
expires: new Date(Date.now() + 24 * 60 * 60 * 1e3)
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
function simpleStringify(value) {
|
|
19
|
+
if (typeof value === "object")
|
|
20
|
+
return Object.values(value).map((nestedValue) => `${simpleStringify(nestedValue)}`).join("");
|
|
21
|
+
if (typeof value === "boolean")
|
|
22
|
+
return value ? "1" : "0";
|
|
23
|
+
return String(value);
|
|
24
|
+
}
|
|
25
|
+
function FronttailSettings({
|
|
26
|
+
className,
|
|
27
|
+
"aria-labelledby": ariaLabelledBy,
|
|
28
|
+
...props
|
|
29
|
+
}) {
|
|
30
|
+
const adheseContext = useAdheseContext();
|
|
31
|
+
const autoGeneratedKey = useMemo(() => `adhese-${adheseContext.options.account}-${btoa(simpleStringify(adheseContext.options)).slice(0, 20)}`, [adheseContext.options]);
|
|
32
|
+
const [fronttailDebugKey, setFronttailDebugKey] = useState(getCookie(cookieKey) ?? autoGeneratedKey);
|
|
33
|
+
const [isFronttailEnabled, setIsFronttailEnabled] = useState(hasCookie(cookieKey));
|
|
34
|
+
const onFronttailDebugKeyChange = useCallback((event) => {
|
|
35
|
+
const { value } = event.target;
|
|
36
|
+
setFronttailDebugKey(value);
|
|
37
|
+
if (isFronttailEnabled && value.length > 4)
|
|
38
|
+
setDebugCookie(value);
|
|
39
|
+
}, [setDebugCookie, isFronttailEnabled]);
|
|
40
|
+
const onFrontailEnabledChange = useCallback(() => {
|
|
41
|
+
setIsFronttailEnabled((value) => {
|
|
42
|
+
if (value)
|
|
43
|
+
deleteCookie(cookieKey);
|
|
44
|
+
else
|
|
45
|
+
setDebugCookie(fronttailDebugKey);
|
|
46
|
+
return !value;
|
|
47
|
+
});
|
|
48
|
+
}, [setDebugCookie, fronttailDebugKey]);
|
|
49
|
+
const id = useId();
|
|
50
|
+
return /* @__PURE__ */ jsxs("section", { className: cn("flex flex-col gap-6", className), "aria-labelledby": ariaLabelledBy ?? `fronttailHeading${id}`, ...props, children: [
|
|
51
|
+
/* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", id: `fronttailHeading${id}`, children: "Fronttail settings" }),
|
|
52
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
|
|
53
|
+
/* @__PURE__ */ jsx(Switch, { checked: isFronttailEnabled, onCheckedChange: onFrontailEnabledChange, id: `fronttailSwitch${id}` }),
|
|
54
|
+
/* @__PURE__ */ jsxs(Label, { htmlFor: `fronttailSwitch${id}`, children: [
|
|
55
|
+
"Enable Fronttail debugging",
|
|
56
|
+
/* @__PURE__ */ jsx("span", { className: "text-gray-400 font-normal", children: " – Cookie will expire automatically in 1 day" })
|
|
57
|
+
] })
|
|
58
|
+
] }),
|
|
59
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
|
|
60
|
+
/* @__PURE__ */ jsx(Label, { htmlFor: `fronttailDebugKey${id}`, children: "Debug key" }),
|
|
61
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
|
|
62
|
+
/* @__PURE__ */ jsx(
|
|
63
|
+
Input,
|
|
64
|
+
{
|
|
65
|
+
id: `fronttailDebugKey${id}`,
|
|
66
|
+
value: fronttailDebugKey,
|
|
67
|
+
onChange: onFronttailDebugKeyChange,
|
|
68
|
+
className: cn("max-w-60", {
|
|
69
|
+
// eslint-disable-next-line ts/naming-convention
|
|
70
|
+
"border-destructive": fronttailDebugKey.length < 4
|
|
71
|
+
})
|
|
72
|
+
}
|
|
73
|
+
),
|
|
74
|
+
/* @__PURE__ */ jsx(
|
|
75
|
+
Button,
|
|
76
|
+
{
|
|
77
|
+
variant: "outline",
|
|
78
|
+
onClick: () => {
|
|
79
|
+
setFronttailDebugKey(autoGeneratedKey);
|
|
80
|
+
if (isFronttailEnabled)
|
|
81
|
+
setDebugCookie(autoGeneratedKey);
|
|
82
|
+
},
|
|
83
|
+
children: "Auto generate key"
|
|
84
|
+
}
|
|
85
|
+
)
|
|
86
|
+
] }),
|
|
87
|
+
fronttailDebugKey.length < 4 && /* @__PURE__ */ jsx("span", { className: "text-sm text-destructive", children: "Debug key must contain at least 4 characters" })
|
|
88
|
+
] })
|
|
89
|
+
] });
|
|
90
|
+
}
|
|
91
|
+
export {
|
|
92
|
+
FronttailSettings
|
|
93
|
+
};
|
|
94
|
+
//# sourceMappingURL=fronttailSettings.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fronttailSettings.js","sources":["../../src/components/fronttailSettings.tsx"],"sourcesContent":["import { type ChangeEventHandler, type HTMLAttributes, type ReactElement, useCallback, useId, useMemo, useState } from 'react';\nimport { deleteCookie, getCookie, hasCookie, setCookie } from '@adhese/sdk-shared';\nimport { cn } from '../utils';\nimport { useAdheseContext } from '../AdheseContext';\nimport { Switch } from './switch';\nimport { Label } from './label';\nimport { Input } from './input';\nimport { Button } from './button';\n\nconst cookieKey = 'debugKey';\n\nfunction setDebugCookie(value: string): void {\n setCookie({\n key: cookieKey,\n value,\n expires: new Date(Date.now() + 24 * 60 * 60 * 1000),\n });\n}\n\nfunction simpleStringify(value: unknown): string {\n if (typeof value === 'object')\n return Object.values(value as object).map(nestedValue => `${simpleStringify(nestedValue)}`).join('');\n\n if (typeof value === 'boolean')\n return value ? '1' : '0';\n\n return String(value);\n}\n\n// eslint-disable-next-line ts/naming-convention\nexport function FronttailSettings({\n className,\n 'aria-labelledby': ariaLabelledBy,\n ...props\n}: HTMLAttributes<HTMLDivElement>): ReactElement {\n const adheseContext = useAdheseContext()!;\n\n const autoGeneratedKey = useMemo(() => `adhese-${adheseContext.options.account}-${btoa(simpleStringify(adheseContext.options)).slice(0, 20)}`, [adheseContext.options]);\n\n const [fronttailDebugKey, setFronttailDebugKey] = useState(getCookie(cookieKey) ?? autoGeneratedKey);\n const [isFronttailEnabled, setIsFronttailEnabled] = useState(hasCookie(cookieKey));\n\n const onFronttailDebugKeyChange = useCallback((event) => {\n const { value } = event.target;\n\n setFronttailDebugKey(value);\n\n if (isFronttailEnabled && value.length > 4)\n setDebugCookie(value);\n }, [setDebugCookie, isFronttailEnabled]) satisfies ChangeEventHandler<HTMLInputElement>;\n\n const onFrontailEnabledChange = useCallback(() => {\n setIsFronttailEnabled((value) => {\n if (value)\n deleteCookie(cookieKey);\n\n else\n setDebugCookie(fronttailDebugKey);\n\n return !value;\n });\n }, [setDebugCookie, fronttailDebugKey]);\n\n const id = useId();\n return (\n <section className={cn('flex flex-col gap-6', className)} aria-labelledby={ariaLabelledBy ?? `fronttailHeading${id}`} {...props}>\n <h2 className=\"text-lg font-semibold\" id={`fronttailHeading${id}`}>Fronttail settings</h2>\n\n <div className=\"flex items-center gap-4\">\n <Switch checked={isFronttailEnabled} onCheckedChange={onFrontailEnabledChange} id={`fronttailSwitch${id}`} />\n <Label htmlFor={`fronttailSwitch${id}`}>\n Enable Fronttail debugging\n <span className=\"text-gray-400 font-normal\"> – Cookie will expire automatically in 1 day</span>\n </Label>\n </div>\n\n <div className=\"flex flex-col gap-2\">\n <Label htmlFor={`fronttailDebugKey${id}`}>\n Debug key\n </Label>\n <div className=\"flex items-center gap-4\">\n <Input\n id={`fronttailDebugKey${id}`}\n value={fronttailDebugKey}\n onChange={onFronttailDebugKeyChange}\n className={\n cn('max-w-60', {\n // eslint-disable-next-line ts/naming-convention\n 'border-destructive': fronttailDebugKey.length < 4,\n })\n }\n />\n\n <Button\n variant=\"outline\"\n onClick={() => {\n setFronttailDebugKey(autoGeneratedKey);\n\n if (isFronttailEnabled)\n setDebugCookie(autoGeneratedKey);\n }}\n >\n Auto generate key\n </Button>\n </div>\n {\n fronttailDebugKey.length < 4\n && <span className=\"text-sm text-destructive\">Debug key must contain at least 4 characters</span>\n }\n </div>\n </section>\n );\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from "react";
|
|
3
|
+
import { cn } from "../utils.js";
|
|
4
|
+
const Input = forwardRef(
|
|
5
|
+
({ className, type, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
6
|
+
"input",
|
|
7
|
+
{
|
|
8
|
+
type,
|
|
9
|
+
className: cn(
|
|
10
|
+
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
|
|
11
|
+
className
|
|
12
|
+
),
|
|
13
|
+
ref,
|
|
14
|
+
...props
|
|
15
|
+
}
|
|
16
|
+
)
|
|
17
|
+
);
|
|
18
|
+
Input.displayName = "Input";
|
|
19
|
+
export {
|
|
20
|
+
Input
|
|
21
|
+
};
|
|
22
|
+
//# sourceMappingURL=input.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"input.js","sources":["../../src/components/input.tsx"],"sourcesContent":["import { type InputHTMLAttributes, forwardRef } from 'react';\nimport { cn } from '../utils';\n\nexport interface InputProps\n extends InputHTMLAttributes<HTMLInputElement> {}\n\n// eslint-disable-next-line ts/naming-convention\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n ({ className, type, ...props }, ref) => (\n <input\n type={type}\n className={cn(\n 'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',\n className,\n )}\n ref={ref}\n {...props}\n />\n ),\n);\nInput.displayName = 'Input';\n\nexport { Input };\n"],"names":[],"mappings":";;;AAOA,MAAM,QAAQ;AAAA,EACZ,CAAC,EAAE,WAAW,MAAM,GAAG,SAAS,QAC9B;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ;AACA,MAAM,cAAc;"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import * as LabelPrimitive from "@radix-ui/react-label";
|
|
3
|
+
import { cva } from "class-variance-authority";
|
|
4
|
+
import { forwardRef } from "react";
|
|
5
|
+
import { cn } from "../utils.js";
|
|
6
|
+
const labelVariants = cva(
|
|
7
|
+
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
|
8
|
+
);
|
|
9
|
+
const Label = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
10
|
+
LabelPrimitive.Root,
|
|
11
|
+
{
|
|
12
|
+
ref,
|
|
13
|
+
className: cn(labelVariants(), className),
|
|
14
|
+
...props
|
|
15
|
+
}
|
|
16
|
+
));
|
|
17
|
+
Label.displayName = LabelPrimitive.Root.displayName;
|
|
18
|
+
export {
|
|
19
|
+
Label
|
|
20
|
+
};
|
|
21
|
+
//# sourceMappingURL=label.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"label.js","sources":["../../src/components/label.tsx"],"sourcesContent":["// eslint-disable-next-line ts/naming-convention\nimport * as LabelPrimitive from '@radix-ui/react-label';\nimport { type VariantProps, cva } from 'class-variance-authority';\nimport { type ComponentPropsWithoutRef, type ElementRef, forwardRef } from 'react';\nimport { cn } from '../utils';\n\nconst labelVariants = cva(\n 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n);\n\n// eslint-disable-next-line ts/naming-convention\nconst Label = forwardRef<\n ElementRef<typeof LabelPrimitive.Root>,\n ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &\n VariantProps<typeof labelVariants>\n>(({ className, ...props }, ref) => (\n <LabelPrimitive.Root\n ref={ref}\n className={cn(labelVariants(), className)}\n {...props}\n />\n));\nLabel.displayName = LabelPrimitive.Root.displayName;\n\nexport { Label };\n"],"names":[],"mappings":";;;;;AAMA,MAAM,gBAAgB;AAAA,EACpB;AACF;AAGM,MAAA,QAAQ,WAIZ,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC,eAAe;AAAA,EAAf;AAAA,IACC;AAAA,IACA,WAAW,GAAG,cAAc,GAAG,SAAS;AAAA,IACvC,GAAG;AAAA,EAAA;AACN,CACD;AACD,MAAM,cAAc,eAAe,KAAK;"}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useState, useEffect } from "react";
|
|
3
|
+
import { useAdheseContext } from "../AdheseContext.js";
|
|
4
|
+
import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "./table.js";
|
|
5
|
+
import { Badge } from "./badge.js";
|
|
6
|
+
const dateFormatter = new Intl.DateTimeFormat("en-US", {
|
|
7
|
+
hour: "numeric",
|
|
8
|
+
minute: "numeric",
|
|
9
|
+
second: "numeric",
|
|
10
|
+
fractionalSecondDigits: 3,
|
|
11
|
+
hour12: false
|
|
12
|
+
});
|
|
13
|
+
const logTableRowClasses = {
|
|
14
|
+
error: "bg-red-100 text-red-900",
|
|
15
|
+
warn: "bg-amber-100 text-amber-900"
|
|
16
|
+
};
|
|
17
|
+
const logBadgeClasses = {
|
|
18
|
+
error: "bg-red-500 text-white",
|
|
19
|
+
warn: "bg-amber-500 text-white",
|
|
20
|
+
info: "bg-blue-500 text-white"
|
|
21
|
+
};
|
|
22
|
+
function LogTable() {
|
|
23
|
+
const [logs, setLogs] = useState([]);
|
|
24
|
+
const adheseContext = useAdheseContext();
|
|
25
|
+
useEffect(() => {
|
|
26
|
+
var _a;
|
|
27
|
+
function onLogsChange() {
|
|
28
|
+
var _a2;
|
|
29
|
+
setLogs(
|
|
30
|
+
((_a2 = adheseContext == null ? void 0 : adheseContext.logger) == null ? void 0 : _a2.getLogs().toSorted(
|
|
31
|
+
(a, b) => b.timestamp - a.timestamp
|
|
32
|
+
)) ?? []
|
|
33
|
+
);
|
|
34
|
+
}
|
|
35
|
+
(_a = adheseContext == null ? void 0 : adheseContext.logger) == null ? void 0 : _a.events.log.addListener(onLogsChange);
|
|
36
|
+
onLogsChange();
|
|
37
|
+
return () => {
|
|
38
|
+
var _a2;
|
|
39
|
+
(_a2 = adheseContext == null ? void 0 : adheseContext.logger) == null ? void 0 : _a2.events.log.removeListener(onLogsChange);
|
|
40
|
+
};
|
|
41
|
+
}, []);
|
|
42
|
+
return /* @__PURE__ */ jsxs(Table, { children: [
|
|
43
|
+
/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
|
|
44
|
+
/* @__PURE__ */ jsx(TableHead, { children: "Time" }),
|
|
45
|
+
/* @__PURE__ */ jsx(TableHead, { children: "Scope" }),
|
|
46
|
+
/* @__PURE__ */ jsx(TableHead, { children: "Level" }),
|
|
47
|
+
/* @__PURE__ */ jsx(TableHead, { children: "Message" })
|
|
48
|
+
] }) }),
|
|
49
|
+
/* @__PURE__ */ jsx(TableBody, { children: logs.map((log) => /* @__PURE__ */ jsxs(TableRow, { className: logTableRowClasses[log.level] ?? "", children: [
|
|
50
|
+
/* @__PURE__ */ jsx(TableCell, { children: dateFormatter.format(new Date(log.timestamp)) }),
|
|
51
|
+
/* @__PURE__ */ jsx(TableCell, { children: log.scope }),
|
|
52
|
+
/* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(
|
|
53
|
+
Badge,
|
|
54
|
+
{
|
|
55
|
+
variant: "secondary",
|
|
56
|
+
className: logBadgeClasses[log.level] ?? "",
|
|
57
|
+
children: log.level
|
|
58
|
+
}
|
|
59
|
+
) }),
|
|
60
|
+
/* @__PURE__ */ jsx(TableCell, { children: log.message })
|
|
61
|
+
] }, log.id)) })
|
|
62
|
+
] });
|
|
63
|
+
}
|
|
64
|
+
export {
|
|
65
|
+
LogTable
|
|
66
|
+
};
|
|
67
|
+
//# sourceMappingURL=logTable.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"logTable.js","sources":["../../src/components/logTable.tsx"],"sourcesContent":["import { type ReactElement, useEffect, useState } from 'react';\nimport type { Log } from '@adhese/sdk-shared';\nimport { useAdheseContext } from '../AdheseContext';\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './table';\nimport { Badge } from './badge';\n\nconst dateFormatter = new Intl.DateTimeFormat('en-US', {\n hour: 'numeric',\n minute: 'numeric',\n second: 'numeric',\n fractionalSecondDigits: 3,\n hour12: false,\n});\n\nconst logTableRowClasses: Record<string, string> = {\n error: 'bg-red-100 text-red-900',\n warn: 'bg-amber-100 text-amber-900',\n};\n\nconst logBadgeClasses: Record<string, string> = {\n error: 'bg-red-500 text-white',\n warn: 'bg-amber-500 text-white',\n info: 'bg-blue-500 text-white',\n};\n\n// eslint-disable-next-line ts/naming-convention\nexport function LogTable(): ReactElement {\n const [logs, setLogs] = useState<ReadonlyArray<Log<string>>>([]);\n\n const adheseContext = useAdheseContext();\n\n useEffect(() => {\n function onLogsChange(): void {\n setLogs(\n adheseContext?.logger?.getLogs().toSorted(\n (a, b) => b.timestamp - a.timestamp,\n ) ?? [],\n );\n }\n\n adheseContext?.logger?.events.log.addListener(onLogsChange);\n\n onLogsChange();\n\n return (): void => {\n adheseContext?.logger?.events.log.removeListener(onLogsChange);\n };\n }, []);\n\n return (\n <Table>\n <TableHeader>\n <TableRow>\n <TableHead>Time</TableHead>\n <TableHead>Scope</TableHead>\n <TableHead>Level</TableHead>\n <TableHead>Message</TableHead>\n </TableRow>\n </TableHeader>\n <TableBody>\n {logs.map(log => (\n <TableRow key={log.id} className={logTableRowClasses[log.level] ?? ''}>\n <TableCell>{dateFormatter.format(new Date(log.timestamp))}</TableCell>\n <TableCell>{log.scope}</TableCell>\n <TableCell>\n <Badge\n variant=\"secondary\"\n className={logBadgeClasses[log.level] ?? ''}\n >\n {log.level}\n </Badge>\n </TableCell>\n <TableCell>{log.message}</TableCell>\n </TableRow>\n ))}\n </TableBody>\n </Table>\n );\n}\n"],"names":["_a"],"mappings":";;;;;AAMA,MAAM,gBAAgB,IAAI,KAAK,eAAe,SAAS;AAAA,EACrD,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,wBAAwB;AAAA,EACxB,QAAQ;AACV,CAAC;AAED,MAAM,qBAA6C;AAAA,EACjD,OAAO;AAAA,EACP,MAAM;AACR;AAEA,MAAM,kBAA0C;AAAA,EAC9C,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AACR;AAGO,SAAS,WAAyB;AACvC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAqC,CAAE,CAAA;AAE/D,QAAM,gBAAgB;AAEtB,YAAU,MAAM;;AACd,aAAS,eAAqB;;AAC5B;AAAA,UACEA,MAAA,+CAAe,WAAf,gBAAAA,IAAuB,UAAU;AAAA,UAC/B,CAAC,GAAG,MAAM,EAAE,YAAY,EAAE;AAAA,cACvB,CAAC;AAAA,MAAA;AAAA,IAEV;AAEA,yDAAe,WAAf,mBAAuB,OAAO,IAAI,YAAY;AAEjC;AAEb,WAAO,MAAY;;AACjB,OAAAA,MAAA,+CAAe,WAAf,gBAAAA,IAAuB,OAAO,IAAI,eAAe;AAAA,IAAY;AAAA,EAEjE,GAAG,CAAE,CAAA;AAEL,8BACG,OACC,EAAA,UAAA;AAAA,IAAC,oBAAA,aAAA,EACC,+BAAC,UACC,EAAA,UAAA;AAAA,MAAA,oBAAC,aAAU,UAAI,OAAA,CAAA;AAAA,MACf,oBAAC,aAAU,UAAK,QAAA,CAAA;AAAA,MAChB,oBAAC,aAAU,UAAK,QAAA,CAAA;AAAA,MAChB,oBAAC,aAAU,UAAO,UAAA,CAAA;AAAA,IAAA,EAAA,CACpB,EACF,CAAA;AAAA,IACC,oBAAA,WAAA,EACE,UAAK,KAAA,IAAI,CACR,QAAA,qBAAC,UAAsB,EAAA,WAAW,mBAAmB,IAAI,KAAK,KAAK,IACjE,UAAA;AAAA,MAAC,oBAAA,WAAA,EAAW,wBAAc,OAAO,IAAI,KAAK,IAAI,SAAS,CAAC,GAAE;AAAA,MAC1D,oBAAC,WAAW,EAAA,UAAA,IAAI,MAAM,CAAA;AAAA,0BACrB,WACC,EAAA,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,WAAW,gBAAgB,IAAI,KAAK,KAAK;AAAA,UAExC,UAAI,IAAA;AAAA,QAAA;AAAA,MAAA,GAET;AAAA,MACA,oBAAC,WAAW,EAAA,UAAA,IAAI,QAAQ,CAAA;AAAA,IAXX,EAAA,GAAA,IAAI,EAYnB,CACD,GACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useState, useEffect } from "react";
|
|
3
|
+
import { watch } from "@adhese/sdk-shared";
|
|
4
|
+
import { useAdheseContext } from "../AdheseContext.js";
|
|
5
|
+
import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "./table.js";
|
|
6
|
+
import { Badge } from "./badge.js";
|
|
7
|
+
function ParametersTable() {
|
|
8
|
+
const [parameters, setParameters] = useState([]);
|
|
9
|
+
const adheseContext = useAdheseContext();
|
|
10
|
+
useEffect(() => {
|
|
11
|
+
if (!adheseContext)
|
|
12
|
+
return;
|
|
13
|
+
const disposeWatcher = watch(() => adheseContext.parameters, (newParameters) => {
|
|
14
|
+
setParameters(Array.from(newParameters.entries()).map(([name, value]) => ({
|
|
15
|
+
name,
|
|
16
|
+
value
|
|
17
|
+
})).filter(({ value }) => value).toSorted((a, b) => a.name.localeCompare(b.name)));
|
|
18
|
+
}, {
|
|
19
|
+
immediate: true,
|
|
20
|
+
deep: true
|
|
21
|
+
});
|
|
22
|
+
return () => {
|
|
23
|
+
disposeWatcher();
|
|
24
|
+
};
|
|
25
|
+
}, [adheseContext == null ? void 0 : adheseContext.parameters]);
|
|
26
|
+
return /* @__PURE__ */ jsxs(Table, { children: [
|
|
27
|
+
/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
|
|
28
|
+
/* @__PURE__ */ jsx(TableHead, { children: "Parameter" }),
|
|
29
|
+
/* @__PURE__ */ jsx(TableHead, { children: "Value" })
|
|
30
|
+
] }) }),
|
|
31
|
+
/* @__PURE__ */ jsx(TableBody, { children: parameters.map((parameter) => /* @__PURE__ */ jsxs(TableRow, { children: [
|
|
32
|
+
/* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Badge, { variant: "outline", children: parameter.name }) }),
|
|
33
|
+
/* @__PURE__ */ jsx(TableCell, { children: Array.isArray(parameter.value) ? /* @__PURE__ */ jsx("ul", { className: "flex gap-1", children: parameter.value.map((item, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Badge, { variant: "outline", children: item }) }, index)) }) : /* @__PURE__ */ jsx(Badge, { variant: "outline", children: parameter.value }) })
|
|
34
|
+
] }, parameter.name)) })
|
|
35
|
+
] });
|
|
36
|
+
}
|
|
37
|
+
export {
|
|
38
|
+
ParametersTable
|
|
39
|
+
};
|
|
40
|
+
//# sourceMappingURL=parametersTable.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"parametersTable.js","sources":["../../src/components/parametersTable.tsx"],"sourcesContent":["import { type ReactElement, useEffect, useState } from 'react';\nimport { watch } from '@adhese/sdk-shared';\nimport { useAdheseContext } from '../AdheseContext';\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './table';\nimport { Badge } from './badge';\n\n// eslint-disable-next-line ts/naming-convention\nexport function ParametersTable(): ReactElement {\n const [parameters, setParameters] = useState<ReadonlyArray<{\n name: string;\n value: string | ReadonlyArray<string>;\n }>>([]);\n\n const adheseContext = useAdheseContext();\n\n useEffect(() => {\n if (!adheseContext)\n return;\n\n const disposeWatcher = watch(() => adheseContext.parameters, (newParameters) => {\n setParameters(Array.from(newParameters.entries())\n .map(([name, value]) => ({\n name,\n value,\n }))\n .filter(({ value }) => value)\n .toSorted((a, b) => a.name.localeCompare(b.name)));\n }, {\n immediate: true,\n deep: true,\n });\n\n return (): void => {\n disposeWatcher();\n };\n }, [adheseContext?.parameters]);\n\n return (\n <Table>\n <TableHeader>\n <TableRow>\n <TableHead>Parameter</TableHead>\n <TableHead>Value</TableHead>\n </TableRow>\n </TableHeader>\n <TableBody>\n {parameters.map(parameter => (\n <TableRow key={parameter.name}>\n <TableCell>\n <Badge variant=\"outline\">{parameter.name}</Badge>\n </TableCell>\n <TableCell>\n {\n Array.isArray(parameter.value)\n ? (\n <ul className=\"flex gap-1\">\n {parameter.value.map((item, index) => (\n <li key={index}>\n <Badge variant=\"outline\">{item}</Badge>\n </li>\n ))}\n </ul>\n )\n : <Badge variant=\"outline\">{parameter.value}</Badge>\n }\n </TableCell>\n </TableRow>\n ))}\n </TableBody>\n </Table>\n );\n}\n"],"names":[],"mappings":";;;;;;AAOO,SAAS,kBAAgC;AAC9C,QAAM,CAAC,YAAY,aAAa,IAAI,SAGhC,CAAE,CAAA;AAEN,QAAM,gBAAgB;AAEtB,YAAU,MAAM;AACd,QAAI,CAAC;AACH;AAEF,UAAM,iBAAiB,MAAM,MAAM,cAAc,YAAY,CAAC,kBAAkB;AAChE,oBAAA,MAAM,KAAK,cAAc,QAAQ,CAAC,EAC7C,IAAI,CAAC,CAAC,MAAM,KAAK,OAAO;AAAA,QACvB;AAAA,QACA;AAAA,MAAA,EACA,EACD,OAAO,CAAC,EAAE,MAAA,MAAY,KAAK,EAC3B,SAAS,CAAC,GAAG,MAAM,EAAE,KAAK,cAAc,EAAE,IAAI,CAAC,CAAC;AAAA,IAAA,GAClD;AAAA,MACD,WAAW;AAAA,MACX,MAAM;AAAA,IAAA,CACP;AAED,WAAO,MAAY;AACF;IAAA;AAAA,EACjB,GACC,CAAC,+CAAe,UAAU,CAAC;AAE9B,8BACG,OACC,EAAA,UAAA;AAAA,IAAC,oBAAA,aAAA,EACC,+BAAC,UACC,EAAA,UAAA;AAAA,MAAA,oBAAC,aAAU,UAAS,YAAA,CAAA;AAAA,MACpB,oBAAC,aAAU,UAAK,QAAA,CAAA;AAAA,IAAA,EAAA,CAClB,EACF,CAAA;AAAA,wBACC,WACE,EAAA,UAAA,WAAW,IAAI,CAAA,mCACb,UACC,EAAA,UAAA;AAAA,MAAA,oBAAC,aACC,UAAC,oBAAA,OAAA,EAAM,SAAQ,WAAW,UAAA,UAAU,MAAK,EAC3C,CAAA;AAAA,MACC,oBAAA,WAAA,EAEG,UAAM,MAAA,QAAQ,UAAU,KAAK,IAExB,oBAAA,MAAA,EAAG,WAAU,cACX,UAAA,UAAU,MAAM,IAAI,CAAC,MAAM,UACzB,oBAAA,MAAA,EACC,8BAAC,OAAM,EAAA,SAAQ,WAAW,UAAA,KAAA,CAAK,KADxB,KAET,CACD,EACH,CAAA,wBAEC,OAAM,EAAA,SAAQ,WAAW,UAAA,UAAU,MAAM,CAAA,GAElD;AAAA,IAlBa,EAAA,GAAA,UAAU,IAmBzB,CACD,GACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx, Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { Button } from "./button.js";
|
|
3
|
+
function PreviewButton() {
|
|
4
|
+
return /* @__PURE__ */ jsx(Fragment, { children: window.location.search.includes("adhesePreviewCreativeId") && /* @__PURE__ */ jsx(
|
|
5
|
+
Button,
|
|
6
|
+
{
|
|
7
|
+
onClick: () => {
|
|
8
|
+
const currentUrl = new URL(window.location.href);
|
|
9
|
+
window.location.replace(`${currentUrl.origin}${currentUrl.pathname === "/" ? "" : currentUrl.pathname}`);
|
|
10
|
+
},
|
|
11
|
+
variant: "secondary",
|
|
12
|
+
children: "Disable preview mode"
|
|
13
|
+
}
|
|
14
|
+
) });
|
|
15
|
+
}
|
|
16
|
+
export {
|
|
17
|
+
PreviewButton
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=previewButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"previewButton.js","sources":["../../src/components/previewButton.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { Button } from './button';\n\n// eslint-disable-next-line ts/naming-convention\nexport function PreviewButton(): ReactElement {\n return (\n <>\n {\n window.location.search.includes('adhesePreviewCreativeId') && (\n <Button\n onClick={() => {\n const currentUrl = new URL(window.location.href);\n\n window.location.replace(`${currentUrl.origin}${currentUrl.pathname === '/' ? '' : currentUrl.pathname}`);\n }}\n variant=\"secondary\"\n >\n Disable preview mode\n </Button>\n )\n }\n </>\n );\n}\n"],"names":[],"mappings":";;AAIO,SAAS,gBAA8B;AAC5C,yCAGE,UAAO,OAAA,SAAS,OAAO,SAAS,yBAAyB,KACvD;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS,MAAM;AACb,cAAM,aAAa,IAAI,IAAI,OAAO,SAAS,IAAI;AAE/C,eAAO,SAAS,QAAQ,GAAG,WAAW,MAAM,GAAG,WAAW,aAAa,MAAM,KAAK,WAAW,QAAQ,EAAE;AAAA,MACzG;AAAA,MACA,SAAQ;AAAA,MACT,UAAA;AAAA,IAAA;AAAA,EAKH,EAAA,CAAA;AAEJ;"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { FronttailSettings } from "./fronttailSettings.js";
|
|
3
|
+
const settingClasses = "border-solid border-b-2 border-accent pb-8 mb-8 last:mb-0 last:pb-0 last:border-0";
|
|
4
|
+
function Settings() {
|
|
5
|
+
return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(FronttailSettings, { className: settingClasses }) });
|
|
6
|
+
}
|
|
7
|
+
export {
|
|
8
|
+
Settings
|
|
9
|
+
};
|
|
10
|
+
//# sourceMappingURL=settings.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"settings.js","sources":["../../src/components/settings.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { FronttailSettings } from './fronttailSettings';\n\nconst settingClasses = 'border-solid border-b-2 border-accent pb-8 mb-8 last:mb-0 last:pb-0 last:border-0';\n\n// eslint-disable-next-line ts/naming-convention\nexport function Settings(): ReactElement {\n return (\n <div>\n <FronttailSettings className={settingClasses} />\n </div>\n );\n}\n"],"names":[],"mappings":";;AAGA,MAAM,iBAAiB;AAGhB,SAAS,WAAyB;AACvC,6BACG,OACC,EAAA,UAAA,oBAAC,mBAAkB,EAAA,WAAW,gBAAgB,EAChD,CAAA;AAEJ;"}
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import * as SheetPrimitive from "@radix-ui/react-dialog";
|
|
3
|
+
import { Cross2Icon } from "@radix-ui/react-icons";
|
|
4
|
+
import { cva } from "class-variance-authority";
|
|
5
|
+
import { forwardRef } from "react";
|
|
6
|
+
import { cn } from "../utils.js";
|
|
7
|
+
const Sheet = SheetPrimitive.Root;
|
|
8
|
+
const SheetTrigger = SheetPrimitive.Trigger;
|
|
9
|
+
const SheetPortal = SheetPrimitive.Portal;
|
|
10
|
+
const SheetOverlay = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
11
|
+
SheetPrimitive.Overlay,
|
|
12
|
+
{
|
|
13
|
+
className: cn(
|
|
14
|
+
"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",
|
|
15
|
+
className
|
|
16
|
+
),
|
|
17
|
+
...props,
|
|
18
|
+
ref
|
|
19
|
+
}
|
|
20
|
+
));
|
|
21
|
+
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
|
|
22
|
+
const sheetVariants = cva(
|
|
23
|
+
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
|
|
24
|
+
{
|
|
25
|
+
variants: {
|
|
26
|
+
side: {
|
|
27
|
+
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
|
|
28
|
+
bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
|
|
29
|
+
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
|
|
30
|
+
right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
defaultVariants: {
|
|
34
|
+
side: "right"
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
);
|
|
38
|
+
const SheetContent = forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [
|
|
39
|
+
/* @__PURE__ */ jsx(SheetOverlay, {}),
|
|
40
|
+
/* @__PURE__ */ jsxs(
|
|
41
|
+
SheetPrimitive.Content,
|
|
42
|
+
{
|
|
43
|
+
ref,
|
|
44
|
+
className: cn(sheetVariants({ side }), className),
|
|
45
|
+
...props,
|
|
46
|
+
children: [
|
|
47
|
+
children,
|
|
48
|
+
/* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
|
|
49
|
+
/* @__PURE__ */ jsx(Cross2Icon, { className: "h-4 w-4" }),
|
|
50
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
|
|
51
|
+
] })
|
|
52
|
+
]
|
|
53
|
+
}
|
|
54
|
+
)
|
|
55
|
+
] }));
|
|
56
|
+
SheetContent.displayName = SheetPrimitive.Content.displayName;
|
|
57
|
+
function SheetHeader({
|
|
58
|
+
className,
|
|
59
|
+
...props
|
|
60
|
+
}) {
|
|
61
|
+
return /* @__PURE__ */ jsx(
|
|
62
|
+
"div",
|
|
63
|
+
{
|
|
64
|
+
className: cn(
|
|
65
|
+
"flex flex-col space-y-2 text-center sm:text-left",
|
|
66
|
+
className
|
|
67
|
+
),
|
|
68
|
+
...props
|
|
69
|
+
}
|
|
70
|
+
);
|
|
71
|
+
}
|
|
72
|
+
SheetHeader.displayName = "SheetHeader";
|
|
73
|
+
const SheetTitle = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
74
|
+
SheetPrimitive.Title,
|
|
75
|
+
{
|
|
76
|
+
ref,
|
|
77
|
+
className: cn("text-lg font-semibold text-foreground", className),
|
|
78
|
+
...props
|
|
79
|
+
}
|
|
80
|
+
));
|
|
81
|
+
SheetTitle.displayName = SheetPrimitive.Title.displayName;
|
|
82
|
+
const SheetDescription = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
83
|
+
SheetPrimitive.Description,
|
|
84
|
+
{
|
|
85
|
+
ref,
|
|
86
|
+
className: cn("text-sm text-muted-foreground", className),
|
|
87
|
+
...props
|
|
88
|
+
}
|
|
89
|
+
));
|
|
90
|
+
SheetDescription.displayName = SheetPrimitive.Description.displayName;
|
|
91
|
+
export {
|
|
92
|
+
Sheet,
|
|
93
|
+
SheetContent,
|
|
94
|
+
SheetDescription,
|
|
95
|
+
SheetHeader,
|
|
96
|
+
SheetOverlay,
|
|
97
|
+
SheetPortal,
|
|
98
|
+
SheetTitle,
|
|
99
|
+
SheetTrigger
|
|
100
|
+
};
|
|
101
|
+
//# sourceMappingURL=sheet.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sheet.js","sources":["../../src/components/sheet.tsx"],"sourcesContent":["/* eslint-disable ts/naming-convention */\nimport * as SheetPrimitive from '@radix-ui/react-dialog';\nimport { Cross2Icon } from '@radix-ui/react-icons';\nimport { type VariantProps, cva } from 'class-variance-authority';\nimport { type ComponentPropsWithoutRef, type ElementRef, type HTMLAttributes, type ReactElement, forwardRef } from 'react';\nimport { cn } from '../utils';\n\nconst Sheet = SheetPrimitive.Root;\n\nconst SheetTrigger = SheetPrimitive.Trigger;\n\nconst SheetClose = SheetPrimitive.Close;\n\nconst SheetPortal = SheetPrimitive.Portal;\n\nconst SheetOverlay = forwardRef<\n ElementRef<typeof SheetPrimitive.Overlay>,\n ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n <SheetPrimitive.Overlay\n className={cn(\n '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',\n className,\n )}\n {...props}\n ref={ref}\n />\n));\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName;\n\nconst sheetVariants = cva(\n 'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',\n {\n variants: {\n side: {\n top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n bottom:\n 'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',\n left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',\n right:\n 'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',\n },\n },\n defaultVariants: {\n side: 'right',\n },\n },\n);\n\ninterface SheetContentProps\n extends ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n VariantProps<typeof sheetVariants> {}\n\nconst SheetContent = forwardRef<\n ElementRef<typeof SheetPrimitive.Content>,\n SheetContentProps\n>(({ side = 'right', className, children, ...props }, ref) => (\n <SheetPortal>\n <SheetOverlay />\n <SheetPrimitive.Content\n ref={ref}\n className={cn(sheetVariants({ side }), className)}\n {...props}\n >\n {children}\n <SheetPrimitive.Close className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary\">\n <Cross2Icon className=\"h-4 w-4\" />\n <span className=\"sr-only\">Close</span>\n </SheetPrimitive.Close>\n </SheetPrimitive.Content>\n </SheetPortal>\n));\nSheetContent.displayName = SheetPrimitive.Content.displayName;\n\nfunction SheetHeader({\n className,\n ...props\n}: HTMLAttributes<HTMLDivElement>): ReactElement {\n return (\n <div\n className={cn(\n 'flex flex-col space-y-2 text-center sm:text-left',\n className,\n )}\n {...props}\n />\n );\n}\nSheetHeader.displayName = 'SheetHeader';\n\nfunction SheetFooter({\n className,\n ...props\n}: HTMLAttributes<HTMLDivElement>): ReactElement {\n return (\n <div\n className={cn(\n 'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',\n className,\n )}\n {...props}\n />\n );\n}\nSheetFooter.displayName = 'SheetFooter';\n\nconst SheetTitle = forwardRef<\n ElementRef<typeof SheetPrimitive.Title>,\n ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <SheetPrimitive.Title\n ref={ref}\n className={cn('text-lg font-semibold text-foreground', className)}\n {...props}\n />\n));\nSheetTitle.displayName = SheetPrimitive.Title.displayName;\n\nconst SheetDescription = forwardRef<\n ElementRef<typeof SheetPrimitive.Description>,\n ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <SheetPrimitive.Description\n ref={ref}\n className={cn('text-sm text-muted-foreground', className)}\n {...props}\n />\n));\nSheetDescription.displayName = SheetPrimitive.Description.displayName;\n\nexport {\n Sheet,\n SheetPortal,\n SheetOverlay,\n SheetTrigger,\n SheetClose,\n SheetContent,\n SheetHeader,\n SheetFooter,\n SheetTitle,\n SheetDescription,\n};\n"],"names":[],"mappings":";;;;;;AAOA,MAAM,QAAQ,eAAe;AAE7B,MAAM,eAAe,eAAe;AAIpC,MAAM,cAAc,eAAe;AAE7B,MAAA,eAAe,WAGnB,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC,eAAe;AAAA,EAAf;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,IACJ;AAAA,EAAA;AACF,CACD;AACD,aAAa,cAAc,eAAe,QAAQ;AAElD,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,KAAK;AAAA,QACL,QACE;AAAA,QACF,MAAM;AAAA,QACN,OACE;AAAA,MACJ;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAMA,MAAM,eAAe,WAGnB,CAAC,EAAE,OAAO,SAAS,WAAW,UAAU,GAAG,MAAS,GAAA,6BACnD,aACC,EAAA,UAAA;AAAA,EAAA,oBAAC,cAAa,EAAA;AAAA,EACd;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACC;AAAA,MACA,WAAW,GAAG,cAAc,EAAE,KAAM,CAAA,GAAG,SAAS;AAAA,MAC/C,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA;AAAA,QACA,qBAAA,eAAe,OAAf,EAAqB,WAAU,4OAC9B,UAAA;AAAA,UAAC,oBAAA,YAAA,EAAW,WAAU,UAAU,CAAA;AAAA,UAC/B,oBAAA,QAAA,EAAK,WAAU,WAAU,UAAK,SAAA;AAAA,QAAA,GACjC;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAAA,EAAA,CACF,CACD;AACD,aAAa,cAAc,eAAe,QAAQ;AAElD,SAAS,YAAY;AAAA,EACnB;AAAA,EACA,GAAG;AACL,GAAiD;AAE7C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AACA,YAAY,cAAc;AAkBpB,MAAA,aAAa,WAGjB,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC,eAAe;AAAA,EAAf;AAAA,IACC;AAAA,IACA,WAAW,GAAG,yCAAyC,SAAS;AAAA,IAC/D,GAAG;AAAA,EAAA;AACN,CACD;AACD,WAAW,cAAc,eAAe,MAAM;AAExC,MAAA,mBAAmB,WAGvB,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC,eAAe;AAAA,EAAf;AAAA,IACC;AAAA,IACA,WAAW,GAAG,iCAAiC,SAAS;AAAA,IACvD,GAAG;AAAA,EAAA;AACN,CACD;AACD,iBAAiB,cAAc,eAAe,YAAY;"}
|