@wger-project/react-components 25.10.16 → 25.11.17

package/package.json

@@ -11,7 +11,7 @@
   "exports": {
     ".": "./build/index.js"
   },
-  "version": "25.10.16",
+  "version": "25.11.17",
   "repository": "https://github.com/wger-project/react",
   "type": "module",
   "publishConfig": {
@@ -22,14 +22,14 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@hello-pangea/dnd": "^18.0.1",
-    "@mui/icons-material": "^7.3.4",
+    "@mui/icons-material": "^7.3.5",
     "@mui/lab": "^7.0.1-beta.18",
     "@mui/material": "^7.3.4",
     "@mui/system": "^7.3.3",
-    "@mui/x-data-grid": "^8.14.0",
-    "@mui/x-date-pickers": "^8.14.0",
+    "@mui/x-data-grid": "^8.18.0",
+    "@mui/x-date-pickers": "^8.18.0",
     "@tanstack/react-query": "^5.90.2",
-    "@vitejs/plugin-react": "^5.0.4",
+    "@vitejs/plugin-react": "^5.1.1",
     "axios": "^1.12.2",
     "formik": "^2.4.6",
     "history": "^5.3.0",
@@ -44,7 +44,7 @@
     "react-responsive": "^10.0.1",
     "react-router-dom": "^7.9.4",
     "react-simple-wysiwyg": "^3.4.1",
-    "recharts": "^3.2.1",
+    "recharts": "^3.4.1",
     "slug": "^9.1.0",
     "typescript": "^5.9.3",
     "vite-tsconfig-paths": "^5.1.4",
@@ -52,7 +52,7 @@
     "yup": "^1.7.1"
   },
   "devDependencies": {
-    "@eslint/js": "^9.37.0",
+    "@eslint/js": "^9.39.1",
     "@tanstack/react-query-devtools": "^5.90.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
@@ -62,12 +62,12 @@
     "@types/lodash": "^4.17.20",
     "@types/luxon": "^3.7.1",
     "@types/node": "^22.18.9",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
     "@types/react-is": "^19.2.0",
     "@types/slug": "^5.0.9",
-    "@typescript-eslint/eslint-plugin": "^8.46.0",
-    "@typescript-eslint/parser": "^8.46.0",
+    "@typescript-eslint/eslint-plugin": "^8.47.0",
+    "@typescript-eslint/parser": "^8.47.0",
     "eslint": "^9.37.0",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
@@ -76,10 +76,10 @@
     "i18next-parser": "^9.3.0",
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^30.2.0",
-    "jsdom": "^27.0.0",
+    "jsdom": "^27.2.0",
     "ts-jest": "^29.4.5",
     "typescript-eslint": "^8.46.0",
-    "vite": "^7.1.9",
+    "vite": "^7.2.2",
     "vite-plugin-eslint": "^1.8.1",
     "vitest": "^3.2.4"
   },

package/src/components/BodyWeight/Form/WeightForm.tsx

@@ -8,7 +8,6 @@ import { Form, Formik } from "formik";
 import { DateTime } from "luxon";
 import { useState } from 'react';
 import { useTranslation } from "react-i18next";
-import { dateToYYYYMMDD } from "utils/date";
 import * as yup from 'yup';
 
 interface WeightFormProps {
@@ -41,7 +40,7 @@ export const WeightForm = ({ weightEntry, closeFn }: WeightFormProps) => {
         (<Formik
             initialValues={{
                 weight: weightEntry ? weightEntry.weight : 0,
-                date: weightEntry ? dateToYYYYMMDD(weightEntry.date) : dateToYYYYMMDD(new Date()),
+                date: weightEntry ? weightEntry.date : new Date(),
             }}
             validationSchema={validationSchema}
             onSubmit={async (values) => {
@@ -49,12 +48,12 @@ export const WeightForm = ({ weightEntry, closeFn }: WeightFormProps) => {
                 // Edit existing weight entry
                 if (weightEntry) {
                     weightEntry.weight = values.weight;
-                    weightEntry.date = new Date(values.date);
+                    weightEntry.date = values.date;
                     editWeightQuery.mutate(weightEntry);
 
                     // Create a new weight entry
                 } else {
-                    weightEntry = new WeightEntry(new Date(values.date), values.weight);
+                    weightEntry = new WeightEntry(values.date, values.weight);
                     addWeightQuery.mutate(weightEntry);
                 }
 

package/src/components/BodyWeight/WeightChart/index.tsx

@@ -4,7 +4,7 @@ import { WeightEntry } from "components/BodyWeight/model";
 import { WgerModal } from "components/Core/Modals/WgerModal";
 import React from 'react';
 import { useTranslation } from "react-i18next";
-import { CartesianGrid, DotProps, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+import { CartesianGrid, DotProps, Line, LineChart, Tooltip, XAxis, YAxis } from 'recharts';
 import { dateToLocale } from "utils/date";
 
 export interface WeightChartProps {
@@ -72,34 +72,31 @@ export const WeightChart = ({ weights, height }: WeightChartProps) => {
                     <WeightForm weightEntry={currentEntry} />
                 </WgerModal>
             }
-            <ResponsiveContainer height={height}>
-
-                <LineChart data={weightData}>
-                    <Line
-                        type="monotone"
-                        dataKey="weight"
-                        stroke={theme.palette.secondary.main}
-                        strokeWidth={2}
-                        dot={weightData.length > NR_OF_WEIGHTS_CHART_DOT ? false : { strokeWidth: 1, r: 4 }}
-                        activeDot={{
-                            stroke: 'black',
-                            strokeWidth: 1,
-                            r: 6,
-                            onClick: handleClick
-                        }} />
-                    <CartesianGrid
-                        stroke="#ccc"
-                        strokeDasharray="5 5" />
-                    <XAxis
-                        dataKey="date"
-                        type={'number'}
-                        domain={['dataMin', 'dataMax']}
-                        tickFormatter={timeStr => dateToLocale(new Date(timeStr))}
-                    />
-                    <YAxis domain={['auto', 'auto']} />
-                    <Tooltip content={<CustomTooltip />} />
-                </LineChart>
-            </ResponsiveContainer>
+            <LineChart data={weightData} responsive height={height}>
+                <Line
+                    type="monotone"
+                    dataKey="weight"
+                    stroke={theme.palette.secondary.main}
+                    strokeWidth={2}
+                    dot={weightData.length > NR_OF_WEIGHTS_CHART_DOT ? false : { strokeWidth: 1, r: 4 }}
+                    activeDot={{
+                        stroke: 'black',
+                        strokeWidth: 1,
+                        r: 6,
+                        onClick: handleClick
+                    }} />
+                <CartesianGrid
+                    stroke="#ccc"
+                    strokeDasharray="5 5" />
+                <XAxis
+                    dataKey="date"
+                    type={'number'}
+                    domain={['dataMin', 'dataMax']}
+                    tickFormatter={timeStr => dateToLocale(new Date(timeStr))}
+                />
+                <YAxis domain={['auto', 'auto']} />
+                <Tooltip content={<CustomTooltip />} />
+            </LineChart>
         </div>
     );
 };

package/src/components/Exercises/Detail/Head/ExerciseDeleteDialog.tsx

@@ -24,7 +24,6 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { deleteExercise, deleteExerciseTranslation, getExercise } from "services";
-import { ExerciseSearchResponse } from "services/responseType";
 
 export function ExerciseDeleteDialog(props: {
     onClose: () => void,
@@ -91,10 +90,10 @@ export function ExerciseDeleteDialog(props: {
             <p>{t('exercises.replacementsSearch')}</p>
 
             <NameAutocompleter
-                callback={(exercise: ExerciseSearchResponse | null) => {
+                callback={(exercise: Exercise | null) => {
                     if (exercise !== null) {
-                        setReplacementId(exercise.data.base_id);
-                        loadCurrentReplacement(exercise.data.base_id);
+                        setReplacementId(exercise.id!);
+                        loadCurrentReplacement(exercise.id!);
                     }
                 }}
             />

package/src/components/Exercises/ExerciseOverview.tsx

@@ -15,7 +15,7 @@ import { useExercisesQuery } from "components/Exercises/queries";
 import React, { useContext, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useNavigate } from "react-router-dom";
-import { ExerciseSearchResponse } from "services/responseType";
+import { Exercise } from "components/Exercises/models/exercise";
 import { makeLink, WgerLink } from "utils/url";
 import { ExerciseFiltersContext } from './Filter/ExerciseFiltersContext';
 import { FilterDrawer } from './Filter/FilterDrawer';
@@ -135,12 +135,12 @@ export const ExerciseOverviewList = () => {
         page * ITEMS_PER_PAGE
     );
 
-    const exerciseAdded = (exerciseResponse: ExerciseSearchResponse | null) => {
-        if (!exerciseResponse) {
+    const exerciseAdded = (exercise: Exercise | null) => {
+        if (!exercise) {
             return;
         }
 
-        navigate(makeLink(WgerLink.EXERCISE_DETAIL, i18n.language, { id: exerciseResponse.data.base_id }));
+        navigate(makeLink(WgerLink.EXERCISE_DETAIL, i18n.language, { id: exercise.id }));
     };
 
     return (

package/src/components/Exercises/Filter/NameAutcompleter.tsx

@@ -12,25 +12,25 @@ import {
     Switch,
     TextField,
 } from "@mui/material";
+import { Exercise } from "components/Exercises/models/exercise";
 import { SERVER_URL } from "config";
 import debounce from "lodash/debounce";
 import * as React from "react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { getExercise, searchExerciseTranslations } from "services";
-import { ExerciseSearchResponse } from "services/responseType";
+import { searchExerciseTranslations } from "services";
 import { LANGUAGE_SHORT_ENGLISH } from "utils/consts";
 
 type NameAutocompleterProps = {
-    callback: (exerciseResponse: ExerciseSearchResponse | null) => void;
+    callback: (exercise: Exercise | null) => void;
     loadExercise?: boolean;
 };
 
 export function NameAutocompleter({ callback, loadExercise }: NameAutocompleterProps) {
-    const [value, setValue] = React.useState<ExerciseSearchResponse | null>(null);
+    const [value, setValue] = React.useState<Exercise | null>(null);
     const [inputValue, setInputValue] = React.useState("");
     const [searchEnglish, setSearchEnglish] = useState<boolean>(true);
-    const [options, setOptions] = React.useState<readonly ExerciseSearchResponse[]>([]);
+    const [options, setOptions] = React.useState<readonly Exercise[]>([]);
     const [t, i18n] = useTranslation();
 
     loadExercise = loadExercise === undefined ? false : loadExercise;
@@ -61,7 +61,7 @@ export function NameAutocompleter({ callback, loadExercise }: NameAutocompleterP
         <>
             <Autocomplete
                 id="exercise-name-autocomplete"
-                getOptionLabel={(option) => option.value}
+                getOptionLabel={(option) => option.getTranslation().name}
                 data-testid="autocomplete"
                 filterOptions={(x) => x}
                 options={options}
@@ -70,13 +70,10 @@ export function NameAutocompleter({ callback, loadExercise }: NameAutocompleterP
                 filterSelectedOptions
                 value={value}
                 noOptionsText={t("noResults")}
-                isOptionEqualToValue={(option, value) => option.value === value.value}
-                onChange={async (event: React.SyntheticEvent, newValue: ExerciseSearchResponse | null) => {
+                isOptionEqualToValue={(option, value) => option.id === value.id}
+                onChange={async (event: React.SyntheticEvent, newValue: Exercise | null) => {
                     setOptions(newValue ? [newValue, ...options] : options);
                     setValue(newValue);
-                    if (loadExercise && newValue !== null) {
-                        newValue.exercise = await getExercise(newValue.data.base_id);
-                    }
                     callback(newValue);
                 }}
                 onInputChange={(event, newInputValue) => {
@@ -102,34 +99,39 @@ export function NameAutocompleter({ callback, loadExercise }: NameAutocompleterP
                         }}
                     />
                 )}
-                renderOption={(props, option, state) => (
-                    <li
-                        {...props}
-                        key={`exercise-${state.index}-${option.data.id}`}
-                        data-testid={`autocompleter-result-${option.data.base_id}`}
-                    >
-                        <ListItem disablePadding component="div">
-                            <ListItemIcon>
-                                {option.data.image ? (
-                                    <Avatar alt="" src={`${SERVER_URL}${option.data.image}`} variant="rounded" />
-                                ) : (
-                                    <PhotoIcon fontSize="large" />
-                                )}
-                            </ListItemIcon>
-                            <ListItemText
-                                primary={option.value}
-                                slotProps={{
-                                    primary: {
-                                        whiteSpace: "nowrap",
-                                        overflow: "hidden",
-                                        textOverflow: "ellipsis",
-                                    },
-                                }}
-                                secondary={option.data.category}
-                            />
-                        </ListItem>
-                    </li>
-                )}
+                renderOption={(props, option, state) => {
+                    const translation = option.getTranslation();
+                    const mainImage = option.mainImage;
+                    
+                    return (
+                        <li
+                            {...props}
+                            key={`exercise-${state.index}-${option.id}`}
+                            data-testid={`autocompleter-result-${option.id}`}
+                        >
+                            <ListItem disablePadding component="div">
+                                <ListItemIcon>
+                                    {mainImage ? (
+                                        <Avatar alt="" src={`${SERVER_URL}${mainImage.url}`} variant="rounded" />
+                                    ) : (
+                                        <PhotoIcon fontSize="large" />
+                                    )}
+                                </ListItemIcon>
+                                <ListItemText
+                                    primary={translation.name}
+                                    slotProps={{
+                                        primary: {
+                                            whiteSpace: "nowrap",
+                                            overflow: "hidden",
+                                            textOverflow: "ellipsis",
+                                        },
+                                    }}
+                                    secondary={option.category.name}
+                                />
+                            </ListItem>
+                        </li>
+                    );
+                }}
             />
             {i18n.language !== LANGUAGE_SHORT_ENGLISH && (
                 <FormGroup>

package/src/components/Exercises/Filter/NameAutocompleter.test.tsx

@@ -3,6 +3,7 @@ import { NameAutocompleter } from "components/Exercises/Filter/NameAutcompleter"
 import React from 'react';
 import { searchExerciseTranslations } from "services";
 import { searchResponse } from "tests/exercises/searchResponse";
+import { Exercise } from "components/Exercises/models/exercise"; 
 
 jest.mock("services");
 const mockCallback = jest.fn();
@@ -71,6 +72,6 @@ describe("Test the NameAutocompleter component", () => {
         });
 
         // Assert
-        expect(mockCallback).toHaveBeenLastCalledWith(searchResponse[0]);
+        expect(mockCallback).toHaveBeenCalledWith(expect.any(Exercise));
     });
 });

package/src/components/Measurements/Screens/MeasurementCategoryDetail.test.tsx

@@ -52,15 +52,17 @@ describe("Test the MeasurementCategoryDetail component", () => {
             </QueryClientProvider>
         );
 
+        screen.logTestingPlaygroundURL();
+
         // Assert
         expect(useMeasurementsQuery).toHaveBeenCalled();
         expect(screen.getByText('Biceps')).toBeInTheDocument();
 
-        expect(screen.getByText('10cm')).toBeInTheDocument();
+        expect(screen.getByRole('gridcell', { name: /10cm/i })).toBeInTheDocument();
         expect(screen.getByText(/Feb 1, 2023/i)).toBeInTheDocument();
         expect(screen.getByText('test note')).toBeInTheDocument();
 
-        expect(screen.getByText('20cm')).toBeInTheDocument();
+        expect(screen.getByRole('gridcell', { name: /20cm/i })).toBeInTheDocument();
         expect(screen.getByText(/Feb 2, 2023/i)).toBeInTheDocument();
         expect(screen.getByText('important note')).toBeInTheDocument();
     });

package/src/components/Measurements/widgets/MeasurementChart.tsx

@@ -1,7 +1,7 @@
 import { Box } from "@mui/material";
 import { MeasurementCategory } from "components/Measurements/models/Category";
 import React from "react";
-import { CartesianGrid, Line, LineChart, ResponsiveContainer, XAxis, YAxis } from "recharts";
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
 import { theme } from "theme";
 import { dateToLocale } from "utils/date";
 
@@ -19,34 +19,31 @@ export const MeasurementChart = (props: { category: MeasurementCategory }) => {
 
 
     return <Box alignItems={'center'} display={'flex'} flexDirection={'column'}>
-        <ResponsiveContainer width="90%" height={200}>
-
-            <LineChart data={entryData}>
-                <Line
-                    type="monotone"
-                    dataKey="value"
-                    stroke={theme.palette.secondary.main}
-                    strokeWidth={2}
-                    dot={entryData.length > NR_OF_ENTRIES_CHART_DOT ? false : { strokeWidth: 1, r: 4 }}
-                    activeDot={{
-                        stroke: 'black',
-                        strokeWidth: 1,
-                        r: 6,
-                        //onClick: handleClick
-                    }} />
-                <CartesianGrid
-                    stroke="#ccc"
-                    strokeDasharray="5 5" />
-                <XAxis
-                    dataKey="date"
-                    type={'number'}
-                    domain={['dataMin', 'dataMax']}
-                    tickFormatter={timeStr => dateToLocale(new Date(timeStr))!}
-                    tickCount={10}
-                />
-                <YAxis domain={['auto', 'auto']} unit={props.category.unit} />
-                {/*<Tooltip content={<CustomTooltip />} />*/}
-            </LineChart>
-        </ResponsiveContainer>
+        <LineChart data={entryData} responsive width="90%" height={200}>
+            <Line
+                type="monotone"
+                dataKey="value"
+                stroke={theme.palette.secondary.main}
+                strokeWidth={2}
+                dot={entryData.length > NR_OF_ENTRIES_CHART_DOT ? false : { strokeWidth: 1, r: 4 }}
+                activeDot={{
+                    stroke: 'black',
+                    strokeWidth: 1,
+                    r: 6,
+                    //onClick: handleClick
+                }} />
+            <CartesianGrid
+                stroke="#ccc"
+                strokeDasharray="5 5" />
+            <XAxis
+                dataKey="date"
+                type={'number'}
+                domain={['dataMin', 'dataMax']}
+                tickFormatter={timeStr => dateToLocale(new Date(timeStr))!}
+                tickCount={10}
+            />
+            <YAxis domain={['auto', 'auto']} unit={props.category.unit} />
+            {/*<Tooltip content={<CustomTooltip />} />*/}
+        </LineChart>
     </Box>;
 };

package/src/components/Nutrition/components/BmiCalculator.tsx

@@ -6,7 +6,7 @@ import { WgerContainerRightSidebar } from "components/Core/Widgets/Container";
 import { useProfileQuery } from "components/User/queries/profile";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Area, AreaChart, CartesianGrid, ReferenceDot, ResponsiveContainer, Tooltip, XAxis, YAxis, } from "recharts";
+import { Area, AreaChart, CartesianGrid, ReferenceDot, Tooltip, XAxis, YAxis, } from "recharts";
 
 const bmiRanges = [
     { range: "obese", color: "#FF5733", min: 30, max: 100 },
@@ -128,48 +128,46 @@ export const BmiCalculator = () => {
                         {t('bmi.result', { value: bmi.toFixed(1) })}
                     </Typography>
                     }
-                    <ResponsiveContainer width="100%" height={400}>
-                        <AreaChart data={chartData}>
-                            <XAxis
-                                dataKey="height"
-                                type="number"
-                                domain={[140, 220]}
-                                unit="cm"
-                            />
-                            <YAxis
-                                domain={[40, 150]}
-                                tickFormatter={(value) => Math.round(value).toString()} // Format as integers
-                                unit="kg"
+                    <AreaChart data={chartData} responsive width="100%" height={400}>
+                        <XAxis
+                            dataKey="height"
+                            type="number"
+                            domain={[140, 220]}
+                            unit="cm"
+                        />
+                        <YAxis
+                            domain={[40, 150]}
+                            tickFormatter={(value) => Math.round(value).toString()} // Format as integers
+                            unit="kg"
+                        />
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <Tooltip
+                            // @ts-ignore
+                            formatter={(value, name) => [Math.round(value as number), t('bmi.' + (name as string))]}
+                        />
+
+                        {bmiRanges.map((range) => (
+                            <Area
+                                key={range.range}
+                                type="monotone"
+                                dataKey={range.range}
+                                stroke={"black"}
+                                // stroke={range.color}
+                                fill={range.color}
+                                fillOpacity={0.8}
                             />
-                            <CartesianGrid strokeDasharray="3 3" />
-                            <Tooltip
-                                // @ts-ignore
-                                formatter={(value, name) => [Math.round(value as number), t('bmi.' + (name as string))]}
-                            />
-
-                            {bmiRanges.map((range) => (
-                                <Area
-                                    key={range.range}
-                                    type="monotone"
-                                    dataKey={range.range}
-                                    stroke={"black"}
-                                    // stroke={range.color}
-                                    fill={range.color}
-                                    fillOpacity={0.8}
-                                />
-                            ))}
-
-                            {bmi !== null &&
-                                <ReferenceDot
-                                    x={height!}
-                                    y={weight!}
-                                    r={8}
-                                    fill="black"
-                                    stroke="none"
-                                />}
-
-                        </AreaChart>
-                    </ResponsiveContainer>
+                        ))}
+
+                        {bmi !== null &&
+                            <ReferenceDot
+                                x={height!}
+                                y={weight!}
+                                r={8}
+                                fill="black"
+                                stroke="none"
+                            />}
+
+                    </AreaChart>
                     <Stack direction={"row"} justifyContent="center">
                         <Box
                             height={20}

package/src/components/Nutrition/widgets/IngredientAutcompleter.tsx

@@ -22,7 +22,7 @@ import { searchIngredient } from "services";
 import { LANGUAGE_SHORT_ENGLISH } from "utils/consts";
 
 type IngredientAutocompleterProps = {
-    callback: () => void;
+    callback: (ingredient: Ingredient | null) => void;
     initialIngredient?: Ingredient | null;
 };
 

package/src/components/Nutrition/widgets/charts/MacrosPieChart.tsx

@@ -1,7 +1,7 @@
 import { NutritionalValues } from "components/Nutrition/helpers/nutritionalValues";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Cell, Legend, Pie, PieChart, ResponsiveContainer } from 'recharts';
+import { Cell, Legend, Pie, PieChart } from 'recharts';
 import { generateChartColors } from "utils/colors";
 import { numberGramLocale } from "utils/numbers";
 
@@ -45,22 +45,20 @@ export const MacrosPieChart = (props: { data: NutritionalValues }) => {
     };
 
 
-    return <ResponsiveContainer width={"100%"} height={300}>
-        <PieChart>
-            <Pie
-                data={data}
-                labelLine={false}
-                // outerRadius={80}
-                label={renderCustomizedLabel}
-                fill="#8884d8"
-                dataKey="value"
-            >
-                {data.map((entry, index) => (
-                    <Cell key={`cell-${index}`} fill={colorGenerator.next().value!} />
-                ))}
-            </Pie>
-            {/*<Tooltip />*/}
-            <Legend />
-        </PieChart>
-    </ResponsiveContainer>;
+    return <PieChart responsive width={"100%"} height={300}>
+        <Pie
+            data={data}
+            labelLine={false}
+            // outerRadius={80}
+            label={renderCustomizedLabel}
+            fill="#8884d8"
+            dataKey="value"
+        >
+            {data.map((entry, index) => (
+                <Cell key={`cell-${index}`} fill={colorGenerator.next().value!} />
+            ))}
+        </Pie>
+        {/*<Tooltip />*/}
+        <Legend />
+    </PieChart>;
 };