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>
31 lines
1.4 KiB
TypeScript
31 lines
1.4 KiB
TypeScript
// Example D — existing Layer / Color components next to a NEW consumer control (SWSearchControl).
|
|
import { useState } from "react"
|
|
import { SWHeaderColorMenu, SWHeaderLayerMenu, SWTheme, type SWHeaderColorValue } from "@hm-design/sw"
|
|
import { colors, layers } from "./sample-data"
|
|
import { SWSearchControl } from "./SWSearchControl"
|
|
import "./example-layout.css"
|
|
|
|
export function ExampleDSearchExtension({ onEvent }: { onEvent?: (name: string) => void }) {
|
|
const [activeLayerId, setActiveLayerId] = useState("0")
|
|
const [color, setColor] = useState<SWHeaderColorValue>({ value: "ByLayer", swatch: "#ffffff" })
|
|
const [query, setQuery] = useState("")
|
|
return (
|
|
<SWTheme className="app-sw-bar" role="banner" aria-label="검색 헤더">
|
|
<div className="app-sw-surface" role="toolbar" aria-label="객체 찾기">
|
|
<SWHeaderLayerMenu
|
|
value={{ name: "0" }}
|
|
layers={layers}
|
|
activeLayerId={activeLayerId}
|
|
onLayerSelect={layer => { setActiveLayerId(layer.id); onEvent?.(`layer:${layer.id}`) }}
|
|
/>
|
|
<SWHeaderColorMenu
|
|
value={color}
|
|
colors={colors}
|
|
onColorSelect={option => { setColor({ value: option.label ?? option.color, swatch: option.color }); onEvent?.(`color:${option.id}`) }}
|
|
/>
|
|
<SWSearchControl value={query} onValueChange={setQuery} onSearch={text => onEvent?.(`search:${text}`)} />
|
|
</div>
|
|
</SWTheme>
|
|
)
|
|
}
|