text-input-node-demo

1"use client";
2 
3import "@xyflow/react/dist/style.css";
4 
5import {
6	addEdge,
7	applyEdgeChanges,
8	applyNodeChanges,
9	Background,
10	type Connection,
11	type EdgeChange,
12	type Node,
13	type NodeChange,
14	type NodeProps,
15	type NodeTypes,
16	ReactFlow,
17	ReactFlowProvider,
18} from "@xyflow/react";
19 
20import { useCallback, useState } from "react";
21import { TextInputNode } from "@/registry/ui/flow/text-input-node";
22 
23const TextInputNodeController = ({ id, data, ...props }: NodeProps<Node>) => {
24	const [value, setValue] = useState("Hello World!");
25 
26	return (
27		<TextInputNode
28			id={id}
29			data={{
30				status: "idle",
31				config: { value },
32			}}
33			{...props}
34			type="text-input"
35			onTextChange={(value) => setValue(value)}
36			onDeleteNode={() => {}}
37		/>
38	);
39};
40 
41const nodeTypes: NodeTypes = {
42	"text-input": TextInputNodeController,
43};
44 
45const initialNodes = [
46	{
47		id: "node-1",
48		type: "text-input",
49		position: { x: 0, y: -50 },
50		data: {},
51	},
52];
53 
54export default function ResizableNodeDemo() {
55	const [nodes, setNodes] = useState<Node[]>(initialNodes);
56	const [edges, setEdges] = useState([]);
57 
58	// Add default viewport configuration
59	const defaultViewport = { x: 100, y: 120, zoom: 1.2 };
60 
61	const onNodesChange = useCallback(
62		(changes: NodeChange<Node>[]) =>
63			setNodes((nds) => applyNodeChanges(changes, nds)),
64		[],
65	);
66	const onEdgesChange = useCallback(
67		(changes: EdgeChange<never>[]) =>
68			setEdges((eds) => applyEdgeChanges(changes, eds)),
69		[],
70	);
71	const onConnect = useCallback(
72		(connection: Connection) => setEdges((eds) => addEdge(connection, eds)),
73		[],
74	);
75	return (
76		<div className="w-full h-full">
77			<ReactFlowProvider>
78				<ReactFlow
79					nodes={nodes}
80					edges={edges}
81					onNodesChange={onNodesChange}
82					onEdgesChange={onEdgesChange}
83					onConnect={onConnect}
84					nodeTypes={nodeTypes}
85					defaultViewport={defaultViewport}
86					/* fitView */
87				>
88					<Background />
89				</ReactFlow>
90			</ReactFlowProvider>
91		</div>
92	);
93}