@emeryld/ui-preview

Preview helpers for React UI component libraries:

• ComponentPreview
• UIPreview
• definePreview
• demoCubes
• demoKeyValuePairs
• noop

Includes a generator script that scans exported React components and generates a preview config.

Install

pnpm add @emeryld/ui-preview @emeryld/ui
# or
npm i @emeryld/ui-preview @emeryld/ui

Peer requirements:

• react@^19
• react-dom@^19

Runtime Usage

import { UIPreview } from '@emeryld/ui-preview'
import { previewConfig } from './components.preview-config'

export function ComponentsPage() {
  return <UIPreview config={previewConfig} />
}

Generator Script

Modes:

• list mode (default): print discovered exported React components
• generate mode: write preview config file

CLI:

pnpm exec tsx ./node_modules/@emeryld/ui-preview/scripts/preview-gen-script.ts [--generate|-g] [target-folder] [--output|-o <output-path>]
# or
npm exec tsx ./node_modules/@emeryld/ui-preview/scripts/preview-gen-script.ts -- [--generate|-g] [target-folder] [--output|-o <output-path>]

Examples:

# 1) List exported components
pnpm exec tsx ./node_modules/@emeryld/ui-preview/scripts/preview-gen-script.ts src/components

# 2) Generate in target folder (default output path)
pnpm exec tsx ./node_modules/@emeryld/ui-preview/scripts/preview-gen-script.ts --generate src/components

# 3) Generate with custom output file
pnpm exec tsx ./node_modules/@emeryld/ui-preview/scripts/preview-gen-script.ts --generate src/components --output preview/my.preview-config.tsx

# 4) Use default target folder (components/ui)
pnpm exec tsx ./node_modules/@emeryld/ui-preview/scripts/preview-gen-script.ts --generate

Generator Output

Default output:

• <target-folder>/components.preview-config.tsx

Optional override:

• --output / -o to set a custom output path
• relative output paths are resolved from the target folder
• absolute output paths are used as-is

Generated file imports:

• definePreview, PreviewProps, demoCubes, demoKeyValuePairs, noop from @emeryld/ui-preview
• * as UI from the target folder index.ts (relative import)

Notes

• Published packages should not use workspace: dependency specifiers.
• Ensure TypeScript can resolve your component files from your project root (tsconfig.json).