@edquity/edquity-react-components

This project contains react components for Edquity web projects.

Folder structure

edquity-react-components
│
|    build.sh
|    package.json
|    README.md
│
└─── src
    └─── .mocks
    └─── .storybook
    └─── base
    └─── utilities
    └─── services
    |
    └─── modifiers
    └─── elements
    └─── blocks
    |
    └─── events
    └─── home
    └─── onbording
    └─── transactions

Available Scripts

In the project directory, you can run:

npm run storybook

Runs the storybook in development mode where you can browse and test react components.
Open http://localhost:9090/ to view it in the browser.

The page will reload if you make edits.

npm run test

Launches the test runner

npm run lint

Launches the lints

npm run prepare

Builds the components to the lib folder.

npm run deploy:beta

Builds the components to the lib folder and publish it to NPM with a beta tag. Make sure to run npm version to increase version number.

npm run deploy

Builds the components to the lib folder and publish it to NPM. Make sure to run npm version to increase version number.

npm run build:dev

Builds the components to the lib folder and copy lib folder to web-app node_modules.
This script expect that edquity-react-components and web-app project folders are in same folder.

Tools

https://storybook.js.org - Storybook is an open source tool for developing UI components in isolation for React https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-core - StoryShots adds automatic Jest Snapshot Testing for Storybook. https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-puppeteer - StoryShots + Puppeteer https://github.com/americanexpress/jest-image-snapshot - Jest matcher for image comparisons

Dependencies

https://gka.github.io/chroma.js - chroma.js is a small-ish zero-dependency JavaScript library (13.5kB) for all kinds of color conversions and color scales. https://github.com/JedWatson/classnames - A simple javascript utility for conditionally joining classNames together https://github.com/davidcetinkaya/embla-carousel-react - A tiny React.js wrapper for Embla Carousel http://numeraljs.com - A javascript library for formatting and manipulating numbers. https://github.com/jquense/yup - Object schema validation