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)
- run
npm i
- run
npm start
to dev with hot reloading on http://localhost:3001
usage
- run
npm i -S @sis-cc/dotstatsuite-ui-components
-
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
- run
- 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
- run
- a component should have a deep definition of its relevant propTypes