@sis-cc/dotstatsuite-ui-components

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

usage

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)

dependencies

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

• blueprintjs UI lib to speed-up design
• glamorous encapsulate style within component (maintainability)
• classnames utils to deal with css classes
• recompose FP lib to implement HOC logic
• react-intl i18n supports
• ramda FP utility lib

rules

• 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