🔧 Changed export for components

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 && rollup -c",
-    "build": "npm run clean && npm run nodebuild",
     "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",

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 {
+const createConfig = (component, module) => {
-  input: "src/index.js",
+  console.log(component);
-  output: {
+  return {
-    sourcemap: true
+    input: `./src/${component}/index.js`,
-  },
+    output: {
-  plugins: [
+      file: `dist/${component}/index` + (module ? ".mjs" : ".js"),
-    peerDepsExternal(),
+      format: module ? "es" : "cjs",
-    resolve({ modulesOnly: true }),
+      sourcemap: true
-    json(),
+    },
-    babel({
+    plugins: [
-      exclude: "node_modules/**",
+      peerDepsExternal(),
-      plugins: ["@babel/plugin-proposal-object-rest-spread"]
+      resolve({ modulesOnly: true }),
-    }),
+      json(),
-    minify({
+      babel({
-      comments: false,
+        exclude: "node_modules/**",
-      sourceMap: true,
+        plugins: ["@babel/plugin-proposal-object-rest-spread"]
-      banner: `/**\n * ${name} | v${version}\n * ${description}\n * (c) ${new Date().getFullYear()} ${author}\n * @license ${license}\n */`
+      }),
-    })
+      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;

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>

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>
     );

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}

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;
 

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)}>

packages/components/src/index.js

@@ -1,15 +1,17 @@
-export { default as Blockquote } from "./Blockquote";
+export default [
-export { default as Draft } from "./Draft";
+  "Blockquote",
-export { default as DraftConfigurator } from "./DraftConfigurator";
+  "Draft",
-export { default as Emblem } from "./Emblem";
+  "DraftConfigurator",
-export { default as Example } from "./Example";
+  "Emblem",
-export { default as Footer } from "./Footer";
+  "Example",
-export { default as Icon } from "./Icon";
+  "Footer",
-export { default as Logo } from "./Logo";
+  "Icon",
-export { default as Navbar } from "./Navbar";
+  "Logo",
-export { default as Ogol } from "./Ogol";
+  "Navbar",
-export { default as Robot } from "./Robot";
+  "Ogol",
-export { default as SampleConfigurator } from "./SampleConfigurator";
+  "Robot",
-export { default as withGist } from "./withGist";
+  "SampleConfigurator",
-export { default as withLanguage } from "./withLanguage";
+  "withGist",
-export { default as Workbench } from "./Workbench";
+  "withLanguage",
+  "Workbench"
+];