feat(examples): add next

2023-10-10 13:19:37 +02:00
parent d062214536
commit 93a180b19d
14 changed files with 3993 additions and 0 deletions
@@ -0,0 +1,29 @@
+:root {
+  --max-width: 1100px;
+  --font-mono: ui-monospace, Menlo, Monaco;
+
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+body {
+  background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
@@ -0,0 +1,22 @@
+import './globals.css'
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  )
+}
@@ -0,0 +1,3 @@
+.main {
+  display: flex;
+}
@@ -0,0 +1,102 @@
+import { Edge, Node, Position, ReactFlowProvider } from '@xyflow/react';
+
+import styles from './page.module.css';
+import Flow from '../components/Flow';
+
+const nodeSize = {
+  width: 100,
+  height: 40,
+};
+
+const initialNodes: Node[] = [
+  {
+    id: '1',
+    type: 'input',
+    data: { label: 'Node 1' },
+    position: { x: 250, y: 5 },
+    size: nodeSize,
+    handles: [
+      {
+        type: 'source',
+        position: 'bottom' as Position,
+        x: nodeSize.width * 0.5,
+        y: nodeSize.height,
+        width: 1,
+        height: 1,
+      },
+    ],
+  },
+  {
+    id: '2',
+    data: { label: 'Node 2' },
+    position: { x: 100, y: 100 },
+    size: nodeSize,
+    handles: [
+      {
+        type: 'source',
+        position: 'bottom' as Position,
+        x: nodeSize.width * 0.5,
+        y: nodeSize.height,
+        width: 1,
+        height: 1,
+      },
+      {
+        type: 'target',
+        position: 'top' as Position,
+        x: nodeSize.width * 0.5,
+        y: 0,
+        width: 1,
+        height: 1,
+      },
+    ],
+  },
+  {
+    id: '3',
+    data: { label: 'Node 3' },
+    position: { x: 400, y: 100 },
+    size: nodeSize,
+    handles: [
+      {
+        type: 'source',
+        position: 'bottom' as Position,
+        x: nodeSize.width * 0.5,
+        y: nodeSize.height,
+        width: 1,
+        height: 1,
+      },
+      {
+        type: 'target',
+        position: 'top' as Position,
+        x: nodeSize.width * 0.5,
+        y: 0,
+        width: 1,
+        height: 1,
+      },
+    ],
+  },
+];
+
+const initialEdges: Edge[] = [
+  { id: 'e1-2', source: '1', target: '2', animated: true },
+  { id: 'e1-3', source: '1', target: '3', animated: true },
+];
+
+async function fetchData(): Promise<{ nodes: Node[]; edges: Edge[] }> {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({ nodes: initialNodes, edges: initialEdges });
+    }, 1000);
+  });
+}
+
+export default async function App() {
+  const { nodes, edges } = await fetchData();
+
+  return (
+    <main className={styles.main}>
+      <ReactFlowProvider initialNodes={nodes} initialEdges={edges}>
+        <Flow nodes={nodes} edges={edges} />
+      </ReactFlowProvider>
+    </main>
+  );
+}
@@ -0,0 +1,49 @@
+'use client';
+
+import { useCallback, useState } from 'react';
+import {
+  ReactFlow,
+  addEdge,
+  Node,
+  Edge,
+  applyNodeChanges,
+  applyEdgeChanges,
+  OnNodesChange,
+  OnEdgesChange,
+  OnConnect,
+} from '@xyflow/react';
+
+import '@xyflow/react/dist/style.css';
+
+export default function App({ nodes: initNodes, edges: initEdges }: { nodes: Node[]; edges: Edge[] }) {
+  const [nodes, setNodes] = useState<Node[]>(initNodes);
+  const [edges, setEdges] = useState<Edge[]>(initEdges);
+
+  const onNodesChange: OnNodesChange = useCallback(
+    (chs) => {
+      setNodes((nds) => applyNodeChanges(chs, nds));
+    },
+    [setNodes]
+  );
+
+  const onEdgesChange: OnEdgesChange = useCallback(
+    (chs) => {
+      setEdges((eds) => applyEdgeChanges(chs, eds));
+    },
+    [setEdges]
+  );
+
+  const onConnect: OnConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
+
+  return (
+    <div style={{ width: '100vw', height: '100vh' }}>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+      />
+    </div>
+  );
+}