create-visualbuild-app 0.1.0 → 1.0.0

package/visual-app-builder/src/components/ComponentSidebar.tsx

@@ -1,302 +1,365 @@
-import { useDraggable } from '@dnd-kit/core'
-import { CSS } from '@dnd-kit/utilities'
-import { useState } from 'react'
-import { components } from '../data/componentRegistry'
-import { primitives } from '../data/primitiveRegistry'
-import { useAppStore } from '../stores/useAppStore'
-import type { ComponentDefinition, PrimitiveDefinition } from '../types'
-import ProjectExplorer from './ProjectExplorer'
-
-export default function ComponentSidebar({
-  view,
-  selectedProjectFile,
-  onSelectProjectFile,
-}: {
-  view: 'files' | 'elements'
-  selectedProjectFile: string | null
-  onSelectProjectFile: (path: string | null) => void
-}) {
-  const {
-    activePageId,
-    selectedComponentId,
-    addComponent,
-    addPrimitive,
-    addPrimitiveToNode,
-    setAppShellComponent,
-  } = useAppStore()
-  const globalComponents = components.filter((component) =>
-    ['Navbar', 'Footer'].includes(component.type)
-  )
-  const pageComponents = components.filter(
-    (component) => !['Navbar', 'Footer'].includes(component.type)
-  )
-  const primitiveGroups = groupPrimitivesByCategory(primitives)
-  const [openSections, setOpenSections] = useState<Set<string>>(
-    () => new Set(['Global', 'Page Blocks', 'Semantic'])
-  )
-  const toggleSection = (section: string) => {
-    setOpenSections((current) => {
-      const next = new Set(current)
-
-      if (next.has(section)) {
-        next.delete(section)
-      } else {
-        next.add(section)
-      }
-
-      return next
-    })
-  }
-  return (
-    <aside className="flex h-full w-full flex-col overflow-hidden bg-sidebar">
-      <div className="px-3 py-2.5 border-b border-white/[0.06]">
-        <p className="text-[10px] font-semibold uppercase tracking-widest text-gray-500">
-          {view === 'files' ? 'Project files' : 'Elements'}
-        </p>
-      </div>
-
-      <div
-        className={`min-h-0 flex-1 ${
-          view === 'files' ? 'overflow-hidden' : 'overflow-y-auto p-2 space-y-1'
-        }`}
-      >
-        {view === 'files' ? (
-          <ProjectExplorer
-            selectedPath={selectedProjectFile}
-            onSelectFile={onSelectProjectFile}
-          />
-        ) : (
-          <>
-            <AccordionSection
-              title="Global"
-              count={globalComponents.length}
-              isOpen={openSections.has('Global')}
-              onToggle={() => toggleSection('Global')}
-            >
-              {globalComponents.map((component) => {
-                const slot = component.type === 'Footer' ? 'footer' : 'header'
-
-                return (
-                  <ComponentSidebarItem
-                    key={component.type}
-                    component={component}
-                    isDisabled={false}
-                    onAdd={() => setAppShellComponent(slot, component.type)}
-                  />
-                )
-              })}
-            </AccordionSection>
-
-            <AccordionSection
-              title="Page Blocks"
-              count={pageComponents.length}
-              isOpen={openSections.has('Page Blocks')}
-              onToggle={() => toggleSection('Page Blocks')}
-            >
-              {pageComponents.map((component) => {
-                return (
-                  <ComponentSidebarItem
-                    key={component.type}
-                    component={component}
-                    isDisabled={false}
-                    onAdd={() => addComponent(activePageId, component.type)}
-                  />
-                )
-              })}
-            </AccordionSection>
-
-            {primitiveGroups.map(([category, items]) => (
-              <AccordionSection
-                key={category}
-                title={category}
-                count={items.length}
-                isOpen={openSections.has(category)}
-                onToggle={() => toggleSection(category)}
-              >
-                {items.map((primitive) => (
-                  <PrimitiveSidebarItem
-                    key={primitive.type}
-                    primitive={primitive}
-                    isClickDisabled={selectedComponentId === null}
-                    onAdd={() => {
-                      if (selectedComponentId) {
-                        addPrimitiveToNode(selectedComponentId, primitive.type)
-                        return
-                      }
-
-                      addPrimitive(activePageId, primitive.type)
-                    }}
-                  />
-                ))}
-              </AccordionSection>
-            ))}
-          </>
-        )}
-      </div>
-
-      {view === 'elements' && (
-        <div className="px-3 py-2 border-t border-white/[0.06]">
-          <p className="text-[10px] text-gray-600">Drag or click to add</p>
-        </div>
-      )}
-    </aside>
-  )
-}
-
-function AccordionSection({
-  title,
-  count,
-  isOpen,
-  onToggle,
-  children,
-}: {
-  title: string
-  count: number
-  isOpen: boolean
-  onToggle: () => void
-  children: React.ReactNode
-}) {
-  return (
-    <section className="border-b border-white/[0.04] pb-1 last:border-b-0">
-      <button
-        type="button"
-        onClick={onToggle}
-        className="flex w-full cursor-pointer select-none items-center justify-between rounded px-2 py-1.5 text-left transition-colors hover:bg-white/[0.04]"
-      >
-        <span className="text-[10px] font-medium uppercase tracking-widest text-gray-500">
-          {title}
-        </span>
-        <span className="flex items-center gap-1 text-[10px] text-gray-600">
-          {count}
-          <span
-            className={`inline-block transition-transform ${
-              isOpen ? 'rotate-90' : ''
-            }`}
-            aria-hidden="true"
-          >
-            &gt;
-          </span>
-        </span>
-      </button>
-      {isOpen && <div className="space-y-0.5 pb-1">{children}</div>}
-    </section>
-  )
-}
-
-function groupPrimitivesByCategory(items: PrimitiveDefinition[]) {
-  const groups = new Map<string, PrimitiveDefinition[]>()
-
-  for (const item of items) {
-    groups.set(item.category, [...(groups.get(item.category) ?? []), item])
-  }
-
-  return Array.from(groups.entries())
-}
-
-function ComponentSidebarItem({
-  component,
-  isDisabled,
-  onAdd,
-}: {
-  component: ComponentDefinition
-  isDisabled: boolean
-  onAdd: () => void
-}) {
-  const { attributes, listeners, setNodeRef, transform, isDragging } =
-    useDraggable({
-      id: `sidebar:${component.type}`,
-      disabled: isDisabled,
-      data: {
-        kind: 'sidebar-component',
-        type: component.type,
-      },
-    })
-  const style = {
-    transform: CSS.Translate.toString(transform),
-  }
-
-  return (
-    <button
-      ref={setNodeRef}
-      type="button"
-      disabled={isDisabled}
-      onClick={onAdd}
-      style={style}
-      className={`w-full flex items-center gap-2.5 px-2.5 py-2 rounded-md text-left group transition-colors ${
-        isDisabled
-          ? 'opacity-45 cursor-not-allowed'
-          : 'cursor-grab select-none hover:bg-white/[0.06] active:cursor-grabbing'
-      } ${isDragging ? 'opacity-70 bg-white/[0.08]' : ''}`}
-      {...listeners}
-      {...attributes}
-    >
-      <span className="text-base text-gray-500 group-hover:text-accent transition-colors w-5 text-center leading-none">
-        {component.icon}
-      </span>
-      <div className="min-w-0">
-        <p className="text-xs font-medium text-gray-300 group-hover:text-white transition-colors leading-tight">
-          {component.label}
-        </p>
-        <p className="text-[10px] text-gray-600 group-hover:text-gray-400 transition-colors leading-tight mt-0.5 truncate">
-          {getComponentDescription(component.type, component.description)}
-        </p>
-      </div>
-    </button>
-  )
-}
-
-function PrimitiveSidebarItem({
-  primitive,
-  isClickDisabled,
-  onAdd,
-}: {
-  primitive: PrimitiveDefinition
-  isClickDisabled: boolean
-  onAdd: () => void
-}) {
-  const { attributes, listeners, setNodeRef, transform, isDragging } =
-    useDraggable({
-      id: `primitive:${primitive.type}`,
-      data: {
-        kind: 'primitive',
-        type: primitive.type,
-      },
-    })
-  const style = {
-    transform: CSS.Translate.toString(transform),
-  }
-
-  return (
-    <button
-      ref={setNodeRef}
-      type="button"
-      onClick={onAdd}
-      style={style}
-      title={
-        isClickDisabled
-          ? `Drag ${primitive.label} onto a component or select a component first`
-          : `Add ${primitive.label} to selected component`
-      }
-      className={`w-full flex items-center gap-2.5 px-2.5 py-2 rounded-md text-left group transition-colors cursor-grab select-none hover:bg-white/[0.06] active:cursor-grabbing ${
-        isDragging ? 'opacity-70 bg-white/[0.08]' : ''
-      } ${isClickDisabled ? 'opacity-80' : ''}`}
-      {...listeners}
-      {...attributes}
-    >
-      <div className="min-w-0">
-        <p className="text-xs font-medium text-gray-300 group-hover:text-white transition-colors leading-tight">
-          {primitive.label}
-        </p>
-        <p className="text-[10px] text-gray-600 group-hover:text-gray-400 transition-colors leading-tight mt-0.5 truncate">
-          {primitive.description}
-        </p>
-      </div>
-    </button>
-  )
-}
-
-function getComponentDescription(type: string, fallback: string) {
-  if (type === 'Navbar') return 'Global header across all pages'
-  if (type === 'Footer') return 'Global footer across all pages'
-  return fallback
-}
+import { useDraggable } from '@dnd-kit/core'
+import { CSS } from '@dnd-kit/utilities'
+import { useState } from 'react'
+import { components } from '../data/componentRegistry'
+import { primitives } from '../data/primitiveRegistry'
+import { useAppStore } from '../stores/useAppStore'
+import type { ComponentDefinition, PrimitiveDefinition } from '../types'
+import type { CustomComponentDefinition } from '../types'
+import ProjectExplorer from './ProjectExplorer'
+
+export default function ComponentSidebar({
+  view,
+  selectedProjectFile,
+  onSelectProjectFile,
+}: {
+  view: 'files' | 'elements'
+  selectedProjectFile: string | null
+  onSelectProjectFile: (path: string | null) => void
+}) {
+  const {
+    activePageId,
+    selectedComponentId,
+    addComponent,
+    addPrimitive,
+    addPrimitiveToNode,
+    setAppShellComponent,
+    customComponents,
+    addCustomComponent,
+  } = useAppStore()
+  const globalComponents = components.filter((component) =>
+    ['Navbar', 'Footer'].includes(component.type)
+  )
+  const pageComponents = components.filter(
+    (component) => !['Navbar', 'Footer'].includes(component.type)
+  )
+  const primitiveGroups = groupPrimitivesByCategory(primitives)
+  const [openSections, setOpenSections] = useState<Set<string>>(
+    () => new Set(['Global', 'Page Blocks', 'Custom', 'Semantic'])
+  )
+  const toggleSection = (section: string) => {
+    setOpenSections((current) => {
+      const next = new Set(current)
+
+      if (next.has(section)) {
+        next.delete(section)
+      } else {
+        next.add(section)
+      }
+
+      return next
+    })
+  }
+  return (
+    <aside className="flex h-full w-full flex-col overflow-hidden bg-sidebar">
+      <div className="px-3 py-2.5 border-b border-white/[0.06]">
+        <p className="text-[10px] font-semibold uppercase tracking-widest text-gray-500">
+          {view === 'files' ? 'Project files' : 'Elements'}
+        </p>
+      </div>
+
+      <div
+        className={`min-h-0 flex-1 ${
+          view === 'files' ? 'overflow-hidden' : 'overflow-y-auto p-2 space-y-1'
+        }`}
+      >
+        {view === 'files' ? (
+          <ProjectExplorer
+            selectedPath={selectedProjectFile}
+            onSelectFile={onSelectProjectFile}
+          />
+        ) : (
+          <>
+            <AccordionSection
+              title="Global"
+              count={globalComponents.length}
+              isOpen={openSections.has('Global')}
+              onToggle={() => toggleSection('Global')}
+            >
+              {globalComponents.map((component) => {
+                const slot = component.type === 'Footer' ? 'footer' : 'header'
+
+                return (
+                  <ComponentSidebarItem
+                    key={component.type}
+                    component={component}
+                    isDisabled={false}
+                    onAdd={() => setAppShellComponent(slot, component.type)}
+                  />
+                )
+              })}
+            </AccordionSection>
+
+            {customComponents.length > 0 && (
+              <AccordionSection
+                title="Custom"
+                count={customComponents.length}
+                isOpen={openSections.has('Custom')}
+                onToggle={() => toggleSection('Custom')}
+              >
+                {customComponents.map((component) => (
+                  <CustomComponentSidebarItem
+                    key={component.name}
+                    component={component}
+                    onAdd={() => addCustomComponent(activePageId, component.name)}
+                  />
+                ))}
+              </AccordionSection>
+            )}
+
+            <AccordionSection
+              title="Page Blocks"
+              count={pageComponents.length}
+              isOpen={openSections.has('Page Blocks')}
+              onToggle={() => toggleSection('Page Blocks')}
+            >
+              {pageComponents.map((component) => {
+                return (
+                  <ComponentSidebarItem
+                    key={component.type}
+                    component={component}
+                    isDisabled={false}
+                    onAdd={() => addComponent(activePageId, component.type)}
+                  />
+                )
+              })}
+            </AccordionSection>
+
+            {primitiveGroups.map(([category, items]) => (
+              <AccordionSection
+                key={category}
+                title={category}
+                count={items.length}
+                isOpen={openSections.has(category)}
+                onToggle={() => toggleSection(category)}
+              >
+                {items.map((primitive) => (
+                  <PrimitiveSidebarItem
+                    key={primitive.type}
+                    primitive={primitive}
+                    isClickDisabled={selectedComponentId === null}
+                    onAdd={() => {
+                      if (selectedComponentId) {
+                        addPrimitiveToNode(selectedComponentId, primitive.type)
+                        return
+                      }
+
+                      addPrimitive(activePageId, primitive.type)
+                    }}
+                  />
+                ))}
+              </AccordionSection>
+            ))}
+          </>
+        )}
+      </div>
+
+      {view === 'elements' && (
+        <div className="px-3 py-2 border-t border-white/[0.06]">
+          <p className="text-[10px] text-gray-600">Drag or click to add</p>
+        </div>
+      )}
+    </aside>
+  )
+}
+
+function CustomComponentSidebarItem({
+  component,
+  onAdd,
+}: {
+  component: CustomComponentDefinition
+  onAdd: () => void
+}) {
+  const { attributes, listeners, setNodeRef, transform, isDragging } =
+    useDraggable({
+      id: `custom:${component.name}`,
+      data: {
+        kind: 'custom-component',
+        name: component.name,
+      },
+    })
+
+  return (
+    <button
+      ref={setNodeRef}
+      type="button"
+      onClick={onAdd}
+      style={{ transform: CSS.Translate.toString(transform) }}
+      className={`w-full flex cursor-grab select-none items-center gap-2.5 rounded-md px-2.5 py-2 text-left transition-colors hover:bg-white/[0.06] active:cursor-grabbing ${
+        isDragging ? 'bg-white/[0.08] opacity-70' : ''
+      }`}
+      {...listeners}
+      {...attributes}
+    >
+      <span className="w-5 text-center text-base leading-none text-gray-500">
+        {component.icon}
+      </span>
+      <div className="min-w-0">
+        <p className="text-xs font-medium leading-tight text-gray-300">
+          {component.label}
+        </p>
+        <p className="mt-0.5 truncate text-[10px] leading-tight text-gray-600">
+          {component.description}
+        </p>
+      </div>
+    </button>
+  )
+}
+
+function AccordionSection({
+  title,
+  count,
+  isOpen,
+  onToggle,
+  children,
+}: {
+  title: string
+  count: number
+  isOpen: boolean
+  onToggle: () => void
+  children: React.ReactNode
+}) {
+  return (
+    <section className="border-b border-white/[0.04] pb-1 last:border-b-0">
+      <button
+        type="button"
+        onClick={onToggle}
+        className="flex w-full cursor-pointer select-none items-center justify-between rounded px-2 py-1.5 text-left transition-colors hover:bg-white/[0.04]"
+      >
+        <span className="text-[10px] font-medium uppercase tracking-widest text-gray-500">
+          {title}
+        </span>
+        <span className="flex items-center gap-1 text-[10px] text-gray-600">
+          {count}
+          <span
+            className={`inline-block transition-transform ${
+              isOpen ? 'rotate-90' : ''
+            }`}
+            aria-hidden="true"
+          >
+            &gt;
+          </span>
+        </span>
+      </button>
+      {isOpen && <div className="space-y-0.5 pb-1">{children}</div>}
+    </section>
+  )
+}
+
+function groupPrimitivesByCategory(items: PrimitiveDefinition[]) {
+  const groups = new Map<string, PrimitiveDefinition[]>()
+
+  for (const item of items) {
+    groups.set(item.category, [...(groups.get(item.category) ?? []), item])
+  }
+
+  return Array.from(groups.entries())
+}
+
+function ComponentSidebarItem({
+  component,
+  isDisabled,
+  onAdd,
+}: {
+  component: ComponentDefinition
+  isDisabled: boolean
+  onAdd: () => void
+}) {
+  const { attributes, listeners, setNodeRef, transform, isDragging } =
+    useDraggable({
+      id: `sidebar:${component.type}`,
+      disabled: isDisabled,
+      data: {
+        kind: 'sidebar-component',
+        type: component.type,
+      },
+    })
+  const style = {
+    transform: CSS.Translate.toString(transform),
+  }
+
+  return (
+    <button
+      ref={setNodeRef}
+      type="button"
+      disabled={isDisabled}
+      onClick={onAdd}
+      style={style}
+      className={`w-full flex items-center gap-2.5 px-2.5 py-2 rounded-md text-left group transition-colors ${
+        isDisabled
+          ? 'opacity-45 cursor-not-allowed'
+          : 'cursor-grab select-none hover:bg-white/[0.06] active:cursor-grabbing'
+      } ${isDragging ? 'opacity-70 bg-white/[0.08]' : ''}`}
+      {...listeners}
+      {...attributes}
+    >
+      <span className="text-base text-gray-500 group-hover:text-accent transition-colors w-5 text-center leading-none">
+        {component.icon}
+      </span>
+      <div className="min-w-0">
+        <p className="text-xs font-medium text-gray-300 group-hover:text-white transition-colors leading-tight">
+          {component.label}
+        </p>
+        <p className="text-[10px] text-gray-600 group-hover:text-gray-400 transition-colors leading-tight mt-0.5 truncate">
+          {getComponentDescription(component.type, component.description)}
+        </p>
+      </div>
+    </button>
+  )
+}
+
+function PrimitiveSidebarItem({
+  primitive,
+  isClickDisabled,
+  onAdd,
+}: {
+  primitive: PrimitiveDefinition
+  isClickDisabled: boolean
+  onAdd: () => void
+}) {
+  const { attributes, listeners, setNodeRef, transform, isDragging } =
+    useDraggable({
+      id: `primitive:${primitive.type}`,
+      data: {
+        kind: 'primitive',
+        type: primitive.type,
+      },
+    })
+  const style = {
+    transform: CSS.Translate.toString(transform),
+  }
+
+  return (
+    <button
+      ref={setNodeRef}
+      type="button"
+      onClick={onAdd}
+      style={style}
+      title={
+        isClickDisabled
+          ? `Drag ${primitive.label} onto a component or select a component first`
+          : `Add ${primitive.label} to selected component`
+      }
+      className={`w-full flex items-center gap-2.5 px-2.5 py-2 rounded-md text-left group transition-colors cursor-grab select-none hover:bg-white/[0.06] active:cursor-grabbing ${
+        isDragging ? 'opacity-70 bg-white/[0.08]' : ''
+      } ${isClickDisabled ? 'opacity-80' : ''}`}
+      {...listeners}
+      {...attributes}
+    >
+      <div className="min-w-0">
+        <p className="text-xs font-medium text-gray-300 group-hover:text-white transition-colors leading-tight">
+          {primitive.label}
+        </p>
+        <p className="text-[10px] text-gray-600 group-hover:text-gray-400 transition-colors leading-tight mt-0.5 truncate">
+          {primitive.description}
+        </p>
+      </div>
+    </button>
+  )
+}
+
+function getComponentDescription(type: string, fallback: string) {
+  if (type === 'Navbar') return 'Global header across all pages'
+  if (type === 'Footer') return 'Global footer across all pages'
+  return fallback
+}