(#21) Release for shared autocomplete

.changeset/autocomplete-component.md

@@ -0,0 +1,8 @@
+---
+'@nciocpl/react-components': minor
+---
+
+Add `Autocomplete` (NCIDS combobox) component and fix its packaging.
+
+- **Search-box features:** new `minChars` / `minCharsMessage` props (shows a "enter N or more characters" hint below the threshold), an `onSubmit` callback plus a built-in search button (Enter submits when no option is highlighted; a highlighted option is selected first), `highlightMatch` to bold the matched substring in each option, and a `searchButtonLabel` for localization.
+- **Styling now ships:** the component previously relied on a CSS-module (`Autocomplete.module.scss`) that the rollup pipeline silently dropped — class names resolved to `undefined` and no CSS was emitted to the bundled stylesheet. Styles are now plain `nci-autocomplete*` classes shipped via `@nciocpl/react-components/styles`.

.changeset/textinput-component.md

@@ -0,0 +1,5 @@
+---
+'@nciocpl/react-components': minor
+---
+
+Add `TextInput` (NCIDS Text Input) component. Wraps a native `<input>` with USWDS `usa-input` styling and supports text, email, password, tel, url, number, and search input types. Forwards standard input props for use as a controlled or uncontrolled input.

.npmrc

@@ -1,3 +1,3 @@
 @nciocpl:registry=https://npm.pkg.github.com
 engine-strict=true
-legacy-peer-deps=true
+legacy-peer-deps=true

src/components/ncids/Autocomplete/Autocomplete.stories.tsx

@@ -0,0 +1,212 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { Autocomplete } from './Autocomplete';
+import type { AutocompleteOption } from './Autocomplete';
+
+const fruits: AutocompleteOption[] = [
+	{ label: 'Apple', value: 'apple' },
+	{ label: 'Apricot', value: 'apricot' },
+	{ label: 'Avocado', value: 'avocado' },
+	{ label: 'Banana', value: 'banana' },
+	{ label: 'Blueberry', value: 'blueberry' },
+	{ label: 'Cherry', value: 'cherry' },
+	{ label: 'Coconut', value: 'coconut' },
+	{ label: 'Grape', value: 'grape' },
+	{ label: 'Kiwi', value: 'kiwi' },
+	{ label: 'Lemon', value: 'lemon' },
+	{ label: 'Mango', value: 'mango' },
+	{ label: 'Orange', value: 'orange' },
+	{ label: 'Peach', value: 'peach' },
+	{ label: 'Pear', value: 'pear' },
+	{ label: 'Pineapple', value: 'pineapple' },
+	{ label: 'Strawberry', value: 'strawberry' },
+	{ label: 'Watermelon', value: 'watermelon' },
+];
+
+const meta: Meta<typeof Autocomplete<AutocompleteOption>> = {
+	title: 'NCIDS/Autocomplete',
+	component: Autocomplete,
+	tags: ['autodocs'],
+	argTypes: {
+		debounceDelay: {
+			control: { type: 'number', min: 0, max: 1000, step: 50 },
+			description: 'Debounce delay in milliseconds',
+		},
+		minChars: {
+			control: { type: 'number', min: 0, max: 5, step: 1 },
+			description: 'Minimum characters before options load',
+		},
+		minCharsMessage: { control: 'text' },
+		highlightMatch: { control: 'boolean' },
+		disabled: { control: 'boolean' },
+		noOptionsMessage: { control: 'text' },
+		loadingMessage: { control: 'text' },
+		placeholder: { control: 'text' },
+	},
+};
+
+export default meta;
+type Story = StoryObj<typeof Autocomplete<AutocompleteOption>>;
+
+/** Basic usage with a synchronous list of options. */
+export const Default: Story = {
+	args: {
+		id: 'fruit-autocomplete',
+		label: 'Fruit',
+		options: fruits,
+		placeholder: 'Type to search…',
+		onChange: fn(),
+	},
+};
+
+/**
+ * Search-box configuration: a search (submit) button, a 3-character minimum,
+ * and bolded matches — mirrors the site banner search behaviour.
+ */
+export const SearchBox: Story = {
+	args: {
+		id: 'fruit-search',
+		label: 'Search',
+		options: fruits,
+		placeholder: 'Search…',
+		minChars: 3,
+		highlightMatch: true,
+		searchButtonLabel: 'Search',
+		onChange: fn(),
+		onSubmit: fn(),
+	},
+};
+
+/** Asynchronous data loading with a simulated 400 ms network delay. */
+export const AsyncLoadOptions: Story = {
+	args: {
+		id: 'fruit-async',
+		label: 'Fruit (async)',
+		placeholder: 'Type to search…',
+		debounceDelay: 300,
+		loadOptions: (query: string) =>
+			new Promise((resolve) =>
+				setTimeout(
+					() =>
+						resolve(
+							fruits.filter((f) =>
+								f.label.toLowerCase().includes(query.toLowerCase())
+							)
+						),
+					400
+				)
+			),
+		onChange: fn(),
+	},
+};
+
+/** Customise the message when no option matches the search query. */
+export const CustomNoOptionsMessage: Story = {
+	args: {
+		id: 'fruit-no-opts',
+		label: 'Fruit',
+		options: fruits,
+		placeholder: 'Try "xyz"…',
+		noOptionsMessage: 'No matching fruit — try something else.',
+		onChange: fn(),
+	},
+};
+
+/** Custom option renderer that adds an emoji prefix. */
+export const CustomRenderOption: Story = {
+	args: {
+		id: 'fruit-custom',
+		label: 'Fruit',
+		options: fruits,
+		renderOption: (opt: AutocompleteOption, isHighlighted: boolean) => (
+			<span style={{ fontWeight: isHighlighted ? 'bold' : 'normal' }}>
+				🍓 {opt.label}
+			</span>
+		),
+		onChange: fn(),
+	},
+};
+
+/** Disabled state. */
+export const Disabled: Story = {
+	args: {
+		id: 'fruit-disabled',
+		label: 'Fruit',
+		options: fruits,
+		value: { label: 'Apple', value: 'apple' },
+		disabled: true,
+		onChange: fn(),
+	},
+};
+
+/** Controlled component — the parent manages the selected value. */
+const ControlledTemplate = (
+	args: React.ComponentProps<typeof Autocomplete<AutocompleteOption>>
+) => {
+	const [value, setValue] = useState<AutocompleteOption | null>(null);
+	return (
+		<div>
+			<Autocomplete {...args} value={value} onChange={(opt) => setValue(opt)} />
+			<p style={{ marginTop: '1rem' }}>
+				Selected:{' '}
+				<strong>{value ? `${value.label} (${value.value})` : 'none'}</strong>
+			</p>
+		</div>
+	);
+};
+
+export const Controlled: Story = {
+	render: (args) => <ControlledTemplate {...args} />,
+	args: {
+		id: 'fruit-controlled',
+		label: 'Fruit',
+		options: fruits,
+		placeholder: 'Pick a fruit…',
+	},
+};
+
+interface Country {
+	name: string;
+	code: string;
+}
+
+const countries: Country[] = [
+	{ name: 'United States', code: 'us' },
+	{ name: 'United Kingdom', code: 'uk' },
+	{ name: 'Canada', code: 'ca' },
+	{ name: 'Australia', code: 'au' },
+	{ name: 'Germany', code: 'de' },
+	{ name: 'France', code: 'fr' },
+	{ name: 'Japan', code: 'jp' },
+];
+
+const CustomOptionShapeTemplate = () => {
+	const [value, setValue] = useState<Country | null>(null);
+	return (
+		<div>
+			<Autocomplete<Country>
+				id="country"
+				label="Country"
+				options={countries}
+				getOptionLabel={(c) => c.name}
+				getOptionValue={(c) => c.code}
+				placeholder="Search countries…"
+				value={value}
+				onChange={(c) => setValue(c)}
+			/>
+			{value && (
+				<p style={{ marginTop: '1rem' }}>
+					Selected: <strong>{value.name}</strong> ({value.code})
+				</p>
+			)}
+		</div>
+	);
+};
+
+/** Using generic options with custom getOptionLabel / getOptionValue. */
+export const CustomOptionShape: Story = {
+	render: () => <CustomOptionShapeTemplate />,
+	args: {},
+};