Merge branch 'master' into csb-1562362868367

.babelrc

@@ -0,0 +1,10 @@
+{
+	"presets": ["react-app"],
+	"plugins": [
+		"transform-class-properties",
+		"@babel/plugin-transform-runtime",
+		"@babel/plugin-proposal-export-default-from",
+		"@babel/plugin-transform-named-capturing-groups-regex",
+		"jsx-control-statements"
+	]
+}

.gitignore

@@ -0,0 +1,40 @@
+# dependencies #
+#############
+/node_modules
+
+# testing #
+#############
+/coverage
+
+# production #
+#############
+
+
+# misc #
+#############
+.DS_Store
+.env
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+#ESLint config #
+#############
+.eslintrc.json
+
+
+# IDE files #
+#############
+nbproject
+.~lock.*
+.buildpath
+.idea
+.project
+.settings
+composer.lock
+.history/
+.vscode/
+
+# Storybook build files #
+#############
+storybook-static/

package.json

@@ -1,34 +1,47 @@
 {
-  "name": "live",
-  "version": "1.0.0",
-  "description": "",
-  "keywords": [],
-  "main": "src/index.js",
-  "dependencies": {
-    "@auth0/cosmos": "0.27.0",
-    "fs-extra": "6.0.1",
-    "glob": "7.1.4",
-    "prop-types": "15.7.2",
-    "react": "16.8.6",
-    "react-docgen": "4.1.1",
-    "react-dom": "16.8.6",
-    "react-live": "2.1.2",
-    "react-scripts": "3.0.1",
-    "styled-components": "4.2.0"
-  },
-  "devDependencies": {
-    "typescript": "3.3.3"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
-  },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ]
-}
+	"name": "live",
+	"version": "1.0.0",
+	"description": "",
+	"keywords": [],
+	"main": "dist/bundled.js",
+	"dependencies": {
+		"@auth0/cosmos": "0.27.0",
+		"@babel/core": "7.2.2",
+		"@babel/plugin-proposal-export-default-from": "^7.2.0",
+		"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+		"@babel/plugin-transform-runtime": "^7.3.4",
+		"babel-loader": "^8.0.6",
+		"babel-plugin-jsx-control-statements": "^4.0.0",
+		"babel-plugin-named-asset-import": "^0.3.1",
+		"babel-plugin-transform-class-properties": "^6.24.1",
+		"babel-preset-react-app": "^7.0.1",
+		"fs": "^0.0.1-security",
+		"fs-extra": "6.0.1",
+		"glob": "7.1.4",
+		"jsx-control-statements": "^3.2.8",
+		"node-sass": "^4.12.0",
+		"prop-types": "15.7.2",
+		"react": "16.8.6",
+		"react-docgen": "4.1.1",
+		"react-dom": "16.8.6",
+		"react-live": "2.1.2",
+		"react-scripts": "3.0.1",
+		"styled-components": "4.2.0"
+	},
+	"devDependencies": {
+		"typescript": "3.3.3",
+		"webpack-cli": "^3.3.5"
+	},
+	"scripts": {
+		"start": "react-scripts start",
+		"build": "NODE_ENV=production webpack --mode production",
+		"test": "react-scripts test --env=jsdom",
+		"eject": "react-scripts eject"
+	},
+	"browserslist": [
+		">0.2%",
+		"not dead",
+		"not ie <= 11",
+		"not op_mini all"
+	]
+}

src/generateMetaData.js

@@ -1,44 +1,46 @@
-import glob from "glob";
-import * as fs from "fs";
-import * as docgen from "react-docgen";
 
-const javascriptFiles = glob.sync("src/*/*.js");
+import glob from 'glob';
+import * as fs from 'fs';
+import * as docgen from 'react-docgen';
+
+
+const javascriptFiles = glob.sync('src/*/*.js');
 
 let metadata = javascriptFiles.map(path => {
-  const code = fs.readFileSync(path, "utf8");
-
-  let data = docgen.parse(code);
-
-  console.log("data", data);
-
-  /* make modifications to prop types to improve documentation */
-  if (data.props) {
-    Object.keys(data.props).forEach(propName => {
-      const prop = data.props[propName];
-      /* remove redundant quotes from default value of type string */
-      if (prop.defaultValue) {
-        if (typeof prop.defaultValue.value === "string") {
-          prop.defaultValue.value = prop.defaultValue.value.replace(
-            /^'(.*)'$/,
-            "$1"
-          );
-        }
-      }
-
-      /* remove redundant quotes from enum values in prop types */
-      if (prop.type.name === "enum" && Array.isArray(prop.type.value)) {
-        prop.type.value.forEach(element => {
-          element.value = element.value.replace(/^'(.*)'$/, "$1");
-        });
-      }
-    });
-  }
-
-  data.filepath = path;
-
-  console.log("data", data);
-
-  return data;
+	const code = fs.readFileSync(path, 'utf8');
+
+	let data = docgen.parse(code);
+
+	console.log('data', data);
+
+	/* make modifications to prop types to improve documentation */
+	if (data.props) {
+		Object.keys(data.props).forEach(propName => {
+			const prop = data.props[propName];
+			/* remove redundant quotes from default value of type string */
+			if (prop.defaultValue) {
+				if (typeof prop.defaultValue.value === 'string') {
+					prop.defaultValue.value = prop.defaultValue.value.replace(
+						/^'(.*)'$/,
+						'$1',
+					);
+				}
+			}
+
+			/* remove redundant quotes from enum values in prop types */
+			if (prop.type.name === 'enum' && Array.isArray(prop.type.value)) {
+				prop.type.value.forEach(element => {
+					element.value = element.value.replace(/^'(.*)'$/, '$1');
+				});
+			}
+		});
+	}
+
+	data.filepath = path;
+
+	console.log('data', data);
+
+	return data;
 });
 
 export default metadata;

src/index.js

@@ -5,13 +5,16 @@ import "./styles.scss";
 import Badge from "./Badge";
 import Live from "./Live";
 
-function App() {
-  return (
-    <div className="App">
-      <Live code="<Badge >Hello</Badge>" scope={{ Badge }} />
-    </div>
-  );
-}
+// function App() {
+//   return (
+//     <div className="App">
+//       <Live code="<Badge >Hello</Badge>" scope={{ Badge }} />
+//     </div>
+//   );
+// }
 
-const rootElement = document.getElementById("root");
-ReactDOM.render(<App />, rootElement);
+// const rootElement = document.getElementById("root");
+// ReactDOM.render(<App />, rootElement);
+
+
+export default Live;

webpack.config.js

@@ -0,0 +1,40 @@
+const path = require('path');
+
+module.exports = {
+	entry: './src/index.js',
+	target: 'node',
+	output: {
+		filename: 'bundled.js',
+		path: path.resolve(__dirname, 'dist'),
+		library: 'react-props-playground',
+		libraryTarget: 'umd',
+		umdNamedDefine: true,
+		globalObject: "typeof self !== 'undefined' ? self : this",
+	},
+	resolve: {
+		extensions: ['.mjs', '.web.js', '.js', '.json', '.web.jsx', '.jsx'],
+	},
+	module: {
+		rules: [
+			{
+				test: /\.(js|jsx)$/,
+				exclude: /node_modules/,
+				use: {
+					loader: 'babel-loader',
+				},
+			},
+			{
+				test: /\.css$/,
+				use: ['style-loader', 'css-loader', 'sass-loader'],
+			},
+			{
+				test: /\.scss$/,
+				use: ['style-loader', 'css-loader', 'sass-loader'],
+			},
+			{
+				test: /\.svg$/,
+				use: ['@svgr/webpack', 'url-loader'],
+			},
+		],
+	},
+};