shkim4
23d522c136
SW Viewer Header (approved optional props, public export names unchanged at 170): - SWViewerHeader: logoMenu, documents, activeDocumentId, onDocumentSelect, onDocumentOpen, documentOpenLabel; measured responsive toggles (full -> icons -> More) with the SWHeader More / file-list styling. - SW AI guides, ExampleH, viewer/text-weight/theme-inheritance tests and the logo-document-menu tests with their QA record. SW Storybook cleanup (Story IDs and test fixtures kept): - Sidebar: Overview -> "SW Header" (first), 전체 Footer -> "SW Footer", Footer/Viewer responsive pages -> "Responsive More", Viewer content-variants -> "Settings Popup" (merges the settings popup page). - Hidden by the verification tag (direct URL kept): Header Dropdown, Document Open, Interactive States, Document Dropdown, Hidden Sub Controls, Home Menu standalone; Footer tool groups / custom content / parts; SW/Theme; Viewer menu groups / item states / variable size / settings panel / Header + Dropdown. - Removed demo UI: Overview size and callback output (demo data and selection only with &verification), Home Menu Figma node table and width demo, Header Responsive More reduced to 1440 / 768 / 390, Popup reopen button, property-panel comparison captions, Viewer context-menu demo (&verification only). - Tests: storybook-inventory records the hidden and renamed Stories; overview / range-cross-browser / viewer open the demo controls with &verification; integrated-popup reloads the Story instead of the reopen button; dropdown-consolidation asserts Dropdown is hidden from the sidebar and still opens by its direct URL.
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", "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
|