75 lines
2.3 KiB
TypeScript
75 lines
2.3 KiB
TypeScript
import addonA11y from "@storybook/addon-a11y";
|
|
import addonDocs from "@storybook/addon-docs";
|
|
import { definePreview } from "storybook-solidjs-vite";
|
|
|
|
import "../stories/tailwind.css";
|
|
import "../stories/storybook-theme.css";
|
|
import "@fortawesome/fontawesome-free/css/all.min.css";
|
|
import "balloon-css/balloon.min.css";
|
|
//@ts-expect-error this works i think
|
|
import "slim-select/styles";
|
|
|
|
import { ThemesList } from "../../src/ts/constants/themes";
|
|
import { ThemeDecorator } from "./ThemeDecorator";
|
|
|
|
const tailwindViewports = {
|
|
xxs: { name: "xxs (331px)", styles: { width: "331px", height: "900px" } },
|
|
xs: { name: "xs (426px)", styles: { width: "426px", height: "900px" } },
|
|
sm: { name: "sm (640px)", styles: { width: "640px", height: "900px" } },
|
|
md: { name: "md (768px)", styles: { width: "768px", height: "900px" } },
|
|
lg: { name: "lg (1024px)", styles: { width: "1024px", height: "900px" } },
|
|
xl: { name: "xl (1280px)", styles: { width: "1280px", height: "900px" } },
|
|
"2xl": {
|
|
name: "2xl (1536px)",
|
|
styles: { width: "1536px", height: "900px" },
|
|
},
|
|
};
|
|
|
|
export default definePreview({
|
|
addons: [addonDocs(), addonA11y()],
|
|
globalTypes: {
|
|
theme: {
|
|
description: "Global theme for components",
|
|
toolbar: {
|
|
title: "Theme",
|
|
icon: "paintbrush",
|
|
items: ThemesList.sort((a, b) => a.name.localeCompare(b.name)).map(
|
|
(t) => ({
|
|
value: t.name,
|
|
title: t.name.replace(/_/g, " "),
|
|
}),
|
|
),
|
|
dynamicTitle: true,
|
|
},
|
|
},
|
|
},
|
|
initialGlobals: {
|
|
theme: "serika_dark",
|
|
},
|
|
decorators: [ThemeDecorator],
|
|
parameters: {
|
|
layout: "centered",
|
|
// automatically create action args for all props that start with 'on'
|
|
actions: {
|
|
argTypesRegex: "^on.*",
|
|
},
|
|
controls: {
|
|
matchers: {
|
|
color: /(background|color)$/i,
|
|
date: /Date$/i,
|
|
},
|
|
},
|
|
viewport: {
|
|
options: tailwindViewports,
|
|
},
|
|
a11y: {
|
|
// 'todo' - show a11y violations in the test UI only
|
|
// 'error' - fail CI on a11y violations
|
|
// 'off' - skip a11y checks entirely
|
|
test: "todo",
|
|
},
|
|
},
|
|
// All components will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
|
|
// tags: ['autodocs'],
|
|
});
|