91 lines
2.0 KiB
TypeScript
91 lines
2.0 KiB
TypeScript
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>
|
|
),
|
|
}
|