wip(dev): More changes for v3 docs

sites/shared/components/mdx/example/index.js

@@ -5,6 +5,7 @@ import { Tutorial } from '@freesewing/tutorial'
 import Svg from '../../workbench/draft/svg'
 import Defs from '../../workbench/draft/defs'
 import Stack from '../../workbench/draft/stack'
+import { useGist } from 'shared/hooks/useGist'
 
 export const examplePatterns = {
   examples: Examples,
@@ -12,32 +13,20 @@ export const examplePatterns = {
   //tutorial: Tutorial,
 }
 
-const Example = ({
-  app,
-  pattern='examples',
-  part,
-  gist={
-    settings: {
-      options: {},
-      measurements: { head: 390 },
-    },
-    _state: { xray: { enabled: false } }
-  },
-  updateGist,
-  unsetGist,
-  showInfo,
-  feedback,
-  xray=false,
-  measurements = { head: 390 },
-  hasRequiredMeasurements=true,
-}) => {
+const Example = ({ app, part, pattern='examples', xray=false }) => {
   const Pattern = examplePatterns[pattern]
+  // State for gist
+  const { gist, setGist, unsetGist, updateGist, gistReady, undoGist, resetGist } = useGist(
+    'example-mdx',
+    app
+  )
+
   if (xray) {
-    gist._state.xray.enabled = xray
-    gist.settings.margin = 20
+    gist._state.xray = { enabled: true }
+    gist.margin = 20
   }
-  if (part !== '') gist.settings.only = [ "examples."+part]
-  const draft = new Pattern(gist.settings)
+  if (part !== '') gist.only = [ "examples."+part]
+  const draft = new Pattern(gist)
   const patternProps = draft.draft().getRenderProps()
 
   return (
@@ -46,7 +35,8 @@ const Example = ({
       <style>{`:root { --pattern-scale: 1} ${patternProps.svg.style}`}</style>
       <g>
         {Object.keys(patternProps.stacks).map((stackName) => (
-          <Stack {...{ app, gist, updateGist, unsetGist, showInfo, patternProps }}
+          <Stack {...{ app, gist, updateGist, unsetGist, patternProps }}
+            showInfo={app.setPopup}
             key={stackName}
             stackName={stackName}
             stack={patternProps.stacks[stackName]}