feat(sw): popup controls, SWSelect / SWSlider, footer and viewer design fixes
Components (new public exports, existing APIs unchanged) - SWPopupPropertyRow: the property window row (layer / color / line style pickers, Figma 26:12250 / 26:12170) for SWPopup content. The SWHeader field dropdowns stay header-only; Popup B and 도면 설정 now use the popup pickers. - SWSelect: native panel select (28px, 1px #948871, radius 4, #F1ECE1, 12px), used by Popup 도면 설정 단위 and Viewer 축척 지정 단위 (replaces the HM UI Select there and the story-only .sw-viewer-story-select CSS). - SWSlider: appearance "panel" (default, the gauge the popup used) or "property" (the property window gauge), same value / events. Shares the property gauge CSS; SWViewerSlider renders SWSlider panel with viewer tokens. Footer - --hm-sw-footer-gra-border-orange (Figma gra-border-orange; the aux selected border token now references it): Model selected / hover, Layout hover and Layout + hover surfaces; 보조기능 / 명령어 전체보기 hover lights both lines and an orange ring; category + hover in #FF5C00 (menu-add-hover.svg). - Model / Layout text stays the Default text (#161410, 12px, 400, no outline) on hover and on the orange surface: only the surface changes. - bg_vacant covers the slot row only: the open pocket of a category tab no longer splits where it crosses the last command (e.g. 수정 with one command). Viewer - Panel title art keeps 308px (max-width: none against host img resets), so panels under 312px (250 x auto, 300px) paint the title from the left edge. Storybook - SW/Footer: 기본 Footer (sw-footer--default) and States (sw-footer--states) removed; full-footer keeps the live composition only, responsive keeps the widths (reference / Figma image sections removed, image files kept); the aux Figma comparison moved to the verification Story figma-variants. - SW/Popup: unit SWSelect, SWSlider A / B section, popup pickers, Popup B state.
This commit is contained in:
shkim4 committed
1 parent
bbb0e71c91
commit
126a35d60d
15 files changed
+349
-209
No files matched your search
@@ -4,8 +4,6 @@
|
||||
.sw-footer-story-canvas { position: relative; background: var(--sw-story-canvas); }
|
||||
.sw-footer-story-workspace { display: flex; flex-direction: column; height: 720px; background: #060606; }
|
||||
.sw-footer-story-canvas--fill { flex: 1 1 auto; min-height: 0; }
|
||||
.sw-footer-story-reference { display: block; width: 1915px; max-width: none; }
|
||||
.sw-footer-story-figma-bottom { width: 1920px; height: 120px; background: 0 -960px / 1920px 1080px no-repeat; }
|
||||
.sw-footer-story-nodes { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
|
||||
.sw-footer-story-node { margin: 0; padding: 12px; border: 1px solid #dedbd2; border-radius: 6px; background: #fff; }
|
||||
.sw-footer-story-node figcaption { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; font-size: 12px; color: #3d4a45; }
|
||||
@@ -25,19 +23,14 @@
|
||||
.sw-footer-story-guide-room { gap: 160px; padding: 170px 80px 6px; }
|
||||
.sw-footer-story-guide-frame { display: block; width: 194px; height: 111px; background-repeat: no-repeat; background-size: 250px 1179px; }
|
||||
.sw-footer-story-guide-text { display: grid; place-items: center; height: 100%; padding: 8px; font-size: 12px; color: #d4cbbd; text-align: center; }
|
||||
.sw-footer-story-states { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
|
||||
.sw-footer-story-state { margin: 0; }
|
||||
.sw-footer-story-state figcaption { margin-bottom: 6px; font-size: 12px; color: #3d4a45; }
|
||||
.sw-footer-story-lucide { display: grid; place-items: center; }
|
||||
.sw-footer-story-status { padding: 0 12px; font-size: 12px; color: #d4cbbd; font-family: ui-monospace, monospace; }
|
||||
.sw-footer-story-row { display: flex; align-items: flex-start; gap: 16px; }
|
||||
.sw-footer-story-row--tight { gap: 0; }
|
||||
.sw-footer-story-inline { display: inline-flex; flex-direction: column; padding: 0; }
|
||||
.sw-footer-story-width + .sw-footer-story-width { margin-top: 16px; }
|
||||
.sw-footer-story-reference-narrow { display: block; width: 952px; max-width: 100%; }
|
||||
.sw-footer-story-aux-compare { display: grid; grid-template-columns: repeat(auto-fill, minmax(560px, 1fr)); gap: 16px; }
|
||||
.sw-footer-story-aux-row { display: flex; align-items: center; gap: 12px; margin: 0; }
|
||||
.sw-footer-story-aux-row figcaption { flex: 0 0 120px; font-size: 12px; color: #3d4a45; }
|
||||
.sw-footer-story-aux-row img { display: block; flex: none; }
|
||||
.sw-footer-story-aux-states { display: flex; flex-direction: column; gap: 9px; padding: 8px; }
|
||||
.sw-footer-story-aux-demo { margin-top: 12px; }
|
||||
+24
-124
@@ -2,7 +2,7 @@ import { useState, type ReactNode } from "react"
|
||||
import type { Meta, StoryObj } from "@storybook/react-vite"
|
||||
import {
|
||||
SWFooter, SWFooterAddSlot, SWFooterAuxButton, SWFooterAuxGroup, SWFooterCommandLine, SWFooterGuide, SWFooterLayoutTabs, SWFooterMenu,
|
||||
SWFooterSideButton, SWFooterToolButton, SWHeader, SWTheme, SW_FOOTER_MODEL, swFooterToolIcons,
|
||||
SWFooterToolButton, SWHeader, SWTheme, SW_FOOTER_MODEL, swFooterToolIcons,
|
||||
type SWFooterAuxItem, type SWFooterCategory, type SWFooterLayout, type SWFooterTool,
|
||||
} from "@hm-design/sw"
|
||||
import "@hm-design/sw/styles.css"
|
||||
@@ -12,8 +12,6 @@ import {
|
||||
AUX_ITEMS, CATEGORIES, DRAW_TOOLS, GuideFrame, GuideMovie, HISTORY, LAYOUTS, Log, Pin, REFERENCE_AUX, REFERENCE_CATEGORIES, REFERENCE_HISTORY,
|
||||
useFooterDemo,
|
||||
} from "./sw-footer-fixture"
|
||||
import referenceScreen from "./assets/footer-reference/composition-2026-10-20.png"
|
||||
import referenceNarrow from "./assets/footer-reference/narrow-2026-10-20.png"
|
||||
import "./sw-stories.css"
|
||||
import "./sw-footer-stories.css"
|
||||
import placeholderLogo from "./assets/sw-header-logo-placeholder.svg"
|
||||
@@ -49,24 +47,7 @@ function FigmaFooter() {
|
||||
)
|
||||
}
|
||||
|
||||
// ---------- 1. 기본 Footer ----------
|
||||
|
||||
export const Default: Story = {
|
||||
name: "기본 Footer",
|
||||
render: () => (
|
||||
<StoryPage>
|
||||
<StoryPageHeader kicker={KICKER} title="SW Footer" description={<>Figma <code>레이아웃 분리</code> 26:10097의 하단 72px 영역. 기본 데이터(도형 9개 명령, 10개 분류, 보조기능 6개, Layout 01)만 넣은 <code><SWFooter /></code>입니다. 아래는 같은 폭의 Figma 렌더입니다.</>} />
|
||||
<StorySection title="구현 (1920px)" description="Hover: 명령·분류·빈 칸(+, 가이드)·Layout 탭. 클릭 동작은 Callback이 없으므로 아무 것도 실행하지 않습니다.">
|
||||
<Screen><FigmaFooter /></Screen>
|
||||
</StorySection>
|
||||
<StorySection title="Figma 26:10097 (하단 120px)">
|
||||
<div className="sw-story-scroller"><div className="sw-footer-story-figma-bottom" style={{ backgroundImage: `url(${ref("26-10097")})` }} role="img" aria-label="Figma 26:10097 하단" /></div>
|
||||
</StorySection>
|
||||
</StoryPage>
|
||||
),
|
||||
}
|
||||
|
||||
// ---------- 2. 전체 Footer · 실제 조합 ----------
|
||||
// ---------- 1. 전체 Footer · 실제 Footer 조합 ----------
|
||||
|
||||
const LAYOUTS_2: SWFooterLayout[] = [{ id: "layout2", label: "Layout 02" }, { id: "layout1", label: "Layout 01" }]
|
||||
|
||||
@@ -101,17 +82,14 @@ export const FullFooter: Story = {
|
||||
render: () => (
|
||||
<StoryPage>
|
||||
<StoryPageHeader kicker={KICKER} title="전체 Footer · 실제 Footer 조합" description="사용자 제공 실제 화면(2026-10-20) 구성: SWHeader + 도면 영역 + SWFooter(좌표 status, 바 안의 명령창 command, 오른쪽 명령 칸, Layout 탭). 모든 상태는 호스트(Story)가 Props로 소유하고, 컴포넌트는 Callback만 보냅니다." />
|
||||
<StorySection title="동작" description="명령 클릭 = 선택(다시 클릭 해제)·명령 기록 추가, 분류 탭(←/→), 빈 칸 + 클릭·Hover 가이드(영상 대신 Figma 6프레임 순환), 보조기능 토글(켜짐 = 주황 테두리·글자), 명령어 전체보기·▲ = 명령창 위로 펼치기, Layout 탭 선택·+·×·더블클릭/F2 이름 변경·Delete, 명령창 Enter 실행.">
|
||||
<StorySection title="실제 Footer 조합 (동작)" description="명령 클릭 = 선택(다시 클릭 해제)·명령 기록 추가, 분류 탭(←/→, 바꿔도 칸 영역 고정), 빈 칸 + 클릭·Hover 가이드(영상 대신 Figma 6프레임 순환), 보조기능 토글(켜짐 = 주황 테두리·글자), 명령어 전체보기·▲ = 명령창 위로 펼치기, Layout 탭 선택·+·×·더블클릭/F2 이름 변경·Delete, 명령창 Enter 실행. 좁은 폭의 ▲ 확장 목록은 「화면 폭 변화」, Hover · Active · Selected · Disabled는 이 화면의 각 부품에서 동작합니다.">
|
||||
<Workspace width={1920} />
|
||||
</StorySection>
|
||||
<StorySection title="참고: 실제 화면 (사용자 제공, 1915 × 1030)" description="Model 탭: 실제 화면은 선택 탭이 주황이지만 Figma model On(26:9925)은 갈색이므로 Figma 값을 유지합니다. 뷰 큐브(평면도)와 도면 왼쪽 위 표시는 Footer 범위 밖입니다.">
|
||||
<div className="sw-story-scroller"><img className="sw-footer-story-reference" src={referenceScreen} alt="실제 SW 화면 참고 (Footer 조합)" /></div>
|
||||
</StorySection>
|
||||
</StoryPage>
|
||||
),
|
||||
}
|
||||
|
||||
// ---------- 3. 도구 그룹별 표시 ----------
|
||||
// ---------- 2. 도구 그룹별 표시 ----------
|
||||
|
||||
export const ToolGroups: Story = {
|
||||
name: "도구 그룹별 표시",
|
||||
@@ -130,7 +108,7 @@ export const ToolGroups: Story = {
|
||||
),
|
||||
}
|
||||
|
||||
// ---------- 4. Figma 디자인별 Variant (35 노드) ----------
|
||||
// ---------- 3. Figma 디자인별 Variant (35 노드) ----------
|
||||
|
||||
function Node({ id, name, impl, states, children }: { id: string; name: string; impl: string; states: string; children: ReactNode }) {
|
||||
return (
|
||||
@@ -198,25 +176,9 @@ const MENU_NODES: [string, string][] = [
|
||||
["26:9494", "레이어"], ["26:9501", "뷰"], ["26:9508", "선택/조회"], ["26:9515", "도로/횡단"], ["26:9522", "구조/배근"],
|
||||
]
|
||||
const toolProps = (tool: SWFooterTool) => ({ label: tool.label, icon: tool.icon, activeIcon: tool.activeIcon, "aria-label": tool.ariaLabel })
|
||||
const AUX0 = { label: AUX_ITEMS[0].label, icon: AUX_ITEMS[0].icon }
|
||||
/** Figma component sets of the six auxiliary toggles, in AUX_ITEMS order. */
|
||||
const AUX_SETS = ["26:9248", "26:9267", "26:9298", "26:9320", "26:9381", "26:9412"]
|
||||
|
||||
/** Live toggles: click to select / deselect; "하나만" makes the selection move between buttons. */
|
||||
function AuxToggleDemo() {
|
||||
const [items, setItems] = useState(AUX_ITEMS)
|
||||
const [single, setSingle] = useState(false)
|
||||
return (
|
||||
<div className="sw-footer-story-aux-demo">
|
||||
<label className="sw-story-log"><input type="checkbox" checked={single} onChange={event => setSingle(event.target.checked)} /> 하나만 선택(다른 버튼을 누르면 선택 이동)</label>
|
||||
<SWTheme className="sw-footer-story-group-surface sw-footer-story-inline">
|
||||
<SWFooterAuxGroup items={items} onPressedChange={(id, pressed) => setItems(list => list.map(item => (
|
||||
item.id === id ? { ...item, pressed } : single && pressed ? { ...item, pressed: false } : item)))} />
|
||||
</SWTheme>
|
||||
<p className="sw-story-log" data-aux-state="">선택: {items.filter(item => item.pressed).map(item => item.label).join(", ") || "없음"}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
const SMALL_COMMAND = { width: 120, ["--hm-sw-footer-command-expanded-height" as string]: "71px" }
|
||||
|
||||
export const FigmaVariants: Story = {
|
||||
@@ -303,6 +265,22 @@ export const FigmaVariants: Story = {
|
||||
</Node>
|
||||
</div>
|
||||
</StorySection>
|
||||
<StorySection title="보조기능 버튼 (btn_객체스냅 26:9248 … btn_선가중치 26:9412)" description="35개 목록 밖 보조 참고. 구현 열: Default · Hover · Selected · Selected + Hover (Hover는 data-sb-hover 고정).">
|
||||
<div className="sw-footer-story-aux-compare">
|
||||
{AUX_ITEMS.map((item, index) => (
|
||||
<figure key={item.id} className="sw-footer-story-aux-row">
|
||||
<figcaption>{AUX_SETS[index]} {item.label}</figcaption>
|
||||
<img src={new URL(`./assets/figma-reference/footer/aux-buttons/${AUX_SETS[index].replace(":", "-")}.png`, import.meta.url).href} alt={`Figma ${AUX_SETS[index]} ${item.label}`} />
|
||||
<SWTheme className="sw-footer-story-group-surface sw-footer-story-aux-states">
|
||||
<SWFooterAuxButton label={item.label} icon={item.icon} pressed={false} />
|
||||
<Pin hover=".hm-sw-footer-aux__button"><SWFooterAuxButton label={item.label} icon={item.icon} pressed={false} /></Pin>
|
||||
<SWFooterAuxButton label={item.label} icon={item.icon} pressed />
|
||||
<Pin hover=".hm-sw-footer-aux__button"><SWFooterAuxButton label={item.label} icon={item.icon} pressed /></Pin>
|
||||
</SWTheme>
|
||||
</figure>
|
||||
))}
|
||||
</div>
|
||||
</StorySection>
|
||||
<StorySection title="명령창">
|
||||
<div className="sw-footer-story-nodes">
|
||||
<Node id="26:10023" name="ico_arrow" impl="SWFooterCommandLine 펼치기 버튼" states="Default · Hover · On(펼침) · On + Hover">
|
||||
@@ -321,73 +299,7 @@ export const FigmaVariants: Story = {
|
||||
),
|
||||
}
|
||||
|
||||
// ---------- 5. Hover / Active / Selected / Disabled ----------
|
||||
|
||||
function StateCell({ title, children }: { title: string; children: ReactNode }) {
|
||||
return <figure className="sw-footer-story-state"><figcaption>{title}</figcaption><SWTheme className="sw-footer-story-group-surface">{children}</SWTheme></figure>
|
||||
}
|
||||
|
||||
export const States: Story = {
|
||||
name: "Hover / Active / Selected / Disabled",
|
||||
render: () => {
|
||||
const line = DRAW_TOOLS[0]
|
||||
return (
|
||||
<StoryPage>
|
||||
<StoryPageHeader kicker={KICKER} title="상태" description="Hover·Selected는 Figma 값. Active(누르는 중)와 Disabled는 Figma에 없어 기존 SW 규칙(누름 = Hover와 같음, Disabled = 40%)을 따릅니다. Focus는 SW 공통 2px #F0F7F5." />
|
||||
<StorySection title="명령 버튼">
|
||||
<div className="sw-footer-story-states">
|
||||
<StateCell title="Default"><SWFooterToolButton {...toolProps(line)} /></StateCell>
|
||||
<StateCell title="Hover"><Pin hover=".hm-sw-footer-tool"><SWFooterToolButton {...toolProps(line)} /></Pin></StateCell>
|
||||
<StateCell title="Active (누름 = Hover)"><Pin hover=".hm-sw-footer-tool"><SWFooterToolButton {...toolProps(line)} /></Pin></StateCell>
|
||||
<StateCell title="Selected (pressed)"><SWFooterToolButton {...toolProps(line)} pressed /></StateCell>
|
||||
<StateCell title="Disabled"><SWFooterToolButton {...toolProps(line)} disabled /></StateCell>
|
||||
</div>
|
||||
</StorySection>
|
||||
<StorySection title="빈 칸 · 분류 탭">
|
||||
<div className="sw-footer-story-states">
|
||||
<StateCell title="빈 칸 Default"><SWFooterAddSlot guide={false} /></StateCell>
|
||||
<StateCell title="빈 칸 Hover"><Pin hover=".hm-sw-footer-add"><SWFooterAddSlot guide={false} /></Pin></StateCell>
|
||||
<StateCell title="빈 칸 Disabled"><SWFooterAddSlot guide={false} disabled /></StateCell>
|
||||
<StateCell title="분류 Default · Hover · Selected · Disabled">
|
||||
<Pin hover="#sw-footer-state-b">
|
||||
<SWFooterMenu items={[{ id: "a", label: "도형" }, { id: "b", label: "수정" }, { id: "c", label: "편집" }, { id: "d", label: "문자", disabled: true }]} value="a" tabIdPrefix="sw-footer-state" />
|
||||
</Pin>
|
||||
</StateCell>
|
||||
</div>
|
||||
<p className="sw-story-log">분류 Hover 고정: 두 번째 탭(수정)에 data-sb-hover.</p>
|
||||
</StorySection>
|
||||
<StorySection title="보조기능 버튼 (Figma btn_객체스냅 26:9248 … btn_선가중치 26:9412)" description="Default = 갈색 그라데이션 테두리 · #F1EDE5 아이콘 · #F6F4F2 글자. Hover = 노랑 테두리(SW Header Hover 토큰)만, 아이콘·글자 기본색. Selected(Figma Variant2 = Variant3) = 주황 그라데이션 테두리 + #FF5C00 아이콘 + #FF5C00 글자, Hover 중에도 유지.">
|
||||
<div className="sw-footer-story-aux-compare">
|
||||
{AUX_ITEMS.map((item, index) => (
|
||||
<figure key={item.id} className="sw-footer-story-aux-row">
|
||||
<figcaption>{AUX_SETS[index]} {item.label}</figcaption>
|
||||
<img src={new URL(`./assets/figma-reference/footer/aux-buttons/${AUX_SETS[index].replace(":", "-")}.png`, import.meta.url).href} alt={`Figma ${AUX_SETS[index]} ${item.label}`} />
|
||||
<SWTheme className="sw-footer-story-group-surface sw-footer-story-aux-states">
|
||||
<SWFooterAuxButton label={item.label} icon={item.icon} pressed={false} />
|
||||
<Pin hover=".hm-sw-footer-aux__button"><SWFooterAuxButton label={item.label} icon={item.icon} pressed={false} /></Pin>
|
||||
<SWFooterAuxButton label={item.label} icon={item.icon} pressed />
|
||||
<Pin hover=".hm-sw-footer-aux__button"><SWFooterAuxButton label={item.label} icon={item.icon} pressed /></Pin>
|
||||
</SWTheme>
|
||||
</figure>
|
||||
))}
|
||||
</div>
|
||||
<p className="sw-story-log">구현 열: Default · Hover · Selected · Selected + Hover (Hover는 data-sb-hover 고정)</p>
|
||||
<AuxToggleDemo />
|
||||
</StorySection>
|
||||
<StorySection title="측면 버튼 (Figma Default만 있음)" description="Hover·pressed는 Footer의 #FF5C00 글자 규칙을 재사용(Figma 미정의).">
|
||||
<div className="sw-footer-story-states">
|
||||
<StateCell title="보조 Disabled"><SWFooterAuxButton {...AUX0} disabled /></StateCell>
|
||||
<StateCell title="측면 Default"><SWFooterSideButton title="보조기능" subtitle="전체보기" /></StateCell>
|
||||
<StateCell title="측면 Hover"><Pin hover=".hm-sw-footer-side"><SWFooterSideButton title="명령어" subtitle="전체보기" side="end" /></Pin></StateCell>
|
||||
<StateCell title="측면 Disabled"><SWFooterSideButton title="명령어" subtitle="전체보기" side="end" disabled /></StateCell>
|
||||
</div>
|
||||
</StorySection>
|
||||
</StoryPage>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
// ---------- 6. 도구 및 메뉴 변경 예제 ----------
|
||||
// ---------- 4. 도구 및 메뉴 변경 예제 ----------
|
||||
|
||||
const icon = (node: ReactNode) => <span className="sw-footer-story-lucide">{node}</span>
|
||||
const CUSTOM: SWFooterCategory[] = [
|
||||
@@ -446,7 +358,7 @@ export const CustomContent: Story = {
|
||||
),
|
||||
}
|
||||
|
||||
// ---------- 7. 화면 폭 ----------
|
||||
// ---------- 5. 화면 폭 ----------
|
||||
|
||||
function ReferenceFooter() {
|
||||
const [open, setOpen] = useState(false)
|
||||
@@ -473,23 +385,11 @@ export const Responsive: Story = {
|
||||
</div>
|
||||
))}
|
||||
</StorySection>
|
||||
<StorySection title="참고: 실제 좁은 화면 (사용자 제공, 952px)">
|
||||
<img className="sw-footer-story-reference-narrow" src={referenceNarrow} alt="실제 SW 좁은 화면 참고" />
|
||||
</StorySection>
|
||||
<StorySection title="Figma 기본 구성 (명령창 없음)" description="빈 칸이 slotCount(17)까지 채우고 폭에 맞춰 줄어듦. 명령이 넘치면 같은 ▲ 패널.">
|
||||
{[1920, 1280, 1024, 820].map(width => (
|
||||
<div key={width} className="sw-footer-story-width">
|
||||
<p className="sw-story-log">{width}px</p>
|
||||
<Screen width={width} canvas={60}><SWFooter categories={CATEGORIES} auxItems={AUX_ITEMS} onSlotAdd={noop}
|
||||
layoutTabs={<SWFooterLayoutTabs layouts={LAYOUTS} value="layout1" onAdd={noop} />} /></Screen>
|
||||
</div>
|
||||
))}
|
||||
</StorySection>
|
||||
</StoryPage>
|
||||
),
|
||||
}
|
||||
|
||||
// ---------- 8. 개별 부품 ----------
|
||||
// ---------- 6. 개별 부품 ----------
|
||||
|
||||
export const Parts: Story = {
|
||||
name: "개별 부품 (조합용)",
|
||||
|
||||
+59
-20
@@ -1,11 +1,11 @@
|
||||
import { useId, useState } from "react"
|
||||
import type { Meta, StoryObj } from "@storybook/react-vite"
|
||||
import {
|
||||
SWHeaderColorMenu, SWHeaderInput, SWHeaderLayerMenu, SWHeaderPropertyPanel, SWPopup, SWPopupRow, SWPopupSection, SWTheme,
|
||||
type SWHeaderColorOption, type SWHeaderLayer, type SWHeaderProperty,
|
||||
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, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Slider, Switch } from "@hm-design/ui"
|
||||
import { Button, Slider, Switch } from "@hm-design/ui"
|
||||
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
|
||||
import "./sw-stories.css"
|
||||
import "./sw-integrated-stories.css"
|
||||
@@ -24,6 +24,11 @@ const COLORS: SWHeaderColorOption[] = [
|
||||
{ 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 } },
|
||||
@@ -38,11 +43,11 @@ function useLog() {
|
||||
}
|
||||
|
||||
function SettingsPopup({ record }: { record: (line: string) => void }) {
|
||||
const ids = { name: useId(), scale: useId(), snap: useId() }
|
||||
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({ value: "255,0,0", swatch: "#ff0000" })
|
||||
const [color, setColor] = useState("255,0,0")
|
||||
const [snap, setSnap] = useState(true)
|
||||
const [opacity, setOpacity] = useState([60])
|
||||
const [unit, setUnit] = useState("mm")
|
||||
@@ -55,21 +60,17 @@ function SettingsPopup({ record }: { record: (line: string) => void }) {
|
||||
<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="단위" field="none">
|
||||
<Select value={unit} onValueChange={next => { setUnit(next); record(`unit=${next}`) }}>
|
||||
<SelectTrigger data-ui-select=""><SelectValue /></SelectTrigger>
|
||||
<SelectContent>{["mm", "cm", "m"].map(item => <SelectItem key={item} value={item}>{item}</SelectItem>)}</SelectContent>
|
||||
</Select>
|
||||
<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>
|
||||
<SWPopupSection title="SW Dropdown">
|
||||
<div data-popup-layer="">
|
||||
<SWHeaderLayerMenu value={{ name: LAYERS.find(layer => layer.id === layerId)!.name }} layers={LAYERS} activeLayerId={layerId}
|
||||
onLayerSelect={layer => { setLayerId(layer.id); record(`layer=${layer.id}`) }} />
|
||||
</div>
|
||||
<div data-popup-color="">
|
||||
<SWHeaderColorMenu value={color} colors={COLORS} onColorSelect={option => { setColor({ value: option.value ?? option.color, swatch: option.color }); record(`color=${option.id}`) }} />
|
||||
</div>
|
||||
{/* 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>
|
||||
<SWPopupSection title="HM UI">
|
||||
<SWPopupRow label="스냅" htmlFor={ids.snap} field="none">
|
||||
@@ -121,6 +122,38 @@ function PanelWithChildren({ record }: { record: (line: string) => void }) {
|
||||
)
|
||||
}
|
||||
|
||||
/** 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 (
|
||||
@@ -128,13 +161,18 @@ function PopupPage() {
|
||||
<StoryPageHeader kicker={KICKER} title="SW Popup — 외형 고정, 콘텐츠 자유"
|
||||
description="SWPopup은 속성창 프레임(314px, 제목줄, 닫기, 내부 스크롤)을 그대로 쓰고 children으로 아무 콘텐츠나 받습니다. SWPopupSection / SWPopupRow는 속성창 그룹·행 모양을 그대로 재사용합니다. Header 없이 SWTheme 안에서 씁니다." />
|
||||
{log}
|
||||
<StorySection title="사용자 정의 설정 · 객체 정보 · 기존 속성창 + children" description="SW Input·Dropdown과 HM UI Switch·Slider·Select·Button을 함께 배치합니다. 기존 SWHeaderPropertyPanel도 children을 받습니다.">
|
||||
<StorySection title="사용자 정의 설정 · 객체 정보 · 기존 속성창 + children" description="SW Input·Select(단위, Viewer 축척 지정과 같은 SWSelect)·레이어/색상(속성창 컨트롤 SWPopupPropertyRow — SWHeader 필드 Dropdown은 Header 전용)과 HM UI Switch·Slider·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>
|
||||
)
|
||||
}
|
||||
@@ -144,6 +182,7 @@ export const CustomContent: Story = { name: "Custom Content", render: () => <Pop
|
||||
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 (
|
||||
@@ -155,7 +194,7 @@ function StackPage() {
|
||||
<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="값"><SWHeaderInput value="A" aria-label="A 값" onCommit={next => record(`a=${next}`)} /></SWPopupRow></SWPopupSection></SWPopup>}
|
||||
{open.includes("b") && <SWPopup title="Popup B" onClose={() => close("b")} data-popup="b"><SWPopupSection title="B">
|
||||
<div data-popup-layer=""><SWHeaderLayerMenu value={{ name: "WALL" }} layers={LAYERS} activeLayerId="wall" /></div>
|
||||
<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>
|
||||
|
||||
@@ -24,7 +24,6 @@
|
||||
.sw-viewer-story-props dd { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: ui-monospace, monospace; user-select: all; }
|
||||
.sw-viewer-story-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 0; text-align: center; font-size: 12px; color: var(--hm-sw-viewer-panel-label); }
|
||||
.sw-viewer-story-steps { margin: 0; padding-left: 20px; font-size: 14px; }
|
||||
.sw-viewer-story-select { height: 28px; padding: 0 8px; border: 1px solid var(--hm-sw-viewer-panel-inner-border); border-radius: 4px; background: var(--hm-sw-viewer-panel-field-background); font: inherit; font-size: 12px; }
|
||||
.sw-viewer-story-reopen { position: absolute; left: 712px; top: 16px; padding: 6px 10px; border-radius: 4px; background: #f5f0e5; font-size: 12px; }
|
||||
.sw-viewer-story-context { display: flex; align-items: center; justify-content: center; height: 160px; border: 1px dashed #9a9284; border-radius: 4px; background: #f5f0e5; color: #3e3523; font-size: 13px; }
|
||||
.sw-viewer-story-mode { display: flex; gap: 16px; margin-bottom: 8px; font-size: 13px; }
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useRef, useState, type ReactNode } from "react"
|
||||
import type { Meta, StoryObj } from "@storybook/react-vite"
|
||||
import {
|
||||
SWHeader, SWViewerButton, SWViewerField, SWViewerHeader, SWViewerHint, SWViewerInput, SWViewerMenu, SWViewerPanel, SWViewerSection, SWViewerSwitch,
|
||||
SWHeader, SWSelect, SWViewerButton, SWViewerField, SWViewerHeader, SWViewerHint, SWViewerInput, SWViewerMenu, SWViewerPanel, SWViewerSection, SWViewerSwitch,
|
||||
type SWViewerHeaderGroup, type SWViewerMenuEntry,
|
||||
} from "@hm-design/sw"
|
||||
import "@hm-design/sw/styles.css"
|
||||
@@ -270,7 +270,7 @@ export const ContentVariants: Story = {
|
||||
<SWViewerSection title="입력">
|
||||
<SWViewerField label="축척">{id => <SWViewerInput id={id} value={scale} onChange={event => setScale(event.currentTarget.value)} style={{ width: 120 }} />}</SWViewerField>
|
||||
<SWViewerField label="스냅 사용">{id => <SWViewerSwitch id={id} checked={snap} onCheckedChange={setSnap} />}</SWViewerField>
|
||||
<SWViewerField label="단위">{id => <select id={id} className="sw-viewer-story-select" defaultValue="mm"><option value="mm">mm</option><option value="m">m</option></select>}</SWViewerField>
|
||||
<SWViewerField label="단위">{id => <SWSelect id={id} defaultValue="mm" options={[{ value: "mm" }, { value: "m" }]} onValueChange={value => demo.record(`unit=${value}`)} data-sw-select="unit" />}</SWViewerField>
|
||||
</SWViewerSection>
|
||||
</SWViewerPanel>
|
||||
{!inputOpen && <button type="button" className="sw-viewer-story-reopen" onClick={() => setInputOpen(true)}>축척 지정 다시 열기</button>}
|
||||
|
||||
Reference in new issue
Block a user