#! /bin/bash
echo ""

if [ -z "$1" ]; then

  echo "Usage: <folder-path>  to create a new component named folder-path"
  echo ""
  exit 1;
fi

if [ -d "$1" ]; then
  
  echo "ERROR"
  echo "Folder $1 already exists. Quitting."
  echo ""
  exit 1;
fi

echo "Creating new component: $1"
mkdir $1
cd $1
mkdir src
mkdir build

echo ".gitignore"
cat << END > .gitignore
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
END

echo ".babelrc"
cat << EN0 > .babelrc
{
  "presets": ["env"],
  "plugins": [
    "transform-object-rest-spread",
    "transform-react-jsx"
  ]
}
EN0

echo "webpack.config.js"
cat << EN1 > webpack.config.js
var path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'index.js',
    libraryTarget: 'commonjs2' // THIS IS THE MOST IMPORTANT LINE! :mindblow: I wasted more than 2 days until realize this was the line most important in all this guide.
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /(node_modules|bower_components|build)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      }
    ]
  },
  externals: {
    'react': 'commonjs react' // this line is just to use the React dependency of our parent-testing-project instead of using our own React.
  }
};
EN1

echo "package.json"
cat << EN2 > package.json
{
  "name": "$1",
  "version": "0.0.1",
  "description": "",
  "main": "build/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --watch",
    "build": "webpack"
  },
  "author": {
    "name": "Joel Leslie",
    "email": "ops@whtlst.in"
  },
  "peerDependencies": {
    "react": "^16.0.0"
  },
  "dependencies": {
    "react": "^16.0.0",
    "webpack": "^2.6.1"
  },
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "babel-preset-env": "^1.5.1"
  }
}
EN2

echo "Installing..."
npm install

echo "Starter index.js"
cat <<EN3 > src/index.js
import React from 'react';
class Fancy extends React.Component {
  render() {
    return (
      <div>This is so Fancy!</div>
    );
  }
}
export default Fancy;
EN3

echo "Webstorm..."
webstorm . &


echo "Buildling..."
npm run build

echo "Watching..."
npm run start