🚧 More work on React components and mui-theme

packages/components/src/.form/FormFieldBool/index.js

@@ -35,7 +35,7 @@ const Bool = props => {
 
 Bool.propTypes = {
   dflt: PropTypes.bool,
-  labels: PropTypes.arrayOf(PropTypes.string),
+  labels: PropTypes.array,
   updateValue: PropTypes.func.isRequired,
   name: PropTypes.string.isRequired
 };

packages/components/src/DraftConfigurator/DraftSettingMargin/index.js

@@ -70,8 +70,8 @@ const DraftSettingMargin = props => {
 DraftSettingMargin.propTypes = {
   raiseEvent: PropTypes.func.isRequired,
   updateValue: PropTypes.func.isRequired,
-  title: PropTypes.string.isRequired,
-  desc: PropTypes.string.isRequired,
+  title: PropTypes.node.isRequired,
+  desc: PropTypes.node.isRequired,
   units: PropTypes.oneOf(["metric", "imperial"]).isRequired,
   labels: PropTypes.array
 };

packages/components/src/DraftConfigurator/DraftSettingSa/index.js

@@ -114,10 +114,10 @@ const DraftSettingSa = props => {
 DraftSettingSa.propTypes = {
   raiseEvent: PropTypes.func.isRequired,
   updateValue: PropTypes.func.isRequired,
-  title: PropTypes.string.isRequired,
-  desc: PropTypes.string.isRequired,
+  title: PropTypes.node.isRequired,
+  desc: PropTypes.node.isRequired,
   units: PropTypes.oneOf(["metric", "imperial"]).isRequired,
-  labels: PropTypes.array
+  labels: PropTypes.object
 };
 
 DraftSettingSa.defaultProps = {

packages/components/src/DraftConfigurator/DraftSettings/index.js

@@ -94,7 +94,7 @@ const DraftSettings = props => {
         let children = null;
         if (open) children = groups[group].map(component => component);
         return (
-          <React.Fragment>
+          <React.Fragment key={group}>
             <li
               className={open ? "expanded" : "collapsed"}
               key={group + "-ghead"}
@@ -117,7 +117,7 @@ const DraftSettings = props => {
 };
 
 DraftSettings.propTypes = {
-  info: PropTypes.object.isRequired,
+  config: PropTypes.object.isRequired,
   gist: PropTypes.object.isRequired
 };
 

packages/components/src/DraftConfigurator/OptionPreamble/index.js

@@ -41,7 +41,6 @@ const OptionPreamble = props => {
         dangerouslySetInnerHTML={{ __html: props.displayValue }}
       />
     );
-
   return (
     <React.Fragment>
       <h4 onClick={props.toggleExpanded} style={styles.container}>
@@ -93,11 +92,13 @@ const OptionPreamble = props => {
 OptionPreamble.propTypes = {
   dflt: PropTypes.oneOfType([
     PropTypes.number.isRequired,
-    PropTypes.string.isRequired
+    PropTypes.string.isRequired,
+    PropTypes.bool.isRequired
   ]),
   value: PropTypes.oneOfType([
     PropTypes.number.isRequired,
-    PropTypes.string.isRequired
+    PropTypes.string.isRequired,
+    PropTypes.bool.isRequired
   ]),
   title: PropTypes.node.isRequired,
   desc: PropTypes.node.isRequired,

packages/components/src/DraftConfigurator/PatternOptionBool/index.js

@@ -60,7 +60,8 @@ PatternOptionBool.propTypes = {
   name: PropTypes.string.isRequired,
   dflt: PropTypes.oneOfType([
     PropTypes.number.isRequired,
-    PropTypes.string.isRequired
+    PropTypes.string.isRequired,
+    PropTypes.bool.isRequired
   ]),
   title: PropTypes.node.isRequired,
   desc: PropTypes.node.isRequired,

packages/components/src/Navbar/index.js

@@ -5,7 +5,7 @@ import Emblem from "../Emblem";
 import { FormattedMessage } from "react-intl";
 
 const Navbar = props => {
-  const renderNav = nav => {
+  const renderNav = (key, nav) => {
     let title = nav.title || nav.text;
     let text =
       typeof nav.text === "string" ? (
@@ -16,12 +16,12 @@ const Navbar = props => {
     if (nav.type === "component") return nav.component;
     else if (nav.type === "button")
       return (
-        <button title={title} onClick={nav.onClick}>
+        <button title={title} onClick={nav.onClick} key={key}>
           {text}
         </button>
       );
     return (
-      <a href={nav.href} className="nav" title={title}>
+      <a href={nav.href} className="nav" title={title} key={key}>
         {text}
       </a>
     );
@@ -36,9 +36,13 @@ const Navbar = props => {
         <div className="emblem">
           <a href={props.home}>{props.emblem}</a>
         </div>
-        {props.navs.left.map(nav => renderNav(nav))}
+        {Object.keys(props.navs.left).map(key =>
+          renderNav(key, props.navs.left[key])
+        )}
         <div className="spread" />
-        {props.navs.right.map(nav => renderNav(nav))}
+        {Object.keys(props.navs.right).map(key =>
+          renderNav(key, props.navs.right[key])
+        )}
       </div>
     </header>
   );

packages/components/src/Workbench/index.js

@@ -20,12 +20,9 @@ const Workbench = props => {
   const [pattern, setPattern] = useState(false);
   const [settings, setSettings] = useState(false);
   const [theme, setTheme] = useState("light");
-  useEffect(
-    () => {
-      if (props.from) props.importGist(props.from);
-    },
-    [props.from]
-  );
+  useEffect(() => {
+    if (props.from) props.importGist(props.from);
+  }, [props.from]);
 
   const showLanguageChooser = () => setDisplay("language");
   const toggleSettings = () => setSettings(!settings);
@@ -42,37 +39,37 @@ const Workbench = props => {
   };
 
   const navs = {
-    left: [
-      {
+    left: {
+      docs: {
         type: "link",
         href: "https://freesewing.dev/",
         text: "app.docs"
       },
-      {
+      help: {
         type: "link",
         href: "https://gitter.im/freesewing/freesewing/",
         text: "app.askForHelp"
       }
-    ],
-    right: [
-      {
+    },
+    right: {
+      version: {
         type: "link",
         href: "https://github.com/freesewing/freesewing",
         text: "v" + props.freesewing.version
       },
-      {
+      language: {
         type: "button",
         onClick: () => setDisplay("languages"),
         text: <LanguageIcon className="nav-icon" />,
         title: "Languages"
       },
-      {
+      dark: {
         type: "button",
         onClick: toggleDarkMode,
         text: <DarkModeIcon className="nav-icon moon" />,
         title: "Toggle dark mode"
       }
-    ]
+    }
   };
 
   let main = null;
@@ -89,7 +86,7 @@ const Workbench = props => {
       main = (
         <Pattern
           freesewing={props.freesewing}
-          pattern={props.pattern}
+          Pattern={props.Pattern}
           config={props.config}
           gist={props.gist}
           updateGist={props.updateGist}
@@ -117,7 +114,7 @@ const Workbench = props => {
 
 Workbench.propTypes = {
   freesewing: PropTypes.object.isRequired,
-  pattern: PropTypes.func.isRequired,
+  Pattern: PropTypes.func.isRequired,
   config: PropTypes.object.isRequired,
   from: PropTypes.object
 };

packages/components/src/Workbench/stories.js

@@ -40,7 +40,7 @@ const gist = {
 
 const props = {
   freesewing,
-  pattern: () => "aaron",
+  Pattern: () => "aaron",
   config,
   from: gist
 };

packages/css-theme/src/components/_draft-configurator.scss

@@ -36,7 +36,7 @@ ul.nav h3 {
   z-index: 3;
 }
 ul.nav span.custom {
-  color: $fc-notice-light;
+  color: $fc-bg-dark;
   font-weight: bold;
 }
 .col-exp {
@@ -85,4 +85,7 @@ button.mini-icon-btn {
     cursor: pointer;
     background: $oc-gray-7;
   }
+  ul.nav span.custom {
+    color: $fc-bg-light;
+  }
 }

packages/css-theme/src/components/_navbar.scss

@@ -7,7 +7,7 @@ header.navbar {
   margin: 0;
   padding: 0 26px;
   background: $fc-bg-dark;
-  z-index: 5;
+  z-index: 15;
 
   div.logo {
     height: 64px;

packages/mui-theme/package.json

@@ -24,7 +24,8 @@
     "build": "npm run clean && npm run nodebuild && npm run modulebuild",
     "test": "echo \"mui-theme: No tests configured. Perhaps you'd like to do this?\" && exit 0",
     "pubtest": "npm publish --registry http://localhost:6662",
-    "publish": "npm build && npm publish --access=public --tag=alpha"
+    "publish": "npm build && npm publish --access=public --tag=alpha",
+    "watch": "rollup -c -w -o dist/index.mjs -f es"
   },
   "peerDependencies": {
     "@material-ui/core": "^3.9.3",

packages/mui-theme/src/index.js

@@ -1,44 +1,56 @@
+const darkBg = "#212529";
+const lightBg = "#f8f9fa";
+const colors = {
+  light: {
+    primary: darkBg,
+    secondary: lightBg,
+    link: "#74c0fc",
+    paper: "#FFF"
+  },
+  dark: {
+    primary: lightBg,
+    secondary: darkBg,
+    link: "#74c0fc",
+    paper: "#000"
+  }
+};
 const asTitle = {
   fontFamily: "Roboto Condensed",
   fontWeight: "bold"
 };
+const important = "!important";
 
-const theme = {
-  props: {
-    MuiButtonBase: {
-      //disableRipple: true // Disabling ripple everywhere
+const getTheme = mode => {
+  let c = colors[mode];
+  let forceColor = {
+    root: {
+      color: c.primary + important
     }
-  },
-  overrides: {
-    MuiButton: { root: asTitle },
-    MuiMenuItem: { root: asTitle },
-    MuiListItemText: { primary: asTitle }
-  }
+  };
+  return {
+    overrides: {
+      MuiButton: { root: asTitle },
+      MuiMenuItem: { root: asTitle },
+      MuiListItemText: { primary: asTitle },
+      MuiRadio: forceColor,
+      MuiCheckbox: forceColor
+    },
+    palette: {
+      primary: {
+        main: c.primary
+      },
+      secondary: {
+        main: c.secondary
+      },
+      type: mode,
+      background: {
+        paper: c.paper,
+        default: c.secondary
+      }
+    },
+    themeName: mode
+  };
 };
 
-const darkBg = "#212529";
-const lightBg = "#f8f9fa";
-
-const palettes = {
-  dark: {
-    primary: { main: lightBg },
-    secondary: { main: darkBg },
-    type: "dark",
-    background: {
-      paper: "#212529",
-      default: "#343a40"
-    }
-  },
-  light: {
-    primary: { main: darkBg },
-    secondary: { main: lightBg },
-    type: "light",
-    background: {
-      paper: "#FFF",
-      default: "#f8f9fa"
-    }
-  }
-};
-
-export const dark = { ...theme, palette: palettes.dark, themeName: "Dark" };
-export const light = { ...theme, palette: palettes.light, themeName: "Light" };
+export const light = getTheme("light");
+export const dark = getTheme("dark");