🚧 Ongoing work on components and pattern info

packages/components/src/Workbench/index.js

@@ -0,0 +1,139 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import withGist from "../withGist";
+import { patternList } from "@freesewing/patterns";
+import { FormattedMessage, IntlProvider } from "react-intl";
+import Button from "@material-ui/core/Button";
+import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
+import { i18n, strings } from "@freesewing/i18n";
+import Navbar from "../Navbar";
+import { defaultGist, storage } from "@freesewing/utils";
+import { dark, light } from "@freesewing/mui-theme";
+import Logo from "../Logo";
+import withLanguage from "../withLanguage";
+import LanguageIcon from "@material-ui/icons/Translate";
+import DarkModeIcon from "@material-ui/icons/Brightness3";
+import LanguageChooser from "./LanguageChooser";
+import Pattern from "./Pattern";
+
+const Workbench = props => {
+  const [display, setDisplay] = useState("pattern");
+  const [pattern, setPattern] = useState(false);
+  const [settings, setSettings] = useState(false);
+  const [theme, setTheme] = useState("light");
+
+  const themes = { dark, light };
+
+  const showLanguageChooser = () => setDisplay("language");
+
+  const loadPattern = () => {
+    let p = storage.get("pattern");
+    if (Object.keys(props.freesewing.patterns).indexOf(p) === -1)
+      p = props.pattern;
+    setPattern(p);
+    return p;
+  };
+
+  const updatePattern = p => {
+    setPattern(p);
+    store.set("pattern", p);
+  };
+
+  const toggleSettings = () => setSettings(!settings);
+
+  const toggleDarkMode = () => {
+    if (theme === "light") setTheme("dark");
+    else setTheme("light");
+  };
+
+  const raiseEvent = (type, data) => {
+    console.log("Event raised", type, data);
+  };
+
+  const navs = {
+    left: [
+      {
+        type: "link",
+        href: "https://freesewing.dev/",
+        text: "app.docs"
+      },
+      {
+        type: "link",
+        href: "https://gitter.im/freesewing/freesewing/",
+        text: "app.askForHelp"
+      }
+    ],
+    right: [
+      {
+        type: "link",
+        href: "https://github.com/freesewing/freesewing",
+        text: "v" + props.freesewing.version
+      },
+      {
+        type: "button",
+        onClick: () => setDisplay("languages"),
+        text: <LanguageIcon className="nav-icon" />,
+        title: "Languages"
+      },
+      {
+        type: "button",
+        onClick: toggleDarkMode,
+        text: <DarkModeIcon className="nav-icon moon" />,
+        title: "Toggle dark mode"
+      }
+    ]
+  };
+
+  let main = null;
+  switch (display) {
+    case "languages":
+      main = (
+        <LanguageChooser
+          setLanguage={props.setLanguage}
+          setDisplay={setDisplay}
+        />
+      );
+      break;
+    default:
+      main = (
+        <Pattern
+          freesewing={props.freesewing}
+          Pattern={props.pattern}
+          info={props.info}
+          gist={props.gist}
+          updateGist={props.updateGist}
+          raiseEvent={raiseEvent}
+        />
+      );
+  }
+
+  // Load defaults into gist
+  console.log(props.info);
+  //props.loadGistDefaults({options: props.info.config.options});
+
+  return (
+    <MuiThemeProvider theme={createMuiTheme(themes[theme])}>
+      <div
+        className={
+          theme === "light" ? "theme-wrapper light" : "theme-wrapper dark"
+        }
+      >
+        <Navbar navs={navs} />
+        {main}
+      </div>
+    </MuiThemeProvider>
+  );
+};
+
+Workbench.propTypes = {
+  pattern: PropTypes.oneOf(patternList),
+  units: PropTypes.oneOf(["metric", "imperial"]).isRequired
+};
+
+export default withLanguage(
+  withGist(Workbench, {
+    gist: defaultGist,
+    store: true
+  }),
+  "nl"
+);