umwd-components 0.1.715 → 0.1.717

package/src/components/common/EnhancedTable/EnhancedTableToolbar.tsx

@@ -1,97 +0,0 @@
-import React from "react";
-import Toolbar from "@mui/material/Toolbar";
-import Typography from "@mui/material/Typography";
-import IconButton from "@mui/material/IconButton";
-import Tooltip from "@mui/material/Tooltip";
-import FilterListIcon from "@mui/icons-material/FilterList";
-import { alpha } from "@mui/material/styles";
-import { EnhancedTableToolbarProps } from "../../../types/common/enhancedTable/types";
-
-function EnhancedTableToolbar(props: EnhancedTableToolbarProps) {
-  const {
-    title,
-    selected,
-    setSelected,
-    functions,
-    selectFunctions,
-    showFilters,
-    onToggleFilters,
-    hasFilterableColumns,
-  } = props;
-
-  const numSelected = selected.length;
-
-  return (
-    <Toolbar
-      sx={{
-        pl: { sm: 2 },
-        pr: { xs: 1, sm: 1 },
-        ...(numSelected > 0 && {
-          bgcolor: (theme) =>
-            alpha(
-              theme.palette.primary.main,
-              theme.palette.action.activatedOpacity
-            ),
-        }),
-      }}
-    >
-      {numSelected > 0 ? (
-        <Typography
-          sx={{ flex: "1 1 100%" }}
-          color="inherit"
-          variant="subtitle1"
-          component="div"
-        >
-          {numSelected} selected
-        </Typography>
-      ) : (
-        <Typography
-          sx={{ flex: "1 1 100%" }}
-          variant="h6"
-          id="tableTitle"
-          component="div"
-        >
-          {title}
-        </Typography>
-      )}
-      {numSelected > 0 ? (
-        <>
-          {selectFunctions &&
-            selectFunctions.map((func, index) => (
-              <Tooltip key={index} title={func.label}>
-                <IconButton
-                  onClick={(e) => {
-                    func.onClick(e, selected);
-                    setSelected && setSelected([]);
-                  }}
-                >
-                  {func.icon}
-                </IconButton>
-              </Tooltip>
-            ))}
-        </>
-      ) : (
-        <>
-          {" "}
-          {functions &&
-            functions.map((func, index) => (
-              <Tooltip key={index} title={func.label}>
-                <IconButton onClick={(e) => func.onClick(e)}>
-                  {func.icon}
-                </IconButton>
-              </Tooltip>
-            ))}
-          {hasFilterableColumns && (
-            <Tooltip title="Filter list">
-              <IconButton onClick={onToggleFilters}>
-                <FilterListIcon color={showFilters ? "primary" : "inherit"} />
-              </IconButton>
-            </Tooltip>
-          )}
-        </>
-      )}
-    </Toolbar>
-  );
-}
-
-export default EnhancedTableToolbar;

package/src/components/common/EnhancedTable/utils.ts

@@ -1,44 +0,0 @@
-function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
-  if (b[orderBy] < a[orderBy]) {
-    return -1;
-  }
-  if (b[orderBy] > a[orderBy]) {
-    return 1;
-  }
-  return 0;
-}
-
-type Order = "asc" | "desc";
-
-function getComparator<Key extends keyof any>(
-  order: Order,
-  orderBy: Key
-): (
-  a: { [key in Key]: number | string },
-  b: { [key in Key]: number | string }
-) => number {
-  return order === "desc"
-    ? (a, b) => descendingComparator(a, b, orderBy)
-    : (a, b) => -descendingComparator(a, b, orderBy);
-}
-
-// Since 2020 all major browsers ensure sort stability with Array.prototype.sort().
-// stableSort() brings sort stability to non-modern browsers (notably IE11). If you
-// only support modern browsers you can replace stableSort(exampleArray, exampleComparator)
-// with exampleArray.slice().sort(exampleComparator)
-function stableSort<T>(
-  array: readonly T[],
-  comparator: (a: T, b: T) => number
-) {
-  const stabilizedThis = array.map((el, index) => [el, index] as [T, number]);
-  stabilizedThis.sort((a, b) => {
-    const order = comparator(a[0], b[0]);
-    if (order !== 0) {
-      return order;
-    }
-    return a[1] - b[1];
-  });
-  return stabilizedThis.map((el) => el[0]);
-}
-
-export { descendingComparator, getComparator, stableSort };

package/src/components/common/ImagePreviewTooltip.tsx

@@ -1,62 +0,0 @@
-import React from "react";
-import Tooltip from "@mui/material/Tooltip";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import { StrapiImage } from "../StrapiImage";
-
-function ImagePreviewTooltip({ label, image }: { label?: string; image: any }) {
-  return (
-    <Tooltip
-      title={
-        <>
-          {image?.formats !== undefined ? (
-            <StrapiImage
-              id={image.id}
-              url={`${image.formats.thumbnail.url}`}
-              alternativeText=""
-              width={image.formats.thumbnail.width}
-              height={image.formats.thumbnail.height}
-              style={{
-                maxWidth: "100%",
-                height: "auto",
-              }}
-            />
-          ) : (
-            <Typography variant="body2">No image available</Typography>
-          )}
-
-          <Typography variant="body2">{label ? label : image.alt}</Typography>
-        </>
-      }
-    >
-      <Box
-        sx={{
-          display: "block",
-          position: "relative",
-          width: 36,
-          height: 36,
-          borderRadius: "50%",
-          overflow: "hidden",
-        }}
-      >
-        {image?.formats !== undefined ? (
-          <StrapiImage
-            id={image.id}
-            url={`${image.formats.thumbnail.url}`}
-            alternativeText=""
-            width={image.formats.thumbnail.width}
-            height={image.formats.thumbnail.height}
-            style={{
-              maxWidth: "100%",
-              height: "auto",
-            }}
-          />
-        ) : (
-          <Typography variant="body2">No image available</Typography>
-        )}
-      </Box>
-    </Tooltip>
-  );
-}
-
-export default ImagePreviewTooltip;

package/src/components/common/NumberInput.tsx

@@ -1,70 +0,0 @@
-import React, { useEffect } from "react";
-import TextField from "@mui/material/TextField";
-
-interface NumberInputProps extends React.ComponentProps<typeof TextField> {
-  label: string;
-  minNewValue?: number;
-  maxNewValue?: number;
-  error?: boolean;
-  setValueCallback?: (value: number) => void;
-}
-
-const NumberInput = (props: NumberInputProps) => {
-  const { label, minNewValue, maxNewValue } = props;
-
-  const [value, setValue] = React.useState(0);
-
-  useEffect(() => {
-    props.setValueCallback && props.setValueCallback(value);
-  }, [value]);
-
-  return (
-    <TextField
-      {...props}
-      type="number"
-      label={label}
-      size="small"
-      value={value}
-      onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-        const newValue = Number(event.target.value);
-        if (minNewValue !== undefined && maxNewValue !== undefined) {
-          setValue(Math.max(minNewValue, Math.min(newValue, maxNewValue)));
-        } else if (minNewValue !== undefined) {
-          setValue(Math.max(newValue, minNewValue));
-        } else if (maxNewValue !== undefined) {
-          setValue(Math.min(newValue, maxNewValue));
-        } else {
-          setValue(newValue);
-        }
-      }}
-      inputProps={{
-        step: 1,
-        min: minNewValue ?? undefined,
-        max: maxNewValue ?? undefined,
-      }}
-      onWheel={(event: React.WheelEvent<HTMLInputElement>) => {
-        // `event.currentTarget` is a callable type but is targetting the MUI element
-        // whereas `event.target` targets the input element but does not have the callable type, so casting
-        (event.target as HTMLInputElement).blur();
-      }}
-      helperText={`min: ${minNewValue}, max: ${maxNewValue}`}
-      error={
-        (minNewValue !== undefined && value < minNewValue) ||
-        (maxNewValue !== undefined && value > maxNewValue) ||
-        props.error
-      }
-      sx={[
-        // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
-        { width: "9rem" },
-        ...(Array.isArray(props?.sx) ? props.sx : [props.sx]),
-      ]}
-      /* sx={{
-        width: "9rem",
-        ...props.sx,
-      }} */
-      // sx={{ width: "9rem" }}
-    />
-  );
-};
-
-export default NumberInput;

package/src/components/common/Pagination.tsx

@@ -1,60 +0,0 @@
-"use client";
-import React from "react";
-import { usePathname, useSearchParams, useRouter } from "next/navigation";
-import { default as MuiPagination } from "@mui/material/Pagination";
-import Box from "@mui/material/Box";
-
-import { useTheme } from "@mui/material/styles";
-
-interface PaginationProps {
-  pageCount: number;
-}
-
-function Pagination({ pageCount }: Readonly<PaginationProps>) {
-  const router = useRouter();
-  const theme = useTheme();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const currentPage =
-    searchParams !== null ? Number(searchParams.get("page")) : 1;
-
-  const createPageURL = (pageNumber: number | string) => {
-    // Provide an empty string as a fallback if searchParams is null
-    const params = new URLSearchParams(searchParams ?? "");
-    params.set("page", pageNumber.toString());
-    return `${pathname}?${params.toString()}`;
-  };
-
-  const changePage = (event: React.ChangeEvent<unknown>, value: number) => {
-    const url = createPageURL(value);
-    router.push(url);
-  };
-
-  return (
-    <Box
-      sx={[
-        {
-          background: theme.palette.primary.main,
-          color: theme.palette.primary.contrastText,
-          p: 2,
-          textAlign: "center",
-          borderRadius: 2,
-          mt: 2,
-          "& .MuiButtonBase-root": {
-            color: theme.palette.primary.contrastText,
-          },
-        },
-        Boolean(pageCount == 1) && { visibility: "hidden" },
-      ]}
-    >
-      <MuiPagination
-        count={pageCount}
-        page={currentPage}
-        onChange={changePage}
-        disabled={Boolean(pageCount === 1)}
-      />
-    </Box>
-  );
-}
-
-export default Pagination;

package/src/components/common/TextualAmountUpdater.tsx

@@ -1,82 +0,0 @@
-import React, { useState } from "react";
-import Typography from "@mui/material/Typography";
-import Stack from "@mui/material/Stack";
-import TextField from "@mui/material/TextField";
-import Button from "@mui/material/Button";
-import { TextualAmountUpdaterProps } from "../../types/common/AmountUpdater";
-
-export function TextualAmountUpdater({
-  label,
-  currentValue,
-  totalValue,
-  minNewValue,
-  maxNewValue,
-  handleChange,
-}: TextualAmountUpdaterProps) {
-  const [value, setValue] = useState(currentValue);
-  const [error, setError] = useState(false);
-
-  return (
-    <Stack
-      direction="row"
-      spacing={1}
-      justifyContent={"space-between"}
-      alignItems={"center"}
-    >
-      {currentValue !== totalValue ? (
-        <Typography variant="body2">{`${currentValue} / ${totalValue}`}</Typography>
-      ) : (
-        <Typography variant="body2">{`${currentValue}`}</Typography>
-      )}
-
-      <TextField
-        type="number"
-        label={label}
-        size="small"
-        value={value}
-        onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-          const newValue = Number(event.target.value);
-          if (minNewValue !== undefined && maxNewValue !== undefined) {
-            setValue(Math.max(minNewValue, Math.min(newValue, maxNewValue)));
-          } else if (minNewValue !== undefined) {
-            setValue(Math.max(newValue, minNewValue));
-          } else if (maxNewValue !== undefined) {
-            setValue(Math.min(newValue, maxNewValue));
-          } else {
-            setValue(newValue);
-          }
-        }}
-        inputProps={{
-          step: 1,
-          min: minNewValue ?? undefined,
-          max: maxNewValue ?? undefined,
-        }}
-        onWheel={(event: React.WheelEvent<HTMLInputElement>) => {
-          // `event.currentTarget` is a callable type but is targetting the MUI element
-          // whereas `event.target` targets the input element but does not have the callable type, so casting
-          (event.target as HTMLInputElement).blur();
-        }}
-        helperText={`min: ${minNewValue}, max: ${maxNewValue}`}
-        error={error}
-        sx={{ width: "9rem" }}
-      />
-      <Button
-        variant="contained"
-        color="primary"
-        onClick={() => {
-          if (value < minNewValue || value > maxNewValue) {
-            setError(true);
-          } else {
-            handleChange(value);
-            setError(false);
-          }
-        }}
-        size="small"
-      >
-        Confirm
-      </Button>
-    </Stack>
-  );
-}
-
-export default TextualAmountUpdater;

package/src/components/common/WeekPicker.tsx

@@ -1,72 +0,0 @@
-/* The Weekpicker component has a value prop and an onChange prop, the value prop contains a date, 
-the onChange function changes the value prop. The weekpicker component exports a Mui Autocomplete 
-field with <amount of weeks in current year> options for each week of the year. There should be a 
-function in this component to convert the given date in the value to a weeknumber. Also the weeknumber 
-should be converted to a date befor calling the onchange function */
-
-import React from "react";
-import Autocomplete from "@mui/material/Autocomplete";
-import TextField from "@mui/material/TextField";
-// import { getWeek } from "date-fns"; // TODO see if we can do without this, and remove it from package.json
-import dayjs from "dayjs";
-import isoWeek from "dayjs/plugin/isoWeek";
-
-dayjs.extend(isoWeek);
-
-const getWeek = (date: Date) => {
-  return dayjs(date).isoWeek();
-};
-
-const weeks = Array.from({ length: 52 }, (_, index) => index + 1);
-
-type WeekPickerProps = {
-  value: Date;
-  onChangeCallback: (date: Date) => void;
-  label?: string;
-  disabled?: boolean;
-};
-
-function WeekPicker(props: WeekPickerProps) {
-  const { value, onChangeCallback, label, disabled } = props;
-
-  function customGetISOWeek(w: number, y: number) {
-    let d = new Date(y, 0, 4);
-    d.setDate(d.getDate() - (d.getDay() || 7) + 1 + 7 * (w - 1));
-    return d;
-  }
-
-  const convertToWeekNumber = (date: Date) => {
-    const weekNumber = getWeek(date);
-    return weekNumber;
-  };
-
-  const currentWeek = getWeek(new Date());
-
-  const thisYear = new Date().getFullYear();
-
-  const nextYear = new Date().getFullYear() + 1;
-
-  return (
-    <Autocomplete
-      options={weeks}
-      value={convertToWeekNumber(value)}
-      onChange={(e, newValue) => {
-        if (newValue !== null) {
-          if (newValue >= currentWeek) {
-            onChangeCallback(customGetISOWeek(newValue, thisYear));
-          } else {
-            // this is correct but returns a date at the end of 2024, wich is the first week of 2025
-            onChangeCallback(customGetISOWeek(newValue, nextYear));
-          }
-        }
-      }}
-      getOptionLabel={(option) => option.toString()}
-      disabled={disabled !== undefined ? disabled : false}
-      renderInput={(params) => (
-        <TextField {...params} label={label !== undefined ? label : "Week"} />
-      )}
-    />
-  );
-}
-
-export default WeekPicker;

package/src/components/common/cookie-consent/CookieConsentBanner.tsx

@@ -1,59 +0,0 @@
-"use client";
-
-import React from "react";
-import { useCookieConsent } from "./CookieConsentContext";
-
-import Snackbar from "@mui/material/Snackbar";
-import Paper from "@mui/material/Paper";
-import Stack from "@mui/material/Stack";
-import Button from "@mui/material/Button";
-import Typography from "@mui/material/Typography";
-import Link from "@mui/material/Link";
-
-import CookieIcon from "@mui/icons-material/Cookie";
-
-const CookieConsentBanner: React.FC = () => {
-  const { consentGiven, giveConsent, declineConsent } = useCookieConsent();
-
-  if (consentGiven !== null) return null;
-
-  return (
-    <Snackbar
-      open={true}
-      anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
-      onClose={() => {}}
-      sx={{ width: "90%" }}
-    >
-      <Paper sx={{ p: 2, width: "100%" }}>
-        <Stack direction="column" spacing={2}>
-          <Typography variant="body1">
-            This website uses cookies to ensure you get the best experience on
-            our website.To learn more about our use of cookies, view our{" "}
-            <Link
-              href="/privacy-policy"
-              color="inherit"
-              underline="hover"
-              sx={{ fontWeight: "bold", color: "primary.main" }}
-            >
-              {" "}
-              Privacy Policy.{" "}
-            </Link>{" "}
-            You can also manage your cookie settings at any time using the
-            cookie <CookieIcon fontSize="inherit" /> icon in the footer.
-          </Typography>
-
-          <Stack direction="row" spacing={2} justifyContent="flex-end">
-            <Button variant="outlined" onClick={declineConsent}>
-              I Decline
-            </Button>
-            <Button variant="contained" onClick={giveConsent}>
-              I Accept
-            </Button>
-          </Stack>
-        </Stack>
-      </Paper>
-    </Snackbar>
-  );
-};
-
-export default CookieConsentBanner;

package/src/components/common/cookie-consent/CookieConsentButton.tsx

@@ -1,21 +0,0 @@
-"use client";
-
-import React from "react";
-import { Button } from "@mui/material";
-import { useCookieConsent } from "./CookieConsentContext";
-
-const CookieConsentButton: React.FC = () => {
-  const { giveConsent } = useCookieConsent();
-
-  const handleGiveConsent = () => {
-    giveConsent();
-  };
-
-  return (
-    <Button variant="outlined" onClick={handleGiveConsent}>
-      Accept Cookies
-    </Button>
-  );
-};
-
-export default CookieConsentButton;

package/src/components/common/cookie-consent/CookieConsentButtonSmall.tsx

@@ -1,48 +0,0 @@
-"use client";
-
-import React from "react";
-import Button from "@mui/material/Button";
-import { useCookieConsent } from "./CookieConsentContext";
-import CookieIcon from "@mui/icons-material/Cookie";
-import { SxProps, Theme } from "@mui/system";
-import { useTheme } from "@mui/material/styles";
-
-interface CookieConsentButtonSmallProps {
-  sx?: SxProps<Theme>;
-}
-
-const CookieConsentButtonSmall: React.FC = ({
-  sx,
-}: CookieConsentButtonSmallProps) => {
-  const { resetConsent } = useCookieConsent();
-
-  const handleResetConsent = () => {
-    resetConsent();
-  };
-
-  const theme = useTheme();
-
-  return (
-    <Button
-      variant="outlined"
-      onClick={handleResetConsent}
-      startIcon={<CookieIcon />}
-      sx={[
-        // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
-        {
-          borderColor: theme.palette.primary.contrastText,
-          color: theme.palette.primary.contrastText,
-          "&:hover": {
-            borderColor: theme.palette.primary.contrastText,
-            color: theme.palette.primary.contrastText,
-          },
-        },
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
-    >
-      Reset Cookie Preferences
-    </Button>
-  );
-};
-
-export default CookieConsentButtonSmall;

package/src/components/common/cookie-consent/CookieConsentContext.tsx

@@ -1,73 +0,0 @@
-"use client";
-
-import React, { createContext, useState, useContext, useEffect } from "react";
-import { getCookie } from "../../../lib/getCookie";
-import { setCookie } from "../../../lib/setCookie";
-import { deleteCookie } from "../../../lib/deleteCookie";
-
-interface CookieConsentContextType {
-  consentGiven: boolean | null;
-  giveConsent: () => void;
-  declineConsent: () => void;
-  resetConsent: () => void;
-}
-
-const CookieConsentContext = createContext<
-  CookieConsentContextType | undefined
->(undefined);
-
-// Custom hook to use the CookieConsentContext
-export const useCookieConsent = (): CookieConsentContextType => {
-  const context = useContext(CookieConsentContext);
-  if (!context) {
-    throw new Error(
-      "useCookieConsent must be used within a CookieConsentProvider"
-    );
-  }
-  return context;
-};
-
-// CookieConsentProvider component
-export const CookieConsentProvider: React.FC<React.PropsWithChildren<{}>> = ({
-  children,
-}) => {
-  const [consentGiven, setConsentGiven] = useState<boolean | null>(null);
-
-  useEffect(() => {
-    // Check if the consent cookie exists when the page loads
-    const consent = getCookie("cookieConsent");
-    if (consent === "true") {
-      setConsentGiven(true);
-    }
-  }, []);
-
-  const giveConsent = () => {
-    // Set the cookie to indicate consent was given
-    setCookie("cookieConsent", "true", 365); // Cookie expires in 1 year
-    setConsentGiven(true);
-  };
-
-  const declineConsent = () => {
-    // Remove the consent cookie
-    deleteCookie("cookieConsent");
-    // Remove all cookies
-    document.cookie.split(";").forEach((cookie) => {
-      const name = cookie.trim().split("=")[0];
-      deleteCookie(name);
-    });
-    setConsentGiven(false);
-  };
-
-  const resetConsent = () => {
-    deleteCookie("cookieConsent");
-    setConsentGiven(null);
-  };
-
-  return (
-    <CookieConsentContext.Provider
-      value={{ consentGiven, giveConsent, declineConsent, resetConsent }}
-    >
-      {children}
-    </CookieConsentContext.Provider>
-  );
-};