design system token v0.6

stories/Primitives/Code.stories.tsx

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Code } from '@/components/ui/code'
+
+const meta = {
+  title: 'Primitives/Code',
+  component: Code,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['inline', 'block'],
+    },
+    language: { control: 'text' },
+  },
+} satisfies Meta<typeof Code>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Inline: Story = {
+  args: {
+    variant: 'inline',
+    children: 'pnpm install',
+  },
+}
+
+export const InlineInSentence: Story = {
+  render: () => (
+    <p className="font-serif text-base leading-relaxed max-w-prose">
+      To get started, run <Code>pnpm install</Code> and then{' '}
+      <Code>pnpm dev</Code> to start the development server on{' '}
+      <Code>localhost:3000</Code>.
+    </p>
+  ),
+}
+
+export const Block: Story = {
+  args: {
+    variant: 'block',
+    language: 'bash',
+    children: `pnpm install
+pnpm dev
+pnpm build`,
+  },
+}
+
+export const BlockLongCommand: Story = {
+  args: {
+    variant: 'block',
+    language: 'bash',
+    children:
+      'curl -fsSL https://example.com/install.sh | bash -s -- --prefix=/usr/local --no-color --very-long-flag-that-should-wrap',
+  },
+}
+
+export const BlockTypescript: Story = {
+  args: {
+    variant: 'block',
+    language: 'ts',
+    children: `import { Code } from '@/components/ui/code'
+
+export function Example() {
+  return <Code variant="block">Hello, world!</Code>
+}`,
+  },
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-6 max-w-2xl">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2 font-sans">Inline</p>
+        <p className="font-serif">
+          Use <Code>cn()</Code> from <Code>@/lib/utils</Code> to merge Tailwind classes.
+        </p>
+      </div>
+
+      <div>
+        <p className="text-sm text-muted-foreground mb-2 font-sans">Block</p>
+        <Code variant="block" language="bash">
+          {`# install and run
+pnpm install
+pnpm dev`}
+        </Code>
+      </div>
+    </div>
+  ),
+}