Add and update components, add template section

apps/example-apps/react/tutorials/components/tooltip/App.tsx

@@ -1,57 +1,45 @@
-import React, { useCallback } from 'react';
-import {
-  ReactFlow,
-  type Node,
-  type Edge,
-  type OnConnect,
-  Position,
-  addEdge,
-  useNodesState,
-  useEdgesState,
-} from '@xyflow/react';
+import React from 'react';
+import { ReactFlow, type Node, Position, useNodesState } from '@xyflow/react';
 
 import '@xyflow/react/dist/style.css';
 
-import { TooltipNode } from './components/tooltip-node';
+import {
+  TooltipNode,
+  TooltipContent,
+  TooltipTrigger,
+} from './components/tooltip-node';
+
+function Tooltip() {
+  return (
+    <TooltipNode>
+      <TooltipContent position={Position.Top}>Hidden Content</TooltipContent>
+      <TooltipTrigger>Hover</TooltipTrigger>
+    </TooltipNode>
+  );
+}
 
 const nodeTypes = {
-  tooltip: TooltipNode,
+  tooltip: Tooltip,
 };
 
 const initialNodes: Node[] = [
   {
     id: '1',
     position: { x: 0, y: 0 },
-    data: {
-      label: 'Hover me',
-      tooltip: {
-        label: 'Boo!',
-        position: Position.Bottom,
-      },
-    },
+    data: {},
     type: 'tooltip',
   },
 ];
 
-const initialEdges: Edge[] = [];
-
 function Flow() {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
-  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-
-  const onConnect: OnConnect = (params) => {
-    setEdges((edges) => addEdge(params, edges));
-  };
 
   return (
     <div className="h-screen w-screen p-8 bg-gray-50 rounded-xl">
       <ReactFlow
         nodes={nodes}
-        edges={edges}
-        onNodesChange={onNodesChange}
-        onEdgesChange={onEdgesChange}
-        onConnect={onConnect}
         nodeTypes={nodeTypes}
+        onNodesChange={onNodesChange}
         fitView
       />
     </div>

apps/example-apps/react/tutorials/components/tooltip/components/tooltip-node.tsx

@@ -1,41 +1,96 @@
-import React, { useState } from 'react';
+import React, { createContext, useContext, useState, useCallback } from 'react';
 import {
-  type Node,
   type NodeProps,
   type NodeToolbarProps,
   NodeToolbar,
-  Handle,
-  Position,
 } from '@xyflow/react';
 import { BaseNode } from './base-node';
 
-export type TooltipNodeType = Node<{
-  label: string;
-  tooltip?: {
-    label: string;
-    position?: NodeToolbarProps['position'];
-  };
-}>;
+/* TOOLTIP CONTEXT ---------------------------------------------------------- */
 
-export function TooltipNode({ data, selected }: NodeProps<TooltipNodeType>) {
-  const [isTooltipVisible, setTooltipVisible] = useState(false);
+const TooltipContext = createContext(false);
+
+/* TOOLTIP NODE ------------------------------------------------------------- */
+
+export interface TooltipNodeProps extends Partial<NodeProps> {
+  children?: React.ReactNode;
+}
+
+/**
+ * A component that wraps a node and provides tooltip visibility context.
+ */
+export const TooltipNode = React.forwardRef<HTMLDivElement, TooltipNodeProps>(
+  ({ selected, children }, ref) => {
+    const [isTooltipVisible, setTooltipVisible] = useState(false);
+
+    const showTooltip = useCallback(() => setTooltipVisible(true), []);
+    const hideTooltip = useCallback(() => setTooltipVisible(false), []);
+
+    return (
+      <TooltipContext.Provider value={isTooltipVisible}>
+        <BaseNode
+          ref={ref}
+          onMouseEnter={showTooltip}
+          onMouseLeave={hideTooltip}
+          onFocus={showTooltip}
+          onBlur={hideTooltip}
+          tabIndex={0}
+        >
+          {children}
+        </BaseNode>
+      </TooltipContext.Provider>
+    );
+  },
+);
+
+TooltipNode.displayName = 'TooltipNode';
+
+/* TOOLTIP CONTENT ---------------------------------------------------------- */
+
+export interface TooltipContentProps extends NodeToolbarProps {}
+
+/**
+ * A component that displays the tooltip content based on visibility context.
+ */
+export const TooltipContent = React.forwardRef<
+  HTMLDivElement,
+  TooltipContentProps
+>(({ position, children }, ref) => {
+  const isTooltipVisible = useContext(TooltipContext);
 
   return (
-    <BaseNode
-      onMouseEnter={() => setTooltipVisible(true)}
-      onMouseLeave={() => setTooltipVisible(false)}
-      selected={selected}
-    >
+    <div ref={ref}>
       <NodeToolbar
-        isVisible={isTooltipVisible || selected}
+        isVisible={isTooltipVisible}
         className="rounded-sm bg-primary p-2 text-primary-foreground"
-        position={data.tooltip?.position}
+        tabIndex={1}
+        position={position}
       >
-        {data.tooltip?.label}
+        {children}
       </NodeToolbar>
-      <div>{data.label}</div>
-      <Handle type="target" position={Position.Top} />
-      <Handle type="source" position={Position.Bottom} />
-    </BaseNode>
+    </div>
   );
-}
+});
+
+TooltipContent.displayName = 'TooltipContent';
+
+/* TOOLTIP TRIGGER ---------------------------------------------------------- */
+
+export interface TooltipTriggerProps
+  extends React.HTMLAttributes<HTMLParagraphElement> {}
+
+/**
+ * A component that triggers the tooltip visibility.
+ */
+export const TooltipTrigger = React.forwardRef<
+  HTMLParagraphElement,
+  TooltipTriggerProps
+>(({ children, ...props }, ref) => {
+  return (
+    <div ref={ref} {...props}>
+      {children}
+    </div>
+  );
+});
+
+TooltipTrigger.displayName = 'TooltipTrigger';

apps/ui-components/app/components/animated-svg-edge/page.tsx

@@ -1,10 +1,12 @@
+"use client";
+
+import AnimatedSvgEdgeApp from "@/registry/components/animated-svg-edge/app-example";
 import DemoWrapper from "@/components/demo-wrapper";
-import Demo from "@/registry/components/animated-svg-edge/demo";
 
-export default function DemoPage() {
+export default function Page() {
   return (
     <DemoWrapper>
-      <Demo />
+      <AnimatedSvgEdgeApp />
     </DemoWrapper>
   );
 }

apps/ui-components/app/components/annotation-node/page.tsx

@@ -1,10 +1,13 @@
+"use client";
+
+import AnnotationNodeApp from "@/registry/components/annotation-node/app-example";
+
 import DemoWrapper from "@/components/demo-wrapper";
-import Demo from "@/registry/components/annotation-node/demo";
 
-export default function DemoPage() {
+export default function Page() {
   return (
     <DemoWrapper>
-      <Demo />
+      <AnnotationNodeApp />
     </DemoWrapper>
   );
 }

apps/ui-components/app/components/base-handle/page.tsx

@@ -1,30 +1,13 @@
 "use client";
 
-import { Background, ReactFlow } from "@xyflow/react";
-import DemoWrapper from "@/components/demo-wrapper";
-import Demo from "@/registry/components/base-handle/demo";
-
-const defaultNodes = [
-  {
-    id: "1",
-    position: { x: 200, y: 200 },
-    data: {},
-    type: "customNode",
-  },
-];
+import BaseHandleApp from "@/registry/components/base-handle/app-example";
 
-const nodeTypes = {
-  customNode: Demo,
-};
+import DemoWrapper from "@/components/demo-wrapper";
 
-export default function DemoPage() {
+export default function Page() {
   return (
     <DemoWrapper>
-      <div className="h-full w-full">
-        <ReactFlow defaultNodes={defaultNodes} nodeTypes={nodeTypes} fitView>
-          <Background />
-        </ReactFlow>
-      </div>
+      <BaseHandleApp />
     </DemoWrapper>
   );
 }

apps/ui-components/app/components/base-node/page.tsx

@@ -1,10 +1,13 @@
+"use client";
+
+import BaseNodeApp from "@/registry/components/base-node/app-example";
+
 import DemoWrapper from "@/components/demo-wrapper";
-import Demo from "@/registry/components/base-node/demo";
 
-export default function DemoPage() {
+export default function Page() {
   return (
     <DemoWrapper>
-      <Demo />
+      <BaseNodeApp />
     </DemoWrapper>
   );
 }

apps/ui-components/app/components/button-edge/page.tsx

@@ -1,10 +1,13 @@
+"use client";
+
+import ButtonEdgeApp from "@/registry/components/button-edge/app-example";
+
 import DemoWrapper from "@/components/demo-wrapper";
-import Demo from "@/registry/components/button-edge/demo";
 
-export default function DemoPage() {
+export default function Page() {
   return (
     <DemoWrapper>
-      <Demo />
+      <ButtonEdgeApp />
     </DemoWrapper>
   );
 }

apps/ui-components/app/components/button-handle/page.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import ButtonHandleApp from "@/registry/components/button-handle/app-example";
+import DemoWrapper from "@/components/demo-wrapper";
+
+export default function Page() {
+  return (
+    <DemoWrapper>
+      <ButtonHandleApp />
+    </DemoWrapper>
+  );
+}

apps/ui-components/app/components/data-edge/page.tsx

@@ -1,10 +1,13 @@
+"use client";
+
+import DataEdgeApp from "@/registry/components/data-edge/app-example";
+
 import DemoWrapper from "@/components/demo-wrapper";
-import Demo from "@/registry/components/data-edge/demo";
 
-export default function DemoPage() {
+export default function Page() {
   return (
     <DemoWrapper>
-      <Demo />
+      <DataEdgeApp />
     </DemoWrapper>
   );
 }

apps/ui-components/app/components/database-schema-node/page.tsx

@@ -1,10 +1,13 @@
+"use client";
+
+import DatabaseSchemaNodeApp from "@/registry/components/database-schema-node/app-example";
+
 import DemoWrapper from "@/components/demo-wrapper";
-import Demo from "@/registry/components/database-schema-node/demo";
 
-export default function DemoPage() {
+export default function Page() {
   return (
     <DemoWrapper>
-      <Demo />
+      <DatabaseSchemaNodeApp />
     </DemoWrapper>
   );
 }

apps/ui-components/app/components/devtools/page.tsx

@@ -1,10 +1,13 @@
+"use client";
+
+import DevtoolsApp from "@/registry/components/devtools/app-example";
+
 import DemoWrapper from "@/components/demo-wrapper";
-import Demo from "@/registry/components/devtools/demo";
 
-export default function DemoPage() {
+export default function Page() {
   return (
     <DemoWrapper>
-      <Demo />
+      <DevtoolsApp />
     </DemoWrapper>
   );
 }

apps/ui-components/app/components/labeled-group-node/page.tsx

@@ -1,10 +1,13 @@
+"use client";
+
+import LabeledGroupNodeApp from "@/registry/components/labeled-group-node/app-example";
+
 import DemoWrapper from "@/components/demo-wrapper";
-import Demo from "@/registry/components/labeled-group-node/demo";
 
-export default function DemoPage() {
+export default function Page() {
   return (
     <DemoWrapper>
-      <Demo />
+      <LabeledGroupNodeApp />
     </DemoWrapper>
   );
 }