From 59136685033e750e963a2862507661938e62f8c9 Mon Sep 17 00:00:00 2001
From: Andreas Tzionis <andy0n7@gmail.com>
Date: Sat, 4 Nov 2023 23:16:48 +0200
Subject: [PATCH] worked on categories, fixed canvas width

---
 lib/client/vanilla/index.jsx | 91 ++++++++++++++++++++++++------------
 1 file changed, 60 insertions(+), 31 deletions(-)

diff --git a/lib/client/vanilla/index.jsx b/lib/client/vanilla/index.jsx
index f91548cb..e68aa539 100644
--- a/lib/client/vanilla/index.jsx
+++ b/lib/client/vanilla/index.jsx
@@ -2,12 +2,12 @@ import React, { useEffect, useRef, useState } from 'react'
 
 import './index.css'
 
-// import { ArrowDownOnSquareIcon } from '@heroicons/react/24/outline'
-// import { ArrowUpOnSquareIcon } from '@heroicons/react/24/outline'
+import TrashIcon from '@heroicons/react/24/outline/TrashIcon'
+import ArrowDownIcon from '@heroicons/react/24/outline/ArrowDownIcon'
+import ArrowUpIcon from '@heroicons/react/24/outline/ArrowUpIcon'
 
-import { TrashIcon } from '@heroicons/react/24/outline'
-import { ArrowDownIcon } from '@heroicons/react/24/outline'
-import { ArrowUpIcon } from '@heroicons/react/24/outline'
+import Squares2X2Icon from '@heroicons/react/24/outline/Squares2X2Icon'
+import ArrowSmallUpIcon from '@heroicons/react/24/outline/ArrowSmallUpIcon'
 
 const standaloneServerPort = 12785
 
@@ -40,6 +40,45 @@ const getImageUrl = (standaloneServer, imageSrc) => {
   return `${baseUrl}/api/builder/handle?type=asset&path=${imageSrc}`
 }
 
+const Category = ({ name, components }) => {
+  const [show, setShow] = useState(false)
+
+  return (
+    <div>
+      <div
+        onClick={() => setShow((i) => !i)}
+        className={`h-12 cursor-pointer bg-white border-b last:border-b-0 flex items-center px-2 ${
+          show ? 'shadow-sm' : ''
+        }`}
+      >
+        <div className="flex-1 flex items-center">
+          <Squares2X2Icon className="h-4 w-4 ml-2 mr-4" />{' '}
+          <h2 className="text-xs uppercase">{name}</h2>
+        </div>
+        <a style={{ transform: `rotate(${show ? 180 : 0}deg)` }}>
+          <ArrowSmallUpIcon className="h-4 w-4" />
+        </a>
+      </div>
+      {show && (
+        <div>
+          {components.map((c, i) => (
+            <img
+              key={i}
+              className="cursor-grab mb-2"
+              src={getImageUrl(
+                false,
+                `/themes/${theme.name.replaceAll(' ', '')}/${c.folder}/preview.png`,
+              )}
+              draggable="true"
+              onDragStart={(e) => e.dataTransfer.setData('component', `${name}-${i}`)}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
 function ContentProvider() {
   const canvasRef = useRef(null)
 
@@ -55,7 +94,14 @@ function ContentProvider() {
   const loadComponents = async () => {
     const baseUrl = getBaseUrl(false)
     const url = `${baseUrl}/api/builder/handle?type=theme&name=${theme.folder}`
-    const _components = await fetch(url).then((r) => r.json())
+    const _componentsList = await fetch(url).then((r) => r.json())
+
+    const _components = _componentsList.reduce((r, c) => {
+      const category = c.folder.replace(/[0-9]/g, '')
+      if (!r[category]) r[category] = []
+      r[category].push(c)
+      return r
+    }, {})
 
     setComponents(_components)
   }
@@ -104,8 +150,8 @@ function ContentProvider() {
   const onCanvasDrop = async (e) => {
     e.preventDefault()
 
-    const componentId = e.dataTransfer.getData('component-id')
-    const html = components[componentId].source
+    const [categoryId, componentId] = e.dataTransfer.getData('component').split('-')
+    const html = components[categoryId][componentId].source
 
     const _components = getComponents()
     if (_components.length === 0) {
@@ -119,10 +165,6 @@ function ContentProvider() {
     cleanCanvas()
   }
 
-  const onComponentDragStart = (e, i) => {
-    e.dataTransfer.setData('component-id', i)
-  }
-
   const getElementPosition = (element) => {
     const box = element.getBoundingClientRect()
 
@@ -234,27 +276,13 @@ function ContentProvider() {
           <TrashIcon ref={deleteRef} className="h-7 w-7 text-white p-1" />
         </div>
       </div>
-      <div className="w-48 p-2" style={{ height: '100vh', overflowY: 'scroll' }}>
-        {components.map((c, i) => (
-          <img
-            key={i}
-            className="cursor-grab mb-2"
-            src={getImageUrl(
-              false,
-              `/themes/${theme.name.replaceAll(' ', '')}/${c.folder}/preview.png`,
-            )}
-            draggable="true"
-            onDragStart={(e) => onComponentDragStart(e, i)}
-          />
+      <div className="w-56 p-2" style={{ height: '100vh', overflowY: 'scroll', flexShrink: 0 }}>
+        {Object.keys(components).map((c, i) => (
+          <Category key={i} name={c} components={components[c]} />
         ))}
       </div>
       <div className="w-full" style={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
         <div className="flex items-center m-2">
-          {/* <ArrowDownOnSquareIcon
-            className="h-6 w-6 mx-2 ml-4 cursor-pointer"
-            onClick={() => {}}
-          /> */}
-          {/* <ArrowUpOnSquareIcon className="h-6 w-6 mx-2 cursor-pointer" onClick={() => {}} /> */}
           <TrashIcon className="h-6 w-6 mx-2 cursor-pointer" onClick={clearComponents} />
           <button
             className="bg-green-500 hover:bg-green-700 text-white px-4 py-2 ml-auto mr-6 rounded-md"
@@ -274,9 +302,10 @@ function ContentProvider() {
             onDragOver={onCanvasDragOver}
             onDragLeave={onCanvasDragLeave}
             style={{
+              flex: 1,
               margin: isPreview ? '0px' : '20px',
-              width: isPreview ? '100%' : 720,
-              minHeight: 960,
+              maxWidth: isPreview ? '100%' : '868px',
+              minHeight: '1024px',
             }}
           ></div>
         </div>