shkim4
2fc1b3e108
User-approved design review (2026-10-21): - SW Header: from 760px up nothing moves into More; the five menus stay with their titles (titles and values ellipsize), file name shrinks to 96px. Open next to the logo no longer blocks field shrinking above 760px (760/768 overflow fixed, also for configured `controls` headers). Dropdown yellow ring inside the button, black seam. - Property Bar values as read-only red text; property popup "=" labels, read-only black values, per-entry hover with pointer. - Home Menu recent files (3 rows, path + name caption, empty preview), Footer + slot guide off by default, Viewer file list without icons, Storybook widths 1920-760. - Tests: old More expectations (integrated-improvement, keyboard-dismiss, footer-popup-viewer-refinement, storybook-cleanup-stage1) moved to the new rule; functional checks kept.
208 lines
13 KiB
TypeScript
208 lines
13 KiB
TypeScript
import { useId, useState } from "react"
|
|
import type { Meta, StoryObj } from "@storybook/react-vite"
|
|
import {
|
|
SWHeaderInput, SWHeaderPropertyPanel, SWPopup, SWPopupPropertyRow, SWPopupRow, SWPopupSection, SWSelect, SWSlider, SWTheme,
|
|
type SWHeaderColorOption, type SWHeaderLayer, type SWHeaderProperty, type SWSliderAppearance,
|
|
} from "@hm-design/sw"
|
|
import "@hm-design/sw/styles.css"
|
|
import { Button, Switch } from "@hm-design/ui"
|
|
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
|
|
import "./sw-stories.css"
|
|
import "./sw-integrated-stories.css"
|
|
|
|
// SWPopup (2026-10-19): the SW property window frame with free children. Public API only, like a consuming
|
|
// project. HM UI components are placed inside to show that the content is not restricted.
|
|
const KICKER = "HM DESIGN SYSTEM / SW"
|
|
const LAYERS: SWHeaderLayer[] = [
|
|
{ id: "0", name: "0", color: "#ffffff" },
|
|
{ id: "wall", name: "WALL", color: "#ff4242" },
|
|
{ id: "dim", name: "DIM", color: "#47af91" },
|
|
{ id: "hatch", name: "HATCH", color: "#5aa0ff" },
|
|
]
|
|
const COLORS: SWHeaderColorOption[] = [
|
|
{ id: "red", color: "#ff0000", label: "빨강" }, { id: "yellow", color: "#ffff00", label: "노랑" },
|
|
{ id: "green", color: "#00ff00", label: "초록" }, { id: "blue", color: "#0000ff", label: "파랑" },
|
|
]
|
|
|
|
const UNITS = ["mm", "cm", "m"].map(value => ({ value }))
|
|
const MENUS = { layers: LAYERS, colors: COLORS }
|
|
const layerProperty = (value: string): SWHeaderProperty => ({ id: "layer", name: "레이어", value, type: "select", groupId: "popup", picker: "layer", options: LAYERS.map(({ id, name }) => ({ id, name })) })
|
|
const APPEARANCES = [{ value: "panel", label: "A · panel (기본)" }, { value: "property", label: "B · property" }]
|
|
|
|
const meta = {
|
|
title: "SW/Popup",
|
|
parameters: { layout: "fullscreen", controls: { disable: true } },
|
|
} satisfies Meta
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
function useLog() {
|
|
const [log, setLog] = useState<string[]>([])
|
|
const view = <p className="sw-story-log" aria-live="polite" data-callback-log="">Callback: {log.length ? log.join(" → ") : "없음"}</p>
|
|
return [view, (line: string) => setLog(lines => [...lines.slice(-9), line])] as const
|
|
}
|
|
|
|
function SettingsPopup({ record }: { record: (line: string) => void }) {
|
|
const ids = { name: useId(), scale: useId(), unit: useId(), snap: useId() }
|
|
const [name, setName] = useState("평면도-01")
|
|
const [scale, setScale] = useState("100")
|
|
const [layerId, setLayerId] = useState("wall")
|
|
const [color, setColor] = useState("255,0,0")
|
|
const [snap, setSnap] = useState(true)
|
|
const [opacity, setOpacity] = useState(60)
|
|
const [unit, setUnit] = useState("mm")
|
|
return (
|
|
<SWPopup title="도면 설정" onClose={() => record("settings.onClose")} data-popup="settings">
|
|
<SWPopupSection title="도면">
|
|
<SWPopupRow label="이름" htmlFor={ids.name}>
|
|
<SWHeaderInput id={ids.name} value={name} onCommit={next => { setName(next); record(`name=${next}`) }} />
|
|
</SWPopupRow>
|
|
<SWPopupRow label="축척" htmlFor={ids.scale} unit="%" numeric>
|
|
<SWHeaderInput id={ids.scale} valueType="number" value={scale} onCommit={next => { setScale(next); record(`scale=${next}`) }} />
|
|
</SWPopupRow>
|
|
<SWPopupRow label="단위" htmlFor={ids.unit} field="none">
|
|
<SWSelect id={ids.unit} value={unit} options={UNITS} onValueChange={next => { setUnit(next); record(`unit=${next}`) }} data-sw-select="unit" />
|
|
</SWPopupRow>
|
|
</SWPopupSection>
|
|
{/* 2026-10-20: popup layer / color controls are the property window pickers (SWPopupPropertyRow), not the
|
|
SWHeader field dropdowns (header-only design). */}
|
|
<SWPopupSection title="레이어 · 색상">
|
|
<SWPopupPropertyRow property={layerProperty(layerId)} menus={MENUS}
|
|
onPropertyChange={(_, value) => { setLayerId(value); record(`layer=${value}`) }} />
|
|
<SWPopupPropertyRow property={{ id: "color", name: "색상", value: color, type: "color", groupId: "popup" }} menus={MENUS}
|
|
onPropertyChange={(_, value) => { setColor(value); record(`color=${value}`) }} />
|
|
</SWPopupSection>
|
|
{/* 2026-10-20: the gauge is the SW gauge (SWSlider). SW has no normal-mode switch, so 스냅 stays the HM UI Switch. */}
|
|
<SWPopupSection title="스냅 · 투명도">
|
|
<SWPopupRow label="스냅" htmlFor={ids.snap} field="none">
|
|
<Switch id={ids.snap} checked={snap} onCheckedChange={next => { setSnap(next); record(`snap=${next}`) }} data-ui-switch="" />
|
|
</SWPopupRow>
|
|
<SWPopupRow label="투명도" field="none">
|
|
<SWSlider value={opacity} min={0} max={100} step={10} onValueChange={setOpacity} onValueCommit={next => record(`opacity=${next}`)} aria-label="투명도" data-popup-slider="" />
|
|
</SWPopupRow>
|
|
</SWPopupSection>
|
|
<div className="sw-story-popup-actions">
|
|
<Button variant="secondary" size="sm" onClick={() => record("cancel")}>취소</Button>
|
|
<Button size="sm" onClick={() => record("apply")} data-ui-apply="">적용</Button>
|
|
</div>
|
|
</SWPopup>
|
|
)
|
|
}
|
|
|
|
function ObjectInfoPopup({ record }: { record: (line: string) => void }) {
|
|
const [x, setX] = useState("1200.5")
|
|
return (
|
|
<SWPopup title="객체 정보 · Beam-01" onClose={() => record("object.onClose")} data-popup="object">
|
|
<SWPopupSection title="객체">
|
|
<SWPopupRow label="이름" readOnly><SWHeaderInput value="Beam-01" readOnly aria-label="이름" /></SWPopupRow>
|
|
<SWPopupRow label="타입" readOnly><SWHeaderInput value="Line" readOnly aria-label="타입" /></SWPopupRow>
|
|
<SWPopupRow label="길이" unit="mm" readOnly><SWHeaderInput value="3000.0000" readOnly aria-label="길이" /></SWPopupRow>
|
|
</SWPopupSection>
|
|
<SWPopupSection title="좌표">
|
|
<SWPopupRow label="X" unit="mm" numeric><SWHeaderInput valueType="number" value={x} aria-label="X" onCommit={next => { setX(next); record(`x=${next}`) }} /></SWPopupRow>
|
|
<SWPopupRow label="Y" field="compact"><SWHeaderInput valueType="number" value="20" aria-label="Y" onCommit={next => record(`y=${next}`)} /></SWPopupRow>
|
|
</SWPopupSection>
|
|
</SWPopup>
|
|
)
|
|
}
|
|
|
|
function PanelWithChildren({ record }: { record: (line: string) => void }) {
|
|
const [properties, setProperties] = useState<SWHeaderProperty[]>([
|
|
{ id: "layer", name: "레이어", value: "wall", type: "select", groupId: "common", picker: "layer", options: LAYERS.map(({ id, name }) => ({ id, name })) },
|
|
{ id: "color", name: "색상", value: "255,66,66", type: "color", groupId: "common" },
|
|
{ id: "width", name: "선가중치", value: "0.25", type: "number", groupId: "common" },
|
|
])
|
|
return (
|
|
<SWHeaderPropertyPanel title="레이어 속성 + 추가 콘텐츠" groups={[{ id: "common", name: "공통" }]} properties={properties}
|
|
menus={{ layers: LAYERS }} onClose={() => record("panel.onClose")}
|
|
onPropertyChange={(property, value) => { setProperties(list => list.map(item => item.id === property.id ? { ...item, value } : item)); record(`${property.id}=${value}`) }}>
|
|
<SWPopupSection title="메모">
|
|
<SWPopupRow label="설명"><SWHeaderInput value="외벽" aria-label="설명" onCommit={next => record(`memo=${next}`)} /></SWPopupRow>
|
|
</SWPopupSection>
|
|
</SWHeaderPropertyPanel>
|
|
)
|
|
}
|
|
|
|
/** SWSlider: the same value and events in both looks; the host only picks `appearance`. */
|
|
function OpacityStylePopups({ record }: { record: (line: string) => void }) {
|
|
const [opacity, setOpacity] = useState(40)
|
|
const [appearance, setAppearance] = useState<SWSliderAppearance>("panel")
|
|
const slider = (look: SWSliderAppearance, label: string) => (
|
|
<SWSlider appearance={look} value={opacity} min={0} max={100} step={10} aria-label={label} data-sw-slider={look}
|
|
onValueChange={setOpacity} onValueCommit={next => record(`opacity(${look})=${next}`)} />
|
|
)
|
|
return (
|
|
<>
|
|
<SWPopup title="투명도 · 스타일 비교" data-popup="opacity-compare">
|
|
<SWPopupSection title="A = panel · B = property (같은 값)">
|
|
<SWPopupRow label="스타일 A" field="none" unit="%">{slider("panel", "투명도 A")}</SWPopupRow>
|
|
<SWPopupRow label="스타일 B" field="none" unit="%">{slider("property", "투명도 B")}</SWPopupRow>
|
|
<SWPopupRow label="값" field="compact" unit="%">
|
|
<SWHeaderInput valueType="number" value={String(opacity)} aria-label="투명도 값" onCommit={next => { setOpacity(Math.min(100, Math.max(0, Number(next)))); record(`opacity=${next}`) }} />
|
|
</SWPopupRow>
|
|
</SWPopupSection>
|
|
</SWPopup>
|
|
<SWPopup title="투명도 · 선택 결과" data-popup="opacity-select">
|
|
<SWPopupSection title="appearance">
|
|
<SWPopupRow label="스타일" field="none">
|
|
<SWSelect aria-label="게이지바 스타일" value={appearance} options={APPEARANCES} onValueChange={next => { setAppearance(next as SWSliderAppearance); record(`appearance=${next}`) }} />
|
|
</SWPopupRow>
|
|
<SWPopupRow label="투명도" field="none" unit="%">{slider(appearance, "투명도 (선택한 스타일)")}</SWPopupRow>
|
|
<SWPopupRow label="비활성" field="none" unit="%" disabled><SWSlider appearance={appearance} value={opacity} disabled aria-label="투명도 (비활성)" /></SWPopupRow>
|
|
</SWPopupSection>
|
|
</SWPopup>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function PopupPage() {
|
|
const [log, record] = useLog()
|
|
return (
|
|
<StoryPage>
|
|
<StoryPageHeader kicker={KICKER} title="SW Popup — 외형 고정, 콘텐츠 자유"
|
|
description="SWPopup은 속성창 프레임(314px, 제목줄, 닫기, 내부 스크롤)을 그대로 쓰고 children으로 아무 콘텐츠나 받습니다. SWPopupSection / SWPopupRow는 속성창 그룹·행 모양을 그대로 재사용합니다. Header 없이 SWTheme 안에서 씁니다." />
|
|
{log}
|
|
<StorySection title="사용자 정의 설정 · 객체 정보 · 기존 속성창 + children" description="SW Input·Select(단위, Viewer 축척 지정과 같은 SWSelect)·레이어/색상(속성창 컨트롤 SWPopupPropertyRow — SWHeader 필드 Dropdown은 Header 전용)·투명도 게이지바(SWSlider)와, SW에 없는 컨트롤인 HM UI Switch·Button을 함께 배치합니다. 기존 SWHeaderPropertyPanel도 children을 받습니다.">
|
|
<SWTheme className="sw-story-popups" data-popups="">
|
|
<SettingsPopup record={record} />
|
|
<ObjectInfoPopup record={record} />
|
|
<PanelWithChildren record={record} />
|
|
</SWTheme>
|
|
</StorySection>
|
|
<StorySection title="투명도 게이지바 스타일 (SWSlider appearance)" description={<><code>appearance="panel"</code>(기본, A) = 지금까지 Popup에서 쓰던 게이지바(6px 트랙 · 18px 흰 Thumb · 녹색 Range, SWViewerSlider와 같은 모양). <code>appearance="property"</code>(B) = 속성창 4개 상태 비교의 게이지바(베이지 트랙 · 빨강 채움 · Figma Thumb). 값·<code>onValueChange</code>·<code>onValueCommit</code>·키보드는 같고 모양만 바뀝니다. 색은 SW 토큰(<code>--hm-sw-slider-panel-*</code>, <code>--hm-sw-property-range-*</code>)을 따릅니다.</>}>
|
|
<SWTheme className="sw-story-popups" data-slider-popups="">
|
|
<OpacityStylePopups record={record} />
|
|
</SWTheme>
|
|
</StorySection>
|
|
</StoryPage>
|
|
)
|
|
}
|
|
|
|
export const CustomContent: Story = { name: "Custom Content", render: () => <PopupPage /> }
|
|
|
|
function StackPage() {
|
|
const [log, record] = useLog()
|
|
const [open, setOpen] = useState(["a", "b", "c"])
|
|
const [layerB, setLayerB] = useState("wall")
|
|
const close = (id: string) => { setOpen(list => list.filter(item => item !== id)); record(`close(${id})`) }
|
|
const rows = Array.from({ length: 30 }, (_, index) => index + 1)
|
|
return (
|
|
<StoryPage>
|
|
<StoryPageHeader kicker={KICKER} title="여러 Popup · Escape · 스크롤"
|
|
description="Popup 안의 Escape는 그 Popup만 닫습니다. 바깥의 Escape는 가장 최근에 열리거나 사용한 Popup 하나만 닫습니다. Dropdown·편집 중인 Input이 처리한 Escape로는 닫히지 않습니다. 긴 콘텐츠는 본문이 스크롤됩니다." />
|
|
{log}
|
|
<SWTheme className="sw-story-popups" data-stack="">
|
|
{open.includes("a") && <SWPopup title="Popup A" onClose={() => close("a")} data-popup="a"><SWPopupSection title="A"><SWPopupRow label="값" field="none" readOnly><span data-readonly-value="a">A</span></SWPopupRow></SWPopupSection></SWPopup>}
|
|
{open.includes("b") && <SWPopup title="Popup B" onClose={() => close("b")} data-popup="b"><SWPopupSection title="B">
|
|
<SWPopupPropertyRow property={layerProperty(layerB)} menus={MENUS} onPropertyChange={(_, value) => { setLayerB(value); record(`b.layer=${value}`) }} />
|
|
</SWPopupSection></SWPopup>}
|
|
{open.includes("c") && <SWPopup title="Popup C · 긴 콘텐츠" onClose={() => close("c")} data-popup="c" style={{ maxHeight: 360 }}>
|
|
<SWPopupSection title="많은 필드">{rows.map(row => <SWPopupRow key={row} label={`필드 ${row}`} unit="mm" numeric><SWHeaderInput valueType="number" value={String(row)} aria-label={`필드 ${row}`} /></SWPopupRow>)}</SWPopupSection>
|
|
</SWPopup>}
|
|
</SWTheme>
|
|
</StoryPage>
|
|
)
|
|
}
|
|
|
|
export const MultiplePopups: Story = { name: "Multiple Popups", render: () => <StackPage /> }
|