[brandyscarney]

What This Does

Brings the react-vite starters in line with the Ionic tutorial app (tutorial-photo-gallery-react), so an app created with ionic start has the same lint, formatting, and test setup the tutorials teach against.

New Behavior

Apps generated from the React starters now:

• Lint with ESLint 10 and @ionic/eslint-config, and format with Prettier and @ionic/prettier-config. npm run lint checks both and npm run lint:fix fixes both.
• Run unit tests with Vitest 5, jsdom 30, and @testing-library/jest-dom 6.
• Run end-to-end tests with Playwright instead of Cypress. Playwright starts the dev server itself.
• Use the scripts lint, lint:fix, test, test:unit, test:unit:watch, and test:e2e. These replace test.unit and test.e2e.

Changes

• base:
  • eslint.config.js now uses @ionic/eslint-config with react-hooks and react-refresh.
  • Added Prettier config and .prettierignore (skips android/ and ios/).
  • Added .editorconfig.
  • Recommends the ESLint and Prettier VS Code extensions.
  • Added playwright.config.ts.
  • Added Playwright output to .gitignore.
  • Removed the Cypress config, support files, and fixtures.
• Dependencies:
  • Added @ionic/eslint-config, @ionic/prettier-config, @playwright/test, and prettier.
  • Upgraded ESLint 10, eslint-plugin-react-hooks 7, eslint-plugin-react-refresh 0.5, Vitest 5, jsdom 30, jest-dom 6, and globals 17.
  • Removed cypress, eslint-plugin-react, typescript-eslint, and @testing-library/user-event.
• vite.config.ts only collects unit tests from src/.
• setupTests.ts:
  • Uses @testing-library/jest-dom/vitest.
  • Cleans up Testing Library after each test.
  • Has a complete matchMedia stub.
• Templates:
  • Each cypress/e2e/test.cy.ts is now an equivalent e2e/app.spec.ts.
  • Code is formatted by Prettier, with imports grouped and ordered.
  • Return types added to exported functions in the list template.
  • Removed the empty props interface in blank's ExploreContainer.
• Tabs ExploreContainer now uses id="container", matching the other React templates and the Angular and Vue tabs starters.
• Each ionic.starter.json test script now runs lint, build, unit tests, then Playwright e2e, without concurrently.

Notes

• The stylesheet imports in App.tsx keep their original order, so the CSS cascade is unchanged.
• Verified locally with npm run starters:test for all four templates.
• Related:
  • Tutorial app: chore(lint): add eslint and prettier with ionic configs and CI workflow tutorial-photo-gallery-react#72, chore(lint): fix lint warnings and fail lint on warnings tutorial-photo-gallery-react#73, chore(test): run unit tests with vitest and add playwright e2e tests tutorial-photo-gallery-react#75, test: cover taking, saving, loading, and deleting photos tutorial-photo-gallery-react#76
  • Docs that depend on this PR: docs: align tutorial, quickstart, and testing pages with the updated starters ionic-docs#4805