Duet Components

This package includes Duet Web Components and related tools.

Usage

For usage instructions, please see Duet Design System documentation.

Architecture

This package is built with Stencil.js, a compiler and toolchain for building web components. The component source code is written in TypeScript + JSX (TSX), with stylesheets written in SCSS.

Development

The following are the most commonly used commands during development:

• npm start - Compile components, start watching for changes, start local development server
• npm test - Compile components, start watching for changes, start local development server and run tests.

The local development server started by npm start or npm test serves a files located at /src/prototypes/. Any local changes or new components are available on this page, so this can be used as a testing ground when developing.

On that page you can also press ctrl + p to choose any of the component fixtures to work on.

How to develop new components

1. Create component files
   1. add directory for component under src/components/[component-name]
   2. add [component-name].tsx
   3. add [component-name].scss
   4. add [component-name].e2e.ts
   5. add readme.md
2. Implement component
3. Write tests
4. Write readme
   1. add info for docs
   2. add comprehensive examples
5. Test theming for both default and turva
6. Browser testing
7. Accessibility testing, following the Duet accessibility checklist
8. Test SSR
9. Add the following to docs/:
   1. An SVG icon for listing on component page
   2. Add to changelog.md

Documentation and examples

• Documentation that is shown on duetds.com acts as our primary component development platform. To get started locally, open /docs/ directory and run npm install and npm start.
• Once the server is up and running, you can access the local development environment by pointing your browser to http://localhost:8000. The components section in the documentation will be empty at this point.
• Next, go to /packages/components/ directory and run npm install and npm start that starts up the component watch and build tasks.
• If you now open any of the *.tsx, *.scss, or readme.md files underneath /packages/components/src/components/ and hit save, that will trigger a rebuild task which also copies the necessary changes over to the local documentation running at http://localhost:8000.
• Editing *.tsx and *.scss files will generate a new JavaScript bundle, while editing the readme.md files only generates and copies over the documentation and component usage examples.
• When working on new components or editing existing ones, make sure to follow our code style guide found under the guidelines section.
• Component variation examples are inside each component’s readme.md, while the component templates are located under /docs/src/templates/ directory.

Copyright

Copyright © 2023 LocalTapiola/Turva.