From c95ebd5934856c3d6862b8bc3256c813f5b87cdf Mon Sep 17 00:00:00 2001
From: joostdecock <joost@joost.at>
Date: Thu, 1 Jun 2023 17:01:48 +0200
Subject: [PATCH] chore(shared): Updated ui settings and work on render view

---
 config/software/packages.json                 |  1 +
 .../workbench/menus/ui-settings/config.mjs    |  6 +-
 .../workbench/menus/ui-settings/index.mjs     | 12 ++--
 .../workbench/menus/ui-settings/inputs.mjs    |  2 +-
 .../menus/ui-settings/ui-settings.en.yaml     | 12 ++--
 .../workbench/menus/ui-settings/values.mjs    |  2 +-
 .../components/workbench/pattern/part.mjs     |  1 +
 .../workbench/views/draft/index.mjs           | 60 ++++++++++++-------
 8 files changed, 57 insertions(+), 39 deletions(-)

diff --git a/config/software/packages.json b/config/software/packages.json
index 165a748b285..04d3268570f 100644
--- a/config/software/packages.json
+++ b/config/software/packages.json
@@ -4,6 +4,7 @@
   "models": "Body measurements data for a range of default sizes",
   "new-design": "Initializer package for a new FreeSewing design: npx @freesewing/new-design",
   "prettier-config": "FreeSewing's shared configuration for prettier",
+  "react-components": "React components by/for FreeSewing",
   "snapseries": "A series of common sizes for elastics and other series to be used with snapped percentage options",
   "rehype-jargon": "A Rehype plugin for jargon terms",
   "rehype-highlight-lines": "A Rehype plugin to add highlighted lines to code blocks"
diff --git a/sites/shared/components/workbench/menus/ui-settings/config.mjs b/sites/shared/components/workbench/menus/ui-settings/config.mjs
index 3c1811081e7..845657c2b29 100644
--- a/sites/shared/components/workbench/menus/ui-settings/config.mjs
+++ b/sites/shared/components/workbench/menus/ui-settings/config.mjs
@@ -17,12 +17,12 @@ export const loadSettingsConfig = () => ({
     dflt: 'react',
     emoji: '🚀',
   },
-  xray: {
+  inspect: {
     control: 4, // Show when control > 3
     list: [0, 1],
     choiceTitles: {
-      0: 'xrayNo',
-      1: 'xrayYes',
+      0: 'inspectNo',
+      1: 'inspectYes',
     },
     valueTitles: {
       0: 'no',
diff --git a/sites/shared/components/workbench/menus/ui-settings/index.mjs b/sites/shared/components/workbench/menus/ui-settings/index.mjs
index 612ffac57d1..cdf58ba7061 100644
--- a/sites/shared/components/workbench/menus/ui-settings/index.mjs
+++ b/sites/shared/components/workbench/menus/ui-settings/index.mjs
@@ -9,8 +9,8 @@ import { ModalContext } from 'shared/context/modal-context.mjs'
 import { ModalWrapper } from 'shared/components/wrappers/modal.mjs'
 import { Collapse } from 'shared/components/collapse.mjs'
 import { HelpIcon, DesktopIcon, ClearIcon } from 'shared/components/icons.mjs'
-import { ControlSettingInput, RendererSettingInput, XRaySettingInput } from './inputs.mjs'
-import { ControlSettingValue, RendererSettingValue, XRaySettingValue } from './values.mjs'
+import { ControlSettingInput, RendererSettingInput, InspectSettingInput } from './inputs.mjs'
+import { ControlSettingValue, RendererSettingValue, InspectSettingValue } from './values.mjs'
 //import { ConsoleLog } from './log.mjs'
 //import { XrayReset } from './reset.mjs'
 //import { XrayList } from './list.mjs'
@@ -21,14 +21,14 @@ export const ns = ['ui-settings']
 const values = {
   control: ControlSettingValue,
   renderer: RendererSettingValue,
-  xray: XRaySettingValue,
+  inspect: InspectSettingValue,
 }
 
 // Facilitate lookup of the input component
 const inputs = {
   control: ControlSettingInput,
   renderer: RendererSettingInput,
-  xray: XRaySettingInput,
+  inspect: InspectSettingInput,
 }
 
 const wasChanged = (current, name, settingsConfig) => {
@@ -54,8 +54,8 @@ export const UiTitle = ({ name, t, current = null, open = false, emoji = '' }) =
 export const Setting = ({ name, config, current, update, t, changed, loadDocs, control, ui }) => {
   const drillProps = { name, config, current, update, t, changed, control }
 
-  // Don't bother with X-Ray in SVG mode
-  if (name === 'xray' && ui.renderer === 'svg') return null
+  // Don't bother with inspect in SVG mode
+  if (name === 'inspect' && ui.renderer === 'svg') return null
 
   const Input = inputs[name]
   const Value = values[name]
diff --git a/sites/shared/components/workbench/menus/ui-settings/inputs.mjs b/sites/shared/components/workbench/menus/ui-settings/inputs.mjs
index 5182c647645..609038b4edf 100644
--- a/sites/shared/components/workbench/menus/ui-settings/inputs.mjs
+++ b/sites/shared/components/workbench/menus/ui-settings/inputs.mjs
@@ -56,4 +56,4 @@ export const RendererSettingInput = ({ name, config, current, update, t }) => (
   />
 )
 
-export const XRaySettingInput = (props) => <ListSetting {...props} />
+export const InspectSettingInput = (props) => <ListSetting {...props} />
diff --git a/sites/shared/components/workbench/menus/ui-settings/ui-settings.en.yaml b/sites/shared/components/workbench/menus/ui-settings/ui-settings.en.yaml
index 24f8f98b868..e22b2251407 100644
--- a/sites/shared/components/workbench/menus/ui-settings/ui-settings.en.yaml
+++ b/sites/shared/components/workbench/menus/ui-settings/ui-settings.en.yaml
@@ -8,11 +8,11 @@ renderWithCore.t: Render with Freesewing's Core library
 renderWithCore.d: Render directly to SVG from Core. Allows no interactivity and is optimized for print. Use this if you want to know what it will look like when exported.
 control.t: User Experience
 control.d: Which user experience do you prefer? Please note that this is an account setting, so it will impact the entire website.
-xray.t: Inspect
-xray.d: Enabling this will allow you to drill down into the pattern, and pull up information about its various parts, paths, and points.
-xrayNo.t: Disable the inspector
-xrayNo.d: This is the default, the pattern inspector is disabled and the pattern is displayed as usual.
-xrayYes.t: Enable the inspector
-xrayYes.d: With the pattern inspector enabled and the React rendering engine selected, we will add interactivity to the pattern to allow you to inspect the various elements that make up the pattern.
+inspect.t: Inspect
+inspect.d: Enabling this will allow you to drill down into the pattern, and pull up information about its various parts, paths, and points.
+inspectNo.t: Disable the inspector
+inspectNo.d: This is the default, the pattern inspector is disabled and the pattern is displayed as usual.
+inspectYes.t: Enable the inspector
+inspectYes.d: With the pattern inspector enabled and the React rendering engine selected, we will add interactivity to the pattern to allow you to inspect the various elements that make up the pattern.
 no: No
 yes: Yes
diff --git a/sites/shared/components/workbench/menus/ui-settings/values.mjs b/sites/shared/components/workbench/menus/ui-settings/values.mjs
index 062c40fbb8b..d8d24f26146 100644
--- a/sites/shared/components/workbench/menus/ui-settings/values.mjs
+++ b/sites/shared/components/workbench/menus/ui-settings/values.mjs
@@ -6,5 +6,5 @@ const ListValue = ({ current, t, config, changed }) =>
     : t(`ui-settings:${config.valueTitles[config.dflt]}`)
 
 export const RendererSettingValue = ListValue
-export const XRaySettingValue = ListValue
+export const InspectSettingValue = ListValue
 export const ControlSettingValue = ({ control }) => <Difficulty score={control} color="primary" />
diff --git a/sites/shared/components/workbench/pattern/part.mjs b/sites/shared/components/workbench/pattern/part.mjs
index 44ddae3c533..4bb947f1f4a 100644
--- a/sites/shared/components/workbench/pattern/part.mjs
+++ b/sites/shared/components/workbench/pattern/part.mjs
@@ -102,6 +102,7 @@ export const PartInner = forwardRef(({ partName, part, settings, showInfo, ui, u
         fill={'url(#grid-' + partName + ')'}
       />
     ) : null
+  console.log({ part })
 
   return (
     <g ref={ref}>
diff --git a/sites/shared/components/workbench/views/draft/index.mjs b/sites/shared/components/workbench/views/draft/index.mjs
index f25d018bb9a..b049a865860 100644
--- a/sites/shared/components/workbench/views/draft/index.mjs
+++ b/sites/shared/components/workbench/views/draft/index.mjs
@@ -1,4 +1,4 @@
-import { Pattern } from 'shared/components/workbench/pattern/index.mjs'
+import { Pattern as ReactPattern } from 'pkgs/react-components/src/pattern/index.mjs'
 import { DraftMenu, ns as menuNs } from './menu.mjs'
 
 export const ns = menuNs
@@ -14,25 +14,41 @@ export const DraftView = ({
   language,
   account,
   DynamicDocs,
-}) => (
-  <div className="flex flex-row">
-    <div className="w-2/3 shrink-0 grow lg:p-4 sticky top-0">
-      <Pattern {...{ pattern, setView, settings, ui, update }} />
+}) => {
+  let output = null
+  if (ui.renderer === 'svg') {
+    try {
+      const __html = pattern.render()
+      output = <div dangerouslySetInnerHTML={{ __html }} />
+    } catch (err) {
+      console.log(err)
+    }
+  } else output = <ReactPattern renderProps={pattern.getRenderProps()} />
+
+  console.log(pattern.getRenderProps())
+  return <pre>{JSON.stringify(pattern.getRenderProps(), null, 2)}</pre>
+
+  return (
+    <div className="flex flex-row">
+      <div className="w-2/3 shrink-0 grow lg:p-4 sticky top-0">
+        <pre>{JSON.stringify(ui, null, 2)}</pre>
+        {output}
+      </div>
+      <div className="w-1/3 shrink grow-0 lg:p-4 max-w-2xl h-screen overflow-scroll">
+        <DraftMenu
+          {...{
+            design,
+            pattern,
+            patternConfig,
+            settings,
+            ui,
+            update,
+            language,
+            account,
+            DynamicDocs,
+          }}
+        />
+      </div>
     </div>
-    <div className="w-1/3 shrink grow-0 lg:p-4 max-w-2xl h-screen overflow-scroll">
-      <DraftMenu
-        {...{
-          design,
-          pattern,
-          patternConfig,
-          settings,
-          ui,
-          update,
-          language,
-          account,
-          DynamicDocs,
-        }}
-      />
-    </div>
-  </div>
-)
+  )
+}