[![Build Status](https://lt-devtool.visualstudio.com/Duet%20Design%20System/_apis/build/status/Duet%20Design%20System?branchName=master)](https://lt-devtool.visualstudio.com/Duet%20Design%20System/_build/latest?definitionId=58&branchName=master)
[![Version](https://img.shields.io/npm/v/@duetds/components.svg?style=flat-square&label=components)](https://www.npmjs.com/package/@duetds/components)

# Duet Components

This package includes Duet Web Components and related tools.

## Usage

For usage instructions, please see Duet Design System [documentation](https://www.duetds.com/using-components/).

## Architecture

This package is built with [Stencil.js](http://stenciljs.com/), 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]`
    1. add `[component-name].tsx`
    1. add `[component-name].scss`
    1. add `[component-name].e2e.ts`
    1. add `readme.md`
1. Implement component
1. Write tests
1. Write readme
    1. add info for docs
    1. add comprehensive examples
1. Test theming for both `default` and `turva`
1. Browser testing
1. Accessibility testing, following the [Duet accessibility checklist](https://www.duetds.com/accessibility/)
1. Test SSR
1. Add the following to `docs/`:
    1. An SVG icon for listing on component page
    1. Add to `changelog.md`

### Documentation and examples

- Documentation that is shown on [duetds.com](https://www.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](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](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](/dev-standards/) 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.