wfx-common-components

These are the most relevant technologies that this boilerplate includes.

• React: A JavaScript library for building user interfaces.
• TypeScript: Written in TypeScript language.
• SASS: Some good Sass practices to create the Styles.
• Autoprefixer: Automatically add vendor prefixes to these Styles.
• Webpack: Automation of tasks and compilation of the project.
• Babel: Transpiler to different versions of EcmaScript.
• Browserlist: To configure which browsers will support.
• Jest: Framework for testing.
• ESLint: Linting for Scripts.
• StyleLint: Linting for Styles.
• Prettier: Formatter for Scripts and Styles.
• EditorConfig: Formatter for files in general.
• Husky: Used for attaching to git hooks and run scripts.
• Inversify: You can optionally configure Dependency Injection.

Setup and scripts

Install all the dependencies.

$ yarn

Run the project for local development.

$ yarn start

Build the project for a production environment.

$ yarn build

Test your code.

$ yarn test

The linting is configured with husky and will run before commit, but you can run it.

$ yarn lint # (Will run scripts and styles linting with autofix)
$ yarn lint:scripts # (Will run ESLint)
$ yarn lint:styles # (Will run Stylelint)
$ yarn lint:editor # (Will run ECLint)

Run this command if you get this error
$ Error: ENOSPC: System limit for number of file watchers reached

$ echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

  If you are adding new components make sure add story book for the component including testcases. Follow below link on how to add storybook

  $ https://github.com/storybookjs/storybook/tree/master/app/react

  For best code practices follow this article by Airbnb <Airbnb JavaScript Style Guide>
  
  $ https://airbnb.io/javascript/react/