@dust-tt/sparkle 0.2.612 → 0.2.614
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/NavigationList.d.ts +4 -1
- package/dist/esm/components/NavigationList.d.ts.map +1 -1
- package/dist/esm/components/NavigationList.js +2 -2
- package/dist/esm/components/NavigationList.js.map +1 -1
- package/dist/esm/components/ScrollArea.d.ts +1 -0
- package/dist/esm/components/ScrollArea.d.ts.map +1 -1
- package/dist/esm/components/ScrollArea.js +7 -4
- package/dist/esm/components/ScrollArea.js.map +1 -1
- package/dist/esm/components/markdown/CodeBlock.d.ts +2 -1
- package/dist/esm/components/markdown/CodeBlock.d.ts.map +1 -1
- package/dist/esm/components/markdown/CodeBlock.js +9 -2
- package/dist/esm/components/markdown/CodeBlock.js.map +1 -1
- package/dist/esm/stories/CodeBlock.stories.d.ts +17 -0
- package/dist/esm/stories/CodeBlock.stories.d.ts.map +1 -0
- package/dist/esm/stories/CodeBlock.stories.js +125 -0
- package/dist/esm/stories/CodeBlock.stories.js.map +1 -0
- package/package.json +1 -1
- package/src/components/NavigationList.tsx +7 -2
- package/src/components/ScrollArea.tsx +9 -3
- package/src/components/markdown/CodeBlock.tsx +10 -0
- package/src/stories/CodeBlock.stories.tsx +361 -0
|
@@ -2,7 +2,10 @@ import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
|
|
|
2
2
|
import { type VariantProps } from "class-variance-authority";
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
import { LinkWrapperProps } from "../components";
|
|
5
|
-
|
|
5
|
+
interface NavigationListProps {
|
|
6
|
+
viewportRef?: React.RefObject<HTMLDivElement>;
|
|
7
|
+
}
|
|
8
|
+
declare const NavigationList: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & NavigationListProps & React.RefAttributes<HTMLDivElement>>;
|
|
6
9
|
interface NavigationListItemProps extends React.HTMLAttributes<HTMLDivElement>, Omit<LinkWrapperProps, "children" | "className"> {
|
|
7
10
|
selected?: boolean;
|
|
8
11
|
label?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationList.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,gBAAgB,EAGjB,MAAM,sBAAsB,CAAC;AAiC9B,QAAA,MAAM,cAAc
|
|
1
|
+
{"version":3,"file":"NavigationList.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,gBAAgB,EAGjB,MAAM,sBAAsB,CAAC;AAiC9B,UAAU,mBAAmB;IAC3B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;CAC/C;AACD,QAAA,MAAM,cAAc,qLAgBlB,CAAC;AAGH,UAAU,uBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,WAAW,CAAC;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,kBAAkB,gGAwEvB,CAAC;AAGF,UAAU,6BACR,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,wBAAwB,sGAkB5B,CAAC;AAGH,QAAA,MAAM,aAAa;;;mFAiBjB,CAAC;AAMH,UAAU,wBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC;CACf;AAED,QAAA,MAAM,mBAAmB,iGAevB,CAAC;AAIH,OAAO,EACL,cAAc,EACd,kBAAkB,EAClB,wBAAwB,EACxB,mBAAmB,GACpB,CAAC"}
|
|
@@ -18,8 +18,8 @@ var NavigationListItemStyles = cva(cn("s-box-border s-flex s-items-center s-w-fu
|
|
|
18
18
|
},
|
|
19
19
|
});
|
|
20
20
|
var NavigationList = React.forwardRef(function (_a, ref) {
|
|
21
|
-
var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
|
|
22
|
-
return (React.createElement(ScrollArea, __assign({ ref: ref, className: cn(className, "s-transition-all s-duration-300") }, props),
|
|
21
|
+
var className = _a.className, children = _a.children, viewportRef = _a.viewportRef, props = __rest(_a, ["className", "children", "viewportRef"]);
|
|
22
|
+
return (React.createElement(ScrollArea, __assign({ ref: ref, viewportRef: viewportRef, className: cn(className, "s-transition-all s-duration-300") }, props),
|
|
23
23
|
React.createElement("div", { className: "s-flex s-flex-col s-gap-0.5" }, children),
|
|
24
24
|
React.createElement(ScrollBar, null)));
|
|
25
25
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationList.js","sourceRoot":"","sources":["../../../src/components/NavigationList.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,IAAI,EACJ,WAAW,EAEX,UAAU,EACV,SAAS,GACV,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AAExC,IAAM,wBAAwB,GAAG,GAAG,CAClC,EAAE,CACA,sFAAsF,EACtF,uGAAuG,EACvG,uCAAuC,EACvC,4FAA4F,EAC5F,4DAA4D,EAC5D,0DAA0D,CAC3D,EACD;IACE,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,MAAM,EAAE,4DAA4D;YACpE,QAAQ,EAAE,EAAE,CACV,gDAAgD,EAChD,eAAe,EACf,8CAA8C,CAC/C;YACD,UAAU,EACR,4DAA4D;SAC/D;KACF;IACD,eAAe,EAAE;QACf,KAAK,EAAE,YAAY;KACpB;CACF,CACF,CAAC;
|
|
1
|
+
{"version":3,"file":"NavigationList.js","sourceRoot":"","sources":["../../../src/components/NavigationList.tsx"],"names":[],"mappings":"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"}
|
|
@@ -9,6 +9,7 @@ interface ScrollAreaProps extends React.ComponentPropsWithoutRef<typeof ScrollAr
|
|
|
9
9
|
active?: string;
|
|
10
10
|
inactive?: string;
|
|
11
11
|
};
|
|
12
|
+
viewportRef?: React.RefObject<HTMLDivElement>;
|
|
12
13
|
}
|
|
13
14
|
declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
|
|
14
15
|
declare const scrollBarSizes: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAC;AACnE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,UAAU,eACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC;IACvE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE;QACb,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;
|
|
1
|
+
{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAC;AACnE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,UAAU,eACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC;IACvE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE;QACb,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;CAC/C;AAED,QAAA,MAAM,UAAU,wFAuEf,CAAC;AAGF,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;CA6BV,CAAC;AAEX,KAAK,aAAa,GAAG,MAAM,OAAO,cAAc,CAAC;AAEjD,UAAU,cACR,SAAQ,KAAK,CAAC,wBAAwB,CACpC,OAAO,mBAAmB,CAAC,mBAAmB,CAC/C;IACD,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB;AAED,QAAA,MAAM,SAAS,uFAuCd,CAAC;AAIF,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC;AACjC,YAAY,EAAE,aAAa,EAAE,CAAC"}
|
|
@@ -4,8 +4,8 @@ import * as React from "react";
|
|
|
4
4
|
import { useMemo } from "react";
|
|
5
5
|
import { cn } from "../lib/utils";
|
|
6
6
|
var ScrollArea = React.forwardRef(function (_a, ref) {
|
|
7
|
-
var className = _a.className, children = _a.children, _b = _a.hideScrollBar, hideScrollBar = _b === void 0 ? false : _b, _c = _a.orientation, orientation = _c === void 0 ? "vertical" : _c, scrollBarClassName = _a.scrollBarClassName, viewportClassName = _a.viewportClassName, scrollStyles = _a.scrollStyles, props = __rest(_a, ["className", "children", "hideScrollBar", "orientation", "scrollBarClassName", "viewportClassName", "scrollStyles"]);
|
|
8
|
-
var
|
|
7
|
+
var className = _a.className, children = _a.children, _b = _a.hideScrollBar, hideScrollBar = _b === void 0 ? false : _b, _c = _a.orientation, orientation = _c === void 0 ? "vertical" : _c, scrollBarClassName = _a.scrollBarClassName, viewportClassName = _a.viewportClassName, scrollStyles = _a.scrollStyles, viewportRef = _a.viewportRef, props = __rest(_a, ["className", "children", "hideScrollBar", "orientation", "scrollBarClassName", "viewportClassName", "scrollStyles", "viewportRef"]);
|
|
8
|
+
var localViewportRef = React.useRef(null);
|
|
9
9
|
var _d = __read(React.useState(false), 2), isScrolled = _d[0], setIsScrolled = _d[1];
|
|
10
10
|
var hasCustomScrollBar = useMemo(function () {
|
|
11
11
|
return React.Children.toArray(children).some(function (child) {
|
|
@@ -16,12 +16,15 @@ var ScrollArea = React.forwardRef(function (_a, ref) {
|
|
|
16
16
|
}, [children]);
|
|
17
17
|
var shouldHideDefaultScrollBar = hideScrollBar || hasCustomScrollBar;
|
|
18
18
|
var handleScroll = React.useCallback(function () {
|
|
19
|
-
if (viewportRef.current) {
|
|
19
|
+
if (viewportRef && viewportRef.current) {
|
|
20
20
|
setIsScrolled(viewportRef.current.scrollTop > 0);
|
|
21
21
|
}
|
|
22
|
+
if (localViewportRef.current) {
|
|
23
|
+
setIsScrolled(localViewportRef.current.scrollTop > 0);
|
|
24
|
+
}
|
|
22
25
|
}, []);
|
|
23
26
|
return (React.createElement(ScrollAreaPrimitive.Root, __assign({ ref: ref, className: cn("s-relative s-z-20 s-overflow-hidden s-transition-all s-duration-200", isScrolled ? scrollStyles === null || scrollStyles === void 0 ? void 0 : scrollStyles.active : scrollStyles === null || scrollStyles === void 0 ? void 0 : scrollStyles.inactive, className) }, props),
|
|
24
|
-
React.createElement(ScrollAreaPrimitive.Viewport, { ref: viewportRef, onScroll: handleScroll, className: cn("s-h-full s-w-full s-rounded-[inherit]", viewportClassName) }, children),
|
|
27
|
+
React.createElement(ScrollAreaPrimitive.Viewport, { ref: viewportRef || localViewportRef, onScroll: handleScroll, className: cn("s-h-full s-w-full s-rounded-[inherit]", viewportClassName) }, children),
|
|
25
28
|
!shouldHideDefaultScrollBar && (React.createElement(ScrollBar, { orientation: orientation, className: scrollBarClassName })),
|
|
26
29
|
React.createElement(ScrollAreaPrimitive.Corner, null)));
|
|
27
30
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrollArea.js","sourceRoot":"","sources":["../../../src/components/ScrollArea.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAC;AACnE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"ScrollArea.js","sourceRoot":"","sources":["../../../src/components/ScrollArea.tsx"],"names":[],"mappings":"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"}
|
|
@@ -8,7 +8,8 @@ type CodeBlockProps = {
|
|
|
8
8
|
inline?: boolean;
|
|
9
9
|
variant?: "surface";
|
|
10
10
|
wrapLongLines?: boolean;
|
|
11
|
+
showLineNumber?: boolean;
|
|
11
12
|
};
|
|
12
|
-
export declare function CodeBlock({ children, className, inline, variant, wrapLongLines, }: CodeBlockProps): JSX.Element;
|
|
13
|
+
export declare function CodeBlock({ children, className, inline, variant, wrapLongLines, showLineNumber, }: CodeBlockProps): JSX.Element;
|
|
13
14
|
export {};
|
|
14
15
|
//# sourceMappingURL=CodeBlock.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../../../src/components/markdown/CodeBlock.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAC;AASxC,eAAO,MAAM,iBAAiB;;mFAkB7B,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../../../src/components/markdown/CodeBlock.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAC;AASxC,eAAO,MAAM,iBAAiB;;mFAkB7B,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,SAAS,EACT,MAAM,EACN,OAAmB,EACnB,aAAqB,EACrB,cAAsB,GACvB,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CA8H9B"}
|
|
@@ -20,7 +20,7 @@ export var codeBlockVariants = cva([
|
|
|
20
20
|
},
|
|
21
21
|
});
|
|
22
22
|
export function CodeBlock(_a) {
|
|
23
|
-
var children = _a.children, className = _a.className, inline = _a.inline, _b = _a.variant, variant = _b === void 0 ? "surface" : _b, _c = _a.wrapLongLines, wrapLongLines = _c === void 0 ? false : _c;
|
|
23
|
+
var children = _a.children, className = _a.className, inline = _a.inline, _b = _a.variant, variant = _b === void 0 ? "surface" : _b, _c = _a.wrapLongLines, wrapLongLines = _c === void 0 ? false : _c, _d = _a.showLineNumber, showLineNumber = _d === void 0 ? false : _d;
|
|
24
24
|
var match = /language-(\w+)/.exec(className || "");
|
|
25
25
|
var language = match ? match[1] : "text";
|
|
26
26
|
var languageOverrides = {
|
|
@@ -38,6 +38,13 @@ export function CodeBlock(_a) {
|
|
|
38
38
|
backgroundColor: "transparent",
|
|
39
39
|
fontSize: "0.875rem",
|
|
40
40
|
},
|
|
41
|
+
"hljs-ln": {
|
|
42
|
+
color: "var(--s-muted-foreground)",
|
|
43
|
+
fontSize: "0.75rem",
|
|
44
|
+
paddingRight: "1em",
|
|
45
|
+
textAlign: "right",
|
|
46
|
+
userSelect: "none",
|
|
47
|
+
},
|
|
41
48
|
"hljs-keyword": {
|
|
42
49
|
// function, const, let, if, return
|
|
43
50
|
color: violet[500],
|
|
@@ -119,6 +126,6 @@ export function CodeBlock(_a) {
|
|
|
119
126
|
};
|
|
120
127
|
return !inline && language ? (React.createElement(Suspense, { fallback: React.createElement("div", null) },
|
|
121
128
|
React.createElement("div", { className: "s-text-foreground dark:s-text-foreground-night" },
|
|
122
|
-
React.createElement(SyntaxHighlighter, { wrapLongLines: wrapLongLines, style: codeStyle, language: languageToUse, PreTag: "div", className: "s-cursor-text" }, String(children).replace(/\n$/, ""))))) : (React.createElement("code", { className: codeBlockVariants({ variant: variant }) }, children));
|
|
129
|
+
React.createElement(SyntaxHighlighter, { wrapLongLines: wrapLongLines, showLineNumbers: showLineNumber, style: codeStyle, language: languageToUse, PreTag: "div", className: "s-cursor-text" }, String(children).replace(/\n$/, ""))))) : (React.createElement("code", { className: codeBlockVariants({ variant: variant }) }, children));
|
|
123
130
|
}
|
|
124
131
|
//# sourceMappingURL=CodeBlock.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeBlock.js","sourceRoot":"","sources":["../../../../src/components/markdown/CodeBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAE5C,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,IAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAClC,cAAM,OAAA,MAAM,CAAC,qDAAqD,CAAC,EAA7D,CAA6D,CACpE,CAAC;AAEF,MAAM,CAAC,IAAM,iBAAiB,GAAG,GAAG,CAClC;IACE,8DAA8D;IAC9D,4CAA4C;CAC7C,EACD;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE;gBACP,kCAAkC;gBAClC,gDAAgD;aACjD;SACF;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;KACnB;CACF,CACF,CAAC;
|
|
1
|
+
{"version":3,"file":"CodeBlock.js","sourceRoot":"","sources":["../../../../src/components/markdown/CodeBlock.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import { CodeBlock } from "../index_with_tw_base";
|
|
3
|
+
declare const meta: Meta<typeof CodeBlock>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const InlineCode: Story;
|
|
7
|
+
export declare const InlineCodeWithVariant: Story;
|
|
8
|
+
export declare const TypescriptBlock: Story;
|
|
9
|
+
export declare const ReactTSXBlock: Story;
|
|
10
|
+
export declare const CSSBlock: Story;
|
|
11
|
+
export declare const JSONBlock: Story;
|
|
12
|
+
export declare const BashBlock: Story;
|
|
13
|
+
export declare const SQLBlock: Story;
|
|
14
|
+
export declare const LongCodeWithWrapping: Story;
|
|
15
|
+
export declare const LongCodeWithoutWrapping: Story;
|
|
16
|
+
export declare const TypescriptWithLineNumbers: Story;
|
|
17
|
+
//# sourceMappingURL=CodeBlock.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CodeBlock.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/CodeBlock.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CA2ChC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAMnC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAsB7B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA+C3B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAmCtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KA+BvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KA2BvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KA+BtB,CAAC;AAGF,eAAO,MAAM,oBAAoB,EAAE,KAuBlC,CAAC;AAGF,eAAO,MAAM,uBAAuB,EAAE,KAcrC,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KA2CvC,CAAC"}
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { CodeBlock } from "../index_with_tw_base";
|
|
3
|
+
var meta = {
|
|
4
|
+
title: "Components/CodeBlock",
|
|
5
|
+
component: CodeBlock,
|
|
6
|
+
argTypes: {
|
|
7
|
+
children: {
|
|
8
|
+
description: "The code content to display",
|
|
9
|
+
control: { type: "text" },
|
|
10
|
+
},
|
|
11
|
+
className: {
|
|
12
|
+
description: "CSS class name, can include language specification (e.g., 'language-javascript')",
|
|
13
|
+
control: { type: "text" },
|
|
14
|
+
},
|
|
15
|
+
inline: {
|
|
16
|
+
description: "Whether to render as inline code (single line) or block code",
|
|
17
|
+
control: { type: "boolean" },
|
|
18
|
+
defaultValue: false,
|
|
19
|
+
},
|
|
20
|
+
variant: {
|
|
21
|
+
description: "Visual variant of the code block",
|
|
22
|
+
options: ["surface"],
|
|
23
|
+
control: { type: "select" },
|
|
24
|
+
defaultValue: "surface",
|
|
25
|
+
},
|
|
26
|
+
wrapLongLines: {
|
|
27
|
+
description: "Whether to wrap long lines in block code",
|
|
28
|
+
control: { type: "boolean" },
|
|
29
|
+
defaultValue: false,
|
|
30
|
+
},
|
|
31
|
+
showLineNumber: {
|
|
32
|
+
description: "Whether to show line numbers on the left side of the code",
|
|
33
|
+
control: { type: "boolean" },
|
|
34
|
+
defaultValue: false,
|
|
35
|
+
},
|
|
36
|
+
},
|
|
37
|
+
decorators: [
|
|
38
|
+
function (Story) { return (React.createElement("div", { className: "s-bg-background s-p-4 dark:s-bg-background-night" },
|
|
39
|
+
React.createElement(Story, null))); },
|
|
40
|
+
],
|
|
41
|
+
};
|
|
42
|
+
export default meta;
|
|
43
|
+
// Inline code examples
|
|
44
|
+
export var InlineCode = {
|
|
45
|
+
args: {
|
|
46
|
+
children: "const greeting = 'Hello, World!';",
|
|
47
|
+
inline: true,
|
|
48
|
+
},
|
|
49
|
+
};
|
|
50
|
+
export var InlineCodeWithVariant = {
|
|
51
|
+
args: {
|
|
52
|
+
children: "npm install @dust-tt/sparkle",
|
|
53
|
+
inline: true,
|
|
54
|
+
variant: "surface",
|
|
55
|
+
},
|
|
56
|
+
};
|
|
57
|
+
export var TypescriptBlock = {
|
|
58
|
+
args: {
|
|
59
|
+
children: "interface User {\n id: number;\n name: string;\n email: string;\n isActive: boolean;\n}\n\nconst createUser = (userData: Partial<User>): User => {\n return {\n id: Math.random(),\n name: userData.name || \"Anonymous\",\n email: userData.email || \"\",\n isActive: userData.isActive ?? true,\n };\n};\n\nconst newUser = createUser({ name: \"John Doe\", email: \"john@example.com\" });",
|
|
60
|
+
className: "language-typescript",
|
|
61
|
+
inline: false,
|
|
62
|
+
},
|
|
63
|
+
};
|
|
64
|
+
export var ReactTSXBlock = {
|
|
65
|
+
args: {
|
|
66
|
+
children: "import React, { useState, useEffect } from 'react';\nimport { Button } from '@dust-tt/sparkle';\n\ninterface CounterProps {\n initialValue?: number;\n step?: number;\n onCountChange?: (count: number) => void;\n}\n\nconst Counter: React.FC<CounterProps> = ({ \n initialValue = 0, \n step = 1,\n onCountChange\n}) => {\n const [count, setCount] = useState<number>(initialValue);\n\n useEffect(() => {\n document.title = `Count: ${count}`;\n onCountChange?.(count);\n }, [count, onCountChange]);\n\n const increment = (): void => setCount(prev => prev + step);\n const decrement = (): void => setCount(prev => prev - step);\n const reset = (): void => setCount(initialValue);\n\n return (\n <div className=\"flex items-center gap-4\">\n <Button onClick={decrement} variant=\"outline\">\n -\n </Button>\n <span className=\"text-2xl font-bold\">{count}</span>\n <Button onClick={increment} variant=\"primary\">\n +\n </Button>\n <Button onClick={reset} variant=\"ghost\">\n Reset\n </Button>\n </div>\n );\n};\n\nexport default Counter;",
|
|
67
|
+
className: "language-tsx",
|
|
68
|
+
inline: false,
|
|
69
|
+
},
|
|
70
|
+
};
|
|
71
|
+
export var CSSBlock = {
|
|
72
|
+
args: {
|
|
73
|
+
children: ".code-block {\n background-color: var(--s-muted);\n border: 1px solid var(--s-border);\n border-radius: 0.5rem;\n padding: 1rem;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 0.875rem;\n line-height: 1.5;\n overflow-x: auto;\n}\n\n.code-block .keyword {\n color: #8b5cf6; /* violet-500 */\n}\n\n.code-block .string {\n color: #10b981; /* emerald-500 */\n}\n\n.code-block .comment {\n color: #6b7280; /* gray-500 */\n font-style: italic;\n}\n\n@media (prefers-color-scheme: dark) {\n .code-block {\n background-color: var(--s-muted-night);\n border-color: var(--s-border-night);\n }\n}",
|
|
74
|
+
className: "language-css",
|
|
75
|
+
inline: false,
|
|
76
|
+
},
|
|
77
|
+
};
|
|
78
|
+
export var JSONBlock = {
|
|
79
|
+
args: {
|
|
80
|
+
children: "{\n \"name\": \"@dust-tt/sparkle\",\n \"version\": \"1.0.0\",\n \"description\": \"A beautiful component library for React applications\",\n \"main\": \"dist/index.js\",\n \"types\": \"dist/index.d.ts\",\n \"scripts\": {\n \"build\": \"rollup -c\",\n \"dev\": \"rollup -c -w\",\n \"test\": \"jest\",\n \"lint\": \"eslint src/**/*.{ts,tsx}\"\n },\n \"dependencies\": {\n \"react\": \"^18.0.0\",\n \"react-dom\": \"^18.0.0\",\n \"class-variance-authority\": \"^0.7.0\"\n },\n \"devDependencies\": {\n \"@types/react\": \"^18.0.0\",\n \"@types/react-dom\": \"^18.0.0\",\n \"typescript\": \"^5.0.0\"\n },\n \"keywords\": [\"react\", \"components\", \"ui\", \"typescript\"],\n \"author\": \"Dust Team\",\n \"license\": \"MIT\"\n}",
|
|
81
|
+
className: "language-json",
|
|
82
|
+
inline: false,
|
|
83
|
+
},
|
|
84
|
+
};
|
|
85
|
+
export var BashBlock = {
|
|
86
|
+
args: {
|
|
87
|
+
children: "#!/bin/bash\n\n# Install dependencies\nnpm install\n\n# Build the project\nnpm run build\n\n# Run tests\nnpm test\n\n# Deploy to production\nif [ \"$ENVIRONMENT\" = \"production\" ]; then\n echo \"Deploying to production...\"\n npm run deploy:prod\nelse\n echo \"Deploying to staging...\"\n npm run deploy:staging\nfi\n\n# Clean up\nnpm run clean",
|
|
88
|
+
className: "language-bash",
|
|
89
|
+
inline: false,
|
|
90
|
+
},
|
|
91
|
+
};
|
|
92
|
+
export var SQLBlock = {
|
|
93
|
+
args: {
|
|
94
|
+
children: "-- Create users table\nCREATE TABLE users (\n id SERIAL PRIMARY KEY,\n username VARCHAR(50) UNIQUE NOT NULL,\n email VARCHAR(100) UNIQUE NOT NULL,\n created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,\n updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP\n);\n\n-- Insert sample data\nINSERT INTO users (username, email) VALUES\n ('alice', 'alice@example.com'),\n ('bob', 'bob@example.com'),\n ('charlie', 'charlie@example.com');\n\n-- Query with joins\nSELECT \n u.username,\n u.email,\n p.title as post_title,\n p.created_at as post_date\nFROM users u\nLEFT JOIN posts p ON u.id = p.user_id\nWHERE u.created_at > '2024-01-01'\nORDER BY p.created_at DESC\nLIMIT 10;",
|
|
95
|
+
className: "language-sql",
|
|
96
|
+
inline: false,
|
|
97
|
+
},
|
|
98
|
+
};
|
|
99
|
+
// Long code example with line wrapping
|
|
100
|
+
export var LongCodeWithWrapping = {
|
|
101
|
+
args: {
|
|
102
|
+
children: "// This is a very long line of code that demonstrates how the wrapLongLines prop works when set to true. It contains a lot of text and would normally overflow the container, but with wrapLongLines enabled, it will wrap to the next line instead of creating a horizontal scrollbar. This is particularly useful for mobile devices or narrow containers where horizontal scrolling is not desirable.\n\nfunction processVeryLongFunctionNameWithManyParameters(\n parameterOne: string,\n parameterTwo: number,\n parameterThree: boolean,\n parameterFour: object,\n parameterFive: array,\n parameterSix: function,\n parameterSeven: string,\n parameterEight: number\n): Promise<ComplexReturnType> {\n // Implementation here\n return new Promise((resolve, reject) => {\n // More implementation\n });\n}",
|
|
103
|
+
className: "language-typescript",
|
|
104
|
+
inline: false,
|
|
105
|
+
wrapLongLines: true,
|
|
106
|
+
},
|
|
107
|
+
};
|
|
108
|
+
// Long code example without line wrapping (default)
|
|
109
|
+
export var LongCodeWithoutWrapping = {
|
|
110
|
+
args: {
|
|
111
|
+
children: "// This is a very long line of code that demonstrates how the wrapLongLines prop works when set to false (default). It contains a lot of text and will create a horizontal scrollbar when it overflows the container. This is the default behavior and is useful when you want to preserve the exact formatting of the code.\n\nfunction processVeryLongFunctionNameWithManyParameters(parameterOne: string, parameterTwo: number, parameterThree: boolean, parameterFour: object, parameterFive: array, parameterSix: function, parameterSeven: string, parameterEight: number): Promise<ComplexReturnType> {\n // Implementation here\n return new Promise((resolve, reject) => {\n // More implementation\n });\n}",
|
|
112
|
+
className: "language-typescript",
|
|
113
|
+
inline: false,
|
|
114
|
+
wrapLongLines: false,
|
|
115
|
+
},
|
|
116
|
+
};
|
|
117
|
+
export var TypescriptWithLineNumbers = {
|
|
118
|
+
args: {
|
|
119
|
+
children: "interface User {\n id: number;\n name: string;\n email: string;\n isActive: boolean;\n}\n\nclass UserService {\n private users: User[] = [];\n\n addUser(user: Omit<User, 'id'>): User {\n const newUser: User = {\n id: this.users.length + 1,\n ...user\n };\n \n this.users.push(newUser);\n return newUser;\n }\n\n getUserById(id: number): User | undefined {\n return this.users.find(user => user.id === id);\n }\n\n getAllUsers(): User[] {\n return [...this.users];\n }\n}\n\nconst userService = new UserService();\nconst newUser = userService.addUser({\n name: \"John Doe\",\n email: \"john@example.com\",\n isActive: true\n});\n\nconsole.log(\"Created user:\", newUser);",
|
|
120
|
+
className: "language-typescript",
|
|
121
|
+
inline: false,
|
|
122
|
+
showLineNumber: true,
|
|
123
|
+
},
|
|
124
|
+
};
|
|
125
|
+
//# sourceMappingURL=CodeBlock.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CodeBlock.stories.js","sourceRoot":"","sources":["../../../src/stories/CodeBlock.stories.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -41,13 +41,18 @@ const NavigationListItemStyles = cva(
|
|
|
41
41
|
}
|
|
42
42
|
);
|
|
43
43
|
|
|
44
|
+
interface NavigationListProps {
|
|
45
|
+
viewportRef?: React.RefObject<HTMLDivElement>;
|
|
46
|
+
}
|
|
44
47
|
const NavigationList = React.forwardRef<
|
|
45
48
|
React.ElementRef<typeof ScrollAreaPrimitive.Root>,
|
|
46
|
-
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
|
|
47
|
-
|
|
49
|
+
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> &
|
|
50
|
+
NavigationListProps
|
|
51
|
+
>(({ className, children, viewportRef, ...props }, ref) => {
|
|
48
52
|
return (
|
|
49
53
|
<ScrollArea
|
|
50
54
|
ref={ref}
|
|
55
|
+
viewportRef={viewportRef}
|
|
51
56
|
className={cn(className, "s-transition-all s-duration-300")}
|
|
52
57
|
{...props}
|
|
53
58
|
>
|
|
@@ -14,6 +14,7 @@ interface ScrollAreaProps
|
|
|
14
14
|
active?: string;
|
|
15
15
|
inactive?: string;
|
|
16
16
|
};
|
|
17
|
+
viewportRef?: React.RefObject<HTMLDivElement>;
|
|
17
18
|
}
|
|
18
19
|
|
|
19
20
|
const ScrollArea = React.forwardRef<
|
|
@@ -29,11 +30,12 @@ const ScrollArea = React.forwardRef<
|
|
|
29
30
|
scrollBarClassName,
|
|
30
31
|
viewportClassName,
|
|
31
32
|
scrollStyles,
|
|
33
|
+
viewportRef,
|
|
32
34
|
...props
|
|
33
35
|
},
|
|
34
36
|
ref
|
|
35
37
|
) => {
|
|
36
|
-
const
|
|
38
|
+
const localViewportRef = React.useRef<HTMLDivElement>(null);
|
|
37
39
|
const [isScrolled, setIsScrolled] = React.useState(false);
|
|
38
40
|
|
|
39
41
|
const hasCustomScrollBar = useMemo(
|
|
@@ -50,9 +52,13 @@ const ScrollArea = React.forwardRef<
|
|
|
50
52
|
const shouldHideDefaultScrollBar = hideScrollBar || hasCustomScrollBar;
|
|
51
53
|
|
|
52
54
|
const handleScroll = React.useCallback(() => {
|
|
53
|
-
if (viewportRef.current) {
|
|
55
|
+
if (viewportRef && viewportRef.current) {
|
|
54
56
|
setIsScrolled(viewportRef.current.scrollTop > 0);
|
|
55
57
|
}
|
|
58
|
+
|
|
59
|
+
if (localViewportRef.current) {
|
|
60
|
+
setIsScrolled(localViewportRef.current.scrollTop > 0);
|
|
61
|
+
}
|
|
56
62
|
}, []);
|
|
57
63
|
|
|
58
64
|
return (
|
|
@@ -66,7 +72,7 @@ const ScrollArea = React.forwardRef<
|
|
|
66
72
|
{...props}
|
|
67
73
|
>
|
|
68
74
|
<ScrollAreaPrimitive.Viewport
|
|
69
|
-
ref={viewportRef}
|
|
75
|
+
ref={viewportRef || localViewportRef}
|
|
70
76
|
onScroll={handleScroll}
|
|
71
77
|
className={cn(
|
|
72
78
|
"s-h-full s-w-full s-rounded-[inherit]",
|
|
@@ -34,6 +34,7 @@ type CodeBlockProps = {
|
|
|
34
34
|
inline?: boolean;
|
|
35
35
|
variant?: "surface";
|
|
36
36
|
wrapLongLines?: boolean;
|
|
37
|
+
showLineNumber?: boolean;
|
|
37
38
|
};
|
|
38
39
|
|
|
39
40
|
export function CodeBlock({
|
|
@@ -42,6 +43,7 @@ export function CodeBlock({
|
|
|
42
43
|
inline,
|
|
43
44
|
variant = "surface",
|
|
44
45
|
wrapLongLines = false,
|
|
46
|
+
showLineNumber = false,
|
|
45
47
|
}: CodeBlockProps): JSX.Element {
|
|
46
48
|
const match = /language-(\w+)/.exec(className || "");
|
|
47
49
|
const language = match ? match[1] : "text";
|
|
@@ -63,6 +65,13 @@ export function CodeBlock({
|
|
|
63
65
|
backgroundColor: "transparent",
|
|
64
66
|
fontSize: "0.875rem",
|
|
65
67
|
},
|
|
68
|
+
"hljs-ln": {
|
|
69
|
+
color: "var(--s-muted-foreground)",
|
|
70
|
+
fontSize: "0.75rem",
|
|
71
|
+
paddingRight: "1em",
|
|
72
|
+
textAlign: "right",
|
|
73
|
+
userSelect: "none",
|
|
74
|
+
},
|
|
66
75
|
"hljs-keyword": {
|
|
67
76
|
// function, const, let, if, return
|
|
68
77
|
color: violet[500],
|
|
@@ -148,6 +157,7 @@ export function CodeBlock({
|
|
|
148
157
|
<div className="s-text-foreground dark:s-text-foreground-night">
|
|
149
158
|
<SyntaxHighlighter
|
|
150
159
|
wrapLongLines={wrapLongLines}
|
|
160
|
+
showLineNumbers={showLineNumber}
|
|
151
161
|
style={codeStyle}
|
|
152
162
|
language={languageToUse}
|
|
153
163
|
PreTag="div"
|