Updates

Author: ThomasKranitsas

.babelrc

@@ -1,7 +1,2 @@
-dist/
 node_modules/
-
-/*/
-!/src
-
-/index.js
+/dist

.gitignore

@@ -1,38 +1,46 @@
 # Topcoder Navigation React
 
-## Demo
 
 ### Build the components
 
 Enter `navigation-component` and run:
 
 - `npm install`
-- `npm run build:lib`
+- `npm run build`
 
-### Run the demo
+Due to this repo is not npm package, so keep `dist` folder for other project use it
 
-Run the following in the `navigation-component-demo` folder:
 
-- `yarn`
-- `yarn start`
+## Getting Started
+
+### Install
 
-### Troubleshooting
+```
+npm install [email protected]:username/navigation-component.git#develop --save
+```
 
-If you encounter invalid hook call error while running the demo, then:
+### Usage
+- Example
+```
+import { TopNav } from 'navigation-component'
+```
 
-  - delete navigation-component-demo/node_modules/navigation-component/node_modules/react
-  - delete navigation-component-demo/node_modules/navigation-component/node_modules/react-dom
+### Development
 
-and try again.
+```shell
+Install dependencies
+$ npm install
 
-## Getting Started
+# Run build
+$ npm run build
 
-### Install
+#Go to other project which depends on the navigation-component, config its package.json so that the 'navigation-component' points to the local folder path of navigation-component:
 
-```
-npm i -D navigation-component
-```
+# "dependencies": {
+#  "navigation-component": "<local-path-to-navigation-component>",
+#   ......
+# }
 
-### Assets
+# If you faced React Hook errors. Please remove 'node_modules', 'src' folder when you try it
 
-Copy `dist/font` and `dist/img` to web server root folder. You can put them nested in sub folder, but be sure to update `$font-path` and `$img-path` SASS variables in the `src/assets/sass/_global/_variables.scss`.
+```

.npmignore

@@ -0,0 +1,10 @@
+const configFactory = require('./lib-development')
+const path = require('path')
+
+const standardConfig = configFactory({
+  context: path.resolve(__dirname, '../..'),
+  entry: './src',
+  library: 'navigation-component'
+})
+
+module.exports = standardConfig

README.md

@@ -0,0 +1,193 @@
+/**
+ * Base Webpack configuration for ReactJS libraries. It is further extended for
+ * development and production use in the "lib-development" and "lib-production"
+ * configs.
+ */
+
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const path = require('path')
+const webpack = require('webpack')
+
+/**
+ * Creates a new Webpack config object.
+ *
+ * @param {Object} ops Configuration params. This allows to conveniently set
+ *  the options that should be customized for specific libraries.
+ *
+ * @param {String} ops.babelEnv BABEL_ENV to be used by Babel during the build.
+ *
+ * @param {String} ops.context Base URL for resolution of relative config paths.
+ *
+ * @param {String} ops.cssLocalIdent Template for CSS classname
+ *  generation by css-loader (it will be passed into the "localIdentName" param
+ *  of the loader). It should match the corresponding setting in the Babel
+ *  config.
+ *
+ * @param {String} ops.entry Entry point of the library.
+ *
+ * @param {String} ops.library Name of the library.
+ *
+ * @param {String} ops.outputPath Output path.
+ *
+ * @return {Object} Webpack config.
+ */
+module.exports = function configFactory (ops) {
+  return {
+    context: ops.context,
+    entry: ops.entry,
+    externals: [
+      /@babel\/runtime/,
+      'lodash',
+      'moment',
+      'prop-types',
+      'react',
+      'react-css-super-themr',
+      /react-dom/,
+      'react-helmet',
+      /react-hot-loader/,
+      'react-redux',
+      'react-router-dom',
+      'redux',
+      'redux-actions',
+      'redux-devtools',
+      'redux-devtools-dock-monitor',
+      'redux-devtools-log-monitor',
+      'redux-promise',
+      'shortid',
+      'topcoder-react-utils',
+      'url-parse'
+    ],
+    mode: ops.mode,
+    output: {
+      filename: 'index.js',
+
+      // Workaround to fix umd build, restore webpack v3 behaviour
+      // https://github.com/webpack/webpack/issues/6677
+      // https://github.com/webpack/webpack/issues/6642
+      globalObject: "typeof self !== 'undefined' ? self : this",
+
+      library: ops.library,
+      path: ops.outputPath,
+      libraryTarget: 'umd'
+    },
+    plugins: [
+      new webpack.DefinePlugin({
+        'process.env': {
+          BABEL_ENV: JSON.stringify(ops.babelEnv),
+          NODE_ENV: JSON.stringify(ops.babelEnv)
+        }
+      }),
+      new MiniCssExtractPlugin({
+        filename: 'style.css'
+      })
+    ],
+    module: {
+      rules: [{
+        /* Handles fonts imports in url(..) instructions in CSS. Effectively,
+         * with such configuration it just rewrites those URLs to point to
+         * the original location of the fonts assets in
+         * the library being build. */
+        test: /\.(ttf|eot|svg)$/,
+        include: [
+          /src[/\\]assets[/\\]fonts/
+        ],
+        loader: 'file-loader',
+        options: {
+          name: './[name].[ext]',
+          outputPath: 'fonts/'
+        }
+      },
+      {
+        test: /\.(svg)$/,
+        include: [
+          /src[/\\]assets[/\\]images/
+        ],
+        loader: 'file-loader',
+        options: {
+          name: './[name].[ext]',
+          outputPath: 'images/'
+        }
+      },
+      {
+        // Match woff2 in addition to patterns like .woff?v=1.1.1.
+        test: /\.(woff|woff2)$/,
+        use: {
+          loader: 'url-loader',
+          options: {
+            // Limit at 20k. Above that it emits separate files
+            limit: 20000,
+
+            // url-loader sets mimetype if it's passed.
+            // Without this it derives it from the file extension
+            mimetype: 'application/font-woff',
+
+            // Output below fonts directory
+            name: 'fonts/[name].[ext]'
+          }
+        }
+      },
+      {
+        /* Loads JS and JSX moudles, and inlines SVG assets. */
+        test: /\.(jsx?)$/,
+        exclude: [
+          /node_modules/,
+          /src[/\\]assets[/\\]fonts/
+        ],
+        loader: 'babel-loader',
+        options: {
+          babelrc: false,
+          envName: ops.babelEnv,
+          presets: ['topcoder-react-utils/config/babel/webpack']
+        }
+      },
+      {
+        test: /\.svg$/,
+        include: [
+          /src[/\\]assets[/\\]images/
+        ],
+        use: {
+          loader: 'url-loader',
+          options: {
+            // Limit at 20k. Above that it emits separate files
+            limit: 20000,
+            mimetype: 'image/svg',
+            name: 'images/[name].[ext]'
+          }
+        }
+      },
+      {
+        oneOf: [
+          {
+            test: /\.module\.(css|sass|scss)$/,
+            use: [
+              'style-loader',
+              {
+                loader: 'css-loader',
+                options: {
+                  modules: true
+                }
+              },
+              'sass-loader'
+            ]
+          },
+          {
+            test: /\.(css|sass|scss)$/,
+            use: ['style-loader', 'css-loader', 'sass-loader']
+          }
+        ]
+      }
+      ]
+    },
+    resolve: {
+      alias: {
+        /* Aliases to JS an JSX files are handled by Babel. */
+        assets: path.resolve(ops.context, 'src/assets'),
+        components: path.resolve(ops.context, 'src/components'),
+        fonts: path.resolve(ops.context, 'src/assets/fonts'),
+        styles: path.resolve(ops.context, 'src/assets/sass')
+      },
+      extensions: ['.js', '.scss'],
+      symlinks: false
+    }
+  }
+}

build.js

@@ -0,0 +1,31 @@
+/**
+ * Development Webpack configuration for ReactJS libraries.
+ */
+
+const path = require('path')
+const baseFactory = require('./lib-base')
+
+/**
+ * Creates a new Webpack config.
+ *
+ * @param {Object} ops Configuration params. This helps to conveniently set
+ * the most useful options. You still can modify other config parameters with
+ * help of "webpack-merge", or by a direct mutation of the created config
+ * object.
+ *
+ * @param {String} ops.context Base URL for resolution of relative config
+ * paths.
+ *
+ * @param {String} ops.entry Entry point of the library.
+ *
+ * @return {Object} Webpack configuration.
+ */
+module.exports = function configFactory (ops) {
+  return baseFactory({
+    ...ops,
+    babelEnv: 'development',
+    cssLocalIdent: '[path][name]___[local]___[hash:base64:6]',
+    mode: 'development',
+    outputPath: path.resolve(__dirname, ops.context, 'dist/dev')
+  })
+}