feat(ui): new WorkflowElements using antd

ui/src/components/workflow/WorkflowElements.tsx

@@ -0,0 +1,41 @@
+import { useMemo } from "react";
+
+import NodeRender from "@/components/workflow/NodeRender";
+import WorkflowProvider from "@/components/workflow/WorkflowProvider";
+import EndNode from "@/components/workflow/node/EndNode";
+import { type WorkflowNode } from "@/domain/workflow";
+import { useZustandShallowSelector } from "@/hooks";
+import { useWorkflowStore } from "@/stores/workflow";
+
+export type WorkflowElementsProps = {
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+const WorkflowElements = ({ className, style }: WorkflowElementsProps) => {
+  const { workflow } = useWorkflowStore(useZustandShallowSelector(["workflow"]));
+
+  const elements = useMemo(() => {
+    const nodes: JSX.Element[] = [];
+
+    let current = workflow.draft as WorkflowNode;
+    while (current) {
+      nodes.push(<NodeRender node={current} key={current.id} />);
+      current = current.next as WorkflowNode;
+    }
+
+    nodes.push(<EndNode key="workflow-end" />);
+
+    return nodes;
+  }, [workflow]);
+
+  return (
+    <div className={className} style={style}>
+      <div className="flex flex-col items-center overflow-auto">
+        <WorkflowProvider>{elements}</WorkflowProvider>
+      </div>
+    </div>
+  );
+};
+
+export default WorkflowElements;