Components and the allowlist

There are three kinds of component in the template:

1. Editorial (@csdr/editorial) — carry reports and analyses. Figure, Table, StatTile, Callout, Ref, KeyMessages, Abstract, DataDownload, Authors, Definition, Icon.
2. Charts (@csdr/charts) — Chart, LineChart, BarChart (build-time SVG), ChartIsland (interactive).
3. PatternFly React (@patternfly/react-core, @patternfly/react-table) — rendered server-side by Astro; used on landing, tools and docs. Only components in design/allowlist.json may be imported in apps/site.

Why an allowlist

PatternFly has ~80 components and every one of them is good; that is not the point. A report platform needs a small vocabulary that authors, agents and reviewers all recognise, and a place where every allowed thing has a live example. pnpm check (ESLint no-restricted-imports + a raw-class scan) fails the build otherwise, so drift is caught before review.

Extending the list

1. Add the component name to reactCore (or reactTable) in design/allowlist.json, then run pnpm pf:barrel (regenerates the entry map the build uses to resolve @patternfly/react-core imports — a name that is not in the map fails the build).
2. Add a page under apps/site/src/pages/design/ with a live example and its code, and an entry in apps/site/src/components/design/catalogue.ts.
3. Note it in design/COMPONENTS.md.

Never import patternfly.css, patternfly-base.css or @patternfly/react-core/dist/styles/base.css — the theme package supplies tokens and the base; components bring their own CSS.

PatternFly documentation, locally

The full PatternFly React docs and examples are in node_modules:

• node_modules/@patternfly/react-core/src/components/<Name>/examples/<Name>.md and *.tsx — pnpm pf:example Button "Variations" prints a section
• node_modules/@patternfly/react-icons/dist/esm/icons/*.js — pnpm icons find <term>
• The PatternFly MCP server adds design guidelines and JSON prop schemas: claude mcp add patternfly-mcp -- npx -y @patternfly/patternfly-mcp@latest