refactor(examples): switch examples from cra to nextjs

examples/nextjs/pages/Validation/index.tsx

@@ -0,0 +1,105 @@
+import React, { FC, useCallback, useState } from 'react';
+import ReactFlow, {
+  addEdge,
+  Handle,
+  Connection,
+  Position,
+  Node,
+  Edge,
+  NodeProps,
+  NodeTypes,
+  useNodesState,
+  useEdgesState,
+  OnConnectStartParams,
+} from '@react-flow/core';
+
+import styles from './validation.module.css';
+
+const initialNodes: Node[] = [
+  { id: '0', type: 'custominput', position: { x: 0, y: 150 }, data: null },
+  { id: 'A', type: 'customnode', position: { x: 250, y: 0 }, data: null },
+  { id: 'B', type: 'customnode', position: { x: 250, y: 150 }, data: null },
+  { id: 'C', type: 'customnode', position: { x: 250, y: 300 }, data: null },
+];
+
+const isValidConnection = (connection: Connection) => connection.target === 'B';
+
+const CustomInput: FC<NodeProps> = () => (
+  <>
+    <div>Only connectable with B</div>
+    <Handle
+      type='source'
+      position={Position.Right}
+      isValidConnection={isValidConnection}
+    />
+  </>
+);
+
+const CustomNode: FC<NodeProps> = ({ id }) => (
+  <>
+    <Handle
+      type='target'
+      position={Position.Left}
+      isValidConnection={isValidConnection}
+    />
+    <div>{id}</div>
+    <Handle
+      type='source'
+      position={Position.Right}
+      isValidConnection={isValidConnection}
+    />
+  </>
+);
+
+const nodeTypes: NodeTypes = {
+  custominput: CustomInput,
+  customnode: CustomNode,
+};
+
+const ValidationFlow = () => {
+  const [value, setValue] = useState(0);
+  const [nodes, , onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+
+  const onConnectStart = useCallback(
+    (event: React.MouseEvent, params: OnConnectStartParams) => {
+      console.log('on connect start', params, event, value);
+      setValue(1);
+    },
+    [value]
+  );
+
+  const onConnect = useCallback(
+    (params: Connection | Edge) => {
+      console.log('on connect', params);
+      setEdges((eds) => addEdge(params, eds));
+    },
+    [setEdges]
+  );
+
+  const onConnectEnd = useCallback(
+    (event: MouseEvent) => {
+      console.log('on connect end', event, value);
+      setValue(0);
+    },
+    [value]
+  );
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onConnect={onConnect}
+      selectNodesOnDrag={false}
+      className={styles.validationflow}
+      nodeTypes={nodeTypes}
+      onConnectStart={onConnectStart}
+      onConnectEnd={onConnectEnd}
+      fitView
+    />
+  );
+};
+
+export default ValidationFlow;

examples/nextjs/pages/Validation/validation.module.css

@@ -0,0 +1,33 @@
+.validationflow {
+}
+
+.validationflow :global .react-flow__node {
+  width: 150px;
+  border-radius: 5px;
+  padding: 10px;
+  color: #555;
+  border: 1px solid #ddd;
+  text-align: center;
+  font-size: 12px;
+}
+
+.validationflow :global .react-flow__node-customnode {
+  background: #e6e6e9;
+  border: 1px solid #ddd;
+}
+
+.validationflow :global .react-flow__node-custominput .react-flow__handle {
+  background: #e6e6e9;
+}
+
+.validationflow :global .react-flow__node-custominput {
+  background: #fff;
+}
+
+.validationflow :global .react-flow__handle-connecting {
+  background: #ff6060;
+}
+
+.validationflow :global .react-flow__handle-valid {
+  background: #55dd99;
+}