chore: Linter warnings

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