react-components-lab

@dhi/react-components-lab

This package primarily serves as the incubator for components that are not yet ready to move to the core package/library

As developers use and test the components and report issues, the maintainers learn more about shortcomings of the components: missing features, accessibility issues, bugs, API design, etc. The older and more used a component is, the less likely it is that new issues will be found and subsequently need to introduce breaking changes.

This package is created using TypeScript and MaterialUI, built using Yarn and bundled using TSDX.

The flow of adding a component

We are aiming for making it as easy as possible for a component to be added to the lab. However, the component needs to fulfill some minimum requirements:

• The component cannot be implemented by styling a Material-UI component via the theme (for instance <Button /> or <Typography />). However, if the styling is complex enough and requires a lot of styling (for instance The <Slider /> component), it can be evaluated.
• The component implements an element of the DHI Design Guidelines or is otherwise generic enough in functionality and close enough to the DHI CVI that it is likely to find reuse in other projects.
• The component needs to be reviewed by at least one of the maintainers.

Showcase

Our library is showcased on the Lab Storybook

Setting up

Before installing the package, you will need a GitHub token scoped for the DHI organization on github. For doing so, you must have access to the DHI GitHub organization. This token needs to have the permission read:packages checked. For doing so, go to your profile -> settings -> developer settings -> personal access tokens.

After getting a token, create an npm configuration file .npmrc in the root of the react-components-lab package like this:

├── packages            
│   └── react-components-lab
│       └── .npmrc          # Npm config file for react-components-lab

And add the following code to it:

@dhi:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=yourToken

Usage

You can simply import the package using yarn or npm.

// with npm
npm install @dhi/react-components-lab

// with yarn
yarn add @dhi/react-components-lab

Contributing

If you would like to contribute to our project, please read the repository guidelines.

Documentation

In order to use our components, please follow the documentation.