shkim4andClaude Opus 5.5
e27385e0f0
- Ship an AI guide in the package (ai/: usage rules, component catalog, design rules, composition patterns) via package.json files. - Add examples A-D that import only public exports: default header, viewer header, feature header, and a consumer-side search extension that reuses SWHeaderInput and the public SW tokens. - Add SW-only checks: docs/API consistency, tarball consumer project (React 19 + TS + Vite typecheck/build) and a browser check (27/27). - No runtime source or public API change; README gains a pointer section. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
47 lines
2.6 KiB
TypeScript
47 lines
2.6 KiB
TypeScript
// Example C — composition (2nd priority): a feature-focused header in a different order
|
|
// File → Line style → Text style → Dimension style → Print
|
|
import { useState } from "react"
|
|
import {
|
|
SWHeaderActions, SWHeaderDimensionStyleMenu, SWHeaderDocumentTitle, SWHeaderLineStyleMenu, SWHeaderTextStyleMenu, SWTheme,
|
|
type SWHeaderDimensionStyleValue, type SWHeaderLineStyleValue, type SWHeaderTextStyleValue,
|
|
} from "@hm-design/sw"
|
|
import { dimensionStyles, lineTypes, lineWeights, textStyles } from "./sample-data"
|
|
import "./example-layout.css"
|
|
|
|
export function ExampleCFeatureHeader({ onEvent }: { onEvent?: (name: string) => void }) {
|
|
const [lineStyle, setLineStyle] = useState<SWHeaderLineStyleValue>({ name: "ByLayer", weight: "ByLayer", scale: "1.00" })
|
|
const [textStyle, setTextStyle] = useState<SWHeaderTextStyleValue>({ font: "Arial", name: "Standard" })
|
|
const [dimensionStyle, setDimensionStyle] = useState<SWHeaderDimensionStyleValue>({ name: "Standard" })
|
|
return (
|
|
<SWTheme className="app-sw-bar" role="banner" aria-label="스타일 헤더">
|
|
{/* No logo before the file well, so the consumer layout gives it its own left edge. */}
|
|
<div className="app-sw-file-edge">
|
|
<SWHeaderDocumentTitle title="C0020101-006-평면및종단면도(06)" onClick={() => onEvent?.("document")} />
|
|
</div>
|
|
<div className="app-sw-surface" role="toolbar" aria-label="스타일">
|
|
<SWHeaderLineStyleMenu
|
|
value={lineStyle}
|
|
lineTypes={lineTypes}
|
|
lineWeights={lineWeights}
|
|
onLineTypeSelect={type => { setLineStyle(current => ({ ...current, name: type.name })); onEvent?.(`lineType:${type.id}`) }}
|
|
onLineWeightSelect={weight => { setLineStyle(current => ({ ...current, weight: weight.name })); onEvent?.(`lineWeight:${weight.id}`) }}
|
|
onScaleChange={scale => { setLineStyle(current => ({ ...current, scale })); onEvent?.(`lineScale:${scale}`) }}
|
|
/>
|
|
<SWHeaderTextStyleMenu
|
|
value={textStyle}
|
|
textStyles={textStyles}
|
|
onTextStyleSelect={style => { setTextStyle({ font: style.font, name: style.name }); onEvent?.(`textStyle:${style.id}`) }}
|
|
/>
|
|
<SWHeaderDimensionStyleMenu
|
|
value={dimensionStyle}
|
|
dimensionStyles={dimensionStyles}
|
|
onDimensionStyleSelect={style => { setDimensionStyle({ name: style.name }); onEvent?.(`dimensionStyle:${style.id}`) }}
|
|
/>
|
|
</div>
|
|
<div className="app-sw-window">
|
|
<SWHeaderActions showPopupGuide={false} onPrint={() => onEvent?.("print")} />
|
|
</div>
|
|
</SWTheme>
|
|
)
|
|
}
|