Initial commit: HMDesignSystem baseline

2026-10-08 16:58:09 +09:00
commit b6a0a61103
@@ -0,0 +1,67 @@
+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"]],
+          "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.startsWith("Theme/Runtime Contract")}>
+          <Story />
+          <Toaster />
+        </DesignerThemePreview>
+      )
+    },
+  ],
+}
+
+export default preview