Initial commit with new code

.babelrc

@@ -1,3 +1,9 @@
 {
-	"presets": ["@babel/preset-env", "@babel/preset-react"]
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-export-default-from"
+  ]
 }

.eslintrc

@@ -0,0 +1,4 @@
+{
+  "extends": ["standard", "standard-react"],
+  "parser": "babel-eslint"
+}

.gitignore

@@ -1,62 +1,7 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
 dist/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
+node_modules/
 
-# dotenv environment variables file
-.env
+/*/
+!/src
 
-# next.js build output
-.next
+/index.js

.npmignore

@@ -0,0 +1,8 @@
+node_modules/
+/src/
+
+.*
+
+build.js
+package-lock.json
+webpack.config.*

README.md

@@ -1,22 +1,38 @@
-# Topcoder - Navigation Component
+# Topcoder Navigation React
 
-## Install dependencies
+## Demo
 
-Run `npm install` to install the dependencies
+### Build the components
 
-## Build module
+Enter `navigation-component` and run:
 
-To build the module, run `npm run build`
+- `npm install`
+- `npm run build:lib`
 
-## Usage 
+### Run the demo
 
-```shell
-# Go to other project which depends on the community-nav-prototype, config its package.json so 
-# that the 'community-nav-prototype' points to the local foler path of community-nav-prototype:
-#
-# "dependencies": {
-#   "community-nav-prototype": "<local-path-to-community-nav-prototype>",
-#   ......
-# }
-#
+Run the following in the `navigation-component-demo` folder:
+
+- `yarn`
+- `yarn start`
+
+### Troubleshooting
+
+If you encounter invalid hook call error while running the demo, then:
+
+  - delete navigation-component-demo/node_modules/navigation-component/node_modules/react
+  - delete navigation-component-demo/node_modules/navigation-component/node_modules/react-dom
+
+and try again.
+
+## Getting Started
+
+### Install
+
+```
+npm i -D navigation-component
 ```
+
+### Assets
+
+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`.

build.js

@@ -0,0 +1,53 @@
+const fs = require('fs')
+const path = require('path')
+const rf = require('rimraf')
+const colors = require('colors/safe')
+const webpack = require('webpack')
+const baseConfig = require('./webpack.config.lib')
+
+const srcDir = path.resolve(__dirname, 'src')
+const componentsDir = path.resolve(__dirname, 'src/components')
+
+const files = fs.readdirSync(componentsDir)
+
+const components = []
+
+files.forEach(file => {
+  const name = file.replace(path.extname(file), '')
+  const config = Object.assign({}, baseConfig)
+  config.entry = path.join(componentsDir, file)
+  config.output.path = path.join(__dirname, name)
+  config.output.filename = 'index.js'
+  process.env.NODE_ENV === 'production' && rf.sync(config.output.path)
+  webpack(config, handleError)
+  components.push(name)
+})
+
+const config = Object.assign({}, baseConfig)
+config.entry = path.join(srcDir, 'index.js')
+config.output.path = __dirname
+config.output.filename = 'index.js'
+components.forEach(comp => {
+  config.externals[`./components/${comp}`] = `./${comp}`
+})
+webpack(config, handleError)
+
+function handleError (err, stats) {
+  if (err) {
+    console.error(colors.red(err.stack || err))
+    if (err.details) {
+      console.error(colors.red(err.details))
+    }
+  }
+  const info = stats.toJson()
+  if (stats.hasErrors()) {
+    info.errors.forEach(err => {
+      console.error(colors.red(err))
+    })
+  }
+  if (stats.hasWarnings()) {
+    info.warnings.forEach(warn => {
+      console.warn(colors.orange(warn))
+    })
+  }
+}