Enterprise React Components

A Design System / Component Library Template for enabling graphic consistency and legibility across web development projects by creating reusable components and styles with accessible & legible documentation. Built with React 16 and Semantic UI React. Package Management via Yarn. Lint and Beautification handled by ESLint, Prettier, and Airbnb Config. Unit Testing executed by Jest with Enzyme. Continuous Integration & Deployment with Travis-CI and Github, but can easily be swapped out for any CI/CD system you require.

Core Libraries

• React React makes it painless to create interactive, scale-able UIs.
• Semantic UI React User Interface is the language of the web.
• Video-React The web video player built from the ground up for an HTML5 world using React library.
• Airbnb/rheostat Rheostat is a www, mobile, and accessible slider component built with React.
• Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
• Yarn Fast, reliable and secure dependency management.

Quick Start

Install

• yarn add enterprise-react-components - Install package from private NPM Registry

Usage Example

• Import Button component:

  import React, { Component } from 'react';
  import { Button } from 'enterprise-react-components';
  
  export default class App extends Component {
    render() {
      return (
        <Button />
      )
    }
  

Development Setup

Scripts

• yarn start - Install dependencies, run lint, run verbose tests, and deploy development server.
• yarn run build - Install dependencies, run lint, run silent tests, and create production bundle
• yarn run storybook - Build and deploy Storybook

Environment

• Install NVM (Optional)
• Install Node 8
• Install YarnPKG
• Install Git and run these commands to configure it:
  • > git config --global user.name "{FULL_NAME}"
  • > git config --global user.email {EMAIL}
  • > git config --global core.autocrlf false.
  • Refer to Advanced Git Configuration for additional information
• Setup SSH
• Clone Repository git clone [email protected]:nolindnaidoo/enterprise-react-components.git
• Setup & Publish NPM Registry

Git

The Git Feature Branch Workflow is a composable workflow that can be leveraged by other high-level Git workflows. This project utilizes the Github Flow, which allows for fast-paced and high-quality parallel development.

Github Flow:

• Create the branch. Make sure it begins with the feature/, hotfix/, bugfix/, semver/ prefix.
• Add commits
• Open a Pull Request
• Review & Collaborate changes
• Deploy and Test
• Merge

Merging from Main

A best practice is to perform merging when the working tree is clean. Use caution, first commit any unfinished work still desired, or reset the Git working tree. Choose > git stash and save the working tree until ready. Alternatively, reset the working tree. > git reset --hard

Staying up-to-date with the latest from main is beneficial to parallel development. Remote main represents the most stable and approved iteration of the product. In Parallel Development, updates to main may affect current implementation. Work with the latest from main by merging the latest from main into feature/{name} as frequently as possible, but only when necessary.

Merging from Main Procedure

• > git reset --hard or > git stash
• > git checkout main
• > git pull
• > git checkout "feature/{name}"
• > git merge main
• No Conflicts: Auto-merge Successful
• Conflicts: Resolve Conflicts and run:
  • > git add .
  • > git commit -m "merge main, resolved conflicts"
  • > git push

Merging to Main

• Make sure your feature branch is not behind the main. You can view it from the Branch Status view in the Behind/Ahead column.
• Verify that your feature branch builds successfully on TravisCI.
• Check your coverage against main. The Feature Branch should be greater than or equal to the main.
• Resolve or reply to all Pull Request comments.
• Use the Merge button on the Pull Request to merge back to main.
• Once the test is successful and no further changes are needed for sign off delete the original feature branch.

Unit Testing

• Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
• EnzymeComponent is a JavaScript testing utility for React.

Continuous Integration & Deployment

The following links provide enhanced awareness throughout the Agile SDLC process. Save as bookmarks for rapid development.

• Branch Status
• Pull Request Status
• TravisCI Repo Dashboard

ESLint

Enterprise React Components uses Airbnb ESLint rules for lint/syntax errors, along with Prettier for automated formatting and lint error fixing.

Exceptions

• class-methods-use-this is not always needed in lifecycle/render methods.
• react/no-unescaped-entities prevents characters that were meant as JSX escape characters.
• react/jsx-filename-extension forces .js as the extension for files with JSX.
• react/no-unused-prop-types fixes a bug when using PropTypes.shape.
• react/require-default-props was allowed to be undefined early on.

IDE's

Take advantage of advanced workflow features by using supported IDE's with the appropriate plugins.

Atom

• Install Atom
• Install Packages
  • atom-css-clean
  • autoclose-html
  • autocomplete-json
  • autocomplete-modules
  • busy-signal
  • file-icons
  • highlight-selected
  • html-escaper
  • intentions
  • language-babel
  • linter
  • linter-eslint
  • linter-htmlhint
  • linter-ui-default
  • markdown-preview-enhanced
  • pigments
  • prettier-atom
  • sort-lines
  • terminal-panel-uoa

Visual Studio Code

• Install Visual Studio Code
• Install Packages
  • christian-kohler.path-intellisense
  • dbaeumer.vscode-eslint
  • donjayamanne.githistory
  • emmanuelbeziat.vscode-great-icons
  • esbenp.prettier-vscode
  • formulahendry.auto-close-tag
  • vstirbu.vscode-mermaid-preview
  • wayou.vscode-todo-highlight
  • zhuangtongfa.Material-theme