@noisytrumpet/osi-dls NPM

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.

Widgets

widgets are created under src/widgets
they need to be added to src/widgets/index.js to be able to export them into the /lib folder
to import them into another application import { WIDGET_NAME } from "@dotcom/dls" -->

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.