chore: Linter warnings

packages/freesewing.lab/hooks/useApp.js

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
 import set from 'lodash.set'
 // Stores state in local storage
 import useLocalStorage from 'shared/hooks/useLocalStorage.js'
@@ -10,7 +10,7 @@ import { useTranslation } from 'next-i18next'
 import { capitalize } from 'shared/utils'
 
 // Initial navigation
-const initialNavigation = (locale, t) => {
+const initialNavigation = (t) => {
   const base = {
     accessories: {
       __title: t('accessoryPatterns'),
@@ -69,7 +69,7 @@ function useApp(full = true) {
 
   // React State
   const [primaryMenu, setPrimaryMenu] = useState(false)
-  const [navigation, setNavigation] = useState(initialNavigation(locale, t))
+  const [navigation, setNavigation] = useState(initialNavigation(t))
   const [slug, setSlug] = useState('/')
   const [pattern, setPattern] = useState(false)
   const [loading, setLoading] = useState(false)

packages/freesewing.shared/components/layouts/default.js

@@ -162,7 +162,7 @@ const DefaultLayout = ({
             ${asideClasses}
             ${app.primaryMenu ? '' : 'translate-x-[-100%]'} transition-transform
             sm:flex-row
-            ${workbench && collapseAltMenu
+            ${collapseAltMenu
               ? 'sm:px-0 sm:w-16'
               : 'sm:px-1 md:px-4 lg:px-8 sm:w-[38.2%]'
             }

packages/freesewing.shared/components/logos/freesewing.js

@@ -11,7 +11,7 @@ const strokes = {
 }
 let step = 0
 
-const fill = {
+const fills = {
   light: (
     <linearGradient id="light" x1="0%" y1="0%" x2="50%" y2="100%">
       <stop offset={`10%`} stopColor={colors.yellow[500]} stopOpacity="1.0" />
@@ -81,7 +81,7 @@ const Logo = ({ size=false, className='stroke-0', theme='light', fill=false, str
   return (
     <svg {...svgProps}>
       <defs>
-        {fill && fill[theme]}
+        {fill && fills[theme]}
         <path id="react-logo" d={path} />
       </defs>
       <use xlinkHref="#react-logo" fill="none" stroke={stroke || strokes[theme]} strokeWidth="0.5"/>

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

@@ -1,7 +1,5 @@
 import SvgWrapper from './svg-wrapper'
 import Error from './error.js'
-import { capitalize } from 'shared/utils.js'
-import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch"
 
 const LabDraft = props => {
   const { app, draft, pattern, gist, updateGist, unsetGist } = props

packages/freesewing.shared/components/workbench/draft/part/index.js

@@ -6,7 +6,9 @@ import { getProps } from '../utils'
 const XrayPart = props => {
   // Don't bother if this is the only part on display
   if (props.gist.only && props.gist.only.length === 1) return null
-  const i = Object.keys(props.gist.xray?.reveal).indexOf(props.partName)%10
+  const i = props.gist.xray?.reveal
+    ? Object.keys(props.gist.xray?.reveal).indexOf(props.partName)%10
+    : 0
   const { topLeft, bottomRight } = props.part
 
   return (

packages/freesewing.shared/components/workbench/draft/point/index.js

@@ -117,7 +117,7 @@ const PassiveXrayPoint = props => (
       cy={props.point.y}
       r={7.5 * props.gist.scale}
       className="opacity-0 stroke-lining fill-lining hover:opacity-25 hover:cursor-pointer"
-      onClick={props.gist?.xray?.parts?.[props.partName]?.points?.[props.pointName]
+      onClick={props.gist.xray?.parts?.[props.partName]?.points?.[props.pointName]
         ? () => props.unsetGist(
           ['xray', 'parts', props.partName, 'points', props.pointName]
         )

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

@@ -1,5 +1,4 @@
 import Markdown from 'react-markdown'
-import { linkClasses } from 'shared/components/navigation/primary.js'
 
 const eventBlock = events => events.join("  \n")
 

packages/freesewing.shared/components/workbench/inputs/design-option-list.js

@@ -28,7 +28,7 @@ const DesignOptionList = props => {
       <div className="flex flex-row">
         <div className="grow">
           {list.map(choice => (
-            <button
+            <button key={choice}
               onClick={() => handleChange(choice)}
               className={`
                 mr-1 mb-1 text-left text-lg w-full

packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-mm.js

@@ -1,7 +1,6 @@
 import { useState } from 'react'
 import { formatMm } from 'shared/utils.js'
 import ClearIcon from 'shared/components/icons/clear.js'
-import EditIcon from 'shared/components/icons/edit.js'
 import { useTranslation } from 'next-i18next'
 
 const CoreSettingMm = props => {

packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-sa-mm.js

@@ -1,7 +1,6 @@
 import { useState } from 'react'
 import { formatMm } from 'shared/utils.js'
 import ClearIcon from 'shared/components/icons/clear.js'
-import EditIcon from 'shared/components/icons/edit.js'
 import { useTranslation } from 'next-i18next'
 
 const CoreSettingMm = props => {

packages/freesewing.shared/components/workbench/menu/core-settings/setting.js

@@ -1,6 +1,5 @@
 import { Chevron } from 'shared/components/navigation/primary.js'
 import PctDegOption from 'shared/components/workbench/inputs/design-option-pct-deg'
-import CountOption from 'shared/components/workbench/inputs/design-option-count'
 import ListSetting from './core-setting-list'
 import OnlySetting from './core-setting-only'
 import MmSetting from './core-setting-mm'
@@ -8,7 +7,7 @@ import NrSetting from './core-setting-nr'
 import BoolSetting from './core-setting-bool.js'
 import SaBoolSetting from './core-setting-sa-bool.js'
 import SaMmSetting from './core-setting-sa-mm.js'
-import { formatMm, formatPercentage, optionType } from 'shared/utils.js'
+import { formatMm } from 'shared/utils.js'
 import { SecText, Li, Details, Summary, SumDiv, Deg } from 'shared/components/workbench/menu/index.js'
 import { useTranslation } from 'next-i18next'
 

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

@@ -3,6 +3,7 @@ import ViewMenu from './view.js'
 import DesignOptions from './design-options'
 import CoreSettings from './core-settings'
 import Xray from './xray'
+import TestDesignOptions from './test-design-options'
 
 export const Ul = props => <ul className="pl-5 list-inside">{props.children}</ul>
 export const Li = props => (
@@ -92,6 +93,11 @@ const WorkbenchMenu = props => {
           {props.gist.renderer === 'react' && <Xray {...props} />}
         </>
       )}
+      {props.gist?._state?.view === 'test' && (
+        <>
+          <TestDesignOptions {...props} />
+        </>
+      )}
     </nav>
   )
 }

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

@@ -0,0 +1,25 @@
+import OptionsIcon from 'shared/components/icons/options.js'
+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'
+
+const DesignOptions = props => {
+  const { t } = useTranslation(['app'])
+
+  return (
+    <Details open>
+      <TopSummary icon={<OptionsIcon />}>
+        <TopSumTitle>{t('designOptions')}</TopSumTitle>
+        <Chevron />
+      </TopSummary>
+      <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/test-design-options/option-group.js

@@ -0,0 +1,33 @@
+import { Chevron } from 'shared/components/navigation/primary.js'
+import Option from './option'
+import OptionSubGroup from './option-sub-group'
+import { Li, Ul, Details, Summary, SumDiv, Deg } from 'shared/components/workbench/menu'
+import { useTranslation } from 'next-i18next'
+
+const OptionGroup = props => {
+  const { t } = useTranslation(['optiongroups'])
+  const config = props.config || props.pattern.config.optionGroups[props.group]
+  return (
+    <Li>
+      <Details>
+        <Summary>
+          <SumDiv>
+            <Deg />
+            <span className="font-bold">
+              { t(props.group) }
+            </span>
+          </SumDiv>
+          <Chevron />
+        </Summary>
+        <Ul>
+          {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/test-design-options/option-sub-group.js

@@ -0,0 +1,29 @@
+import { linkClasses, Chevron } from 'shared/components/navigation/primary.js'
+import Option from './option'
+import { Li, Ul, Details, Summary, SumButton, SumDiv, Deg } from 'shared/components/workbench/menu'
+import { useTranslation } from 'next-i18next'
+
+const OptionSubGroup = props => {
+  const { t } = useTranslation(['optiongroups'])
+  return Object.keys(props.sub).map(name => (
+    <Li>
+      <Details>
+        <Summary>
+          <SumDiv>
+            <Deg />
+            <span className="font-bold">{ t(name) }</span>
+          </SumDiv>
+          <Chevron />
+        </Summary>
+        <Ul>
+          {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/test-design-options/option.js

@@ -0,0 +1,129 @@
+import { Chevron } from 'shared/components/navigation/primary.js'
+import PctDegOption from 'shared/components/workbench/inputs/design-option-pct-deg'
+import CountOption from 'shared/components/workbench/inputs/design-option-count'
+import ListOption from 'shared/components/workbench/inputs/design-option-list'
+import { formatMm, formatPercentage, optionType } from 'shared/utils.js'
+import { Li, Ul, Details, Summary, SumButton, SumDiv, Deg } from 'shared/components/workbench/menu'
+import { useTranslation } from 'next-i18next'
+
+const values = {
+  pct: props => {
+    const val = (typeof props.gist?.options?.[props.option] === 'undefined')
+      ? props.pattern.config.options[props.option].pct/100
+      : props.gist.options[props.option]
+    return (
+      <span className={
+        val=== props.pattern.config.options[props.option].pct/100
+          ? 'text-secondary-focus'
+          : 'text-accent'
+      }>
+        {formatPercentage(val)}
+        {props.pattern.config.options[props.option]?.toAbs
+          ? ' | ' +formatMm(props.pattern.config.options[props.option]?.toAbs(val, props.gist))
+          : null
+        }
+      </span>
+    )
+  },
+  bool: props => {
+    const { t } = useTranslation(['app'])
+    const dflt = props.pattern.config.options[props.option].bool
+    const current = props.gist?.options?.[props.option]
+    return (
+      <span className={
+        (dflt==current || typeof current === 'undefined')
+          ? 'text-secondary-focus'
+          : 'text-accent'
+      }>
+        {props.gist?.options?.[props.option]
+          ? t('yes')
+          : t('no')
+        }
+      </span>
+    )
+  },
+  count: props => {
+    const dflt = props.pattern.config.options[props.option].count
+    const current = props.gist?.options?.[props.option]
+    return (dflt==current || typeof current === 'undefined')
+      ? <span className="text-secondary-focus">{dflt}</span>
+      : <span className="text-accent">{current}</span>
+  },
+  list: props => {
+    const dflt = props.pattern.config.options[props.option].dflt
+    const current = props.gist?.options?.[props.option]
+    const prefix = `${props.option}.o.`
+    return (dflt==current || typeof current === 'undefined')
+      ? <span className="text-secondary-focus">{props.t(prefix+dflt)}</span>
+      : <span className="text-accent">{props.t(prefix+current)}</span>
+  },
+  deg: props => {
+    const dflt = props.pattern.config.options[props.option].deg
+    const current = props.gist?.options?.[props.option]
+    return (dflt==current || typeof current === 'undefined')
+      ? <span className="text-secondary-focus">{dflt}&deg;</span>
+      : <span className="text-accent">{current}&deg;</span>
+  },
+  mm: props => {
+    return <p>No mm val yet</p>
+  },
+  constant: props => {
+    return <p>No constant val yet</p>
+  },
+}
+
+const Tmp = props => <p>not yet</p>
+
+const inputs = {
+  pct: PctDegOption,
+  count: CountOption,
+  deg: props => <PctDegOption {...props} type='deg' />,
+  list: ListOption,
+  mm: <p>Mm options are not supported. Please report this.</p>,
+  constant: Tmp,
+}
+
+
+const Option = props => {
+  const { t } = useTranslation([`o_${props.pattern.config.name}`])
+  const type = optionType(props.pattern.config.options[props.option])
+  const Input = inputs[type]
+  const Value = values[type]
+
+  const toggleBoolean = () => {
+    const dflt = props.pattern.config.options[props.option].bool
+    const current = props.gist?.options?.[props.option]
+    if (typeof current === 'undefined')
+      props.updateGist(['options', props.option], !dflt)
+    else props.unsetGist(['options', props.option])
+  }
+
+  return (type === 'bool')
+    ? (
+      <Li>
+        <SumButton onClick={toggleBoolean}>
+          <SumDiv>
+            <Deg />
+            <span>{t(`${props.option}.t`) }</span>
+          </SumDiv>
+          <Value type={type} {...props} t={t} />
+        </SumButton>
+      </Li>
+    ) : (
+      <Li>
+        <Details>
+          <Summary>
+            <SumDiv>
+              <Deg />
+              <span>{t(`${props.option}.t`)}</span>
+            </SumDiv>
+            <Value type={type} {...props} t={t} />
+            <Chevron w={6} m={3}/>
+          </Summary>
+          <Input {...props} ot={t} />
+        </Details>
+      </Li>
+    )
+}
+
+export default Option

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

@@ -1,5 +1,4 @@
 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'
 import { useTranslation } from 'next-i18next'
 

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

@@ -15,8 +15,7 @@ const types = {
 const XrayList = props => {
   const { t } = useTranslation(['app', 'parts'])
 
-  let title = t(`parts:${props.partName}`)
+  const title = t(`parts:${props.partName}`) + ` (${props.partName})`
-  if (title !== props.partName || true) title + ` (${props.partName})`
 
   const part = props.gist.xray.parts[props.partName]
 
@@ -82,7 +81,7 @@ const XrayList = props => {
                             </SumDiv>
                             <button
                               className={`px-3 hover:text-secondary-focus"
-                                ${props.gist?.xray?.reveal?.[props.partName]?.[type]?.[id]
+                                ${props.gist.xray?.reveal?.[props.partName]?.[type]?.[id]
                                   ? 'text-accent'
                                   : 'text-secondary'
                                 }`}

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

@@ -9,12 +9,12 @@ const XrayPath = ({ pathName, partName, draft, t, units }) => {
   if (!path) return null
   return (
     <Ul>
-      <Attributes attr={path?.attributes} />
+      <Attributes attr={path.attributes} />
       <Li>
         <NoSumDiv>
           <Deg />
           <span className="font-bold mr-2">path.render =</span>
-          <span>{JSON.stringify(path?.render)}</span>
+          <span>{JSON.stringify(path.render)}</span>
         </NoSumDiv>
       </Li>
       <Li>

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

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useEffect } from 'react'
 import useLocalStorage from 'shared/hooks/useLocalStorage.js'
 import Layout from 'shared/components/layouts/default'
 import Menu from 'shared/components/workbench/menu/index.js'
@@ -9,7 +9,7 @@ import DraftError from 'shared/components/workbench/draft/error.js'
 import theme from 'pkgs/plugin-theme/src/index.js'
 
 // Views
-import Measurements, { Input } from 'shared/components/workbench/measurements/index.js'
+import Measurements from 'shared/components/workbench/measurements/index.js'
 import LabDraft from 'shared/components/workbench/draft/index.js'
 import GistAsJson from 'shared/components/workbench/json.js'
 import GistAsYaml from 'shared/components/workbench/yaml.js'

packages/freesewing.shared/prebuild/i18n.mjs

@@ -1,6 +1,5 @@
 import path from 'path'
 import fs from 'fs'
-import yaml from 'js-yaml'
 import { en, de, es, fr, nl, languages } from '../../i18n/dist/index.js'
 
 const locales = { en, de, es, fr, nl }

packages/freesewing.shared/strapi/qa.mjs

@@ -1,7 +1,6 @@
 /*
  * This tries to fix as many Strapi things as possible
  */
-import { languages as allLanguages } from '../config/freesewing.mjs'
 
 // What types of content to load
 const content = {
@@ -12,7 +11,7 @@ const content = {
 // What languages to handle
 const languages = {
   dev: ['en'],
-  org: allLanguages,
+  org: ['en', 'es', 'de', 'nl', 'fr']
 }
 
 /*