feat(lab): Menu for design options

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