fix(lab): Fixed lab after moving to esm and named exports

sites/lab/hooks/useApp.mjs

@@ -53,7 +53,7 @@ for (const type in designsByType) {
   }
 }
 
-function useApp(full = true) {
+export const useApp = () => {
   // Load translation method
   const locale = useRouter().locale
   const { t } = useTranslation(['app'])
@@ -108,5 +108,3 @@ function useApp(full = true) {
     standalone: false,
   }
 }
-
-export default useApp

sites/shared/components/workbench/exporting/pdf-maker.mjs

@@ -1,6 +1,6 @@
 import PDFDocument from 'pdfkit/js/pdfkit.standalone'
 import SVGtoPDF from 'svg-to-pdfkit'
-import { logoPath } from 'shared/logos/freesewing.mjs'
+import { logoPath } from 'shared/components/logos/freesewing.mjs'
 
 /** an svg of the logo to put on the cover page */
 const logoSvg = `<svg viewBox="0 0 25 25">

sites/shared/components/workbench/inputs/design-option-pct-deg.mjs

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { ClearIcon, EditIcon } from 'shared/components/icons.mjs'
-import { formatMm, round } from 'shared/utils'
+import { formatMm, round } from 'shared/utils.mjs'
 import { useTranslation } from 'next-i18next'
 
 const EditOption = (props) => (

sites/shared/components/workbench/logs.mjs

@@ -1,6 +1,6 @@
 import Markdown from 'react-markdown'
-import { formatMm } from 'shared/utils'
-import { Tab, Tabs } from '../mdx/tabs.js'
+import { formatMm } from 'shared/utils.mjs'
+import { Tab, Tabs } from '../mdx/tabs.mjs'
 
 export const Error = ({ err }) => {
   // Include the error name and message info if it isn't already at the top

sites/shared/components/workbench/measurements/index.mjs

@@ -1,14 +1,14 @@
 import React, { useMemo, useEffect, useState } from 'react'
-import MeasurementInput from '../inputs/measurement.js'
+import { MeasurementInput } from '../inputs/measurement.mjs'
 import { adult, doll, giant } from '@freesewing/models'
 import {
-  CisFemalIcon as WomenswearIcon,
+  CisFemaleIcon as WomenswearIcon,
   CisMaleIcon as MenswearIcon,
 } from 'shared/components/icons.mjs'
 import { useTranslation } from 'next-i18next'
-import Setting from '../menu/core-settings/setting'
-import { settings } from '../menu/core-settings/index'
-import { Tab, Tabs } from 'shared/components/mdx/tabs.js'
+import { Setting } from '../menu/core-settings/setting.mjs'
+import { settings } from '../menu/core-settings/index.mjs'
+import { Tab, Tabs } from 'shared/components/mdx/tabs.mjs'
 
 const groups = { adult, doll, giant }
 
@@ -17,7 +17,7 @@ const icons = {
   cisMale: <MenswearIcon />,
 }
 
-const WorkbenchMeasurements = ({ app, design, gist, updateGist, gistReady }) => {
+export const WorkbenchMeasurements = ({ app, design, gist, updateGist, gistReady }) => {
   const { t } = useTranslation(['app', 'cfp'])
 
   // Method to handle measurement updates
@@ -111,5 +111,3 @@ const WorkbenchMeasurements = ({ app, design, gist, updateGist, gistReady }) =>
     </div>
   )
 }
-
-export default WorkbenchMeasurements

sites/shared/components/workbench/measurements/non-human.mjs

@@ -8,24 +8,20 @@ const nonHuman = {
   womenswear: {
     dolls: dolls.cisFemale,
     giants: giants.cisMale,
+  },
 }
-}
-const round = val => Math.round(val*10)/10
+const round = (val) => Math.round(val * 10) / 10
 for (let i = 0.1; i < 0.7; i += 0.1) {
   const name = `${Math.round(i * 10)}/10`
   nonHuman.womenswear.dolls[name] = {}
   // womenswear: Based on womenswear34
   for (const [m, val] of Object.entries(womenswear34)) {
-    nonHuman.womenswear.dolls[name][m] = (m === 'shoulderSlope')
-      ? val
-      : round(val * i)
+    nonHuman.womenswear.dolls[name][m] = m === 'shoulderSlope' ? val : round(val * i)
   }
   nonHuman.menswear.dolls[name] = {}
   // menswear: Based on menswear42
   for (const [m, val] of Object.entries(menswear42)) {
-    nonHuman.menswear.dolls[name][m] = (m === 'shoulderSlope')
-      ? val
-      : round(val * i)
+    nonHuman.menswear.dolls[name][m] = m === 'shoulderSlope' ? val : round(val * i)
   }
 }
 for (let i = 1.5; i <= 3; i += 0.5) {
@@ -33,18 +29,13 @@ for (let i=1.5;i<=3;i+=0.5) {
   nonHuman.womenswear.giants[name] = {}
   // womenswear: Based on womenswear34
   for (const [m, val] of Object.entries(womenswear34)) {
-    nonHuman.womenswear.giants[name][m] = (m === 'shoulderSlope')
-      ? val
-      : round(val * i)
+    nonHuman.womenswear.giants[name][m] = m === 'shoulderSlope' ? val : round(val * i)
   }
   nonHuman.menswear.giants[name] = {}
   // menswear: Based on menswear42
   for (const [m, val] of Object.entries(menswear42)) {
-    nonHuman.menswear.giants[name][m] = (m === 'shoulderSlope')
-      ? val
-      : round(val * i)
+    nonHuman.menswear.giants[name][m] = m === 'shoulderSlope' ? val : round(val * i)
   }
 }
 
 export default nonHuman
-

sites/shared/components/workbench/menu/core-settings/index.mjs

@@ -1,7 +1,7 @@
 import { SettingsIcon } from 'shared/components/icons.mjs'
-import { Chevron } from 'shared/components/navigation/primary.js'
-import Setting from './setting.js'
-import { Ul, Details, TopSummary, TopSumTitle } from '../index.js'
+import { Chevron } from 'shared/components/navigation/primary.mjs'
+import { Setting } from './setting.mjs'
+import { Ul, Details, TopSummary, TopSumTitle } from '../index.mjs'
 import { useTranslation } from 'next-i18next'
 
 export const settings = {

sites/shared/components/workbench/menu/design-options/index.mjs

@@ -1,8 +1,8 @@
 import { OptionsIcon } from 'shared/components/icons.mjs'
-import { Chevron } from 'shared/components/navigation/primary.js'
+import { Chevron } from 'shared/components/navigation/primary.mjs'
 import { OptionGroup } from './option-group.mjs'
 import { OptionComponent } from './option.mjs'
-import { Ul, Details, TopSummary, TopSumTitle } from 'shared/components/workbench/menu.mjs'
+import { Ul, Details, TopSummary, TopSumTitle } from 'shared/components/workbench/menu/index.mjs'
 import { useTranslation } from 'next-i18next'
 import { optionsMenuStructure } from 'shared/utils.mjs'
 

sites/shared/components/workbench/menu/design-options/option-group.mjs

@@ -1,5 +1,5 @@
 import { Chevron } from 'shared/components/navigation/primary.mjs'
-import { Li, Ul, Details, Summary, SumDiv, Deg } from 'shared/components/workbench/menu.mjs'
+import { Li, Ul, Details, Summary, SumDiv, Deg } from 'shared/components/workbench/menu/index.mjs'
 import { useTranslation } from 'next-i18next'
 
 export const OptionGroup = (props) => {

sites/shared/components/workbench/menu/design-options/option-input.mjs

@@ -1,4 +1,4 @@
-import { PctDegOption } from 'shared/components/workbench/inputs/design-option-pct-deg.mjs'
+import { DesignOptionPctDeg } from 'shared/components/workbench/inputs/design-option-pct-deg.mjs'
 import { CountOption } from 'shared/components/workbench/inputs/design-option-count.mjs'
 import { ListOption } from 'shared/components/workbench/inputs/design-option-list.mjs'
 import { Popout } from 'shared/components/popout.mjs'
@@ -6,9 +6,9 @@ import { Popout } from 'shared/components/popout.mjs'
 export const Tmp = (props) => <p>not yet</p>
 
 export const inputs = {
-  pct: PctDegOption,
+  pct: DesignOptionPctDeg,
   count: CountOption,
-  deg: (props) => <PctDegOption {...props} type="deg" />,
+  deg: (props) => <DesignOptionPctDeg {...props} type="deg" />,
   list: ListOption,
   mm: () => (
     <Popout fixme compact>

sites/shared/components/workbench/menu/design-options/option.mjs

@@ -1,6 +1,13 @@
 import { Chevron } from 'shared/components/navigation/primary.mjs'
 import { optionType } from 'shared/utils.mjs'
-import { Li, Details, Summary, SumButton, SumDiv, Deg } from 'shared/components/workbench/menu.mjs'
+import {
+  Li,
+  Details,
+  Summary,
+  SumButton,
+  SumDiv,
+  Deg,
+} from 'shared/components/workbench/menu/index.mjs'
 import { useTranslation } from 'next-i18next'
 import { values } from 'shared/components/workbench/menu/design-options/option-value.mjs'
 import { inputs } from 'shared/components/workbench/menu/design-options/option-input.mjs'

sites/shared/components/workbench/menu/index.mjs

@@ -1,9 +1,9 @@
 import { linkClasses } from 'shared/components/navigation/primary.mjs'
 import { ViewMenu } from './view.mjs'
-import { DesignOptions } from './design-options.mjs'
-import { CoreSettings } from './core-settings.mjs'
-import { Xray } from './xray'
-import { TestDesignOptions } from './test-design-options.mjs'
+import { DesignOptions } from './design-options/index.mjs'
+import { CoreSettings } from './core-settings/index.mjs'
+import { Xray } from './xray/index.mjs'
+import { TestDesignOptions } from './test-design-options/index.mjs'
 
 export const Ul = (props) => <ul className="pl-5 list-inside">{props.children}</ul>
 export const Li = (props) => (
@@ -111,11 +111,13 @@ export const WorkbenchMenu = (props) => {
       {['draft', 'cuttingLayout', 'printingLayout'].indexOf(props.gist?._state?.view) > -1 && (
         <>
           <DesignOptions {...props} />
-          <CoreSettings {...props} />
-          {props.gist.renderer === 'react' && <Xray {...props} />}
         </>
       )}
       {props.gist?._state?.view === 'test' && <TestDesignOptions {...props} />}
     </nav>
   )
 }
+
+//<DesignOptions {...props} />
+//<CoreSettings {...props} />
+//{props.gist.renderer === 'react' && <Xray {...props} />}

sites/shared/components/workbench/menu/test-design-options/index.mjs

@@ -1,8 +1,8 @@
 import { OptionsIcon } from 'shared/components/icons.mjs'
-import { Chevron } from 'shared/components/navigation/primary.js'
-import OptionGroup from '../design-options/option-group'
-import Option from './option'
-import { Ul, Details, TopSummary, TopSumTitle } from 'shared/components/workbench/menu'
+import { Chevron } from 'shared/components/navigation/primary.mjs'
+import OptionGroup from '../design-options/option-group.mjs'
+import Option from './option.mjs'
+import { Ul, Details, TopSummary, TopSumTitle } from 'shared/components/workbench/menu/index.mjs'
 import { useTranslation } from 'next-i18next'
 import { optionsMenuStructure } from 'shared/utils.mjs'
 import { adult, doll, giant } from '@freesewing/models'
@@ -24,10 +24,12 @@ const SampleDesignOption = (props) => {
   )
 }
 
-const DesignOptions = (props) => {
+export const TestDesignOptions = (props) => {
   const { t } = useTranslation(['app'])
   const optionsMenu = optionsMenuStructure(props.design.patternConfig.options)
 
+  // FIXME: This menu is broken right now
+
   const measies = props.draft?.config?.measurements || []
 
   return (
@@ -45,7 +47,7 @@ const DesignOptions = (props) => {
                 type={options}
                 option={group}
                 key={group}
-                sampleSettings={{ type: 'option', option }}
+                sampleSettings={{ type: 'option', options }}
               />
             ) : (
               <OptionGroup
@@ -103,5 +105,3 @@ const DesignOptions = (props) => {
     </>
   )
 }
-
-export default DesignOptions

sites/shared/components/workbench/menu/test-design-options/option.mjs

@@ -1,11 +1,8 @@
-import { Li, SumButton, SumDiv } from 'shared/components/workbench/menu'
+import { Li, SumButton, SumDiv } from 'shared/components/workbench/menu/index.mjs'
 import { useTranslation } from 'next-i18next'
 
-const Option = props => {
-  const active = (
-    props.sampleSettings?.type === 'option' &&
-    props.active === props.option
-  )
+const Option = (props) => {
+  const active = props.sampleSettings?.type === 'option' && props.active === props.option
 
   const setSampleSettings = () => {
     props.updateGist(
@@ -19,18 +16,18 @@ const Option = props => {
     <Li>
       <SumButton onClick={setSampleSettings}>
         <SumDiv active={active}>
-          <span className={`
+          <span
+            className={`
             text-3xl inline-block p-0 leading-3 px-2
-            ${active
+            ${
+              active
                 ? 'text-secondary sm:text-secondary-focus translate-y-1 font-bold'
                 : 'translate-y-3'
             }`}
           >
             {active ? <span>&bull;</span> : <span>&deg;</span>}
           </span>
-          <span className={active ? 'text-secondary font-bold' : ''}>
-            {props.label}
-          </span>
+          <span className={active ? 'text-secondary font-bold' : ''}>{props.label}</span>
         </SumDiv>
       </SumButton>
     </Li>

sites/shared/components/workbench/menu/xray/attributes.js

@@ -1,50 +0,0 @@
-import { Chevron } from 'shared/components/navigation/primary'
-import { Ul, Li, Details, Summary, SumDiv, NoSumDiv, Deg } from 'shared/components/workbench/menu'
-
-const XrayAttributes = ({ attr=false, t }) => {
-  if (!attr || !attr.list || Object.keys(attr.list).length < 1) return null
-
-  return (
-    <Li>
-      <Details>
-        <Summary>
-          <SumDiv>
-            <Deg />
-            Attributes
-          </SumDiv>
-          <Chevron />
-        </Summary>
-        <Ul>
-          {Object.keys(attr.list).map(at => (
-          <Li key={at}>
-            <Details>
-              <Summary>
-                <SumDiv>
-                  <Deg />
-                  {at}
-                </SumDiv>
-                <Chevron />
-              </Summary>
-              <Ul>
-                {attr.list[at].map(val => (
-                  <Li key={val}>
-                    <NoSumDiv>
-                      <Deg />
-                      <span>{val === true
-                        ? t('app.yes')
-                        : val
-                      }</span>
-                    </NoSumDiv>
-                  </Li>
-                ))}
-              </Ul>
-            </Details>
-          </Li>
-          ))}
-        </Ul>
-      </Details>
-    </Li>
-  )
-}
-
-export default XrayAttributes

sites/shared/components/workbench/menu/xray/attributes.mjs

@@ -0,0 +1,45 @@
+import { Chevron } from 'shared/components/navigation/primary'
+import { Ul, Li, Details, Summary, SumDiv, NoSumDiv, Deg } from 'shared/components/workbench/menu'
+
+export const XrayAttributes = ({ attr = false, t }) => {
+  if (!attr || !attr.list || Object.keys(attr.list).length < 1) return null
+
+  return (
+    <Li>
+      <Details>
+        <Summary>
+          <SumDiv>
+            <Deg />
+            Attributes
+          </SumDiv>
+          <Chevron />
+        </Summary>
+        <Ul>
+          {Object.keys(attr.list).map((at) => (
+            <Li key={at}>
+              <Details>
+                <Summary>
+                  <SumDiv>
+                    <Deg />
+                    {at}
+                  </SumDiv>
+                  <Chevron />
+                </Summary>
+                <Ul>
+                  {attr.list[at].map((val) => (
+                    <Li key={val}>
+                      <NoSumDiv>
+                        <Deg />
+                        <span>{val === true ? t('app.yes') : val}</span>
+                      </NoSumDiv>
+                    </Li>
+                  ))}
+                </Ul>
+              </Details>
+            </Li>
+          ))}
+        </Ul>
+      </Details>
+    </Li>
+  )
+}

sites/shared/components/workbench/menu/xray/disable.mjs

@@ -1,7 +1,7 @@
 import { Li, SumButton, SumDiv, Deg } from 'shared/components/workbench/menu'
 import { useTranslation } from 'next-i18next'
 
-const DisableXray = props => {
+export const DisableXray = (props) => {
   const { t } = useTranslation(['cfp', 'settings'])
 
   return (
@@ -9,13 +9,9 @@ const DisableXray = props => {
       <SumButton onClick={() => props.updateGist(['_state', 'xray', 'enabled'], false)}>
         <SumDiv>
           <Deg />
-          <span>
-            {t('cfp:thingIsEnabled', { thing: t('settings:xray.t') })}
-          </span>
+          <span>{t('cfp:thingIsEnabled', { thing: t('settings:xray.t') })}</span>
         </SumDiv>
       </SumButton>
     </Li>
   )
 }
-
-export default DisableXray

sites/shared/components/workbench/menu/xray/index.mjs

@@ -1,13 +1,13 @@
 import { XrayIcon } from 'shared/components/icons.mjs'
-import { linkClasses, Chevron } from 'shared/components/navigation/primary.js'
-import Log from './log.js'
-import Reset from './reset.js'
-import Disable from './disable.js'
-import List from './list.js'
+import { linkClasses, Chevron } from 'shared/components/navigation/primary.mjs'
+import { ConsoleLog } from './log.mjs'
+import { XrayReset } from './reset.mjs'
+import { XrayDisable } from './disable.mjs'
+import { XrayList } from './list.mjs'
 import { Ul, Details, TopSummary } from 'shared/components/workbench/menu'
 import { useTranslation } from 'next-i18next'
 
-const Xray = (props) => {
+export const XrayMenu = (props) => {
   const { t } = useTranslation(['app', 'settings'])
 
   return (
@@ -36,17 +36,15 @@ const Xray = (props) => {
       </TopSummary>
       {props.gist?._state?.xray?.enabled && (
         <Ul>
-          <Disable {...props} />
-          <Log {...props} />
-          <Reset {...props} />
+          <XrayDisable {...props} />
+          <ConsoleLog {...props} />
+          <XrayReset {...props} />
           {props.gist?._state?.xray?.parts &&
             Object.keys(props.gist._state.xray.parts).map((partName) => (
-              <List {...props} partName={partName} />
+              <XrayList {...props} partName={partName} />
             ))}
         </Ul>
       )}
     </Details>
   )
 }
-
-export default Xray

sites/shared/components/workbench/menu/xray/list.mjs

@@ -1,8 +1,8 @@
-import { Chevron } from 'shared/components/navigation/primary.js'
+import { Chevron } from 'shared/components/navigation/primary.mjs'
 import { ClearIcon, FilterIcon, SearchIcon } from 'shared/components/icons.mjs'
-import { Ul, Li, Details, Summary, SumDiv, Deg } from 'shared/components/workbench/menu'
-import Path from './path.js'
-import Point from './point.js'
+import { Ul, Li, Details, Summary, SumDiv, Deg } from 'shared/components/workbench/menu/index.mjs'
+import Path from './path.mjs'
+import Point from './point.mjs'
 import { useTranslation } from 'next-i18next'
 
 const types = {
@@ -10,7 +10,7 @@ const types = {
   points: Point,
 }
 
-const XrayList = (props) => {
+export const XrayList = (props) => {
   const { t } = useTranslation(['app', 'parts'])
 
   const title = t(`parts:${props.partName}`) + ` (${props.partName})`
@@ -160,5 +160,3 @@ const XrayList = (props) => {
     </Li>
   )
 }
-
-export default XrayList

sites/shared/components/workbench/menu/xray/log.mjs

@@ -1,7 +1,15 @@
-import { Chevron } from 'shared/components/navigation/primary.js'
-import { Ul, Li, Details, Summary, SumButton, SumDiv, Deg } from 'shared/components/workbench/menu'
+import { Chevron } from 'shared/components/navigation/primary.mjs'
+import {
+  Ul,
+  Li,
+  Details,
+  Summary,
+  SumButton,
+  SumDiv,
+  Deg,
+} from 'shared/components/workbench/menu/index.mjs'
 
-const ConsoleLog = (props) => (
+export const ConsoleLog = (props) => (
   <Li>
     <Details>
       <Summary>
@@ -33,5 +41,3 @@ const ConsoleLog = (props) => (
     </Details>
   </Li>
 )
-
-export default ConsoleLog

sites/shared/components/workbench/menu/xray/path-ops.mjs

@@ -3,7 +3,8 @@ import { Ul, Li, Details, Summary, SumDiv, NoSumDiv, Deg } from 'shared/componen
 import Point from './point'
 
 const MoveLine = ({ op }) => <Point point={op.to} />
-const Curve = ({ op }) => ['cp1', 'cp2', 'to'].map(pnt => (
+const Curve = ({ op }) =>
+  ['cp1', 'cp2', 'to'].map((pnt) => (
     <Li key={pnt}>
       <Details>
         <Summary>
@@ -20,8 +21,7 @@ const Curve = ({ op }) => ['cp1', 'cp2', 'to'].map(pnt => (
 
 const XrayPathOp = ({ op }) => (
   <Li>
-  {op.type === 'close'
-    ? (
+    {op.type === 'close' ? (
       <NoSumDiv>
         <Deg />
         <span className="font-bold">{op.type}</span>
@@ -36,19 +36,13 @@ const XrayPathOp = ({ op }) => (
           </SumDiv>
           <Chevron />
         </Summary>
-        <Ul>
-          {op.type === 'curve'
-            ? <Curve op={op} />
-            : <MoveLine op={op} />
-          }
-        </Ul>
+        <Ul>{op.type === 'curve' ? <Curve op={op} /> : <MoveLine op={op} />}</Ul>
       </Details>
-    )
-  }
+    )}
   </Li>
 )
 
-const XrayPathOps = ({ ops=false }) => {
+export const XrayPathOps = ({ ops = false }) => {
   if (!ops || ops.length < 1) return null
 
   return (
@@ -62,11 +56,11 @@ const XrayPathOps = ({ ops=false }) => {
           <Chevron />
         </Summary>
         <Ul>
-          {ops.map(op => <XrayPathOp op={op} />)}
+          {ops.map((op) => (
+            <XrayPathOp op={op} />
+          ))}
         </Ul>
       </Details>
     </Li>
   )
 }
-
-export default XrayPathOps

sites/shared/components/workbench/menu/xray/path.mjs

@@ -1,9 +1,9 @@
-import { Ul, Li, NoSumDiv, Deg } from 'shared/components/workbench/menu'
-import { formatMm } from 'shared/utils'
-import Attributes from './attributes'
-import Ops from './path-ops'
+import { Ul, Li, NoSumDiv, Deg } from 'shared/components/workbench/menu/index.mjs'
+import { formatMm } from 'shared/utils.mjs'
+import Attributes from './attributes.mjs'
+import Ops from './path-ops.mjs'
 
-const XrayPath = ({ pathName, partName, draft, t, units }) => {
+export const XrayPath = ({ pathName, partName, draft, t, units }) => {
   const path = draft?.parts?.[partName]?.paths?.[pathName]
 
   if (!path) return null
@@ -21,14 +21,14 @@ const XrayPath = ({ pathName, partName, draft, t, units }) => {
         <NoSumDiv>
           <Deg />
           <span className="font-bold mr-2">path.length() =</span>
-          <span dangerouslySetInnerHTML={{
-            __html: formatMm(path.length(), units)
-          }} />
+          <span
+            dangerouslySetInnerHTML={{
+              __html: formatMm(path.length(), units),
+            }}
+          />
         </NoSumDiv>
       </Li>
       <Ops ops={path.ops} />
     </Ul>
   )
 }
-
-export default XrayPath

sites/shared/components/workbench/menu/xray/point.js

@@ -1,25 +0,0 @@
-import { Ul, Li, NoSumDiv, Deg } from 'shared/components/workbench/menu'
-import { round } from 'shared/utils'
-import Attributes from './attributes'
-
-const XrayPoint = ({ pointName, partName, draft, t }) => {
-  const point = draft?.parts?.[partName]?.points?.[pointName]
-
-  return point
-    ? (
-      <Ul>
-        {['x', 'y'].map(coord => (
-          <Li key={coord}>
-            <NoSumDiv>
-              <Deg />
-              <span className="font-bold mr-2">{coord} =</span>
-              <span>{round(point[coord])}</span>
-            </NoSumDiv>
-          </Li>
-        ))}
-        <Attributes attr={point.attributes} t={t} />
-      </Ul>
-    ) : null
-}
-
-export default XrayPoint

sites/shared/components/workbench/menu/xray/point.mjs

@@ -0,0 +1,22 @@
+import { Ul, Li, NoSumDiv, Deg } from 'shared/components/workbench/menu'
+import { round } from 'shared/utils'
+import Attributes from './attributes'
+
+export const XrayPoint = ({ pointName, partName, draft, t }) => {
+  const point = draft?.parts?.[partName]?.points?.[pointName]
+
+  return point ? (
+    <Ul>
+      {['x', 'y'].map((coord) => (
+        <Li key={coord}>
+          <NoSumDiv>
+            <Deg />
+            <span className="font-bold mr-2">{coord} =</span>
+            <span>{round(point[coord])}</span>
+          </NoSumDiv>
+        </Li>
+      ))}
+      <Attributes attr={point.attributes} t={t} />
+    </Ul>
+  ) : null
+}

sites/shared/components/workbench/menu/xray/reset.mjs

@@ -1,7 +1,7 @@
 import { Li, SumButton, SumDiv, Deg } from 'shared/components/workbench/menu'
 import { useTranslation } from 'next-i18next'
 
-const ResetXray = props =>  {
+export const ResetXray = (props) => {
   const { t } = useTranslation(['app'])
 
   return (
@@ -15,5 +15,3 @@ const ResetXray = props =>  {
     </Li>
   )
 }
-
-export default ResetXray

sites/shared/components/workbench/preloaders.mjs

@@ -0,0 +1,29 @@
+import yaml from 'js-yaml'
+import axios from 'axios'
+
+export const preloaders = {
+  github: async (id, design) => {
+    let result
+    try {
+      result = await axios.get(`https://api.github.com/gists/${id}`)
+    } catch (err) {
+      console.log(err)
+      return [false, 'An unexpected error occured']
+    }
+
+    if (result.data.files['pattern.yaml'].content) {
+      let g = yaml.load(result.data.files['pattern.yaml'].content)
+
+      if (g.design !== undefined && g.design !== design.designConfig.data.name)
+        return [
+          false,
+          `You tried loading a configuration for ${g.design} into a ${design.designConfig.data.name} development environment`,
+        ]
+
+      return g
+    }
+
+    // TODO notify people of these errors
+    else return [false, 'This gist does not seem to be a valid pattern configuration']
+  },
+}

sites/shared/components/workbench/sample.mjs

@@ -1,6 +1,6 @@
 import { useTranslation } from 'next-i18next'
 import { svgattrPlugin } from '@freesewing/plugin-svgattr'
-import { SvgWrapper } from './draft/svg-wrapper.mjs'
+import { SvgWrapper } from './draft/svg.mjs'
 import { Error } from './draft/error.mjs'
 
 export const LabSample = ({ gist, draft, updateGist, unsetGist, showInfo, app, feedback }) => {

sites/shared/components/wrappers/workbench.mjs

@@ -3,25 +3,24 @@ import { useEffect, useState, useMemo } from 'react'
 import { useGist } from 'shared/hooks/useGist'
 // Dependencies
 import { pluginTheme } from '@freesewing/plugin-theme'
-import preloaders from 'shared/components/workbench/preload.js'
+import { preloaders } from 'shared/components/workbench/preloaders.mjs'
 // Components
-import { Menu } from 'shared/components/workbench/menu/index.mjs'
+import { WorkbenchMenu } from 'shared/components/workbench/menu/index.mjs'
 import { DraftError } from 'shared/components/workbench/draft/error.mjs'
 import { Modal } from 'shared/components/modal.mjs'
 import { ErrorBoundary } from 'shared/components/error/error-boundary.mjs'
 // Views
-import { Measurements } from 'shared/components/workbench/measurements/index.js'
-import { LabDraft } from 'shared/components/workbench/draft/index.js'
-import { LabSample } from 'shared/components/workbench/sample.js'
-import { ExportDraft } from 'shared/components/workbench/exporting/index.js'
-import { GistAsJson } from 'shared/components/workbench/gist-as-json.js'
-import { GistAsYaml } from 'shared/components/workbench/yaml.js'
-import { DraftLogs } from 'shared/components/workbench/logs.js'
-import { CutLayout } from 'shared/components/workbench/layout/cut'
-import { PrintingLayout } from 'shared/components/workbench/layout/print'
+import { WorkbenchMeasurements } from 'shared/components/workbench/measurements/index.mjs'
+import { LabDraft } from 'shared/components/workbench/draft/index.mjs'
+import { LabSample } from 'shared/components/workbench/sample.mjs'
+import { ExportDraft } from 'shared/components/workbench/exporting/index.mjs'
+import { GistAsJson, GistAsYaml } from 'shared/components/workbench/gist.mjs'
+import { DraftLogs } from 'shared/components/workbench/logs.mjs'
+import { CutLayout } from 'shared/components/workbench/layout/cut/index.mjs'
+import { PrintingLayout } from 'shared/components/workbench/layout/print/index.mjs'
 
 const views = {
-  measurements: Measurements,
+  measurements: WorkbenchMeasurements,
   draft: LabDraft,
   test: LabSample,
   printingLayout: PrintingLayout,
@@ -156,7 +155,7 @@ export const WorkbenchWrapper = ({
     app: app,
     noSearch: true,
     workbench: true,
-    AltMenu: <Menu {...componentProps} />,
+    AltMenu: <WorkbenchMenu {...componentProps} />,
     showInfo: setPopup,
   }
 

sites/shared/prebuild/lab.mjs

@@ -16,12 +16,12 @@ const header = `/*
  *
  */`
 
-const pageTemplate = design => `${header}
+const pageTemplate = (design) => `${header}
 import { ${capitalize(design)} } from 'designs/${design}/src/index.mjs'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
-import PageTemplate from 'site/page-templates/workbench.mjs'
+import { WorkbenchPage } from 'site/page-templates/workbench.mjs'
 
-const Page = (props) => <PageTemplate {...props} design={${capitalize(design)}} version="next"/>
+const Page = (props) => <WorkbenchPage {...props} design={${capitalize(design)}} version="next"/>
 export default Page
 
 export async function getStaticProps({ locale }) {
@@ -49,21 +49,16 @@ export const prebuildLab = async (site) => {
       const pages = ['..', 'lab', 'pages']
       await fs.mkdir(path.resolve(...pages, 'v', 'next'), { recursive: true })
       promises.push(
-        fs.writeFile(
-          path.resolve(...pages, `${design}.mjs`),
-          page
-        ),
-        fs.writeFile(
-          path.resolve(...pages, section, `${design}.mjs`),
-          page
-        ),
+        fs.writeFile(path.resolve(...pages, `${design}.mjs`), page),
+        fs.writeFile(path.resolve(...pages, section, `${design}.mjs`), page)
       )
     }
   }
 
   // Write designs file
-  const header = "// This file is auto-generated by the prebuild script | Any changes will be overwritten\n"
-  const nl = "\n"
+  const header =
+    '// This file is auto-generated by the prebuild script | Any changes will be overwritten\n'
+  const nl = '\n'
   promises.push(
     fs.writeFile(
       path.resolve('..', 'lab', 'prebuild', 'designs.mjs'),
@@ -76,10 +71,8 @@ export const prebuildLab = async (site) => {
     fs.writeFile(
       path.resolve('..', 'lab', 'prebuild', 'designs-by-type.mjs'),
       `${header}export const designsByType = ${JSON.stringify(designsByType)}${nl}`
-    ),
+    )
   )
 
   await Promise.all(promises)
 }
-
-

sites/shared/utils.mjs

@@ -175,7 +175,7 @@ export const optionsMenuStructure = (options) => {
       else if (typeof option.menu === 'undefined')
         console.log(
           `Warning: Option ${option.name} does not have a menu config. ` +
-            'Either configure it, or set it to falseo false to hide this option.'
+            'Either configure it, or set it to false to hide this option.'
         )
     }
   }