wip(fs.dev): Theme changes and breadcrumbs fix

packages/freesewing.shared/components/mdx/example.js

@@ -1,4 +1,103 @@
-const Example = props => <p>FIXME: Example still todo</p>
+import React, { useState } from 'react'
+import examples from '@freesewing/examples'
+import rendertest from '@freesewing/rendertest'
+import tutorial from '@freesewing/tutorial'
+import Draft from '@freesewing/components/Draft'
+import Icon from 'shared/components/icon'
+//import Design from '../Workbench/Design'
+
+const Example = ({
+  pattern = 'examples',
+  design = true,
+  children=null,
+  options = {},
+  settings,
+  part = '',
+  sample
+}) => {
+  const [designMode, setDesignMode] = useState(false)
+  const [focus, setFocus] = useState(null)
+
+  const raiseEvent = (type, data) => {
+    if (type === 'clearFocusAll') 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)
+    }
+
+    setFocus(f)
+  }
+
+  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++
+    }
+  }
+
+  const patterns = {
+    examples,
+    rendertest,
+    tutorial
+  }
+  settings = {
+    options: { ...options },
+    measurements: { head: 390 },
+    ...settings
+  }
+  if (part !== '') settings.only = [part]
+  const patternInstance = new patterns[pattern](settings)
+  if (sample) patternInstance.sample()
+  else patternInstance.draft()
+  const patternProps = patternInstance.getRenderProps()
+  return (
+    <figure className={designMode ? 'design example' : 'example'}>
+      <div className="example">
+        <div className="actions">
+          <button
+            disabled={!designMode}
+            color="primary"
+            onClick={() => raiseEvent('clearFocusAll', null)}
+          >
+            <Icon icon='settings' />
+          </button>
+          <div className="p-6 card bordered">
+            <div className="form-control">
+              <label className="cursor-pointer label">
+                <span className="label-text">Design mode</span>
+                <input
+                  type="checkbox"
+                  checked={designMode}
+                  className="toggle toggle-primary"
+                  onChange={() => setDesignMode(!designMode)}
+                />
+              </label>
+            </div>
+          </div>
+        </div>
+        <Draft {...patternProps} design={designMode} focus={focus} raiseEvent={raiseEvent} />
+      </div>
+      <figcaption>{children}</figcaption>
+      {designMode && (
+        <div className="design">
+          <Design
+            focus={focus}
+            design={designMode}
+            raiseEvent={raiseEvent}
+            parts={patternProps.parts}
+          />
+        </div>
+      )}
+    </figure>
+  )
+}
 
 export default Example
-