HMDesign/src/foundation/typography.stories.tsx

import { useEffect, useRef, useState } from "react"
import type { Meta, StoryObj } from "@storybook/react-vite"
import { typographyProperties, typographyReferences } from "./reference-data"
import { StorySectionGrid } from "../components/story-page"
import { colorHex, ReferencePage, ReferenceSection, textTone, textToneProperties, useResolvedProperties } from "./reference"

type TypographyReference = (typeof typographyReferences)[number]

const weights = [
  { property: "--hm-input-font-weight", label: "Regular" },
  { property: "--hm-font-weight-medium", label: "Medium" },
  { property: "--hm-font-weight-bold", label: "Bold" },
]
// Left column: text styles. Right column: form controls. Together they cover every entry in typographyReferences.
const textLabels = ["Page Header · title", "Card · title", "Page Header · description", "Label"]
const textRows = typographyReferences.filter(item => textLabels.includes(item.label))
const controlRows = typographyReferences.filter(item => !textLabels.includes(item.label))

// Admin text colors (Web / Chart / OrgChart; not SW). The chip color and HEX read the current token; no color is hardcoded here.
const textColorRoles = [
  { label: "Primary", name: "기본 텍스트", token: "--hm-sem-fg-primary" },
  { label: "Secondary", name: "보조 텍스트", token: "--hm-sem-fg-secondary" },
  { label: "Placeholder", name: "입력 안내", token: "--hm-sem-fg-placeholder" },
  // Transparent readonly Input on the beige surface uses Secondary (Placeholder is below 4.5:1 there).
  { label: "Readonly Placeholder", name: "읽기 전용 입력 안내", token: "--hm-sem-fg-secondary" },
]
// Chip colors plus the swatch text candidates (textTone, reference.tsx).
const textColorProperties = [...new Set([...textColorRoles.map(item => item.token), ...textToneProperties])]

// Same chip as Foundation/가족사 컬러 (separate chips; shared swatch rules in foundation.css via data-text-colors): role name and
// usage at the top left, HEX at the bottom right, text tone by contrast.
function TextColorChips({ values }: { values: Record<string, string> }) {
  return <div className="hm-brand-color-row hm-text-color-row" data-text-colors>{textColorRoles.map(item => {
    const hex = colorHex(values[item.token])
    return <article className="hm-brand-color-chip" key={item.label} data-text-color={item.label} data-color-token={item.token} data-text-tone={textTone(hex, values)}>
      <div className="hm-foundation-swatch" style={{ background: `var(${item.token})` }}>
        <div className="hm-color-name">
          <h3>{item.label}</h3>
          <p className="hm-color-note" data-color-name>{item.name}</p>
        </div>
        <p data-color-value>{hex}</p>
      </div>
    </article>
  })}</div>
}

function SpecimenRow({ label, size, line, weight }: TypographyReference & { weight?: string }) {
  const ref = useRef<HTMLDivElement>(null)
  const [metrics, setMetrics] = useState({ main: "", spacing: "" })
  useEffect(() => {
    let mounted = true
    void document.fonts.ready.then(() => {
      if (!mounted || !ref.current) return
      const style = getComputedStyle(ref.current)
      setMetrics({ main: `${style.fontSize} / ${style.lineHeight} / ${style.fontWeight}`, spacing: `letter-spacing: ${style.letterSpacing}` })
    })
    return () => { mounted = false }
  }, [])
  // The sample at its real component size leads; the item name and the computed metrics sit beside it as secondary text.
  return <li className="hm-typo-row hm-typo-specimen">
    <div className="hm-typo-row-meta hm-typo-specimen-meta">
      <span className="hm-typo-specimen-name">{label.split(" · ")[1] ?? label}</span>
      <span className="hm-typo-metrics" data-typography-metrics><span>{metrics.main}</span><span>{metrics.spacing}</span></span>
    </div>
    <div ref={ref} className="hm-typo-row-preview hm-typo-sample" data-typography-sample={label} lang="ko" style={{ fontSize: `var(${size})`, lineHeight: `var(${line})`, fontWeight: weight ? `var(${weight})` : "normal" }}>한맥 Hanmac 0123</div>
  </li>
}

// Rows grouped by component, the label part before " · " (Page Header, Card, Label, Input, Button Standard).
const groupOf = (item: TypographyReference) => item.label.split(" · ")[0]
function SpecimenGroups({ rows }: { rows: readonly TypographyReference[] }) {
  return <div className="hm-typo-groups">{[...new Set(rows.map(groupOf))].map(group => <section className="hm-typo-group" key={group} aria-label={group}>
    <h3>{group}</h3>
    <ul>{rows.filter(item => groupOf(item) === group).map(item => <SpecimenRow key={item.label} {...item} />)}</ul>
  </section>)}</div>
}

function TypographyReferencePage() {
  const values = useResolvedProperties(typographyProperties)
  const colorValues = useResolvedProperties(textColorProperties)
  // Section rhythm and the content indent (.sb-page-indent) come from the common Story page. Text Colors keeps its chip grid on the edge.
  return <ReferencePage title="폰트">
    <ReferenceSection title="Text Colors" note="">
      <TextColorChips values={colorValues} />
    </ReferenceSection>
    <StorySectionGrid className="hm-typo-type-grid">
      <ReferenceSection title="Font Family">
        <div className="hm-typo-rows sb-page-indent"><div className="hm-typo-row hm-typo-family">
          <div className="hm-typo-row-meta">
            <p className="hm-typo-kicker">Primary Typeface</p>
            <p className="hm-typo-family-name">Noto Sans KR</p>
          </div>
          <div className="hm-typo-row-preview">
            <p className="hm-typo-family-preview" lang="ko" style={{ fontFamily: "var(--hm-font-family-base)" }}>한맥 Hanmac 0123</p>
            <code className="hm-foundation-note hm-typo-token">--hm-font-family-base: {values["--hm-font-family-base"]}</code>
          </div>
        </div></div>
      </ReferenceSection>
      <ReferenceSection title="Font Weight">
        <div className="hm-typo-rows hm-typo-weights sb-page-indent">{weights.map(({ property, label }) => <article className="hm-typo-row hm-typo-weight" key={property}>
          <div className="hm-typo-row-meta">
            <p className="hm-typo-weight-meta"><strong>{label}</strong> <span className="hm-foundation-note">{values[property]}</span></p>
            <code className="hm-foundation-note hm-typo-token">{property}</code>
          </div>
          <p className="hm-typo-row-preview hm-typo-weight-preview" style={{ fontWeight: `var(${property})` }}>한맥 Hanmac 0123</p>
        </article>)}</div>
      </ReferenceSection>
    </StorySectionGrid>
    <ReferenceSection title="Typography Specimens">
      <div className="hm-typo-specimens sb-page-indent"><SpecimenGroups rows={textRows} /><SpecimenGroups rows={controlRows} /></div>
    </ReferenceSection>
  </ReferencePage>
}
// The sidebar name is "폰트"; `id` keeps the existing Story ID (foundation-typography--all) stable.
const meta = { title: "Foundation/폰트", id: "foundation-typography", parameters: { layout: "fullscreen" } } satisfies Meta
export default meta
export const All: StoryObj<typeof meta> = { name: "폰트", render: () => <TypographyReferencePage /> }