75 lines
2.2 KiB
TypeScript
75 lines
2.2 KiB
TypeScript
import type { Preview } from '@storybook/vue3-vite'
|
|
import { useGlobals } from 'storybook/preview-api'
|
|
import '@nychthemeron/library/style'
|
|
|
|
const preview: Preview = {
|
|
parameters: {
|
|
layout: 'centered',
|
|
toolbar: {
|
|
theme: {
|
|
items: [
|
|
{ value: 'hades', title: 'Dark (Hades)', left: '🌙' },
|
|
{ value: 'apollo', title: 'Light (Apollo)', left: '☀️' },
|
|
],
|
|
dynamicTitle: true,
|
|
},
|
|
},
|
|
// Match Storybook's built-in backgrounds addon (used by the Docs page's
|
|
// embedded canvas) to the same surface-0 colors as our hades/apollo
|
|
// theme, instead of its generic white/black defaults.
|
|
backgrounds: {
|
|
options: {
|
|
dark: { name: 'dark', value: '#18160f' },
|
|
light: { name: 'light', value: '#faf7f2' },
|
|
},
|
|
},
|
|
docs: {
|
|
description: {
|
|
component: 'Component documentation',
|
|
},
|
|
},
|
|
},
|
|
initialGlobals: {
|
|
backgrounds: { value: 'dark' },
|
|
},
|
|
decorators: [
|
|
(story, context) => {
|
|
const theme = context.globals.theme || 'hades'
|
|
|
|
// Set eagerly (not inside setup()) since Storybook doesn't remount the
|
|
// story tree on a globals-only change, so setup() wouldn't rerun.
|
|
document.documentElement.setAttribute('data-theme', theme)
|
|
|
|
// Keep the built-in backgrounds addon (used by the Docs page's
|
|
// embedded canvas) in lockstep with the theme toggle, so switching
|
|
// Hades/Apollo also switches which background swatch is active.
|
|
const [globals, updateGlobals] = useGlobals()
|
|
const wantedBackground = theme === 'apollo' ? 'light' : 'dark'
|
|
if (globals.backgrounds?.value !== wantedBackground) {
|
|
updateGlobals({ backgrounds: { value: wantedBackground } })
|
|
}
|
|
|
|
return {
|
|
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
|