Nychthemeron/packages/playground/.storybook/preview.ts
Matthew L McPeak ff02f7ec72 chore: remove PrimeVue and the ThemeEngine, migration complete
- Delete packages/library/src/engine/ and engine.spec.ts; LoadingIcon is
  now exported directly instead of routed through a generic theming engine.
- Remove primevue from every package.json (root devDependencies, library
  peerDependencies, playground dependencies) and from vite.config.ts's
  externalized/global Rollup config; add reka-ui as the library's peer dep.
- Delete the hand-written nychthemeron.css/theme.css, now fully superseded
  by the Tailwind entry CSS; both library exports (./style, ./theme) point
  at it.
- Drop the PrimeVue plugin install from Storybook's preview.ts.
- Add a `@source "../../";` directive to tailwind.css: Tailwind's automatic
  content detection is scoped to whichever Vite project runs it, so when
  the playground consumes this CSS file it never scanned the sibling
  packages/library/src tree for class usage -- every component rendered
  with zero utility classes applied until this was added (verified via the
  compiled Storybook CSS output going from ~2KB/no .bg-primary rule to
  ~40KB with the full utility set, and the pre-fix screenshot that
  surfaced it: buttons and other components with a real background color
  showing as bare, near-invisible text on white).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-11 15:07:59 -04:00

52 lines
1.2 KiB
TypeScript

import type { Preview } from '@storybook/vue3-vite'
import '@nychthemeron/library/theme'
const preview: Preview = {
parameters: {
layout: 'centered',
toolbar: {
theme: {
items: [
{ value: 'hades', title: 'Dark (Hades)', left: '🌙' },
{ value: 'apollo', title: 'Light (Apollo)', left: '☀️' },
],
dynamicTitle: true,
},
},
docs: {
description: {
component: 'Component documentation',
},
},
},
decorators: [
(story, context) => {
const theme = context.globals.theme || 'hades'
return {
setup() {
document.documentElement.setAttribute('data-theme', theme)
},
components: { story },
template: '<story />',
}
},
],
globalTypes: {
theme: {
name: 'Theme',
description: 'Global theme for all components',
defaultValue: 'hades',
toolbar: {
icon: 'paintbrush',
items: [
{ value: 'hades', title: 'Dark (Hades)' },
{ value: 'apollo', title: 'Light (Apollo)' },
],
dynamicTitle: true,
},
},
},
}
export default preview