Front end development

Conventions

We are currently developing our front-end views by building React components along with Storybook.

MAKE SURE YOU DOWNLOAD THE LATEST CHANGES FROM THE react BRANCH FIRST

• All web UI components can be found at app/javascript/bundles/UI/components
• All stories are found at app/javascript/stories/ui
• All Jest tests lay on app/javascript/spec

Code quality

One of our main goals is to stick to Airbnb's JavaScript style guide to make our code cleaner and clearer.

https://github.com/airbnb/javascript

Development Environment

Installing the required tools

• To install Node.js

  brew install node

• To install Yarn

  brew install yarn

• To install Storybook and other dependencies

  npm install

  yarn install

Running front-end tests

• Install and configuration here we change the path to app/javascript/spec.
• Write your tests in app/javascript/spec/. Quick start tutorial here
• You can test a file with yarn test nameOfFile for example yarn test Input.test.js if the file is in app/javascript/spec.
• Or run all test files with yarn test.

Component styling

We are currently using CSS components for component styling. You can check out the following example to get started:

https://github.com/gajus/react-css-modules#css-modules

Starting storybook

npm run storybook