Link, NavLink, and other updates

- Adds Link and NavLink components and related documentation;
- Misc updates of other documentation;
- Sets up ESLint and fixes existing errors.

Author: birdofpreyru

.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "./config/babel/node-ssr"
+  ]
+}

.eslintignore

@@ -0,0 +1,3 @@
+__coverage__
+dist
+node_modules

.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "./config/eslint/default.json"
+}

.gitignore

@@ -1 +1,2 @@
+dist
 node_modules

CHANGELOG.md

@@ -1,5 +1,4 @@
 # Topcoder React Utils Changelog
 
 ### v0.0.x
-Intial version of the package. A big journey starts here.
-- Standard Babel configurations for JS/JSX modules compilation during Webpack build, and for code execution in Node environment with support of server-side rendering.
+Pre-release drafts of the initial package version. A big journey starts here.

README.md

@@ -1,13 +1,18 @@
 # Topcoder React Utils
-The [Topcoder](https://www.topcoder.com) collection of generic ReactJS configurations, components and utilities to be shared between all internal and external ReactJS projects developed by the Topcoder community.
+The [Topcoder](https://www.topcoder.com) collection of generic ReactJS
+configurations, components and utilities to be shared between all internal and
+external ReactJS projects developed by the Topcoder community.
 
 ### Installation
 Install this package as
 ```
 $ npm install --save topcoder-react-utils
 ```
 
-You are done if you will use only components and utilities provided by this package. If you are to use configurations, you must also install peer dependencies. If you like to explicitly add them to the `package.json` of your project do
+You are done if you will use only components and utilities provided by this
+package. If you are to use configurations, you must also install peer
+dependencies. If you like to explicitly add them to the `package.json` of your
+project do
 ```
 $ npm install -g install-peerdeps
 $ install-peerdeps topcoder-react-utils
@@ -23,16 +28,19 @@ then add to your `package.json` the following script:
 "postinstall": "install-peerdeps -S topcoder-react-utils"
 ```
 
-Now, in both cases, `$ npm install` will install all necessary dependencies, but in the second case they won't be stored into your `package.json`.
+Now, in both cases, `$ npm install` will install all necessary dependencies, but
+in the second case they won't be stored into your `package.json`.
 
-#### Configurations
-- [**Babel Configurations**](docs/babel-config.md) — Standard configurations for [Babel](https://babeljs.io/);
-- [**ESLint Configurations**](docs/eslint-config.md) — Standard configurations for [ESLint](https://eslint.org/).
+### Configurations
+- [**Babel Configurations**](docs/babel-config.md) — Standard configurations
+for [Babel](https://babeljs.io/);
+- [**ESLint Configurations**](docs/eslint-config.md) — Standard
+configurations for [ESLint](https://eslint.org/).
 
-#### Components
-*To be added*
+### Components
+- [**Link and NavLink**](docs/link-and-navlink.md) &mdash; Auxiliary wrappers around [React Router](https://github.com/ReactTraining/react-router)'s `<Link>` and `<NavLink>` components; they help to handle external and internal links in a single uniform manner;
 
-#### Utilities
+### Utilities
 *To be added*
 
 ### Development

config/babel/node-ssr.js

@@ -14,7 +14,7 @@ const transformAssetsPluginOptions = {
 config.plugins = config.plugins.concat([
   'dynamic-import-node',
   ['transform-assets', transformAssetsPluginOptions],
-  [ 'css-modules-transform', cssModulesTransformPluginOps ],
+  ['css-modules-transform', cssModulesTransformPluginOps],
 ]);
 
 const moduleResolverPluginOps
@@ -33,9 +33,10 @@ switch (process.env.BABEL_ENV) {
   case 'test':
     cssModulesTransformPluginOps.generateScopedName = '[path][name]___[local]';
     break;
+  default:
 }
 
-module.exports = (apt, ops) => {
+module.exports = (apt, ops = {}) => {
   const baseAssetsOutputPath = ops.baseAssetsOutputPath || '';
   transformAssetsPluginOptions.name
     = `${baseAssetsOutputPath}/images/[hash].[ext]`;

config/babel/webpack.js

@@ -6,8 +6,8 @@ const reactCssModulesPluginOps = {
   filetypes: {
     '.scss': {
       syntax: 'postcss-scss',
-    }
-  }
+    },
+  },
 };
 
 const config = {

config/webpack/default.js

@@ -0,0 +1,111 @@
+/* NOTE: At the moment this file is just a draft, thus skip by linter */
+/* eslint-disable */
+
+const _ = require('lodash');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
+const forge = require('node-forge');
+const fs = require('fs');
+const moment = require('moment');
+const path = require('path');
+const webpack = require('webpack');
+
+/**
+ * Creates a new Webpack config object.
+ * @param {String} context Base URL for resolution of relative config paths.
+ * @param {String} publicPath Base URL for the output of the build assets.
+ * @param {Object|String|String[]} entry Entry points. If an object is passed in
+ *  the "polyfills" entry point will be extended or appended to include some
+ *  polyfills we consider obligatory. If a string or an array is passed in,
+ *  it will be turned into "main" entry point, and the "polyfills" entry point
+ *  will be added to it.
+ */
+module.exports = function newConfig(context, publicPath, entry) {
+  /* Writes UTC timestamp of the build time into .build-timestamp file. */
+  const buildTimestamp = moment().toISOString();
+  fs.writeFileSync(path.resolve(context, '.build-timestamp'), buildTimestamp);
+
+  /* Writes a random 32-bit key into .build-key file. This key can be used for
+   * encryption purposes. */
+  const buildKey = forge.random.getBytesSync(32);
+  fs.writeFileSync(path.resolve(context, '.build-key', buildKey));
+
+  /* Entry points normalization. */
+  let entry2 = _.isObject(entry) ? _.cloneDeep(entry) : { main: entry };
+  if (!entry2.polyfills) entry2.polyfills = [];
+  else if (!_.isArray(entry2.polyfills)) entry2.polyfills = [entry2.polyfills];
+  entry2.polyfills = _.union(entry2.polyfills, [
+    'babel-polyfill',
+    'nodelist-foreach-polyfill',
+  ]);
+
+  return {
+    context,
+    entry: entry2,
+    node: {
+      __dirname: true,
+      fs: 'empty',
+    },
+    output: {
+      chunkFilename: '[name].js',
+      filename: '[name].js',
+      path: path.resolve(__dirname, path.resolve(context, 'build')),
+      publicPath: `${PUBLIC_PATH}/`,
+    },
+    plugins: [
+      new ExtractCssChunks({
+        filename: '[name].css',
+      }),
+      new webpack.DefinePlugin({
+        BUILD_KEY: JSON.stringify(buildKey),
+        'process.env': {
+          BUILD_TIMESTAMP: JSON.stringify(buildTimestamp),
+          FRONT_END: true,
+        },
+      })
+    ],
+    resolve: {
+      alias: {
+        /* Aliases to JS an JSX files are handled by Babel. */
+        assets: path.resolve(context, 'src/assets'),
+        components: path.resolve(context, 'src/shared/components'),
+        styles: path.resolve(context, 'src/styles'),
+      },
+    },
+    rules: [{
+      /* Loads font resources from "src/assets/fonts" folder. */
+      test: /\.(eot|otf|svg|ttf|woff2?)$/,
+      include: [/src[/\\]assets[/\\]fonts/],
+      options: {
+        outputPaths: '/fonts/',
+        publicPath,
+      },
+    }, {
+      /* Loads JS and JSX moudles, and inlines SVG assets. */
+      test: /\.(jsx?|svg)$/,
+      exclude: [/node_modules/],
+      loader: 'babel-loader',
+      options: {
+        babelrc: false,
+        extends: 'topcoder-react-utils/config/babel/webpack.json',
+        forceEnv: 'production',
+      },
+    }, {
+      /* Loads image assets. */
+      test: /\.(gif|jpe?g|png|svg)$/,
+      loader: 'file-loader',
+      options: {
+        outputPath: '/images/',
+        publicPath,
+      },
+    }, {
+      /* Loads CSS stylesheets. It is assumed that CSS stylesheets come only
+       * from dependencies, as we use SCSS inside our own code. */
+      test: /\.css$/,
+      use: ExtractCssChunks.extract({
+        fallback: 'style-loader',
+        use: ['css-loader'],
+      }),
+    }],
+  };
+};

docs/babel-config.md

@@ -1,13 +1,17 @@
 # Babel Configurations
 Standard configurations for [Babel](https://babeljs.io/).
 
-**Why?** — We use Babel to support latest JavaScript specifications in our projects, and to allow for some fancy features in our code. The standard Babel configurations ensure that the same code patterns are supported in all of our apps.
+**Why?** — We use Babel to support latest JavaScript specifications in our
+projects, and to allow for some fancy features in our code. The standard Babel
+configurations ensure that the same code patterns are supported in all of our apps.
 
 Several Babel configurations are provided by this package:
 
-- [**config/babel/node-ssr**](#node-ssr) — Babel configuration for NodeJS compilation of JS and JSX modules (server-side ReactJS rendering);
+- [**config/babel/node-ssr**](#node-ssr) — Babel configuration for NodeJS
+compilation of JS and JSX modules (server-side ReactJS rendering);
 
-- [**config/babel/webpack**](#webpack) — Babel configuration for Webpack compilation of JS and JSX modules.
+- [**config/babel/webpack**](#webpack) — Babel configuration for Webpack
+compilation of JS and JSX modules.
 
 Use them as presets in your `.babelrc`, e.g.
 ```json
@@ -27,40 +31,84 @@ To set options provided by a preset:
 }
 ```
 
-As the presets are JS modules, you can also wrap them into your own JS code to create a special preset that customizes Babel configuration in any necessary way. If you feel that the modification you need is useful for any generic ReactJS app, feel free to open GitHub issue ticket to discuss an update of our default configurations.
+As the presets are JS modules, you can also wrap them into your own JS code to
+create a special preset that customizes Babel configuration in any necessary
+way. If you feel that the modification you need is useful for any generic
+ReactJS app, feel free to open GitHub issue ticket to discuss an update of our
+default configurations.
 
-These presets may behave differently in different Babel environments. You can set the environment with `BABEL_ENV` environment variable, or with `forceEnv` option of the Webpack's `babel-loader`.
+These presets may behave differently in different Babel environments. You can
+set the environment with `BABEL_ENV` environment variable, or with `forceEnv`
+option of the Webpack's `babel-loader`.
 
 ### Configuration Details
 
-- <a name="node-ssr">**`config/babel/node-ssr.json`**</a> &mdash; Babel configuration for NodeJS compilation of JS and JSX modules (server-side ReactJS rendering);
-
-  - Presets: [env](https://www.npmjs.com/package/babel-preset-env), [react](https://www.npmjs.com/package/babel-preset-react), [stage-2](https://www.npmjs.com/package/babel-preset-stage-2);
-
-  - Uses [`babel-plugin-css-modules-transform`](https://www.npmjs.com/package/babel-plugin-css-modules-transform) to convert CSS and SCSS imports into objects with keys and values being the original and transformed class names. The transformed class names will match the class names generated by the `babel-plugin-react-css-modules` plugin, mentioned below;
-
-  - Uses [`babel-plugin-dynamic-import-node`](https://www.npmjs.com/package/babel-plugin-dynamic-import-node) to support dynamic `import(..)` statemens;
-
-  - Uses [`babel-plugin-inline-react-svg`](https://www.npmjs.com/package/babel-plugin-inline-react-svg) to embed imported SVG files into the complied JS modules;
-
-  - Uses [`babel-plugin-module-resolver`](https://www.npmjs.com/package/babel-plugin-module-resolver) to setup the following paths as the roots for resolution of relative imports: `./src/shared`, `./src`. It will also apply path resolution to the first argument of `resolveWeak(..)` functions encountered in the compiled code;
-
-  - Uses [`babel-plugin-react-css-modules`](https://www.npmjs.com/package/babel-plugin-react-css-modules) to transform `styleName` props of ReactJS components into globally unique `className` props. Generated class names are verbose in *development* and *test* Babel environment, for the ease of debugging; and they are short 6-symbols hashes in *production* Babel environment, for compactness of the compiled JS and CSS modules;
-
-  - Uses [`babel-plugin-tranform-assets`](https://www.npmjs.com/package/babel-plugin-transform-assets) to convert GIF, JPEG, JPG, and PNG imports into `/images/[FILE_HASH].[FILE_EXTENSION]` URL strings. Use the **`baseAssetsOutputPath`** preset option to prefix generated paths with an arbitrary path;
-
-  - Uses [`babel-plugin-transform-runtime`](https://www.npmjs.com/package/babel-plugin-transform-runtime) to optimized complied JS modules (it externalizes references to helpers and builtins, automatically polyfilling the code without polluting globals).
-
-- <a name="webpack">**`config/babel/webpack`**</a> &mdash; Babel configuration for Webpack compilation of JS and JSX modules.
-
-  - Presets: [env](https://www.npmjs.com/package/babel-preset-env), [react](https://www.npmjs.com/package/babel-preset-react), [stage-2](https://www.npmjs.com/package/babel-preset-stage-2);
-
-  - Uses [`babel-plugin-inline-react-svg`](https://www.npmjs.com/package/babel-plugin-inline-react-svg) to embed imported SVG files into the complied JS modules;
-
-  - Uses [`babel-plugin-module-resolver`](https://www.npmjs.com/package/babel-plugin-module-resolver) to setup the following paths as the roots for resolution of relative imports: `./src/shared`, `./src`;
-
-  - Uses [`babel-plugin-react-css-modules`](https://www.npmjs.com/package/babel-plugin-react-css-modules) to transform `styleName` props of ReactJS components into globally unique `className` props. Generated class names are verbose in *development* and *test* Babel environment, for the ease of debugging; and they are short 6-symbols hashes in *production* Babel environment, for compactness of the compiled JS and CSS modules;
-
-  - Uses [`react-hot-loader/babel`](https://www.npmjs.com/package/react-hot-loader) to support hot module reloading in the *development* Babel environment;
-
-  - Uses [`babel-plugin-transform-runtime`](https://www.npmjs.com/package/babel-plugin-transform-runtime) to optimized complied JS modules (it externalizes references to helpers and builtins, automatically polyfilling the code without polluting globals).
+- <a name="node-ssr">**`config/babel/node-ssr.json`**</a> &mdash; Babel
+configuration for NodeJS compilation of JS and JSX modules (server-side ReactJS
+rendering);
+
+  - Presets: [env](https://www.npmjs.com/package/babel-preset-env),
+  [react](https://www.npmjs.com/package/babel-preset-react),
+  [stage-2](https://www.npmjs.com/package/babel-preset-stage-2);
+
+  - Uses [`babel-plugin-css-modules-transform`](https://www.npmjs.com/package/babel-plugin-css-modules-transform)
+  to convertCSS and SCSS imports into objects with keys and values being the
+  original and transformed class names. The transformed class names will match
+  the class names generated by the `babel-plugin-react-css-modules` plugin,
+  mentioned below;
+
+  - Uses [`babel-plugin-dynamic-import-node`](https://www.npmjs.com/package/babel-plugin-dynamic-import-node)
+  to support dynamic `import(..)` statemens;
+
+  - Uses [`babel-plugin-inline-react-svg`](https://www.npmjs.com/package/babel-plugin-inline-react-svg)
+  to embed imported SVG files into the complied JS modules;
+
+  - Uses [`babel-plugin-module-resolver`](https://www.npmjs.com/package/babel-plugin-module-resolver)
+  to setup the following paths as the roots for resolution of relative imports:
+  `./src/shared`, `./src`. It will also apply path resolution to the first
+  argument of `resolveWeak(..)` functions encountered in the compiled code;
+
+  - Uses [`babel-plugin-react-css-modules`](https://www.npmjs.com/package/babel-plugin-react-css-modules)
+  to transform `styleName` props of ReactJS components into globally unique
+  `className` props. Generated class names are verbose in *development* and
+  *test* Babel environments, for the ease of debugging; and they are short
+  6-symbols hashes in the *production* Babel environment, for compactness of the
+  compiled JS and CSS modules;
+
+  - Uses [`babel-plugin-tranform-assets`](https://www.npmjs.com/package/babel-plugin-transform-assets)
+  to convert GIF, JPEG, JPG, and PNG imports into
+  `/images/[FILE_HASH].[FILE_EXTENSION]` URL strings. Use the
+  **`baseAssetsOutputPath`** preset option to prefix generated paths with an
+  arbitrary path;
+
+  - Uses [`babel-plugin-transform-runtime`](https://www.npmjs.com/package/babel-plugin-transform-runtime)
+  to optimize complied JS modules (it externalizes references to helpers and
+  builtins, automatically polyfilling the code without polluting globals).
+
+- <a name="webpack">**`config/babel/webpack`**</a> &mdash; Babel configuration
+for Webpack compilation of JS and JSX modules.
+
+  - Presets: [env](https://www.npmjs.com/package/babel-preset-env),
+  [react](https://www.npmjs.com/package/babel-preset-react),
+  [stage-2](https://www.npmjs.com/package/babel-preset-stage-2);
+
+  - Uses [`babel-plugin-inline-react-svg`](https://www.npmjs.com/package/babel-plugin-inline-react-svg)
+  to embed imported SVG files into the complied JS modules;
+
+  - Uses [`babel-plugin-module-resolver`](https://www.npmjs.com/package/babel-plugin-module-resolver)
+  to setup the following paths as the roots for resolution of relative imports:
+  `./src/shared`, `./src`;
+
+  - Uses [`babel-plugin-react-css-modules`](https://www.npmjs.com/package/babel-plugin-react-css-modules)
+  to transform `styleName` props of ReactJS components into globally unique
+  `className` props. Generated class names are verbose in *development* and
+  *test* Babel environments, for the ease of debugging; and they are short
+  6-symbols hashes in the *production* Babel environment, for compactness of the
+  compiled JS and CSS modules;
+
+  - Uses [`react-hot-loader/babel`](https://www.npmjs.com/package/react-hot-loader)
+  to support hot module reloading in the *development* Babel environment;
+
+  - Uses [`babel-plugin-transform-runtime`](https://www.npmjs.com/package/babel-plugin-transform-runtime)
+  to optimize complied JS modules (it externalizes references to helpers and
+  builtins, automatically polyfilling the code without polluting globals).

docs/eslint-config.md

@@ -11,7 +11,7 @@ Under the hood it matches the standard [AirBnB ESLint](https://www.npmjs.com/pac
 To use it just create the following `.eslintrc`:
 ```json
 {
-  "extends": "topcoder-react-utils/config/eslint/default"
+  "extends": "./node_modules/topcoder-react-utils/config/eslint/default.json"
 }
 ```