wip: work on editor

designs/aaron/src/index.mjs

@@ -27,6 +27,8 @@ const i18n = mergeI18n([brianI18n, aaronI18n], {
       'legacyArmholeDepthNo',
       'legacyArmholeDepthYes',
       'armholeDepth',
+      'draftForHighBustNo',
+      'draftForHighBustYes',
     ],
   },
   s: { drop: [] },

packages/react/components/Editor/components/HeaderMenu.mjs

@@ -114,7 +114,7 @@ export const HeaderMenuDropdown = (props) => {
         </div>
         <div
           tabIndex={0}
-          className="tw-daisy-dropdown-content tw-bg-base-100 tw-bg-opacity-90 tw-z-20 tw-shadow tw-left-0 !tw-fixed md:!tw-absolute tw-top-12 tw-w-screen md:tw-w-96"
+          className="tw-daisy-dropdown-content tw-bg-base-100 tw-bg-opacity-90 tw-z-20 tw-shadow tw-left-0 !tw-fixed md:!tw-absolute tw-top-12 tw-w-screen md:tw-max-w-lg"
         >
           {props.children}
         </div>
@@ -517,7 +517,7 @@ export const HeaderMenuViewMenu = (props) => {
     >
       <ul
         tabIndex={i}
-        className="tw-dropdown-content tw-bg-base-100 tw-bg-opacity-95 tw-z-20 tw-shadow tw-left-0 !tw-fixed md:!tw-absolute tw-w-screen md:tw-w-96 md:tw-pt-0 tw-mt-14 md:tw-mt-0"
+        className="tw-dropdown-content tw-bg-base-100 tw-bg-opacity-95 tw-z-20 tw-shadow tw-left-0 !tw-fixed md:!tw-absolute tw-w-screen md:tw-max-w-lg md:tw-pt-0 tw-mt-14 md:tw-mt-0"
       >
         {output}
       </ul>

packages/react/components/Editor/components/menus/Input.mjs

@@ -70,6 +70,7 @@ export const MenuListInput = ({
   changed,
   design,
   isDesignOption = false,
+  i18n,
 }) => {
   const handleChange = useSharedHandlers({
     dflt: config.dflt,
@@ -79,13 +80,23 @@ export const MenuListInput = ({
   })
 
   return config.list.map((entry) => {
-    const titleKey = config.choiceTitles
+    let titleKey = config.choiceTitles
       ? config.choiceTitles[entry]
       : isDesignOption
-        ? `${design}:${name}.${entry}`
+        ? i18n.en.o[name]
         : `${name}.o.${entry}`
-    const title = config.titleMethod ? config.titleMethod(entry, t) : t(`${titleKey}.t`)
+    if (i18n.en.o[`${name}.${entry}`]) titleKey = i18n.en.o[`${name}.${entry}`]
-    const desc = config.valueMethod ? config.valueMethod(entry, t) : t(`${titleKey}.d`)
+    console.log({ titleKey, titles: config.choiceTitles, isDesignOption })
+    const title = config.titleMethod
+      ? config.titleMethod(entry)
+      : typeof titleKey === 'string'
+        ? i18n.en.o[titleKey]?.t
+        : titleKey.t
+    const desc = config.valueMethod
+      ? config.valueMethod(entry)
+      : typeof titleKey === 'string'
+        ? i18n.en.o[titleKey]?.d
+        : titleKey.d
     const sideBySide = config.sideBySide || desc.length + title.length < 42
 
     return (

packages/react/components/Editor/components/views/index.mjs

@@ -100,7 +100,7 @@ export const viewLabels = {
     t: 'Time Design',
     d: 'Shows detailed timing of the pattern being drafted, allowing you to find bottlenecks in performance',
   },
-  layout: {
+  printLayout: {
     t: 'Pattern Layout',
     d: 'Organize your pattern parts to minimize paper use',
   },

packages/react/components/Editor/lib/editor.mjs

@@ -2,7 +2,7 @@
 import React from 'react'
 import { defaultConfig } from '../config/index.mjs'
 import { round } from '@freesewing/utils'
-import { formatDesignOptionValue } from './index.mjs'
+import { formatDesignOptionValue, menuCoreSettingsStructure } from './index.mjs'
 // Components
 import {
   ErrorIcon,

packages/react/components/Editor/lib/formatting.mjs

@@ -1,4 +1,6 @@
+import React from 'react'
 import { designOptionType } from '@freesewing/utils'
+import { BoolNoIcon, BoolYesIcon } from '@freesewing/react/components/Icon'
 
 /*
  * Method that capitalizes a string (make the first character uppercase)