|
| 1 | +import type { Decorator, Preview } from '@storybook/react-vite' |
| 2 | +import { createElement } from 'react' |
| 3 | + |
| 4 | +// Import icon font override for Storybook |
| 5 | +import './icon-font-override.scss' |
| 6 | +// Import docs page spacing overrides |
| 7 | +import './docs-spacing.scss' |
| 8 | + |
| 9 | +// Import pre-built flavor CSS files |
| 10 | +import './flavors/pepper.css' |
| 11 | +import './flavors/minne.css' |
| 12 | +import './flavors/apollo.css' |
| 13 | +import './flavors/nachiguro.css' |
| 14 | +import './flavors/flippers.css' |
| 15 | +import './flavors/kung-pu.css' |
| 16 | +import './flavors/lolipop.css' |
| 17 | + |
| 18 | +const flavorDecorator: Decorator = (Story, context) => { |
| 19 | + const flavor = (context.globals.flavor as string) ?? 'pepper' |
| 20 | + return createElement( |
| 21 | + 'div', |
| 22 | + { 'data-flavor': flavor, style: { display: 'contents' } }, |
| 23 | + createElement(Story) |
| 24 | + ) |
| 25 | +} |
| 26 | + |
| 27 | +const preview: Preview = { |
| 28 | + globalTypes: { |
| 29 | + flavor: { |
| 30 | + description: 'Design token flavor / theme', |
| 31 | + toolbar: { |
| 32 | + title: 'Flavor', |
| 33 | + icon: 'paintbrush', |
| 34 | + items: [ |
| 35 | + { value: 'pepper', title: 'Pepper' }, |
| 36 | + { value: 'minne', title: 'Minne' }, |
| 37 | + { value: 'apollo', title: 'Apollo' }, |
| 38 | + { value: 'nachiguro', title: 'Nachiguro' }, |
| 39 | + { value: 'flippers', title: 'Flippers' }, |
| 40 | + { value: 'kung-pu', title: 'Kung-pu' }, |
| 41 | + { value: 'lolipop', title: 'Lolipop' }, |
| 42 | + ], |
| 43 | + dynamicTitle: true, |
| 44 | + }, |
| 45 | + }, |
| 46 | + }, |
| 47 | + initialGlobals: { |
| 48 | + flavor: 'pepper', |
| 49 | + }, |
| 50 | + decorators: [flavorDecorator], |
| 51 | + parameters: { |
| 52 | + options: { |
| 53 | + storySort: { |
| 54 | + order: [ |
| 55 | + 'Introduction', |
| 56 | + ['Overview', 'Getting Started', 'FlavorProvider', 'Changelog'], |
| 57 | + 'Foundations', |
| 58 | + ['Colors', 'Typography', 'Spacing', 'Elevation', 'Breakpoints', 'Icons'], |
| 59 | + 'Components', |
| 60 | + [ |
| 61 | + 'Layout', |
| 62 | + 'Actions', |
| 63 | + 'Forms', |
| 64 | + 'Data Display', |
| 65 | + 'Surfaces', |
| 66 | + 'Feedback', |
| 67 | + 'Navigation', |
| 68 | + ], |
| 69 | + ], |
| 70 | + }, |
| 71 | + }, |
| 72 | + controls: { |
| 73 | + matchers: { |
| 74 | + color: /(background|color)$/i, |
| 75 | + date: /Date$/i, |
| 76 | + }, |
| 77 | + }, |
| 78 | + }, |
| 79 | +} |
| 80 | + |
| 81 | +export default preview |
0 commit comments