@datarobot/design-system

The library of reusable react components.

Scripts

To build package run:

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:

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:

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

To load more themes use:

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

Localization

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

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

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

UMD

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

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