OSI-LIFE DLS (Design Language System)

Design System Library for the osilife.com brand in general, it contains several React components such as Primary buttons, text fields, etc which can be imported in React, and are self-contained with styling, storybook stories, test suites, functional JSX code, etc.

Frameworks

• Node Package Manager link
• Yarn link
• StorybookJS link
• Adobe DSM integration link
• React link
• Gitlab NPM registry link
• Rollup JS link
• Jest link
• Eslint link

Local development

• Install npm package manager: brew install node.
• Install dependencies: yarn.
• Run storybook: yarn storybook.

Stories

• All stories are in individual component directories.
• The file names must be in the format: *.stories.js.
• Here are the guidelines for writing a particular story: link.

Linting

• eslint is used as a linting library.
• Run lint using yarn lint.
• Run lint and auto fix problems using yarn lint:fix.

Testing

• jest is used as a testing library, for running the tests, and mocking where needed.
• enzyme can be used at places to shallow mount the components.
• Run tests using yarn test.
• Run tests with live reload using yarn test:watch.