Create 'getting started with rf components' guide & expand our components offering.

apps/example-apps/package.json

@@ -32,6 +32,7 @@
     "@threlte/core": "^7.3.1",
     "@xyflow/react": "^12.3.2",
     "@xyflow/svelte": "^0.1.21",
+    "clsx": "^2.1.1",
     "d3-drag": "^3.0.0",
     "d3-force": "^3.0.0",
     "d3-hierarchy": "^3.1.2",
@@ -49,6 +50,7 @@
     "styled-components": "^6.1.13",
     "svelte": "^4.2.19",
     "svelte-feather-icons": "^4.1.0",
+    "tailwind-merge": "^2.5.4",
     "twind": "^0.16.19",
     "webcola": "^3.4.0",
     "zustand": "5.0.0"

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

@@ -0,0 +1,62 @@
+import React, { useCallback } from 'react';
+import {
+  ReactFlow,
+  type Node,
+  type Edge,
+  type OnConnect,
+  Position,
+  addEdge,
+  useNodesState,
+  useEdgesState,
+} from '@xyflow/react';
+
+import '@xyflow/react/dist/style.css';
+
+import { TooltipNode } from './components/tooltip-node';
+
+const nodeTypes = {
+  tooltip: TooltipNode,
+};
+
+const initialNodes: Node[] = [
+  {
+    id: '1',
+    position: { x: 0, y: 0 },
+    data: {
+      label: 'Hover me',
+      tooltip: {
+        label: 'Boo!',
+        position: Position.Bottom,
+      },
+    },
+    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}
+        fitView
+      />
+    </div>
+  );
+}
+export function App() {
+  return <Flow />;
+}

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { cn } from '../lib/utils';
+
+export const BaseNode = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & { selected?: boolean }
+>(({ className, selected, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'rounded-md border bg-card p-5 text-card-foreground font-mono font-bold',
+      className,
+      selected ? 'border-muted-foreground shadow-lg' : '',
+      'hover:ring-1',
+    )}
+    {...props}
+  />
+));
+BaseNode.displayName = 'BaseNode';

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

@@ -0,0 +1,41 @@
+import React, { useState } 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'];
+  };
+}>;
+
+export function TooltipNode({ data, selected }: NodeProps<TooltipNodeType>) {
+  const [isTooltipVisible, setTooltipVisible] = useState(false);
+
+  return (
+    <BaseNode
+      onMouseEnter={() => setTooltipVisible(true)}
+      onMouseLeave={() => setTooltipVisible(false)}
+      selected={selected}
+    >
+      <NodeToolbar
+        isVisible={isTooltipVisible || selected}
+        className="rounded-sm bg-primary p-2 text-primary-foreground"
+        position={data.tooltip?.position}
+      >
+        {data.tooltip?.label}
+      </NodeToolbar>
+      <div>{data.label}</div>
+      <Handle type="target" position={Position.Top} />
+      <Handle type="source" position={Position.Bottom} />
+    </BaseNode>
+  );
+}

apps/example-apps/react/tutorials/components/tooltip/dependencies.json

@@ -0,0 +1 @@
+["@xyflow/react", "react-dom", "react", "tailwindcss", "clsx", "tailwind-merge"]

apps/example-apps/react/tutorials/components/tooltip/index.css

@@ -0,0 +1,64 @@
+html,
+body {
+  margin: 0;
+  font-family: sans-serif;
+}
+
+#app {
+  width: 100vw;
+  height: 100vh;
+}
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 0 0% 3.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 3.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 3.9%;
+  --primary: 0 0% 9%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 0 0% 96.1%;
+  --secondary-foreground: 0 0% 9%;
+  --muted: 0 0% 96.1%;
+  --muted-foreground: 0 0% 45.1%;
+  --accent: 0 0% 96.1%;
+  --accent-foreground: 0 0% 9%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 0 0% 89.8%;
+  --input: 0 0% 89.8%;
+  --ring: 0 0% 3.9%;
+  --chart-1: 12 76% 61%;
+  --chart-2: 173 58% 39%;
+  --chart-3: 197 37% 24%;
+  --chart-4: 43 74% 66%;
+  --chart-5: 27 87% 67%;
+  --radius: 0.5rem;
+}
+.dark {
+  --background: 0 0% 3.9%;
+  --foreground: 0 0% 98%;
+  --card: 0 0% 3.9%;
+  --card-foreground: 0 0% 98%;
+  --popover: 0 0% 3.9%;
+  --popover-foreground: 0 0% 98%;
+  --primary: 0 0% 98%;
+  --primary-foreground: 0 0% 9%;
+  --secondary: 0 0% 14.9%;
+  --secondary-foreground: 0 0% 98%;
+  --muted: 0 0% 14.9%;
+  --muted-foreground: 0 0% 63.9%;
+  --accent: 0 0% 14.9%;
+  --accent-foreground: 0 0% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 0 0% 14.9%;
+  --input: 0 0% 14.9%;
+  --ring: 0 0% 83.1%;
+  --chart-1: 220 70% 50%;
+  --chart-2: 160 60% 45%;
+  --chart-3: 30 80% 55%;
+  --chart-4: 280 65% 60%;
+  --chart-5: 340 75% 55%;
+}

apps/example-apps/react/tutorials/components/tooltip/index.html

@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Flow Example</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      /** @type {import('tailwindcss').Config} */
+      tailwind.config = {
+        content: ['./index.html', './src/**/*.{ts,tsx,js,jsx}'],
+        theme: {
+          extend: {
+            borderRadius: {
+              lg: 'var(--radius)',
+              md: 'calc(var(--radius) - 2px)',
+              sm: 'calc(var(--radius) - 4px)',
+            },
+            colors: {
+              background: 'hsl(var(--background))',
+              foreground: 'hsl(var(--foreground))',
+              card: {
+                DEFAULT: 'hsl(var(--card))',
+                foreground: 'hsl(var(--card-foreground))',
+              },
+              popover: {
+                DEFAULT: 'hsl(var(--popover))',
+                foreground: 'hsl(var(--popover-foreground))',
+              },
+              primary: {
+                DEFAULT: 'hsl(var(--primary))',
+                foreground: 'hsl(var(--primary-foreground))',
+              },
+              secondary: {
+                DEFAULT: 'hsl(var(--secondary))',
+                foreground: 'hsl(var(--secondary-foreground))',
+              },
+              muted: {
+                DEFAULT: 'hsl(var(--muted))',
+                foreground: 'hsl(var(--muted-foreground))',
+              },
+              accent: {
+                DEFAULT: 'hsl(var(--accent))',
+                foreground: 'hsl(var(--accent-foreground))',
+              },
+              destructive: {
+                DEFAULT: 'hsl(var(--destructive))',
+                foreground: 'hsl(var(--destructive-foreground))',
+              },
+              border: 'hsl(var(--border))',
+              input: 'hsl(var(--input))',
+              ring: 'hsl(var(--ring))',
+              chart: {
+                1: 'hsl(var(--chart-1))',
+                2: 'hsl(var(--chart-2))',
+                3: 'hsl(var(--chart-3))',
+                4: 'hsl(var(--chart-4))',
+                5: 'hsl(var(--chart-5))',
+              },
+            },
+          },
+        },
+      };
+    </script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./index.tsx"></script>
+  </body>
+</html>

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

@@ -0,0 +1,9 @@
+import { createRoot } from 'react-dom/client';
+import { App } from './App';
+
+import './index.css';
+
+const container = document.querySelector('#app');
+const root = createRoot(container);
+
+root.render(<App />);

apps/example-apps/react/tutorials/components/tooltip/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

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

@@ -0,0 +1,10 @@
+import DemoWrapper from "@/components/demo-wrapper";
+import Demo from "@/registry/components/node-header/demo";
+
+export default function DemoPage() {
+  return (
+    <DemoWrapper>
+      <Demo />
+    </DemoWrapper>
+  );
+}