Component Authoring
This library is built from the ground-up to support several UI frameworks. We achieve this through clever package organization paired with TypeScript/Node's excellent module resolution.
Package Overview
For the purpose of authoring components, the following packages are relevant:
packages
angular(Angular component library)
angular-docs(angular docs site with examples and usage guidelines)
base(framework-agnostic TypeScript interfaces, component CSS, and common constants)
react(react component library)
react-docs(React docs site with examples and usage guidelines)
styles(global CSS variables and classes)
We'll be focusing on React, so let's forget about the Angular packages for now. This leaves us with the following packages:
packages
base
react
react-docs
styles
To summarize:
- Globally-scoped CSS variables and classes are located in
@qui/styles. - Component-specific CSS and TypeScript utilities are located in
@qui/base. - React components are located in
@qui/react. - React component documentation is located in
@qui/react-docs.
Continue on to the @qui/base component creation.