KeywordSearchInput

Lens-icon keyword search field with an inline × clear button, shared by the /products/ and /notes/ filter UIs.

Buttons & Controls

Default

Placeholder

Empty

With value

English placeholder

Interactive

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for KeywordSearchInput — migrated to the repo-root story contract // (`lib/styleguide/story-contract`; epic #1647, wave-3 batch D / #1655). // // Purely presentational — holds no debounce/URL-param state itself; callers // own that (see `products-page-content.tsx` / `notes-filter-island.tsx`). // `Default`'s demo wraps a local stateful component so the live-controls // preview can type into the field — `Story.render()` itself must stay a // pure, hook-free function (the contract calls it directly in tests). import { useState } from 'preact/hooks'; import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { KeywordSearchInput } from './keyword-search-input'; import type { KeywordSearchInputProps } from './keyword-search-input'; const meta: StoryMeta = { title: 'KeywordSearchInput', category: 'Buttons & Controls', description: 'Lens-icon keyword search field with an inline × clear button, shared by the /products/ and /notes/ filter UIs.', usage: `import { KeywordSearchInput } from '@/src/components/shared/keyword-search-input';\n\n<KeywordSearchInput value={value} onChange={setValue} placeholder="キーワードでフィルタ" />`, }; export default meta; const DefaultDemo = ({ placeholder = 'キーワードでフィルタ' }: { placeholder?: string }) => { const [value, setValue] = useState(''); return <KeywordSearchInput value={value} onChange={setValue} placeholder={placeholder} />; }; export const Default = defineStory<KeywordSearchInputProps>({ name: 'Default', controls: [ { type: 'text', prop: 'placeholder', label: 'Placeholder', defaultValue: 'キーワードでフィルタ', }, ], render: ({ placeholder = 'キーワードでフィルタ' } = {}) => ( <DefaultDemo placeholder={placeholder} /> ), }); export const Empty = defineStory({ name: 'Empty', render: () => ( <KeywordSearchInput value="" onChange={() => {}} placeholder="キーワードでフィルタ" /> ), }); export const WithValue = defineStory({ name: 'With value', render: () => ( <KeywordSearchInput value="OXI ONE" onChange={() => {}} placeholder="キーワードでフィルタ" /> ), }); export const EnglishPlaceholder = defineStory({ name: 'English placeholder', render: () => <KeywordSearchInput value="" onChange={() => {}} placeholder="Filter by keyword" />, }); const InteractiveInput = () => { const [value, setValue] = useState(''); return ( <KeywordSearchInput value={value} onChange={setValue} placeholder="キーワードでフィルタ" /> ); }; export const Interactive = defineStory({ name: 'Interactive', render: () => <InteractiveInput />, });