add the react-context state management for the app

adrs/13-autoform.md

@@ -0,0 +1,2 @@
+tested, ran into issues
+https://github.com/vantezzen/autoform/issues/138

apps/gda-scan-definition/app/components/AutoFormTest.tsx

@@ -0,0 +1,23 @@
+import { AutoForm } from "@autoform/mui";
+import { ZodProvider } from "@autoform/zod";
+import { z } from "zod";
+
+const userSchema = z.object({
+  name: z.string(),
+  birthday: z.coerce.date(),
+  email: z.string().email(),
+});
+
+const schemaProvider = new ZodProvider(userSchema);
+
+export function MyForm() {
+  return (
+    <AutoForm
+      schema={schemaProvider}
+      onSubmit={(data) => {
+        console.log(data);
+      }}
+      withSubmit
+    />
+  );
+}

apps/gda-scan-definition/app/components/BIgComponentWithContext.tsx

@@ -0,0 +1,5 @@
+import { Grid } from "@mui/material";
+
+export function BigComponentWithContext() {
+  return <Grid container spacing={2}></Grid>;
+}

apps/gda-scan-definition/app/components/BigMainComponent.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import Editor from "@monaco-editor/react";
+
 import {
   Box,
   Button,
@@ -71,8 +73,18 @@ function CustomTabPanel(props: TabPanelProps) {
 
 export function BigMainComponent() {
   const [items, setItems] = useState<TreeViewBaseItem[]>([]);
-  const [currentlyEditing, setCurrentlyEditing] =
-    useState<TreeViewBaseItem | null>(null);
+
+  const [lastSelectedItem, setLastSelectedItem] = useState<string | null>(null);
+
+  const handleItemSelectionToggle = (
+    event: React.SyntheticEvent,
+    itemId: string,
+    isSelected: boolean
+  ) => {
+    if (isSelected) {
+      setLastSelectedItem(itemId);
+    }
+  };
 
   const fetchItems = async () => {
     try {
@@ -90,10 +102,6 @@ export function BigMainComponent() {
         alert("No items found");
         return;
       }
-      if (items["rejected"]) {
-        alert("Error fetching items");
-        return;
-      }
       console.log(`items are correct ${items.length}`);
       setItems(items);
       // setItems(MUI_X_PRODUCTS);
@@ -103,18 +111,34 @@ export function BigMainComponent() {
     }
   };
 
-  const [lastSelectedItem, setLastSelectedItem] = useState<string | null>(null);
-
-  const handleItemSelectionToggle = (
-    event: React.SyntheticEvent,
-    itemId: string,
-    isSelected: boolean
-  ) => {
-    if (isSelected) {
-      setLastSelectedItem(itemId);
-    }
+  const addFolder = () => {
+    // todo this is a known bug when too many layers
+    const newFile: TreeViewBaseItem = {
+      id: `layer-${items.length + 1}`,
+      label: "new item",
+      children: [],
+    };
+    const newFolder: TreeViewBaseItem = {
+      id: `${items.length + 1}`,
+      label: "new folder",
+      children: [newFile],
+    };
+    setItems([...items, newFolder]);
+  };
+  const addFile = async () => {
+    // setEditMode(true);
+    const newFile: TreeViewBaseItem = {
+      id: `${items.length + 1}`,
+      label: "new item",
+      children: [],
+    };
+    setItems([...items, newFile]);
+
+    await makeFile({
+      name: "testtwo",
+      type: "txt",
+    });
   };
-
   return (
     <Grid container spacing={2}>
       <Grid item xs={4}>
@@ -131,42 +155,8 @@ export function BigMainComponent() {
           >
             Refresh
           </Button>
-          <Button
-            onClick={async () => {
-              // setEditMode(true);
-              const newFile: TreeViewBaseItem = {
-                id: `${items.length + 1}`,
-                label: "new item",
-                children: [],
-              };
-              setItems([...items, newFile]);
-
-              await makeFile({
-                name: "testtwo",
-                type: "txt",
-              });
-            }}
-          >
-            Add file
-          </Button>
-          <Button
-            onClick={() => {
-              // todo this is a known bug when too many layers
-              const newFile: TreeViewBaseItem = {
-                id: `layer-${items.length + 1}`,
-                label: "new item",
-                children: [],
-              };
-              const newFolder: TreeViewBaseItem = {
-                id: `${items.length + 1}`,
-                label: "new folder",
-                children: [newFile],
-              };
-              setItems([...items, newFolder]);
-            }}
-          >
-            Add folder
-          </Button>
+          <Button onClick={addFile}>Add file</Button>
+          <Button onClick={addFolder}>Add folder</Button>
         </ButtonGroup>
         <h3>Items: {items.length}</h3>
         <RichTreeView
@@ -177,45 +167,62 @@ export function BigMainComponent() {
         />
       </Grid>
       <Grid item xs={8}>
-        <Box sx={{ minHeight: "80vh", bgcolor: "background.paper" }}>
-          {lastSelectedItem == null ? (
-            <Typography variant="h6" color="black">
-              Not editing anything now
-            </Typography>
-          ) : (
-            <Box>
-              <Tabs
-                value={items.indexOf(currentlyEditing)}
-                onChange={(_: SyntheticEvent, value: any) => {
-                  console.log("tab changed");
-                  setCurrentlyEditing(value);
-                }}
-                variant="scrollable"
-                scrollButtons="auto"
-                aria-label="scrollable auto tabs example"
-              >
-                {items.map((item, index) => {
-
-                  return (
-                    <Tab key={index} label={item.label} onSelect={ } />
-                  );
-                  // todo here inside add Parsing component depending on the file name
-                })}
-
-              </Tabs>
-              <Box id="editor-box">
-                {
-                  items.map((item, index) => {
-                    return <CustomTabPanel value={items.indexOf(currentlyEditing)} index={index}>
-                      {/* todo here render the buffer */}
-                      {/* todo here render the relevant Form */}
-                    </CustomTabPanel>
-                  })}
-              </Box>
-            </Box>
-          )}
-        </Box>
+        <EditorBox lastSelectedItem={lastSelectedItem} items={items} />
       </Grid>
     </Grid>
   );
 }
+
+interface EditorBoxProps {
+  lastSelectedItem: string | null;
+  items: TreeViewBaseItem[];
+}
+
+function EditorBox({ lastSelectedItem, items }: EditorBoxProps) {
+  if (lastSelectedItem == null) {
+    return (
+      <Box sx={{ minHeight: "80vh", bgcolor: "background.paper" }}>
+        <Typography variant="h6" color="black">
+          Not editing anything now
+        </Typography>
+      </Box>
+    );
+  }
+  return (
+    <Box sx={{ minHeight: "80vh", bgcolor: "background.paper" }}>
+      <Tabs
+        value={0}
+        onChange={(_: SyntheticEvent, value: any) => {
+          console.log("tab changed");
+          // setCurrentlyEditing(value);
+        }}
+        variant="scrollable"
+        scrollButtons="auto"
+        aria-label="scrollable auto tabs example"
+      >
+        {items.map((item, index) => {
+          return <Tab key={index} label={item.label} />;
+          // todo add on select
+          // todo here inside add Parsing component depending on the file name
+        })}
+      </Tabs>
+      <Box id="editor-box">
+        {items.map((item, index) => {
+          return (
+            <CustomTabPanel value={0} index={index}>
+              {/* todo here render the buffer */}
+              {/* todo here render the relevant Form */}
+              <input type="textarea" value={item.content} />
+              <Editor
+                height="90vh"
+                defaultLanguage="javascript"
+                defaultValue="// some comment"
+              />
+              ;
+            </CustomTabPanel>
+          );
+        })}
+      </Box>
+    </Box>
+  );
+}

apps/gda-scan-definition/app/components/Editor.tsx

@@ -0,0 +1,31 @@
+"use client";
+import React from "react";
+import { useIDEState, useIDEDispatch } from "./ideState";
+
+const Editor: React.FC = () => {
+  const { openTabs, activeTab } = useIDEState();
+  const dispatch = useIDEDispatch();
+
+  const activeTabData = openTabs.find((tab) => tab.id === activeTab);
+
+  if (!activeTabData) {
+    return <div className="editor">No file selected</div>;
+  }
+
+  const handleContentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    dispatch({
+      type: "EDIT_TAB_CONTENT",
+      payload: { id: activeTabData.id, content: e.target.value },
+    });
+  };
+
+  return (
+    <textarea
+      value={activeTabData.content}
+      onChange={handleContentChange}
+      className="editor"
+    />
+  );
+};
+
+export default Editor;

apps/gda-scan-definition/app/components/FileExplorer.tsx

@@ -0,0 +1,31 @@
+"use client";
+import React from "react";
+import { useIDEState, useIDEDispatch, FileItem } from "./ideState";
+
+const FileExplorer: React.FC = () => {
+  const { fileSystem, selectedFile } = useIDEState();
+  const dispatch = useIDEDispatch();
+
+  const handleFileClick = (file: FileItem) => {
+    dispatch({ type: "SELECT_FILE", payload: file.id });
+    if (file.type === "file") {
+      dispatch({ type: "OPEN_TAB", payload: file });
+    }
+  };
+
+  return (
+    <div className="file-explorer">
+      {fileSystem.map((file) => (
+        <div
+          key={file.id}
+          className={`file-item ${selectedFile === file.id ? "selected" : ""}`}
+          onClick={() => handleFileClick(file)}
+        >
+          {file.name}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default FileExplorer;

apps/gda-scan-definition/app/components/IDE.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import FileExplorer from "./FileExplorer";
+import Tabs from "./Tabs";
+import Editor from "./Editor";
+import { IDEProvider } from "./ideState";
+import { Box, Button, ButtonGroup, Grid, Typography } from "@mui/material";
+
+const IDE: React.FC = () => {
+  return (
+    <IDEProvider>
+      <div className="ide">
+        {/* Main grid container */}
+        <Grid
+          container
+          direction="column"
+          spacing={2}
+          style={{ height: "100vh" }}
+        >
+          {/* Horizontal bar for potential buttons */}
+          <Grid item>
+            <ButtonGroup
+              sx={{
+                width: "100%",
+                height: "40px",
+                backgroundColor: "#f5f5f5", // Light gray background for the bar
+                borderBottom: "1px solid #ddd", // Thin border to define the bar
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              {/* Buttons or controls can go here */}
+              <Button>Null Button</Button>
+            </ButtonGroup>
+          </Grid>
+
+          {/* Main layout grid: File Explorer, Tabs, and Editor */}
+          <Grid container item spacing={2} flex={1}>
+            {/* File Explorer */}
+            <Grid item xs={3}>
+              <FileExplorer />
+            </Grid>
+
+            {/* Tabs and Editor */}
+            <Grid item xs={9}>
+              <Grid
+                container
+                direction="column"
+                spacing={2}
+                style={{ height: "100%" }}
+              >
+                {/* Tabs */}
+                <Grid item>
+                  <Tabs />
+                </Grid>
+
+                {/* Editor */}
+                <Grid item flex={1}>
+                  <Editor />
+                </Grid>
+              </Grid>
+            </Grid>
+          </Grid>
+        </Grid>
+      </div>
+    </IDEProvider>
+  );
+};
+
+export default IDE;