wip: Updates to lab to support v3 patterns

sites/shared/components/workbench/gist-as-json.js

@@ -1,4 +1,4 @@
-import Json from 'shared/components/json.js'
+import Json from 'shared/components/json-highlight.js'
 
 const GistAsJson = props => (
   <div className="max-w-screen-xl m-auto">

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

@@ -1,33 +1,33 @@
 import React, {useMemo, useEffect, useState} from 'react'
 import MeasurementInput from '../inputs/measurement.js'
-import { withBreasts, withoutBreasts } from '@freesewing/models'
+import { menswear, womenswear } from '@freesewing/models'
 import nonHuman from './non-human.js'
-import WithBreastsIcon from 'shared/components/icons/with-breasts.js'
-import WithoutBreastsIcon from 'shared/components/icons/without-breasts.js'
+import WomenswearIcon from 'shared/components/icons/womenswear.js'
+import MenswearIcon from 'shared/components/icons/menswear.js'
 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'
 
+
 const groups = {
-  people: {
-    with: withBreasts,
-    without: withoutBreasts,
-  },
+  people: { menswear, womenswear },
   dolls: {
-    with: nonHuman.withBreasts.dolls,
-    without: nonHuman.withoutBreasts.dolls,
+    menswear: nonHuman.menswear.dolls,
+    womenswear: nonHuman.womenswear.dolls,
   },
   giants: {
-    with: nonHuman.withBreasts.giants,
-    without: nonHuman.withoutBreasts.giants,
+    menswear: nonHuman.menswear.giants,
+    womenswear: nonHuman.womenswear.giants,
   }
 }
+
 const icons = {
-  with: <WithBreastsIcon />,
-  without: <WithoutBreastsIcon />,
+  menswear: <MenswearIcon />,
+  womenswear: <WomenswearIcon />,
 }
 
+
 const WorkbenchMeasurements = ({ app, design, gist, updateGist, gistReady }) => {
   const { t } = useTranslation(['app', 'cfp'])
 
@@ -72,7 +72,7 @@ const WorkbenchMeasurements = ({ app, design, gist, updateGist, gistReady }) =>
           <Tab tabId={group}>
             {Object.keys(icons).map(type => (
               <React.Fragment key={type}>
-                <h4 className="mt-4">{t(`${type}Breasts`)}</h4>
+                <h4 className="mt-4">{t(type)}</h4>
                 <ul className="flex flex-row flex-wrap gap-2">
                   {Object.keys(groups[group][type]).map((m) => (
                     <li key={`${m}-${type}-${group}`} className="">
@@ -81,9 +81,8 @@ const WorkbenchMeasurements = ({ app, design, gist, updateGist, gistReady }) =>
                         onClick={() => updateMeasurements(groups[group][type][m], false)}
                       >
                         {icons[type]}
-                        {t('size')}&nbsp;
                         { group === 'people'
-                          ? m.replace('size', '')
+                          ? m.slice(-2)
                           : m
                         }
                       </button>

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

@@ -1,11 +1,11 @@
-import { withBreasts, withoutBreasts } from '@freesewing/models'
+import { menswear42, womenswear34 } from '@freesewing/models'
 
 const nonHuman = {
-  withoutBreasts: {
+  menswear: {
     dolls: {},
     giants: {}
   },
-  withBreasts: {
+  womenswear: {
     dolls: {},
     giants: {}
   }
@@ -14,34 +14,34 @@ 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.withBreasts.dolls[name] = {}
-  // withBreasts: Based on Anneke (size 34)
-  for (const [m, val] of Object.entries(withBreasts.size34)) {
-    nonHuman.withBreasts.dolls[name][m] = (m === 'shoulderSlope')
+  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)
   }
-  // withoutBreasts: Based on Ronan (size 42)
-  nonHuman.withoutBreasts.dolls[name] = {}
-  for (const [m, val] of Object.entries(withoutBreasts.size42)) {
-    nonHuman.withoutBreasts.dolls[name][m] = (m === 'shoulderSlope')
+  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)
   }
 }
 for (let i=1.5;i<=3;i+=0.5) {
   const name = `${i}/1`
-  nonHuman.withBreasts.giants[name] = {}
-  // withBreasts: Based on Anneke (size 34)
-  for (const [m, val] of Object.entries(withBreasts.size34)) {
-    nonHuman.withBreasts.giants[name][m] = (m === 'shoulderSlope')
+  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.withoutBreasts.giants[name] = {}
-  // withoutBreasts: Based on Ronan (size 42)
-  for (const [m, val] of Object.entries(withoutBreasts.size42)) {
-    nonHuman.withoutBreasts.giants[name][m] = (m === 'shoulderSlope')
+  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)
   }

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

@@ -3,9 +3,11 @@ import { Chevron } from 'shared/components/navigation/primary.js'
 import OptionGroup from './option-group'
 import { Ul, Details, TopSummary, TopSumTitle } from 'shared/components/workbench/menu'
 import { useTranslation } from 'next-i18next'
+import { optionsMenuStructure } from 'shared/utils.mjs'
 
 const DesignOptions = props => {
   const { t } = useTranslation(['app'])
+  const optionsMenu = optionsMenuStructure(props.design.config.options)
 
   return (
     <Details open>
@@ -14,12 +16,14 @@ const DesignOptions = props => {
         <Chevron />
       </TopSummary>
       <Ul className="pl-5 list-inside">
-        {Object.keys(props.design.config.optionGroups).map(group => (
-          <OptionGroup {...props} group={group} key={group} />
-        ))}
+        {Object.entries(optionsMenu).map(([group, options]) => typeof options === "string"
+          ? <p>top-level option</p>
+          : <OptionGroup {...props} group={group} options={options} key={group} />
+        )}
       </Ul>
     </Details>
   )
 }
 
 export default DesignOptions
+

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

@@ -5,7 +5,7 @@ import { useTranslation } from 'next-i18next'
 
 const OptionGroup = props => {
   const { t } = useTranslation(['optiongroups'])
-  const config = props.config || props.design.config.optionGroups[props.group]
+
   return (
     <Li>
       <Details>
@@ -19,10 +19,10 @@ const OptionGroup = props => {
           <Chevron />
         </Summary>
         <Ul>
-          {config.map(option =>
-            typeof option === 'string' ? <Option {...props} option={option} key={option} />
-            : Object.keys(option).map((sub) => <OptionGroup {...props} config={option[sub]} group={sub} key={sub}/>)
-          )}
+          {Object.entries(props.options).map(([option, type]) => typeof type === "string"
+            ? <Option {...props} type={type} option={option} key={option} />
+            : <OptionGroup {...props} group={option} options={type} key={option}/>)
+          }
         </Ul>
       </Details>
     </Li>