@nbcuniversal-paint/nbcu-react-components v0.73.0

NBCU React JS components library

Repository includes React Styleguidedist for demo and development.

NPM package contains /src/components only.

Setup repo and styleguide

git clone git@bitbucket.org:nbcuniversal/nbcu-react-components.git

cd nbcu-react-components/

npm install

You cannot add @nbcuniversal-paint/nbcu-react-components as a dependency of itself, but you can link to imports work.

npm link @nbcuniversal-paint/nbcu-react-components

Run

npm run styleguide

Include package in project

npm i @nbcuniversal-paint/nbcu-react-components --save

Formatting Code Automatically

Prettier is an opinionated code formatter with support for JavaScript, CSS and JSON. With Prettier you can format the code you write automatically to ensure a code style within your project. See the Prettier's GitHub page for more information, and look at this page to see it in action.

To format our code whenever we make a commit in git, we need to install the following dependencies:

npm install --save husky lint-staged prettier

• husky makes it easy to use githooks as if they are npm scripts.
• lint-staged allows us to run scripts on staged files in git. See this blog post about lint-staged to learn more about it.
• prettier is the JavaScript formatter we will run before commits.

Now we can make sure every file is formatted correctly by adding a few lines to the package.json in the project root.

Add the following line to scripts section:

  "scripts": {
+   "precommit": "lint-staged",
    "prepush": "npm run lint && npm run test",
    "prepare": "./node_modules/.bin/nwb build-react-component",

NOTES ::

"prepublish": "./node_modules/.bin/babel ./src/components --out-dir ./dist/components --source-maps --presets es2015,react-app --plugins babel-plugin-add-module-exports",
"build": "./node_modules/.bin/babel ./src/components --out-dir ./dist/components --source-maps --presets es2015,react-app --plugins babel-plugin-add-module-exports",

Commits & Releases

Releases are made on the develop branch automatically determined by semantic-release during the pipeline build.

Commit messages are linted and must follow the configured format conventional in order for releases to be made.

Commit format:

type(SCOPE): commit message

Examples:

fix(logger): fixes incorrect status code :bug:

feat(users): adds persistent auth :seedling:

Adds persistent authentication using localstorage to store jwt token's and timestamps to automatically refresh the access token using a web worker.

Commit types:

  'build',
  'ci',
  'chore',
  'docs',
  'feat',
  'fix',
  'perf',
  'refactor',
  'revert',
  'style',
  'test'

The commit message can contain the following:

• :seedling: :seedling: when adding a new feature
• :bug: :bug: when fixing a bug
• :books: :books: when adding or updating documentation
• :nail_care: :nail_care: when making changes to code style (e.g. lint settings)
• :recycle: :recycle: when refactoring code
• :fire: :fire: when removing code or files (including dependencies)
• :racehorse: :racehorse: when improving performance
• :white_check_mark: :white_check_mark: when adding or updating tests
• :construction_worker: :construction_worker: when updating the build process
• :bowtie: :bowtie: when updating CI
• :house: :house: when performing chores
• :new: :new: when adding a new dependency
• :arrow_up: :arrow_up: when upgrading a dependency
• :arrow_down: :arrow_down: when downgrading a dependency
• :back: :back: when reverting changes