feat(example-component): initial example component build

.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false
+      }
+    ],
+    "@babel/preset-react"
+  ],
+  "ignore": [
+    "node_modules"
+  ]
+}

.eslintignore

@@ -0,0 +1,3 @@
+coverage/*
+build
+node_modules

.eslintrc

@@ -0,0 +1,8 @@
+{
+  "extends": [
+    "airbnb"
+  ],
+  "env": {
+    "jest": true
+  }
+}

.gitignore

@@ -57,3 +57,4 @@ typings/
 # dotenv environment variables file
 .env
 
+build/

.npmignore

@@ -0,0 +1,11 @@
+.DS_Store
+.eslintcache
+node_modules
+npm-debug.log
+.travis.yml
+src/
+test/
+*.test.js
+coverage/
+*.stories.js
+*.stores.jsx

package.json

@@ -0,0 +1,67 @@
+{
+  "name": "example-react-component-npm-package",
+  "version": "1.0.0",
+  "description": "Example React Component for npm Publication",
+  "main": "./build/index.js",
+  "module": "./build/index.js",
+  "files": [
+    "./build"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "start": "rollup -c -w",
+    "test": "jest --coverage --passWithNoTests"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jaebradley/example-react-component-npm-package.git"
+  },
+  "keywords": [
+    "rollup",
+    "react",
+    "react component",
+    "rollup react",
+    "component",
+    "example react component",
+    "example rollup react component"
+  ],
+  "author": "jae.b.bradley@gmail.com",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/jaebradley/example-react-component-npm-package/issues"
+  },
+  "homepage": "https://github.com/jaebradley/example-react-component-npm-package#readme",
+  "dependencies": {
+    "prop-types": "^15.6.1",
+    "react": "^16.3.1",
+    "react-dom": "^16.3.1"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.0.0-beta.44",
+    "@babel/core": "^7.0.0-beta.44",
+    "@babel/preset-env": "^7.0.0-beta.44",
+    "@babel/preset-react": "^7.0.0-beta.44",
+    "autoprefixer": "^8.2.0",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-jest": "^22.4.3",
+    "babel-preset-minify": "^0.4.0",
+    "enzyme": "^3.3.0",
+    "eslint": "^4.19.1",
+    "eslint-config-airbnb": "^16.1.0",
+    "eslint-plugin-import": "^2.11.0",
+    "eslint-plugin-jsx-a11y": "^6.0.3",
+    "eslint-plugin-react": "^7.7.0",
+    "husky": "^0.14.3",
+    "jest": "^22.4.3",
+    "node-sass": "^4.8.3",
+    "postcss": "^6.0.21",
+    "rollup": "^0.57.1",
+    "rollup-plugin-babel": "^4.0.0-beta.4",
+    "rollup-plugin-commonjs": "^9.1.0",
+    "rollup-plugin-filesize": "^1.5.0",
+    "rollup-plugin-local-resolve": "^1.0.7",
+    "rollup-plugin-node-resolve": "^3.3.0",
+    "rollup-plugin-peer-deps-external": "^2.1.0",
+    "rollup-plugin-postcss": "^1.5.1"
+  }
+}

rollup.config.js

@@ -0,0 +1,38 @@
+import babel from 'rollup-plugin-babel';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import resolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+import postcss from 'rollup-plugin-postcss';
+import filesize from 'rollup-plugin-filesize';
+import autoprefixer from 'autoprefixer';
+import localResolve from 'rollup-plugin-local-resolve';
+
+import pkg from './package.json';
+
+const config = {
+  input: 'src/index.js',
+  output: [
+    {
+      file: pkg.main,
+      format: 'umd',
+      name: 'Example',
+    },
+  ],
+  external: [
+    'react',
+    'react-dom',
+  ],
+  plugins: [
+    peerDepsExternal(),
+    postcss({ extract: true, plugins: [autoprefixer] }),
+    babel({
+      exclude: 'node_modules/**',
+    }),
+    localResolve(),
+    resolve(),
+    commonjs(),
+    filesize(),
+  ],
+};
+
+export default config;

src/AnExample/AnExample.scss

@@ -0,0 +1,3 @@
+.an-example {
+  color: aquamarine
+}

src/AnExample/index.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './AnExample.scss';
+
+const AnExample = ({ name }) => <div className="an-example">This is an example by { name }</div>;
+
+AnExample.propTypes = {
+  name: PropTypes.string,
+};
+
+AnExample.defaultProps = {
+  name: 'jaebaebae',
+};
+
+export default AnExample;

src/AnotherExample/AnotherExample.scss

@@ -0,0 +1,3 @@
+.another-example {
+  color: fuchsia
+}

src/AnotherExample/index.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './AnotherExample.scss';
+
+const AnotherExample = ({ name }) => <div className="another-example">This is another example by { name }</div>;
+
+AnotherExample.propTypes = {
+  name: PropTypes.string,
+};
+
+AnotherExample.defaultProps = {
+  name: 'jaebaebae',
+};
+
+export default AnotherExample;

src/index.js

@@ -0,0 +1,9 @@
+/* eslint import/extensions: 0 */
+
+import AnExample from './AnExample/index.jsx';
+import AnotherExample from './AnotherExample/index.jsx';
+
+export {
+  AnExample,
+  AnotherExample,
+};