From 4d24dfe998dfa24a901c4314354728c513ca9adf Mon Sep 17 00:00:00 2001
From: Joost De Cock <joost@decock.org>
Date: Mon, 27 May 2019 07:52:34 +0200
Subject: [PATCH] :wrench: Changed export for components

---
 packages/components/package.json              |  3 +-
 packages/components/rollup.config.js          | 52 ++++++++++++-------
 .../DraftConfigurator/DraftSettings/index.js  |  4 +-
 .../DraftConfigurator/PatternOptions/index.js |  4 +-
 .../components/src/DraftConfigurator/index.js |  8 +--
 packages/components/src/Navbar/index.js       |  2 +-
 .../src/SampleConfigurator/index.js           | 12 ++---
 packages/components/src/index.js              | 32 ++++++------
 8 files changed, 66 insertions(+), 51 deletions(-)

diff --git a/packages/components/package.json b/packages/components/package.json
index c2df120787b..8503f3ea6d1 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -16,8 +16,7 @@
   "main": "dist/index.js",
   "scripts": {
     "clean": "rimraf dist",
-    "nodebuild": "BABEL_ENV=production rollup -c -o dist/index.js -f cjs",
-    "build": "npm run clean && npm run nodebuild",
+    "build": "npm run clean && rollup -c",
     "test": "echo \"components: No tests configured. Perhaps you'd like to do this?\" && exit 0",
     "pubtest": "npm publish --registry http://localhost:6662",
     "pubforce": "npm publish",
diff --git a/packages/components/rollup.config.js b/packages/components/rollup.config.js
index 05d5097b581..572f3ed4720 100644
--- a/packages/components/rollup.config.js
+++ b/packages/components/rollup.config.js
@@ -4,24 +4,38 @@ import json from "rollup-plugin-json";
 import minify from "rollup-plugin-babel-minify";
 import peerDepsExternal from "rollup-plugin-peer-deps-external";
 import { name, version, description, author, license } from "./package.json";
+import components from "./src/index.js";
 
-export default {
-  input: "src/index.js",
-  output: {
-    sourcemap: true
-  },
-  plugins: [
-    peerDepsExternal(),
-    resolve({ modulesOnly: true }),
-    json(),
-    babel({
-      exclude: "node_modules/**",
-      plugins: ["@babel/plugin-proposal-object-rest-spread"]
-    }),
-    minify({
-      comments: false,
-      sourceMap: true,
-      banner: `/**\n * ${name} | v${version}\n * ${description}\n * (c) ${new Date().getFullYear()} ${author}\n * @license ${license}\n */`
-    })
-  ]
+const createConfig = (component, module) => {
+  console.log(component);
+  return {
+    input: `./src/${component}/index.js`,
+    output: {
+      file: `dist/${component}/index` + (module ? ".mjs" : ".js"),
+      format: module ? "es" : "cjs",
+      sourcemap: true
+    },
+    plugins: [
+      peerDepsExternal(),
+      resolve({ modulesOnly: true }),
+      json(),
+      babel({
+        exclude: "node_modules/**",
+        plugins: ["@babel/plugin-proposal-object-rest-spread"]
+      }),
+      minify({
+        comments: false,
+        sourceMap: true,
+        banner: `/**\n * ${name}/${component} | v${version}\n * ${description}\n * (c) ${new Date().getFullYear()} ${author}\n * @license ${license}\n */`
+      })
+    ]
+  };
 };
+
+const config = [];
+for (let component of components) {
+  config.push(createConfig(component, false));
+  config.push(createConfig(component, true));
+}
+console.log(JSON.stringify(config, null, 2));
+export default config;
diff --git a/packages/components/src/DraftConfigurator/DraftSettings/index.js b/packages/components/src/DraftConfigurator/DraftSettings/index.js
index 99d8683a297..6094b51d82c 100644
--- a/packages/components/src/DraftConfigurator/DraftSettings/index.js
+++ b/packages/components/src/DraftConfigurator/DraftSettings/index.js
@@ -102,14 +102,14 @@ const DraftSettings = props => {
               className={open ? "expanded" : "collapsed"}
               key={group + "-ghead"}
             >
-              <h3 onClick={() => toggleGroup(group)}>
+              <h5 onClick={() => toggleGroup(group)}>
                 <DownIcon
                   className={
                     "icon-col-exp " + (open ? "expanded" : "collapsed")
                   }
                 />
                 <FormattedMessage id={"optiongroups." + group} />
-              </h3>
+              </h5>
             </li>
             {children}
           </React.Fragment>
diff --git a/packages/components/src/DraftConfigurator/PatternOptions/index.js b/packages/components/src/DraftConfigurator/PatternOptions/index.js
index 1b0113fdc53..52aaeee5810 100644
--- a/packages/components/src/DraftConfigurator/PatternOptions/index.js
+++ b/packages/components/src/DraftConfigurator/PatternOptions/index.js
@@ -35,12 +35,12 @@ const PatternOptions = props => {
       );
     output.push(
       <li className={open ? "expanded" : "collapsed"} key={group + "-ghead"}>
-        <h3 onClick={() => toggleGroup(group)}>
+        <h5 onClick={() => toggleGroup(group)}>
           <DownIcon
             className={"icon-col-exp " + (open ? "expanded" : "collapsed")}
           />
           <FormattedMessage id={"optiongroups." + group} />
-        </h3>
+        </h5>
         {children}
       </li>
     );
diff --git a/packages/components/src/DraftConfigurator/index.js b/packages/components/src/DraftConfigurator/index.js
index d5fed4f56ba..4b41fec2a6f 100644
--- a/packages/components/src/DraftConfigurator/index.js
+++ b/packages/components/src/DraftConfigurator/index.js
@@ -10,9 +10,9 @@ const DraftConfigurator = props => {
   return (
     <ul className="nav l1">
       <li>
-        <h2>
+        <h4>
           <FormattedMessage id="app.patternOptions" />
-        </h2>
+        </h4>
         <PatternOptions
           noDocs={props.noDocs}
           config={props.config}
@@ -25,9 +25,9 @@ const DraftConfigurator = props => {
         />
       </li>
       <li>
-        <h2>
+        <h4>
           <FormattedMessage id="app.draftSettings" />
-        </h2>
+        </h4>
         <DraftSettings
           noDocs={props.noDocs}
           config={props.config}
diff --git a/packages/components/src/Navbar/index.js b/packages/components/src/Navbar/index.js
index c4bc2014962..61f80c6731f 100644
--- a/packages/components/src/Navbar/index.js
+++ b/packages/components/src/Navbar/index.js
@@ -6,7 +6,7 @@ import { FormattedMessage } from "react-intl";
 import useMediaQuery from "@material-ui/core/useMediaQuery";
 
 const Navbar = props => {
-  const mobile = useMediaQuery.unstable_useMediaQuery("(max-width:599px)");
+  const mobile = useMediaQuery("(max-width:599px)");
 
   if (mobile) return null;
 
diff --git a/packages/components/src/SampleConfigurator/index.js b/packages/components/src/SampleConfigurator/index.js
index 677c443d070..bb3ea08c84c 100644
--- a/packages/components/src/SampleConfigurator/index.js
+++ b/packages/components/src/SampleConfigurator/index.js
@@ -48,9 +48,9 @@ const SampleConfigurator = props => {
   return (
     <ul className="links">
       <li className="nodot">
-        <h2>
+        <h4>
           <FormattedMessage id="app.patternOptions" />
-        </h2>
+        </h4>
         <PatternOptions
           config={props.config}
           gist={props.gist}
@@ -58,9 +58,9 @@ const SampleConfigurator = props => {
         />
       </li>
       <li className="nodot">
-        <h2>
+        <h4>
           <FormattedMessage id="app.measurements" />
-        </h2>
+        </h4>
         <ul style={{ paddingLeft: "1rem" }}>
           {props.config.measurements.map(m => (
             <li key={m}>
@@ -72,9 +72,9 @@ const SampleConfigurator = props => {
         </ul>
       </li>
       <li className="nodot">
-        <h2>
+        <h4>
           <FormattedMessage id="app.models" />
-        </h2>
+        </h4>
         <ul style={{ paddingLeft: "1rem" }}>
           <li>
             <a href="#logo" onClick={() => sampleModels(models)}>
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index 95d60c76edd..386cbfb0e9a 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -1,15 +1,17 @@
-export { default as Blockquote } from "./Blockquote";
-export { default as Draft } from "./Draft";
-export { default as DraftConfigurator } from "./DraftConfigurator";
-export { default as Emblem } from "./Emblem";
-export { default as Example } from "./Example";
-export { default as Footer } from "./Footer";
-export { default as Icon } from "./Icon";
-export { default as Logo } from "./Logo";
-export { default as Navbar } from "./Navbar";
-export { default as Ogol } from "./Ogol";
-export { default as Robot } from "./Robot";
-export { default as SampleConfigurator } from "./SampleConfigurator";
-export { default as withGist } from "./withGist";
-export { default as withLanguage } from "./withLanguage";
-export { default as Workbench } from "./Workbench";
+export default [
+  "Blockquote",
+  "Draft",
+  "DraftConfigurator",
+  "Emblem",
+  "Example",
+  "Footer",
+  "Icon",
+  "Logo",
+  "Navbar",
+  "Ogol",
+  "Robot",
+  "SampleConfigurator",
+  "withGist",
+  "withLanguage",
+  "Workbench"
+];