feat(lab): Added tests/sampling

packages/freesewing.lab/components/pattern-picker.js

@@ -4,7 +4,7 @@ import Link from 'next/link'
 import { useTranslation } from 'next-i18next'
 
 const PatternPicker = ({ app }) => {
-  const { t } = useTranslation(['app'])
+  const { t } = useTranslation(['common'])
 
   return (
       <div className="dropdown">

packages/freesewing.lab/next-i18next.config.js

@@ -3,7 +3,7 @@ module.exports = {
   i18n: {
     defaultLocale: 'en',
     locales: ['en', 'de', 'es', 'fr', 'nl'],
-    defaultNS: 'app',
+    defaultNS: 'common',
   },
   interpolation: {
     prefix: '{',

packages/freesewing.shared/components/theme-picker.js

@@ -3,7 +3,7 @@ import ThemeIcon from 'shared/components/icons/theme.js'
 import { useTranslation } from 'next-i18next'
 
 const ThemePicker = ({ app, className }) => {
-  const { t } = useTranslation(['app'])
+  const { t } = useTranslation(['themes'])
 
   return (
       <div className={`dropdown ${className}`}>

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

@@ -17,7 +17,8 @@ const order = [
   'info',
   'debug'
 ]
-const Events = props => (
+const Events = props => props?.draft?.events
+  ? (
     <div className="max-w-screen-xl m-auto">
       <div className="flex flex-col">
         <ul className="flex flex-row row-wrap">
@@ -38,6 +39,6 @@ const Events = props => (
         {order.map(type => <EventGroup type={type} events={props.draft.events[type]} />)}
       </div>
     </div>
-)
+  ) : null
 
 export default Events

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

@@ -5,7 +5,7 @@ import { Ul, Details, TopSummary, TopSumTitle } from 'shared/components/workbenc
 import { useTranslation } from 'next-i18next'
 
 const DesignOptions = props => {
-  const { t } = useTranslation(['app'])
+  const { t } = useTranslation(['workbench'])
 
   return (
     <Details open>

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

@@ -1,128 +1,65 @@
-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 { linkClasses } from 'shared/components/navigation/primary.js'
+import { Li, Ul, Details, Summary, 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>
+const SumButton = props => (
+  <button className={`
+    flex flex-row
+    px-2
+    w-full justify-between
+    text-left
+    text-base-content
+    sm:text-neutral-content
+    hover:cursor-pointer
+    items-center
+    mr-4
+  `} onClick={props.onClick}>{props.children}</button>
 )
-  },
-  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>
+const SumDiv = (props) => (
+  <div className={`
+    grow pl-2 border-l-2
+    ${linkClasses}
+    hover:cursor-resize
+    hover:border-secondary
+    sm:hover:border-secondary-focus
+    text-base-content sm:text-neutral-content
+    ${props.active && 'border-secondary-focus'}
+
+  `}>{props.children}</div>
 )
-  },
-  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 { t } = useTranslation([`o_${props.pattern.config.name}`, 'workbench'])
+  const active = (
+    props.gist.sample?.type === 'option' &&
+    props.gist.sample?.option === props.option
+  )
 
-  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 (
+    <Li>
+      <SumButton onClick={() => props.updateGist(
+        ['sample'],
+        {
+          type: 'option',
+          option: props.option
         }
-
-  return (type === 'bool')
-    ? (
-      <Li>
-        <SumButton onClick={toggleBoolean}>
-          <SumDiv>
-            <Deg />
-            <span>{t(`${props.option}.t`) }</span>
+      )}>
+        <SumDiv active={active}>
+          <span className={`
+            text-3xl inline-block p-0 leading-3 px-2
+            ${active
+              ? 'text-secondary sm:text-secondary-focus translate-y-1 font-bold'
+              : 'translate-y-3'
+            }`}
+          >
+            {active ? <span>&bull;</span> : <span>&deg;</span>}
+          </span>
+          <span className={active ? 'text-secondary font-bold' : ''}>
+            {t(`o_${props.pattern.config.name}:${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>
   )
 }
 

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

@@ -77,7 +77,7 @@ const View = props => {
               <span className={`
                 text-3xl mr-2 inline-block p-0 leading-3
                 ${entry.name === props.gist?._state?.view
-                  ? 'text-secondary sm:text-secondary-focus translate-y-1'
+                  ? 'text-secondary sm:text-secondary-focus translate-y-1 font-bold'
                   : 'translate-y-3'
                 }
               `}>

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

@@ -0,0 +1,37 @@
+import svgattrPlugin from '@freesewing/plugin-svgattr'
+import { useTranslation } from 'next-i18next'
+
+const LabSample = ({ gist, draft }) => {
+  const { t } = useTranslation(['workbench'])
+  let svg
+  let title = ''
+  if (gist.sample) {
+    try {
+      draft.use(svgattrPlugin, {
+        class: 'freesewing'
+      })
+      draft.sample()
+      svg = draft.render()
+    }
+    catch(err) {
+      console.log(err)
+    }
+    if (gist.sample.type === 'option') {
+      title = t('testThing', {
+        thing: ' : ' + t('option') + ' : ' + gist.sample.option
+      })
+    }
+  }
+
+  return (
+    <>
+      <h2>{title}</h2>
+      <div
+        className="freesewing pattern"
+        dangerouslySetInnerHTML={{ __html: svg }}
+      />
+    </>
+  )
+}
+
+export default LabSample

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

@@ -11,6 +11,7 @@ import theme from 'pkgs/plugin-theme/src/index.js'
 // Views
 import Measurements from 'shared/components/workbench/measurements/index.js'
 import LabDraft from 'shared/components/workbench/draft/index.js'
+import LabSample from 'shared/components/workbench/sample.js'
 import GistAsJson from 'shared/components/workbench/json.js'
 import GistAsYaml from 'shared/components/workbench/yaml.js'
 import DraftEvents from 'shared/components/workbench/events.js'
@@ -18,7 +19,7 @@ import DraftEvents from 'shared/components/workbench/events.js'
 const views = {
   measurements: Measurements,
   draft: LabDraft,
-  test: () => <p>TODO</p>,
+  test: LabSample,
   export: () => <p>TODO</p>,
   events: DraftEvents,
   yaml: GistAsYaml,
@@ -79,10 +80,12 @@ const WorkbenchWrapper = ({ app, pattern }) => {
 
   // Generate the draft here so we can pass it down
   let draft = false
-  if (['draft', 'events'].indexOf(gist?._state?.view) !== -1) {
+  if (['draft', 'events', 'test'].indexOf(gist?._state?.view) !== -1) {
     draft = new pattern(gist)
     if (gist?.renderer === 'svg') draft.use(theme)
-    try { draft.draft() }
+    try {
+      if (gist._state.view !== 'test') draft.draft()
+    }
     catch(error) {
       console.log('Failed to draft pattern', error)
       return <DraftError error={error} app={app} draft={draft} at={'draft'} />