HMDesign/src/sw/sw-tool.stories.tsx

import { useState, type ReactNode } from "react"
import type { Meta, StoryObj } from "@storybook/react-vite"
import { SWHeader, SWHeaderHome, SWTheme, SWToolButton, SWToolGroup } from "@hm-design/sw"
import "@hm-design/sw/styles.css"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
import "./sw-stories.css"
import "./sw-integrated-stories.css"
import placeholderLogo from "./assets/sw-header-logo-placeholder.svg"

// SWToolButton / SWToolGroup (2026-10-19): the existing SW toggle, pill and file-name looks as public buttons
// for viewer tool bars (Model / Layout, Fit, 2.5D, ...). Public API only, like a consuming project.
const KICKER = "HM DESIGN SYSTEM / SW"

// Sample host icon (the program supplies its own): 24 x 23 box like the print icon, default #B6D0C9 / hover #FFC600.
const FitIcon = ({ color }: { color: string }) => (
  <svg viewBox="0 0 24 23" width="24" height="23" aria-hidden="true">
    <path d="M2 8V2h6M16 2h6v6M22 15v6h-6M8 21H2v-6" fill="none" stroke={color} strokeWidth="2" />
  </svg>
)

const meta = {
  title: "SW/Tool",
  parameters: { layout: "fullscreen", controls: { disable: true } },
} satisfies Meta
export default meta
type Story = StoryObj<typeof meta>

function Bar({ children }: { children: ReactNode }) {
  return <div className="sw-story-scroller"><div className="sw-story-frame" style={{ width: 1440 }}>{children}</div></div>
}

function ToolPage() {
  const [view, setView] = useState<"model" | "layout">("model")
  const [depth, setDepth] = useState(false)
  const [log, setLog] = useState<string[]>([])
  const record = (line: string) => setLog(lines => [...lines.slice(-7), line])
  const viewGroup = (
    <SWToolGroup label="보기" selection="single" data-view-group="">
      <SWToolButton pressed={view === "model"} onClick={() => { setView("model"); record("view(model)") }}>Model</SWToolButton>
      <SWToolButton pressed={view === "layout"} onClick={() => { setView("layout"); record("view(layout)") }}>Layout</SWToolButton>
    </SWToolGroup>
  )
  const displayGroup = (
    <SWToolGroup label="표시" data-display-group="">
      <SWToolButton pressed={depth} onClick={() => { setDepth(!depth); record(`2.5D(${!depth})`) }}>2.5D</SWToolButton>
    </SWToolGroup>
  )
  const fit = (
    <SWToolGroup appearance="pill" aria-label="화면" data-fit-group="">
      <SWToolButton appearance="pill" icon={<FitIcon color="#B6D0C9" />} hoverIcon={<FitIcon color="var(--hm-sw-header-selected-color)" />} onClick={() => record("fit")}>화면 맞춤</SWToolButton>
    </SWToolGroup>
  )
  return (
    <StoryPage>
      <StoryPageHeader kicker={KICKER} title="SW Tool — SWToolButton / SWToolGroup"
        description="새 디자인 값 없이 기존 SW 버튼 3종을 공개 버튼으로 씁니다. text = 속성Bar·속성창 글자 토글, pill = 인쇄·K 버튼, document = 파일명 면. SWToolGroup은 상세보기 묶음(text) 또는 인쇄·K pill(pill)이며 selection=&quot;single&quot;이면 Model / Layout 같은 단일 선택(radiogroup, 화살표 키)입니다." />
      <p className="sw-story-log" aria-live="polite" data-callback-log="">Callback: {log.length ? log.join(" → ") : "없음"}</p>
      <StorySection title="SWHeader tools 슬롯 안" description="객체 수정 영역의 메뉴 뒤에 도구 막대를 둡니다.">
        <Bar><SWHeader documentTitle="C0020101-006-평면및종단면도(06)" logoSrc={placeholderLogo} logoAlt="임시 로고"
          hiddenControls={["lineStyle", "textStyle", "dimensionStyle", "details", "propertyBar", "propertyPanel"]}
          tools={<>{viewGroup}{displayGroup}{fit}</>} /></Bar>
      </StorySection>
      <StorySection title="조합형 막대 (SWTheme)" description="Header 없이 같은 부품을 SWTheme 안에 배치합니다. 배치 CSS만 소비 프로젝트 소유입니다.">
        <Bar>
          <SWTheme className="sw-story-composed-bar" data-tool-bar="">
            <SWHeaderHome logoSrc={placeholderLogo} logoAlt="임시 로고" />
            <SWToolButton appearance="document" onClick={() => record("open")}>Open</SWToolButton>
            <div className="sw-story-composed-surface">{viewGroup}{displayGroup}{fit}</div>
          </SWTheme>
        </Bar>
      </StorySection>
      <StorySection title="상태" description="text: Hover·Selected 글자 #FFC600, Disabled 40%. pill: Hover 노란 테두리, hoverIcon 교체. document: 글자만 Hover #FFC600.">
        <Bar>
          <SWTheme className="sw-story-composed-bar" data-tool-states="">
            <SWHeaderHome logoSrc={placeholderLogo} logoAlt="임시 로고" interactive={false} />
            <SWToolButton appearance="document" disabled>Disabled</SWToolButton>
            <div className="sw-story-composed-surface">
              <SWToolGroup label="text"><SWToolButton>Default</SWToolButton><SWToolButton pressed>Pressed</SWToolButton><SWToolButton disabled>Disabled</SWToolButton></SWToolGroup>
              <SWToolGroup appearance="pill" aria-label="pill">
                <SWToolButton appearance="pill" icon={<FitIcon color="#B6D0C9" />} hoverIcon={<FitIcon color="var(--hm-sw-header-selected-color)" />}>Fit</SWToolButton>
                <SWToolButton appearance="pill" icon={<FitIcon color="#B6D0C9" />} disabled>Fit disabled</SWToolButton>
              </SWToolGroup>
            </div>
          </SWTheme>
        </Bar>
      </StorySection>
    </StoryPage>
  )
}

export const ToolButtons: Story = { name: "Tool Buttons", render: () => <ToolPage /> }