Set of UI components based on React.

Usage no npm install needed!

<script type="module">
  import sisCcDotstatsuiteUiComponents from 'https://cdn.skypack.dev/@sis-cc/dotstatsuite-ui-components';




UI-Components is a lib of React components. The goal is to collect pure visual UI components, isolated from business logic driving them in applications. Components from this lib are currently used in data-explorer and data-viewer from the .Stat Suite. If components from this library are still used and maintained, they are deprecated regarding their dependencies, and are planned to be replaced by components from visions library.

setup (dev)

  1. run npm i
  2. run npm start to dev with hot reloading on http://localhost:3001


  1. run npm i -S @sis-cc/dotstatsuite-ui-components
  2. import { MyComponent } from '@sis-cc/dotstatsuite-ui-components;

folder structure

├── src                                   # source code
│   ├── components                        # components
│   │   ├── SomeComponent                 # component specific folder
│   │   │   ├── index.js                  # component implementation
│   │   │   ├── some-component.test.js    # structural test (jest snapshot)
│   │   │   ├── some-component.story.js   # story (storybook)
│   │   ├── index.js                      # components module interface
│   ├── logic                             # ui logic
│   │   ├── index.js                      # ui logic module interface
│   ├── index.js                          # visions module interface (and entry point)


In order to rationalize the dependencies of the components, authorized dependencies should be discussed:


  • a component should have a dedicated folder
  • a component should be tested (expected coverage is over 80%)
    • run npm test to test all components
    • run npm run test:u to update snapshots
    • run npm test -p <string|regexp> to scope tests
  • a component should have a complete story
    • all usecases should be covered
    • all props should be configurable through knobs
  • code should pass lint configuration
    • run npm run lint:fix to automatically fix common issues
    • run npm run lint to check code quality
  • a component should have a deep definition of its relevant propTypes