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>
41 lines
1.9 KiB
TypeScript
41 lines
1.9 KiB
TypeScript
// Example A — reuse (1st priority): the complete SW Header, unchanged. Existing projects keep this code.
|
|
import { useState } from "react"
|
|
import { SWHeader, type SWHeaderColorMode, type SWHeaderColorValue } from "@hm-design/sw"
|
|
import { colors, dimensionStyles, documents, layers, lineTypes, lineWeights, textStyles } from "./sample-data"
|
|
|
|
export function ExampleADefaultHeader({ onEvent }: { onEvent?: (name: string) => void }) {
|
|
const [activeDocumentId, setActiveDocumentId] = useState(documents[0].id)
|
|
const [activeLayerId, setActiveLayerId] = useState("0")
|
|
const [color, setColor] = useState<SWHeaderColorValue>({ value: "ByLayer", swatch: "#ffffff" })
|
|
const [colorMode, setColorMode] = useState<SWHeaderColorMode | null>("byLayer")
|
|
const log = (name: string) => () => onEvent?.(name)
|
|
return (
|
|
<SWHeader
|
|
documentTitle={documents.find(item => item.id === activeDocumentId)?.name ?? ""}
|
|
logoAlt="예제 SW"
|
|
documents={documents}
|
|
activeDocumentId={activeDocumentId}
|
|
onDocumentSelect={document => { setActiveDocumentId(document.id); onEvent?.(`document:${document.id}`) }}
|
|
onDocumentNew={log("document:new")}
|
|
onDocumentOpen={log("document:open")}
|
|
layers={layers}
|
|
activeLayerId={activeLayerId}
|
|
onLayerSelect={layer => { setActiveLayerId(layer.id); onEvent?.(`layer:${layer.id}`) }}
|
|
color={color}
|
|
colors={colors}
|
|
colorMode={colorMode}
|
|
onColorSelect={option => { setColor({ value: option.label ?? option.color, swatch: option.color }); setColorMode(null); onEvent?.(`color:${option.id}`) }}
|
|
onColorModeChange={mode => { setColorMode(mode); onEvent?.(`colorMode:${mode}`) }}
|
|
lineTypes={lineTypes}
|
|
lineWeights={lineWeights}
|
|
textStyles={textStyles}
|
|
dimensionStyles={dimensionStyles}
|
|
onHomeClick={log("home")}
|
|
onPrint={log("print")}
|
|
onPopupGuide={log("popupGuide")}
|
|
onMinimize={log("minimize")}
|
|
onClose={log("close")}
|
|
/>
|
|
)
|
|
}
|