refactor: Initial working framework of node encapsulation works- polymorphic implementation of nodes in creating and connecting calls correct functions

ref: N25B-294

src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx

@@ -0,0 +1,86 @@
+import {
+  Handle,
+  type NodeProps,
+  Position,
+  type Connection,
+  type Edge,
+  useReactFlow,
+  type Node,
+} from '@xyflow/react';
+import { Toolbar } from './NodeDefinitions';
+import styles from '../../VisProg.module.css';
+import { NodeDefaults, NodeReduces } from '../NodeRegistry';
+import type { FlowState } from '../VisProgTypes';
+
+/**
+ * The default data dot a Norm node
+ * @param label: the label of this Norm
+ * @param droppable: whether this node is droppable from the drop bar (initialized as true)
+ * @param children: ID's of children of this node
+ */
+export type NormNodeData = {
+  label: string;
+  droppable: boolean;
+  normList: string[];
+  hasReduce: boolean;
+};
+
+/**
+ * Default data for this node
+ */
+export const NormNodeDefaults: NormNodeData = {
+  label: "Norm Node",
+  droppable: true,
+  normList: [],
+  hasReduce: true,
+};
+
+export type NormNode = Node<NormNodeData>
+
+/**
+ * 
+ * @param connection 
+ * @returns 
+ */
+export function NormNodeCanConnect(connection: Connection | Edge): boolean {
+  return true;
+}
+
+/**
+ * Defines how a Norm node should be rendered
+ * @param props NodeProps, like id, label, children
+ * @returns React.JSX.Element
+ */
+export default function NormNode(props: NodeProps<Node>) {
+  const reactFlow = useReactFlow();
+  const label_input_id = `Norm_${props.id}_label_input`;
+  const data = props.data as NormNodeData;
+  return (
+    <>
+      <Toolbar nodeId={props.id} allowDelete={true}/>
+      <div className={`${styles.defaultNode} ${styles.nodeNorm}`}>
+        <div className={"flex-row gap-sm"}>
+          <label htmlFor={label_input_id}></label>
+          {props.data.label as string}
+        </div>
+        {data.normList.map((norm) => (<div>{norm}</div>))}
+        <Handle type="target" position={Position.Right} id="phase"/>
+      </div>
+    </>
+  );
+}
+
+/**
+ * Reduces each Norm, including its children down into its relevant data.
+ * @param props: The Node Properties of this node.
+ */
+export function NormReduce(node: Node, nodes: Node[]) {
+  const data = node.data as NormNodeData;
+    return {
+      label: data.label,
+      list: data.normList,
+    }
+}
+
+export function NormConnects(thisNode: Node, otherNode: Node, isThisSource: boolean) {
+}