Codex/react starter contribution using AI

[adorayi]

Summary | Résumé

1-3 sentence description of the changed you're proposing, including a link to
a GitHub Issue # or Trello card if applicable.

Experiment by creating a React starter app using AI based on the existing Vue starter app#2331
This is one of our OKRs for GCDS.
Goal:

• Create a React starter app that passes e2e tests using the existing Vue starter app as a reference.
• Open a PR and contribute
• Developers to review and determine next steps

https://app.zenhub.com/workspaces/gc-design-system-6100624a19f4cf000e46e458/issues/gh/cds-snc/design-gc-conception/2331

---

Description en 1 à 3 phrases de la modification proposée, avec un lien vers le
problème (« issue ») GitHub ou la fiche Trello, le cas échéant.

The React starter now exists with localized routing, i18n, GCDS shell/components, typed report form flow, unit tests, e2e tests, a11y smoke tests, docs, lockfile, and repo CI wiring.

Key additions

New React starter: starter-apps/react/react-template
React starter docs: starter-apps/react/react-template/README.md
Starter-level React index doc: starter-apps/react/README.md

Repo docs updated

Root README now lists React starter: README.md
Starter apps index updated: starter-apps/README.md
Validation run

React:
npm run check passed
npm run test:e2e -- --project=chromium passed (10/10)

Notes

Vite shows chunk-size warnings for both starters (non-blocking).
Vue npm install reported existing audit vulnerabilities from dependency tree (not introduced by structural changes).

---

Fixed a bug:
Replace fragile text-based language-toggle clicks in React e2e tests with deterministic selectors based on gcds-header lang-href and target href.
This avoids shadow-DOM/text-render differences that show up in Firefox.

Implementation Changes
Update starter-apps/react/react-template/e2e/app.spec.ts:
In switches to french and switches to english, stop using page.click('text=Français') / page.click('text=English').
Add a tiny helper that:
Asserts gcds-header has expected lang-href (/fr/ or /en/).
Clicks the language toggle via href-based locator (for example gcds-header a[href="/en/"]).

Test instructions | Instructions pour tester la modification

Sequential steps (1., 2., 3., ...) that describe how to test this change. This
will help a developer test things out without too much detective work. Also,
include any environmental setup steps that aren't in the normal README steps
and/or any time-based elements that this requires.

Devs requested to review the quality, implementation and decide on next steps for this contribtution.

---

Étapes consécutives (1., 2., 3., …) qui décrivent la façon de tester la
modification. Elles aideront les développeurs à faire des tests sans avoir à
jouer au détective. Veuillez aussi inclure toutes les étapes de configuration
de l’environnement qui ne font pas partie des étapes normales dans le fichier
README et tout élément temporel requis.

[daine]

I just read the code for now, and found a few things that could be improved. @adorayi could we also remove all the changes to the vue folder? It shouldn't be in this PR since it's a separate scope of work.

[Copilot]

Pull request overview

Adds a new React + TypeScript starter app (modeled after the existing Vue starter) to help teams bootstrap GCDS-based apps with localized routing, i18n, and a basic page/form flow, along with unit and Playwright e2e/a11y coverage.

Changes:

• Introduces starter-apps/react/react-template (Vite + React Router localized routes, i18next, GCDS shell/components, sample pages).
• Adds unit tests (Vitest/Testing Library) and Playwright e2e + axe a11y smoke tests for the starter.
• Updates starter-app documentation and root README to list the new React starter.

Reviewed changes

Copilot reviewed 42 out of 44 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
starter-apps/react/react-template/vitest.config.ts	Adds Vitest config merged with Vite config.
starter-apps/react/react-template/vite.config.ts	Adds Vite config with React plugin and @ alias.
starter-apps/react/react-template/tsconfig.node.json	Adds tooling TS config (Vite/Vitest/Playwright).
starter-apps/react/react-template/tsconfig.json	Adds TS project references (app + node).
starter-apps/react/react-template/tsconfig.app.json	Adds app TS config for React code.
starter-apps/react/react-template/src/utils/githubIssue.ts	Adds helper to build prefilled GitHub issue URL.
starter-apps/react/react-template/src/types/report.ts	Adds report-a-bug form types + initial state.
starter-apps/react/react-template/src/setupTests.ts	Adds Vitest setup (jest-dom + i18n init).
starter-apps/react/react-template/src/routing/localizedRoutes.ts	Adds localized route helpers (route-key mapping, locale switching).
starter-apps/react/react-template/src/routing/localizedRoutes.test.ts	Adds unit tests for localized route helpers.
starter-apps/react/react-template/src/routing/constants.ts	Defines locales, route keys, and localized route segments.
starter-apps/react/react-template/src/routing/LocaleRoute.tsx	Locale guard + i18n/document attribute switching.
starter-apps/react/react-template/src/routing/AppRoutes.tsx	React Router route tree (localized slugs + NotFound).
starter-apps/react/react-template/src/pages/ReportABug.tsx	Implements report-a-bug form + confirmation + issue link.
starter-apps/react/react-template/src/pages/ReportABug.test.tsx	Unit test for report-a-bug submission flow.
starter-apps/react/react-template/src/pages/NotFound.tsx	Adds Not Found page content.
starter-apps/react/react-template/src/pages/NotFound.test.tsx	Unit test for Not Found content.
starter-apps/react/react-template/src/pages/Home.tsx	Adds Home page content.
starter-apps/react/react-template/src/pages/AboutTopic.tsx	Adds nested About Topic page.
starter-apps/react/react-template/src/pages/About.tsx	Adds About page linking to nested topic route.
starter-apps/react/react-template/src/main.tsx	App entry: router + GCDS CSS imports.
starter-apps/react/react-template/src/i18n/resources.ts	Adds EN/FR translation resources + locale metadata.
starter-apps/react/react-template/src/i18n/index.ts	Initializes i18next + sets <html lang/dir>.
starter-apps/react/react-template/src/components/AppShell.tsx	Adds GCDS header/topnav/breadcrumbs/container/footer shell.
starter-apps/react/react-template/src/components/AppShell.test.tsx	Unit test for language-toggle href behavior.
starter-apps/react/react-template/src/components/AppLink.tsx	Router-aware wrapper for GCDS link/nav/breadcrumb items.
starter-apps/react/react-template/public/favicon.ico	Adds starter favicon.
starter-apps/react/react-template/playwright.config.ts	Adds Playwright config + dev/CI webServer settings.
starter-apps/react/react-template/package.json	Adds starter dependencies/scripts (check, unit, e2e).
starter-apps/react/react-template/index.html	Adds Vite HTML template.
starter-apps/react/react-template/eslint.config.js	Adds ESLint flat config for TS/React.
starter-apps/react/react-template/e2e/reportABug/reportABugSubmission.spec.ts	E2E: happy-path form submission.
starter-apps/react/react-template/e2e/reportABug/reportABugErrors.spec.ts	E2E: required-field validation errors.
starter-apps/react/react-template/e2e/reportABug/reportABug.spec.ts	E2E: report-a-bug page + locale switch.
starter-apps/react/react-template/e2e/app.spec.ts	E2E: home page + locale toggle helper.
starter-apps/react/react-template/e2e/aboutPageBreadcrumbs.spec.ts	E2E: localized breadcrumbs across nested routes + locale switch.
starter-apps/react/react-template/e2e/a11y.spec.ts	Axe smoke tests for critical/serious violations.
starter-apps/react/react-template/README.md	Starter-specific setup and usage docs.
starter-apps/react/react-template/.prettierrc.json	Prettier config for the starter.
starter-apps/react/react-template/.gitignore	Starter-specific ignores (dist, reports, etc.).
starter-apps/react/README.md	Adds React starter index/structure documentation.
starter-apps/README.md	Updates starter-apps index to include React starter.
README.md	Updates root README starter apps list to include React starter.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

[melaniebmn]

Some semantic, consistency suggestions