@gitlab/duo-ui NPM

Duo UI

Duo UI is a library that is home to all Duo Components which are shared across multiple Host systems.

Storbook

Latest main branch: https://gitlab-org.gitlab.io/duo-ui/

Usage

To use Duo UI in your project, add it as a dependency:
```
yarn add @gitlab/duo-ui
```
Note: Make sure to also install Duo UI's peer dependencies. Refer to the package.json for the list of peer dependencies and their expected versions.

Quick start - development

Note: Duo UI isn't designed to be built on Windows natively. Either WSL or GitPod can be used to set up a UNIX-like environment in which to build it.

Make sure you have Node 16.x (LTS) and Yarn 1.22 or newer.

# Clone the project
git clone git@gitlab.com:gitlab-org/duo-ui.git

# Navigate to the root of the project
cd duo-ui

# Install all the dependencies of the project
yarn # or yarn install

# Build and launch storybook to see the components in the browser
yarn storybook

Go to http://localhost:9001/

Testing

Unit tests

Components’ unit tests live in the tests/components. The tests are organized following the same directory structure used to organize components.

yarn test:unit runs all unit tests.
yarn test:unit:watch runs all unit tests in watch mode.
yarn test:unit:debug runs all unit tests and allow to attach a debugger to the test runner process.
yarn jest [name_pattern] runs spec files that match the specified name pattern.

Examples

yarn jest datepicker will match all spec files with a name that contains the word datepicker.
yarn jest datepicker -t "when draw event is emitted" goes a step further and only runs the test with a description that matches the argument passed to the t flag.

Visual regression tests

Duo UI uses visual snapshot tests to prevent introducing regressions with CSS and layout changes on components. Read more on this in the visual testing documentation.