208 lines
6.5 KiB
TypeScript
208 lines
6.5 KiB
TypeScript
import type { Preview } from '@storybook/svelte-vite';
|
|
import Decorator from './Decorator.svelte';
|
|
import StoryStage from './StoryStage.svelte';
|
|
import ThemeDecorator from './ThemeDecorator.svelte';
|
|
import '../src/app/styles/app.css';
|
|
|
|
const preview: Preview = {
|
|
globalTypes: {
|
|
viewport: {
|
|
description: 'Viewport size for responsive design',
|
|
defaultValue: 'widgetWide',
|
|
toolbar: {
|
|
icon: 'view',
|
|
items: [
|
|
{
|
|
value: 'reset',
|
|
icon: 'refresh',
|
|
title: 'Reset viewport',
|
|
},
|
|
{
|
|
value: 'mobile1',
|
|
icon: 'mobile',
|
|
title: 'iPhone 5/SE',
|
|
},
|
|
{
|
|
value: 'mobile2',
|
|
icon: 'mobile',
|
|
title: 'iPhone 14 Pro Max',
|
|
},
|
|
{
|
|
value: 'tablet',
|
|
icon: 'tablet',
|
|
title: 'iPad (Portrait)',
|
|
},
|
|
{
|
|
value: 'desktop',
|
|
icon: 'desktop',
|
|
title: 'Desktop (Small)',
|
|
},
|
|
{
|
|
value: 'widgetMedium',
|
|
icon: 'view',
|
|
title: 'Widget Medium',
|
|
},
|
|
{
|
|
value: 'widgetWide',
|
|
icon: 'view',
|
|
title: 'Widget Wide',
|
|
},
|
|
{
|
|
value: 'widgetExtraWide',
|
|
icon: 'view',
|
|
title: 'Widget Extra Wide',
|
|
},
|
|
{
|
|
value: 'fullWidth',
|
|
icon: 'view',
|
|
title: 'Full Width',
|
|
},
|
|
{
|
|
value: 'fullScreen',
|
|
icon: 'expand',
|
|
title: 'Full Screen',
|
|
},
|
|
],
|
|
dynamicTitle: true,
|
|
},
|
|
},
|
|
},
|
|
parameters: {
|
|
layout: 'padded',
|
|
controls: {
|
|
matchers: {
|
|
color: /(background|color)$/i,
|
|
date: /Date$/i,
|
|
},
|
|
},
|
|
|
|
a11y: {
|
|
// 'todo' - show a11y violations in the test UI only
|
|
// 'error' - fail CI on a11y violations
|
|
// 'off' - skip a11y checks entirely
|
|
test: 'todo',
|
|
},
|
|
|
|
docs: {
|
|
story: {
|
|
// This sets the default height for the iframe in Autodocs
|
|
iframeHeight: '600px',
|
|
},
|
|
},
|
|
|
|
viewport: {
|
|
viewports: {
|
|
// Mobile devices
|
|
mobile1: {
|
|
name: 'iPhone 5/SE',
|
|
styles: {
|
|
width: '320px',
|
|
height: '568px',
|
|
},
|
|
},
|
|
mobile2: {
|
|
name: 'iPhone 14 Pro Max',
|
|
styles: {
|
|
width: '414px',
|
|
height: '896px',
|
|
},
|
|
},
|
|
// Tablet
|
|
tablet: {
|
|
name: 'iPad (Portrait)',
|
|
styles: {
|
|
width: '834px',
|
|
height: '1112px',
|
|
},
|
|
},
|
|
desktop: {
|
|
name: 'Desktop (Small)',
|
|
styles: {
|
|
width: '1024px',
|
|
height: '1280px',
|
|
},
|
|
},
|
|
// Widget-specific viewports
|
|
widgetMedium: {
|
|
name: 'Widget Medium',
|
|
styles: {
|
|
width: '768px',
|
|
height: '800px',
|
|
},
|
|
},
|
|
widgetWide: {
|
|
name: 'Widget Wide',
|
|
styles: {
|
|
width: '1024px',
|
|
height: '800px',
|
|
},
|
|
},
|
|
widgetExtraWide: {
|
|
name: 'Widget Extra Wide',
|
|
styles: {
|
|
width: '1280px',
|
|
height: '800px',
|
|
},
|
|
},
|
|
// Full-width viewports
|
|
fullWidth: {
|
|
name: 'Full Width',
|
|
styles: {
|
|
width: '100%',
|
|
height: '800px',
|
|
},
|
|
},
|
|
fullScreen: {
|
|
name: 'Full Screen',
|
|
styles: {
|
|
width: '100%',
|
|
height: '100%',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
|
|
head: `
|
|
<link rel="preconnect" href="https://api.fontshare.com" />
|
|
<link rel="preconnect" href="https://cdn.fontshare.com" crossorigin="anonymous" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;1,100;1,200&family=Karla:wght@200..800&family=Major+Mono+Display&display=swap"
|
|
/>
|
|
<style>
|
|
body {
|
|
font-family: "Karla", system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial, sans-serif;
|
|
}
|
|
</style>
|
|
`,
|
|
},
|
|
|
|
decorators: [
|
|
// Outermost: initialize ThemeManager for all stories
|
|
story => ({
|
|
Component: ThemeDecorator,
|
|
props: {
|
|
children: story(),
|
|
},
|
|
}),
|
|
// Wrap with providers (TooltipProvider, ResponsiveManager)
|
|
story => ({
|
|
Component: Decorator,
|
|
props: {
|
|
children: story(),
|
|
},
|
|
}),
|
|
// Wrap with StoryStage for presentation styling
|
|
story => ({
|
|
Component: StoryStage,
|
|
props: {
|
|
children: story(),
|
|
},
|
|
}),
|
|
],
|
|
};
|
|
|
|
export default preview;
|