test view with options menu

sites/shared/components/workbench/menus/design-options/index.mjs

@@ -10,7 +10,7 @@ import { MenuItem } from '../shared/menu-item.mjs'
 export const ns = ['design-options']
 
 // Emojis for option groups :)
-const emojis = {
+export const emojis = {
   advanced: '🤓',
   fit: '👕',
   style: '💃🏽',

sites/shared/components/workbench/menus/shared/menu-item.mjs

@@ -63,8 +63,8 @@ export const MenuItem = ({
   passProps = {},
   changed,
   loadDocs,
-  Input,
-  Value,
+  Input = () => {},
+  Value = () => {},
   allowOverride = false,
   allowToggle = false,
   control = Infinity,

sites/shared/components/workbench/views/test/index.mjs

@@ -0,0 +1,48 @@
+import { useState } from 'react'
+import { PanZoomPattern } from 'shared/components/workbench/pan-zoom-pattern.mjs'
+import { TestMenu, ns as menuNs } from './menu.mjs'
+import { objUpdate } from 'shared/utils.mjs'
+
+export const ns = []
+
+export const TestView = ({
+  design,
+  pattern,
+  setView,
+  settings,
+  ui,
+  update,
+  language,
+  account,
+  DynamicDocs,
+}) => {
+  if (!pattern) return null
+  if (settings.sample) pattern.sample()
+  else pattern.draft()
+
+  const renderProps = pattern.getRenderProps()
+  const patternConfig = pattern.getConfig()
+  return (
+    <div className="flex flex-row">
+      <div className="w-2/3 shrink-0 grow lg:p-4 sticky top-0">
+        <PanZoomPattern {...{ renderProps }} />
+      </div>
+      <div className="w-1/3 shrink grow-0 lg:p-4 max-w-2xl h-screen overflow-scroll">
+        <TestMenu
+          {...{
+            design,
+            pattern,
+            patternConfig,
+            settings,
+            ui,
+            update,
+            language,
+            account,
+            DynamicDocs,
+            renderProps,
+          }}
+        />
+      </div>
+    </div>
+  )
+}

sites/shared/components/workbench/views/test/menu.mjs

@@ -0,0 +1,45 @@
+import { TestOptions, ns as optionsNs } from './options.mjs'
+
+export const ns = [...optionsNs]
+
+const TestOption = ({ config, settings, control, name, ...rest }) => {
+  return (
+    <MenuItem
+      {...{
+        ...rest,
+        changed: settings.sample === name,
+      }}
+    />
+  )
+}
+
+export const TestMenu = ({
+  design,
+  patternConfig,
+  settings,
+  ui,
+  update,
+  language,
+  account,
+  DynamicDocs,
+  inspector = false,
+  renderProps,
+}) => {
+  const control = account.control
+  const menuProps = {
+    design,
+    patternConfig,
+    settings,
+    update,
+    language,
+    account,
+    DynamicDocs,
+    control,
+  }
+
+  return (
+    <nav className="grow mb-12">
+      <TestOptions {...menuProps} />
+    </nav>
+  )
+}

sites/shared/components/workbench/views/test/options.mjs

@@ -0,0 +1,78 @@
+import { MenuItem } from 'shared/components/workbench/menus/shared/menu-item.mjs'
+import { WorkbenchMenu } from 'shared/components/workbench/menus/shared/index.mjs'
+import {
+  emojis,
+  ns as designMenuNs,
+} from 'shared/components/workbench/menus/design-options/index.mjs'
+import { OptionsIcon } from 'shared/components/icons.mjs'
+import { optionsMenuStructure, optionType } from 'shared/utils.mjs'
+
+const TestOptionInput = ({ config, changed, name, t, updateFunc }) => {
+  return (
+    <>
+      <p>{t(`${name}.d`)}</p>
+      <div className="text-center">
+        <button
+          className={`btn btn-primary`}
+          disabled={changed}
+          onClick={() => updateFunc([name], true)}
+        >
+          {' '}
+          {t('testThisOption')}
+        </button>
+      </div>
+    </>
+  )
+}
+const TestOption = ({ name, passProps, ...rest }) => {
+  return (
+    <MenuItem
+      {...{
+        ...rest,
+        name,
+        passProps,
+        changed: passProps.settings.sample?.option === name,
+        Input: TestOptionInput,
+      }}
+    />
+  )
+}
+
+export const ns = [...designMenuNs]
+export const TestOptions = ({
+  design,
+  patternConfig,
+  settings,
+  update,
+  language,
+  account,
+  isFirst = true,
+  DynamicDocs = false,
+}) => {
+  const menuNs = [`o_${design}`, ...ns]
+  const optionsMenu = optionsMenuStructure(patternConfig.options)
+  const getDocsPath = (option) =>
+    `patterns/${design}/options${option ? '/' + option.toLowerCase() : ''}`
+  return (
+    <WorkbenchMenu
+      {...{
+        config: optionsMenu,
+        control: account.control,
+        DynamicDocs,
+        emojis,
+        getDocsPath,
+        Icon: OptionsIcon,
+        Item: TestOption,
+        isFirst,
+        name: 'design-options:designOptions',
+        language,
+        ns: menuNs,
+        passProps: { settings },
+        updateFunc: (path, value) => {
+          if (value) update.settings(['sample'], { type: 'option', option: path[0] })
+          else update.settings(['sample'])
+        },
+      }}
+    />
+  )
+}