chore: update component name JSdoc and use search params for garden tabs

Twonarly1 · Twonarly1 · commit 12830c2a3aa0 · 2025-05-29T16:48:39.000-05:00
diff --git a/app/src/components/core/CustomNodes/CustomNodes.tsx b/app/src/components/core/CustomNodes/CustomNodes.tsx
@@ -3,16 +3,23 @@ import { Handle, Position } from "@xyflow/react";
 import { Icons } from "components/core";
 import { Button, Card } from "components/ui";
 
-const BaseNode = ({
-  data,
-  children,
-}: {
-  data: any;
-  children: React.ReactNode;
-}) => <Card className="w-[200px] border-2 shadow-lg">{children}</Card>;
+interface NodeData {
+  label: string;
+  description?: string;
+  icon: keyof typeof Icons;
+  icon_color?: string;
+  image?: string;
+  expandable?: boolean;
+  version?: string;
+  url?: string;
+  cta?: {
+    primary: { label: string; url: string };
+    secondary?: { label: string; url: string };
+  };
+}
 
-const GardenNode = ({ data }: { data: any }) => (
-  <BaseNode data={data}>
+const GardenNode = ({ data }: { data: NodeData }) => (
+  <Card className="w-[200px] border-2 shadow-lg">
     <div className="flex flex-col items-center justify-center gap-2 rounded-md bg-primary p-4 text-center text-primary-foreground">
       <Icons.Sprout className="h-8 w-8" />
       <h2 className="font-semibold text-2xl">{data.label}</h2>
@@ -21,14 +28,14 @@ const GardenNode = ({ data }: { data: any }) => (
     </div>
     <Handle type="target" position={Position.Top} />
     <Handle type="source" position={Position.Bottom} />
-  </BaseNode>
+  </Card>
 );
 
-const CategoryNode = ({ data }: { data: any }) => {
+const CategoryNode = ({ data }: { data: NodeData }) => {
   const Icon = Icons[data.icon];
 
   return (
-    <BaseNode data={data}>
+    <Card className="w-[200px] border-2 shadow-lg">
       <Handle type="target" position={Position.Top} />
       <Handle type="source" position={Position.Bottom} />
       <div className="p-4">
@@ -45,12 +52,12 @@ const CategoryNode = ({ data }: { data: any }) => {
           </p>
         )}
       </div>
-    </BaseNode>
+    </Card>
   );
 };
 
-const ItemNode = ({ data }: { data: any }) => (
-  <BaseNode data={data}>
+const ItemNode = ({ data }: { data: NodeData }) => (
+  <Card className="w-[200px] border-2 shadow-lg">
     <div className="space-y-3">
       <div className="aspect-video w-full overflow-hidden rounded-t-lg">
         <img
@@ -72,16 +79,17 @@ const ItemNode = ({ data }: { data: any }) => (
           variant="default"
           size="sm"
           className="w-full"
-          onClick={() => window.open(data.cta.primary.url, "_blank")}
+          onClick={() => window.open(data.cta?.primary.url, "_blank")}
         >
           <Icons.ExternalLink className="mr-1 h-4 w-4" />
-          {data.cta.primary.label}
+          {data.cta?.primary.label}
         </Button>
-        {data.cta.secondary && (
+
+        {data.cta?.secondary && (
           <Button
             variant="outline"
             size="sm"
-            onClick={() => window.open(data.cta.secondary.url, "_blank")}
+            onClick={() => window.open(data.cta?.secondary?.url, "_blank")}
           >
             <Icons.Git className="h-4 w-4" />
           </Button>
@@ -90,11 +98,11 @@ const ItemNode = ({ data }: { data: any }) => (
     </div>
     <Handle type="target" position={Position.Top} />
     <Handle type="source" position={Position.Bottom} />
-  </BaseNode>
+  </Card>
 );
 
-const GardenRefNode = ({ data }: { data: any }) => (
-  <BaseNode data={data}>
+const GardenRefNode = ({ data }: { data: NodeData }) => (
+  <Card className="w-[200px] border-2 shadow-lg">
     <Handle type="target" position={Position.Top} />
     <Handle type="target" position={Position.Left} />
     <div className="relative flex cursor-pointer flex-col items-center rounded-md border-2 border-primary/50 border-dashed p-4 text-center transition-colors hover:bg-primary-foreground/10">
@@ -127,11 +135,11 @@ const GardenRefNode = ({ data }: { data: any }) => (
         </Button>
       </div>
     </div>
-  </BaseNode>
+  </Card>
 );
 
-const SupergardenNode = ({ data }: { data: any }) => (
-  <BaseNode data={data}>
+const SupergardenNode = ({ data }: { data: NodeData }) => (
+  <Card className="w-[200px] border-2 shadow-lg">
     <Handle type="source" position={Position.Bottom} />
     <div
       className="relative flex cursor-pointer flex-col items-center border-2 border-white/70 border-dashed p-4 text-center transition-transform hover:scale-105"
@@ -164,11 +172,11 @@ const SupergardenNode = ({ data }: { data: any }) => (
         </Button>
       </div>
     </div>
-  </BaseNode>
+  </Card>
 );
 
-const SubgardenNode = ({ data }: { data: any }) => (
-  <BaseNode data={data}>
+const SubgardenNode = ({ data }: { data: NodeData }) => (
+  <Card className="w-[200px] border-2 shadow-lg">
     <Handle type="target" position={Position.Bottom} />
     <div
       className="relative flex cursor-pointer flex-col items-center p-4 text-center transition-transform hover:scale-105"
@@ -207,7 +215,7 @@ const SubgardenNode = ({ data }: { data: any }) => (
         </Button>
       </div>
     </div>
-  </BaseNode>
+  </Card>
 );
 
 export const nodeTypes = {
@@ -217,7 +225,7 @@ export const nodeTypes = {
   garden_ref: GardenRefNode,
   supergarden: SupergardenNode,
   subgarden: SubgardenNode,
-  default: ({ data }: { data: any }) => (
+  default: ({ data }: { data: NodeData }) => (
     <>
       <Handle type="source" position={Position.Top} />
       <Handle type="source" position={Position.Bottom} />
diff --git a/app/src/components/core/Icons/Icons.tsx b/app/src/components/core/Icons/Icons.tsx
@@ -35,9 +35,13 @@ import {
   X,
   RefreshCw,
   Maximize,
+  ArrowLeft,
   type LucideIcon,
 } from "lucide-react";
 
+/**
+ * Application Icons.
+ */
 export const Icons: Record<string, LucideIcon> = {
   Sprout,
   Zap,
@@ -76,4 +80,5 @@ export const Icons: Record<string, LucideIcon> = {
   X,
   RefreshCw,
   Maximize,
+  ArrowLeft,
 };
diff --git a/app/src/components/layout/Footer/Footer.tsx b/app/src/components/layout/Footer/Footer.tsx
@@ -1,7 +1,7 @@
 import Link from "next/link";
 
 /**
- * Layout header.
+ * Layout footer.
  */
 const Footer = () => (
   <footer className="flex w-full shrink-0 flex-col items-center gap-2 border-t px-4 py-6 sm:flex-row md:px-6">
diff --git a/app/src/components/layout/ThemeToggle/ThemeToggle.tsx b/app/src/components/layout/ThemeToggle/ThemeToggle.tsx
@@ -5,6 +5,9 @@ import { useTheme } from "next-themes";
 import { Icons } from "components/core";
 import { Button } from "components/ui";
 
+/**
+ * Layout theme toggle.
+ */
 const ThemeToggle = () => {
   const { theme, setTheme } = useTheme();
 
diff --git a/app/src/components/visualizer/EditorActions/EditorActions.tsx b/app/src/components/visualizer/EditorActions/EditorActions.tsx
@@ -13,6 +13,9 @@ interface Props {
   garden?: GardenTypes;
 }
 
+/**
+ * Editor Actions.
+ */
 const EditorActions = ({
   schemaText,
   setSchemaText,
diff --git a/app/src/components/visualizer/EditorControls/EditorControls.tsx b/app/src/components/visualizer/EditorControls/EditorControls.tsx
@@ -2,6 +2,9 @@ import { Icons } from "components/core";
 import { Button } from "components/ui";
 import useSearchParams from "lib/hooks/useSearchParams";
 
+/**
+ * Editor Controls.
+ */
 const EditorControls = () => {
   const [{ fontSize, editorExpanded }, setSearchParams] = useSearchParams();
 
diff --git a/app/src/components/visualizer/GardenFlow/GardenFlow.tsx b/app/src/components/visualizer/GardenFlow/GardenFlow.tsx
@@ -8,7 +8,9 @@ interface Props {
   onNavigateToGarden?: (gardenName: string) => void;
 }
 
-// Wrap with provider to avoid context issues
+/**
+ * Garden Flow.
+ */
 const GardenFlow = ({ garden, onNavigateToGarden }: Props) => {
   return (
     <ReactFlowProvider>
diff --git a/app/src/components/visualizer/GardenFlowInner/GardenFlowInner.tsx b/app/src/components/visualizer/GardenFlowInner/GardenFlowInner.tsx
@@ -30,6 +30,9 @@ interface Props {
   onNavigateToGarden?: (gardenName: string) => void;
 }
 
+/**
+ * Garden Flow Inner.
+ */
 const GardenFlowInner = ({ garden, onNavigateToGarden }: Props) => {
   const { fitView } = useReactFlow();
   const updateNodeInternals = useUpdateNodeInternals();
diff --git a/app/src/components/visualizer/GardenTabs/GardenTabs.tsx b/app/src/components/visualizer/GardenTabs/GardenTabs.tsx
@@ -4,26 +4,32 @@ import { GardenFlow, SchemaEditor } from "components/visualizer";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "components/ui";
 
 import { Icons } from "components/core";
+import useSearchParams from "lib/hooks/useSearchParams";
 
 import type { GardenTypes } from "generated/garden.types";
 
 interface Props {
   garden: GardenTypes;
   onSchemaChange: (schema: GardenTypes) => void;
-  activeTab: string;
-  onTabChange: (tab: string) => void;
   onNavigateToGarden?: (gardenName: string) => void;
 }
 
-const GardenTabs = ({
-  garden,
-  onSchemaChange,
-  activeTab,
-  onTabChange,
-  onNavigateToGarden,
-}: Props) => {
+/**
+ * Garden Tabs.
+ */
+const GardenTabs = ({ garden, onSchemaChange, onNavigateToGarden }: Props) => {
+  const [{ activeTab }, setSearchParams] = useSearchParams();
+
   return (
-    <Tabs value={activeTab} onValueChange={onTabChange} className="space-y-6">
+    <Tabs
+      value={activeTab}
+      onValueChange={() =>
+        setSearchParams({
+          activeTab: activeTab === "visualize" ? "edit" : "visualize",
+        })
+      }
+      className="space-y-6"
+    >
       <TabsList className="grid w-full max-w-md grid-cols-2">
         <TabsTrigger value="visualize" className="flex items-center gap-2">
           <Icons.BarChart className="h-4 w-4" />
diff --git a/app/src/components/visualizer/SchemaEditor/SchemaEditor.tsx b/app/src/components/visualizer/SchemaEditor/SchemaEditor.tsx
@@ -36,6 +36,9 @@ interface SchemaEditorProps {
 
 const LOCAL_STORAGE_KEY = "garden-schema-editor-content";
 
+/**
+ * Schema Editor.
+ */
 const SchemaEditor = ({ onSchemaChange, garden }: SchemaEditorProps) => {
   // Initialize schema text with current garden or stored value
   const [schemaText, setSchemaText] = useState<string>("");
diff --git a/app/src/components/visualizer/SchemaHelp/SchemaHelp.tsx b/app/src/components/visualizer/SchemaHelp/SchemaHelp.tsx
@@ -1,3 +1,6 @@
+/**
+ * Schema Help.
+ */
 const SchemaHelp = () => (
   <div className="space-y-4">
     <h3 className="font-medium text-lg">Garden Schema Structure</h3>
diff --git a/app/src/components/visualizer/TextEditor/TextEditor.tsx b/app/src/components/visualizer/TextEditor/TextEditor.tsx
@@ -15,6 +15,9 @@ interface Props {
   setError: (error: string | null) => void;
 }
 
+/**
+ * Text Editor.
+ */
 const TextEditor = ({ schemaText, setSchemaText, error, setError }: Props) => {
   const [editorTheme, setEditorTheme] = useState<string>("light");
   const [copied, setCopied] = useState(false);
diff --git a/app/src/components/visualizer/Visualizer/Visualizer.tsx b/app/src/components/visualizer/Visualizer/Visualizer.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { parseAsString, useQueryState } from "nuqs";
 import { useCallback, useEffect, useMemo, useState } from "react";
 
 import { Icons } from "components/core";
@@ -13,6 +12,7 @@ import {
   productsGarden,
   specificationsGarden,
 } from "lib/schema/garden";
+import useSearchParams from "lib/hooks/useSearchParams";
 
 import type { GardenTypes } from "generated/garden.types";
 
@@ -25,17 +25,17 @@ declare global {
 
 const LOCAL_STORAGE_KEY = "garden-schema-editor-content";
 
+/**
+ * Visualizer.
+ */
 const Visualizer = () => {
   const [garden, setGarden] = useState<GardenTypes>(omniEcosystem);
-  const [activeTab, setActiveTab] = useQueryState(
-    "tab",
-    parseAsString.withDefault("visualize"),
-  );
   const [gardenKey, setGardenKey] = useState<number>(0); // Add key to force re-render
   const [navigationHistory, setNavigationHistory] = useState<
     { garden: GardenTypes; timestamp: number }[]
   >([]);
   const [breadcrumbs, setBreadcrumbs] = useState<string[]>([]);
+  const [{ activeTab }, setSearchParams] = useSearchParams();
 
   // load garden from local storage on initial render
   useEffect(() => {
@@ -115,10 +115,12 @@ const Visualizer = () => {
 
       // Switch to visualize tab if not already there
       if (activeTab !== "visualize") {
-        setActiveTab("visualize");
+        setSearchParams({
+          activeTab: "visualize",
+        });
       }
     },
-    [activeTab, setActiveTab, garden, breadcrumbs],
+    [activeTab, setSearchParams, garden, breadcrumbs],
   );
 
   // Handler for direct garden navigation from ReactFlow
@@ -326,8 +328,6 @@ const Visualizer = () => {
         key={gardenKey}
         garden={garden}
         onSchemaChange={setGarden}
-        activeTab={activeTab}
-        onTabChange={setActiveTab}
         onNavigateToGarden={handleNavigateToGarden}
       />
     </div>
diff --git a/app/src/lib/constants/searchParams.ts b/app/src/lib/constants/searchParams.ts
@@ -1,8 +1,9 @@
-import { parseAsBoolean, parseAsInteger } from "nuqs/server";
+import { parseAsBoolean, parseAsInteger, parseAsString } from "nuqs/server";
 
 const searchParams = {
   fontSize: parseAsInteger.withDefault(14),
   editorExpanded: parseAsBoolean.withDefault(false),
+  activeTab: parseAsString.withDefault("visualize"),
 };
 
 export default searchParams;

Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,9 @@ interface Props {`
`13`	`13`	`garden?: GardenTypes;`
`14`	`14`	`}`
`15`	`15`
	`16`	`+/**`
	`17`	`+ * Editor Actions.`
	`18`	`+ */`
`16`	`19`	`const EditorActions = ({`
`17`	`20`	`schemaText,`
`18`	`21`	`setSchemaText,`
Original file line number	Diff line number	Diff line change
`@@ -30,6 +30,9 @@ interface Props {`
`30`	`30`	`onNavigateToGarden?: (gardenName: string) => void;`
`31`	`31`	`}`
`32`	`32`
	`33`	`+/**`
	`34`	`+ * Garden Flow Inner.`
	`35`	`+ */`
`33`	`36`	`const GardenFlowInner = ({ garden, onNavigateToGarden }: Props) => {`
`34`	`37`	`const { fitView } = useReactFlow();`
`35`	`38`	`const updateNodeInternals = useUpdateNodeInternals();`