diff --git a/packages/components/src/Workbench/DraftPattern/index.js b/packages/components/src/Workbench/DraftPattern/index.js
index f093ec304e1..6cdc4e0736b 100644
--- a/packages/components/src/Workbench/DraftPattern/index.js
+++ b/packages/components/src/Workbench/DraftPattern/index.js
@@ -1,43 +1,42 @@
-import React, { useState } from "react";
-import PropTypes from "prop-types";
-import Draft from "../../Draft";
-import Design from "../Design";
-import DraftConfigurator from "../../DraftConfigurator";
-import { FormattedMessage } from "react-intl";
-import Prism from "prismjs";
-import fileSaver from "file-saver";
-import theme from "@freesewing/plugin-theme";
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import Draft from '../../Draft'
+import Design from '../Design'
+import DraftConfigurator from '../../DraftConfigurator'
+import { FormattedMessage } from 'react-intl'
+import Prism from 'prismjs'
+import fileSaver from 'file-saver'
+import theme from '@freesewing/plugin-theme'
 
 const DraftPattern = props => {
-  const [design, setDesign] = useState(true);
-  const [focus, setFocus] = useState(null);
+  const [design, setDesign] = useState(true)
+  const [focus, setFocus] = useState(null)
 
   const raiseEvent = (type, data) => {
-    if (type === "clearFocusAll") {
-      props.updateGist(false, "settings", "only");
-      return setFocus(null);
+    if (type === 'clearFocusAll') {
+      props.updateGist(false, 'settings', 'only')
+      return setFocus(null)
     }
-    let f = {};
-    if (focus !== null) f = { ...focus };
-    if (typeof f[data.part] === "undefined")
-      f[data.part] = { paths: [], points: [], coords: [] };
-    if (type === "point") f[data.part].points.push(data.name);
-    else if (type === "path") f[data.part].paths.push(data.name);
-    else if (type === "coords") f[data.part].coords.push(data.coords);
-    else if (type === "clearFocus") {
-      let i = focus[data.part][data.type].indexOf(data.name);
-      f[data.part][data.type].splice(i, 1);
-    } else if (type === "part") props.updateGist(data, "settings", "only");
+    let f = {}
+    if (focus !== null) f = { ...focus }
+    if (typeof f[data.part] === 'undefined') f[data.part] = { paths: [], points: [], coords: [] }
+    if (type === 'point') f[data.part].points.push(data.name)
+    else if (type === 'path') f[data.part].paths.push(data.name)
+    else if (type === 'coords') f[data.part].coords.push(data.coords)
+    else if (type === 'clearFocus') {
+      let i = focus[data.part][data.type].indexOf(data.name)
+      f[data.part][data.type].splice(i, 1)
+    } else if (type === 'part') props.updateGist(data, 'settings', 'only')
 
-    setFocus(f);
-  };
+    setFocus(f)
+  }
 
   const svgToFile = svg => {
     const blob = new Blob([svg], {
-      type: "image/svg+xml;charset=utf-8"
-    });
-    fileSaver.saveAs(blob, "freesewing-" + props.config.name + ".svg");
-  };
+      type: 'image/svg+xml;charset=utf-8'
+    })
+    fileSaver.saveAs(blob, 'freesewing-' + props.config.name + '.svg')
+  }
 
   if (props.svgExport) {
     svgToFile(
@@ -48,32 +47,32 @@ const DraftPattern = props => {
         .use(theme)
         .draft()
         .render()
-    );
-    props.setSvgExport(false);
+    )
+    props.setSvgExport(false)
   }
 
   const styles = {
     paragraph: {
-      padding: "0 1rem"
+      padding: '0 1rem'
     }
-  };
-  let pattern = new props.Pattern(props.gist.settings);
-  pattern.draft();
-  let patternProps = pattern.getRenderProps();
-  let focusCount = 0;
+  }
+  let pattern = new props.Pattern(props.gist.settings)
+  pattern.draft()
+  let patternProps = pattern.getRenderProps()
+  let focusCount = 0
   if (focus !== null) {
     for (let p of Object.keys(focus)) {
-      for (let i in focus[p].points) focusCount++;
-      for (let i in focus[p].paths) focusCount++;
-      for (let i in focus[p].coords) focusCount++;
+      for (let i in focus[p].points) focusCount++
+      for (let i in focus[p].paths) focusCount++
+      for (let i in focus[p].coords) focusCount++
     }
   }
 
   let gist = Prism.highlight(
     JSON.stringify(props.gist, null, 2),
     Prism.languages.javascript,
-    "javascript"
-  );
+    'javascript'
+  )
 
   return (
     <div className="fs-sa">
@@ -81,18 +80,10 @@ const DraftPattern = props => {
         <h2>
           <FormattedMessage id="app.pattern" />
         </h2>
-        <Draft
-          {...patternProps}
-          design={design}
-          focus={focus}
-          raiseEvent={raiseEvent}
-        />
+        <Draft {...patternProps} design={design} focus={focus} raiseEvent={raiseEvent} />
         <h2>gist</h2>
         <div className="gatsby-highlight">
-          <pre
-            className="language-json"
-            dangerouslySetInnerHTML={{ __html: gist }}
-          />
+          <pre className="language-json" dangerouslySetInnerHTML={{ __html: gist }} />
         </div>
       </section>
 
@@ -110,10 +101,7 @@ const DraftPattern = props => {
                 {focusCount > 0 ? (
                   <React.Fragment>
                     &ensp;(
-                    <a
-                      href="#logo"
-                      onClick={() => raiseEvent("clearFocusAll", null)}
-                    >
+                    <a href="#logo" onClick={() => raiseEvent('clearFocusAll', null)}>
                       <FormattedMessage id="app.reset" />
                     </a>
                     )
@@ -140,8 +128,8 @@ const DraftPattern = props => {
           <DraftConfigurator
             noDocs
             config={props.config}
-            gist={props.gist}
-            updateGist={props.updateGist}
+            data={props.gist}
+            updateData={props.updateGist}
             raiseEvent={props.raiseEvent}
             freesewing={props.freesewing}
             units={props.units}
@@ -149,8 +137,8 @@ const DraftPattern = props => {
         </div>
       </aside>
     </div>
-  );
-};
+  )
+}
 
 DraftPattern.propTypes = {
   gist: PropTypes.object.isRequired,
@@ -158,12 +146,12 @@ DraftPattern.propTypes = {
   config: PropTypes.object.isRequired,
   raiseEvent: PropTypes.func.isRequired,
   Pattern: PropTypes.func.isRequired,
-  units: PropTypes.oneOf(["metric", "imperial"])
-};
+  units: PropTypes.oneOf(['metric', 'imperial'])
+}
 
 DraftPattern.defaultProps = {
-  units: "metric",
+  units: 'metric',
   pointInfo: null
-};
+}
 
-export default DraftPattern;
+export default DraftPattern
diff --git a/packages/components/src/Workbench/index.js b/packages/components/src/Workbench/index.js
index 2cb1f55b861..b1e3b9e7bbc 100644
--- a/packages/components/src/Workbench/index.js
+++ b/packages/components/src/Workbench/index.js
@@ -1,147 +1,142 @@
-import React, { useState, useEffect } from "react";
-import PropTypes from "prop-types";
-import withGist from "../withGist";
-import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
-import Navbar from "../Navbar";
-import defaultGist from "@freesewing/utils/defaultGist";
-import storage from "@freesewing/utils/storage";
-import { dark, light } from "@freesewing/mui-theme";
-import withLanguage from "../withLanguage";
-import LanguageIcon from "@material-ui/icons/Translate";
-import DarkModeIcon from "@material-ui/icons/Brightness3";
-import LanguageChooser from "./LanguageChooser";
-import DraftPattern from "./DraftPattern";
-import SamplePattern from "./SamplePattern";
-import Welcome from "./Welcome";
-import Footer from "../Footer";
-import Measurements from "./Measurements";
+import React, { useState, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import withGist from '../withGist'
+import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'
+import Navbar from '../Navbar'
+import defaultGist from '@freesewing/utils/defaultGist'
+import storage from '@freesewing/utils/storage'
+import { dark, light } from '@freesewing/mui-theme'
+import withLanguage from '../withLanguage'
+import LanguageIcon from '@material-ui/icons/Translate'
+import DarkModeIcon from '@material-ui/icons/Brightness3'
+import LanguageChooser from './LanguageChooser'
+import DraftPattern from './DraftPattern'
+import SamplePattern from './SamplePattern'
+import Welcome from './Welcome'
+import Footer from '../Footer'
+import Measurements from './Measurements'
 
 const Workbench = props => {
-  const [display, setDisplay] = useState(null);
-  const [pattern, setPattern] = useState(false);
-  const [theme, setTheme] = useState("light");
-  const [measurements, setMeasurements] = useState(null);
-  const [svgExport, setSvgExport] = useState(false);
+  const [display, setDisplay] = useState(null)
+  const [pattern, setPattern] = useState(false)
+  const [theme, setTheme] = useState('light')
+  const [measurements, setMeasurements] = useState(null)
+  const [svgExport, setSvgExport] = useState(false)
+
   useEffect(() => {
-    let m = getMeasurements();
-    setMeasurements(m);
-    props.updateGist(m, "settings", "measurements");
-    setDisplay(getDisplay());
-    props.setLanguage(props.userLanguage || "en");
-  }, []);
+    let m = getMeasurements()
+    setMeasurements(m)
+    props.updateGist(m, 'settings', 'measurements')
+    setDisplay(getDisplay())
+    props.setLanguage(props.userLanguage || 'en')
+  }, [])
   useEffect(() => {
-    if (props.from) props.importGist(props.from);
-  }, [props.from]);
+    if (props.from) props.importGist(props.from)
+  }, [props.from])
   useEffect(() => {
     if (props.language !== props.gist.settings.locale)
-      props.updateGist(props.language, "settings", "locale");
-  }, [props.language]);
+      props.updateGist(props.language, 'settings', 'locale')
+  }, [props.language])
 
-  const getDisplay = () => storage.get(props.config.name + "-display");
+  const getDisplay = () => storage.get(props.config.name + '-display')
   const saveDisplay = d => {
-    setDisplay(d);
-    storage.set(props.config.name + "-display", d);
-  };
-  const getMeasurements = () =>
-    storage.get(props.config.name + "-measurements");
+    setDisplay(d)
+    storage.set(props.config.name + '-display', d)
+  }
+  const getMeasurements = () => storage.get(props.config.name + '-measurements')
   const saveMeasurements = data => {
-    storage.set(props.config.name + "-measurements", data);
-    props.updateGist(data, "settings", "measurements");
-  };
+    storage.set(props.config.name + '-measurements', data)
+    props.updateGist(data, 'settings', 'measurements')
+  }
   const updateMeasurement = (name, val) => {
-    let updatedMeasurements = { ...measurements };
-    updatedMeasurements[name] = val;
-    setMeasurements(updatedMeasurements);
-    saveMeasurements(updatedMeasurements);
-  };
+    let updatedMeasurements = { ...measurements }
+    updatedMeasurements[name] = val
+    setMeasurements(updatedMeasurements)
+    saveMeasurements(updatedMeasurements)
+  }
   const preloadMeasurements = model => {
     let updatedMeasurements = {
       ...measurements,
       ...model
-    };
-    setMeasurements(updatedMeasurements);
-    saveMeasurements(updatedMeasurements);
-  };
+    }
+    setMeasurements(updatedMeasurements)
+    saveMeasurements(updatedMeasurements)
+  }
   const measurementsMissing = () => {
-    let required = props.config.measurements;
-    if (required.length < 1) return false;
-    if (measurements === null) return true;
+    let required = props.config.measurements
+    if (required.length < 1) return false
+    if (measurements === null) return true
     for (let m of required) {
-      if (typeof measurements[m] === "undefined") return true;
+      if (typeof measurements[m] === 'undefined') return true
     }
 
-    return false;
-  };
+    return false
+  }
   const toggleDarkMode = () => {
-    if (theme === "light") setTheme("dark");
-    else setTheme("light");
-  };
-  const raiseEvent = (type = null, data = null) => {};
+    if (theme === 'light') setTheme('dark')
+    else setTheme('light')
+  }
+  const raiseEvent = (type = null, data = null) => {}
 
   const navs = {
     left: {
       draft: {
-        type: "button",
-        onClick: () => saveDisplay("draft"),
-        text: "cfp.draftYourPattern",
-        active: display === "draft" ? true : false
+        type: 'button',
+        onClick: () => saveDisplay('draft'),
+        text: 'cfp.draftYourPattern',
+        active: display === 'draft' ? true : false
       },
       sample: {
-        type: "button",
-        onClick: () => saveDisplay("sample"),
-        text: "cfp.testYourPattern",
-        active: display === "sample" ? true : false
+        type: 'button',
+        onClick: () => saveDisplay('sample'),
+        text: 'cfp.testYourPattern',
+        active: display === 'sample' ? true : false
       },
       measurements: {
-        type: "button",
-        onClick: () => saveDisplay("measurements"),
-        text: "app.measurements",
-        active: display === "measurements" ? true : false
+        type: 'button',
+        onClick: () => saveDisplay('measurements'),
+        text: 'app.measurements',
+        active: display === 'measurements' ? true : false
       }
     },
     right: {
       version: {
-        type: "link",
-        href: "https://github.com/freesewing/freesewing/releases",
-        text: "v" + props.freesewing.version
+        type: 'link',
+        href: 'https://github.com/freesewing/freesewing/releases',
+        text: 'v' + props.freesewing.version
       },
       language: {
-        type: "button",
-        onClick: () => saveDisplay("languages"),
+        type: 'button',
+        onClick: () => saveDisplay('languages'),
         text: <LanguageIcon className="nav-icon" />,
-        title: "Languages",
-        active: display === "languages" ? true : false
+        title: 'Languages',
+        active: display === 'languages' ? true : false
       },
       dark: {
-        type: "button",
+        type: 'button',
         onClick: toggleDarkMode,
         text: <DarkModeIcon className="nav-icon moon" />,
-        title: "Toggle dark mode"
+        title: 'Toggle dark mode'
       }
     }
-  };
-  if (display === "draft" && !measurementsMissing())
+  }
+  if (display === 'draft' && !measurementsMissing())
     navs.left.svgExport = {
-      type: "button",
+      type: 'button',
       onClick: () => setSvgExport(true),
-      text: "app.export",
+      text: 'app.export',
       active: false
-    };
+    }
   // FIXME:
-  navs.mleft = navs.left;
-  navs.mright = navs.right;
-  let main = null;
+  navs.mleft = navs.left
+  navs.mright = navs.right
+  let main = null
   switch (display) {
-    case "languages":
-      main = (
-        <LanguageChooser
-          setLanguage={props.setLanguage}
-          setDisplay={saveDisplay}
-        />
-      );
-      break;
-    case "draft":
-      if (measurementsMissing()) saveDisplay("measurements");
+    case 'languages':
+      main = <LanguageChooser setLanguage={props.setLanguage} setDisplay={saveDisplay} />
+      break
+    case 'draft':
+      if (measurementsMissing()) saveDisplay('measurements')
       main = (
         <DraftPattern
           freesewing={props.freesewing}
@@ -154,10 +149,10 @@ const Workbench = props => {
           svgExport={svgExport}
           setSvgExport={setSvgExport}
         />
-      );
-      break;
-    case "sample":
-      if (measurementsMissing()) saveDisplay("measurements");
+      )
+      break
+    case 'sample':
+      if (measurementsMissing()) saveDisplay('measurements')
       main = (
         <SamplePattern
           freesewing={props.freesewing}
@@ -168,9 +163,9 @@ const Workbench = props => {
           raiseEvent={raiseEvent}
           units={props.units}
         />
-      );
-      break;
-    case "measurements":
+      )
+      break
+    case 'measurements':
       main = (
         <Measurements
           measurements={measurements}
@@ -180,45 +175,39 @@ const Workbench = props => {
           preloadMeasurements={preloadMeasurements}
           language={props.language}
         />
-      );
-      break;
+      )
+      break
     default:
-      main = <Welcome language={props.language} setDisplay={saveDisplay} />;
+      main = <Welcome language={props.language} setDisplay={saveDisplay} />
   }
 
-  const themes = { dark, light };
+  const themes = { dark, light }
   return (
     <MuiThemeProvider theme={createMuiTheme(themes[theme])}>
-      <div
-        className={
-          theme === "light" ? "theme-wrapper light" : "theme-wrapper dark"
-        }
-      >
-        {display !== "welcome" ? (
-          <Navbar navs={navs} home={() => saveDisplay("welcome")} />
-        ) : null}
+      <div className={theme === 'light' ? 'theme-wrapper light' : 'theme-wrapper dark'}>
+        {display !== 'welcome' ? <Navbar navs={navs} home={() => saveDisplay('welcome')} /> : null}
         {main}
-        {display !== "welcome" ? <Footer language={props.language} /> : null}
+        {display !== 'welcome' ? <Footer language={props.language} /> : null}
       </div>
     </MuiThemeProvider>
-  );
-};
+  )
+}
 
 Workbench.propTypes = {
   freesewing: PropTypes.object.isRequired,
   Pattern: PropTypes.func.isRequired,
   config: PropTypes.object.isRequired,
   from: PropTypes.object
-};
+}
 
 Workbench.defaultProps = {
   from: { settings: { embed: true } }
-};
+}
 
 export default withLanguage(
   withGist(Workbench, {
     gist: defaultGist,
     store: true
   }),
-  "en"
-);
+  'en'
+)