shkim4
0f1574f80f
- OrgChart -> 조직도 and sub menus (개요, 부서별 색상, 전체 구성, 확장 조직도); Story IDs kept - 노선도 menu/page titles in Korean (제목, 정보, 노선·공간, 시설물) - Department Colors cards 3 columns (2 under 960px)
68 lines
2.9 KiB
TypeScript
68 lines
2.9 KiB
TypeScript
import type { ComponentType } from "react"
|
|
import type { Meta, StoryObj } from "@storybook/react-vite"
|
|
import { TunnelFacility } from "@hm-design/center-graphic"
|
|
import {
|
|
BridgeReferenceDemo,
|
|
IntersectionReferenceDemo,
|
|
InterchangeReferenceDemo,
|
|
JunctionReferenceDemo,
|
|
LinkedFacilityReferenceDemo,
|
|
RoadsideReferenceDemo,
|
|
TunnelReferenceDemo,
|
|
} from "@hm-design/center-graphic/reference"
|
|
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
|
|
import { withRepresentation } from "./center-shared"
|
|
|
|
// Owners: ui-viz docs/visualization/facility.md and facility-assets.md (128 approved SVG references, shipped unchanged).
|
|
// The display scale (Q2b) is HOLD and Facility has no Selected / Hover state.
|
|
const meta = {
|
|
title: "노선도/시설물",
|
|
id: "center-graphic-facility",
|
|
component: TunnelFacility,
|
|
parameters: { layout: "padded" },
|
|
} satisfies Meta<typeof TunnelFacility>
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
// Common Story page. The CENTER representation wraps only the specimen, so the page title is never scaled with the graphic.
|
|
const page = (name: string, Demo: ComponentType): Story => ({
|
|
name,
|
|
parameters: { layout: "fullscreen", controls: { disable: true } },
|
|
render: () => (
|
|
<StoryPage>
|
|
<StoryPageHeader title={name} />
|
|
<StorySection title="개요">
|
|
{withRepresentation(() => <Demo />)}
|
|
</StorySection>
|
|
</StoryPage>
|
|
),
|
|
})
|
|
|
|
// `name` is repeated as a literal because Storybook's static indexer cannot read it through page(); it drives the sidebar label.
|
|
export const Tunnel: Story = { ...page("터널", TunnelReferenceDemo), name: "터널" }
|
|
export const Bridge: Story = { ...page("교량", BridgeReferenceDemo), name: "교량" }
|
|
export const Intersection: Story = { ...page("교차로", IntersectionReferenceDemo), name: "교차로" }
|
|
export const Junction: Story = { ...page("분기점", JunctionReferenceDemo), name: "분기점" }
|
|
export const Interchange: Story = { ...page("나들목", InterchangeReferenceDemo), name: "나들목" }
|
|
export const Roadside: Story = { ...page("휴게소 · 졸음쉼터", RoadsideReferenceDemo), name: "휴게소 · 졸음쉼터" }
|
|
// Linked facilities are a standalone section heading followed by item cards.
|
|
// Keep the reference data/artwork and road-class grouping owned by the package.
|
|
export const Linked: Story = {
|
|
...page("연계 시설물", LinkedFacilityReferenceDemo),
|
|
name: "연계 시설물",
|
|
render: () => (
|
|
<StoryPage className="sb-center-linked-page">
|
|
<StoryPageHeader title="연계 시설물" />
|
|
{withRepresentation(() => <LinkedFacilityReferenceDemo />)}
|
|
</StoryPage>
|
|
),
|
|
}
|
|
|
|
export const TunnelPlayground: Story = {
|
|
tags: ["verification"],
|
|
name: "직접 테스트 (터널)",
|
|
decorators: [withRepresentation],
|
|
args: { name: "대산2터널", secondaryText: "L=750m", variant: "positionMap", separated: false },
|
|
argTypes: { variant: { control: "inline-radio", options: ["positionMap", "actualDetail"] } },
|
|
}
|