81 lines
1.8 KiB
TypeScript
81 lines
1.8 KiB
TypeScript
import "../src/preview.css";
|
|
|
|
import type { Preview } from "@storybook/react";
|
|
import { defaultSkin, setSkin } from "@ai-ui/ui";
|
|
import {
|
|
defaultMotionMode,
|
|
defaultTheme,
|
|
motionModeDetails,
|
|
motionModeNames,
|
|
setMotionMode,
|
|
setTheme,
|
|
themeDetails,
|
|
themeNames
|
|
} from "@ai-ui/tokens";
|
|
|
|
const preview: Preview = {
|
|
globalTypes: {
|
|
theme: {
|
|
description: "Preview dynamic seed preset",
|
|
toolbar: {
|
|
icon: "paintbrush",
|
|
dynamicTitle: true,
|
|
items: themeNames.map((themeName) => ({
|
|
value: themeName,
|
|
title: themeDetails[themeName].label
|
|
}))
|
|
}
|
|
},
|
|
motionMode: {
|
|
description: "Preview motion baseline",
|
|
toolbar: {
|
|
icon: "contrast",
|
|
dynamicTitle: true,
|
|
items: motionModeNames.map((modeName) => ({
|
|
value: modeName,
|
|
title: motionModeDetails[modeName].label
|
|
}))
|
|
}
|
|
}
|
|
},
|
|
initialGlobals: {
|
|
motionMode: defaultMotionMode,
|
|
theme: defaultTheme
|
|
},
|
|
parameters: {
|
|
a11y: {
|
|
test: "error"
|
|
},
|
|
backgrounds: {
|
|
default: "canvas",
|
|
values: [
|
|
{
|
|
name: "canvas",
|
|
value: "var(--color-background)"
|
|
}
|
|
]
|
|
},
|
|
controls: {
|
|
expanded: true
|
|
},
|
|
layout: "fullscreen"
|
|
},
|
|
decorators: [
|
|
(Story, context) => {
|
|
if (typeof document !== "undefined") {
|
|
setTheme(context.globals.theme ?? defaultTheme);
|
|
setMotionMode(context.globals.motionMode ?? defaultMotionMode);
|
|
setSkin(defaultSkin);
|
|
|
|
document.body.dataset.theme = context.globals.theme ?? defaultTheme;
|
|
document.body.dataset.motion = context.globals.motionMode ?? defaultMotionMode;
|
|
document.body.dataset.skin = defaultSkin;
|
|
}
|
|
|
|
return Story();
|
|
}
|
|
]
|
|
};
|
|
|
|
export default preview;
|