@wger-project/react-components 25.10.16

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

@@ -0,0 +1,53 @@
+import { Typography } from '@mui/material';
+import Grid from "@mui/material/Grid";
+import React from 'react';
+import { useTranslation } from "react-i18next";
+import { DayProps } from "./CalendarComponent";
+import CalendarDay from './CalendarDay';
+
+interface CalendarDayGridProps {
+    days: DayProps[];
+    currentMonth: number;
+    currentDate: Date;
+    selectedDay: DayProps;
+    onDayClick: (day: DayProps) => void;
+}
+
+const CalendarDayGrid: React.FC<CalendarDayGridProps> = ({
+                                                             days,
+                                                             currentMonth,
+                                                             currentDate,
+                                                             selectedDay,
+                                                             onDayClick
+                                                         }) => {
+    const { i18n } = useTranslation();
+    const weekDays = Array.from({ length: 7 }, (_, i) =>
+        new Date(1970, 0, i + 5).toLocaleString(i18n.language, { weekday: 'short' })
+    );
+
+    return (
+        <Grid container spacing={1} rowSpacing={2}>
+            {weekDays.map((day, index) => (
+                <Grid size={12 / 7} key={`weekday-${index}`}>
+                    <Typography variant="body1" sx={{ fontWeight: 'bold', textAlign: 'center' }}>
+                        {day}
+                    </Typography>
+                </Grid>
+            ))}
+
+            {days.map((day, index) => (
+                <Grid size={12 / 7} key={`day-${index}`} sx={{ display: 'flex', justifyContent: 'center' }}>
+                    <CalendarDay
+                        day={day}
+                        currentMonth={currentMonth}
+                        currentDate={currentDate}
+                        selectedDay={selectedDay}
+                        onClick={onDayClick}
+                    />
+                </Grid>
+            ))}
+        </Grid>
+    );
+};
+
+export default CalendarDayGrid;

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Button, Typography } from '@mui/material';
+import {useTranslation} from "react-i18next";
+
+interface CalendarHeaderProps {
+    currentMonth: number;
+    currentYear: number;
+    onPrevMonth: () => void;
+    onNextMonth: () => void;
+}
+
+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" })
+    );
+
+    return (
+        <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            width: '100%',
+            paddingBottom: '3%'
+        }}>
+            <Button variant="outlined" onClick={onPrevMonth}>
+                &lt;
+            </Button>
+            <Typography variant="h5">
+                {months[currentMonth]} {currentYear}
+            </Typography>
+            <Button variant="outlined" onClick={onNextMonth}>
+                &gt;
+            </Button>
+        </div>
+    );
+};
+
+export default CalendarHeader;

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

@@ -0,0 +1,81 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { WeightEntry } from 'components/BodyWeight/model';
+import React from 'react';
+import { dateToLocale } from "utils/date";
+import { DayProps } from './CalendarComponent';
+import Entries from './Entries';
+
+
+describe('Entries Component', () => {
+    const mockDate = new Date('2025-4-25');
+
+    const mockWeightEntry: WeightEntry = new WeightEntry(
+        mockDate,
+        75.5
+    );
+
+    const defaultProps: DayProps = {
+        date: mockDate,
+        weightEntry: undefined,
+        measurements: [],
+        nutritionLogs: [],
+        workoutSession: undefined
+    };
+
+    test('Correctly shows date and title', () => {
+        render(<Entries selectedDay={defaultProps} />);
+
+        expect(screen.getByText(/entries/i)).toBeInTheDocument();
+        expect(screen.getByText(dateToLocale(mockDate), { exact: false })).toBeInTheDocument();
+    });
+
+    test('Shows weight entry, if available', () => {
+        const propsWithWeight = {
+            ...defaultProps,
+            weightEntry: mockWeightEntry
+        };
+
+        render(<Entries selectedDay={propsWithWeight} />);
+
+        expect(screen.getByText('weight')).toBeInTheDocument();
+        expect(screen.getByText('75.5')).toBeInTheDocument();
+    });
+
+    test('Shows measurement directly, if theres only one entry', () => {
+        const propsWithOneMeasurement = {
+            ...defaultProps,
+            measurements: [
+                { name: 'Chest size', value: 95, unit: 'cm', date: mockDate }
+            ]
+        };
+
+        render(<Entries selectedDay={propsWithOneMeasurement} />);
+
+        expect(screen.getByText('measurements.measurements')).toBeInTheDocument();
+        expect(screen.getByText('Chest size: 95 cm')).toBeInTheDocument();
+    });
+
+    test('Show measurements in a collapsible', async () => {
+        const propsWithMultipleMeasurements = {
+            ...defaultProps,
+            measurements: [
+                { name: 'Chest size', value: 95, unit: 'cm', date: mockDate },
+                { name: 'Arm size', value: 35, unit: 'cm', date: mockDate }
+            ]
+        };
+
+        render(<Entries selectedDay={propsWithMultipleMeasurements} />);
+
+        // Initially only the header is visible
+        expect(screen.getByText('measurements.measurements')).toBeInTheDocument();
+        expect(screen.queryByText('Chest size')).not.toBeInTheDocument();
+        expect(screen.queryByText('Arm size')).not.toBeInTheDocument();
+
+        const user = userEvent.setup();
+        await user.click(screen.getByText('measurements.measurements'));
+
+        expect(screen.queryByText('Chest size')).toBeInTheDocument();
+        expect(screen.getByText('Arm size')).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,163 @@
+import { ExpandLess, ExpandMore } from '@mui/icons-material';
+import {
+    Card,
+    CardContent,
+    CardHeader,
+    Collapse,
+    List,
+    ListItem,
+    ListItemButton,
+    ListItemText,
+    Typography
+} from '@mui/material';
+import React from 'react';
+import { useTranslation } from "react-i18next";
+import { dateToLocale } from "utils/date";
+import { DayProps } from "./CalendarComponent";
+
+interface LogProps {
+    selectedDay: DayProps;
+}
+
+const Entries: React.FC<LogProps> = ({ selectedDay }) => {
+    const [t] = useTranslation();
+
+    const [openMeasurements, setOpenMeasurements] = React.useState(false);
+    const [openSession, setOpenSession] = React.useState(false);
+    const [openNutritionDiary, setOpenNutritionDiary] = React.useState(false);
+
+    return (
+        <Card
+            sx={{
+                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 }
+            }}
+        >
+            <CardHeader
+                title={
+                    <Typography variant="h5" component="div" sx={{ fontWeight: 'bold' }}>
+                        {t("entries")} - {dateToLocale(selectedDay.date)}
+                    </Typography>
+                }
+            />
+            <CardContent sx={{
+                flex: 1,
+                height: '100%',
+                overflow: 'auto',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 2
+            }}>
+                <List>
+                    {/* Weight entries */}
+                    {selectedDay.weightEntry &&
+                        <ListItem>
+                            <ListItemText
+                                primary={t("weight")}
+                                secondary={selectedDay.weightEntry.weight.toFixed(1)}
+                                sx={{ pl: 2 }}
+                            />
+                        </ListItem>}
+
+                    {/* One measurement */}
+                    {selectedDay.measurements.length === 1 &&
+                        <ListItem>
+                            <ListItemText
+                                primary={t("measurements.measurements")}
+                                secondary={`${selectedDay.measurements[0].name}: ${selectedDay.measurements[0].value} ${selectedDay.measurements[0].unit}`}
+                                sx={{ pl: 2 }}
+                            />
+                        </ListItem>}
+
+                    {/* Measurements */}
+                    {selectedDay.measurements.length > 1 && <>
+                        <ListItem>
+                            <ListItemButton
+                                onClick={() => setOpenMeasurements(!openMeasurements)}
+                                selected={openMeasurements}
+                            >
+                                <ListItemText primary={t("measurements.measurements")} />
+                                {openMeasurements ? <ExpandLess /> : <ExpandMore />}
+                            </ListItemButton>
+                        </ListItem>
+                        <Collapse in={openMeasurements} timeout="auto" unmountOnExit>
+                            <List sx={{ pl: 4, pt: 0 }}>
+                                {selectedDay.measurements.map((measurement, key) => (
+                                    <ListItem key={key} dense>
+                                        <ListItemText
+                                            primary={measurement.name}
+                                            secondary={`${measurement.value} ${measurement.unit}`}
+                                        />
+                                    </ListItem>))}
+                            </List>
+                        </Collapse>
+                    </>}
+
+                    {/* Workout session */}
+                    {selectedDay.workoutSession && <>
+                        <ListItem>
+                            <ListItemButton
+                                onClick={() => setOpenSession(!openSession)}
+                                selected={openSession}
+                            >
+                                <ListItemText
+                                    primary={t("routines.workoutSession")}
+                                    secondary={selectedDay.workoutSession.textRepresentation}
+                                    sx={{
+                                        '& .MuiListItemText-secondary': {
+                                            whiteSpace: 'nowrap',
+                                            overflow: 'hidden',
+                                            textOverflow: 'ellipsis'
+                                        }
+                                    }}
+                                />
+                                {openSession ? <ExpandLess /> : <ExpandMore />}
+                            </ListItemButton>
+                        </ListItem>
+                        <Collapse in={openSession} timeout="auto" unmountOnExit>
+                            <List sx={{ pl: 4, pt: 0 }}>
+                                {selectedDay.workoutSession.logs.map((log, key) => (
+                                    <ListItem key={key} dense>
+                                        <ListItemText
+                                            primary={log.exerciseObj?.getTranslation().name}
+                                            secondary={`${log.repetitions} × ${log.weight} `}
+                                        />
+                                    </ListItem>))}
+                            </List>
+                        </Collapse>
+
+                    </>}
+
+                    {/* Nutrition diary */}
+                    {selectedDay.nutritionLogs.length > 0 && <>
+                        <ListItem>
+                            <ListItemButton
+                                onClick={() => setOpenNutritionDiary(!openNutritionDiary)}
+                                selected={openNutritionDiary}
+                            >
+                                <ListItemText primary={t("nutrition.nutritionalDiary")} />
+                                {openNutritionDiary ? <ExpandLess /> : <ExpandMore />}
+                            </ListItemButton>
+                        </ListItem>
+                        <Collapse in={openNutritionDiary} timeout="auto" unmountOnExit>
+                            <List sx={{ pl: 4, pt: 0 }}>
+                                {selectedDay.nutritionLogs.map((log, key) => (
+                                    <ListItem key={key} dense>
+                                        <ListItemText
+                                            primary={log.ingredient?.name}
+                                            secondary={`${log.amount} ${t('nutrition.gramShort')}`}
+                                        />
+                                    </ListItem>))}
+                            </List>
+                        </Collapse>
+                    </>}
+                </List>
+
+            </CardContent>
+        </Card>
+    );
+};
+
+export default Entries;

package/src/components/Calendar/Helpers/CalendarMeasurement.tsx

@@ -0,0 +1,10 @@
+export class CalendarMeasurement {
+
+    constructor(
+        public name: string,
+        public unit: string,
+        public value: number,
+        public date: Date,
+    ) {
+    }
+}

package/src/components/Carousel/carousel.module.css

@@ -0,0 +1,43 @@
+.carousel {
+  overflow: hidden;
+  margin: 2rem 0;
+}
+@media screen and (min-width: 700px) {
+  .carousel {
+    display: none;
+  }
+}
+.carousel .inner {
+  white-space: nowrap;
+  transition: transform 0.3s;
+}
+
+.carousel_item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 200px;
+  background-color: #7795bd;
+  color: #fff;
+  border-radius: 10px;
+}
+.indicators {
+  display: flex;
+  justify-content: center;
+}
+
+.indicators > button {
+  margin: 5px;
+  border: none;
+  background-color: #2a4c7d;
+  color: #fff;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.indicators > button.active {
+  background-color: green;
+  color: #fff;
+}
+
+/*# sourceMappingURL=carousel.module.css.map */

package/src/components/Carousel/carousel.module.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["carousel.module.scss"],"names":[],"mappings":"AAAA;EACI;EACA;;AAEA;EAJJ;IAKQ;;;AAGJ;EACI;EACA;;;AAIN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAOF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA","file":"carousel.module.css"}

package/src/components/Carousel/carousel.module.scss

@@ -0,0 +1,46 @@
+.carousel {
+    overflow: hidden;
+    margin: 2rem 0;
+
+    @media screen and (min-width: 700px) {
+        display: none;
+    }
+
+    .inner {
+        white-space: nowrap;
+        transition: transform 0.3s;
+      }
+  }
+    
+  .carousel_item {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 200px;
+    background-color: rgb(119, 149, 189);
+    color: #fff;
+    border-radius: 10px;
+    
+    img {
+       
+    }
+  }
+  
+  .indicators {
+    display: flex;
+    justify-content: center;
+  }
+  
+  .indicators > button {
+    margin: 5px;
+    border: none;
+    background-color: #2a4c7d;
+    color: #fff;
+    border-radius: 50%;
+    cursor: pointer;
+  }
+  
+  .indicators > button.active {
+    background-color: green;
+    color: #fff;
+  }  

package/src/components/Carousel/index.tsx

@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from 'react';
+import styles from './carousel.module.css';
+
+export interface CarouselItemProps {
+    children: React.ReactNode;
+}
+
+export const CarouselItem = ({ children }: CarouselItemProps) => {
+    return (
+        <div className={styles.carousel_item}>
+            {children}
+        </div>
+    );
+};
+
+export interface CarouselProps {
+    children: React.ReactNode | React.ReactNode[];
+}
+
+export const Carousel: React.FC<CarouselProps> = ({ children }: CarouselProps) => {
+    const [activeIndex, setActiveIndex] = useState(0);
+
+    const updateIndex = (newIndex: number) => {
+        if (newIndex < 0) {
+            newIndex = React.Children.count(children) - 1;
+
+        } else if (newIndex >= React.Children.count(children)) {
+            newIndex = 0;
+        }
+
+        setActiveIndex(newIndex);
+    };
+
+    useEffect(() => {
+
+    });
+
+    return (
+        <div className={styles.carousel}>
+            <div
+                className={styles.inner}
+                style={{ transform: `translateX(-${activeIndex * 100}%)` }}
+            >
+                {React.Children.map(children, (child) => {
+                    if (React.isValidElement(child)) {
+                        return React.cloneElement(child);
+                    }
+                })}
+            </div>
+            <div className={styles.indicators}>
+                {React.Children.map(children, (child, index) => {
+                    return (
+                        <button
+                            className={`${index === activeIndex ? "active" : ""}`}
+                            onClick={() => {
+                                updateIndex(index);
+                            }}
+                        >
+                            {index + 1}
+                        </button>
+                    );
+                })}
+            </div>
+        </div>
+    );
+};

package/src/components/Common/forms/LicenseAuthor.tsx

@@ -0,0 +1,19 @@
+import { useTranslation } from "react-i18next";
+import { TextField } from "@mui/material";
+import React from "react";
+import { useField } from "formik";
+
+export function LicenseAuthor(props: { fieldName: string }) {
+    const [t] = useTranslation();
+    const [field, meta] = useField(props.fieldName);
+
+    return <TextField
+        fullWidth
+        id={props.fieldName}
+        label={t("licenses.authors")}
+        variant="standard"
+        error={meta.touched && Boolean(meta.error)}
+        helperText={meta.touched && meta.error}
+        {...field}
+    />;
+}

package/src/components/Common/forms/LicenseAuthorUrl.tsx

@@ -0,0 +1,20 @@
+import { useTranslation } from "react-i18next";
+import { TextField } from "@mui/material";
+import React from "react";
+import { useField } from "formik";
+
+export function LicenseAuthorUrl(props: { fieldName: string }) {
+    const [t] = useTranslation();
+    const [field, meta] = useField(props.fieldName);
+
+    return <TextField
+        fullWidth
+        id={props.fieldName}
+        label={t("licenses.authorProfile")}
+        variant="standard"
+        placeholder={"https://"}
+        error={meta.touched && Boolean(meta.error)}
+        helperText={meta.touched && meta.error}
+        {...field}
+    />;
+}

package/src/components/Common/forms/LicenseDerivativeSourceUrl.tsx

@@ -0,0 +1,20 @@
+import { useTranslation } from "react-i18next";
+import { TextField } from "@mui/material";
+import React from "react";
+import { useField } from "formik";
+
+export function LicenseDerivativeSourceUrl(props: { fieldName: string }) {
+    const [t] = useTranslation();
+    const [field, meta] = useField(props.fieldName);
+
+    return <TextField
+        fullWidth
+        id={props.fieldName}
+        label={t("licenses.derivativeSourceUrl")}
+        variant="standard"
+        placeholder={"https://"}
+        error={meta.touched && Boolean(meta.error)}
+        helperText={t("licenses.derivativeSourceUrlHelper") || meta.touched && meta.error}
+        {...field}
+    />;
+}

package/src/components/Common/forms/LicenseObjectUrl.tsx

@@ -0,0 +1,20 @@
+import { useTranslation } from "react-i18next";
+import { TextField } from "@mui/material";
+import React from "react";
+import { useField } from "formik";
+
+export function LicenseObjectUrl(props: { fieldName: string }) {
+    const [t] = useTranslation();
+    const [field, meta] = useField(props.fieldName);
+
+    return <TextField
+        fullWidth
+        id={props.fieldName}
+        label={t("licenses.originalObjectUrl")}
+        variant="standard"
+        placeholder={"https://"}
+        error={meta.touched && Boolean(meta.error)}
+        helperText={meta.touched && meta.error}
+        {...field}
+    />;
+}

package/src/components/Common/forms/LicenseTitle.tsx

@@ -0,0 +1,19 @@
+import { useTranslation } from "react-i18next";
+import { TextField } from "@mui/material";
+import React from "react";
+import { useField } from "formik";
+
+export function LicenseTitle(props: { fieldName: string }) {
+    const [t] = useTranslation();
+    const [field, meta] = useField(props.fieldName);
+
+    return <TextField
+        fullWidth
+        id={props.fieldName}
+        label={t("licenses.originalTitle")}
+        variant="standard"
+        error={meta.touched && Boolean(meta.error)}
+        helperText={meta.touched && meta.error}
+        {...field}
+    />;
+}

package/src/components/Common/forms/WgerTextField.tsx

@@ -0,0 +1,27 @@
+import { TextField } from "@mui/material";
+import { TextFieldProps } from "@mui/material/TextField/TextField";
+import { useField } from "formik";
+import React from "react";
+
+interface WgerTextFieldProps {
+    fieldName: string,
+    title: string,
+    fieldProps?: TextFieldProps,
+    fullwidth?: boolean,
+}
+
+export function WgerTextField(props: WgerTextFieldProps) {
+    const [field, meta] = useField(props.fieldName);
+    const fullwidth = props.fullwidth ?? true;
+
+    return <TextField
+        fullWidth={fullwidth}
+        id={props.fieldName}
+        label={props.title}
+        variant="standard"
+        error={meta.touched && Boolean(meta.error)}
+        helperText={meta.touched && meta.error}
+        {...field}
+        {...props.fieldProps}
+    />;
+}

package/src/components/Core/LoadingWidget/LoadingWidget.tsx

@@ -0,0 +1,22 @@
+import { Box, CircularProgress, Stack } from "@mui/material";
+import React from 'react';
+import { useTranslation } from "react-i18next";
+
+export const LoadingWidget = () => {
+    const [t] = useTranslation();
+
+    return (
+        <Box sx={{ textAlign: "center" }}>{t('loading')}</Box>
+    );
+};
+
+export const LoadingPlaceholder = () => <Box
+    sx={{ height: 200, alignItems: "center", mt: 2 }}
+    component={Stack}
+    direction="column"
+    justifyContent="center">
+    <CircularProgress />
+</Box>;
+
+
+export const LoadingProgressIcon = () => <CircularProgress size={20} />;