From b6ddc3fc6e3b0446d7dd6167afcb17891d388a03 Mon Sep 17 00:00:00 2001 From: myelinated-wackerow <263208946+myelinated-wackerow@users.noreply.github.com> Date: Fri, 15 May 2026 05:34:31 -0700 Subject: [PATCH] chore: stories for content-primitive components PR 2 of #18191. Adds Storybook stories for the three in-content widget primitives reused across docs, tutorial, and homepage surfaces, and migrates each loose .tsx into Foo/index.tsx so the story lives alongside. Components covered: Codeblock (client), CopyToClipboard (client, plus the CopyButton named export), and ProductList (server). Each uses the Components / Content / title pattern and opts out of Chromatic snapshots at the meta level. Co-Authored-By: Claude Opus 4.7 Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com> --- .../Codeblock/Codeblock.stories.tsx | 119 +++++++++++++++++ .../{Codeblock.tsx => Codeblock/index.tsx} | 0 .../CopyToClipboard.stories.tsx | 77 +++++++++++ .../index.tsx} | 4 +- .../ProductList/ProductList.stories.tsx | 126 ++++++++++++++++++ .../index.tsx} | 0 6 files changed, 324 insertions(+), 2 deletions(-) create mode 100644 src/components/Codeblock/Codeblock.stories.tsx rename src/components/{Codeblock.tsx => Codeblock/index.tsx} (100%) create mode 100644 src/components/CopyToClipboard/CopyToClipboard.stories.tsx rename src/components/{CopyToClipboard.tsx => CopyToClipboard/index.tsx} (93%) create mode 100644 src/components/ProductList/ProductList.stories.tsx rename src/components/{ProductList.tsx => ProductList/index.tsx} (100%) diff --git a/src/components/Codeblock/Codeblock.stories.tsx b/src/components/Codeblock/Codeblock.stories.tsx new file mode 100644 index 00000000000..55523dfcc23 --- /dev/null +++ b/src/components/Codeblock/Codeblock.stories.tsx @@ -0,0 +1,119 @@ +import { Meta, StoryObj } from "@storybook/nextjs" + +import Codeblock from "." + +const meta = { + title: "Components / Content / Codeblock", + component: Codeblock, + parameters: { + chromatic: { disableSnapshot: true }, + docs: { + description: { + component: + "Syntax-highlighted code block built on `prism-react-renderer`. Renders a line-numbered listing, with optional Copy and Show all / Show less controls. Languages with copy-button support: `js`, `json`, `python`, `solidity`. `bash` blocks suppress line numbers. Pass `fromHomepage` to render without the top bar (no copy, no collapse).", + }, + }, + }, + decorators: [ + (Story) => ( +
+ +
+ ), + ], +} satisfies Meta + +export default meta + +type Story = StoryObj + +const solidityExample = `// SPDX-License-Identifier: MIT +pragma solidity ^0.8.20; + +contract Counter { + uint256 public count; + + function increment() external { + count += 1; + } + + function reset() external { + count = 0; + } +}` + +const jsExample = `import { createPublicClient, http } from "viem" +import { mainnet } from "viem/chains" + +const client = createPublicClient({ + chain: mainnet, + transport: http(), +}) + +const block = await client.getBlock() +console.log(block.number)` + +const pythonExample = `from web3 import Web3 + +w3 = Web3(Web3.HTTPProvider("https://mainnet.example/v3/KEY")) + +latest = w3.eth.get_block("latest") +print(latest.number)` + +const bashExample = `pnpm install +pnpm dev` + +export const Default: Story = { + args: { + codeLanguage: "language-solidity", + children: solidityExample, + }, +} + +export const JavaScript: Story = { + args: { + codeLanguage: "language-js", + children: jsExample, + }, +} + +export const Python: Story = { + args: { + codeLanguage: "language-python", + children: pythonExample, + }, +} + +export const Bash: Story = { + args: { + codeLanguage: "language-bash", + children: bashExample, + }, +} + +export const Collapsible: Story = { + args: { + codeLanguage: "language-solidity", + allowCollapse: true, + children: Array.from( + { length: 40 }, + (_, i) => ` uint256 line${i} = ${i};` + ).join("\n"), + }, +} + +export const NoCollapse: Story = { + args: { + codeLanguage: "language-solidity", + allowCollapse: false, + children: solidityExample, + }, +} + +export const FromHomepage: Story = { + args: { + codeLanguage: "language-solidity", + fromHomepage: true, + children: solidityExample, + }, +} diff --git a/src/components/Codeblock.tsx b/src/components/Codeblock/index.tsx similarity index 100% rename from src/components/Codeblock.tsx rename to src/components/Codeblock/index.tsx diff --git a/src/components/CopyToClipboard/CopyToClipboard.stories.tsx b/src/components/CopyToClipboard/CopyToClipboard.stories.tsx new file mode 100644 index 00000000000..2ea3c3f7808 --- /dev/null +++ b/src/components/CopyToClipboard/CopyToClipboard.stories.tsx @@ -0,0 +1,77 @@ +import { Check, Clipboard } from "lucide-react" +import { Meta, StoryObj } from "@storybook/nextjs" + +import { VStack } from "@/components/ui/flex" + +import CopyToClipboard, { CopyButton } from "." + +const meta = { + title: "Components / Content / CopyToClipboard", + component: CopyToClipboard, + parameters: { + chromatic: { disableSnapshot: true }, + docs: { + description: { + component: + 'Bare clipboard trigger that uses the render-prop pattern: pass a function child that receives `isCopied: boolean` and returns the label / icon for each state. Use `inline` to render as `