feat: Support in Workbench for loading config from gist

config/changelog.yaml

@@ -3,6 +3,12 @@ Unreleased:
   Added:
   Changed:
 
+2.10.6:
+  date: 2020-11-15
+  Added:
+    components:
+      - Workbench now supports loading a pattern configuration from a (github) gist
+
 2.10.5:
   date: 2020-11-14
   Fixed:

config/dependencies.yaml

@@ -68,6 +68,7 @@ css-theme:
     'open-color': '^1.7.0'
 components:
   peer:
+    'axios': '^0.19.2'
     'react': '^16.13.1'
     '@freesewing/pattern-info': '^{{version}}'
     '@freesewing/mui-theme': '^{{version}}'

packages/aaron/example/src/App.js

@@ -16,11 +16,18 @@ const App = (props) => {
   }
   */
 
+  // Adds support for loading an external pattern configuration
+  let recreate
+  if (window) recreate = window.location.pathname.substr(1).split("/")
+  if (recreate.length === 3 && recreate[0] === 'from') recreate = { from: recreate[1], id: recreate[2] }
+  else recreate = false
+
   return (
     <Workbench
       freesewing={freesewing}
       Pattern={Pattern}
       userLanguage="en"
+      recreate={recreate}
       //translations={translations}
     />
   )

packages/albert/example/src/App.js

@@ -16,11 +16,18 @@ const App = (props) => {
   }
   */
 
+  // Adds support for loading an external pattern configuration
+  let recreate
+  if (window) recreate = window.location.pathname.substr(1).split("/")
+  if (recreate.length === 3 && recreate[0] === 'from') recreate = { from: recreate[1], id: recreate[2] }
+  else recreate = false
+
   return (
     <Workbench
       freesewing={freesewing}
       Pattern={Pattern}
       userLanguage="en"
+      recreate={recreate}
       //translations={translations}
     />
   )

packages/benjamin/example/src/App.js

@@ -16,11 +16,18 @@ const App = (props) => {
   }
   */
 
+  // Adds support for loading an external pattern configuration
+  let recreate
+  if (window) recreate = window.location.pathname.substr(1).split("/")
+  if (recreate.length === 3 && recreate[0] === 'from') recreate = { from: recreate[1], id: recreate[2] }
+  else recreate = false
+
   return (
     <Workbench
       freesewing={freesewing}
       Pattern={Pattern}
       userLanguage="en"
+      recreate={recreate}
       //translations={translations}
     />
   )

packages/bent/example/src/App.js

@@ -16,11 +16,18 @@ const App = (props) => {
   }
   */
 
+  // Adds support for loading an external pattern configuration
+  let recreate
+  if (window) recreate = window.location.pathname.substr(1).split("/")
+  if (recreate.length === 3 && recreate[0] === 'from') recreate = { from: recreate[1], id: recreate[2] }
+  else recreate = false
+
   return (
     <Workbench
       freesewing={freesewing}
       Pattern={Pattern}
       userLanguage="en"
+      recreate={recreate}
       //translations={translations}
     />
   )

packages/breanna/example/src/App.js

@@ -16,11 +16,18 @@ const App = (props) => {
   }
   */
 
+  // Adds support for loading an external pattern configuration
+  let recreate
+  if (window) recreate = window.location.pathname.substr(1).split("/")
+  if (recreate.length === 3 && recreate[0] === 'from') recreate = { from: recreate[1], id: recreate[2] }
+  else recreate = false
+
   return (
     <Workbench
       freesewing={freesewing}
       Pattern={Pattern}
       userLanguage="en"
+      recreate={recreate}
       //translations={translations}
     />
   )

packages/brian/example/src/App.js

@@ -16,11 +16,18 @@ const App = (props) => {
   }
   */
 
+  // Adds support for loading an external pattern configuration
+  let recreate
+  if (window) recreate = window.location.pathname.substr(1).split("/")
+  if (recreate.length === 3 && recreate[0] === 'from') recreate = { from: recreate[1], id: recreate[2] }
+  else recreate = false
+
   return (
     <Workbench
       freesewing={freesewing}
       Pattern={Pattern}
       userLanguage="en"
+      recreate={recreate}
       //translations={translations}
     />
   )

packages/bruce/example/src/App.js

@@ -16,11 +16,18 @@ const App = (props) => {
   }
   */
 
+  // Adds support for loading an external pattern configuration
+  let recreate
+  if (window) recreate = window.location.pathname.substr(1).split("/")
+  if (recreate.length === 3 && recreate[0] === 'from') recreate = { from: recreate[1], id: recreate[2] }
+  else recreate = false
+
   return (
     <Workbench
       freesewing={freesewing}
       Pattern={Pattern}
       userLanguage="en"
+      recreate={recreate}
       //translations={translations}
     />
   )

packages/carlita/example/src/App.js

@@ -16,11 +16,18 @@ const App = (props) => {
   }
   */
 
+  // Adds support for loading an external pattern configuration
+  let recreate
+  if (window) recreate = window.location.pathname.substr(1).split("/")
+  if (recreate.length === 3 && recreate[0] === 'from') recreate = { from: recreate[1], id: recreate[2] }
+  else recreate = false
+
   return (
     <Workbench
       freesewing={freesewing}
       Pattern={Pattern}
       userLanguage="en"
+      recreate={recreate}
       //translations={translations}
     />
   )

packages/carlton/example/src/App.js

@@ -16,11 +16,18 @@ const App = (props) => {
   }
   */
 
+  // Adds support for loading an external pattern configuration
+  let recreate
+  if (window) recreate = window.location.pathname.substr(1).split("/")
+  if (recreate.length === 3 && recreate[0] === 'from') recreate = { from: recreate[1], id: recreate[2] }
+  else recreate = false
+
   return (
     <Workbench
       freesewing={freesewing}
       Pattern={Pattern}
       userLanguage="en"
+      recreate={recreate}
       //translations={translations}
     />
   )

packages/cathrin/example/src/App.js

@@ -16,11 +16,18 @@ const App = (props) => {
   }
   */
 
+  // Adds support for loading an external pattern configuration
+  let recreate
+  if (window) recreate = window.location.pathname.substr(1).split("/")
+  if (recreate.length === 3 && recreate[0] === 'from') recreate = { from: recreate[1], id: recreate[2] }
+  else recreate = false
+
   return (
     <Workbench
       freesewing={freesewing}
       Pattern={Pattern}
       userLanguage="en"
+      recreate={recreate}
       //translations={translations}
     />
   )

packages/components/package.json

@@ -26,6 +26,7 @@
     "watch": "BABEL_ENV=production rollup -c -w -o dist/index.js -f cjs"
   },
   "peerDependencies": {
+    "axios": "^0.19.2",
     "react": "^16.13.1",
     "@freesewing/pattern-info": "^2.10.5",
     "@freesewing/mui-theme": "^2.10.5",

packages/components/rollup.config.js

@@ -34,8 +34,8 @@ const createConfig = (component, module) => {
 
 const config = []
 // When developing, you can use this to only rebuild the components you're working on
-let dev = false
-let only = ['Draft', 'Workbench']
+let dev = true
+let only = ['Workbench']
 for (let component of components) {
   if (!dev || only.indexOf(component) !== -1) config.push(createConfig(component, false))
   // Webpack doesn't handle .mjs very well

packages/components/src/Workbench/index.js

@@ -22,6 +22,8 @@ import UnhideIcon from '@material-ui/icons/ChevronRight'
 import SampleConfigurator from '../SampleConfigurator'
 import svgattrPlugin from '@freesewing/plugin-svgattr'
 import Xport from './Export'
+import axios from 'axios'
+import yaml from 'yaml'
 
 const icons = {
   draft: <DraftIcon />,
@@ -41,7 +43,8 @@ const Workbench = ({
   Pattern,
   units = 'metric',
   translations = false,
-  addTranslations
+  addTranslations,
+  recreate = false
 }) => {
   const [display, setDisplay] = useState(null)
   const [theme, setTheme] = useState('light')
@@ -51,6 +54,7 @@ const Workbench = ({
   const [hideAside, setHideAside] = useState(false)
   const [design, setDesign] = useState(true)
   const [focus, setFocus] = useState(null)
+  const [error, setError] = useState(null)
 
   const raiseEvent = (type, data) => {
     if (type === 'clearFocusAll') {
@@ -84,10 +88,37 @@ const Workbench = ({
   defaultGist.settings.debug = true
 
   useEffect(() => {
-    let m = getMeasurements()
-    setMeasurements(m)
-    updateGist(m, 'settings', 'measurements')
-    setLanguage(userLanguage)
+    if (recreate) {
+      // Recreating from existing pattern config
+      axios
+        .get(`https://api.github.com/gists/${recreate.id}`)
+        .then((res) => {
+          if (res.data.files['pattern.yaml'].content) {
+            let g = yaml.parse(res.data.files['pattern.yaml'].content)
+            if (g.design !== Pattern.config.name) {
+              setError(
+                `You tried loading a configuration for ${g.design} into a ${Pattern.config.name} development environment`
+              )
+              setDisplay('error')
+            }
+            setMeasurements(g.settings.measurements)
+            updateGist(g.settings, 'settings')
+            setLanguage(g.settings.locale)
+          } else {
+            setError('This gist does not seem to be a valid pattern configuration')
+            setDisplay('error')
+          }
+        })
+        .catch((err) => {
+          setError(err)
+          setDisplay('error')
+        })
+    } else {
+      let m = getMeasurements()
+      setMeasurements(m)
+      updateGist(m, 'settings', 'measurements')
+      setLanguage(userLanguage)
+    }
     if (translations) addTranslations(translations)
   }, [])
   useEffect(() => {

packages/create-freesewing-pattern/template/default/example/src/App.js

@@ -16,11 +16,19 @@ const App = (props) => {
   }
   */
 
+  // Adds support for loading an external pattern configuration
+  let recreate
+  if (window) recreate = window.location.pathname.substr(1).split('/')
+  if (recreate.length === 3 && recreate[0] === 'from')
+    recreate = { from: recreate[1], id: recreate[2] }
+  else recreate = false
+
   return (
     <Workbench
       freesewing={freesewing}
       Pattern={Pattern}
       userLanguage="{{language}}"
+      recreate={recreate}
       //translations={translations}
     />
   )

packages/diana/example/src/App.js

@@ -16,11 +16,18 @@ const App = (props) => {
   }
   */
 
+  // Adds support for loading an external pattern configuration
+  let recreate
+  if (window) recreate = window.location.pathname.substr(1).split("/")
+  if (recreate.length === 3 && recreate[0] === 'from') recreate = { from: recreate[1], id: recreate[2] }
+  else recreate = false
+
   return (
     <Workbench
       freesewing={freesewing}
       Pattern={Pattern}
       userLanguage="en"
+      recreate={recreate}
       //translations={translations}
     />
   )

packages/examples/example/src/App.js

@@ -16,11 +16,18 @@ const App = (props) => {
   }
   */
 
+  // Adds support for loading an external pattern configuration
+  let recreate
+  if (window) recreate = window.location.pathname.substr(1).split("/")
+  if (recreate.length === 3 && recreate[0] === 'from') recreate = { from: recreate[1], id: recreate[2] }
+  else recreate = false
+
   return (
     <Workbench
       freesewing={freesewing}
       Pattern={Pattern}
       userLanguage="en"
+      recreate={recreate}
       //translations={translations}
     />
   )

packages/florence/example/src/App.js

@@ -16,11 +16,18 @@ const App = (props) => {
   }
   */
 
+  // Adds support for loading an external pattern configuration
+  let recreate
+  if (window) recreate = window.location.pathname.substr(1).split("/")
+  if (recreate.length === 3 && recreate[0] === 'from') recreate = { from: recreate[1], id: recreate[2] }
+  else recreate = false
+
   return (
     <Workbench
       freesewing={freesewing}
       Pattern={Pattern}
       userLanguage="en"
+      recreate={recreate}
       //translations={translations}
     />
   )

packages/florent/example/src/App.js

@@ -16,11 +16,18 @@ const App = (props) => {
   }
   */
 
+  // Adds support for loading an external pattern configuration
+  let recreate
+  if (window) recreate = window.location.pathname.substr(1).split("/")
+  if (recreate.length === 3 && recreate[0] === 'from') recreate = { from: recreate[1], id: recreate[2] }
+  else recreate = false
+
   return (
     <Workbench
       freesewing={freesewing}
       Pattern={Pattern}
       userLanguage="en"
+      recreate={recreate}
       //translations={translations}
     />
   )

packages/holmes/example/src/App.js

@@ -16,11 +16,18 @@ const App = (props) => {
   }
   */
 
+  // Adds support for loading an external pattern configuration
+  let recreate
+  if (window) recreate = window.location.pathname.substr(1).split("/")
+  if (recreate.length === 3 && recreate[0] === 'from') recreate = { from: recreate[1], id: recreate[2] }
+  else recreate = false
+
   return (
     <Workbench
       freesewing={freesewing}
       Pattern={Pattern}
       userLanguage="en"
+      recreate={recreate}
       //translations={translations}
     />
   )

packages/huey/example/src/App.js

@@ -16,11 +16,18 @@ const App = (props) => {
   }
   */
 
+  // Adds support for loading an external pattern configuration
+  let recreate
+  if (window) recreate = window.location.pathname.substr(1).split("/")
+  if (recreate.length === 3 && recreate[0] === 'from') recreate = { from: recreate[1], id: recreate[2] }
+  else recreate = false
+
   return (
     <Workbench
       freesewing={freesewing}
       Pattern={Pattern}
       userLanguage="en"
+      recreate={recreate}
       //translations={translations}
     />
   )

packages/hugo/example/src/App.js

@@ -16,11 +16,18 @@ const App = (props) => {
   }
   */
 
+  // Adds support for loading an external pattern configuration
+  let recreate
+  if (window) recreate = window.location.pathname.substr(1).split("/")
+  if (recreate.length === 3 && recreate[0] === 'from') recreate = { from: recreate[1], id: recreate[2] }
+  else recreate = false
+
   return (
     <Workbench
       freesewing={freesewing}
       Pattern={Pattern}
       userLanguage="en"
+      recreate={recreate}
       //translations={translations}
     />
   )

packages/jaeger/example/src/App.js

@@ -16,11 +16,18 @@ const App = (props) => {
   }
   */
 
+  // Adds support for loading an external pattern configuration
+  let recreate
+  if (window) recreate = window.location.pathname.substr(1).split("/")
+  if (recreate.length === 3 && recreate[0] === 'from') recreate = { from: recreate[1], id: recreate[2] }
+  else recreate = false
+
   return (
     <Workbench
       freesewing={freesewing}
       Pattern={Pattern}
       userLanguage="en"
+      recreate={recreate}
       //translations={translations}
     />
   )

packages/legend/example/src/App.js

@@ -16,11 +16,18 @@ const App = (props) => {
   }
   */
 
+  // Adds support for loading an external pattern configuration
+  let recreate
+  if (window) recreate = window.location.pathname.substr(1).split("/")
+  if (recreate.length === 3 && recreate[0] === 'from') recreate = { from: recreate[1], id: recreate[2] }
+  else recreate = false
+
   return (
     <Workbench
       freesewing={freesewing}
       Pattern={Pattern}
       userLanguage="en"
+      recreate={recreate}
       //translations={translations}
     />
   )

packages/paco/example/src/App.js

@@ -16,11 +16,18 @@ const App = (props) => {
   }
   */
 
+  // Adds support for loading an external pattern configuration
+  let recreate
+  if (window) recreate = window.location.pathname.substr(1).split("/")
+  if (recreate.length === 3 && recreate[0] === 'from') recreate = { from: recreate[1], id: recreate[2] }
+  else recreate = false
+
   return (
     <Workbench
       freesewing={freesewing}
       Pattern={Pattern}
       userLanguage="en"
+      recreate={recreate}
       //translations={translations}
     />
   )

packages/penelope/example/src/App.js

@@ -16,11 +16,18 @@ const App = (props) => {
   }
   */
 
+  // Adds support for loading an external pattern configuration
+  let recreate
+  if (window) recreate = window.location.pathname.substr(1).split("/")
+  if (recreate.length === 3 && recreate[0] === 'from') recreate = { from: recreate[1], id: recreate[2] }
+  else recreate = false
+
   return (
     <Workbench
       freesewing={freesewing}
       Pattern={Pattern}
       userLanguage="en"
+      recreate={recreate}
       //translations={translations}
     />
   )

packages/rendertest/example/src/App.js

@@ -16,11 +16,18 @@ const App = (props) => {
   }
   */
 
+  // Adds support for loading an external pattern configuration
+  let recreate
+  if (window) recreate = window.location.pathname.substr(1).split("/")
+  if (recreate.length === 3 && recreate[0] === 'from') recreate = { from: recreate[1], id: recreate[2] }
+  else recreate = false
+
   return (
     <Workbench
       freesewing={freesewing}
       Pattern={Pattern}
       userLanguage="en"
+      recreate={recreate}
       //translations={translations}
     />
   )

packages/sandy/example/src/App.js

@@ -16,11 +16,18 @@ const App = (props) => {
   }
   */
 
+  // Adds support for loading an external pattern configuration
+  let recreate
+  if (window) recreate = window.location.pathname.substr(1).split("/")
+  if (recreate.length === 3 && recreate[0] === 'from') recreate = { from: recreate[1], id: recreate[2] }
+  else recreate = false
+
   return (
     <Workbench
       freesewing={freesewing}
       Pattern={Pattern}
       userLanguage="en"
+      recreate={recreate}
       //translations={translations}
     />
   )

packages/shin/example/src/App.js

@@ -16,11 +16,18 @@ const App = (props) => {
   }
   */
 
+  // Adds support for loading an external pattern configuration
+  let recreate
+  if (window) recreate = window.location.pathname.substr(1).split("/")
+  if (recreate.length === 3 && recreate[0] === 'from') recreate = { from: recreate[1], id: recreate[2] }
+  else recreate = false
+
   return (
     <Workbench
       freesewing={freesewing}
       Pattern={Pattern}
       userLanguage="en"
+      recreate={recreate}
       //translations={translations}
     />
   )

packages/simon/example/src/App.js

@@ -16,11 +16,18 @@ const App = (props) => {
   }
   */
 
+  // Adds support for loading an external pattern configuration
+  let recreate
+  if (window) recreate = window.location.pathname.substr(1).split("/")
+  if (recreate.length === 3 && recreate[0] === 'from') recreate = { from: recreate[1], id: recreate[2] }
+  else recreate = false
+
   return (
     <Workbench
       freesewing={freesewing}
       Pattern={Pattern}
       userLanguage="en"
+      recreate={recreate}
       //translations={translations}
     />
   )

packages/simone/example/src/App.js

@@ -16,11 +16,18 @@ const App = (props) => {
   }
   */
 
+  // Adds support for loading an external pattern configuration
+  let recreate
+  if (window) recreate = window.location.pathname.substr(1).split("/")
+  if (recreate.length === 3 && recreate[0] === 'from') recreate = { from: recreate[1], id: recreate[2] }
+  else recreate = false
+
   return (
     <Workbench
       freesewing={freesewing}
       Pattern={Pattern}
       userLanguage="en"
+      recreate={recreate}
       //translations={translations}
     />
   )

packages/sven/example/src/App.js

@@ -16,11 +16,18 @@ const App = (props) => {
   }
   */
 
+  // Adds support for loading an external pattern configuration
+  let recreate
+  if (window) recreate = window.location.pathname.substr(1).split("/")
+  if (recreate.length === 3 && recreate[0] === 'from') recreate = { from: recreate[1], id: recreate[2] }
+  else recreate = false
+
   return (
     <Workbench
       freesewing={freesewing}
       Pattern={Pattern}
       userLanguage="en"
+      recreate={recreate}
       //translations={translations}
     />
   )

packages/tamiko/example/src/App.js

@@ -16,11 +16,18 @@ const App = (props) => {
   }
   */
 
+  // Adds support for loading an external pattern configuration
+  let recreate
+  if (window) recreate = window.location.pathname.substr(1).split("/")
+  if (recreate.length === 3 && recreate[0] === 'from') recreate = { from: recreate[1], id: recreate[2] }
+  else recreate = false
+
   return (
     <Workbench
       freesewing={freesewing}
       Pattern={Pattern}
       userLanguage="en"
+      recreate={recreate}
       //translations={translations}
     />
   )

packages/teagan/example/src/App.js

@@ -16,11 +16,18 @@ const App = (props) => {
   }
   */
 
+  // Adds support for loading an external pattern configuration
+  let recreate
+  if (window) recreate = window.location.pathname.substr(1).split("/")
+  if (recreate.length === 3 && recreate[0] === 'from') recreate = { from: recreate[1], id: recreate[2] }
+  else recreate = false
+
   return (
     <Workbench
       freesewing={freesewing}
       Pattern={Pattern}
       userLanguage="en"
+      recreate={recreate}
       //translations={translations}
     />
   )

packages/theo/example/src/App.js

@@ -16,11 +16,18 @@ const App = (props) => {
   }
   */
 
+  // Adds support for loading an external pattern configuration
+  let recreate
+  if (window) recreate = window.location.pathname.substr(1).split("/")
+  if (recreate.length === 3 && recreate[0] === 'from') recreate = { from: recreate[1], id: recreate[2] }
+  else recreate = false
+
   return (
     <Workbench
       freesewing={freesewing}
       Pattern={Pattern}
       userLanguage="en"
+      recreate={recreate}
       //translations={translations}
     />
   )

packages/titan/example/src/App.js

@@ -16,11 +16,18 @@ const App = (props) => {
   }
   */
 
+  // Adds support for loading an external pattern configuration
+  let recreate
+  if (window) recreate = window.location.pathname.substr(1).split("/")
+  if (recreate.length === 3 && recreate[0] === 'from') recreate = { from: recreate[1], id: recreate[2] }
+  else recreate = false
+
   return (
     <Workbench
       freesewing={freesewing}
       Pattern={Pattern}
       userLanguage="en"
+      recreate={recreate}
       //translations={translations}
     />
   )

packages/trayvon/example/src/App.js

@@ -16,11 +16,18 @@ const App = (props) => {
   }
   */
 
+  // Adds support for loading an external pattern configuration
+  let recreate
+  if (window) recreate = window.location.pathname.substr(1).split("/")
+  if (recreate.length === 3 && recreate[0] === 'from') recreate = { from: recreate[1], id: recreate[2] }
+  else recreate = false
+
   return (
     <Workbench
       freesewing={freesewing}
       Pattern={Pattern}
       userLanguage="en"
+      recreate={recreate}
       //translations={translations}
     />
   )

packages/tutorial/example/src/App.js

@@ -16,11 +16,18 @@ const App = (props) => {
   }
   */
 
+  // Adds support for loading an external pattern configuration
+  let recreate
+  if (window) recreate = window.location.pathname.substr(1).split("/")
+  if (recreate.length === 3 && recreate[0] === 'from') recreate = { from: recreate[1], id: recreate[2] }
+  else recreate = false
+
   return (
     <Workbench
       freesewing={freesewing}
       Pattern={Pattern}
       userLanguage="en"
+      recreate={recreate}
       //translations={translations}
     />
   )

packages/wahid/example/src/App.js

@@ -16,11 +16,18 @@ const App = (props) => {
   }
   */
 
+  // Adds support for loading an external pattern configuration
+  let recreate
+  if (window) recreate = window.location.pathname.substr(1).split("/")
+  if (recreate.length === 3 && recreate[0] === 'from') recreate = { from: recreate[1], id: recreate[2] }
+  else recreate = false
+
   return (
     <Workbench
       freesewing={freesewing}
       Pattern={Pattern}
       userLanguage="en"
+      recreate={recreate}
       //translations={translations}
     />
   )

packages/waralee/example/src/App.js

@@ -16,11 +16,18 @@ const App = (props) => {
   }
   */
 
+  // Adds support for loading an external pattern configuration
+  let recreate
+  if (window) recreate = window.location.pathname.substr(1).split("/")
+  if (recreate.length === 3 && recreate[0] === 'from') recreate = { from: recreate[1], id: recreate[2] }
+  else recreate = false
+
   return (
     <Workbench
       freesewing={freesewing}
       Pattern={Pattern}
       userLanguage="en"
+      recreate={recreate}
       //translations={translations}
     />
   )