Add Storybook stories for all components and hooks

[Copilot]

The Storybook infrastructure has been in place since July 2025 but only Navigation and Page had stories. This fills out the library properly with 23 new files covering all key components and hooks.

Component stories (21 files, co-located with components)

Each story file uses args/argTypes for live controls, fn() for callbacks, and multiple named exports for meaningful visual states.

Component	Stories	Decorator
InputField, Dropdown, SearchInputField	error, disabled, required, adornment variants	—
DatePicker, DateTimePicker, LinnWeekPicker	required, disabled, min/max	LocalizationProvider + AdapterMoment
CreateButton, ReportDataGrid	—	MemoryRouter
PrevNextButtons	prev-only, next-only, disabled	Grid container
ConfirmDialog, SnackbarMessage	visible: true by default so the component is immediately visible in canvas	—
ReportDataGrid	totals, subtotals, drill-downs, colour attributes, row count	MemoryRouter

Hook documentation (2 MDX pages under src/hooks/)

useSearch.mdx and useDelete.mdx — each covers signature, parameters, return value, and annotated usage examples. MDX 3 (Storybook 9) doesn't support GFM pipe tables so these use HTML <table> elements.

Screenshots

InputField — canvas + 21 auto-wired controls:

ReportDataGrid — colour attribute rendering:

DatePicker — LocalizationProvider decorator working, min/max controls wired:

ConfirmDialog — open modal with editable title/button text controls:

useDelete MDX — rendered HTML tables for parameters and return value:

No existing source files were modified.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• storybook.js.org
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/react-components-library/react-components-library/node_modules/.bin/storybook build src/components/Panel.stories.js (dns block)
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/react-components-library/react-components-library/node_modules/.bin/storybook dev -p 6006 --no-open (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Goal

Add Storybook stories for the components and hooks in this library. The Storybook infrastructure is already in place (.storybook/main.js, deploy-github-pages.yml CI), but currently only Navigation.stories.js and Page.stories.js exist. We want to fill this out properly.

What to do

• Create a new branch called add-storybook-stories
• Add .stories.js files for all (or as many as practical) components under src/components/
• For hooks under src/hooks/, use Storybook docs-style MDX or stories with interactive demos where possible — if a hook is too backend-coupled (e.g. makes API calls), a simple MDX doc page explaining usage is fine
• Follow the style/pattern already established in src/stories/Navigation.stories.js as a reference
• Do not modify any existing component source files
• Do not modify Navigation.stories.js or Page.stories.js

Important context

• The library uses MUI (Material UI) — components use MUI primitives and sx props
• Storybook is configured with @storybook/react-webpack5 and @storybook/addon-docs
• Stories glob: ../src/**/*.stories.@(js|jsx|mjs|ts|tsx) — so stories can live alongside components or in src/stories/
• Prefer co-locating stories next to their component (e.g. src/components/InputField.stories.js) rather than putting everything in src/stories/
• Read each component's source file before writing its story so props/args are accurate
• Use args and argTypes in stories so Storybook controls work
• Where a component has multiple meaningful visual states (e.g. disabled, error, loading), add multiple named stories for them
• For components that require complex context or redux stores, keep stories simple with mocked/static props and add a note in the story description
• The existing Navigation.stories.js uses a MemoryRouter wrapper — use similar patterns for any components that use React Router links

Components to cover (at minimum)

InputField, Dropdown, CheckboxWithLabel, OnOffSwitch, DatePicker, DateTimePicker, LinnWeekPicker, BackButton, CreateButton, SaveBackCancelButtons, PrevNextButtons, ExportButton, LinkButton, Loading, ErrorCard, SnackbarMessage, ConfirmDialog, Panel, Breadcrumbs, SearchInputField, ReportDataGrid

Hooks to document: useSearch, useDelete — MDX doc pages are fine for these.

Reference files

• .storybook/main.js — Storybook config
• .storybook/preview.js — global decorators/parameters
• src/stories/Navigation.stories.js — existing story to use as style reference
• src/components/<ComponentName>.js — read each one before writing its story

The following is the prior conversation context from the user's chat exploration (may be truncated):

User: can you read this repo and the last few commits to get a feel for it?

Assistant: Here's a summary of what I found:

---

🗂️ linn/react-components-library

Description: A common repository of reusable React components presented in a Storybook development environment.

• Language: JavaScript
• Default branch: main
• Visibility: Public (under the linn GitHub org)
• Open issues: 5
• Active since: December 2018
• GitHub Pages: Enabled (likely hosting the Storybook)

---

👥 Contributors (from recent commits)

Primarily lewisrenfrew (you!) and richardiphillips, with some contributions from OliverMclachlan.

---

🕓 Recent Commit Highlights

Date	Commit	Author
Apr 20, 2026	Option to hide obsolete values when selecting but still display old ones (#396)	richardiphillips
Mar 3, 2026	Add autoComplete param (#395)	richardiphillips
Feb 27, 2026	Version bump (#394)	lewisrenfrew
Feb 27, 2026	Mostly minor updates; ESLint downgrade (#393)	lewisrenfrew
Jan 12, 2026	Add .toString() in useSearch (#390)	OliverMclachlan
Dec 23, 2025	Support colour attributes in ReportDataGrid (#389)	richardiphillips
Dec 5, 2025	Add useDelete hook (#387)	OliverMclachlan
Nov 10, 2025	Minor package updates (#384)	lewisrenfrew
Sep 22, 2025	Fix file uploader (avoid global usage, housekeeping) (#381)	lewisrenfrew
Sep 11–16, 2025	ReportDataGrid row count option & show/hide tweaks (#379, #380)	richardiphillips
Jul 4, 2025	Storybook resurrect - re-setup Storybook with GH Pages deploy (#371)	lewisrenfrew
Jul 3, 2025	First two dark mode issues (#370)	richardiphillips

---

🔍 Overall Feel

This is an internal shared React component library for the Linn organisation, built with:

• MUI (Material UI) components (based on sx prop references and DataGrid mentions)
• Custom hooks like useSearch, useDelete
• A ReportDataGrid component that's seen a lot of activity (row counts, colour attributes, dark mode)
• A Storybook environment for development/documentation, recently resurrected and deployed to GitHub Pages
• Regular **...

This pull request was created from Copilot chat.