feat(ds.dev): example is not a shared component

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

@@ -1,106 +0,0 @@
-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 Pattern from '../../../react-pattern/dist/index.mjs'
-//import Design from '../Workbench/Design'
-//
-const Design = props => <p>TODO: Design</p>
-
-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 text-base-content">
-        <div className="actions">
-          <button
-            disabled={!designMode}
-            color="primary"
-            onClick={() => raiseEvent('clearFocusAll', null)}
-          >
-            <Icon icon='settings' />
-          </button>
-          <div className="form-control">
-            <label className="cursor-pointer label justify-start gap-4 font-lg lg:font-xl font-bold">
-              <input
-                type="checkbox"
-                checked={designMode}
-                className="toggle toggle-secondary"
-                onChange={() => setDesignMode(!designMode)}
-              />
-              <span className="label-text text-secondary">{designMode ? 'Disable' : 'Enable'} Developer View</span>
-            </label>
-          </div>
-        </div>
-        <div className="shadow rounded border border-base-200">
-          <Pattern {...patternProps} design={designMode} focus={focus} raiseEvent={raiseEvent} />
-        </div>
-      </div>
-      <figcaption className="text-base-content text-center text-base lg:text-lg italic">{children}</figcaption>
-      {designMode && (
-        <div className="design">
-          <Design
-            focus={focus}
-            design={designMode}
-            raiseEvent={raiseEvent}
-            parts={patternProps.parts}
-          />
-        </div>
-      )}
-    </figure>
-  )
-}
-
-export default Example

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

@@ -0,0 +1,12 @@
+import React from 'react'
+
+const Circle = (props) => (
+  <circle
+    cx={props.point.x}
+    cy={props.point.y}
+    r={props.point.attributes.get('data-circle')}
+    {...props.point.attributes.asPropsIfPrefixIs('data-circle-')}
+  />
+)
+
+export default Circle

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

@@ -0,0 +1,71 @@
+import React from 'react'
+
+const style = ` style="fill: none; stroke: currentColor;" `
+const grids = {
+  imperial: `
+      <pattern id="grid" height="25.4" width="25.4" patternUnits="userSpaceOnUse" key="grid">
+        <path class="gridline lg imperial" d="M 0 0 L 0 25.4 L 25.4 25.4" ${style} />
+        <path
+          class="gridline lg imperial"
+          d="M 12.7 0 L 12.7 25.4 M 0 12.7 L 25.4 12.7"
+          ${style}
+        />
+        <path
+          class="gridline sm imperial"
+          d="M 3.175 0 L 3.175 25.4 M 6.32 0 L 6.35 25.4 M 9.525 0 L 9.525 25.4 M 15.875 0 L 15.875 25.4 M 19.05 0 L 19.05 25.4 M 22.225 0 L 22.225 25.4"
+          ${style}
+        />
+        <path
+          class="gridline sm imperial"
+          d="M 0 3.175 L 25.4 3.175 M 0 6.32 L 25.4 6.35 M 0 9.525 L 25.4 9.525 M 0 15.875 L 25.4 15.875 M 0 19.05 L 25.4 19.05 M 0 22.225 L 25.4 22.225"
+          ${style}
+        />
+      </pattern>
+      `,
+  metric: `
+      <pattern id="grid" height="100" width="100" patternUnits="userSpaceOnUse" key="grid">
+        <path class="gridline lg metric" d="M 0 0 L 0 100 L 100 100" ${style} />
+        <path class="gridline metric" d="M 50 0 L 50 100 M 0 50 L 100 50" ${style} />
+        <path
+          class="gridline sm metric"
+          d="M 10 0 L 10 100 M 20 0 L 20 100 M 30 0 L 30 100 M 40 0 L 40 100 M 60 0 L 60 100 M 70 0 L 70 100 M 80 0 L 80 100 M 90 0 L 90 100"
+          ${style}
+        />
+        <path
+          class="gridline sm metric"
+          d="M 0 10 L 100 10 M 0 20 L 100 20 M 0 30 L 100 30 M 0 40 L 100 40 M 0 60 L 100 60 M 0 70 L 100 70 M 0 80 L 100 80 M 0 90 L 100 90"
+          ${style}
+        />
+        <path
+          class="gridline xs metric"
+          d="M 5 0 L 5 100 M 15 0 L 15 100 M 25 0 L 25 100 M 35 0 L 35 100 M 45 0 L 45 100 M 55 0 L 55 100 M 65 0 L 65 100 M 75 0 L 75 100 M 85 0 L 85 100 M 95 0 L 95 100"
+          ${style}
+        />
+        <path
+          class="gridline xs metric"
+          d="M 0 5 L 100 5 M 0 15 L 100 15 M 0 25 L 100 25 M 0 35 L 100 35 M 0 45 L 100 45 M 0 55 L 100 55 M 0 65 L 100 65 M 0 75 L 100 75 M 0 85 L 100 85 M 0 95 L 100 95"
+          ${style}
+        />
+      </pattern>
+  `
+}
+
+const Defs = (props) => {
+  let defs = props.svg.defs
+  if (props.settings.paperless) {
+    defs += grids[props.settings.units || 'metric']
+    for (let p in props.parts) {
+      let anchor = { x: 0, y: 0 }
+      if (typeof props.parts[p].points.gridAnchor !== 'undefined')
+        anchor = props.parts[p].points.gridAnchor
+      else if (typeof props.parts[p].points.anchor !== 'undefined')
+        anchor = props.parts[p].points.anchor
+
+      defs += `<pattern id="grid-${p}" key="grid-${p}" xlink:href="#grid" x="${anchor.x}" y="${anchor.y}" />`
+    }
+  }
+
+  return <defs dangerouslySetInnerHTML={{ __html: defs }} />
+}
+
+export default Defs

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

@@ -0,0 +1,109 @@
+import React from 'react'
+
+const Develop = (props) => {
+  // Methods
+  const renderAttributes = (attr) => {
+    let list = []
+    for (let a in attr.list)
+      list.push(
+        <li key={a}>
+          <b>{a}</b>: {renderAttributeValue(attr.list[a])}
+        </li>
+      )
+
+    return list
+  }
+
+  const renderAttributeValue = (val) => {
+    if (Array.isArray(val)) {
+      if (val.length === 1) return val.pop()
+      let list = []
+      for (let v of val) list.push(<li key={v}>{v}</li>)
+      return <ul>{list}</ul>
+    }
+
+    return val
+  }
+
+  const round = (val) => Math.round(val * 10) / 10
+
+  if (!props.develop || props.focus === null || Object.keys(props.focus).length < 1) return null
+  let info = []
+  for (let part of Object.keys(props.focus)) {
+    let points = []
+    let paths = []
+    for (let i in props.focus[part].paths) {
+      let name = props.focus[part].paths[i]
+      let path = props.parts[part].paths[name]
+      paths.push(
+        <details key={'patitle-' + name} className={'path c' + (i % 8)}>
+          <summary>
+            <span>path.<b>{name}</b></span>
+            <button
+              className="px-2 py-1 rounded text-secondary border-secondary border text-sm ml-4"
+              onClick={() => console.log(`parts.${part}.paths.${name}:`, path)}
+            >
+              console.log
+            </button>
+          </summary>
+          {path.attributes.length > 0 && (
+            <ul key={'ops-' + name}>
+              <li>
+                <b>attributes</b>: {renderAttributes(path.attributes)}
+              </li>
+            </ul>
+          )}
+        </details>
+      )
+    }
+    for (let i in props.focus[part].points) {
+      let name = props.focus[part].points[i]
+      let point = props.parts[part].points[name]
+      points.push(
+        <details key={'potitle-' + name} className={'point c' + (i % 8)}>
+          <summary>
+          <span>point.<b>{name}</b></span>
+          <button
+            className="px-2 py-1 rounded text-secondary border-secondary border text-sm hover:bold ml-4"
+            onClick={() => console.log(`parts.${part}.points.${name}:`, point)}
+          >
+            console.log
+          </button>
+          </summary>
+          <ul key={'pdata-' + name} className="text-sm">
+            <li>
+              <b>x</b>: {round(point.x)}
+            </li>
+            <li>
+              <b>y</b>: {round(point.y)}
+            </li>
+            {point.attributes.length > 0 && (
+              <li>
+                <b>attributes</b>: {renderAttributes(point.attributes)}
+              </li>
+            )}
+          </ul>
+        </details>
+      )
+    }
+    info.push(
+      <details key={'part-' + part} open>
+        <summary className="flex flex-row justify-between py-2 mr-2">
+        <span>parts.<b>{part}</b></span>
+        <button
+          className="px-2 rounded text-secondary border-secondary border text-sm"
+          onClick={() => props.raiseEvent('part', part)}
+        >
+          isolate
+        </button>
+        </summary>
+        {points.length > 0 && <ul>{points}</ul>}
+        {paths.length > 0 && <ul>{paths}</ul>}
+      </details>
+    )
+  }
+
+  return <div className="develop">{info}</div>
+}
+
+export default Develop

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

@@ -0,0 +1,65 @@
+import React from 'react'
+
+const DevelopPath = (props) => {
+  let output = []
+  let i = 0
+  let from = null
+  for (let op of props.path.ops) {
+    let key = props.part + props.name + i
+    if (op.type === 'curve') {
+      output.push(
+        <path
+          key={key + 'cp1'}
+          d={`M ${from.x},${from.y} L ${op.cp1.x},${op.cp1.y}`}
+          className="develop path cp"
+        />
+      )
+      i++
+      output.push(
+        <path
+          key={key + 'cp2'}
+          d={`M ${op.to.x},${op.to.y} L ${op.cp2.x},${op.cp2.y}`}
+          className="develop path cp"
+        />
+      )
+      i++
+      output.push(
+        <circle
+          key={key + 'cpcirc1'}
+          cx={op.cp1.x}
+          cy={op.cp1.y}
+          r={3.5}
+          className="develop path cp"
+        />
+      )
+      i++
+      output.push(
+        <circle
+          key={key + 'cpcirc2'}
+          cx={op.cp2.x}
+          cy={op.cp2.y}
+          r={3.5}
+          className="develop path cp"
+        />
+      )
+      from = op.to
+    } else if (op.type !== 'close') from = op.to
+  }
+  output.push(
+    <path
+      key={props.part + props.name + 'dpath'}
+      d={props.path.asPathstring()}
+      onClick={() =>
+        props.raiseEvent('path', {
+          path: props.path,
+          name: props.name,
+          part: props.part
+        })
+      }
+      className="develop hovertrap"
+    />
+  )
+  return output
+}
+
+export default DevelopPath

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

@@ -0,0 +1,22 @@
+import React from 'react'
+
+const DevelopPoint = (props) => (
+  <g className={props.className}>
+    <circle cx={props.point.x} cy={props.point.y} r="2" className="center" />
+    <circle
+      cx={props.point.x}
+      cy={props.point.y}
+      r="7.5"
+      className="hovertrap"
+      onClick={() =>
+        props.raiseEvent('point', {
+          point: props.point,
+          name: props.name,
+          part: props.part
+        })
+      }
+    />
+  </g>
+)
+
+export default DevelopPoint

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

@@ -0,0 +1,138 @@
+import React from 'react'
+import Path from '../Path'
+import Point from '../Point'
+import Snippet from '../Snippet'
+import { getProps } from '../utils'
+
+const Part = (props) => {
+  const focusPoint = (point, i) => {
+    const p = props.part.points[point]
+    const pathString = `M ${p.x} ${props.part.topLeft.y} `
+      + `L ${p.x} ${props.part.bottomRight.y} `
+      + `M ${props.part.topLeft.x} ${p.y} `
+      + `L ${props.part.bottomRight.x} ${p.y} `
+    const classes = 'focus point c' + (i % 8) // Cycle through 8 colors
+    return (
+      <React.Fragment key={'fp' + point}>
+        <path d={pathString} className={classes} />
+        <circle
+          cx={p.x}
+          cy={p.y}
+          r="5"
+          className="contrast"
+          onClick={() =>
+            props.raiseEvent('clearFocus', {
+              part: props.name,
+              type: 'points',
+              name: point
+            })
+          }
+        />
+      </React.Fragment>
+    )
+  }
+
+  const focusCoords = (p, i) => {
+    let pathString = `M ${p.x} ${props.part.topLeft.y} `
+    pathString += `L ${p.x} ${props.part.bottomRight.y} `
+    pathString += `M ${props.part.topLeft.x} ${p.y} `
+    pathString += `L ${props.part.bottomRight.x} ${p.y} `
+    let classes = 'focus coords c' + (i % 4) // Cycle through 4 CSS classes
+    return (
+      <React.Fragment key={'cp' + i}>
+        <path d={pathString} className={classes} />
+        <circle
+          cx={p.x}
+          cy={p.y}
+          r="5"
+          className={classes}
+          onClick={() =>
+            props.raiseEvent('clearFocus', {
+              part: props.name,
+              type: 'coords',
+              data: p
+            })
+          }
+        />
+      </React.Fragment>
+    )
+  }
+
+  let grid = props.paperless ? (
+    <rect
+      x={props.part.topLeft.x}
+      y={props.part.topLeft.y}
+      width={props.part.width}
+      height={props.part.height}
+      className="grid"
+      fill={'url(#grid-' + props.name + ')'}
+    />
+  ) : null
+
+  let focus = []
+  if (props.develop) {
+    if (props.focus && typeof props.focus[props.name] !== 'undefined') {
+      for (let i in props.focus[props.name].points)
+        focus.push(focusPoint(props.focus[props.name].points[i], i))
+      for (let i in props.focus[props.name].paths) {
+        let name = props.focus[props.name].paths[i]
+        focus.push(
+          <path
+            key={'fpa-' + name}
+            d={props.part.paths[name].asPathstring()}
+            className={'focus path c' + (i % 4)}
+            onClick={() =>
+              props.raiseEvent('clearFocus', {
+                part: props.name,
+                type: 'paths',
+                name
+              })
+            }
+          />
+        )
+      }
+      for (let i in props.focus[props.name].coords)
+        focus.push(focusCoords(props.focus[props.name].coords[i], i))
+    }
+  }
+
+  return (
+    <g {...getProps(props.part)} id={`part-${props.name}`}>
+      {grid}
+      {Object.keys(props.part.paths).map((name) => (
+        <Path
+          key={name}
+          name={name}
+          part={props.name}
+          language={props.language}
+          path={props.part.paths[name]}
+          focus={props.focus}
+          topLeft={props.part.topLeft}
+          bottomRight={props.part.bottomRight}
+          develop={props.develop}
+          raiseEvent={props.raiseEvent}
+        />
+      ))}
+      {Object.keys(props.part.points).map((name) => (
+        <Point
+          key={name}
+          name={name}
+          part={props.name}
+          language={props.language}
+          point={props.part.points[name]}
+          focus={props.focus}
+          topLeft={props.part.topLeft}
+          bottomRight={props.part.bottomRight}
+          develop={props.develop}
+          raiseEvent={props.raiseEvent}
+        />
+      ))}
+      {Object.keys(props.part.snippets).map((name) => (
+        <Snippet key={name} name={name} snippet={props.part.snippets[name]} />
+      ))}
+      {focus}
+    </g>
+  )
+}
+
+export default Part

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

@@ -0,0 +1,20 @@
+import React from 'react'
+import TextOnPath from '../TextOnPath'
+import DevelopPath from '../DevelopPath'
+import { getProps } from '../utils'
+
+const Path = (props) => {
+  if (!props.path.render) return null
+  const output = []
+  const pathId = 'path-' + props.part + '-' + props.name
+  if (props.develop) output.push(<DevelopPath {...props} key={'dpa-' + props.name} />)
+  output.push(
+    <path id={pathId} key={pathId} d={props.path.asPathstring()} {...getProps(props.path)} />
+  )
+  if (props.path.attributes.get('data-text'))
+    output.push(<TextOnPath key={'text-on-path-' + props.name} pathId={pathId} {...props} />)
+
+  return output
+}
+
+export default Path

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

@@ -0,0 +1,18 @@
+import React from 'react'
+import DevelopPoint from '../DevelopPoint'
+import Text from '../Text'
+import Circle from '../Circle'
+
+const Point = (props) => {
+  const output = []
+  if (props.develop)
+    output.push(<DevelopPoint {...props} key={'dp-' + props.name} className="develop point" />)
+  if (props.point.attributes && props.point.attributes.get('data-text'))
+    output.push(<Text {...props} key={'point-' + props.name} />)
+  if (props.point.attributes && props.point.attributes.get('data-circle'))
+    output.push(<Circle point={props.point} key={'circle-' + props.name} />)
+
+  return output.length < 1 ? null : output
+}
+
+export default Point

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

@@ -0,0 +1,27 @@
+import React from 'react'
+import { getProps } from '../utils'
+
+const Snippet = (props) => {
+  const snippetProps = {
+    xlinkHref: '#' + props.snippet.def,
+    x: props.snippet.anchor.x,
+    y: props.snippet.anchor.y
+  }
+  let scale = props.snippet.attributes.get('data-scale')
+  let rotate = props.snippet.attributes.get('data-rotate')
+  if (scale || rotate) {
+    snippetProps.transform = ''
+    if (scale) {
+      snippetProps.transform += `translate(${snippetProps.x}, ${snippetProps.y}) `
+      snippetProps.transform += `scale(${scale}) `
+      snippetProps.transform += `translate(${snippetProps.x * -1}, ${snippetProps.y * -1}) `
+    }
+    if (rotate) {
+      snippetProps.transform += `rotate(${rotate}, ${snippetProps.x}, ${snippetProps.y}) `
+    }
+  }
+
+  return <use {...snippetProps} {...getProps(props.snippet)} />
+}
+
+export default Snippet

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

@@ -0,0 +1,33 @@
+import React from 'react'
+
+const Svg = ({
+  embed = true,
+  develop = false,
+  language = 'en',
+  className = 'freesewing pattern',
+  style = {},
+  viewBox = false,
+  width,
+  height,
+  children
+}) => {
+  let attributes = {
+    xmlns: 'http://www.w3.org/2000/svg',
+    'xmlns:svg': 'http://www.w3.org/2000/svg',
+    xmlnsXlink: 'http://www.w3.org/1999/xlink',
+    xmlLang: language,
+    viewBox: viewBox || `0 0 ${width} ${height}`,
+    className,
+    style
+  }
+
+  if (!embed) {
+    attributes.width = width + 'mm'
+    attributes.height = height + 'mm'
+  }
+  if (develop) attributes.className += ' develop'
+
+  return <svg {...attributes}>{children}</svg>
+}
+
+export default Svg

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

@@ -0,0 +1,44 @@
+import React from 'react'
+import { strings } from '@freesewing/i18n'
+
+const Text = (props) => {
+  let text = []
+  // Handle translation
+  let translated = ''
+  for (let string of props.point.attributes.getAsArray('data-text')) {
+    if (strings[props.language]['plugin.' + string])
+      translated += strings[props.language]['plugin.' + string]
+    else translated += string.toString().replace(/"/g, '"')
+    translated += ' '
+  }
+  // Handle muti-line text
+  if (translated.indexOf('\n') !== -1) {
+    let key = 0
+    let lines = translated.split('\n')
+    text.push(<tspan key={'tspan-' + key}>{lines.shift()}</tspan>)
+    for (let line of lines) {
+      key++
+      text.push(
+        <tspan
+          key={'tspan-' + key}
+          x={props.point.x}
+          dy={props.point.attributes.get('data-text-lineheight') || 12}
+        >
+          {line.toString().replace(/&quot;/g, '"')}
+        </tspan>
+      )
+    }
+  } else text.push(<tspan key="tspan-1">{translated}</tspan>)
+
+  return (
+    <text
+      x={props.point.x}
+      y={props.point.y}
+      {...props.point.attributes.asPropsIfPrefixIs('data-text-')}
+    >
+      {text}
+    </text>
+  )
+}
+
+export default Text

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

@@ -0,0 +1,31 @@
+import React from 'react'
+import { strings } from '@freesewing/i18n'
+
+const TextOnPath = (props) => {
+  let text = []
+  // Handle translation
+  let translated = ''
+  for (let string of props.path.attributes.getAsArray('data-text')) {
+    if (strings[props.language]['plugin.' + string])
+      translated += strings[props.language]['plugin.' + string]
+    else translated += string.toString().replace(/"/g, '"')
+    translated += ' '
+  }
+  let textPathProps = {
+    xlinkHref: '#' + props.pathId,
+    startOffset: '0%'
+  }
+  let align = props.path.attributes.get('data-text-class')
+  if (align && align.indexOf('center') > -1) textPathProps.startOffset = '50%'
+  else if (align && align.indexOf('right') > -1) textPathProps.startOffset = '100%'
+
+  return (
+    <text>
+      <textPath {...textPathProps}>
+        <tspan {...props.path.attributes.asPropsIfPrefixIs('data-text-')}>{translated}</tspan>
+      </textPath>
+    </text>
+  )
+}
+
+export default TextOnPath

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

@@ -0,0 +1,148 @@
+import React, { useState } from 'react'
+import Svg from './Svg'
+import Defs from './Defs'
+import Part from './Part'
+import Develop from './Develop'
+
+const PatternSvg = props => (
+  <Svg
+    embed={props.settings.embed}
+    width={props.width}
+    height={props.height}
+    language={props.settings.locale}
+    id={props.settings.idPrefix + 'svg'}
+    develop={props.develop || false}
+    style={props.style || {}}
+    viewBox={props.viewBox}
+    className={props.className || 'freesewing pattern'}
+  >
+    <Defs {...props} />
+    <style>{`:root { --pattern-scale: ${props.settings.scale || 1}}`}</style>
+    <g>
+      {Object.keys(props.parts).map((name) => (
+        <Part
+          part={props.parts[name]}
+          language={props.settings.locale}
+          paperless={props.settings.paperless}
+          units={props.settings.units}
+          key={name}
+          name={name}
+          focus={props.focus || false}
+          develop={props.develop || false}
+          raiseEvent={props.raiseEvent}
+        />
+      ))}
+    </g>
+  </Svg>
+)
+
+const Pattern = props => {
+
+  const {
+    pattern = 'examples',
+    patterns = {},
+    children=null,
+    options = {},
+    measurements = { head: 390},
+    settings,
+    part = '',
+    sample,
+    svgOnly=false,
+    allowDevelop=true
+  } = props
+
+  const [develop, setDevelop] = useState(false)
+  const [focus, setFocus] = useState(null)
+
+  // Don't continue if there's no pattern
+  if (!pattern || !patterns[pattern]) return <pre>{JSON.stringify(props,null,4)}</pre> //null
+
+  /* Helper method to handle user clicks */
+  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)
+  }
+
+  /* Handle various elements with focus */
+  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++
+    }
+  }
+
+  /* Set up settings object */
+  settings = {
+    options: { ...options },
+    measurements: { ...measurements },
+    ...settings
+  }
+
+  if (part !== '') settings.only = [part]
+  const patternInstance = new patterns[pattern](settings)
+  if (sample) patternInstance.sample()
+  else patternInstance.draft()
+  const patternProps = patternInstance.getRenderProps()
+  return svgOnly
+    ? <PatternSvg {...patternProps} develop={develop} focus={focus} raiseEvent={raiseEvent} />
+    : (
+      <figure className={develop ? 'develop example' : 'example'}>
+        <div className="example text-base-content">
+          {allowDevelop && (
+            <div className="actions">
+              <div className="form-control">
+                <label className="cursor-pointer label justify-start gap-4 font-lg lg:font-xl font-bold">
+                  <input
+                    type="checkbox"
+                    checked={develop}
+                    className="toggle toggle-secondary"
+                    onChange={() => setDevelop(!develop)}
+                  />
+                  <span className="label-text text-secondary">{develop ? 'Disable' : 'Enable'} Developer View</span>
+                </label>
+              </div>
+            </div>
+          )}
+          {develop && (
+            <div className="develop p-4 py-2 border rounded mb-2">
+              <div className="flex flex-row justify-between">
+                <h5>Developer info</h5>
+                <button
+                  disabled={!develop}
+                  className="px-2 py-1 rounded text-secondary border-secondary border text-sm"
+                  onClick={() => raiseEvent('clearFocusAll', null)}
+                >
+                  <strong>Clear</strong>
+                </button>
+              </div>
+              <Develop
+                focus={focus}
+                develop={develop}
+                raiseEvent={raiseEvent}
+                parts={patternProps.parts}
+              />
+            </div>
+          )}
+          <div className="shadow rounded border border-base-200">
+            <PatternSvg {...patternProps} develop={develop} focus={focus} raiseEvent={raiseEvent} />
+          </div>
+        </div>
+        <figcaption className="text-base-content text-center text-base lg:text-lg italic">{children}</figcaption>
+      </figure>
+    )
+}
+
+export default Pattern

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

@@ -0,0 +1,36 @@
+export const getProps = (obj) => {
+  /** I can't believe it but there seems to be no method on NPM todo this */
+  const cssKey = (key) => {
+    let chunks = key.split('-')
+    if (chunks.length > 1) {
+      key = chunks.shift()
+      for (let s of chunks) key += s.charAt(0).toUpperCase() + s.slice(1)
+    }
+
+    return key
+  }
+
+  const convert = (css) => {
+    let style = {}
+    let rules = css.split(';')
+    for (let rule of rules) {
+      let chunks = rule.split(':')
+      if (chunks.length === 2) style[cssKey(chunks[0].trim())] = chunks[1].trim()
+    }
+    return style
+  }
+
+  let rename = {
+    class: 'className',
+    'marker-start': 'markerStart',
+    'marker-end': 'markerEnd'
+  }
+  let props = {}
+  for (let key in obj.attributes.list) {
+    if (key === 'style') props[key] = convert(obj.attributes.get(key))
+    if (Object.keys(rename).indexOf(key) !== -1) props[rename[key]] = obj.attributes.get(key)
+    else if (key !== 'style') props[key] = obj.attributes.get(key)
+  }
+
+  return props
+}

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

@@ -3,14 +3,20 @@ import Highlight from './highlight.js'
 import YouTube from './youtube.js'
 import DesignIterator from './design-iterator.js'
 import Figure from './figure.js'
-import Example from './example.js'
 import ReadMore from './read-more.js'
+import Example from './example/index.js'
+import examples from '@freesewing/examples'
+import rendertest from '@freesewing/rendertest'
+import tutorial from '@freesewing/tutorial'
 
 
 const mdxCustomComponents = {
   // Custom components
   DesignIterator,
-  Example,
+  Example: props => <Example
+    {...props}
+    patterns={{examples, rendertest, tutorial}}
+  >{props.children}</Example>,
   Fixme: props => <Popout {...props} fixme />,
   Link: props => <Popout {...props} link />,
   Note: props => <Popout {...props} note />,