@dust-tt/sparkle 0.2.480 → 0.2.481-rc1
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 +1 -1
- package/dist/esm/components/InteractiveImage.d.ts +12 -0
- package/dist/esm/components/InteractiveImage.d.ts.map +1 -0
- package/dist/esm/components/InteractiveImage.js +131 -0
- package/dist/esm/components/InteractiveImage.js.map +1 -0
- package/dist/esm/components/index.d.ts +1 -0
- package/dist/esm/components/index.d.ts.map +1 -1
- package/dist/esm/components/index.js +1 -0
- package/dist/esm/components/index.js.map +1 -1
- package/dist/esm/stories/InteractiveImage.stories.d.ts +12 -0
- package/dist/esm/stories/InteractiveImage.stories.d.ts.map +1 -0
- package/dist/esm/stories/InteractiveImage.stories.js +17 -0
- package/dist/esm/stories/InteractiveImage.stories.js.map +1 -0
- package/dist/sparkle.css +36 -0
- package/package.json +1 -1
- package/src/components/InteractiveImage.tsx +186 -0
- package/src/components/index.ts +1 -0
- package/src/stories/InteractiveImage.stories.tsx +37 -0
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
interface InteractiveImageProps {
|
|
3
|
+
alt: string;
|
|
4
|
+
isLoading?: boolean;
|
|
5
|
+
onCopyError?: (error: unknown) => void;
|
|
6
|
+
onDownloadError?: (error: unknown) => void;
|
|
7
|
+
src?: string;
|
|
8
|
+
title: string;
|
|
9
|
+
}
|
|
10
|
+
export declare function InteractiveImage({ alt, isLoading, src, ...props }: InteractiveImageProps): React.JSX.Element;
|
|
11
|
+
export {};
|
|
12
|
+
//# sourceMappingURL=InteractiveImage.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InteractiveImage.d.ts","sourceRoot":"","sources":["../../../src/components/InteractiveImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAiB1B,UAAU,qBAAqB;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,SAAiB,EACjB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,qBAAqB,qBAgCvB"}
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
import { __assign, __awaiter, __generator, __read, __rest } from "tslib";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { Dialog, DialogContent, DialogTrigger, IconButton, Spinner, } from "../components";
|
|
4
|
+
import { useCopyToClipboard } from "../hooks";
|
|
5
|
+
import { ArrowDownOnSquareIcon, ClipboardCheckIcon, ClipboardIcon, } from "../icons/app";
|
|
6
|
+
import { cn } from "../lib/utils";
|
|
7
|
+
export function InteractiveImage(_a) {
|
|
8
|
+
var alt = _a.alt, _b = _a.isLoading, isLoading = _b === void 0 ? false : _b, src = _a.src, props = __rest(_a, ["alt", "isLoading", "src"]);
|
|
9
|
+
var _c = __read(React.useState(false), 2), isZoomed = _c[0], setIsZoomed = _c[1];
|
|
10
|
+
var handleZoomToggle = React.useCallback(function () {
|
|
11
|
+
setIsZoomed(!isZoomed);
|
|
12
|
+
}, [isZoomed]);
|
|
13
|
+
return (React.createElement(Dialog, { open: isZoomed, onOpenChange: handleZoomToggle },
|
|
14
|
+
React.createElement(DialogTrigger, { asChild: true },
|
|
15
|
+
React.createElement("div", { className: "s-aspect-square s-h-80 s-w-80" },
|
|
16
|
+
React.createElement(ImagePreview, __assign({ alt: alt, isLoading: isLoading, onClick: function (e) {
|
|
17
|
+
if (isLoading) {
|
|
18
|
+
e.preventDefault();
|
|
19
|
+
e.stopPropagation();
|
|
20
|
+
return;
|
|
21
|
+
}
|
|
22
|
+
handleZoomToggle();
|
|
23
|
+
}, src: src }, props)))),
|
|
24
|
+
React.createElement(DialogContent, { className: "s-w-auto s-max-w-none s-border-0 s-outline-none s-ring-0 focus:s-outline-none focus:s-ring-0" },
|
|
25
|
+
React.createElement("img", { src: src, alt: alt, className: "s-object-contain" }))));
|
|
26
|
+
}
|
|
27
|
+
function LoadingImage() {
|
|
28
|
+
return (React.createElement("div", { className: "s-flex s-h-full s-w-full s-items-center s-justify-center" },
|
|
29
|
+
React.createElement(Spinner, { variant: "dark", size: "sm" })));
|
|
30
|
+
}
|
|
31
|
+
function ImagePreview(_a) {
|
|
32
|
+
var _this = this;
|
|
33
|
+
var isLoading = _a.isLoading, onClick = _a.onClick, alt = _a.alt, src = _a.src, title = _a.title, onCopyError = _a.onCopyError, onDownloadError = _a.onDownloadError;
|
|
34
|
+
var _b = __read(useCopyToClipboard(), 2), isCopied = _b[0], copyToClipboard = _b[1];
|
|
35
|
+
var handleCopy = function () { return __awaiter(_this, void 0, void 0, function () {
|
|
36
|
+
var response, blob, error_1;
|
|
37
|
+
var _a;
|
|
38
|
+
return __generator(this, function (_b) {
|
|
39
|
+
switch (_b.label) {
|
|
40
|
+
case 0:
|
|
41
|
+
_b.trys.push([0, 4, , 5]);
|
|
42
|
+
if (!src) {
|
|
43
|
+
return [2 /*return*/];
|
|
44
|
+
}
|
|
45
|
+
return [4 /*yield*/, fetch(src)];
|
|
46
|
+
case 1:
|
|
47
|
+
response = _b.sent();
|
|
48
|
+
return [4 /*yield*/, response.blob()];
|
|
49
|
+
case 2:
|
|
50
|
+
blob = _b.sent();
|
|
51
|
+
// Copy to clipboard.
|
|
52
|
+
return [4 /*yield*/, copyToClipboard(new ClipboardItem((_a = {},
|
|
53
|
+
_a[blob.type] = blob,
|
|
54
|
+
_a)))];
|
|
55
|
+
case 3:
|
|
56
|
+
// Copy to clipboard.
|
|
57
|
+
_b.sent();
|
|
58
|
+
return [3 /*break*/, 5];
|
|
59
|
+
case 4:
|
|
60
|
+
error_1 = _b.sent();
|
|
61
|
+
onCopyError === null || onCopyError === void 0 ? void 0 : onCopyError(error_1);
|
|
62
|
+
return [3 /*break*/, 5];
|
|
63
|
+
case 5: return [2 /*return*/];
|
|
64
|
+
}
|
|
65
|
+
});
|
|
66
|
+
}); };
|
|
67
|
+
var handleDownload = function () { return __awaiter(_this, void 0, void 0, function () {
|
|
68
|
+
var response, blob, url, link, error_2;
|
|
69
|
+
return __generator(this, function (_a) {
|
|
70
|
+
switch (_a.label) {
|
|
71
|
+
case 0:
|
|
72
|
+
_a.trys.push([0, 3, , 4]);
|
|
73
|
+
if (!src) {
|
|
74
|
+
return [2 /*return*/];
|
|
75
|
+
}
|
|
76
|
+
return [4 /*yield*/, fetch(src)];
|
|
77
|
+
case 1:
|
|
78
|
+
response = _a.sent();
|
|
79
|
+
return [4 /*yield*/, response.blob()];
|
|
80
|
+
case 2:
|
|
81
|
+
blob = _a.sent();
|
|
82
|
+
url = window.URL.createObjectURL(blob);
|
|
83
|
+
link = document.createElement("a");
|
|
84
|
+
link.href = url;
|
|
85
|
+
// Extract filename from URL or use a default.
|
|
86
|
+
link.download = title;
|
|
87
|
+
// Trigger download.
|
|
88
|
+
document.body.appendChild(link);
|
|
89
|
+
link.click();
|
|
90
|
+
// Cleanup.
|
|
91
|
+
document.body.removeChild(link);
|
|
92
|
+
window.URL.revokeObjectURL(url);
|
|
93
|
+
return [3 /*break*/, 4];
|
|
94
|
+
case 3:
|
|
95
|
+
error_2 = _a.sent();
|
|
96
|
+
onDownloadError === null || onDownloadError === void 0 ? void 0 : onDownloadError(error_2);
|
|
97
|
+
return [3 /*break*/, 4];
|
|
98
|
+
case 4: return [2 /*return*/];
|
|
99
|
+
}
|
|
100
|
+
});
|
|
101
|
+
}); };
|
|
102
|
+
return (React.createElement("div", { onClick: onClick, className: cn("s-group/preview s-relative s-h-full s-w-full s-overflow-hidden s-rounded-2xl s-bg-muted-background dark:s-bg-muted-background-night", !isLoading && "s-cursor-pointer") }, isLoading ? (React.createElement(LoadingImage, null)) : (React.createElement(React.Fragment, null,
|
|
103
|
+
React.createElement("img", { src: src, alt: alt, className: "s-h-full s-w-full s-rounded-2xl s-object-cover" }),
|
|
104
|
+
React.createElement("div", { className: "s-absolute s-inset-0 s-bg-black s-opacity-0 s-transition-opacity s-duration-200 group-hover/preview:s-opacity-40" }),
|
|
105
|
+
React.createElement("div", { className: "s-absolute s-right-3 s-top-3 s-z-10 s-flex s-opacity-0 s-transition-opacity s-duration-200 group-hover/preview:s-opacity-100" },
|
|
106
|
+
React.createElement(IconButton, { icon: isCopied ? ClipboardCheckIcon : ClipboardIcon, className: "s-text-white", tooltip: isCopied ? "Copied!" : "Copy to clipboard", size: "xs", onClick: function (e) { return __awaiter(_this, void 0, void 0, function () {
|
|
107
|
+
return __generator(this, function (_a) {
|
|
108
|
+
switch (_a.label) {
|
|
109
|
+
case 0:
|
|
110
|
+
e.stopPropagation(); // Prevent image zoom.
|
|
111
|
+
return [4 /*yield*/, handleCopy()];
|
|
112
|
+
case 1:
|
|
113
|
+
_a.sent();
|
|
114
|
+
return [2 /*return*/];
|
|
115
|
+
}
|
|
116
|
+
});
|
|
117
|
+
}); } }),
|
|
118
|
+
React.createElement(IconButton, { icon: ArrowDownOnSquareIcon, className: "s-text-white", tooltip: "Download", size: "xs", onClick: function (e) { return __awaiter(_this, void 0, void 0, function () {
|
|
119
|
+
return __generator(this, function (_a) {
|
|
120
|
+
switch (_a.label) {
|
|
121
|
+
case 0:
|
|
122
|
+
e.stopPropagation(); // Prevent image zoom.
|
|
123
|
+
return [4 /*yield*/, handleDownload()];
|
|
124
|
+
case 1:
|
|
125
|
+
_a.sent();
|
|
126
|
+
return [2 /*return*/];
|
|
127
|
+
}
|
|
128
|
+
});
|
|
129
|
+
}); } }))))));
|
|
130
|
+
}
|
|
131
|
+
//# sourceMappingURL=InteractiveImage.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InteractiveImage.js","sourceRoot":"","sources":["../../../src/components/InteractiveImage.tsx"],"names":[],"mappings":"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"}
|
|
@@ -36,6 +36,7 @@ export { Hoverable } from "./Hoverable";
|
|
|
36
36
|
export { DoubleIcon, Icon } from "./Icon";
|
|
37
37
|
export { IconButton } from "./IconButton";
|
|
38
38
|
export { Input } from "./Input";
|
|
39
|
+
export { InteractiveImage } from "./InteractiveImage";
|
|
39
40
|
export { Label } from "./Label";
|
|
40
41
|
export type { LinkWrapperProps } from "./LinkWrapper";
|
|
41
42
|
export { LinkWrapper } from "./LinkWrapper";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EACL,aAAa,EACb,iBAAiB,EACjB,kBAAkB,GACnB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EACV,WAAW,EACX,eAAe,EACf,kBAAkB,GACnB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAC1D,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EACL,QAAQ,EACR,gBAAgB,EAChB,8BAA8B,GAC/B,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EACL,WAAW,EACX,oBAAoB,EACpB,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EACL,qBAAqB,EACrB,mBAAmB,EACnB,0BAA0B,EAC1B,yBAAyB,GAC1B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,wBAAwB,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EACL,MAAM,EACN,WAAW,EACX,eAAe,EACf,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,GACd,MAAM,UAAU,CAAC;AAClB,YAAY,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,EACL,YAAY,EACZ,wBAAwB,EACxB,mBAAmB,EACnB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,EACpB,eAAe,EACf,sBAAsB,EACtB,sBAAsB,EACtB,mBAAmB,GACpB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,cAAc,kBAAkB,CAAC;AACjC,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACnD,OAAO,EACL,OAAO,EACP,cAAc,EACd,aAAa,EACb,WAAW,EACX,cAAc,GACf,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAChF,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EACL,eAAe,EACf,cAAc,EACd,mBAAmB,GACpB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EACL,KAAK,EACL,UAAU,EACV,cAAc,EACd,YAAY,EACZ,gBAAgB,EAChB,WAAW,EACX,WAAW,EACX,YAAY,EACZ,WAAW,EACX,UAAU,EACV,YAAY,GACb,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EACL,OAAO,EACP,cAAc,EACd,aAAa,EACb,eAAe,EACf,WAAW,EACX,cAAc,GACf,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}
|
|
@@ -30,6 +30,7 @@ export { Hoverable } from "./Hoverable";
|
|
|
30
30
|
export { DoubleIcon, Icon } from "./Icon";
|
|
31
31
|
export { IconButton } from "./IconButton";
|
|
32
32
|
export { Input } from "./Input";
|
|
33
|
+
export { InteractiveImage } from "./InteractiveImage";
|
|
33
34
|
export { Label } from "./Label";
|
|
34
35
|
export { LinkWrapper } from "./LinkWrapper";
|
|
35
36
|
export { LoadingBlock } from "./LoadingBlock";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
declare const meta: {
|
|
3
|
+
title: string;
|
|
4
|
+
component: React.ForwardRefExoticComponent<(import("../index_with_tw_base").CardProps & {
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
isLoading?: boolean | undefined;
|
|
7
|
+
tooltip?: string | undefined;
|
|
8
|
+
}) & React.RefAttributes<HTMLDivElement>>;
|
|
9
|
+
};
|
|
10
|
+
export default meta;
|
|
11
|
+
export declare const InteractiveImageExample: () => React.JSX.Element;
|
|
12
|
+
//# sourceMappingURL=InteractiveImage.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InteractiveImage.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/InteractiveImage.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,QAAA,MAAM,IAAI;;;;;;;CAGuB,CAAC;AAElC,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,uBAAuB,yBAsBnC,CAAC"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { InteractiveImage } from "../components/InteractiveImage";
|
|
3
|
+
import { Citation } from "../index_with_tw_base";
|
|
4
|
+
var meta = {
|
|
5
|
+
title: "Components/Citation",
|
|
6
|
+
component: Citation,
|
|
7
|
+
};
|
|
8
|
+
export default meta;
|
|
9
|
+
export var InteractiveImageExample = function () { return (React.createElement("div", { className: "s-flex s-flex-col s-gap-8" },
|
|
10
|
+
"Example of interactive image",
|
|
11
|
+
React.createElement("h2", null, "Loading"),
|
|
12
|
+
React.createElement(InteractiveImage, { alt: "Example of a loading interactive image", isLoading: true, title: "Example of a loading interactive image" }),
|
|
13
|
+
React.createElement("h2", null, "Loaded"),
|
|
14
|
+
React.createElement(InteractiveImage, { alt: "Example of an interactive image", src: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg", title: "Example of an interactive image" }),
|
|
15
|
+
React.createElement("h3", null, "With 4:3 aspect ratio"),
|
|
16
|
+
React.createElement(InteractiveImage, { alt: "Example of a 4:3 aspect ratio interactive image", src: "https://upload.wikimedia.org/wikipedia/commons/d/de/Aspect-ratio-4x3.svg", title: "Example of a 4:3 aspect ratio interactive image" }))); };
|
|
17
|
+
//# sourceMappingURL=InteractiveImage.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InteractiveImage.stories.js","sourceRoot":"","sources":["../../../src/stories/InteractiveImage.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,QAAQ;CACY,CAAC;AAElC,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,IAAM,uBAAuB,GAAG,cAAM,OAAA,CAC3C,6BAAK,SAAS,EAAC,2BAA2B;;IAExC,0CAAgB;IAChB,oBAAC,gBAAgB,IACf,GAAG,EAAC,wCAAwC,EAC5C,SAAS,EAAE,IAAI,EACf,KAAK,EAAC,wCAAwC,GAC9C;IACF,yCAAe;IACf,oBAAC,gBAAgB,IACf,GAAG,EAAC,iCAAiC,EACrC,GAAG,EAAC,qDAAqD,EACzD,KAAK,EAAC,iCAAiC,GACvC;IACF,wDAA8B;IAC9B,oBAAC,gBAAgB,IACf,GAAG,EAAC,iDAAiD,EACrD,GAAG,EAAC,0EAA0E,EAC9E,KAAK,EAAC,iDAAiD,GACvD,CACE,CACP,EAtB4C,CAsB5C,CAAC"}
|
package/dist/sparkle.css
CHANGED
|
@@ -1664,6 +1664,10 @@ select {
|
|
|
1664
1664
|
width: 95%;
|
|
1665
1665
|
}
|
|
1666
1666
|
|
|
1667
|
+
.s-w-auto {
|
|
1668
|
+
width: auto;
|
|
1669
|
+
}
|
|
1670
|
+
|
|
1667
1671
|
.s-w-fit {
|
|
1668
1672
|
width: -moz-fit-content;
|
|
1669
1673
|
width: fit-content;
|
|
@@ -1738,6 +1742,10 @@ select {
|
|
|
1738
1742
|
max-width: 28rem;
|
|
1739
1743
|
}
|
|
1740
1744
|
|
|
1745
|
+
.s-max-w-none {
|
|
1746
|
+
max-width: none;
|
|
1747
|
+
}
|
|
1748
|
+
|
|
1741
1749
|
.s-max-w-sm {
|
|
1742
1750
|
max-width: 24rem;
|
|
1743
1751
|
}
|
|
@@ -2325,6 +2333,10 @@ select {
|
|
|
2325
2333
|
border-width: 1px;
|
|
2326
2334
|
}
|
|
2327
2335
|
|
|
2336
|
+
.s-border-0 {
|
|
2337
|
+
border-width: 0px;
|
|
2338
|
+
}
|
|
2339
|
+
|
|
2328
2340
|
.s-border-b {
|
|
2329
2341
|
border-bottom-width: 1px;
|
|
2330
2342
|
}
|
|
@@ -2662,6 +2674,11 @@ select {
|
|
|
2662
2674
|
background-color: rgb(255 255 255 / 0.8);
|
|
2663
2675
|
}
|
|
2664
2676
|
|
|
2677
|
+
.s-bg-black {
|
|
2678
|
+
--tw-bg-opacity: 1;
|
|
2679
|
+
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
|
|
2680
|
+
}
|
|
2681
|
+
|
|
2665
2682
|
.s-bg-blue-100 {
|
|
2666
2683
|
--tw-bg-opacity: 1;
|
|
2667
2684
|
background-color: rgb(202 235 255 / var(--tw-bg-opacity));
|
|
@@ -3891,6 +3908,11 @@ select {
|
|
|
3891
3908
|
background-repeat: no-repeat;
|
|
3892
3909
|
}
|
|
3893
3910
|
|
|
3911
|
+
.s-object-contain {
|
|
3912
|
+
-o-object-fit: contain;
|
|
3913
|
+
object-fit: contain;
|
|
3914
|
+
}
|
|
3915
|
+
|
|
3894
3916
|
.s-object-cover {
|
|
3895
3917
|
-o-object-fit: cover;
|
|
3896
3918
|
object-fit: cover;
|
|
@@ -4894,6 +4916,12 @@ select {
|
|
|
4894
4916
|
outline-offset: 2px;
|
|
4895
4917
|
}
|
|
4896
4918
|
|
|
4919
|
+
.s-ring-0 {
|
|
4920
|
+
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
4921
|
+
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
4922
|
+
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
4923
|
+
}
|
|
4924
|
+
|
|
4897
4925
|
.s-ring-2 {
|
|
4898
4926
|
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
4899
4927
|
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
@@ -5779,6 +5807,14 @@ select {
|
|
|
5779
5807
|
opacity: 1;
|
|
5780
5808
|
}
|
|
5781
5809
|
|
|
5810
|
+
.s-group\/preview:hover .group-hover\/preview\:s-opacity-100 {
|
|
5811
|
+
opacity: 1;
|
|
5812
|
+
}
|
|
5813
|
+
|
|
5814
|
+
.s-group\/preview:hover .group-hover\/preview\:s-opacity-40 {
|
|
5815
|
+
opacity: 0.4;
|
|
5816
|
+
}
|
|
5817
|
+
|
|
5782
5818
|
.s-group\/tree:hover .group-hover\/tree\:s-opacity-100 {
|
|
5783
5819
|
opacity: 1;
|
|
5784
5820
|
}
|
package/package.json
CHANGED
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
|
|
3
|
+
import {
|
|
4
|
+
Dialog,
|
|
5
|
+
DialogContent,
|
|
6
|
+
DialogTrigger,
|
|
7
|
+
IconButton,
|
|
8
|
+
Spinner,
|
|
9
|
+
} from "@sparkle/components/";
|
|
10
|
+
import { useCopyToClipboard } from "@sparkle/hooks";
|
|
11
|
+
import {
|
|
12
|
+
ArrowDownOnSquareIcon,
|
|
13
|
+
ClipboardCheckIcon,
|
|
14
|
+
ClipboardIcon,
|
|
15
|
+
} from "@sparkle/icons/app";
|
|
16
|
+
import { cn } from "@sparkle/lib/utils";
|
|
17
|
+
|
|
18
|
+
interface InteractiveImageProps {
|
|
19
|
+
alt: string;
|
|
20
|
+
isLoading?: boolean;
|
|
21
|
+
onCopyError?: (error: unknown) => void;
|
|
22
|
+
onDownloadError?: (error: unknown) => void;
|
|
23
|
+
src?: string;
|
|
24
|
+
title: string;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
export function InteractiveImage({
|
|
28
|
+
alt,
|
|
29
|
+
isLoading = false,
|
|
30
|
+
src,
|
|
31
|
+
...props
|
|
32
|
+
}: InteractiveImageProps) {
|
|
33
|
+
const [isZoomed, setIsZoomed] = React.useState(false);
|
|
34
|
+
|
|
35
|
+
const handleZoomToggle = React.useCallback(() => {
|
|
36
|
+
setIsZoomed(!isZoomed);
|
|
37
|
+
}, [isZoomed]);
|
|
38
|
+
|
|
39
|
+
return (
|
|
40
|
+
<Dialog open={isZoomed} onOpenChange={handleZoomToggle}>
|
|
41
|
+
<DialogTrigger asChild>
|
|
42
|
+
<div className="s-aspect-square s-h-80 s-w-80">
|
|
43
|
+
<ImagePreview
|
|
44
|
+
alt={alt}
|
|
45
|
+
isLoading={isLoading}
|
|
46
|
+
onClick={(e) => {
|
|
47
|
+
if (isLoading) {
|
|
48
|
+
e.preventDefault();
|
|
49
|
+
e.stopPropagation();
|
|
50
|
+
return;
|
|
51
|
+
}
|
|
52
|
+
handleZoomToggle();
|
|
53
|
+
}}
|
|
54
|
+
src={src}
|
|
55
|
+
{...props}
|
|
56
|
+
/>
|
|
57
|
+
</div>
|
|
58
|
+
</DialogTrigger>
|
|
59
|
+
<DialogContent className="s-w-auto s-max-w-none s-border-0 s-outline-none s-ring-0 focus:s-outline-none focus:s-ring-0">
|
|
60
|
+
<img src={src} alt={alt} className="s-object-contain" />
|
|
61
|
+
</DialogContent>
|
|
62
|
+
</Dialog>
|
|
63
|
+
);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
function LoadingImage() {
|
|
67
|
+
return (
|
|
68
|
+
<div className="s-flex s-h-full s-w-full s-items-center s-justify-center">
|
|
69
|
+
<Spinner variant="dark" size="sm" />
|
|
70
|
+
</div>
|
|
71
|
+
);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
type ImagePreviewProps = InteractiveImageProps & {
|
|
75
|
+
onClick?: (e: React.MouseEvent) => void;
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
function ImagePreview({
|
|
79
|
+
isLoading,
|
|
80
|
+
onClick,
|
|
81
|
+
alt,
|
|
82
|
+
src,
|
|
83
|
+
title,
|
|
84
|
+
onCopyError,
|
|
85
|
+
onDownloadError,
|
|
86
|
+
}: ImagePreviewProps) {
|
|
87
|
+
const [isCopied, copyToClipboard] = useCopyToClipboard();
|
|
88
|
+
|
|
89
|
+
const handleCopy = async () => {
|
|
90
|
+
try {
|
|
91
|
+
if (!src) {
|
|
92
|
+
return;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
// Fetch the image as a blob.
|
|
96
|
+
const response = await fetch(src);
|
|
97
|
+
const blob = await response.blob();
|
|
98
|
+
|
|
99
|
+
// Copy to clipboard.
|
|
100
|
+
await copyToClipboard(
|
|
101
|
+
new ClipboardItem({
|
|
102
|
+
[blob.type]: blob,
|
|
103
|
+
})
|
|
104
|
+
);
|
|
105
|
+
} catch (error) {
|
|
106
|
+
onCopyError?.(error);
|
|
107
|
+
}
|
|
108
|
+
};
|
|
109
|
+
|
|
110
|
+
const handleDownload = async () => {
|
|
111
|
+
try {
|
|
112
|
+
if (!src) {
|
|
113
|
+
return;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
// Fetch the image.
|
|
117
|
+
const response = await fetch(src);
|
|
118
|
+
const blob = await response.blob();
|
|
119
|
+
|
|
120
|
+
// Create a download link.
|
|
121
|
+
const url = window.URL.createObjectURL(blob);
|
|
122
|
+
const link = document.createElement("a");
|
|
123
|
+
link.href = url;
|
|
124
|
+
|
|
125
|
+
// Extract filename from URL or use a default.
|
|
126
|
+
link.download = title;
|
|
127
|
+
|
|
128
|
+
// Trigger download.
|
|
129
|
+
document.body.appendChild(link);
|
|
130
|
+
link.click();
|
|
131
|
+
|
|
132
|
+
// Cleanup.
|
|
133
|
+
document.body.removeChild(link);
|
|
134
|
+
window.URL.revokeObjectURL(url);
|
|
135
|
+
} catch (error) {
|
|
136
|
+
onDownloadError?.(error);
|
|
137
|
+
}
|
|
138
|
+
};
|
|
139
|
+
|
|
140
|
+
return (
|
|
141
|
+
<div
|
|
142
|
+
onClick={onClick}
|
|
143
|
+
className={cn(
|
|
144
|
+
"s-group/preview s-relative s-h-full s-w-full s-overflow-hidden s-rounded-2xl s-bg-muted-background dark:s-bg-muted-background-night",
|
|
145
|
+
!isLoading && "s-cursor-pointer"
|
|
146
|
+
)}
|
|
147
|
+
>
|
|
148
|
+
{isLoading ? (
|
|
149
|
+
<LoadingImage />
|
|
150
|
+
) : (
|
|
151
|
+
<>
|
|
152
|
+
<img
|
|
153
|
+
src={src}
|
|
154
|
+
alt={alt}
|
|
155
|
+
className="s-h-full s-w-full s-rounded-2xl s-object-cover"
|
|
156
|
+
/>
|
|
157
|
+
{/* Dark overlay on hover */}
|
|
158
|
+
<div className="s-absolute s-inset-0 s-bg-black s-opacity-0 s-transition-opacity s-duration-200 group-hover/preview:s-opacity-40" />
|
|
159
|
+
{/* Icon container - only visible on hover */}
|
|
160
|
+
<div className="s-absolute s-right-3 s-top-3 s-z-10 s-flex s-opacity-0 s-transition-opacity s-duration-200 group-hover/preview:s-opacity-100">
|
|
161
|
+
<IconButton
|
|
162
|
+
icon={isCopied ? ClipboardCheckIcon : ClipboardIcon}
|
|
163
|
+
className="s-text-white"
|
|
164
|
+
tooltip={isCopied ? "Copied!" : "Copy to clipboard"}
|
|
165
|
+
size="xs"
|
|
166
|
+
onClick={async (e) => {
|
|
167
|
+
e.stopPropagation(); // Prevent image zoom.
|
|
168
|
+
await handleCopy();
|
|
169
|
+
}}
|
|
170
|
+
/>
|
|
171
|
+
<IconButton
|
|
172
|
+
icon={ArrowDownOnSquareIcon}
|
|
173
|
+
className="s-text-white"
|
|
174
|
+
tooltip="Download"
|
|
175
|
+
size="xs"
|
|
176
|
+
onClick={async (e) => {
|
|
177
|
+
e.stopPropagation(); // Prevent image zoom.
|
|
178
|
+
await handleDownload();
|
|
179
|
+
}}
|
|
180
|
+
/>
|
|
181
|
+
</div>
|
|
182
|
+
</>
|
|
183
|
+
)}
|
|
184
|
+
</div>
|
|
185
|
+
);
|
|
186
|
+
}
|
package/src/components/index.ts
CHANGED
|
@@ -87,6 +87,7 @@ export { Hoverable } from "./Hoverable";
|
|
|
87
87
|
export { DoubleIcon, Icon } from "./Icon";
|
|
88
88
|
export { IconButton } from "./IconButton";
|
|
89
89
|
export { Input } from "./Input";
|
|
90
|
+
export { InteractiveImage } from "./InteractiveImage";
|
|
90
91
|
export { Label } from "./Label";
|
|
91
92
|
export type { LinkWrapperProps } from "./LinkWrapper";
|
|
92
93
|
export { LinkWrapper } from "./LinkWrapper";
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import type { Meta } from "@storybook/react";
|
|
2
|
+
import React from "react";
|
|
3
|
+
|
|
4
|
+
import { InteractiveImage } from "@sparkle/components/InteractiveImage";
|
|
5
|
+
|
|
6
|
+
import { Citation } from "../index_with_tw_base";
|
|
7
|
+
|
|
8
|
+
const meta = {
|
|
9
|
+
title: "Components/Citation",
|
|
10
|
+
component: Citation,
|
|
11
|
+
} satisfies Meta<typeof Citation>;
|
|
12
|
+
|
|
13
|
+
export default meta;
|
|
14
|
+
|
|
15
|
+
export const InteractiveImageExample = () => (
|
|
16
|
+
<div className="s-flex s-flex-col s-gap-8">
|
|
17
|
+
Example of interactive image
|
|
18
|
+
<h2>Loading</h2>
|
|
19
|
+
<InteractiveImage
|
|
20
|
+
alt="Example of a loading interactive image"
|
|
21
|
+
isLoading={true}
|
|
22
|
+
title="Example of a loading interactive image"
|
|
23
|
+
/>
|
|
24
|
+
<h2>Loaded</h2>
|
|
25
|
+
<InteractiveImage
|
|
26
|
+
alt="Example of an interactive image"
|
|
27
|
+
src="https://dust.tt/static/droidavatar/Droid_Lime_3.jpg"
|
|
28
|
+
title="Example of an interactive image"
|
|
29
|
+
/>
|
|
30
|
+
<h3>With 4:3 aspect ratio</h3>
|
|
31
|
+
<InteractiveImage
|
|
32
|
+
alt="Example of a 4:3 aspect ratio interactive image"
|
|
33
|
+
src="https://upload.wikimedia.org/wikipedia/commons/d/de/Aspect-ratio-4x3.svg"
|
|
34
|
+
title="Example of a 4:3 aspect ratio interactive image"
|
|
35
|
+
/>
|
|
36
|
+
</div>
|
|
37
|
+
);
|