As a developer primarily working with GDS the intention is to replace the use of CRA and Jest with Vite and Vitest. This project is a test bed to ensure that implementation features work both in development and production builds.
- Template project with ESLint and Prettier
- Code built with React and Typescript
- Routing, including pre-loading data with React Router 6.4
- API calls handled by a Fetch wrapper built with Typescript Generics
- API caching and additional features supported by React Query v4
- API headers with simple state management from Valtio
- API development mocking mechanism to eliminate the need for additional test server functionality
- GDS Table component supporting sorting and pagination built on top of React Table v8
- GDS Accordion components, built using Headless UI, implementing both the original and latest designs
- GDS Autocomplete There is no current control available, that doesn't included deprecated React code, so built a new one based on React-Select
- GDS Sass styling integrated into Vite build
- Docker Compose implementation hosted at http://localhost:3000/
- Vitest unit tests including server mocking with Mirage
- Accessibility testing with Jest Axe
- Storybook v7 demos implementing the examples shown in GDS Tables
yarn installyarn devyarn build
yarn previewdocker compose build
docker compose upyarn test
yarn test:uiyarn storybook- There is currently a known issue with running Vite in Chrome, with the developer tools open, on MacOS and Linux. Please refer to the folowing solution.
Thanks to:
- Andrew Marshall for his work on GDS in PA Consulting. These components are contained in the folder components/GDS.
MIT License © 2022-Present Barry Jacobs