@dust-tt/sparkle 0.2.235 → 0.2.236
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/cjs/index.js +2 -2
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/components/Dialog.d.ts +2 -1
- package/dist/esm/components/Dialog.d.ts.map +1 -1
- package/dist/esm/components/Dialog.js +2 -2
- package/dist/esm/components/Dialog.js.map +1 -1
- package/dist/esm/stories/Dialog.stories.d.ts.map +1 -1
- package/dist/esm/stories/Dialog.stories.js +6 -1
- package/dist/esm/stories/Dialog.stories.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Dialog.tsx +4 -1
- package/src/stories/Dialog.stories.tsx +13 -0
|
@@ -2,6 +2,7 @@ import React from "react";
|
|
|
2
2
|
export type ModalProps = {
|
|
3
3
|
title: string;
|
|
4
4
|
children: React.ReactNode;
|
|
5
|
+
disabled?: boolean;
|
|
5
6
|
isOpen: boolean;
|
|
6
7
|
onCancel: () => void;
|
|
7
8
|
onValidate: () => void;
|
|
@@ -11,5 +12,5 @@ export type ModalProps = {
|
|
|
11
12
|
isSaving?: boolean;
|
|
12
13
|
backgroundType?: "confetti" | "snow" | "none";
|
|
13
14
|
};
|
|
14
|
-
export declare function Dialog({ isOpen, children, onCancel, onValidate, cancelLabel, validateLabel, validateVariant,
|
|
15
|
+
export declare function Dialog({ title, isOpen, children, disabled, onCancel, onValidate, cancelLabel, validateLabel, validateVariant, isSaving, backgroundType, }: ModalProps): React.JSX.Element;
|
|
15
16
|
//# sourceMappingURL=Dialog.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAQhD,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,SAAS,GAAG,gBAAgB,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;CAC/C,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,WAAsB,EACtB,aAAoB,EACpB,eAA2B,EAC3B,
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAQhD,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,SAAS,GAAG,gBAAgB,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;CAC/C,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,WAAsB,EACtB,aAAoB,EACpB,eAA2B,EAC3B,QAAQ,EACR,cAAuB,GACxB,EAAE,UAAU,qBA8EZ"}
|
|
@@ -5,7 +5,7 @@ import Spinner from "../components/Spinner";
|
|
|
5
5
|
import { classNames } from "../lib/utils";
|
|
6
6
|
import { Button } from "./Button";
|
|
7
7
|
export function Dialog(_a) {
|
|
8
|
-
var isOpen = _a.isOpen, children = _a.children, onCancel = _a.onCancel, onValidate = _a.onValidate, _b = _a.cancelLabel, cancelLabel = _b === void 0 ? "Cancel" : _b, _c = _a.validateLabel, validateLabel = _c === void 0 ? "Ok" : _c, _d = _a.validateVariant, validateVariant = _d === void 0 ? "primary" : _d,
|
|
8
|
+
var title = _a.title, isOpen = _a.isOpen, children = _a.children, disabled = _a.disabled, onCancel = _a.onCancel, onValidate = _a.onValidate, _b = _a.cancelLabel, cancelLabel = _b === void 0 ? "Cancel" : _b, _c = _a.validateLabel, validateLabel = _c === void 0 ? "Ok" : _c, _d = _a.validateVariant, validateVariant = _d === void 0 ? "primary" : _d, isSaving = _a.isSaving, _e = _a.backgroundType, backgroundType = _e === void 0 ? "none" : _e;
|
|
9
9
|
var referentRef = useRef(null);
|
|
10
10
|
return (React.createElement(Transition, { show: isOpen, as: Fragment, appear: true },
|
|
11
11
|
React.createElement(HeadlessDialog, { as: "div", className: "s-relative s-z-50", onClose: onCancel },
|
|
@@ -21,7 +21,7 @@ export function Dialog(_a) {
|
|
|
21
21
|
React.createElement(Button.List, null,
|
|
22
22
|
!isSaving && (React.createElement(React.Fragment, null,
|
|
23
23
|
React.createElement(Button, { label: cancelLabel, variant: "tertiary", onClick: onCancel }),
|
|
24
|
-
React.createElement(Button, { label: validateLabel, variant: validateVariant, onClick: onValidate }))),
|
|
24
|
+
React.createElement(Button, { disabled: disabled, label: validateLabel, variant: validateVariant, onClick: onValidate }))),
|
|
25
25
|
isSaving && React.createElement(Spinner, { variant: "color" }))),
|
|
26
26
|
backgroundType !== "none" && (React.createElement("div", { className: "s-absolute s-bottom-0 s-left-0 s-right-0 s-top-0 s-z-0" },
|
|
27
27
|
React.createElement(ConfettiBackground, { variant: backgroundType, referentSize: referentRef }))))))))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,kBAAkB,MAAM,wCAAwC,CAAC;AACxE,OAAO,OAAO,MAAM,6BAA6B,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Dialog.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAU,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAEvD,QAAA,MAAM,IAAI;;;CAGqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,aAAa,
|
|
1
|
+
{"version":3,"file":"Dialog.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Dialog.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAU,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAEvD,QAAA,MAAM,IAAI;;;CAGqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,aAAa,yBAiEzB,CAAC"}
|
|
@@ -10,6 +10,7 @@ export var DialogExample = function () {
|
|
|
10
10
|
var _a = __read(useState(false), 2), isOpen1 = _a[0], setisOpen1 = _a[1];
|
|
11
11
|
var _b = __read(useState(false), 2), isOpen2 = _b[0], setisOpen2 = _b[1];
|
|
12
12
|
var _c = __read(useState(false), 2), isOpen3 = _c[0], setisOpen3 = _c[1];
|
|
13
|
+
var _d = __read(useState(false), 2), isOpen4 = _d[0], setisOpen4 = _d[1];
|
|
13
14
|
return (React.createElement("div", { className: "items-start s-flex s-flex-col s-gap-10" },
|
|
14
15
|
React.createElement("div", null,
|
|
15
16
|
React.createElement(Dialog, { isOpen: isOpen1, title: "Dialog title", onValidate: function () { return setisOpen1(false); }, onCancel: function () { return setisOpen1(false); } },
|
|
@@ -22,6 +23,10 @@ export var DialogExample = function () {
|
|
|
22
23
|
React.createElement("div", null,
|
|
23
24
|
React.createElement(Dialog, { isOpen: isOpen3, title: "Dialog title", onValidate: function () { return setisOpen3(false); }, onCancel: function () { return setisOpen3(false); }, backgroundType: "snow" },
|
|
24
25
|
React.createElement("div", null, "I'm the modal content")),
|
|
25
|
-
React.createElement(Button, { label: "Dialog with BACKGROUND", onClick: function () { return setisOpen3(true); } }))
|
|
26
|
+
React.createElement(Button, { label: "Dialog with BACKGROUND", onClick: function () { return setisOpen3(true); } })),
|
|
27
|
+
React.createElement("div", null,
|
|
28
|
+
React.createElement(Dialog, { disabled: true, isOpen: isOpen4, title: "Dialog title", onValidate: function () { return setisOpen4(false); }, onCancel: function () { return setisOpen4(false); } },
|
|
29
|
+
React.createElement("div", null, "I'm the modal content")),
|
|
30
|
+
React.createElement(Button, { label: "Dialog with disabled", onClick: function () { return setisOpen4(true); } }))));
|
|
26
31
|
};
|
|
27
32
|
//# sourceMappingURL=Dialog.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.stories.js","sourceRoot":"","sources":["../../../src/stories/Dialog.stories.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAEvD,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,MAAM;CACY,CAAC;AAEhC,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,IAAM,aAAa,GAAG;IACrB,IAAA,KAAA,OAAwB,QAAQ,CAAC,KAAK,CAAC,IAAA,EAAtC,OAAO,QAAA,EAAE,UAAU,QAAmB,CAAC;IACxC,IAAA,KAAA,OAAwB,QAAQ,CAAC,KAAK,CAAC,IAAA,EAAtC,OAAO,QAAA,EAAE,UAAU,QAAmB,CAAC;IACxC,IAAA,KAAA,OAAwB,QAAQ,CAAC,KAAK,CAAC,IAAA,EAAtC,OAAO,QAAA,EAAE,UAAU,QAAmB,CAAC;IAC9C,OAAO,CACL,6BAAK,SAAS,EAAC,wCAAwC;QACrD;YACE,oBAAC,MAAM,IACL,MAAM,EAAE,OAAO,EACf,KAAK,EAAC,cAAc,EACpB,UAAU,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,EAAjB,CAAiB,EACnC,QAAQ,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,EAAjB,CAAiB;gBAEjC,yDAAgC,CACzB;YACT,oBAAC,MAAM,IACL,KAAK,EAAC,8BAA8B,EACpC,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,EAAhB,CAAgB,GAC/B,CACE;QACN;YACE,oBAAC,MAAM,IACL,MAAM,EAAE,OAAO,EACf,KAAK,EAAC,cAAc,EACpB,UAAU,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,EAAjB,CAAiB,EACnC,QAAQ,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,EAAjB,CAAiB,EACjC,eAAe,EAAC,gBAAgB;gBAEhC,yDAAgC,CACzB;YACT,oBAAC,MAAM,IACL,KAAK,EAAC,8BAA8B,EACpC,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,EAAhB,CAAgB,GAC/B,CACE;QACN;YACE,oBAAC,MAAM,IACL,MAAM,EAAE,OAAO,EACf,KAAK,EAAC,cAAc,EACpB,UAAU,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,EAAjB,CAAiB,EACnC,QAAQ,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,EAAjB,CAAiB,EACjC,cAAc,EAAC,MAAM;gBAErB,yDAAgC,CACzB;YACT,oBAAC,MAAM,IACL,KAAK,EAAC,wBAAwB,EAC9B,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,EAAhB,CAAgB,GAC/B,CACE,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}
|
|
1
|
+
{"version":3,"file":"Dialog.stories.js","sourceRoot":"","sources":["../../../src/stories/Dialog.stories.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAEvD,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,MAAM;CACY,CAAC;AAEhC,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,IAAM,aAAa,GAAG;IACrB,IAAA,KAAA,OAAwB,QAAQ,CAAC,KAAK,CAAC,IAAA,EAAtC,OAAO,QAAA,EAAE,UAAU,QAAmB,CAAC;IACxC,IAAA,KAAA,OAAwB,QAAQ,CAAC,KAAK,CAAC,IAAA,EAAtC,OAAO,QAAA,EAAE,UAAU,QAAmB,CAAC;IACxC,IAAA,KAAA,OAAwB,QAAQ,CAAC,KAAK,CAAC,IAAA,EAAtC,OAAO,QAAA,EAAE,UAAU,QAAmB,CAAC;IACxC,IAAA,KAAA,OAAwB,QAAQ,CAAC,KAAK,CAAC,IAAA,EAAtC,OAAO,QAAA,EAAE,UAAU,QAAmB,CAAC;IAC9C,OAAO,CACL,6BAAK,SAAS,EAAC,wCAAwC;QACrD;YACE,oBAAC,MAAM,IACL,MAAM,EAAE,OAAO,EACf,KAAK,EAAC,cAAc,EACpB,UAAU,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,EAAjB,CAAiB,EACnC,QAAQ,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,EAAjB,CAAiB;gBAEjC,yDAAgC,CACzB;YACT,oBAAC,MAAM,IACL,KAAK,EAAC,8BAA8B,EACpC,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,EAAhB,CAAgB,GAC/B,CACE;QACN;YACE,oBAAC,MAAM,IACL,MAAM,EAAE,OAAO,EACf,KAAK,EAAC,cAAc,EACpB,UAAU,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,EAAjB,CAAiB,EACnC,QAAQ,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,EAAjB,CAAiB,EACjC,eAAe,EAAC,gBAAgB;gBAEhC,yDAAgC,CACzB;YACT,oBAAC,MAAM,IACL,KAAK,EAAC,8BAA8B,EACpC,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,EAAhB,CAAgB,GAC/B,CACE;QACN;YACE,oBAAC,MAAM,IACL,MAAM,EAAE,OAAO,EACf,KAAK,EAAC,cAAc,EACpB,UAAU,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,EAAjB,CAAiB,EACnC,QAAQ,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,EAAjB,CAAiB,EACjC,cAAc,EAAC,MAAM;gBAErB,yDAAgC,CACzB;YACT,oBAAC,MAAM,IACL,KAAK,EAAC,wBAAwB,EAC9B,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,EAAhB,CAAgB,GAC/B,CACE;QACN;YACE,oBAAC,MAAM,IACL,QAAQ,QACR,MAAM,EAAE,OAAO,EACf,KAAK,EAAC,cAAc,EACpB,UAAU,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,EAAjB,CAAiB,EACnC,QAAQ,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,EAAjB,CAAiB;gBAEjC,yDAAgC,CACzB;YACT,oBAAC,MAAM,IAAC,KAAK,EAAC,sBAAsB,EAAC,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,EAAhB,CAAgB,GAAI,CACpE,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -10,6 +10,7 @@ import { Button } from "./Button";
|
|
|
10
10
|
export type ModalProps = {
|
|
11
11
|
title: string;
|
|
12
12
|
children: React.ReactNode;
|
|
13
|
+
disabled?: boolean;
|
|
13
14
|
isOpen: boolean;
|
|
14
15
|
onCancel: () => void;
|
|
15
16
|
onValidate: () => void;
|
|
@@ -21,14 +22,15 @@ export type ModalProps = {
|
|
|
21
22
|
};
|
|
22
23
|
|
|
23
24
|
export function Dialog({
|
|
25
|
+
title,
|
|
24
26
|
isOpen,
|
|
25
27
|
children,
|
|
28
|
+
disabled,
|
|
26
29
|
onCancel,
|
|
27
30
|
onValidate,
|
|
28
31
|
cancelLabel = "Cancel",
|
|
29
32
|
validateLabel = "Ok",
|
|
30
33
|
validateVariant = "primary",
|
|
31
|
-
title,
|
|
32
34
|
isSaving,
|
|
33
35
|
backgroundType = "none",
|
|
34
36
|
}: ModalProps) {
|
|
@@ -84,6 +86,7 @@ export function Dialog({
|
|
|
84
86
|
onClick={onCancel}
|
|
85
87
|
/>
|
|
86
88
|
<Button
|
|
89
|
+
disabled={disabled}
|
|
87
90
|
label={validateLabel}
|
|
88
91
|
variant={validateVariant}
|
|
89
92
|
onClick={onValidate}
|
|
@@ -14,6 +14,7 @@ export const DialogExample = () => {
|
|
|
14
14
|
const [isOpen1, setisOpen1] = useState(false);
|
|
15
15
|
const [isOpen2, setisOpen2] = useState(false);
|
|
16
16
|
const [isOpen3, setisOpen3] = useState(false);
|
|
17
|
+
const [isOpen4, setisOpen4] = useState(false);
|
|
17
18
|
return (
|
|
18
19
|
<div className="items-start s-flex s-flex-col s-gap-10">
|
|
19
20
|
<div>
|
|
@@ -60,6 +61,18 @@ export const DialogExample = () => {
|
|
|
60
61
|
onClick={() => setisOpen3(true)}
|
|
61
62
|
/>
|
|
62
63
|
</div>
|
|
64
|
+
<div>
|
|
65
|
+
<Dialog
|
|
66
|
+
disabled
|
|
67
|
+
isOpen={isOpen4}
|
|
68
|
+
title="Dialog title"
|
|
69
|
+
onValidate={() => setisOpen4(false)}
|
|
70
|
+
onCancel={() => setisOpen4(false)}
|
|
71
|
+
>
|
|
72
|
+
<div>I'm the modal content</div>
|
|
73
|
+
</Dialog>
|
|
74
|
+
<Button label="Dialog with disabled" onClick={() => setisOpen4(true)} />
|
|
75
|
+
</div>
|
|
63
76
|
</div>
|
|
64
77
|
);
|
|
65
78
|
};
|