@medusajs/ui 2.2.1 → 2.2.2-next-20231120154105
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/components/code-block/code-block.d.ts +1 -0
- package/dist/cjs/components/code-block/code-block.js +9 -7
- package/dist/cjs/components/code-block/code-block.js.map +1 -1
- package/dist/esm/components/code-block/code-block.d.ts +1 -0
- package/dist/esm/components/code-block/code-block.js +9 -7
- package/dist/esm/components/code-block/code-block.js.map +1 -1
- package/package.json +1 -1
|
@@ -17,7 +17,7 @@ const useCodeBlockContext = () => {
|
|
|
17
17
|
const Root = ({ snippets, className, children, ...props }) => {
|
|
18
18
|
const [active, setActive] = React.useState(snippets[0]);
|
|
19
19
|
return (React.createElement(CodeBlockContext.Provider, { value: { snippets, active, setActive } },
|
|
20
|
-
React.createElement("div", { className: (0, clx_1.clx)("border-ui-code-border overflow-hidden rounded-lg border", className), ...props }, children)));
|
|
20
|
+
React.createElement("div", { className: (0, clx_1.clx)("border-ui-code-border flex flex-col overflow-hidden rounded-lg border", className), ...props }, children)));
|
|
21
21
|
};
|
|
22
22
|
const HeaderComponent = ({ children, className, hideLabels = false, ...props }) => {
|
|
23
23
|
const { snippets, active, setActive } = useCodeBlockContext();
|
|
@@ -34,8 +34,8 @@ const Meta = ({ className, ...props }) => {
|
|
|
34
34
|
const Header = Object.assign(HeaderComponent, { Meta });
|
|
35
35
|
const Body = ({ className, ...props }) => {
|
|
36
36
|
const { active } = useCodeBlockContext();
|
|
37
|
-
return (React.createElement("div", { className: (0, clx_1.clx)("bg-ui-code-bg-base relative p-4", className), ...props },
|
|
38
|
-
React.createElement(copy_1.Copy, { content: active.code, className: "text-ui-code-icon absolute right-4 top-4" }),
|
|
37
|
+
return (React.createElement("div", { className: (0, clx_1.clx)("bg-ui-code-bg-base relative h-full overflow-y-auto p-4", className), ...props },
|
|
38
|
+
!active.hideCopy && (React.createElement(copy_1.Copy, { content: active.code, className: "text-ui-code-icon absolute right-4 top-4" })),
|
|
39
39
|
React.createElement("div", { className: "max-w-[90%]" },
|
|
40
40
|
React.createElement(prism_react_renderer_1.Highlight, { theme: {
|
|
41
41
|
...prism_react_renderer_1.themes.palenight,
|
|
@@ -58,12 +58,14 @@ const Body = ({ className, ...props }) => {
|
|
|
58
58
|
},
|
|
59
59
|
...prism_react_renderer_1.themes.palenight.styles,
|
|
60
60
|
],
|
|
61
|
-
}, code: active.code, language: active.language }, ({ style, tokens, getLineProps, getTokenProps }) => (React.createElement("pre", { className: "txt-compact-small whitespace-pre-wrap bg-transparent font-mono",
|
|
61
|
+
}, code: active.code, language: active.language }, ({ style, tokens, getLineProps, getTokenProps }) => (React.createElement("pre", { className: (0, clx_1.clx)("txt-compact-small whitespace-pre-wrap bg-transparent font-mono", {
|
|
62
|
+
"grid grid-cols-[auto,1fr] gap-x-4": !active.hideLineNumbers,
|
|
63
|
+
}), style: {
|
|
62
64
|
...style,
|
|
63
65
|
background: "transparent",
|
|
64
|
-
} },
|
|
65
|
-
!active.hideLineNumbers && (React.createElement("span", { className: "text-ui-code-text-subtle" }, i + 1)),
|
|
66
|
-
React.createElement("div",
|
|
66
|
+
} },
|
|
67
|
+
!active.hideLineNumbers && (React.createElement("div", { role: "presentation", className: "flex flex-col text-right" }, tokens.map((_, i) => (React.createElement("span", { key: i, className: "text-ui-code-text-subtle tabular-nums" }, i + 1))))),
|
|
68
|
+
React.createElement("div", null, tokens.map((line, i) => (React.createElement("div", { key: i, ...getLineProps({ line }) }, line.map((token, key) => (React.createElement("span", { key: key, ...getTokenProps({ token }) })))))))))))));
|
|
67
69
|
};
|
|
68
70
|
const CodeBlock = Object.assign(Root, { Body, Header, Meta });
|
|
69
71
|
exports.CodeBlock = CodeBlock;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"code-block.js","sourceRoot":"","sources":["../../../../src/components/code-block/code-block.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAA;;;;AACZ,+DAAwD;AACxD,qDAA8B;AAE9B,4CAAwC;AACxC,qCAAiC;
|
|
1
|
+
{"version":3,"file":"code-block.js","sourceRoot":"","sources":["../../../../src/components/code-block/code-block.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\nimport { Highlight, themes } from \"prism-react-renderer\"\nimport * as React from \"react\"\n\nimport { Copy } from \"@/components/copy\"\nimport { clx } from \"@/utils/clx\"\n\nexport type CodeSnippet = {\n label: string\n language: string\n code: string\n hideLineNumbers?: boolean\n hideCopy?: boolean\n}\n\ntype CodeBlockState = {\n snippets: CodeSnippet[]\n active: CodeSnippet\n setActive: (active: CodeSnippet) => void\n} | null\n\nconst CodeBlockContext = React.createContext<CodeBlockState>(null)\n\nconst useCodeBlockContext = () => {\n const context = React.useContext(CodeBlockContext)\n\n if (context === null)\n throw new Error(\n \"useCodeBlockContext can only be used within a CodeBlockContext\"\n )\n\n return context\n}\n\ntype RootProps = {\n snippets: CodeSnippet[]\n}\n\nconst Root = ({\n snippets,\n className,\n children,\n ...props\n}: React.HTMLAttributes<HTMLDivElement> & RootProps) => {\n const [active, setActive] = React.useState(snippets[0])\n\n return (\n <CodeBlockContext.Provider value={{ snippets, active, setActive }}>\n <div\n className={clx(\n \"border-ui-code-border flex flex-col overflow-hidden rounded-lg border\",\n className\n )}\n {...props}\n >\n {children}\n </div>\n </CodeBlockContext.Provider>\n )\n}\n\ntype HeaderProps = {\n hideLabels?: boolean\n}\n\nconst HeaderComponent = ({\n children,\n className,\n hideLabels = false,\n ...props\n}: React.HTMLAttributes<HTMLDivElement> & HeaderProps) => {\n const { snippets, active, setActive } = useCodeBlockContext()\n return (\n <div\n className={clx(\n \"border-b-ui-code-border bg-ui-code-bg-header flex items-center gap-2 border-b px-4 py-3\",\n className\n )}\n {...props}\n >\n {!hideLabels &&\n snippets.map((snippet) => (\n <div\n className={clx(\n \"text-ui-code-text-subtle txt-compact-small-plus cursor-pointer rounded-full border border-transparent px-3 py-2 transition-all\",\n {\n \"text-ui-code-text-base border-ui-code-border bg-ui-code-bg-base cursor-default\":\n active.label === snippet.label,\n }\n )}\n key={snippet.label}\n onClick={() => setActive(snippet)}\n >\n {snippet.label}\n </div>\n ))}\n {children}\n </div>\n )\n}\n\nconst Meta = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n return (\n <div\n className={clx(\"text-ui-code-text-subtle ml-auto\", className)}\n {...props}\n />\n )\n}\n\nconst Header = Object.assign(HeaderComponent, { Meta })\n\nconst Body = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n const { active } = useCodeBlockContext()\n return (\n <div\n className={clx(\n \"bg-ui-code-bg-base relative h-full overflow-y-auto p-4\",\n className\n )}\n {...props}\n >\n {!active.hideCopy && (\n <Copy\n content={active.code}\n className=\"text-ui-code-icon absolute right-4 top-4\"\n />\n )}\n <div className=\"max-w-[90%]\">\n <Highlight\n theme={{\n ...themes.palenight,\n plain: {\n color: \"rgba(249, 250, 251, 1)\",\n backgroundColor: \"#111827\",\n },\n styles: [\n {\n types: [\"keyword\"],\n style: {\n color: \"var(--fg-on-color)\",\n },\n },\n {\n types: [\"maybe-class-name\"],\n style: {\n color: \"rgb(255, 203, 107)\",\n },\n },\n ...themes.palenight.styles,\n ],\n }}\n code={active.code}\n language={active.language}\n >\n {({ style, tokens, getLineProps, getTokenProps }) => (\n <pre\n className={clx(\n \"txt-compact-small whitespace-pre-wrap bg-transparent font-mono\",\n {\n \"grid grid-cols-[auto,1fr] gap-x-4\": !active.hideLineNumbers,\n }\n )}\n style={{\n ...style,\n background: \"transparent\",\n }}\n >\n {!active.hideLineNumbers && (\n <div role=\"presentation\" className=\"flex flex-col text-right\">\n {tokens.map((_, i) => (\n <span\n key={i}\n className=\"text-ui-code-text-subtle tabular-nums\"\n >\n {i + 1}\n </span>\n ))}\n </div>\n )}\n <div>\n {tokens.map((line, i) => (\n <div key={i} {...getLineProps({ line })}>\n {line.map((token, key) => (\n <span key={key} {...getTokenProps({ token })} />\n ))}\n </div>\n ))}\n </div>\n </pre>\n )}\n </Highlight>\n </div>\n </div>\n )\n}\n\nconst CodeBlock = Object.assign(Root, { Body, Header, Meta })\n\nexport { CodeBlock }\n"]}
|
|
@@ -13,7 +13,7 @@ const useCodeBlockContext = () => {
|
|
|
13
13
|
const Root = ({ snippets, className, children, ...props }) => {
|
|
14
14
|
const [active, setActive] = React.useState(snippets[0]);
|
|
15
15
|
return (React.createElement(CodeBlockContext.Provider, { value: { snippets, active, setActive } },
|
|
16
|
-
React.createElement("div", { className: clx("border-ui-code-border overflow-hidden rounded-lg border", className), ...props }, children)));
|
|
16
|
+
React.createElement("div", { className: clx("border-ui-code-border flex flex-col overflow-hidden rounded-lg border", className), ...props }, children)));
|
|
17
17
|
};
|
|
18
18
|
const HeaderComponent = ({ children, className, hideLabels = false, ...props }) => {
|
|
19
19
|
const { snippets, active, setActive } = useCodeBlockContext();
|
|
@@ -30,8 +30,8 @@ const Meta = ({ className, ...props }) => {
|
|
|
30
30
|
const Header = Object.assign(HeaderComponent, { Meta });
|
|
31
31
|
const Body = ({ className, ...props }) => {
|
|
32
32
|
const { active } = useCodeBlockContext();
|
|
33
|
-
return (React.createElement("div", { className: clx("bg-ui-code-bg-base relative p-4", className), ...props },
|
|
34
|
-
React.createElement(Copy, { content: active.code, className: "text-ui-code-icon absolute right-4 top-4" }),
|
|
33
|
+
return (React.createElement("div", { className: clx("bg-ui-code-bg-base relative h-full overflow-y-auto p-4", className), ...props },
|
|
34
|
+
!active.hideCopy && (React.createElement(Copy, { content: active.code, className: "text-ui-code-icon absolute right-4 top-4" })),
|
|
35
35
|
React.createElement("div", { className: "max-w-[90%]" },
|
|
36
36
|
React.createElement(Highlight, { theme: {
|
|
37
37
|
...themes.palenight,
|
|
@@ -54,12 +54,14 @@ const Body = ({ className, ...props }) => {
|
|
|
54
54
|
},
|
|
55
55
|
...themes.palenight.styles,
|
|
56
56
|
],
|
|
57
|
-
}, code: active.code, language: active.language }, ({ style, tokens, getLineProps, getTokenProps }) => (React.createElement("pre", { className: "txt-compact-small whitespace-pre-wrap bg-transparent font-mono",
|
|
57
|
+
}, code: active.code, language: active.language }, ({ style, tokens, getLineProps, getTokenProps }) => (React.createElement("pre", { className: clx("txt-compact-small whitespace-pre-wrap bg-transparent font-mono", {
|
|
58
|
+
"grid grid-cols-[auto,1fr] gap-x-4": !active.hideLineNumbers,
|
|
59
|
+
}), style: {
|
|
58
60
|
...style,
|
|
59
61
|
background: "transparent",
|
|
60
|
-
} },
|
|
61
|
-
!active.hideLineNumbers && (React.createElement("span", { className: "text-ui-code-text-subtle" }, i + 1)),
|
|
62
|
-
React.createElement("div",
|
|
62
|
+
} },
|
|
63
|
+
!active.hideLineNumbers && (React.createElement("div", { role: "presentation", className: "flex flex-col text-right" }, tokens.map((_, i) => (React.createElement("span", { key: i, className: "text-ui-code-text-subtle tabular-nums" }, i + 1))))),
|
|
64
|
+
React.createElement("div", null, tokens.map((line, i) => (React.createElement("div", { key: i, ...getLineProps({ line }) }, line.map((token, key) => (React.createElement("span", { key: key, ...getTokenProps({ token }) })))))))))))));
|
|
63
65
|
};
|
|
64
66
|
const CodeBlock = Object.assign(Root, { Body, Header, Meta });
|
|
65
67
|
export { CodeBlock };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"code-block.js","sourceRoot":"","sources":["../../../../src/components/code-block/code-block.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AACZ,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AACxD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAA;AACxC,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAA;
|
|
1
|
+
{"version":3,"file":"code-block.js","sourceRoot":"","sources":["../../../../src/components/code-block/code-block.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\nimport { Highlight, themes } from \"prism-react-renderer\"\nimport * as React from \"react\"\n\nimport { Copy } from \"@/components/copy\"\nimport { clx } from \"@/utils/clx\"\n\nexport type CodeSnippet = {\n label: string\n language: string\n code: string\n hideLineNumbers?: boolean\n hideCopy?: boolean\n}\n\ntype CodeBlockState = {\n snippets: CodeSnippet[]\n active: CodeSnippet\n setActive: (active: CodeSnippet) => void\n} | null\n\nconst CodeBlockContext = React.createContext<CodeBlockState>(null)\n\nconst useCodeBlockContext = () => {\n const context = React.useContext(CodeBlockContext)\n\n if (context === null)\n throw new Error(\n \"useCodeBlockContext can only be used within a CodeBlockContext\"\n )\n\n return context\n}\n\ntype RootProps = {\n snippets: CodeSnippet[]\n}\n\nconst Root = ({\n snippets,\n className,\n children,\n ...props\n}: React.HTMLAttributes<HTMLDivElement> & RootProps) => {\n const [active, setActive] = React.useState(snippets[0])\n\n return (\n <CodeBlockContext.Provider value={{ snippets, active, setActive }}>\n <div\n className={clx(\n \"border-ui-code-border flex flex-col overflow-hidden rounded-lg border\",\n className\n )}\n {...props}\n >\n {children}\n </div>\n </CodeBlockContext.Provider>\n )\n}\n\ntype HeaderProps = {\n hideLabels?: boolean\n}\n\nconst HeaderComponent = ({\n children,\n className,\n hideLabels = false,\n ...props\n}: React.HTMLAttributes<HTMLDivElement> & HeaderProps) => {\n const { snippets, active, setActive } = useCodeBlockContext()\n return (\n <div\n className={clx(\n \"border-b-ui-code-border bg-ui-code-bg-header flex items-center gap-2 border-b px-4 py-3\",\n className\n )}\n {...props}\n >\n {!hideLabels &&\n snippets.map((snippet) => (\n <div\n className={clx(\n \"text-ui-code-text-subtle txt-compact-small-plus cursor-pointer rounded-full border border-transparent px-3 py-2 transition-all\",\n {\n \"text-ui-code-text-base border-ui-code-border bg-ui-code-bg-base cursor-default\":\n active.label === snippet.label,\n }\n )}\n key={snippet.label}\n onClick={() => setActive(snippet)}\n >\n {snippet.label}\n </div>\n ))}\n {children}\n </div>\n )\n}\n\nconst Meta = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n return (\n <div\n className={clx(\"text-ui-code-text-subtle ml-auto\", className)}\n {...props}\n />\n )\n}\n\nconst Header = Object.assign(HeaderComponent, { Meta })\n\nconst Body = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n const { active } = useCodeBlockContext()\n return (\n <div\n className={clx(\n \"bg-ui-code-bg-base relative h-full overflow-y-auto p-4\",\n className\n )}\n {...props}\n >\n {!active.hideCopy && (\n <Copy\n content={active.code}\n className=\"text-ui-code-icon absolute right-4 top-4\"\n />\n )}\n <div className=\"max-w-[90%]\">\n <Highlight\n theme={{\n ...themes.palenight,\n plain: {\n color: \"rgba(249, 250, 251, 1)\",\n backgroundColor: \"#111827\",\n },\n styles: [\n {\n types: [\"keyword\"],\n style: {\n color: \"var(--fg-on-color)\",\n },\n },\n {\n types: [\"maybe-class-name\"],\n style: {\n color: \"rgb(255, 203, 107)\",\n },\n },\n ...themes.palenight.styles,\n ],\n }}\n code={active.code}\n language={active.language}\n >\n {({ style, tokens, getLineProps, getTokenProps }) => (\n <pre\n className={clx(\n \"txt-compact-small whitespace-pre-wrap bg-transparent font-mono\",\n {\n \"grid grid-cols-[auto,1fr] gap-x-4\": !active.hideLineNumbers,\n }\n )}\n style={{\n ...style,\n background: \"transparent\",\n }}\n >\n {!active.hideLineNumbers && (\n <div role=\"presentation\" className=\"flex flex-col text-right\">\n {tokens.map((_, i) => (\n <span\n key={i}\n className=\"text-ui-code-text-subtle tabular-nums\"\n >\n {i + 1}\n </span>\n ))}\n </div>\n )}\n <div>\n {tokens.map((line, i) => (\n <div key={i} {...getLineProps({ line })}>\n {line.map((token, key) => (\n <span key={key} {...getTokenProps({ token })} />\n ))}\n </div>\n ))}\n </div>\n </pre>\n )}\n </Highlight>\n </div>\n </div>\n )\n}\n\nconst CodeBlock = Object.assign(Root, { Body, Header, Meta })\n\nexport { CodeBlock }\n"]}
|