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

@@ -1,6 +1,8 @@
 // This program has been developed by students from the bachelor Computer Science at Utrecht
 // University within the Software Project course.
 // © Copyright Utrecht University (Department of Information and Computing Sciences)
+import { useEffect } from "react";
+import type { EditorWarning } from "../components/EditorWarnings.tsx";
 import {
   type NodeProps,
   Position,
@@ -39,7 +41,7 @@ export type NormNode = Node<NormNodeData>
  */
 export default function NormNode(props: NodeProps<NormNode>) {
   const data = props.data;
-  const {updateNodeData} = useFlowStore();
+  const {updateNodeData, registerWarning, unregisterWarning} = useFlowStore();
 
   const text_input_id = `norm_${props.id}_text_input`;
   const checkbox_id = `goal_${props.id}_checkbox`;
@@ -51,6 +53,22 @@ export default function NormNode(props: NodeProps<NormNode>) {
   const setCritical = (value: boolean) => {
     updateNodeData(props.id, {...data, critical: value});
   }
+  useEffect(() => {
+    const normText = data.norm || "";
+    
+    const startsWithNumberWarning: EditorWarning = {
+      scope: { id: props.id },
+      type: 'ELEMENT_STARTS_WITH_NUMBER',
+      severity: 'ERROR',
+      description: "Norms are not allowed to start with a number."
+    };
+
+    if (/^\d/.test(normText)) {
+      registerWarning(startsWithNumberWarning);
+    } else {
+      unregisterWarning(props.id, 'ELEMENT_STARTS_WITH_NUMBER');
+    }
+  }, [data.norm, props.id, registerWarning, unregisterWarning]);
 
   return <>
     <Toolbar nodeId={props.id} allowDelete={true}/>
@@ -64,7 +82,10 @@ export default function NormNode(props: NodeProps<NormNode>) {
           placeholder={"Pepper should ..."}
         />
       </div>
-      <div className={"flex-row gap-md align-center"}>
+      {/*There is no backend implementation yet of how critical norms would
+      be treated differently than normal norms. The commented code below shows
+      how you could add the UI side, if you wish to implement */}
+      {/* <div className={"flex-row gap-md align-center"}>
         <label htmlFor={checkbox_id}>Critical:</label>
         <input
           id={checkbox_id}
@@ -72,7 +93,7 @@ export default function NormNode(props: NodeProps<NormNode>) {
           checked={data.critical || false}
           onChange={(e) => setCritical(e.target.checked)}
         />
-      </div>
+      </div> */}
 
 
       {data.condition && (<div className={"flex-row gap-md align-center"} data-testid="norm-condition-information">