70 lines
2.7 KiB
TypeScript
70 lines
2.7 KiB
TypeScript
import type { Preview } from "@storybook/react-vite"
|
|
import { MINIMAL_VIEWPORTS } from "storybook/viewport"
|
|
import { Toaster } from "@hm-design/ui"
|
|
import { ensurePseudoStates } from "./pseudo-states"
|
|
import { DesignerThemePreview } from "../src/theme/designer-preview"
|
|
import "../src/index.css"
|
|
import "../src/hm-theme.css"
|
|
|
|
const preview: Preview = {
|
|
parameters: {
|
|
layout: "centered",
|
|
viewport: {
|
|
options: {
|
|
// HM QA presets come first; keep Storybook's built-in choices available.
|
|
hmDesktop1280: { name: "HM Desktop · 1280", styles: { width: "1280px", height: "900px" }, type: "desktop" },
|
|
hmDesktop1024: { name: "HM Desktop Boundary · 1024", styles: { width: "1024px", height: "900px" }, type: "desktop" },
|
|
hmMobile1023: { name: "HM Mobile Boundary · 1023", styles: { width: "1023px", height: "900px" }, type: "mobile" },
|
|
hmMobile390: { name: "HM Mobile · 390", styles: { width: "390px", height: "844px" }, type: "mobile" },
|
|
...MINIMAL_VIEWPORTS,
|
|
},
|
|
},
|
|
options: {
|
|
storySort: {
|
|
order: [
|
|
"Foundation",
|
|
["Color", "Typography", "Layout"],
|
|
"Components",
|
|
[
|
|
"Form",
|
|
["Button", "Input", "Textarea", "Select", "Checkbox", "Radio Group", "Switch", "Slider", "Toggle", "Toggle Group", "Label"],
|
|
"Navigation",
|
|
["Tabs", "Breadcrumb", "Pagination", "Navigation Menu", "Menubar"],
|
|
"Overlay",
|
|
["Dialog", "Alert Dialog", "Sheet", "Drawer", "Dropdown Menu", "Context Menu", "Popover", "Tooltip", "Hover Card"],
|
|
"Data & Display",
|
|
["Card", "Table", "Badge", "Avatar", "Progress", "Skeleton", "Separator", "Aspect Ratio", "Carousel", "Scroll Area"],
|
|
"Disclosure",
|
|
["Accordion", "Collapsible", "Resizable"],
|
|
"Search & Date",
|
|
["Command", "Combobox", "Calendar", "Date Picker"],
|
|
"Feedback",
|
|
["Alert", "Sonner"],
|
|
],
|
|
"Patterns",
|
|
["Data", ["Data Table", "Filter Bar"], "Layout", ["GNB", "LNB", "Dashboard Layout", "Loading Screen"]],
|
|
"OrgChart",
|
|
["Overview", "Department Colors", "Full Composition", "Expanded OrgChart"],
|
|
"Center Graphic",
|
|
"*",
|
|
],
|
|
},
|
|
},
|
|
},
|
|
decorators: [
|
|
(Story, context) => {
|
|
// Lets state Stories pin hover / pressed with data-sb-hover / data-sb-active.
|
|
ensurePseudoStates()
|
|
// One Toaster for every Story, the same way an app mounts it once at its root.
|
|
return (
|
|
<DesignerThemePreview enabled={context.title === "Theme/Designer Playground"}>
|
|
<Story />
|
|
<Toaster />
|
|
</DesignerThemePreview>
|
|
)
|
|
},
|
|
],
|
|
}
|
|
|
|
export default preview
|