initial setup of widget

.eslintrc

@@ -0,0 +1,16 @@
+{
+  "env": {
+    "browser": true,
+    "jest": true
+  },
+  "parser": "babel-eslint",
+  "extends": "airbnb",
+  "rules": {
+    "semi": [2, "never"],
+    "no-underscore-dangle": 0
+  },
+  "plugins": ["react"],
+  "settings": {
+    "import/resolver": "webpack"
+  }
+}

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -0,0 +1,56 @@
+# Embeddable React Widget
+
+Easy creation of an embeddable widget.
+
+## Goal
+
+The create-react-app of embeddable widgets.
+
+## Features
+
+* Full ES6/ES2015 support (with Babel)
+* Package fonts, css, json, javascripts together into one simple repository (with Webpack)
+* No css tyling conflicts between the host page and the widget (with https://github.com/premasagar/cleanslate)
+* Obfuscating of the widget code
+
+## What is an emeddable widget?
+
+* Usable using a simple `<script>` tag
+* Configurable with code
+
+
+## Why not in an iframe?
+
+* Interaction between the frame and the hosting page is tricky and not recommended
+* You can only display content within the iframe
+* iframe and content resizing is impossible
+* iframe sandboxing can result in missing functionalities
+
+
+## Roadmap
+
+- [ ] index.html works (webpack, babel, react)
+- [ ] webpack changed to output a library
+- [ ] react widget
+
+# Links
+* https://github.com/premasagar/cleanslate
+* https://github.com/krasimir/third-party-react-widget
+* https://github.com/jenyayel/js-widget
+* https://github.com/anakinjay/react-widget-starter
+* https://webpack.js.org/guides/author-libraries/
+* https://github.com/webpack-contrib/webpack-serve
+* https://medium.freecodecamp.org/part-1-react-app-from-scratch-using-webpack-4-562b1d231e75
+* https://github.com/facebook/create-react-app/blob/next/packages/react-scripts/config/webpack.config.prod.js
+* https://github.com/webpack-contrib/purifycss-webpack
+* https://medium.com/quick-code/from-zero-to-deploy-set-up-react-stack-with-webpack-3-20b57d6cb8d7
+* https://medium.com/dailyjs/building-a-react-component-with-webpack-publish-to-npm-deploy-to-github-guide-6927f60b3220
+* http://krasimirtsonev.com/blog/article/javascript-library-starter-using-webpack-es6
+* https://github.com/javascript-obfuscator/webpack-obfuscator
+* https://github.com/tsileo/embedded-js-widget
+* https://thomassileo.name/blog/2014/03/27/building-an-embeddable-javascript-widget-third-party-javascript/
+
+## Best
+* https://www.robinwieruch.de/minimal-react-webpack-babel-setup/#hot-module-replacement
+* https://codeburst.io/building-react-widget-libraries-using-webpack-e0a140c16ce4
+* https://github.com/timarney/react-app-rewired

package.json

@@ -0,0 +1,46 @@
+{
+  "name": "embeddable-react-widget",
+  "version": "0.0.1",
+  "description": "building an embeddable js widget with react",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-serve --config ./webpack.config.js --mode development --open",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "babel": {
+    "presets": [
+      "env",
+      "react",
+      "stage-2"
+    ]
+  },
+  "author": "seriousben https://github.com/seriousben",
+  "license": "MIT",
+  "devDependencies": {
+    "babel-core": "^6.26.3",
+    "babel-eslint": "^8.2.3",
+    "babel-loader": "^7.1.4",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
+    "css-loader": "^0.28.11",
+    "eslint": "^4.19.1",
+    "eslint-config-airbnb": "^16.1.0",
+    "eslint-import-resolver-webpack": "^0.10.0",
+    "eslint-plugin-import": "^2.12.0",
+    "eslint-plugin-jsx-a11y": "^6.0.3",
+    "eslint-plugin-react": "^7.8.2",
+    "mini-css-extract-plugin": "^0.4.0",
+    "node-sass": "^4.9.0",
+    "sass-loader": "^7.0.1",
+    "style-loader": "^0.21.0",
+    "webpack": "^4.8.3",
+    "webpack-cli": "^2.1.3",
+    "webpack-serve": "^1.0.2"
+  },
+  "dependencies": {
+    "prop-types": "^15.6.1",
+    "react": "^16.3.2",
+    "react-dom": "^16.3.2"
+  }
+}

src/index.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Widget from './widget';
+
+ReactDOM.render(
+  <Widget/>,
+  document.getElementById('app')
+);

src/widget.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './widget.scss'
+
+class Widget extends React.Component {
+  state = {
+    opened: false,
+  }
+
+  handleOpen = () => {
+  }
+
+  render() {
+    let body = "";
+    if (this.state.opened) {
+      body = (
+        <div className="widget-dialog">
+          <div className="widget-title">
+            Open
+          </div>
+          <div className="widget-body">
+            Body
+          </div>
+          <div className="widget-footer">
+            Footer
+          </div>
+        </div>
+      );
+    }
+    return (
+      <div className="widget">
+        Open
+        {body}
+      </div>
+    );
+  }
+}
+
+Widget.propTypes = {};
+
+export default Widget;

src/widget.scss

@@ -0,0 +1,17 @@
+.widget {
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+
+  width: 50px;
+  height: 20px;
+  text-align: center;
+  border: 1px solid;
+  padding: 10px;
+}
+
+.widget:hover {
+  background-color: blue;
+  color: white;
+  cursor: pointer;
+}

webpack.config.js

@@ -0,0 +1,47 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const devMode = process.env.NODE_ENV !== 'production';
+
+module.exports = {
+  mode: 'development',
+  plugins: [
+    new MiniCssExtractPlugin({
+      // Options similar to the same options in webpackOptions.output
+      // both options are optional
+      filename: devMode ? '[name].css' : '[name].[hash].css',
+      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
+    })
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: ['babel-loader']
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          // fallback to style-loader in development
+          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
+          'css-loader',
+          'sass-loader'
+        ]
+      }
+    ]
+  },
+  resolve: {
+    extensions: ['*', '.js', '.jsx']
+  },
+  entry: [
+    './src/index.js'
+  ],
+  output: {
+    path: __dirname + '/dist',
+    publicPath: '/',
+    filename: 'bundle.js'
+  },
+  serve: {
+    content: './dist'
+  }
+};