electrode-io · jchip · Jun 20, 2017 · Jun 20, 2017 · Jun 20, 2017
@@ -1,262 +1,9 @@
-# Archetype: Electrode React Component
+# Archetype: Electrode React Component Dev
 
 [![NPM version][npm-image]][npm-url] [![Dependency Status][daviddm-image]][daviddm-url] [![devDependency Status][daviddm-dev-image]][daviddm-dev-url] [![npm downloads][npm-downloads-image]][npm-downloads-url]
 
 A Walmart Labs flavored react component archetype.
 
-## Creating A New Component
-
-First, install [yeoman](http://yeoman.io/) to help quickly create an empty component:
-
-```bash
-$ npm install -g yo
-```
-
-Now, `yo` can scaffold the project for you.
-
-```bash
-$ yo electrode-component
-```
-
-You should see something similar to the below session:
-
-```sh
-$ yo electrode-component
-
-Welcome to the Electrode Component generator
-
-Were going to set up a new Electrode Component, ready for development with
-gulp, webpack, demo, electrode component archetype, live-reload
-
-? What is your Package/GitHub project name? (e.g., 'wysiwyg-component') product-card
-? What is the ClassName for your component? ProductCard
-? What will be the npm package name? product-card
-? What will be the GitHub organization username (e.g., 'walmartlabs')? electrodeio
-? What is your name? (for copyright notice, etc.) arpan nanavati
-? What is your GitHub Username? ananavati
-? What is the name of the GitHub repo this will be published at? product-card
-? Would you like to create a new directory for your project? Yes
-
-    create .babelrc
-    create .gitignore
-    create .npmignore
-    create .editorconfig
-    create gulpfile.js
-    create package.json
-    create README.md
-    create src/components/product-card.jsx
-    create src/styles/product-card.styl
-    create src/index.js
-    create demo/demo.jsx
-    create demo/demo.css
-    create demo/index.jsx
-    create demo/examples/product-card.example
-    create test/client/.eslintrc
-    create test/client/components/product-card.spec.jsx
-
-Your new Electrode Component is ready!
-
-Your component is in '/src' and your demo files are in '/demo/*'
-
-Type 'cd product-card' then 'gulp demo' to run the development build and demo tasks.
-```
-
-## Configuring an existing project / manual setup
-
-If you prefer to create your component manually or if you have an existing component that you want to migrate to using this archetype, follow the instructions below:
-
-###### run the following in your project
-
-```bash
-$ npm install --save-dev electrode-gulp-helper electrode-archetype-react-component electrode-archetype-react-component-dev
-```
-
-
-###### Add a `.babelrc` to your project
-
-The `.babelrc` needs to extend
-[the archetype's babel configuration](config/babel/.babelrc) in order to apply the presents (ES2015, React) and the plugins like i18n. If your project needs additional Babel settings (like using stage 0 features) you can add them to this file. See the [Babel docs](https://babeljs.io/docs/usage/babelrc/) for more information.
-
-```json
-{
-  "extends": "./node_modules/electrode-archetype-react-component/config/babel/.babelrc"
-}
-```
-
-###### Add a `gulpfile.js` to your project
-
-The `gulpfile.js` needs to extend
-[the archetype's gulp tasks](/arhcetype-gulpfile.js) in order to apply the shared tasks on your new/existing electrode component. Add this following lines of code to the newly created `gulpfile.js`
-
-```javascript
-"use strict";
-
-const exec = require("electrode-gulp-helper").exec;
-
-const tasks = {
-  "demo": ["generate", "server-dev"],
-  "demo-iso": ["dev-iso"],
-  "generate": ["generate-metadata", "generate-documentation"],
-  "generate-documentation": () => exec(`electrode-docgen --package ./package.json --src ./src --markdown components.md`),
-  "generate-metadata": () => exec(`electrode-docgen --package ./package.json --src ./src --metadata components.json`),
-  "prepublish": ["npm:prepublish"],
-  "preversion": ["check-cov"]
-}
-
-require("electrode-archetype-react-component")(tasks);
-```
-
-
-## Managing Dependencies
-
-The archetypes are split into two parts: `<archetype>` and `<archetype>-dev`. Both archetypes need to be in each component and should be included in the `package.json`'s `devDependencies`.
-
----
-
-## Project Structure
-
-This archetype assumes an architecture as follows:
-
-```
-demo/
-  demo.jsx
-  demo.css
-src
-  components/
-    *.jsx
-  styles/
-    *.css
-  index.js
-test
-  client/
-    spec/
-      components/
-        *.jsx?
-      *.jsx?
-    main.js
-    test.html
-.babelrc
-package.json
-```
-
-## CSS Modules
-
-By default, this archetype assumes you are using CSS-Modules + CSS-Next, you need
-to opt-in to stylus support by adding a `*.styl` to your *project's* `demo/demo.styl` & `src/styles/*.styl`
-
-## Gotchas
-
-For the `demo-iso` task to work, `demo/demo.jsx` has some limitations:
-
-* `demo/demo.jsx` can't use `react-router`
-* `demo/demo.jsx` can't import files that rely on webpack loaders e.g. `.styl` files.
-
-This is because the server rendering uses node for both routing and import statements.
-Specifically for routing, `react-router` instances create a history that relies on DOM availability.
-This will break server render with an error like this:
-`Unhandled rejection Invariant Violation: Browser history needs a DOM`
-
-## Demo server config
-
-If you would like to augment or override the demo server config you can add `archetype-demo-server.config.js` file to the root of the project. This file will be merged with the default config and passed into the `electrode-server` instance. Add any hapi plugins or settings here.
-
-```js
-// Sample archetype-demo-server.config.js
-module.exports = {
-  "plugins": {
-    "my-electrode-plugin": {}
-  }
-};
-```
-
-## Tasks exposed via npm scripts & gulp as part of the electrode-archetype-react-component
-
-```bash
-$ gulp help
-[13:02:10] Using gulpfile ~/walmart-oss/test-generator-electrode-component/product-card/gulpfile.js
-[13:02:10] Starting 'help'...
-
-Usage
-  gulp [TASK] [OPTIONS...]
-
-Available tasks
-  archetype:check ..............   tasks: ["archetype:lint","archetype:test-dev-pkg","clean-test-init"]
-  archetype:lint ---------------   tasks: ["archetype:lint-server"]
-  archetype:lint-server
-  archetype:test-dev-pkg
-  babel-src-step
-  build ........................   tasks: ["build-lib","build-dist"]
-  build-dist -------------------   tasks: ["clean-dist","build-dist-min","build-dist-dev"]
-  build-dist-dev
-  build-dist-min ............... Build minified dist files for production
-                                   deps: ["~production-env"]
-  build-lib --------------------   deps: ["~production-env"]
-  build-lib:clean-tmp
-  build-lib:copy-flow
-  build-lib:flatten-l10n
-  check ........................   tasks: ["check-dep","lint","test-cov"]
-  check-ci ---------------------   tasks: ["check-dep","lint","test-ci"]
-  check-cov ....................   tasks: ["lint","test-cov"]
-  check-dep
-  check-dev --------------------   tasks: ["lint","test-dev"]
-  clean ........................   tasks: ["clean-lib","clean-dist"]
-  clean-dist
-  clean-lib
-  clean-test-init
-  cov-frontend
-  cov-frontend-50
-  cov-frontend-70
-  cov-frontend-85
-  cov-frontend-95
-  default ---------------------- Invokes 'gulp help'
-  demo .........................   tasks: ["generate","server-dev"]
-  demo-iso ---------------------   tasks: ["dev-iso"]
-  dev .......................... Start server in development mode
-                                   tasks: ["~webpack-dev",["server-dev","server-test"]]
-  dev-iso ---------------------- Start ISO server in development mode
-                                   tasks: ["~webpack-dev",["iso-render-server-start","server-dev-iso"]]
-  generate .....................   tasks: ["generate-metadata","generate-documentation"]
-  generate-documentation
-  generate-metadata
-  help ------------------------- Display this help text.
-  hot .......................... Start server in hot/auto-watch mode
-                                   tasks: ["~webpack-dev",["server-hot","server-test"]]
-  iso-render-server-start ------   tasks: ["~webpack-dev","iso-render-server-start-watch"]
-  iso-render-server-start-watch
-  lint .........................   tasks: ["lint-react-demo","lint-react-src","lint-react-test","lint-scripts"]
-  lint-react-demo
-  lint-react-src
-  lint-react-test
-  lint-scripts
-  npm:prepublish ---------------   tasks: ["build-lib","build-dist-dev","build-dist-min"]
-  prepublish ...................   tasks: ["npm:prepublish"]
-  preversion -------------------   tasks: ["check-cov"]
-  server-dev
-  server-dev-iso
-  server-hot
-  server-test
-  test-ci ......................   tasks: ["test-frontend-ci"]
-  test-cov ---------------------   tasks: ["test-frontend-cov"]
-  test-dev .....................   tasks: ["test-frontend-dev"]
-  test-frontend
-  test-frontend-ci
-  test-frontend-cov
-  test-frontend-dev
-  test-frontend-dev-watch
-  test-watch -------------------   tasks: ["test-frontend-dev-watch"]
-
-```
-
-## Check the archetype configs:
-
-If you are enhancing / refactoring this archetype and have locally checked it out,
-please see [`CONTRIBUTING.md`](./CONTRIBUTING.md) for our guidelines.
-
-The main check we provide for the archetype itself is:
-
-```sh
-$ gulp check
-```
 
 [npm-image]: https://badge.fury.io/js/electrode-archetype-react-component-dev.svg
 [npm-url]: https://npmjs.org/package/electrode-archetype-react-component-dev

@@ -12,16 +12,12 @@ var prodCfg = require("../webpack.config");
  * https://github.com/sinonjs/sinon/pull/600#issuecomment-162529457
  */
 /*
- * Added fix for "gulp check" on Windows
+ * Added fix for "clap check" on Windows
  */
 if (process.platform === "win32") {
-  prodCfg.module.noParse = [
-    /node_modules\\sinon\\/
-  ];
+  prodCfg.module.noParse = [/node_modules\\sinon\\/];
 } else {
-  prodCfg.module.noParse = [
-    /node_modules\/sinon\//
-  ];
+  prodCfg.module.noParse = [/node_modules\/sinon\//];
 }
 
 module.exports = {
@@ -34,5 +30,5 @@ module.exports = {
     "react/addons": true, // important!! https://github.com/airbnb/enzyme/issues/302
     "react/lib/ExecutionEnvironment": true,
     "react/lib/ReactContext": true
-  },
-}
+  }
+};
@@ -11,9 +11,6 @@
     "url": "https://github.com/electrode-io/electrode/issues"
   },
   "license": "Apache-2.0",
-  "config": {
-    "archetype": "node_modules/electrode-archetype-react-component"
-  },
   "scripts": {},
   "dependencies": {
     "autoprefixer-stylus": "0.13.0",
@@ -34,13 +31,13 @@
     "bunyan": "^1.5.1",
     "chai": "^3.2.0",
     "chai-shallowly": "^0.9.10",
+    "chalk": "^1.1.3",
     "component-playground": "^1.0.1",
     "config": "^1.19.0",
     "css-loader": "^0.26.1",
     "electrode-check-dependencies": "^1.0.2",
     "electrode-demo-index": "^1.0.0",
     "electrode-docgen": "^1.0.0",
-    "electrode-gulp-helper": "^1.0.0",
     "enzyme": "^2.3.0",
     "eslint": "^3.18.0",
     "eslint-config-walmart": "^1.1.0",
@@ -100,7 +97,9 @@
     "url-loader": "^0.5.6",
     "webpack": "^2.3.1",
     "webpack-config-composer": "^1.0.2",
-    "webpack-dev-server": "^2.4.2"
+    "webpack-dev-server": "^2.4.2",
+    "xclap": "^0.2.0",
+    "xsh": "^0.3.2"
   },
   "engines": {
     "node": ">= 4 <= 8",