Carbon Design System components as Qwik components.
This library is an ongoing project to implement the React components of the Carbon Design System (v11) in Qwik.
The demo site has a Lighthouse score of 100 for Performance, Accessibility and Best Practices, including for mobile.
Storybook link
See components for the list of implemented (and unimplemented) components.
The basic project structure is as follows:
├── public/
│ └── ...
└── src/
├── components/
│ └── ...
├── internal/
│ ├── contexts
│ └── hooks
├── shared-props
└── index.ts
src/components: Root folder for all components, which are in sub-folders inkebab-caseformatinternal: Internal functions, types etc:contexts: Contexts to avoid prop drilling in certain circumstanceshooks: Custom hook functions (e.g.usePrefix)
shared-props: Props shared by multiple componentsindex.ts: The entry point the library -- all public components are exported from this filepublic/is the home folder for static resources in Vite.
There are vitest unit tests for each component (minimum coverage thresholds are set higher than 95% for all metrics). To run these:
pnpm test
To run them with coverage:
pnpm coverage
All pushes to the GitHub repo will trigger a coverage run and a build run (which includes a linting check).
The linter is ESLint. The spellcheck plugin is used (if you encounter a word not in the dictionary, just add it to the skipWords section of the .eslintrc.json file in the project root). ESLint is configured to format code using Prettier. TypeScript is configured in strict mode. See Contributing for more details on setup.
pnpm start
This will launch a file called test.tsx (invoked from root.tsx) which is just a simple page containing components for preview purposes.
The Carbon icons are Qwik components from the project carbon-icons-qwik.
pnpm build
See Contributing
See CHANGELOG