add flexlayout

examples/vite-redux-toolkit-react-app/package.json

@@ -37,6 +37,7 @@
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.9",
     "globals": "^15.9.0",
+    "sass-embedded": "^1.79.4",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.0.1",
     "vite": "^5.4.1"

examples/vite-redux-toolkit-react-app/src/App.tsx

@@ -1,10 +1,7 @@
+import HomePage from "./pages/HomePage";
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
-import { Provider } from 'react-redux';
-import HomePage from "./pages/HomePage";
-import { useState } from 'react';
-import { Workspace } from './workspace';
-import MainLayout from './components/MainLayout';
+import MainLayout from "./components/MainLayout.tsx";
 
 const darkTheme = createTheme({
   palette: {
@@ -13,28 +10,12 @@ const darkTheme = createTheme({
 });
 
 function App() {
-  const defaultWorkspace = new Workspace('default-workspace', 'Default Workspace', () => {});
-  const [workspaces] = useState<Record<string, Workspace>>({
-    [defaultWorkspace.id]: defaultWorkspace,
-  });
-  const [selectedWorkspaceId] = useState<string>(defaultWorkspace.id);
-
-  const renderWorkspace = () => {
-    if (!selectedWorkspaceId || !workspaces[selectedWorkspaceId]) return null;
-
-    return (
-      <Provider store={workspaces[selectedWorkspaceId].store}>
-        <MainLayout>
-          <HomePage />
-        </MainLayout>
-      </Provider>
-    );
-  };
-
   return (
     <ThemeProvider theme={darkTheme}>
       <CssBaseline />
-        {renderWorkspace()}
+      <MainLayout>
+        <HomePage/>
+      </MainLayout>
     </ThemeProvider>
   );
 }

examples/vite-redux-toolkit-react-app/src/components/LeftSidebar.tsx

@@ -9,9 +9,6 @@ import ListItem from "@mui/material/ListItem";
 import ListItemButton from "@mui/material/ListItemButton";
 import ListItemText from "@mui/material/ListItemText";
 import Drawer from "@mui/material/Drawer";
-import { useDispatch } from "react-redux";
-import { addWidget } from "@metacell/geppetto-meta-client/common/layout/actions";
-import { MyComponentWidget } from '../widgets';
 import { Theme } from '@mui/material/styles';
 
 const drawerWidth = 240;
@@ -23,13 +20,6 @@ interface LeftSidebarProps {
 }
 
 const LeftSidebar: React.FC<LeftSidebarProps> = ({ handleDrawerClose, theme, open }) => {
-  const dispatch = useDispatch();
-
-  const onCustomWidgetClick = () => {
-    // @ts-ignore
-    dispatch(addWidget(MyComponentWidget));
-  };
-
   return (
     <Drawer
       sx={{
@@ -61,7 +51,7 @@ const LeftSidebar: React.FC<LeftSidebarProps> = ({ handleDrawerClose, theme, ope
       <List>
         {['Add Widget', 'Remove Widget', 'Maximize Widget', 'Minimize Widget', 'Activate Widget', 'Update Widget'].map((text) => (
           <ListItem key={text} disablePadding>
-            <ListItemButton onClick={onCustomWidgetClick}>
+            <ListItemButton>
               <ListItemText primary={text} />
             </ListItemButton>
           </ListItem>

examples/vite-redux-toolkit-react-app/src/components/MainLayout.tsx

@@ -9,8 +9,11 @@ import MenuIcon from '@mui/icons-material/Menu';
 import LeftSidebar from './LeftSidebar';
 
 const drawerWidth = 240;
+interface MainLayoutProps {
+  children: React.ReactNode;
+}
 
-const MainLayout = ({ children }) => {
+const MainLayout = ({ children } : MainLayoutProps ) => {
   const theme = useTheme();
   const [open, setOpen] = React.useState(true);
 

examples/vite-redux-toolkit-react-app/src/components/MyComponent.tsx

@@ -2,4 +2,4 @@ const MyComponent = ({ name, color }: {name: string, color: string}) => {
   return <h1 style={{ width: "100%", backgroundColor: color }}>{ name }</h1>;
 };
 
-export default MyComponent
+export default MyComponent;

examples/vite-redux-toolkit-react-app/src/layout/componentsMap.tsx

@@ -5,4 +5,4 @@ const componentMap = {
   MyComponent
 }
 
-export default componentMap;
+export default componentMap

examples/vite-redux-toolkit-react-app/src/layout/defaultLayout.ts → examples/vite-redux-toolkit-react-app/src/layout/defaultLayout.js

@@ -1,4 +1,3 @@
-
 export default {
   global: {
     sideBorders: 8,
@@ -52,4 +51,4 @@ export default {
 
     ]
   }
-};
+};

examples/vite-redux-toolkit-react-app/src/main.tsx

@@ -2,9 +2,13 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'
+import store from './redux/store'
+import {Provider} from "react-redux";
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <Provider store={store}>
+     <App />
+    </Provider>
   </StrictMode>,
 )

examples/vite-redux-toolkit-react-app/src/pages/HomePage.tsx

@@ -1,9 +1,39 @@
-import {Box, CircularProgress} from "@mui/material";
-import {useEffect, useState} from "react";
+import type React from 'react';
+import { useEffect, useState } from 'react';
+import { useDispatch, useStore, useSelector } from 'react-redux';
+import {
+  Box,
+  Button,
+  CircularProgress,
+  IconButton,
+  Stack,
+  TextField,
+  Tooltip,
+  InputLabel,
+  MenuItem,
+  FormControl
+} from "@mui/material"
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+import VisibilityOnIcon from '@mui/icons-material/Visibility';
+import Select, { type SelectChangeEvent } from '@mui/material/Select';
 import { getLayoutManagerInstance } from "@metacell/geppetto-meta-client/common/layout/LayoutManager";
+import { type Widget, WidgetStatus } from "@metacell/geppetto-meta-client/common/layout/model";
+import '@metacell/geppetto-meta-ui/flex-layout/style/dark.scss'
+
+import { componentWidget } from "../widgets";
+import {addWidget, updateWidget} from "../redux/widgetsReducer.ts";
+import {RootState} from "../redux/store.ts";
+
 const HomePage = () => {
+  const store = useStore();
+  const dispatch = useDispatch();
+  const widgets = useSelector((state: RootState) => state.widgets);
+  // eslint-disable-next-line  @typescript-eslint/no-explicit-any
   const [LayoutComponent, setLayoutComponent] = useState<any | undefined>(undefined);
-
+  const [panel, setPanel] = useState("topLeft");
+  const [name, setName] = useState("Component 1");
+  const [color, setColor] = useState("red");
+
   useEffect(() => {
     if (LayoutComponent === undefined) {
       const myManager = getLayoutManagerInstance();
@@ -12,17 +42,84 @@ const HomePage = () => {
         setLayoutComponent(myManager.getComponent() as React.ComponentType<any>);
       }
     }
-  }, [LayoutComponent])
+  }, [store, LayoutComponent, widgets])
+
+  const addComponent = () => {
+    dispatch(addWidget(componentWidget(name, color, panel)));
+  };
+
+
+  const activateWidget = (widget: Widget) => {
+    const updatedWidget = { ...widget };
+    updatedWidget.status = WidgetStatus.ACTIVE;
+    updatedWidget.panelName = panel;
+    dispatch(updateWidget(updatedWidget));
+  };
 
 
   return (
-    <Box p={2} sx={{
-      display: 'flex',
-      position: 'relative',
-      width: '100%',
-      height: '90vh',
-    }}>
-      {LayoutComponent === undefined ? <CircularProgress/> : <LayoutComponent/>}
+    <Box>
+      <Stack direction="row" spacing={2} sx={{
+        width: '100%',
+        display: 'flex',
+        padding: 2
+      }}>
+        <TextField id="outlined-basic" label="Name" variant="outlined" value={name} onChange={(event) =>
+          setName(event.target.value as string)
+        }/>
+        <FormControl>
+          <InputLabel id="name">Panel</InputLabel>
+          <Select
+            labelId="panel"
+            value={panel}
+            label="Panel"
+            onChange={(event: SelectChangeEvent) =>
+              setPanel(event.target.value as string)
+            }
+          >
+            <MenuItem value={"topLeft"}>Top Left</MenuItem>
+            <MenuItem value={"topRight"}>Top Right</MenuItem>
+            <MenuItem value={"bottom"}>Bottom</MenuItem>
+          </Select>
+        </FormControl>
+        <FormControl>
+          <InputLabel id="name">Color</InputLabel>
+          <Select
+            labelId="color"
+            value={color}
+            label="Color"
+            onChange={(event: SelectChangeEvent) =>
+              setColor(event.target.value as string)
+            }
+          >
+            <MenuItem value={"red"}>Red</MenuItem>
+            <MenuItem value={"green"}>Green</MenuItem>
+            <MenuItem value={"blue"}>Blue</MenuItem>
+            <MenuItem value={"orange"}>Orange</MenuItem>
+          </Select>
+        </FormControl>
+        <Button variant="contained" onClick={addComponent}>
+          Add Component
+        </Button>
+
+
+        {Object.values(widgets).map((widget: Widget, index: number) => (
+          <Tooltip key={index} title={widget.name}>
+            <IconButton onClick={() => activateWidget(widget)} disabled={widget.status === WidgetStatus.ACTIVE}>
+              {widget.status === WidgetStatus.ACTIVE ? <VisibilityOffIcon/> : <VisibilityOnIcon/>}
+            </IconButton>
+          </Tooltip>
+        ))}
+
+      </Stack>
+      <Box p={2} sx={{
+        display: 'flex',
+        position: 'relative',
+        width: '100%',
+        height: '90vh',
+      }}>
+        {LayoutComponent === undefined ? <CircularProgress/> : <LayoutComponent/>}
+      </Box>
     </Box>
   );
 }