shkim4
51e8ab8c42
Add Foundation > Company Colors as a separate Storybook menu placed right after Color. It shows the 7 affiliates and 14 colors from the existing companyColorPresets (main first, then secondary) with the Color chip styles and the Default emphasis reused for the main color. Theme tokens, public API and the existing Color story are unchanged. - Foundation sort order: Color, Company Colors, Typography, Layout - Company chip width rule scoped to the company rows - Document the menu in brand-color-steps.md - Add the new story to the Story Inventory records
77 lines
3.2 KiB
TypeScript
77 lines
3.2 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: {
|
|
// Story names sort only where the order names them (SW Header first); other Stories keep file order.
|
|
includeNames: true,
|
|
order: [
|
|
"Foundation",
|
|
["Color", "Company Colors", "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",
|
|
"SW",
|
|
["Header", ["SW Header", "*"], "Footer", ["SW Footer", "*"], "Popup", "Viewer", "Theme"],
|
|
"*",
|
|
// With includeNames, keeps the Loader group after the Runtime Contract Stories (its place without names).
|
|
"Theme",
|
|
["*", "Runtime Contract", ["*", "Loader"]],
|
|
],
|
|
},
|
|
},
|
|
},
|
|
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
|