NetGroup UI Component Library
Library for React components that are commonly used, visulaized with the help of Storybook
Getting started
Clone repo from http://tfs:8080/tfs/DefaultCollection/NG%20UI%20Component%20Library/_git/Component-Library?_a=contents&version=GBmaster
Prerequisites
Node.js, Npm
Installing
Install:
yarn/npm install
Run storybook:
yarn/npm run storybook
Open storybook in browser:
localhost:9001
Running tests
yarn/npm run test
Helpers
To add custom classes to any component use 'classes' prop. Example: classes="customclassname". Available for all components, except Icon. To add margins to any element, pass on of these 'margin-xl, margin-lg, margin-md, margin-sm, margin-xs' classes to a component with 'classes' attribute. classes="customclassname margin-xs" class
| class name | used for |
|---|---|
| "margin-t-xs" | margin top |
| "margin-b-xs" | margin bottom |
| "margin-l-xs" | margin left |
| "margin-r-xs" | margin right |
| class name | margin value |
|---|---|
| margin-xl | 2 rem |
| margin-lg | 1 rem |
| margin-md | 0.8 rem |
| margin-sm | 0.4 rem |
| margin-xs | 0.2 rem |
Bundling for distribution
To publish this library as @netgroup/component-library on npmjs.com just issue the publish command. This will run the "prepare" script which bundles the code into /dist directory prior to uploading it to npmjs.com package repository.
npm publish
To just bundle to /dist without publishing:
npm run build