feat(lab): Menu for design options

packages/freesewing.shared/components/workbench/menu.js

@@ -1,114 +0,0 @@
-import { useState } from 'react'
-import Link from 'next/link'
-import orderBy from 'lodash.orderby'
-import OptionsIcon from 'shared/components/icons/options.js'
-import SettingsIcon from 'shared/components/icons/settings.js'
-import MenuIcon from 'shared/components/icons/menu.js'
-import { linkClasses, Chevron } from 'shared/components/navigation/primary.js'
-
-// Component that renders a sublevel of navigation
-const ModeButtons = props => props.children.length === 0
-  ? null
-  : (
-    <ul className="pl-5 list-inside">
-      {props.children.map(mode => (
-        <li key={mode.title} className="flex flex-row">
-          <button title={mode.title} className={`
-            grow pl-2 border-l-2
-            ${linkClasses}
-            hover:border-secondary
-            sm:hover:border-secondary-focus
-            text-left
-            capitalize
-            ${mode.name === props.mode
-              ? 'text-secondary border-secondary sm:text-secondary-focus sm:border-secondary-focus'
-              : 'text-base-content sm:text-neutral-content'
-            }
-          `} onClick={mode.onClick}>
-            <span className={`
-              text-3xl mr-2 inline-block p-0 leading-3
-              ${mode.name === props.mode
-                ? 'text-secondary sm:text-secondary-focus translate-y-1'
-                : 'translate-y-3'
-              }
-            `}>
-              {mode.name === props.mode ? <>&bull;</> : <>&deg;</>}
-            </span>
-            <span className={mode.name === props.mode ? 'font-bold' : ''}>
-              { mode.title }
-            </span>
-          </button>
-        </li>
-      ))}
-    </ul>
-  )
-
-const groupMaker = (t, setMode, pattern) => ({
-  modes: {
-    icon: <MenuIcon />,
-    title: t('app.modes'),
-    children: [
-      {
-        name: 'measurements',
-        title: t('app.measurements'),
-        onClick: () => setMode('measurements')
-      },
-      {
-        name: 'draft',
-        title: t('app.draftPattern', { pattern: pattern.config.name }),
-        onClick: () => setMode('draft')
-      },
-      {
-        name: 'test',
-        title: t('app.testPattern', { pattern: pattern.config.name }),
-        onClick: () => setMode('test')
-      },
-      {
-        name: 'export',
-        title: t('app.export'),
-        onClick: () => setMode('export')
-      },
-    ]
-  },
-  toggles: {
-    icon: <OptionsIcon />,
-    title: `${t('cfp.turnOn')} / ${t('cfp.turnOff')}`,
-  },
-  options: {
-    icon: <OptionsIcon />,
-    title: t('app.designOptions'),
-  },
-  settings: {
-    icon: <SettingsIcon />,
-    title: t('app.settings')
-  },
-})
-
-const WorkbenchMenu = props => {
-  const groups = groupMaker(props.app.t, props.setMode, props.pattern)
-  return (
-    <nav className="smmax-w-96 grow mb-12">
-      {Object.keys(groups).map(group => (
-        <details className='py-1' key={group}>
-          <summary className={`
-            flex flex-row uppercase gap-4 font-bold text-lg
-            hover:cursor-row-resize
-            p-2
-            text-base-content
-            sm:text-neutral-content
-            items-center
-          `} open={'modes' === group}>
-            <span className="text-secondary-focus mr-4">{groups[group].icon}</span>
-            <span className={`grow ${linkClasses}`}>
-              {groups[group].title}
-            </span>
-            <Chevron />
-          </summary>
-          {group === 'modes' && <ModeButtons {...props} {...groups[group]} />}
-        </details>
-      ))}
-    </nav>
-  )
-}
-
-export default WorkbenchMenu

packages/freesewing.shared/components/workbench/menu/design-options/index.js

@@ -0,0 +1,32 @@
+import OptionsIcon from 'shared/components/icons/options.js'
+import { linkClasses, Chevron } from 'shared/components/navigation/primary.js'
+import OptionGroup from './option-group'
+
+const DesignOptions = props => {
+
+  return (
+    <details className='py-1' open>
+      <summary className={`
+        flex flex-row uppercase gap-4 font-bold text-lg
+        hover:cursor-row-resize
+        p-2
+        text-base-content
+        sm:text-neutral-content
+        items-center
+      `}>
+        <span className="text-secondary-focus mr-4"><OptionsIcon /></span>
+        <span className={`grow ${linkClasses}`}>
+          {props.app.t('app.designOptions')}
+        </span>
+        <Chevron />
+      </summary>
+      <ul className="pl-5 list-inside">
+        {Object.keys(props.pattern.config.optionGroups).map(group => (
+          <OptionGroup {...props} group={group} key={group} />
+        ))}
+      </ul>
+    </details>
+  )
+}
+
+export default DesignOptions

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

@@ -0,0 +1,49 @@
+import { linkClasses, Chevron } from 'shared/components/navigation/primary.js'
+import Option from './option'
+import OptionSubGroup from './option-sub-group'
+
+const OptionGroup = props => {
+  const config = props.config || props.pattern.config.optionGroups[props.group]
+  return (
+    <li className="flex flex-row">
+      <details className="grow">
+        <summary className={`
+          flex flex-row
+          px-2
+          text-base-content
+          sm:text-neutral-content
+          hover:cursor-row-resize
+          items-center
+        `}>
+          <div className={`
+            grow pl-2 border-l-2
+            ${linkClasses}
+            hover:border-secondary
+            sm:hover:border-secondary-focus
+            text-base-content sm:text-neutral-content
+            font-bold
+          `}>
+            <span className={`
+              text-3xl mr-2 inline-block p-0 leading-3
+              translate-y-3
+            `}>
+              <>&deg;</>
+            </span>
+            <span>
+              { props.app.t(`optiongroups.${props.group}`) }
+            </span>
+          </div>
+          <Chevron w={6} m={3}/>
+        </summary>
+        <ul className="pl-5 list-inside">
+          {config.map(option => typeof option === 'string'
+            ? <Option {...props} option={option} key={option} />
+            : <OptionSubGroup {...props} sub={option} config={config} />
+          )}
+        </ul>
+      </details>
+    </li>
+  )
+}
+
+export default OptionGroup

packages/freesewing.shared/components/workbench/menu/design-options/option-sub-group.js

@@ -0,0 +1,47 @@
+import { linkClasses, Chevron } from 'shared/components/navigation/primary.js'
+import Option from './option'
+
+const OptionSubGroup = props => {
+  return Object.keys(props.sub).map(name => (
+    <li className="flex flex-row">
+      <details className="grow">
+        <summary className={`
+          flex flex-row
+          px-2
+          text-base-content
+          sm:text-neutral-content
+          hover:cursor-row-resize
+          items-center
+        `}>
+          <div className={`
+            grow pl-2 border-l-2
+            ${linkClasses}
+            hover:border-secondary
+            sm:hover:border-secondary-focus
+            text-base-content sm:text-neutral-content
+            font-bold
+          `}>
+            <span className={`
+              text-3xl mr-2 inline-block p-0 leading-3
+              translate-y-3
+            `}>
+              <>&deg;</>
+            </span>
+            <span>
+              { props.app.t(`optiongroups.${name}`) }
+            </span>
+          </div>
+          <Chevron w={6} m={3}/>
+        </summary>
+        <ul className="pl-5 list-inside">
+          {props.sub[name].map(option => typeof option === 'string'
+            ? <Option {...props} option={option} key={option} />
+            : <OptionSubGroup {...props} sub={option} config={config} />
+          )}
+        </ul>
+      </details>
+    </li>
+  ))
+}
+
+export default OptionSubGroup

packages/freesewing.shared/components/workbench/menu/design-options/option.js

@@ -0,0 +1,41 @@
+import { linkClasses, Chevron } from 'shared/components/navigation/primary.js'
+
+const Option = props => {
+  return (
+    <li className="flex flex-row">
+      <details className="grow">
+        <summary className={`
+          flex flex-row
+          px-2
+          text-base-content
+          sm:text-neutral-content
+          hover:cursor-row-resize
+          items-center
+        `}>
+          <div className={`
+            grow pl-2 border-l-2
+            ${linkClasses}
+            hover:border-secondary
+            sm:hover:border-secondary-focus
+            text-base-content sm:text-neutral-content
+          `}>
+            <span className={`
+              text-3xl mr-2 inline-block p-0 leading-3
+              translate-y-3
+            `}>
+              <>&deg;</>
+            </span>
+            <span>
+              { props.app.t(`options.${props.pattern.config.name}.${props.option}.title`) }
+            </span>
+          </div>
+          <Chevron w={6} m={3}/>
+        </summary>
+        fixme
+      </details>
+    </li>
+  )
+}
+
+    //props.pattern.config.optionsgroups[props.group].map(option => (
+export default Option

packages/freesewing.shared/components/workbench/menu/index.js

@@ -0,0 +1,13 @@
+import ModesMenu from './modes.js'
+import DesignOptions from './design-options'
+
+const WorkbenchMenu = props => {
+  return (
+    <nav className="smmax-w-96 grow mb-12">
+      <ModesMenu {...props} />
+      {props.mode === 'draft' && <DesignOptions {...props} />}
+    </nav>
+  )
+}
+
+export default WorkbenchMenu

packages/freesewing.shared/components/workbench/menu/modes.js

@@ -0,0 +1,80 @@
+import MenuIcon from 'shared/components/icons/menu.js'
+import OptionsIcon from 'shared/components/icons/options.js'
+import { linkClasses, Chevron } from 'shared/components/navigation/primary.js'
+
+const Modes = props => {
+  const entries = [
+    {
+      name: 'measurements',
+      title: props.app.t('app.measurements'),
+      onClick: () => props.setMode('measurements')
+    },
+    {
+      name: 'draft',
+      title: props.app.t('app.draftPattern', { pattern: props.pattern.config.name }),
+      onClick: () => props.setMode('draft')
+    },
+    {
+      name: 'test',
+      title: props.app.t('app.testPattern', { pattern: props.pattern.config.name }),
+      onClick: () => props.setMode('test')
+    },
+    {
+      name: 'export',
+      title: props.app.t('app.export'),
+      onClick: () => props.setMode('export')
+    },
+  ]
+
+  return (
+    <details className='py-1' open>
+      <summary className={`
+        flex flex-row uppercase gap-4 font-bold text-lg
+        hover:cursor-row-resize
+        p-2
+        text-base-content
+        sm:text-neutral-content
+        items-center
+      `}>
+        <span className="text-secondary-focus mr-4"><MenuIcon /></span>
+        <span className={`grow ${linkClasses}`}>
+          {props.app.t('app.modes')}
+        </span>
+        <Chevron />
+      </summary>
+      <ul className="pl-5 list-inside">
+        {entries.map(entry => (
+          <li key={entry.title} className="flex flex-row">
+            <button title={entry.title} className={`
+              grow pl-2 border-l-2
+              ${linkClasses}
+              hover:border-secondary
+              sm:hover:border-secondary-focus
+              text-left
+              capitalize
+              ${entry.name === props.mode
+                ? 'text-secondary border-secondary sm:text-secondary-focus sm:border-secondary-focus'
+                : 'text-base-content sm:text-neutral-content'
+              }
+            `} onClick={entry.onClick}>
+              <span className={`
+                text-3xl mr-2 inline-block p-0 leading-3
+                ${entry.name === props.mode
+                  ? 'text-secondary sm:text-secondary-focus translate-y-1'
+                  : 'translate-y-3'
+                }
+              `}>
+                {entry.name === props.mode ? <>&bull;</> : <>&deg;</>}
+              </span>
+              <span className={entry.name === props.mode ? 'font-bold' : ''}>
+                { entry.title }
+              </span>
+            </button>
+          </li>
+        ))}
+      </ul>
+    </details>
+  )
+}
+
+export default Modes

packages/freesewing.shared/components/wrappers/workbench.js

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import useLocalStorage from 'shared/hooks/useLocalStorage.js'
 import Layout from 'shared/components/layouts/default'
-import Menu from 'shared/components/workbench/menu.js'
+import Menu from 'shared/components/workbench/menu/index.js'
 import Measurements, { Input } from 'shared/components/workbench/measurements/index.js'
 import LabDraft from 'shared/components/workbench/draft/index.js'
 import set from 'lodash.set'