renderer

Author: tesseralis

apps/docs/pages/components/html.tsx

@@ -1,16 +1,21 @@
-import { HtmlEditor } from '@compai/css-gui'
-const initialValue = {
+import { HtmlEditor, HtmlRenderer } from '@compai/css-gui'
+const initialValue: any = {
   tagName: 'div',
   children: [
     'hello',
     'world',
     {
-      tagName: 'div',
+      tagName: 'span',
       children: ['hello'],
     },
   ],
 }
 
 export default function HtmlEditorExample() {
-  return <HtmlEditor value={initialValue} />
+  return (
+    <div sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
+      <HtmlEditor value={initialValue} />
+      <HtmlRenderer value={initialValue} />
+    </div>
+  )
 }

packages/gui/src/components/html/Renderer.tsx

@@ -0,0 +1,21 @@
+import { toCSSObject } from '../../lib'
+import { ElementData } from './types'
+
+interface Props {
+  value: ElementData
+}
+
+export function HtmlRenderer({ value }: Props) {
+  const { tagName, attributes = {}, style = {}, children = [] } = value
+  const Tag: any = value.tagName
+  return (
+    <Tag {...attributes} sx={{ ...toCSSObject(style) }}>
+      {children.map((child) => {
+        if (typeof child === 'string') {
+          return child
+        }
+        return <HtmlRenderer value={child} />
+      })}
+    </Tag>
+  )
+}

packages/gui/src/components/html/editor.tsx

@@ -11,14 +11,24 @@ interface EditorProps {
  * An HTML tree-based editor that lets you add HTML nodes and mess around with their styles
  */
 export function HtmlEditor({ value }: EditorProps) {
+  const [selected, setSelected] = useState<ElementData | null>(null)
   return (
-    <div>
-      <TreeNode value={value} />
+    <div sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 3 }}>
+      <TreeNode value={value} onSelect={setSelected} />
+      {selected && <Editor value={selected} />}
     </div>
   )
 }
 
-function TreeNode({ value }: EditorProps) {
+function Editor({ value }: EditorProps) {
+  return <div>tagName: {value.tagName}</div>
+}
+
+interface TreeNodeProps extends EditorProps {
+  onSelect(element: ElementData): void
+}
+
+function TreeNode({ value, onSelect }: TreeNodeProps) {
   const [open, setOpen] = useState(true)
   return (
     <Collapsible.Root open={open} onOpenChange={setOpen}>
@@ -33,20 +43,29 @@ function TreeNode({ value }: EditorProps) {
             height: '1rem',
           },
         }}
+      ></Collapsible.Trigger>
+      <button
+        sx={{
+          border: 'none',
+          backgroundColor: 'background',
+          color: 'text',
+          fontSize: '1rem',
+        }}
+        onClick={() => onSelect(value)}
       >
         &lt;{value.tagName}
         {!open && '/'}&gt;
-      </Collapsible.Trigger>
+      </button>
       <Collapsible.Content>
         <div sx={{ ml: 4 }}>
           {value.children.map((child) => {
             if (typeof child === 'string') {
               return <div>"{child}"</div>
             }
-            return <TreeNode value={child} />
+            return <TreeNode value={child} onSelect={onSelect} />
           })}
         </div>
-        &lt;/{value.tagName}&gt;
+        <div sx={{ ml: '1rem' }}>&lt;/{value.tagName}&gt;</div>
       </Collapsible.Content>
     </Collapsible.Root>
   )

packages/gui/src/index.ts

@@ -19,12 +19,13 @@ export {
 } from './components/providers/ThemeContext'
 export { EditorProvider } from './components/providers/EditorContext'
 export { Layout } from './components/ui/Layout'
+export { HtmlEditor } from './components/html/editor'
+export { HtmlRenderer } from './components/html/Renderer'
 
 export { theme } from './components/ui/theme'
 export { supportedProperties, unsupportedProperties } from './data/properties'
 export { allProperties } from './data/css-properties'
 export { mdnProperties } from './data/mdn-properties'
-export { HtmlEditor } from './components/html/editor'
 
 export * from './lib'
 export * from './types/theme'