chore(shared): Updated ui settings and work on render view

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>
-)
+  )
+}