@wger-project/react-components 25.12.5 → 26.2.26

package/package.json

@@ -11,7 +11,7 @@
   "exports": {
     ".": "./build/index.js"
   },
-  "version": "25.12.5",
+  "version": "26.2.26",
   "repository": "https://github.com/wger-project/react",
   "type": "module",
   "publishConfig": {
@@ -22,12 +22,12 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@hello-pangea/dnd": "^18.0.1",
-    "@mui/icons-material": "^7.3.5",
+    "@mui/icons-material": "^7.3.7",
     "@mui/lab": "^7.0.1-beta.18",
     "@mui/material": "^7.3.4",
     "@mui/system": "^7.3.3",
-    "@mui/x-data-grid": "^8.18.0",
-    "@mui/x-date-pickers": "^8.18.0",
+    "@mui/x-data-grid": "^8.26.0",
+    "@mui/x-date-pickers": "^8.26.0",
     "@tanstack/react-query": "^5.90.2",
     "@vitejs/plugin-react": "^5.1.1",
     "axios": "^1.12.2",
@@ -38,14 +38,16 @@
     "i18next-http-backend": "^3.0.2",
     "luxon": "^3.7.2",
     "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "react-grid-layout": "^1.5.2",
+    "react-dom": "^19.2.4",
+    "react-grid-layout": "^2.2.2",
     "react-i18next": "^16.3.3",
-    "react-is": "^19.2.0",
+    "react-is": "^19.2.4",
     "react-responsive": "^10.0.1",
-    "react-router-dom": "^7.9.4",
+    "react-router-dom": "^7.12.0",
     "react-simple-wysiwyg": "^3.4.1",
+    "react-slick": "^0.31.0",
     "recharts": "^3.4.1",
+    "slick-carousel": "^1.8.1",
     "slug": "^9.1.0",
     "typescript": "^5.9.3",
     "vite-tsconfig-paths": "^5.1.4",
@@ -65,25 +67,25 @@
     "@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/react-slick": "^0.23.13",
     "@types/slug": "^5.0.9",
     "@typescript-eslint/eslint-plugin": "^8.47.0",
     "@typescript-eslint/parser": "^8.47.0",
-    "eslint": "^9.37.0",
+    "eslint": "^9.39.2",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.0",
-    "i18next-parser": "^9.3.0",
+    "i18next-cli": "^1.46.0",
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^30.2.0",
     "jsdom": "^27.2.0",
     "ts-jest": "^29.4.5",
     "typescript-eslint": "^8.46.0",
-    "vite": "^7.2.2",
+    "vite": "^7.3.1",
     "vite-plugin-eslint": "^1.8.1",
-    "vitest": "^3.2.4",
+    "vitest": "^4.0.18",
     "webpack-bundle-analyzer": "^4.10.2"
   },
   "scripts": {

package/src/components/BodyWeight/TableDashboard/TableDashboard.tsx

@@ -41,17 +41,15 @@ export const WeightTableDashboard = ({ weights }: WeightTableProps) => {
                 <Table size={"small"}>
                     <TableHead>
                         <TableRow>
-                            <TableCell align="center">{t('date')}</TableCell>
-                            <TableCell align="center">{t('weight')}</TableCell>
+                            <TableCell>{t('date')}</TableCell>
+                            <TableCell>{t('weight')}</TableCell>
                         </TableRow>
                     </TableHead>
                     <TableBody>
                         {filteredWeight.map((row) => (
                             <TableRow key={row.date.toISOString()}>
-                                <TableCell align="center">
-                                    {dateTimeToLocale(row.date)}
-                                </TableCell>
-                                <TableCell align="center">{row.weight}</TableCell>
+                                <TableCell>{dateTimeToLocale(row.date)}</TableCell>
+                                <TableCell>{row.weight}</TableCell>
                             </TableRow>
                         ))}
                     </TableBody>

package/src/components/Calendar/Components/CalendarComponent.test.tsx

@@ -33,33 +33,29 @@ describe('CalendarComponent', () => {
     beforeEach(() => {
 
         (getWeights as jest.Mock).mockImplementation(() => Promise.resolve([
-                new WeightEntry(
-                    new Date(currentYear, currentMonth, 2, 12, 0),
-                    70
-                ),
-            ]
-        ));
-
-        (getSessions as jest.Mock).mockImplementation(() => Promise.resolve([
-                testWorkoutSession
-            ]
+            new WeightEntry(
+                new Date(currentYear, currentMonth, 2, 12, 0),
+                70
+            ),
+        ]));
+
+        (getSessions as jest.Mock).mockImplementation(() => Promise.resolve(
+            [testWorkoutSession]
         ));
 
         (getMeasurementCategories as jest.Mock).mockImplementation(() => Promise.resolve([
-                new MeasurementCategory(
-                    1,
-                    "Body Fat",
-                    "%",
-                    [new MeasurementEntry(1, 1, new Date(currentYear, currentMonth, 1, 12, 0), 20, "Normal")]
-                ),
-            ],
-        ));
+            new MeasurementCategory(
+                1,
+                "Body Fat",
+                "%",
+                [new MeasurementEntry(1, 1, new Date(currentYear, currentMonth, 1, 12, 0), 20, "Normal")]
+            ),
+        ]));
 
         (getNutritionalDiaryEntries as jest.Mock).mockImplementation(() => Promise.resolve([
-                TEST_DIARY_ENTRY_1,
-                TEST_DIARY_ENTRY_2,
-            ],
-        ));
+            TEST_DIARY_ENTRY_1,
+            TEST_DIARY_ENTRY_2,
+        ]));
 
         testQueryClient.clear();
     });

package/src/components/Calendar/Components/CalendarComponent.tsx

@@ -25,7 +25,7 @@ export interface DayProps {
 }
 
 
-const CalendarComponent = () => {
+const CalendarComponent = (props: { showBorder?: boolean }) => {
     const [t] = useTranslation();
 
     const currentDate = new Date();
@@ -35,6 +35,8 @@ const CalendarComponent = () => {
     const startOfMonth = new Date(currentYear, currentMonth, 1);
     const endOfMonth = new Date(currentYear, currentMonth + 1, 0);
 
+    const showBorder = props.showBorder ?? true;
+
 
     const weightsQuery = useBodyWeightQuery();
     const sessionQuery = useSessionsQuery({
@@ -175,14 +177,15 @@ const CalendarComponent = () => {
             display: 'flex',
             gap: 2,
             flexDirection: { xs: 'column', md: 'row' },
-            height: { xs: 'auto', md: 'calc(100vh - 130px)' },
+            // height: { xs: 'auto', md: 'calc(100vh - 130px)' },
             width: '100%',
         }}>
             <Card sx={{
+                boxShadow: showBorder ? undefined : 'none',
                 width: { xs: 'auto', md: '65%' },
                 height: { xs: 'auto', md: '100%' },
-                m: { xs: 0, sm: 1, md: 2 },
-                p: { xs: 1, sm: 1.5, md: 2 },
+                // m: { xs: 0, sm: 1, md: 2 },
+                // p: { xs: 1, sm: 1.5, md: 2 },
                 display: 'flex',
                 flexDirection: 'column'
             }}>
@@ -193,7 +196,7 @@ const CalendarComponent = () => {
                             <div style={{
                                 display: 'flex',
                                 alignItems: 'center',
-                                marginBottom: '16px'
+                                // marginBottom: '16px'
                             }}>
                                 <CalendarMonthIcon style={{
                                     width: isMobile ? '28px' : '32px',
@@ -235,14 +238,14 @@ const CalendarComponent = () => {
                     sx={{
                         width: { xs: 'auto', md: '65%' },
                         height: { xs: '60%', md: '100%' },
-                        m: { xs: 0, sm: 1, md: 2 },
-                        p: { xs: 1, sm: 1.5, md: 2 }
+                        // m: { xs: 0, sm: 1, md: 2 },
+                        // p: { xs: 1, sm: 1.5, md: 2 }
                     }}
                 >
                     <LoadingPlaceholder />
                 </Card>}
 
-            {isSuccess && <Entries selectedDay={selectedDay} />}
+            {isSuccess && <Entries selectedDay={selectedDay} showBorder={showBorder} />}
         </Box>
     );
 };

package/src/components/Calendar/Components/CalendarHeader.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button, Typography } from '@mui/material';
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";
 
 interface CalendarHeaderProps {
     currentMonth: number;
@@ -9,7 +9,7 @@ interface CalendarHeaderProps {
     onNextMonth: () => void;
 }
 
-const CalendarHeader: React.FC<CalendarHeaderProps> = ({currentMonth, currentYear, onPrevMonth, onNextMonth,}) => {
+const CalendarHeader: React.FC<CalendarHeaderProps> = ({ currentMonth, currentYear, onPrevMonth, onNextMonth, }) => {
     const { i18n } = useTranslation();
     const months = Array.from({ length: 12 }, (_, index) =>
         new Date(2024, index, 1).toLocaleString(i18n.language, { month: "long" })
@@ -21,7 +21,7 @@ const CalendarHeader: React.FC<CalendarHeaderProps> = ({currentMonth, currentYea
             alignItems: 'center',
             justifyContent: 'space-between',
             width: '100%',
-            paddingBottom: '3%'
+            paddingBottom: '1em',
         }}>
             <Button variant="outlined" onClick={onPrevMonth}>
                 &lt;

package/src/components/Calendar/Components/Entries.tsx

@@ -17,22 +17,27 @@ import { DayProps } from "./CalendarComponent";
 
 interface LogProps {
     selectedDay: DayProps;
+    showBorder?: boolean;
 }
 
-const Entries: React.FC<LogProps> = ({ selectedDay }) => {
+const Entries: React.FC<LogProps> = ({ selectedDay, showBorder }) => {
     const [t] = useTranslation();
 
     const [openMeasurements, setOpenMeasurements] = React.useState(false);
     const [openSession, setOpenSession] = React.useState(false);
     const [openNutritionDiary, setOpenNutritionDiary] = React.useState(false);
 
+    showBorder = showBorder ?? true;
+
     return (
         <Card
             sx={{
+                boxShadow: showBorder ? undefined : 'none',
                 width: { xs: 'auto', md: '45%' },
                 height: { xs: '60%', md: '100%' },
-                m: { xs: 0, sm: 1, md: 2 },
-                p: { xs: 1, sm: 1.5, md: 2 }
+                // m: { xs: 0, sm: 1, md: 2 },
+                // p: { xs: 1, sm: 1.5, md: 2 }
+
             }}
         >
             <CardHeader

package/src/components/Dashboard/CalendarCard.tsx

@@ -0,0 +1,16 @@
+import CalendarComponent from "components/Calendar/Components/CalendarComponent";
+import { DashboardCard } from "components/Dashboard/DashboardCard";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+
+export const CalendarCard = () => {
+    const { t } = useTranslation();
+
+
+    return (
+        <DashboardCard title={t("calendar")}>
+            <CalendarComponent showBorder={false} />
+        </DashboardCard>
+    );
+};

package/src/components/Dashboard/ConfigurableDashboard.test.ts

@@ -0,0 +1,129 @@
+import { AVAILABLE_WIDGETS, loadDashboardState, } from './ConfigurableDashboard';
+
+describe('loadDashboardState migration', () => {
+    beforeEach(() => {
+        localStorage.clear();
+    });
+
+    test('filters unknown ids and falls back to all widgets when none valid', () => {
+        // Arrange
+        const data = {
+            "version": 1,
+            "selectedWidgetIds": ["foo"],
+            "layouts": {
+                "lg": [
+                    { "i": "foo", "w": 4, "h": 5, "x": 0, "y": 0, "minW": 3, "minH": 2 },
+                ],
+                "md": [],
+                "sm": [],
+                "xs": []
+            },
+        };
+        localStorage.setItem('dashboard-state', JSON.stringify(data));
+
+        // Act
+        const res = loadDashboardState();
+
+        // Assert
+        expect(res).not.toBeNull();
+        const allowed = AVAILABLE_WIDGETS.map((w) => w.id).slice().sort();
+        expect(res!.selectedWidgetIds.slice().sort()).toEqual(allowed);
+    });
+
+    test('removes unknown IDs', () => {
+        // Arrange
+        const data = {
+            "version": 1,
+            "selectedWidgetIds": ["routine", "foo"],
+            "layouts": {
+                "lg": [
+                    { "i": "routine", "w": 4, "h": 5, "x": 0, "y": 0, "minW": 3, "minH": 2 },
+                    { "i": "foo", "w": 4, "h": 5, "x": 0, "y": 0, "minW": 3, "minH": 2 },
+                ],
+                "md": [],
+                "sm": [],
+                "xs": []
+            }
+        };
+        localStorage.setItem('dashboard-state', JSON.stringify(data));
+
+        // Act
+        const res = loadDashboardState();
+
+        // Assert
+        expect(res).not.toBeNull();
+        expect(res!.selectedWidgetIds).not.toContain('foo');
+        expect(res!.selectedWidgetIds).toContain('routine');
+        const lg = res?.layouts?.lg ?? [];
+        expect(lg.length).toEqual(1);
+        expect(lg[0]?.i).toEqual('routine');
+    });
+
+    test('migrates old top-level structure', () => {
+        // Arrange
+        const oldData = {
+            lg: [{ i: 'routine', x: 0, y: 0, w: 4, h: 5 }, { i: 'weight', x: 4, y: 0, w: 4, h: 5 }],
+            md: [],
+            sm: []
+        };
+        localStorage.setItem('dashboard-state', JSON.stringify(oldData));
+
+        // Act
+        const res = loadDashboardState();
+
+        // Assert
+        expect(res).not.toBeNull();
+        expect(res!.version).toBe(1);
+        // selectedWidgetIds should contain the extracted ids
+        expect(res!.selectedWidgetIds).toEqual(expect.arrayContaining(['routine', 'weight']));
+
+        const savedRaw = localStorage.getItem('dashboard-state');
+        expect(savedRaw).not.toBeNull();
+        const saved = JSON.parse(savedRaw!);
+        expect(saved.version).toBe(1);
+        expect(Array.isArray(saved.selectedWidgetIds)).toBe(true);
+        expect(saved.selectedWidgetIds).toEqual(expect.arrayContaining(['routine', 'weight']));
+        expect(saved.layouts).toBeDefined();
+        expect(Array.isArray(saved.layouts.lg)).toBe(true);
+        expect(saved.layouts.lg.length).toBe(2);
+    });
+
+    test('adds newly available widgets to selected when they are neither selected nor hidden', () => {
+        // Arrange: saved state has 'routine' selected and 'nutrition' hidden, other widgets are missing
+        const data = {
+            version: 1,
+            selectedWidgetIds: ['routine'],
+            hiddenWidgetIds: ['nutrition'],
+            layouts: {
+                lg: [
+                    { i: 'routine', w: 4, h: 5, x: 0, y: 0, minW: 3, minH: 2 }
+                ],
+                md: [],
+                sm: [],
+                xs: []
+            }
+        };
+        localStorage.setItem('dashboard-state', JSON.stringify(data));
+
+        // Act
+        const res = loadDashboardState();
+
+        // Assert
+        expect(res).not.toBeNull();
+        expect(res!.hiddenWidgetIds).toEqual(['nutrition']);
+        expect(res!.selectedWidgetIds).toEqual(expect.arrayContaining(['routine']));
+        const expectedSelected = AVAILABLE_WIDGETS.map((w) => w.id).filter((id) => id !== 'nutrition');
+        expectedSelected.forEach((id) => {
+            expect(res!.selectedWidgetIds).toEqual(expect.arrayContaining([id]));
+        });
+
+        // And the persisted state should also include the newly added widgets
+        const savedRaw = localStorage.getItem('dashboard-state');
+        expect(savedRaw).not.toBeNull();
+        const saved = JSON.parse(savedRaw!);
+        expectedSelected.forEach((id) => {
+            expect(saved.selectedWidgetIds).toEqual(expect.arrayContaining([id]));
+        });
+        expect(saved.hiddenWidgetIds).toEqual(expect.arrayContaining(['nutrition']));
+    });
+});