apps/canvas/front/src/components/node-github.tsx

import { NodeRect } from './node-rect';
import { GithubNode, nodeIsConnectable, nodeLabel, useStateStore } from '@/lib/state';
import { useEffect, useMemo } from 'react';
import { z } from "zod";
import { DeepPartial, EventType, useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { Form, FormControl, FormField, FormItem, FormMessage } from './ui/form';
import { Input } from './ui/input';
import { Handle, Position } from "@xyflow/react";

export function NodeGithub(node: GithubNode) {
  const { id, selected } = node;
  const isConnectable = useMemo(() => nodeIsConnectable(node, "repository"), [node]);
  return (
    <NodeRect id={id} selected={selected} type={node.type} state={node.data.state}>
      <div style={{ padding: '10px 20px' }}>
        {nodeLabel(node)}
        <Handle
          id="repository"
          type={"source"}
          position={Position.Right}
          isConnectableStart={isConnectable}
          isConnectableEnd={isConnectable}
          isConnectable={isConnectable}
         />
      </div>
    </NodeRect>
  );
}

const schema = z.object({
  address: z.string().min(1),
});

export function NodeGithubDetails(node: GithubNode) {
  const { id, data } = node;
  const store = useStateStore();
  const form = useForm<z.infer<typeof schema>>({
    resolver: zodResolver(schema),
    mode: "onChange",
    defaultValues: {
      address: data.address,
    }
  });
  useEffect(() => {
    const sub = form.watch((value: DeepPartial<z.infer<typeof schema>>, { name, type }: { name?: keyof z.infer<typeof schema> | undefined, type?: EventType | undefined }) => {
      if (type !== "change") {
        return;
      }
      switch (name) {
        case "address":
          store.updateNodeData<"github">(id, {
            address: value.address,
          });
          break;
      }
    });
    return () => sub.unsubscribe();
  }, [form, store]);
  return (
    <>
      <Form {...form}>
        <form className="space-y-2">
          <FormField 
            control={form.control}
            name="address"
            render={({ field }) => (
              <FormItem>
                <FormControl>
                  <Input placeholder="address" className="border border-black" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
        </form>
      </Form>
    </>);
}