@duetds/components

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

• Create component files
  • add directory for component under src/components/[component-name]
  • add [component-name].tsx
  • add [component-name].scss
  • add [component-name].e2e.ts
  • add readme.md
• Implement component
• Write tests
• Write readme
  • add info for docs
  • add comprehensive examples
• Test theming for both default and turva
• Browser testing
• Accessibility testing, following the Duet accessibility checklist
• Test SSR
• Add the following to docs/:
  • An SVG icon for listing on component page
  • 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.