Matthew L McPeak
eff75b615b
Reviewed-on: McPeakDev/nychthemeron#3 Co-authored-by: Matthew L McPeak <m.mcpeak98@icloud.com> Co-committed-by: Matthew L McPeak <m.mcpeak98@icloud.com>
52 lines
1.2 KiB
TypeScript
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
|