Files
HMDesign/src/center/center-title.stories.tsx
T
shkim4 4c29894e56 refactor(storybook): simplify component and preview examples
Drop page / section descriptions, state notes and repeated captions from
the representative Stories of 44 components, the Patterns, Center
Graphic and OrgChart pages. Value readouts, spec lists and captions hide
only on the representative page; hidden verification Stories keep them.
Tabs Default API and the Filter Bar draft / applied counts move to the
hidden DefaultApi and DraftApplied Stories; Center Overview is hidden
with its direct URL kept. Story IDs are unchanged.

Align the component, pattern and OrgChart docs with the pages, point the
quality reference check at the DraftApplied Story, and make the P8
styles check expect no section header on the preview-only Expanded page.
2026-10-23 00:28:05 +09:00

43 lines
1.9 KiB
TypeScript

import type { Meta, StoryObj } from "@storybook/react-vite"
import { CenterTitle, CENTER_TITLE_COMPOSITIONS, type CenterTitleComposition } from "@hm-design/center-graphic"
import { CenterTitleReferenceDemo } from "@hm-design/center-graphic/reference"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
import { withRepresentation } from "./center-shared"
// Owner: ui-viz docs/components/center-title.md. Title Resolution B numeric output is TBD; the per-Type palette is SCOPED_DESIGN_APPROVAL.
const meta = {
title: "Center Graphic/Title",
component: CenterTitle,
parameters: { layout: "padded" },
} satisfies Meta<typeof CenterTitle>
export default meta
type Story = StoryObj<typeof meta>
// Representative Story: the four title types. Named after the area so Storybook shows it as a single sidebar item.
// Common Story page. The CENTER representation wraps only the specimen, so the page title is never scaled with the graphic.
export const Compositions: Story = {
name: "Title",
parameters: { layout: "fullscreen", controls: { disable: true } },
render: () => (
<StoryPage>
<StoryPageHeader title="Title" />
<StorySection title="Overview">
{withRepresentation(() => <CenterTitleReferenceDemo />)}
</StorySection>
</StoryPage>
),
}
export const Playground: Story = {
tags: ["verification"],
decorators: [withRepresentation],
args: { composition: "routeProjectNameRoute", context: "서산영덕선", projectName: "대산~당진 건설공사", routeClassification: "고속국도 제30호", projectRoute: "L=25.36km" },
argTypes: {
composition: {
control: { type: "select", labels: Object.fromEntries(Object.entries(CENTER_TITLE_COMPOSITIONS).map(([key, { type, label }]) => [key, `${type} · ${label}`])) },
options: Object.keys(CENTER_TITLE_COMPOSITIONS) as CenterTitleComposition[],
},
},
render: (args) => <CenterTitle {...args} />,
}