Reconfigure package.json and organize directories for installation

Author: Dave Ferris

.babelrc

@@ -0,0 +1,21 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-object-rest-spread",
+  ],
+  "env": {
+    "production": {
+      "plugins": [
+        [
+          "transform-react-remove-prop-types",
+          {
+            "removeImport": true
+          }
+        ]
+      ]
+    }
+  }
+}

.gitignore

@@ -6,7 +6,7 @@
 .pnp.js
 
 # distribution
-dist
+lib
 
 # testing
 /coverage

.storybook/config.js

@@ -3,7 +3,7 @@ import { configure, addDecorator } from '@storybook/react';
 import { withA11y } from '@storybook/addon-a11y';
 
 import 'bootstrap/dist/css/bootstrap.min.css';
-import '../src/shared/global.scss';
+import '../scss/global.scss';
 
 addDecorator(withA11y);
 addDecorator(story => (
@@ -13,4 +13,4 @@ addDecorator(story => (
 ));
 
 // automatically import all files ending in *.stories.jsx
-configure(require.context('../src', true, /\.stories\.jsx$/), module);
+configure(require.context('../stories', true, /\.stories\.jsx$/), module);

package.json

@@ -11,15 +11,15 @@
     "react-dom": "^16.12.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "NODE_ENV=production babel src --out-dir lib",
     "lint": "eslint . --ext .js,.jsx",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "storybook": "start-storybook -p 9009 -s public",
     "build-storybook": "build-storybook -s public",
     "build-storybook-docs": "build-storybook -s public --docs",
-    "deploy-storybook": "storybook-to-ghpages"
+    "deploy-storybook": "storybook-to-ghpages",
+    "prepare": "yarn build"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -37,6 +37,9 @@
     ]
   },
   "devDependencies": {
+    "@babel/cli": "^7.8.4",
+    "@babel/core": "^7.8.4",
+    "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
     "@storybook/addon-a11y": "^5.2.6",
     "@storybook/addon-actions": "^5.2.6",
     "@storybook/addon-docs": "^5.2.6",
@@ -46,14 +49,23 @@
     "@storybook/addons": "^5.2.6",
     "@storybook/react": "^5.2.6",
     "@storybook/storybook-deployer": "^2.8.1",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-react": "^6.24.1",
     "eslint-config-airbnb": "^18.0.1",
     "eslint-import-resolver-webpack": "^0.11.1",
     "eslint-plugin-babel": "^5.3.0",
     "eslint-utils": "^1.4.3",
     "react-scripts": "3.2.0"
   },
   "description": "UI Storybook design system",
-  "main": "dist/index.js",
+  "files": [
+    "lib",
+    "scss",
+    "src"
+  ],
+  "main": "lib/index.js",
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/@user-interviews"
   },

src/shared/global.scss scss/global.scsssrc/shared/global.scss renamed to scss/global.scss

@@ -1,5 +1,5 @@
 @import url('https://fonts.googleapis.com/css?family=Lato:300,300italic,400,700:latin');
-@import '../scss/theme';
+@import './theme';
 
 body {
   font-family: $font-family;

src/scss/palette.scss scss/palette.scsssrc/scss/palette.scss renamed to scss/palette.scss

@@ -1 +1,3 @@
-export * from './Card';
+import Card from './Card';
+
+export { Card };

src/scss/theme.scss scss/theme.scsssrc/scss/theme.scss renamed to scss/theme.scss

@@ -1,7 +1,7 @@
 import React from 'react';
 import { withKnobs, text } from '@storybook/addon-knobs';
 
-import Card from './Card';
+import Card from '../src/Card';
 
 export default {
   title: 'Design System|Card',