feat: copy content of Charts

hngngn · Dec 30, 2024 · 4878166 · 4878166
1 parent 76d3fc3
commit 4878166
Show file tree

Hide file tree

Showing 12 changed files with 169 additions and 43 deletions.
diff --git a/docs/src/__registry__/index.ts b/docs/src/__registry__/index.ts
diff --git a/docs/src/__registry__/tailwindcss/charts/area-chart-linear.tsx b/docs/src/__registry__/tailwindcss/charts/area-chart-linear.tsx
@@ -75,6 +75,7 @@ const AreaChartLinear = () => {
 						numTicks={data.length}
 					/>
 					<ChartCrosshair<DataRecord>
+						color="var(--color-desktop)"
 						template={(props) => (
 							<ChartTooltipContent
 								labelKey="month"

diff --git a/docs/src/__registry__/tailwindcss/charts/area-chart-step.tsx b/docs/src/__registry__/tailwindcss/charts/area-chart-step.tsx
@@ -87,6 +87,7 @@ const AreaChartStep = () => {
 						numTicks={data.length}
 					/>
 					<ChartCrosshair<DataRecord>
+						color="var(--color-desktop)"
 						template={(props) => (
 							<ChartTooltipContent labelKey="month" hideLabel {...props} />
 						)}

diff --git a/docs/src/__registry__/tailwindcss/charts/area-chart.tsx b/docs/src/__registry__/tailwindcss/charts/area-chart.tsx
@@ -75,6 +75,7 @@ const AreaChart = () => {
 						numTicks={data.length}
 					/>
 					<ChartCrosshair<DataRecord>
+						color="var(--color-desktop)"
 						template={(props) => (
 							<ChartTooltipContent
 								labelKey="month"

diff --git a/docs/src/components/block-viewer.tsx b/docs/src/components/block-viewer.tsx
@@ -37,7 +37,6 @@ import {
 	ToggleGroupItem,
 } from "@/registry/tailwindcss/ui/toggle-group";
 import type { CollapsibleTriggerProps } from "@kobalte/core/collapsible";
-import type { AccessorWithLatest } from "@solidjs/router";
 import {
 	type Accessor,
 	For,

diff --git a/docs/src/components/chart-display.tsx b/docs/src/components/chart-display.tsx
@@ -1,25 +1,37 @@
+import { Index } from "@/__registry__";
+import type { RegistryEntry } from "@/registry/schema";
 import { cn } from "@/registry/tailwindcss/libs/cn";
-import { type ComponentProps, splitProps } from "solid-js";
+import { createAsync } from "@solidjs/router";
+import { clientOnly } from "@solidjs/start";
+import { type ComponentProps, Show, splitProps } from "solid-js";
+
+const ChartToolbar = clientOnly(() => import("./chart-toolbar"), {
+	lazy: true,
+});
 
 const ChartDisplay = (
 	props: ComponentProps<"div"> & {
 		name: string;
 	},
 ) => {
 	const [local, rest] = splitProps(props, ["name", "children", "class"]);
+	const item = createAsync<RegistryEntry>(() => Index.tailwindcss[props.name]);
 
 	return (
-		<div
-			class={cn(
-				"themes-wrapper group relative flex flex-col overflow-hidden rounded-xl border shadow transition-all duration-200 ease-in-out hover:z-30",
-				local.class,
-			)}
-			{...rest}
-		>
-			<div class="relative z-10 [&>div]:rounded-none [&>div]:border-none [&>div]:shadow-none">
-				{local.children}
+		<Show when={item()}>
+			<div
+				class={cn(
+					"themes-wrapper group relative flex flex-col overflow-hidden rounded-xl border shadow transition-all duration-200 ease-in-out hover:z-30",
+					local.class,
+				)}
+				{...rest}
+			>
+				<ChartToolbar item={item()} />
+				<div class="relative z-10 [&>div]:rounded-none [&>div]:border-none [&>div]:shadow-none">
+					{local.children}
+				</div>
 			</div>
-		</div>
+		</Show>
 	);
 };
 

diff --git a/docs/src/components/chart-toolbar.tsx b/docs/src/components/chart-toolbar.tsx
@@ -0,0 +1,95 @@
+import type { RegistryEntry } from "@/registry/schema";
+import { Button } from "@/registry/tailwindcss/ui/button";
+import { Match, Show, Switch, createSignal } from "solid-js";
+
+const ChartToolbar = (props: {
+	item: RegistryEntry | undefined;
+}) => {
+	return (
+		<div class="flex items-center gap-2 relative z-20 justify-end border-b bg-card px-3 py-2.5 text-card-foreground">
+			<div class="flex items-center gap-1.5 pl-1 text-[13px] text-muted-foreground [&>svg]:h-[0.9rem] [&>svg]:w-[0.9rem]">
+				<ChartTitle item={props.item} />
+			</div>
+			<div class="ml-auto">
+				<ChartCopyButton item={props.item} />
+			</div>
+		</div>
+	);
+};
+
+export default ChartToolbar;
+
+const ChartTitle = (props: { item: RegistryEntry | undefined }) => {
+	return (
+		<Switch>
+			<Match when={props.item?.name.includes("area")}>
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+					<g
+						fill="none"
+						stroke="currentColor"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+					>
+						<path d="M3 3v16a2 2 0 0 0 2 2h16" />
+						<path d="M7 11.207a.5.5 0 0 1 .146-.353l2-2a.5.5 0 0 1 .708 0l3.292 3.292a.5.5 0 0 0 .708 0l4.292-4.292a.5.5 0 0 1 .854.353V16a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1z" />
+					</g>
+				</svg>
+				Chart
+			</Match>
+		</Switch>
+	);
+};
+
+const ChartCopyButton = (props: { item: RegistryEntry | undefined }) => {
+	const [isCopied, setIsCopied] = createSignal(false);
+
+	const copyToClipboard = async () => {
+		setIsCopied(true);
+		// @ts-expect-error
+		await navigator.clipboard.writeText(props.item?.files[0].content);
+		setTimeout(() => setIsCopied(false), 2000);
+	};
+
+	return (
+		<Button
+			variant="outline"
+			size="icon"
+			onClick={copyToClipboard}
+			class="size-6 rounded-[6px] bg-transparent text-foreground shadow-none hover:bg-muted dark:text-foreground [&_svg]:size-3"
+		>
+			<Show
+				when={isCopied()}
+				fallback={
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+						<g
+							fill="none"
+							stroke="currentColor"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+						>
+							<path d="M7 9.667A2.667 2.667 0 0 1 9.667 7h8.666A2.667 2.667 0 0 1 21 9.667v8.666A2.667 2.667 0 0 1 18.333 21H9.667A2.667 2.667 0 0 1 7 18.333z" />
+							<path d="M4.012 16.737A2.005 2.005 0 0 1 3 15V5c0-1.1.9-2 2-2h10c.75 0 1.158.385 1.5 1" />
+						</g>
+						<title>Copy</title>
+					</svg>
+				}
+			>
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+					<g
+						fill="none"
+						stroke="currentColor"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+					>
+						<path d="M7 9.667A2.667 2.667 0 0 1 9.667 7h8.666A2.667 2.667 0 0 1 21 9.667v8.666A2.667 2.667 0 0 1 18.333 21H9.667A2.667 2.667 0 0 1 7 18.333z" />
+						<path d="M4.012 16.737A2.005 2.005 0 0 1 3 15V5c0-1.1.9-2 2-2h10c.75 0 1.158.385 1.5 1M11 14l2 2l4-4" />
+					</g>
+					<title>Copied</title>
+				</svg>
+			</Show>
+		</Button>
+	);
+};
diff --git a/docs/src/libs/highlight-code.ts b/docs/src/libs/highlight-code.ts
@@ -1,7 +1,23 @@
-import { codeToHtml } from "shiki";
+import type { HighlighterCore } from "shiki";
+import { createHighlighterCore } from "shiki/core";
+import { createOnigurumaEngine } from "shiki/engine/oniguruma";
+
+let highlighterPromise: Promise<HighlighterCore> | null = null;
+
+const getHighlighter = async () => {
+	if (!highlighterPromise) {
+		highlighterPromise = createHighlighterCore({
+			themes: [import("shiki/themes/vesper.mjs")],
+			langs: [import("shiki/langs/tsx.mjs")],
+			engine: createOnigurumaEngine(import("shiki/wasm")),
+		});
+	}
+	return highlighterPromise;
+};
 
 export const highlightCode = async (code: string) => {
-	const html = await codeToHtml(code, {
+	const highlighter = await getHighlighter();
+	return highlighter.codeToHtml(code, {
 		lang: "tsx",
 		theme: "vesper",
 		transformers: [
@@ -12,6 +28,4 @@ export const highlightCode = async (code: string) => {
 			},
 		],
 	});
-
-	return html;
 };
diff --git a/docs/src/registry/tailwindcss/charts/area-chart-linear.tsx b/docs/src/registry/tailwindcss/charts/area-chart-linear.tsx
@@ -75,6 +75,7 @@ const AreaChartLinear = () => {
 						numTicks={data.length}
 					/>
 					<ChartCrosshair<DataRecord>
+						color="var(--color-desktop)"
 						template={(props) => (
 							<ChartTooltipContent
 								labelKey="month"

diff --git a/docs/src/registry/tailwindcss/charts/area-chart-step.tsx b/docs/src/registry/tailwindcss/charts/area-chart-step.tsx
@@ -87,6 +87,7 @@ const AreaChartStep = () => {
 						numTicks={data.length}
 					/>
 					<ChartCrosshair<DataRecord>
+						color="var(--color-desktop)"
 						template={(props) => (
 							<ChartTooltipContent labelKey="month" hideLabel {...props} />
 						)}

diff --git a/docs/src/registry/tailwindcss/charts/area-chart.tsx b/docs/src/registry/tailwindcss/charts/area-chart.tsx
@@ -75,6 +75,7 @@ const AreaChart = () => {
 						numTicks={data.length}
 					/>
 					<ChartCrosshair<DataRecord>
+						color="var(--color-desktop)"
 						template={(props) => (
 							<ChartTooltipContent
 								labelKey="month"

diff --git a/docs/src/routes/(app)/charts.tsx b/docs/src/routes/(app)/charts.tsx
@@ -42,22 +42,22 @@ const ChartsPage = () => {
 										class="grid flex-1 scroll-mt-20 items-start gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10"
 										id="area-chart"
 									>
-										<ChartDisplay name="chart-area">
+										<ChartDisplay name="area-chart">
 											<Chart.AreaChart />
 										</ChartDisplay>
-										<ChartDisplay name="chart-area-linear">
+										<ChartDisplay name="area-chart-linear">
 											<Chart.AreaChartLinear />
 										</ChartDisplay>
-										<ChartDisplay name="chart-area-step">
+										<ChartDisplay name="area-chart-step">
 											<Chart.AreaChartStep />
 										</ChartDisplay>
-										<ChartDisplay name="chart-area-stacked">
+										<ChartDisplay name="area-chart-stacked">
 											<Chart.AreaChartStacked />
 										</ChartDisplay>
-										<ChartDisplay name="chart-area-legend">
+										<ChartDisplay name="area-chart-legend">
 											<Chart.AreaChartLegend />
 										</ChartDisplay>
-										<ChartDisplay name="chart-area-gradient">
+										<ChartDisplay name="area-chart-gradient">
 											<Chart.AreaChartGradient />
 										</ChartDisplay>
 									</div>