refactor: moved visualProgrammingUI into page folder

BREAKING: moved directory visualProgrammingUI and contents into VisProgPage

ref: N25B-114

src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx

@@ -0,0 +1,94 @@
+import { create } from 'zustand';
+import {
+    applyNodeChanges,
+    applyEdgeChanges,
+    addEdge,
+    reconnectEdge, type Edge, type Connection
+} from '@xyflow/react';
+
+import { type FlowState } from './VisProgTypes.tsx';
+
+const initialNodes = [
+    {
+        id: 'start',
+        type: 'start',
+        position: {x: 0, y: 0},
+        data: {label: 'start'}
+    },
+    {
+        id: 'genericPhase',
+        type: 'phase',
+        position: {x: 0, y: 150},
+        data: {label: 'Generic Phase', number: 1},
+    },
+    {
+        id: 'end',
+        type: 'end',
+        position: {x: 0, y: 300},
+        data: {label: 'End'}
+    }
+];
+
+const initialEdges = [
+    {
+        id: 'start-end',
+        source: 'start',
+        target: 'end'
+    }
+];
+
+// this is our useStore hook that we can use in our components to get parts of the store and call actions
+const useFlowStore = create<FlowState>((set, get) => ({
+    nodes: initialNodes,
+    edges: initialEdges,
+    edgeReconnectSuccessful: true,
+    onNodesChange: (changes) => {
+        set({
+            nodes: applyNodeChanges(changes, get().nodes)
+        });
+    },
+    onEdgesChange: (changes) => {
+        set({
+            edges: applyEdgeChanges(changes, get().edges)
+        });
+    },
+    // handles connection of newly created edges
+    onConnect: (connection) => {
+        set({
+            edges: addEdge(connection, get().edges)
+        });
+    },
+    // handles attempted reconnections of a previously disconnected edge
+    onReconnect: (oldEdge: Edge, newConnection: Connection) => {
+        get().edgeReconnectSuccessful = true;
+        set({
+            edges: reconnectEdge(oldEdge, newConnection, get().edges)
+        });
+    },
+    // Handles initiation of reconnection of edges that are manually disconnected from a node
+    onReconnectStart: () => {
+        set({
+           edgeReconnectSuccessful: false
+        });
+    },
+    // Drops the edge from the set of edges, removing it from the flow, if no successful reconnection occurred
+    onReconnectEnd: (_: unknown, edge: { id: string; }) => {
+        if (!get().edgeReconnectSuccessful) {
+            set({
+                edges: get().edges.filter((e) => e.id !== edge.id),
+            });
+        }
+        set({
+            edgeReconnectSuccessful: true
+        });
+    },
+    setNodes: (nodes) => {
+        set({ nodes });
+    },
+    setEdges: (edges) => {
+        set({ edges });
+    },
+}),
+);
+
+export default useFlowStore;