Topcoder React Utils

The Topcoder collection of generic ReactJS configurations, components and utilities to be shared between all internal and external ReactJS projects developed by the Topcoder community.

Content

• Installation
• Reference
  • Configurations
  • Components
  • NodeJS Scripts
  • Redux Templates
  • Utilities
• Development
• License

Installation

Install the package as

$ npm install --save topcoder-react-utils
$ ./node_modules/.bin/topcoder-lib-setup

Then import the global stylesheet into the root ReactJS component of your app:

/* eslint-disable global-require */
if (process.env.NODE_ENV === 'production') {
  require('topcoder-react-utils/dist/prod/style.css');
} else {
  require('topcoder-react-utils/dist/dev/style.css');
}
/* eslint-enable global-require */

To upgrade this library to the latest version just execute again

$ ./node_modules/.bin/topcoder-lib-setup

Reference

Configurations

• Babel Configurations – Standard configurations for Babel;
• ESLint Configurations – Standard configurations for ESLint;
• Jest Configurations – Standard configurations for Jest;
• Stylelint Configurations – Standard configurations for Stylelint
• Webpack Configurations – Standard configurations for Webpack.

Components

• Avatar – The standard component for user avatars;
• Button – Handles buttons and button-like links (components that look like regular buttons, but behave as links) in the same uniform manner;
• Link and NavLink – Auxiliary wrappers around React Router's <Link> and <NavLink> components; they help to handle external and internal links in the same uniform manner;
• Modal – Themeable modal component;
• ScalableRect – Container that keeps the specified aspect ratio regardless the width you set.

NodeJS Scripts

• topcoder-lib-setup – Helps to install and upgrade topcoder-react-utils and other similar libraries.

Redux Templates

• Item – An async piece of data in Redux store.

Utilities

• Client – Client-side initialization code.
• Config – Isomorphic app config;
• Global Styles – Global styles necessary for a generic application;
• Isomorphy – Collection of helpers to deal with isomorphic aspects of the code;
• Jest utils – Collection of helpers to be used in Jest tests code;
• Redux utils – TO BE DOCUMENTED
• SCSS Mixins – Collection of useful style mixins;
• Server – Easy creation and launch of web-server with standard configuration, that serves a ReactJS application with or without server-side rendering, supports development tools (Hop Module Reloading), and can be further configured for the needs of specific projects.
• Webpack – Various utils related to the Webpack bundling process.

Development

For convenient development you can link this package into your host package:

1. Clone topcoder-react-utils to your machine, and checkout the branch you are going to work with;
2. Inside topcoder-react-utils folder:
   • Install dependencies with $ npm install;
   • Locate node_modules/extract-css-chunks-webpack-plugin/index.js and inside the isChunk(..) function (line #358) add return true; statement, so that this function always returns true. This step is necessary at the moment, because the check chunk instanceof Chunk check inside this function does not work as expected when Webpack config is spread across multiple inter-linked packages.
   • Run the dev build $ npm run build:dev. It will compile the package, and also will watch for the file changes to automatically re-compile it as necessary.
3. Inside the host package execute $ npm link PATH_TO_TOPCODER_REACT_UTILS_FOLDER. It will create a symlink from HOST_PACKAGE/node_modules/topcoder-react-utils to your local copy of the topcoder-react-utils package, so that any changes you do there become automatically available to the host package.

CI/CD is set up with CircleCI 2.0 for this repo. A commit to any branch, beside master will trigger testing of the commited code (it will run $ npm test and ensures that it does not fail). A commit to the protected master branch (only organization members and repo admins can commit to master) will trigger the testing, and, if successful, release of the updated package to the NPM registry.

For successful release to NPM you should bump the package version in the package.json. To do it conveniently you can use $ npm version UPDATE_TYPE command, where UPDATE_TYPE stays for one of patch/minor/major to bump up 2, 1, or 0 in a sample version number v0.1.2. This command will update package.json and package-lock.json, and create a new commit and tag in the checked-out Git branch. Mind that patch updates should not introduce any breaking changes into the codebase! Breaking changes should be done via minor or major update, and they should be documented in the CHANGELOG.

License

Topcoder React Utils is MIT Licensed