# @datarobot/design-system

The library of reusable react components.

## Scripts

To build package run:

```shell script
npm run build
```

**Note:** this command is executed as a part of the related command in the root directory.

There are several available test commands:

```shell script
npm test
npm run test:watch
npm run test:watch-debug
npm run test:watch-all
npm run test:ci
```

To debug specific test use `npm run test:watch-debug test-name.test.js` and then connect to debugger from IDE or Chrome Dev tools.

## Usage

### Styles

Load all components styles + default (dark theme) as shown here:

```jsx
import '@datarobot/design-system/styles/index.min.css'; // or 'import '@datarobot/design-system/styles/index.css'
```

To load more themes use:

```jsx
import '@datarobot/design-system/styles/themes/light.min.css'; // or 'import '@datarobot/design-system/styles/themes/light.css'
```
### Localization

```jsx
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n.use(initReactI18next).init({
  lng: 'en',
  interpolation: {
    escapeValue: false,
  },
  nsSeparator: false,
});
```

### CommonJS & esm

**Note:** The module system will be applied base on your bundler set up

```jsx
import { Pill } from '@datarobot/design-system/pill';

const App = () => (
  <>
     <Pill>
        <code>javaScript</code>
     </Pill>
  </>
);
```

### UMD

```jsx
import { Pill } from '@datarobot/design-system/js/pill';

const App = () => (
  <>
     <Pill>
        <code>javaScript</code>
     </Pill>
  </>
);
```
