@molecule/app-ui-showcase

Component showcase specifications for cross-framework visual regression testing.

Provides framework-agnostic data describing which components to render and which prop combinations to test. Used by showcase templates in mlcl to generate minimal apps per framework, then screenshotted by Playwright.

Auto-generated, AI-first package reference for the molecule.dev ecosystem. It is written to be read by coding agents as much as by people, and is generated from this package's source — edit src/index.ts JSDoc, not this file.

Quick Start

import { generateCombinations, showcaseComponents } from '@molecule/app-ui-showcase'

const spec = showcaseComponents[0] // e.g. Button — variant × color × size
const variants = generateCombinations(spec.propMatrix)
// a showcase app maps spec.name to the framework's UI export and renders
// one instance per variant, applying spec.defaultProps + spec.children

Type

core

Installation

npm install @molecule/app-ui-showcase @molecule/app-ui

API

Interfaces

ComponentShowcase

Specification for showcasing a single component across all its visual variations.

The propMatrix defines axes of variation — every combination is rendered. defaultProps supplies required or baseline props applied to every variation. children provides text content (set to false for components with no children).

interface ComponentShowcase {
  /**
   * Component export name (must match the named export from `@molecule/app-ui-{framework}`).
   * For Svelte, maps to the `get{Name}Classes` utility function.
   */
  name: string

  /**
   * Props to vary across the matrix. Each key is a prop name, each value is
   * the array of values to test. All combinations are generated.
   *
   * Example: `{ variant: ['solid', 'outline'], color: ['primary', 'error'] }`
   * produces 4 combinations.
   */
  propMatrix: Record<string, unknown[]>

  /**
   * Props applied to every variation (e.g., required props, sample data).
   */
  defaultProps?: Record<string, unknown>

  /**
   * Text content to render as children. Set to `false` for components that
   * don't accept children (e.g., Spinner, Separator).
   */
  children?: string | false

  /**
   * The HTML element to render for Svelte class-utility components.
   * Defaults to 'div'. Use 'button' for Button, 'input' for Input, etc.
   */
  svelteElement?: string
}

Functions

generateCombinations(matrix)

Generate all combinations from a prop matrix.

Given { variant: ['solid', 'outline'], color: ['primary', 'error'] }, returns:

[
  { variant: 'solid', color: 'primary' },
  { variant: 'solid', color: 'error' },
  { variant: 'outline', color: 'primary' },
  { variant: 'outline', color: 'error' },
]

function generateCombinations(matrix: Record<string, unknown[]>): Record<string, unknown>[]

• matrix — Object mapping prop names to arrays of possible values.

Returns: Array of objects, one per combination.

Constants

showcaseComponents

Full showcase specification for all molecule UI components.

Components are ordered by category: actions, form inputs, data display, feedback, layout, and overlay/interactive.

const showcaseComponents: ComponentShowcase[]

Injection Notes

Requirements

Peer dependencies:

• @molecule/app-ui ^1.0.1

Runtime Dependencies

• @molecule/app-ui