116 lines
2.7 KiB
TypeScript
116 lines
2.7 KiB
TypeScript
import "../src/preview.css";
|
|
|
|
import type { Preview } from "@storybook/react";
|
|
import {
|
|
defaultSkin,
|
|
setSkin,
|
|
skinDetails,
|
|
skinNames
|
|
} from "@ai-ui/ui";
|
|
import {
|
|
defaultMotionAccessibility,
|
|
defaultMotionPack,
|
|
defaultTheme,
|
|
motionAccessibilityDetails,
|
|
motionAccessibilityNames,
|
|
motionPackDetails,
|
|
motionPackNames,
|
|
setMotionAccessibility,
|
|
setMotionPack,
|
|
setTheme,
|
|
themeDetails,
|
|
themeNames
|
|
} from "@ai-ui/tokens";
|
|
|
|
const preview: Preview = {
|
|
globalTypes: {
|
|
theme: {
|
|
description: "Preview theme",
|
|
toolbar: {
|
|
icon: "paintbrush",
|
|
dynamicTitle: true,
|
|
items: themeNames.map((themeName) => ({
|
|
value: themeName,
|
|
title: themeDetails[themeName].label
|
|
}))
|
|
}
|
|
},
|
|
motionPack: {
|
|
description: "Preview motion pack",
|
|
toolbar: {
|
|
icon: "transfer",
|
|
dynamicTitle: true,
|
|
items: motionPackNames.map((packName) => ({
|
|
value: packName,
|
|
title: motionPackDetails[packName].label
|
|
}))
|
|
}
|
|
},
|
|
motionAccessibility: {
|
|
description: "Preview motion accessibility override",
|
|
toolbar: {
|
|
icon: "accessibility",
|
|
dynamicTitle: true,
|
|
items: motionAccessibilityNames.map((modeName) => ({
|
|
value: modeName,
|
|
title: motionAccessibilityDetails[modeName].label
|
|
}))
|
|
}
|
|
},
|
|
skin: {
|
|
description: "Preview component skin",
|
|
toolbar: {
|
|
icon: "mirror",
|
|
dynamicTitle: true,
|
|
items: skinNames.map((skinName) => ({
|
|
value: skinName,
|
|
title: skinDetails[skinName].label
|
|
}))
|
|
}
|
|
}
|
|
},
|
|
initialGlobals: {
|
|
motionAccessibility: defaultMotionAccessibility,
|
|
motionPack: defaultMotionPack,
|
|
skin: defaultSkin,
|
|
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);
|
|
setMotionPack(context.globals.motionPack ?? defaultMotionPack);
|
|
setMotionAccessibility(
|
|
context.globals.motionAccessibility ?? defaultMotionAccessibility
|
|
);
|
|
setSkin(context.globals.skin ?? defaultSkin);
|
|
|
|
document.body.dataset.theme = context.globals.theme ?? defaultTheme;
|
|
document.body.dataset.skin = context.globals.skin ?? defaultSkin;
|
|
}
|
|
|
|
return Story();
|
|
}
|
|
]
|
|
};
|
|
|
|
export default preview;
|