Skip to content

Commit

Permalink
archetype-react-component: [major] clappify (#393)
Browse files Browse the repository at this point in the history 
* archetype-react-component: [major] clappify

* samples demo component
  • Loading branch information
@jchip
jchip authored Jun 20, 2017
1 parent 1b3ba9a commit a65511b
Show file tree
Hide file tree
Showing 70 changed files with 2,245 additions and 609 deletions.
255 changes: 1 addition & 254 deletions packages/electrode-archetype-react-component-dev/README.md
View file
Original file line number Diff line number Diff line change
@@ -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
Expand Down
14 changes: 5 additions & 9 deletions packages/electrode-archetype-react-component-dev/config/webpack/partial/test-base.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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
},
}
}
};
9 changes: 4 additions & 5 deletions packages/electrode-archetype-react-component-dev/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
31 changes: 0 additions & 31 deletions packages/electrode-archetype-react-component/.travis.yml
View file

This file was deleted.

21 changes: 0 additions & 21 deletions packages/electrode-archetype-react-component/CHANGELOG.md
View file

This file was deleted.

Loading

0 comments on commit a65511b

Please sign in to comment.