Canvas: build application infrastructure with drag and drop
Change-Id: I5cfd12e67794f3376c5c025af29470d52d77cf16
diff --git a/apps/canvas/src/components/node-github.tsx b/apps/canvas/src/components/node-github.tsx
new file mode 100644
index 0000000..13b257b
--- /dev/null
+++ b/apps/canvas/src/components/node-github.tsx
@@ -0,0 +1,79 @@
+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}>
+ <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>
+ </>);
+}
\ No newline at end of file