edisen-ui

edisen-ui

A demonstration of react components for communication with product, and exploration/definition of Vigor's react usage.

Setup

Run the following commands from repo directory:

Running for development

Make sure you're using the compatible NodeJS version following .nvmrc instructions. If you have installed nvm utility, run the following command:

nvm use

Set up .env following example .example.env.

Set up .npmrc with a correct npmjs private token following example:

//registry.npmjs.org/:_authToken=YOUR_NPMJS_TOKEN

Install dependencies:

npm install

Run in development mode:

npm run start-dev

Building for production

Run the following command:

npm run build

The project will be viewable in the browser at a link provided. On edit of a project file, the build will be re-rendered and the browser refreshed.

NOTE: When started it will take a few seconds to boot up, but re-renders due to file updates should be quick due to caching.

Decisions (soft)

In creating this demo, there were a few soft decisions made. These can be reviewed and updated as needed.

State manager

The library redux was chosen.

• https://www.npmjs.com/package/redux

Router

The universal (non-react specific) library router5 was chosen.

• https://router5.js.org/
• The routes changes are state driven from redux https://router5.js.org/integration/with-redux
• The wrapping library used is react-router5

Styling engine

We're using scss for our styles. All styles were ported from the previous vue project.

Component Sizing

We will be going with the Atomic Design strategy for classifying/grouping components. (Decision 14: https://vigorsystemsinc.atlassian.net/wiki/spaces/DEV/pages/490471443/Team+Decisions)

Atomic Design can be read about here: http://bradfrost.com/blog/post/atomic-web-design/

The directory structure will reflect the naming convention as follows:

• atoms
• molecules
• organisms
• templates
• pages

Pug templating support

Pug support in react components is given by the Babel "transform-react-pug" plugin

Component Specific Styling

A decision still needs to be made on this. However, there are a number of options outlined here:

https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822

To run cypress tests

npm install
cypress_username='foo@bar.com' cypress_password='yourPassword' npm run cy:test

alternatively use cypress.env.json if you don't want to pass cypress_username and cypress_password variables every time. See example below:

{
  "username": "foo@bar.com",
  "password": "yourPassword"
}

To run tests headed

npm run cy:headed

To run tests from cypress runner

npm run cy:open

By default test will run against RC env (baseUrl set in cypres.json). To run against ceburc

npm run cy:test-ceburc