bunx storybook@latest init --type html --skip-install

// .storybook/main.ts
import type { StorybookConfig } from 'storybook'

const config: StorybookConfig = {
  framework: '@pyreon/storybook',
  stories: ['../src/**/*.stories.@(ts|tsx)'],
}

export default config

// .storybook/preview.ts
import type { DecoratorFn } from '@pyreon/storybook'

const globalDecorators: DecoratorFn[] = [
  (storyFn, context) => (
    <div class="storybook-wrapper" style={{ padding: '1rem' }}>
      {storyFn(context.args, context)}
    </div>
  ),
]

export const decorators = globalDecorators

import type { Meta, StoryObj } from '@pyreon/storybook'
import { Button } from './Button'

const meta = {
  component: Button,
  title: 'Components/Button',
  args: { label: 'Click me' },
  tags: ['autodocs'],
} satisfies Meta<typeof Button>

export default meta
type Story = StoryObj<typeof meta>

export const Primary: Story = {
  args: { variant: 'primary' },
}

export const Secondary: Story = {
  args: { variant: 'secondary' },
}

export const Disabled: Story = {
  args: { label: 'Disabled', disabled: true },
}

const meta = {
  // The component to document (used by autodocs and the default render)
  component: Button,

  // Sidebar title — use slashes for nesting: "Design System/Atoms/Button"
  title: 'Components/Button',

  // Default args applied to all stories (overridden per-story)
  args: { label: 'Click me', variant: 'primary' },

  // Arg type definitions for the Controls panel
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'ghost'],
    },
    onClick: { action: 'clicked' },
  },

  // Tags for filtering and features ("autodocs" enables auto-generated docs)
  tags: ['autodocs'],

  // Story parameters (backgrounds, viewport, layout, etc.)
  parameters: {
    layout: 'centered',
  },

  // Decorators applied to every story in this file
  decorators: [],

  // Default render function (overrides h(component, args))
  render: undefined,

  // Filter which named exports are treated as stories
  excludeStories: /^_/, // exclude exports starting with _
  includeStories: ['Primary', 'Secondary'], // or include only these
} satisfies Meta<typeof Button>

export const WithLongLabel: Story = {
  // Override args for this story (merged onto meta.args)
  args: { label: 'This is a very long button label' },

  // Story-specific decorators (run inside meta decorators)
  decorators: [(storyFn, ctx) => <div style={{ maxWidth: '200px' }}>{storyFn(ctx.args, ctx)}</div>],

  // Story-specific parameters
  parameters: { layout: 'padded' },

  // Custom render for this story
  render: (args) => (
    <div class="button-showcase">
      <Button {...args} />
      <p>Character count: {args.label.length}</p>
    </div>
  ),

  // Display name override (defaults to the export name)
  name: 'Long Label',

  // Tags for this story
  tags: ['!autodocs'], // exclude from auto-generated docs
}

export const WithIcon: Story = {
  render: (args) => (
    <div class="flex gap-2">
      <span class="icon">★</span>
      <Button {...args} />
    </div>
  ),
}

export const WithContext: Story = {
  render: (args, context) => (
    <div>
      <p>Story: {context.name}</p>
      <p>View mode: {context.viewMode}</p>
      <Button {...args} />
    </div>
  ),
}

const meta = {
  component: ThemeCard,
  decorators: [
    (storyFn, context) => (
      <ThemeProvider theme="dark">{storyFn(context.args, context)}</ThemeProvider>
    ),
  ],
} satisfies Meta<typeof ThemeCard>

export const InModal: Story = {
  decorators: [(storyFn, context) => <Modal open={true}>{storyFn(context.args, context)}</Modal>],
}

export const decorators = [
  (storyFn, context) => <div class="app-root">{storyFn(context.args, context)}</div>,
]

Global decorator
  └─ Meta decorator
      └─ Story decorator
          └─ Story render

type DecoratorFn<TArgs = Props> = (
  storyFn: StoryFn<TArgs>,
  context: StoryContext<TArgs>,
) => VNodeChild

type StoryFn<TArgs = Props> = (args: TArgs, context: StoryContext<TArgs>) => VNodeChild

import { signal, computed } from '@pyreon/storybook'

export const Interactive: Story = {
  render: (args) => {
    const count = signal(0)
    const label = computed(() => `${args.label} (${count()})`)

    return (
      <div>
        <Button {...args} label={label()} onClick={() => count.update((n) => n + 1)} />
        <p>Clicked {count()} times</p>
        <button onClick={() => count.set(0)}>Reset</button>
      </div>
    )
  },
}

import { signal, effect } from '@pyreon/storybook'

export const WithEffect: Story = {
  render: (args) => {
    const clicks = signal(0)

    effect(() => {
      console.log('Click count:', clicks())
    })

    return <Button {...args} onClick={() => clicks.update((n) => n + 1)} />
  },
}

export const Clicked: Story = {
  play: async ({ canvasElement }) => {
    const button = canvasElement.querySelector('button')!
    button.click()

    // Wait for reactive updates to flush
    await new Promise((r) => setTimeout(r, 0))

    // Assert the result
    const text = canvasElement.textContent
    console.assert(text?.includes('1'), 'Expected click count to be 1')
  },
}

export const MultiStep: Story = {
  play: async ({ canvasElement, step }) => {
    await step('Click the button three times', async () => {
      const button = canvasElement.querySelector('button')!
      button.click()
      button.click()
      button.click()
    })

    await step('Verify the count', async () => {
      await new Promise((r) => setTimeout(r, 0))
      const count = canvasElement.querySelector('.count')?.textContent
      console.assert(count === '3', `Expected 3, got ${count}`)
    })

    await step('Reset and verify', async () => {
      const resetBtn = canvasElement.querySelector('.reset')!
      ;(resetBtn as HTMLElement).click()
      await new Promise((r) => setTimeout(r, 0))
      const count = canvasElement.querySelector('.count')?.textContent
      console.assert(count === '0', `Expected 0 after reset, got ${count}`)
    })
  },
}

function renderToCanvas(
  context: {
    storyFn: () => VNodeChild
    storyContext: { component?: ComponentFn; args: Record<string, unknown>; [key: string]: unknown }
    showMain: () => void
    showError: (error: { title: string; description: string }) => void
    forceRemount: boolean
  },
  canvasElement: HTMLElement,
): void

function defaultRender(component: ComponentFn, args: Record<string, unknown>): VNodeChild
// → h(component, args)

// Card.stories.tsx
import type { Meta, StoryObj } from '@pyreon/storybook'
import { signal } from '@pyreon/storybook'
import { Card } from './Card'

const meta = {
  component: Card,
  title: 'Components/Card',
  args: {
    title: 'Card Title',
    description: 'This is a card description.',
    variant: 'default',
  },
  argTypes: {
    variant: {
      control: 'select',
      options: ['default', 'outlined', 'elevated'],
    },
  },
  tags: ['autodocs'],
  decorators: [
    (storyFn, context) => (
      <div style={{ maxWidth: '400px', margin: '0 auto' }}>{storyFn(context.args, context)}</div>
    ),
  ],
} satisfies Meta<typeof Card>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {}

export const Outlined: Story = {
  args: { variant: 'outlined' },
}

export const Elevated: Story = {
  args: { variant: 'elevated' },
}

export const WithActions: Story = {
  render: (args) => {
    const liked = signal(false)

    return (
      <Card {...args}>
        <div class="card-actions">
          <button onClick={() => liked.set(!liked())}>{liked() ? 'Unlike' : 'Like'}</button>
        </div>
      </Card>
    )
  },
  play: async ({ canvasElement }) => {
    const likeBtn = canvasElement.querySelector('button')!
    likeBtn.click()
    await new Promise((r) => setTimeout(r, 0))
    console.assert(likeBtn.textContent === 'Unlike', 'Button should show Unlike after click')
  },
}

export const Loading: Story = {
  args: {
    title: 'Loading...',
    description: 'Content is loading.',
  },
  render: (args) => (
    <Card {...args}>
      <div class="skeleton" style={{ height: '100px' }} />
    </Card>
  ),
}

import { signal, computed, effect } from '@pyreon/storybook'
import type { Meta, StoryObj } from '@pyreon/storybook'