@pyreon/storybook 0.0.1

package/src/tests/storybook.test.ts

@@ -0,0 +1,413 @@
+import { h, Fragment } from '@pyreon/core'
+import type { ComponentFn, VNodeChild } from '@pyreon/core'
+import { signal, effect } from '@pyreon/reactivity'
+import { mount } from '@pyreon/runtime-dom'
+import { renderToCanvas, defaultRender } from '../render'
+import { render as previewRender } from '../preview'
+import type {
+  Meta,
+  StoryObj,
+  DecoratorFn,
+  StoryFn,
+  StoryContext,
+} from '../types'
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function createCanvas(): HTMLElement {
+  const el = document.createElement('div')
+  document.body.appendChild(el)
+  return el
+}
+
+function makeRenderContext(overrides: {
+  storyFn?: () => VNodeChild
+  component?: ComponentFn<any>
+  args?: Record<string, unknown>
+}) {
+  return {
+    storyFn: overrides.storyFn ?? (() => h('div', null, 'default')),
+    storyContext: {
+      component: overrides.component,
+      args: overrides.args ?? {},
+    },
+    showMain: () => {
+      /* noop */
+    },
+    showError: (_err: { title: string; description: string }) => {
+      /* noop */
+    },
+    forceRemount: false,
+  }
+}
+
+// ─── renderToCanvas ──────────────────────────────────────────────────────────
+
+describe('renderToCanvas', () => {
+  it('mounts a simple VNode into the canvas', () => {
+    const canvas = createCanvas()
+    const ctx = makeRenderContext({
+      storyFn: () => h('button', null, 'Click me'),
+    })
+
+    renderToCanvas(ctx, canvas)
+
+    expect(canvas.innerHTML).toContain('Click me')
+    expect(canvas.querySelector('button')).toBeTruthy()
+    canvas.remove()
+  })
+
+  it('mounts a Pyreon component with props', () => {
+    function Button(props: { label: string; disabled?: boolean }) {
+      return h('button', { disabled: props.disabled ?? false }, props.label)
+    }
+
+    const canvas = createCanvas()
+    const ctx = makeRenderContext({
+      storyFn: () => h(Button, { label: 'Submit', disabled: true }),
+    })
+
+    renderToCanvas(ctx, canvas)
+
+    const btn = canvas.querySelector('button')!
+    expect(btn).toBeTruthy()
+    expect(btn.textContent).toBe('Submit')
+    expect(btn.getAttribute('disabled')).not.toBeNull()
+    canvas.remove()
+  })
+
+  it('cleans up previous mount on re-render', () => {
+    const canvas = createCanvas()
+
+    renderToCanvas(
+      makeRenderContext({ storyFn: () => h('div', null, 'First') }),
+      canvas,
+    )
+    expect(canvas.textContent).toBe('First')
+
+    renderToCanvas(
+      makeRenderContext({ storyFn: () => h('div', null, 'Second') }),
+      canvas,
+    )
+    expect(canvas.textContent).toBe('Second')
+    // Only one child — previous mount was cleaned up
+    expect(canvas.children.length).toBe(1)
+    canvas.remove()
+  })
+
+  it('disposes reactive effects on cleanup', () => {
+    const canvas = createCanvas()
+    let effectRunCount = 0
+
+    const count = signal(0)
+    function Counter() {
+      effect(() => {
+        count()
+        effectRunCount++
+      })
+      return h('span', null, () => `${count()}`)
+    }
+
+    renderToCanvas(
+      makeRenderContext({ storyFn: () => h(Counter, null) }),
+      canvas,
+    )
+
+    const initialCount = effectRunCount
+    count.set(1)
+    expect(effectRunCount).toBe(initialCount + 1)
+
+    // Re-render with a different story — should dispose previous effects
+    renderToCanvas(
+      makeRenderContext({ storyFn: () => h('div', null, 'New story') }),
+      canvas,
+    )
+
+    const countAfterCleanup = effectRunCount
+    count.set(2)
+    count.set(3)
+    // Effect should NOT have run again — it was disposed
+    expect(effectRunCount).toBe(countAfterCleanup)
+    canvas.remove()
+  })
+
+  it('shows error when storyFn throws an Error', () => {
+    const canvas = createCanvas()
+    let errorShown: { title: string; description: string } | null = null
+
+    const ctx = {
+      storyFn: () => {
+        throw new Error('Boom')
+      },
+      storyContext: { args: {} },
+      showMain: () => {
+        /* noop */
+      },
+      showError: (err: { title: string; description: string }) => {
+        errorShown = err
+      },
+      forceRemount: false,
+    }
+
+    renderToCanvas(ctx, canvas)
+
+    expect(errorShown).not.toBeNull()
+    expect(errorShown!.description).toBe('Boom')
+    canvas.remove()
+  })
+
+  it('shows error when storyFn throws a non-Error value', () => {
+    const canvas = createCanvas()
+    let errorShown: { title: string; description: string } | null = null
+
+    const ctx = {
+      storyFn: () => {
+        throw 'string error'
+      },
+      storyContext: { args: {} },
+      showMain: () => {
+        /* noop */
+      },
+      showError: (err: { title: string; description: string }) => {
+        errorShown = err
+      },
+      forceRemount: false,
+    }
+
+    renderToCanvas(ctx, canvas)
+
+    expect(errorShown).not.toBeNull()
+    expect(errorShown!.description).toBe('string error')
+    canvas.remove()
+  })
+
+  it('renders reactive components that update the DOM', () => {
+    const canvas = createCanvas()
+    const count = signal(0)
+
+    function Counter() {
+      return h('span', { 'data-testid': 'count' }, () => `Count: ${count()}`)
+    }
+
+    renderToCanvas(
+      makeRenderContext({ storyFn: () => h(Counter, null) }),
+      canvas,
+    )
+
+    expect(canvas.textContent).toBe('Count: 0')
+
+    count.set(5)
+    expect(canvas.textContent).toBe('Count: 5')
+    canvas.remove()
+  })
+})
+
+// ─── defaultRender ───────────────────────────────────────────────────────────
+
+describe('defaultRender', () => {
+  it('creates a VNode from component + args', () => {
+    function Greeting(props: { name: string }) {
+      return h('p', null, `Hello, ${props.name}!`)
+    }
+
+    const canvas = createCanvas()
+    const vnode = defaultRender(Greeting, { name: 'World' })
+    const unmount = mount(vnode, canvas)
+
+    expect(canvas.textContent).toBe('Hello, World!')
+    unmount()
+    canvas.remove()
+  })
+})
+
+// ─── Type-level tests (Meta / StoryObj) ──────────────────────────────────────
+
+describe('Meta and StoryObj types', () => {
+  it('Meta accepts a component and typed args', () => {
+    function Button(props: {
+      label: string
+      variant?: 'primary' | 'secondary'
+    }) {
+      return h('button', { class: props.variant }, props.label)
+    }
+
+    const meta = {
+      component: Button,
+      title: 'Button',
+      args: { label: 'Click', variant: 'primary' as const },
+      tags: ['autodocs'],
+    } satisfies Meta<typeof Button>
+
+    expect(meta.component).toBe(Button)
+    expect(meta.args!.label).toBe('Click')
+  })
+
+  it('StoryObj inherits args from Meta', () => {
+    function Input(props: { placeholder: string; disabled?: boolean }) {
+      return h('input', {
+        placeholder: props.placeholder,
+        disabled: props.disabled,
+      })
+    }
+
+    const _meta = {
+      component: Input,
+      args: { placeholder: 'Type here' },
+    } satisfies Meta<typeof Input>
+
+    type Story = StoryObj<typeof _meta>
+
+    const primary: Story = {
+      args: { disabled: true },
+    }
+
+    expect(primary.args!.disabled).toBe(true)
+  })
+
+  it('StoryObj supports custom render function', () => {
+    function Card(props: { title: string }) {
+      return h('div', { class: 'card' }, h('h2', null, props.title))
+    }
+
+    const _meta = {
+      component: Card,
+      args: { title: 'Default' },
+    } satisfies Meta<typeof Card>
+
+    type Story = StoryObj<typeof _meta>
+
+    const withWrapper: Story = {
+      render: (args) => h('div', { class: 'wrapper' }, h(Card, args)),
+    }
+
+    const canvas = createCanvas()
+    const vnode = withWrapper.render!({ title: 'Custom' }, {} as any)
+    const unmount = mount(vnode, canvas)
+
+    expect(canvas.querySelector('.wrapper')).toBeTruthy()
+    expect(canvas.querySelector('.card')).toBeTruthy()
+    expect(canvas.textContent).toBe('Custom')
+    unmount()
+    canvas.remove()
+  })
+})
+
+// ─── Decorators ──────────────────────────────────────────────────────────────
+
+describe('Decorators', () => {
+  it('decorator wraps a story', () => {
+    function Button(props: { label: string }) {
+      return h('button', null, props.label)
+    }
+
+    const withPadding: DecoratorFn<{ label: string }> = (storyFn, context) => {
+      return h(
+        'div',
+        { style: 'padding: 1rem' },
+        storyFn(context.args, context),
+      )
+    }
+
+    const canvas = createCanvas()
+    const storyResult = withPadding((args) => h(Button, args), {
+      args: { label: 'Wrapped' },
+      argTypes: {},
+      globals: {},
+      id: '1',
+      kind: 'Button',
+      name: 'Primary',
+      viewMode: 'story',
+    })
+
+    const unmount = mount(storyResult, canvas)
+    expect(canvas.querySelector('div[style]')).toBeTruthy()
+    expect(canvas.querySelector('button')!.textContent).toBe('Wrapped')
+    unmount()
+    canvas.remove()
+  })
+
+  it('multiple decorators compose correctly', () => {
+    function Text(props: { content: string }) {
+      return h('span', null, props.content)
+    }
+
+    const withBorder: DecoratorFn<{ content: string }> = (storyFn, ctx) =>
+      h('div', { class: 'border' }, storyFn(ctx.args, ctx))
+
+    const withTheme: DecoratorFn<{ content: string }> = (storyFn, ctx) =>
+      h('div', { class: 'theme-dark' }, storyFn(ctx.args, ctx))
+
+    const context: StoryContext<{ content: string }> = {
+      args: { content: 'Hello' },
+      argTypes: {},
+      globals: {},
+      id: '1',
+      kind: 'Text',
+      name: 'Default',
+      viewMode: 'story',
+    }
+
+    // Compose: withTheme(withBorder(story))
+    const story: StoryFn<{ content: string }> = (args) => h(Text, args)
+    const decorated = withTheme((_args, ctx) => withBorder(story, ctx), context)
+
+    const canvas = createCanvas()
+    const unmount = mount(decorated, canvas)
+    expect(canvas.querySelector('.theme-dark')).toBeTruthy()
+    expect(canvas.querySelector('.border')).toBeTruthy()
+    expect(canvas.querySelector('span')!.textContent).toBe('Hello')
+    unmount()
+    canvas.remove()
+  })
+})
+
+// ─── Fragment and multiple children ──────────────────────────────────────────
+
+describe('Fragment stories', () => {
+  it('renders a story returning a Fragment', () => {
+    const canvas = createCanvas()
+    renderToCanvas(
+      makeRenderContext({
+        storyFn: () =>
+          h(Fragment, null, h('p', null, 'Line 1'), h('p', null, 'Line 2')),
+      }),
+      canvas,
+    )
+
+    const paragraphs = canvas.querySelectorAll('p')
+    expect(paragraphs.length).toBe(2)
+    expect(paragraphs[0]!.textContent).toBe('Line 1')
+    expect(paragraphs[1]!.textContent).toBe('Line 2')
+    canvas.remove()
+  })
+})
+
+// ─── Preview render function ─────────────────────────────────────────────────
+
+describe('preview render', () => {
+  it('renders a component with args', () => {
+    function Badge(props: { text: string }) {
+      return h('span', { class: 'badge' }, props.text)
+    }
+
+    const canvas = createCanvas()
+    const vnode = previewRender({ text: 'New' }, { component: Badge })
+    const unmount = mount(vnode, canvas)
+
+    expect(canvas.querySelector('.badge')!.textContent).toBe('New')
+    unmount()
+    canvas.remove()
+  })
+
+  it('throws when no component is provided', () => {
+    expect(() => previewRender({ foo: 'bar' }, {})).toThrow(
+      '[@pyreon/storybook] No component provided',
+    )
+  })
+
+  it('throws when component is undefined', () => {
+    expect(() =>
+      previewRender({ foo: 'bar' }, { component: undefined }),
+    ).toThrow('[@pyreon/storybook] No component provided')
+  })
+})

package/src/types.ts

@@ -0,0 +1,102 @@
+import type { ComponentFn, Props, VNodeChild } from '@pyreon/core'
+
+// ─── Storybook Renderer Interface ────────────────────────────────────────────
+
+/**
+ * The Pyreon renderer descriptor used by Storybook internally.
+ * This tells Storybook what our "component" and "storyResult" types are.
+ */
+export interface PyreonRenderer {
+  component: ComponentFn<any>
+  storyResult: VNodeChild
+  canvasElement: HTMLElement
+}
+
+// ─── Args & ArgTypes ─────────────────────────────────────────────────────────
+
+/** Extract props type from a Pyreon component function. */
+export type InferProps<T> = T extends ComponentFn<infer P> ? P : Props
+
+// ─── Decorator ───────────────────────────────────────────────────────────────
+
+export interface StoryContext<TArgs = Props> {
+  args: TArgs
+  argTypes: Record<string, unknown>
+  globals: Record<string, unknown>
+  id: string
+  kind: string
+  name: string
+  viewMode: 'story' | 'docs'
+}
+
+export type StoryFn<TArgs = Props> = (
+  args: TArgs,
+  context: StoryContext<TArgs>,
+) => VNodeChild
+
+export type DecoratorFn<TArgs = Props> = (
+  storyFn: StoryFn<TArgs>,
+  context: StoryContext<TArgs>,
+) => VNodeChild
+
+// ─── Meta ────────────────────────────────────────────────────────────────────
+
+export interface Meta<TComponent extends ComponentFn<any> = ComponentFn> {
+  /** The component to document. */
+  component?: TComponent
+  /** Display title in the sidebar. */
+  title?: string
+  /** Decorators applied to every story in this file. */
+  decorators?: DecoratorFn<InferProps<TComponent>>[]
+  /** Default args for all stories. */
+  args?: Partial<InferProps<TComponent>>
+  /** Arg type definitions for Controls panel. */
+  argTypes?: Record<string, unknown>
+  /** Story parameters (backgrounds, viewport, etc.). */
+  parameters?: Record<string, unknown>
+  /** Tags for filtering (e.g. "autodocs"). */
+  tags?: string[]
+  /**
+   * Default render function. If omitted, the component is called
+   * with args as props: `h(component, args)`.
+   */
+  render?: (
+    args: InferProps<TComponent>,
+    context: StoryContext<InferProps<TComponent>>,
+  ) => VNodeChild
+  /** Exclude arg names from Controls. */
+  excludeStories?: string | string[] | RegExp
+  /** Include only these story names. */
+  includeStories?: string | string[] | RegExp
+}
+
+// ─── StoryObj ────────────────────────────────────────────────────────────────
+
+export interface StoryObj<TMeta extends Meta<any> = Meta> {
+  /** Args for this specific story (merged with meta.args). */
+  args?: Partial<MetaArgs<TMeta>>
+  /** Arg type overrides. */
+  argTypes?: Record<string, unknown>
+  /** Decorators for this story only. */
+  decorators?: DecoratorFn<MetaArgs<TMeta>>[]
+  /** Parameters for this story. */
+  parameters?: Record<string, unknown>
+  /** Tags for this story. */
+  tags?: string[]
+  /** Override the render function for this story. */
+  render?: (
+    args: MetaArgs<TMeta>,
+    context: StoryContext<MetaArgs<TMeta>>,
+  ) => VNodeChild
+  /** Story name override. */
+  name?: string
+  /** Play function for interaction tests. */
+  play?: (context: {
+    canvasElement: HTMLElement
+    args: MetaArgs<TMeta>
+    step: (name: string, fn: () => Promise<void>) => Promise<void>
+  }) => Promise<void> | void
+}
+
+/** Extract the args type from a Meta definition. */
+type MetaArgs<TMeta> = TMeta extends Meta<infer C> ? InferProps<C> : Props