esalon-admin-react-components

esalon-admin-components-lib

Admin components lib + storybook integration in React

Setup

Inside cloned project folder install dependencies:

npm install

To start StoryBook

npm run storybook

To start as app

npm run start

See package.json for all available scripts

peerDependencies

This module has peerDependencies of

1. "react": "^16.9.0"
2. "react-dom": "^16.9.0"

Make sure you have them in dependencies in projects that use this package

To use this package in another app

A] From node regisrty

npm i esalon-admin-react-components

B] Using npm link

1. Checkout this project.

2. In project dir run:

   npm install
   npm run module
   npm link (OR sudo npm link)
   

3. In Parent/Consumer project run:

   npm link esalon-admin-react-components
   

4. You should now be able to import the components listed below using syntax:

   import { ComponentName } from 'esalon-admin-react-components

   Button,
   BUTTON_SIZES,
   BUTTON_TYPES,
   ButtonSelector,
   Checkbox,
   CloseSVG,
   LabelTextField,
   LoadingSpinner,
   Modal,
   MODAL_TYPE,
   SelectList,
   SlidingModal,
   DIRECTION,
   StateSelectList,
   TriangleSVG,
   ORIENTATION
   

5. You can also import color & font aliases:

   import { Colors, Fonts } from 'esalon-admin-react-components

   See https://github.com/eSalon/esalon-admin-components-lib/blob/master/src/styles/constants.js

Running the tests

Automated structural and visual tests may be run on all components, as follows:

npm test

Structural Test

A snapshot copy of the structure of UI components reporting any issues or changes. To run just the structural test:

npm test structural

Visual Regression Tests

Visual snapshots of UI components reporting differences in pixels. Note: a runing instance of StoryBook is required to test locally. To run just the visual tests:

npm test visual

Updating snapshots

To update structural and visual snapshots to the latest and commit the changes:

npm run cleantest