From ef69ea1e3c923b06b7d16a25c2fbd028da955a3b Mon Sep 17 00:00:00 2001 From: Enoch Riese Date: Tue, 6 Jun 2023 13:18:44 -0500 Subject: [PATCH] test view with options menu --- .../workbench/menus/design-options/index.mjs | 2 +- .../workbench/menus/shared/menu-item.mjs | 4 +- .../components/workbench/views/test/index.mjs | 48 ++++++++++++ .../components/workbench/views/test/menu.mjs | 45 +++++++++++ .../workbench/views/test/options.mjs | 78 +++++++++++++++++++ 5 files changed, 174 insertions(+), 3 deletions(-) create mode 100644 sites/shared/components/workbench/views/test/index.mjs create mode 100644 sites/shared/components/workbench/views/test/menu.mjs create mode 100644 sites/shared/components/workbench/views/test/options.mjs diff --git a/sites/shared/components/workbench/menus/design-options/index.mjs b/sites/shared/components/workbench/menus/design-options/index.mjs index b96add8db41..770f4a3f517 100644 --- a/sites/shared/components/workbench/menus/design-options/index.mjs +++ b/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: '💃🏽', diff --git a/sites/shared/components/workbench/menus/shared/menu-item.mjs b/sites/shared/components/workbench/menus/shared/menu-item.mjs index d2fbf7b152e..e278978f757 100644 --- a/sites/shared/components/workbench/menus/shared/menu-item.mjs +++ b/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, diff --git a/sites/shared/components/workbench/views/test/index.mjs b/sites/shared/components/workbench/views/test/index.mjs new file mode 100644 index 00000000000..d3cff018eb4 --- /dev/null +++ b/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 ( +
+
+ +
+
+ +
+
+ ) +} diff --git a/sites/shared/components/workbench/views/test/menu.mjs b/sites/shared/components/workbench/views/test/menu.mjs new file mode 100644 index 00000000000..bff06163209 --- /dev/null +++ b/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 ( + + ) +} + +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 ( + + ) +} diff --git a/sites/shared/components/workbench/views/test/options.mjs b/sites/shared/components/workbench/views/test/options.mjs new file mode 100644 index 00000000000..67deb40d0d2 --- /dev/null +++ b/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 ( + <> +

{t(`${name}.d`)}

+
+ +
+ + ) +} +const TestOption = ({ name, passProps, ...rest }) => { + return ( + + ) +} + +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 ( + { + if (value) update.settings(['sample'], { type: 'option', option: path[0] }) + else update.settings(['sample']) + }, + }} + /> + ) +}