Merge branch 'add/widgets/theme' into 'main'

widgets are bound to container

See merge request vkuchenik/website-framework!17

client/src/App.jsx

@@ -21,7 +21,7 @@ function App() {
       <GridItem colSpan={1}>
         <Sidebar />
       </GridItem>
-      <GridItem colSpan={1}>
+      <GridItem colSpan={1} width="100%">
         <Canvas />
       </GridItem> 
     </Grid>

client/src/components/layout/Canvas/Widget.jsx

@@ -1,16 +1,21 @@
+import { useSlotRecipe, chakra } from "@chakra-ui/react"
+
 export default function Widget({ title }) {
-    return (
+  const recipe = useSlotRecipe({ key: "widget" });
-      <>
+  const styles = recipe();
-        <div
+
-          className="widget-handle"
+  return (
-          style={{ padding: '4px', cursor: 'move', background: '#ddd' }}
+    <chakra.div css={styles.root}>
-        >
+      <chakra.div css={styles.header}
-          {title}
+        className="widget-handle"
-        </div>
+        // style={{ padding: '4px', cursor: 'move', background: '#ddd' }}
-        <div style={{ padding: '8px' }}>
+      >
-          This is the widget content - drag or resize me!
+        {title}
-        </div>
+      </chakra.div>
-      </>
+      <chakra.div css={styles.canvas}>
-    );
+        This is the widget content - drag or resize me!
-  }
+      </chakra.div>
+    </chakra.div>
+  );
+}
 

client/src/components/layout/Canvas/views/WidgetCanvas.jsx

@@ -3,13 +3,17 @@
 // Content not included, must be populated using custom charts plots and notifications
 
 import { useState } from 'react';
-import GridLayout from 'react-grid-layout';
+import GridLayout, { WidthProvider } from 'react-grid-layout';
 import Widget from '../Widget.jsx';
-import { Box } from '@chakra-ui/react';
+import { useSlotRecipe, chakra } from '@chakra-ui/react';
 
 export default function WidgetCanvas() {
     // Define widgets initial position and size
     // TODO Add dynamic adding/deleting of widgets via options button 
+    const recipe = useSlotRecipe({ key: "widget" });
+    const styles = recipe();
+    const ResponsiveGridLayout = WidthProvider(GridLayout);
+
     const [layout, setLayout] = useState([
         { i: 'myWidget1', x: 0, y: 0, w: 3, h: 3, minH: 3, static: false },
         { i: 'myWidget2', x: 3, y: 0, w: 3, h: 3, minH: 3, static: false },
@@ -22,21 +26,21 @@ export default function WidgetCanvas() {
     };
 
     return (
-        <GridLayout
+        <ResponsiveGridLayout
             className="layout"
             layout={layout}
             cols={12} // Total columns in grid
             rowHeight={30} //Height of a single row in px
-            width={1200} // Total width of the grid
+            isBounded={true} // Total width of the grid
             margin={[10, 10]} // [horizontal, vertical] gap
             onLayoutChange={onLayoutChange}
             draggableHandle=".widget-handle" // Make only the header draggable
         >
             {layout.map((item) => (
-                <div key={item.i} style={{ background: '#f0f0f0', borderRadius: 4 }}>
+                <chakra.div key={item.i} css={styles.root}>
                     <Widget title="VDAP Widget" />
-                </div>
+                </chakra.div>
             ))}
-        </GridLayout>
+        </ResponsiveGridLayout>
     );
 }

client/src/theme.js

@@ -49,6 +49,26 @@ const sidebarRecipe = defineSlotRecipe({
   }
 });
 
+const widgetRecipe = defineSlotRecipe({
+  slots: ["root", "header", "canvas"],
+  base: {
+    root: {
+      bg: "base100",
+      borderRadius: "md",
+      p: "1"
+    },
+    header: {
+      bg: "base100",
+      cursor: "move",
+      borderRadius: "md"
+    },
+    canvas: {
+      bg: "base100",
+      cursor: "default"
+    }
+  }
+});
+
 const config = defineConfig({
   theme: {
     semanticTokens: {
@@ -82,6 +102,7 @@ const config = defineConfig({
     },
     slotRecipes: {
       sidebar: sidebarRecipe,
+      widget: widgetRecipe,
     }
   },
 });