@wger-project/react-components 25.11.22 → 25.12.5

package/package.json

@@ -11,7 +11,7 @@
   "exports": {
     ".": "./build/index.js"
   },
-  "version": "25.11.22",
+  "version": "25.12.5",
   "repository": "https://github.com/wger-project/react",
   "type": "module",
   "publishConfig": {
@@ -39,6 +39,7 @@
     "luxon": "^3.7.2",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-grid-layout": "^1.5.2",
     "react-i18next": "^16.3.3",
     "react-is": "^19.2.0",
     "react-responsive": "^10.0.1",
@@ -64,6 +65,7 @@
     "@types/node": "^22.18.9",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
+    "@types/react-grid-layout": "^1.3.5",
     "@types/react-is": "^19.2.0",
     "@types/slug": "^5.0.9",
     "@typescript-eslint/eslint-plugin": "^8.47.0",
@@ -81,7 +83,8 @@
     "typescript-eslint": "^8.46.0",
     "vite": "^7.2.2",
     "vite-plugin-eslint": "^1.8.1",
-    "vitest": "^3.2.4"
+    "vitest": "^3.2.4",
+    "webpack-bundle-analyzer": "^4.10.2"
   },
   "scripts": {
     "start": "vite",

package/src/components/Dashboard/ConfigurableDashboard.tsx

@@ -0,0 +1,228 @@
+import { Box, Button, IconButton, Tooltip } from "@mui/material";
+import DashboardCustomizeIcon from "@mui/icons-material/DashboardCustomize";
+import RestartAltIcon from "@mui/icons-material/RestartAlt";
+import DoneIcon from '@mui/icons-material/Done';
+import React, { useState, useCallback, useMemo } from "react";
+import { Responsive, WidthProvider, Layout, Layouts } from "react-grid-layout";
+import "react-grid-layout/css/styles.css";
+import "react-resizable/css/styles.css";
+import { NutritionCard } from "components/Dashboard/NutritionCard";
+import { RoutineCard } from "components/Dashboard/RoutineCard";
+import { WeightCard } from "components/Dashboard/WeightCard";
+import { useTranslation } from "react-i18next";
+
+const ResponsiveGridLayout = WidthProvider(Responsive);
+
+// Local storage key for persisting layouts
+const LAYOUT_STORAGE_KEY = "dashboard-layout";
+
+// Define widget types for extensibility
+export type WidgetType = "routine" | "nutrition" | "weight";
+
+export interface WidgetConfig {
+    id: string;
+    type: WidgetType;
+    component: React.ComponentType;
+    defaultLayout: {
+        w: number;
+        h: number;
+        x: number;
+        y: number;
+        minW?: number;
+        minH?: number;
+    };
+}
+
+// Widget registry - easy to add new widgets in the future
+export const AVAILABLE_WIDGETS: WidgetConfig[] = [
+    {
+        id: "routine",
+        type: "routine",
+        component: RoutineCard,
+        defaultLayout: { w: 4, h: 5, x: 0, y: 0, minW: 3, minH: 2 },
+    },
+    {
+        id: "nutrition",
+        type: "nutrition",
+        component: NutritionCard,
+        defaultLayout: { w: 4, h: 5, x: 4, y: 0, minW: 3, minH: 2 },
+    },
+    {
+        id: "weight",
+        type: "weight",
+        component: WeightCard,
+        defaultLayout: { w: 4, h: 5, x: 8, y: 0, minW: 3, minH: 2 },
+    },
+];
+
+// Generate default layouts for all breakpoints
+const generateDefaultLayouts = (): Layouts => {
+    const lg: Layout[] = AVAILABLE_WIDGETS.map((widget) => ({
+        i: widget.id,
+        ...widget.defaultLayout,
+    }));
+
+    // For medium screens, make widgets full width in pairs
+    const md: Layout[] = AVAILABLE_WIDGETS.map((widget, index) => ({
+        i: widget.id,
+        w: 6,
+        h: widget.defaultLayout.h,
+        x: (index % 2) * 6,
+        y: Math.floor(index / 2) * widget.defaultLayout.h,
+        minW: widget.defaultLayout.minW,
+        minH: widget.defaultLayout.minH,
+    }));
+
+    // For small screens, stack vertically
+    const sm: Layout[] = AVAILABLE_WIDGETS.map((widget, index) => ({
+        i: widget.id,
+        w: 12,
+        h: widget.defaultLayout.h,
+        x: 0,
+        y: index * widget.defaultLayout.h,
+        minW: widget.defaultLayout.minW,
+        minH: widget.defaultLayout.minH,
+    }));
+
+    return { lg, md, sm, xs: sm };
+};
+
+// Load layouts from localStorage
+const loadLayouts = (): Layouts | null => {
+    try {
+        const saved = localStorage.getItem(LAYOUT_STORAGE_KEY);
+        return saved ? JSON.parse(saved) : null;
+    } catch (error) {
+        console.error("Error loading dashboard layout:", error);
+        return null;
+    }
+};
+
+// Save layouts to localStorage
+const saveLayouts = (layouts: Layouts) => {
+    try {
+        localStorage.setItem(LAYOUT_STORAGE_KEY, JSON.stringify(layouts));
+    } catch (error) {
+        console.error("Error saving dashboard layout:", error);
+    }
+};
+
+export const ConfigurableDashboard: React.FC = () => {
+    const [t] = useTranslation();
+    const [isEditMode, setIsEditMode] = useState(false);
+    const [layouts, setLayouts] = useState<Layouts>(() => {
+        const savedLayouts = loadLayouts();
+        return savedLayouts || generateDefaultLayouts();
+    });
+
+    const handleLayoutChange = useCallback((_: Layout[], allLayouts: Layouts) => {
+        setLayouts(allLayouts);
+        saveLayouts(allLayouts);
+    }, []);
+
+    const handleResetLayout = useCallback(() => {
+        const defaultLayouts = generateDefaultLayouts();
+        setLayouts(defaultLayouts);
+        saveLayouts(defaultLayouts);
+    }, []);
+
+    const toggleEditMode = useCallback(() => {
+        setIsEditMode((prev) => !prev);
+    }, []);
+
+    // Grid configuration
+    const gridConfig = useMemo(
+        () => ({
+            className: "layout",
+            layouts: layouts,
+            breakpoints: { lg: 1200, md: 996, sm: 768, xs: 480 },
+            cols: { lg: 12, md: 12, sm: 12, xs: 12 },
+            rowHeight: 100,
+            isDraggable: isEditMode,
+            isResizable: isEditMode,
+            onLayoutChange: handleLayoutChange,
+            draggableHandle: isEditMode ? undefined : ".no-drag",
+            margin: [16, 16] as [number, number],
+            containerPadding: [0, 0] as [number, number],
+        }),
+        [layouts, isEditMode, handleLayoutChange]
+    );
+
+    return (
+        <Box>
+            <Box
+                sx={{
+                    display: "flex",
+                    justifyContent: "flex-end",
+                    my: 1,
+                    mx: 2,
+                    gap: 1,
+                }}
+            >
+                {isEditMode && (
+                    <Box
+                        sx={{
+                            p: 1,
+                            borderRadius: 1,
+                            fontSize: "0.875rem",
+                        }}
+                    >
+                        {t('dashboard.dragWidgetsHelp')}
+                    </Box>
+                )}
+                {isEditMode && (
+                    <Tooltip title={t('dashboard.resetLayout')}>
+                        <IconButton
+                            onClick={handleResetLayout}
+                            size="small"
+                            sx={{
+                                color: "primary.main",
+                                borderRadius: 1,
+                                fontSize: "0.875rem",
+                            }}
+                        >
+                            <RestartAltIcon />
+                        </IconButton>
+                    </Tooltip>
+                )}
+                <Tooltip title={isEditMode ? t('core.exitEditMode') : t('dashboard.customizeDashboard')}>
+                    <Button
+                        variant={isEditMode ? "contained" : "outlined"}
+                        startIcon={isEditMode ? <DoneIcon /> : <DashboardCustomizeIcon />}
+                        onClick={toggleEditMode}
+                        size="small"
+                        sx={{ p: 1 }}
+                    >
+                        {isEditMode ? t('save') : t('core.customize')}
+                    </Button>
+                </Tooltip>
+            </Box>
+
+            <ResponsiveGridLayout {...gridConfig}>
+                {AVAILABLE_WIDGETS.map((widget) => {
+                    const WidgetComponent = widget.component;
+                    return (
+                        <Box
+                            key={widget.id}
+                            sx={{
+                                // Add visual feedback in edit mode
+                                border: isEditMode ? "1px dashed" : "none",
+                                borderColor: "primary.main",
+                                borderRadius: 1,
+                                transition: "border 0.2s",
+                                cursor: isEditMode ? "move" : "default",
+                                "&:hover": isEditMode
+                                    ? {
+                                        borderColor: "primary.dark",
+                                    }
+                                    : {},
+                            }}
+                        >
+                            <WidgetComponent />
+                        </Box>
+                    );
+                })}
+            </ResponsiveGridLayout>
+        </Box>
+    );
+};

package/src/components/Dashboard/DashboardCard.tsx

@@ -0,0 +1,121 @@
+import { Card, CardActions, CardContent, CardHeader } from "@mui/material";
+import React from "react";
+
+export interface DashboardCardProps {
+    /**
+     * Card title displayed in the header
+     */
+    title: string;
+
+    /**
+     * Optional subtitle displayed below the title
+     */
+    subheader?: string;
+
+    /**
+     * Main content of the card
+     */
+    children: React.ReactNode;
+
+    /**
+     * Optional actions to display at the bottom of the card (buttons, icons, etc.)
+     */
+    actions?: React.ReactNode;
+
+    /**
+     * Optional header action (typically an icon button in the top-right)
+     */
+    headerAction?: React.ReactNode;
+
+    /**
+     * Custom height for the content area (default: auto-fills available space)
+     * Use this if you need to override the default flex behavior
+     */
+    contentHeight?: string | number;
+
+    /**
+     * Whether the content should scroll when it overflows (default: true)
+     */
+    scrollable?: boolean;
+
+    /**
+     * Additional sx props for the Card component
+     */
+    cardSx?: React.ComponentProps<typeof Card>["sx"];
+
+    /**
+     * Additional sx props for the CardContent component
+     */
+    contentSx?: React.ComponentProps<typeof CardContent>["sx"];
+}
+
+/**
+ * DashboardCard - A reusable card component for the configurable dashboard
+ *
+ * This component handles all the responsive layout logic so individual widgets
+ * don't need to worry about flexbox, height calculations, or scrolling.
+ *
+ * Features:
+ * - Automatically fills the grid cell height
+ * - Proper scrolling behavior
+ * - Consistent styling across all dashboard widgets
+ * - Easy to use for future widgets
+ *
+ * @example
+ * ```tsx
+ * <DashboardCard
+ *   title="My Widget"
+ *   subheader="Widget description"
+ *   actions={<Button>See Details</Button>}
+ * >
+ *   <YourContent />
+ * </DashboardCard>
+ * ```
+ */
+export const DashboardCard: React.FC<DashboardCardProps> = ({
+    title,
+    subheader,
+    children,
+    actions,
+    headerAction,
+    contentHeight,
+    scrollable = true,
+    cardSx = {},
+    contentSx = {},
+}) => {
+    return (
+        <Card
+            sx={{
+                height: "100%",
+                display: "flex",
+                flexDirection: "column",
+                ...cardSx,
+            }}
+        >
+            <CardHeader title={title} subheader={subheader} action={headerAction} />
+
+            <CardContent
+                sx={{
+                    flexGrow: 1,
+                    overflow: scrollable ? "auto" : "visible",
+                    minHeight: 0, // Critical for flexbox scrolling
+                    height: contentHeight,
+                    ...contentSx,
+                }}
+            >
+                {children}
+            </CardContent>
+
+            {actions && (
+                <CardActions
+                    sx={{
+                        justifyContent: "space-between",
+                        alignItems: "flex-start",
+                    }}
+                >
+                    {actions}
+                </CardActions>
+            )}
+        </Card>
+    );
+};

package/src/components/Dashboard/EmptyCard.tsx

@@ -32,14 +32,14 @@ export const EmptyCard = (props: {
         </Button>;
 
     return (<>
-        <Card>
+        <Card sx={{ paddingTop: 0, height: "100%", }}>
             <CardHeader
                 title={props.title}
                 subheader={'.'}
                 sx={{ paddingBottom: 0 }} />
 
-            <CardContent sx={{ paddingTop: 0, height: "500px", }}>
-                <OverviewEmpty />
+            <CardContent>
+                <OverviewEmpty height={'50%'} />
             </CardContent>
 
             <CardActions>

package/src/components/Dashboard/GoalCard.tsx

@@ -0,0 +1,71 @@
+import TrendingUpIcon from "@mui/icons-material/TrendingUp";
+import { Button, IconButton, List, ListItem, ListItemText, Typography } from "@mui/material";
+import Tooltip from "@mui/material/Tooltip";
+import { DashboardCard } from "components/Dashboard/DashboardCard";
+import React from "react";
+// import { useTranslation } from "react-i18next";
+
+/**
+ * Example of a new widget using DashboardCard
+ *
+ * This demonstrates how simple it is to create a new dashboard widget.
+ * All the responsive layout logic is handled by DashboardCard!
+ */
+export const GoalsCard = () => {
+    // const { t } = useTranslation();
+
+    // Your data fetching logic here
+    const goals = [
+        { id: 1, title: "Lose 5kg", progress: 60 },
+        { id: 2, title: "Run 5km", progress: 80 },
+        { id: 3, title: "Bench 100kg", progress: 45 },
+    ];
+
+    return (
+        <DashboardCard
+            title="My Goals"
+            subheader="Track your fitness goals"
+            // Optional header action (top-right icon)
+            headerAction={
+                <Tooltip title="View trends">
+                    <IconButton>
+                        <TrendingUpIcon />
+                    </IconButton>
+                </Tooltip>
+            }
+            // Actions at the bottom of the card
+            actions={
+                <>
+                    <Button size="small">See All Goals</Button>
+                    <Button size="small" variant="contained">
+                        Add Goal
+                    </Button>
+                </>
+            }
+        >
+            {/* Your card content goes here */}
+            <List>
+                {goals.map((goal) => (
+                    <ListItem key={goal.id}>
+                        <ListItemText
+                            primary={goal.title}
+                            secondary={
+                                <Typography variant="body2" color="text.secondary">
+                                    Progress: {goal.progress}%
+                                </Typography>
+                            }
+                        />
+                    </ListItem>
+                ))}
+            </List>
+        </DashboardCard>
+    );
+};
+
+// To add this widget to the dashboard, just add it to AVAILABLE_WIDGETS in ConfigurableDashboard.tsx:
+// {
+//   id: 'goals',
+//   type: 'goals',
+//   component: GoalsCard,
+//   defaultLayout: { w: 4, h: 6, x: 0, y: 6, minW: 3, minH: 4 },
+// }