umwd-components 0.1.716 → 0.1.718

package/src/components/common/csv/CsvDownloader.tsx

@@ -1,509 +0,0 @@
-import React from "react";
-import Paper from "@mui/material/Paper";
-import Typography from "@mui/material/Typography";
-import Button from "@mui/material/Button";
-import Stack from "@mui/material/Stack";
-import Grid from "@mui/material/Grid";
-import IconButton from "@mui/material/IconButton";
-import Checkbox from "@mui/material/Checkbox";
-import Divider from "@mui/material/Divider";
-import Collapse from "@mui/material/Collapse";
-import Autocomplete from "@mui/material/Autocomplete";
-import TextField from "@mui/material/TextField";
-import { CSVLink } from "react-csv";
-import { LocalizationProvider } from "@mui/x-date-pickers";
-// import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
-import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
-import { DatePicker } from "@mui/x-date-pickers/DatePicker";
-import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
-import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
-import { useState, useRef, useEffect, useCallback, Fragment } from "react";
-import dayjs from "dayjs";
-import qs from "qs";
-
-type CSVDownloaderProps = {
-  defaultAttributes: { name: string; label: string }[];
-  defaultRelations: {
-    name: string;
-    label: string;
-    attributes: { name: string; label: string }[];
-  }[];
-  defaultStrapiAttributes: { name: string; label: string }[];
-  additionalDateTypes: string[];
-  fetchCSVData: (query: string) => Promise<any>;
-  entityCode?: string;
-};
-
-export default function CSVDownloader(props: CSVDownloaderProps) {
-  const {
-    defaultAttributes,
-    defaultRelations,
-    defaultStrapiAttributes,
-    additionalDateTypes,
-    fetchCSVData,
-    entityCode = "FU",
-  } = props;
-
-  const dateFieldOptions = [
-    "createdAt",
-    "updatedAt",
-    "publishedAt",
-    ...additionalDateTypes,
-  ];
-
-  const [endDate, setEndDate] = useState<dayjs.Dayjs>(
-    dayjs(Date.now()).startOf("day")
-  );
-  const [dateType, setDateType] = useState<string>("createdAt");
-  const [startDate, setStartDate] = useState<dayjs.Dayjs>(
-    dayjs(endDate).subtract(1, "month")
-  );
-  const [open, setOpen] = useState<boolean>(false);
-  const [attributes, setAttributes] = useState<string[]>([]);
-  const [relations, setRelations] = useState<
-    { name: string; attributes: string[] }[]
-  >([]);
-  const [strapiAttributes, setStrapiAttributes] = useState<string[]>([]);
-  const [openRelations, setOpenRelations] = useState<string[]>([]);
-  const [csvData, setCsvData] = useState<string | any[] | null>(null);
-  const csvLinkRef = useRef<
-    CSVLink & HTMLAnchorElement & { link: HTMLAnchorElement }
-  >(null);
-  const [csvQuery, setCsvQuery] = useState<string>("");
-
-  const handleAttributeChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const { name } = e.target;
-      setAttributes((prev) =>
-        prev.includes(name)
-          ? prev.filter((attr) => attr !== name)
-          : [...prev, name]
-      );
-    },
-    []
-  );
-
-  const handleStrapiAttributeChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const { name } = e.target;
-      setStrapiAttributes((prev) =>
-        prev.includes(name)
-          ? prev.filter((attr) => attr !== name)
-          : [...prev, name]
-      );
-    },
-    []
-  );
-
-  const handleRelationChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const { name } = e.target;
-      setRelations((prev) =>
-        prev.some((rel) => rel.name === name)
-          ? prev.filter((rel) => rel.name !== name)
-          : [
-              ...prev,
-              {
-                name,
-                attributes:
-                  defaultRelations
-                    .find((rel) => rel.name === name)
-                    ?.attributes.map((attr) => attr.name) || [],
-              },
-            ]
-      );
-    },
-    [defaultRelations]
-  );
-
-  const handleRelationAttributeChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const [attributeName, relationName] = e.target.name.split("|");
-      setRelations((prev) => {
-        const relation = prev.find((rel) => rel.name === relationName);
-        if (relation) {
-          return prev.map((rel) =>
-            rel.name === relationName
-              ? {
-                  ...rel,
-                  attributes: rel.attributes.includes(attributeName)
-                    ? rel.attributes.filter((attr) => attr !== attributeName)
-                    : [...rel.attributes, attributeName],
-                }
-              : rel
-          );
-        } else {
-          return [
-            ...prev,
-            {
-              name: relationName,
-              attributes: [attributeName],
-            },
-          ];
-        }
-      });
-    },
-    []
-  );
-
-  const toggleRelationOpen = useCallback((name: string) => {
-    setOpenRelations((prev) =>
-      prev.includes(name) ? prev.filter((rel) => rel !== name) : [...prev, name]
-    );
-  }, []);
-
-  const selectAllAttributes = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const { checked } = e.target;
-      setAttributes(checked ? defaultAttributes.map((a) => a.name) : []);
-    },
-    [defaultAttributes]
-  );
-
-  const selectAllStrapiAttributes = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const { checked } = e.target;
-      setStrapiAttributes(
-        checked ? defaultStrapiAttributes.map((s) => s.name) : []
-      );
-    },
-    [defaultStrapiAttributes]
-  );
-
-  const selectAllRelations = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const { checked } = e.target;
-      setRelations(
-        checked
-          ? defaultRelations.map((r) => ({
-              name: r.name,
-              attributes: r.attributes.map((attr) => attr.name),
-            }))
-          : []
-      );
-    },
-    [defaultRelations]
-  );
-
-  const exportCSV = useCallback(async () => {
-    try {
-      const newCsvData = await fetchCSVData(csvQuery);
-      if (newCsvData.length === 0) {
-        setCsvData(null);
-      } else {
-        const parsedCSVData = newCsvData.data.map((item: any) => {
-          const parsedItem: { [key: string]: any } = {};
-          attributes.forEach((attribute) => {
-            parsedItem[attribute] =
-              item.attributes?.[attribute] ?? item[attribute];
-          });
-          if (attributes.includes("id")) {
-            parsedItem.id = item.id;
-          }
-          strapiAttributes.forEach((attribute) => {
-            parsedItem[attribute] =
-              item.attributes?.[attribute] ?? item[attribute];
-          });
-          relations.forEach((relation) => {
-            const data = item[relation.name]?.data ?? item[relation.name];
-            if (data === null) {
-              parsedItem[relation.name] = null;
-            } else if (!Array.isArray(data)) {
-              parsedItem[relation.name] = Object.values(
-                data.attributes ?? data
-              ).join(" | ");
-            } else {
-              parsedItem[relation.name] = data
-                .map((elem) =>
-                  Object.values(elem.attributes ?? elem).join(" | ")
-                )
-                .join(" | ");
-            }
-          });
-          return parsedItem;
-        });
-        setCsvData(parsedCSVData);
-      }
-    } catch (error) {
-      console.error("Error fetching CSV data:", error);
-      setCsvData(null);
-    }
-  }, [csvQuery, attributes, relations, strapiAttributes, fetchCSVData]);
-
-  useEffect(() => {
-    if (csvData && csvLinkRef.current) {
-      setTimeout(() => {
-        csvLinkRef.current?.link?.click();
-        setCsvData(null);
-      });
-    }
-  }, [csvData]);
-
-  useEffect(() => {
-    setCsvQuery(
-      qs.stringify(
-        {
-          fields: attributes,
-          filters: {
-            [dateType]: {
-              $between: [
-                dayjs(startDate).format("YYYY-MM-DD"),
-                dayjs(endDate).format("YYYY-MM-DD"),
-              ],
-            },
-          },
-          populate: relations.reduce((acc, relation) => {
-            acc[relation.name] = { fields: relation.attributes };
-            return acc;
-          }, {} as { [key: string]: { fields: string[] } }),
-        },
-        { encodeValuesOnly: true }
-      )
-    );
-  }, [attributes, relations, startDate, endDate, dateType]);
-
-  return (
-    <Paper sx={{ width: "100%", p: 2 }}>
-      <LocalizationProvider dateAdapter={AdapterDayjs}>
-        <Grid container spacing={2}>
-          {open && (
-            <>
-              <Grid item xs={12}>
-                <Stack direction={"row"} justifyContent="flex-end">
-                  <IconButton
-                    aria-label="expand row"
-                    size="small"
-                    onClick={() => setOpen(!open)}
-                  >
-                    {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
-                  </IconButton>
-                </Stack>
-                <Divider />
-              </Grid>
-
-              <Grid item xs={12}>
-                <Stack direction={"row"} justifyContent="space-between">
-                  <Typography variant="h6">Attributes</Typography>
-                  <Checkbox
-                    checked={defaultAttributes.length === attributes.length}
-                    indeterminate={
-                      defaultAttributes.length !== attributes.length &&
-                      attributes.length > 0
-                    }
-                    sx={{ "& .MuiSvgIcon-root": { fontSize: 28 } }}
-                    onChange={selectAllAttributes}
-                  />
-                </Stack>
-              </Grid>
-
-              {defaultAttributes.map((attribute) => (
-                <Grid item xs={4} key={attribute.name}>
-                  <Stack
-                    spacing={1}
-                    direction={"row"}
-                    sx={{ alignItems: "center" }}
-                  >
-                    <Checkbox
-                      name={attribute.name}
-                      checked={attributes.includes(attribute.name)}
-                      onChange={handleAttributeChange}
-                    />
-                    <Typography>{attribute.label}</Typography>
-                  </Stack>
-                </Grid>
-              ))}
-
-              <Grid item xs={12}>
-                <Stack direction={"row"} justifyContent="space-between">
-                  <Typography variant="h6">Relations</Typography>
-                  <Checkbox
-                    checked={defaultRelations.length === relations.length}
-                    indeterminate={
-                      defaultRelations.length !== relations.length &&
-                      relations.length > 0
-                    }
-                    sx={{ "& .MuiSvgIcon-root": { fontSize: 28 } }}
-                    onChange={selectAllRelations}
-                  />
-                </Stack>
-              </Grid>
-
-              {defaultRelations.map((relation) => {
-                const isOpen = openRelations.includes(relation.name);
-                const relationChecked = relations.some(
-                  (rel) => rel.name === relation.name
-                );
-                const relationIndeterminate =
-                  relationChecked &&
-                  relations.some(
-                    (rel) =>
-                      rel.name === relation.name &&
-                      rel.attributes.length !== relation.attributes.length
-                  );
-                return (
-                  <Grid item xs={12} key={relation.name}>
-                    <Stack
-                      spacing={1}
-                      direction={"row"}
-                      sx={{ alignItems: "center" }}
-                    >
-                      <Checkbox
-                        name={relation.name}
-                        checked={relationChecked}
-                        indeterminate={relationIndeterminate}
-                        onChange={handleRelationChange}
-                      />
-                      <Typography>{relation.label}</Typography>
-                      <IconButton
-                        name={relation.name}
-                        onClick={() => toggleRelationOpen(relation.name)}
-                      >
-                        {isOpen ? (
-                          <KeyboardArrowDownIcon />
-                        ) : (
-                          <KeyboardArrowUpIcon />
-                        )}
-                      </IconButton>
-                    </Stack>
-                    <Divider />
-                    <Collapse in={isOpen}>
-                      <Grid container sx={{ pl: 2 }}>
-                        {relation.attributes.map((attribute) => (
-                          <Grid item xs={3} key={attribute.name}>
-                            <Stack
-                              spacing={1}
-                              direction={"row"}
-                              sx={{ alignItems: "center" }}
-                            >
-                              <Checkbox
-                                name={`${attribute.name}|${relation.name}`}
-                                checked={relations.some(
-                                  (rel) =>
-                                    rel.name === relation.name &&
-                                    rel.attributes.includes(attribute.name)
-                                )}
-                                onChange={handleRelationAttributeChange}
-                                size={"small"}
-                              />
-                              <Typography variant="body2">
-                                {attribute.label}
-                              </Typography>
-                            </Stack>
-                          </Grid>
-                        ))}
-                      </Grid>
-                    </Collapse>
-                  </Grid>
-                );
-              })}
-
-              <Grid item xs={12}>
-                <Stack direction={"row"} justifyContent="space-between">
-                  <Typography variant="h6">
-                    Creation, Publication and Update
-                  </Typography>
-                  <Checkbox
-                    checked={
-                      defaultStrapiAttributes.length === strapiAttributes.length
-                    }
-                    indeterminate={
-                      defaultStrapiAttributes.length !==
-                        strapiAttributes.length && strapiAttributes.length > 0
-                    }
-                    sx={{ "& .MuiSvgIcon-root": { fontSize: 28 } }}
-                    onChange={selectAllStrapiAttributes}
-                  />
-                </Stack>
-              </Grid>
-
-              {defaultStrapiAttributes.map((strapi) => (
-                <Grid item xs={4} key={strapi.name}>
-                  <Stack
-                    spacing={1}
-                    direction={"row"}
-                    sx={{ alignItems: "center" }}
-                  >
-                    <Checkbox
-                      name={strapi.name}
-                      checked={strapiAttributes.includes(strapi.name)}
-                      onChange={handleStrapiAttributeChange}
-                    />
-                    <Typography>{strapi.label}</Typography>
-                  </Stack>
-                </Grid>
-              ))}
-
-              <Grid item xs={12}>
-                <Typography variant="h6">Select date range</Typography>
-              </Grid>
-              <Grid item xs={12}>
-                <Stack direction={"row"} spacing={2}>
-                  <Autocomplete
-                    value={dateType}
-                    options={dateFieldOptions}
-                    multiple={false}
-                    onChange={(e, newValue) => setDateType(newValue)}
-                    renderInput={(params) => (
-                      <TextField {...params} label="Date Type" />
-                    )}
-                    sx={{ width: 300 }}
-                    disableClearable
-                  />
-                  <DatePicker
-                    value={startDate}
-                    label={"start date"}
-                    onChange={(value: dayjs.Dayjs | null) =>
-                      value && setStartDate(value)
-                    }
-                  />
-                  <DatePicker
-                    value={endDate}
-                    label={"end date"}
-                    onChange={(value: dayjs.Dayjs | null) =>
-                      value && setEndDate(value)
-                    }
-                  />
-                </Stack>
-              </Grid>
-            </>
-          )}
-          <Grid item xs={12}>
-            <Stack
-              direction={"row"}
-              spacing={2}
-              sx={{ justifyContent: "space-between" }}
-            >
-              <Fragment>
-                <Button
-                  variant="contained"
-                  disabled={attributes.length === 0 && relations.length === 0}
-                  onClick={exportCSV}
-                >
-                  Export CSV
-                </Button>
-                {csvData && (
-                  <CSVLink
-                    data={csvData}
-                    filename={`${dayjs(startDate).format("DD-MM-YYYY")}_${dayjs(
-                      endDate
-                    ).format(
-                      "DD-MM-YYYY"
-                    )}/${dateType}_${entityCode}-export.csv`}
-                    ref={csvLinkRef}
-                  />
-                )}
-              </Fragment>
-              <IconButton
-                aria-label="expand row"
-                size="small"
-                onClick={() => setOpen(!open)}
-              >
-                {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
-              </IconButton>
-            </Stack>
-          </Grid>
-        </Grid>
-      </LocalizationProvider>
-    </Paper>
-  );
-}

package/src/components/common/markdown/MarkdownDisplay.tsx

@@ -1,14 +0,0 @@
-"use client";
-
-import React from "react";
-import MuiMarkdown, { MuiMarkdownProps } from "mui-markdown";
-
-export default function MarkdownDisplay({
-  children,
-  props,
-}: {
-  children: string;
-  props?: MuiMarkdownProps;
-}) {
-  return <MuiMarkdown {...props}>{children}</MuiMarkdown>;
-}

package/src/components/common/markdown/MarkdownEditor.tsx

@@ -1,69 +0,0 @@
-"use client";
-
-import React from "react";
-import Box from "@mui/material/Box";
-import Paper from "@mui/material/Paper";
-import Stack from "@mui/material/Stack";
-import TextField from "@mui/material/TextField";
-import { useTheme, SxProps } from "@mui/material/styles";
-import MarkdownDisplay from "./MarkdownDisplay";
-import { TextFieldProps } from "@mui/material/TextField";
-
-export default function MarkdownEditor({
-  name,
-  label,
-  defaultValue,
-  sx,
-  onChangeCallback,
-  textfieldProps,
-}: {
-  name: string;
-  label: string;
-  defaultValue?: string;
-  sx?: SxProps;
-  onChangeCallback?: (value: string) => void;
-  textfieldProps?: TextFieldProps;
-}) {
-  const [markdown, setMarkdown] = React.useState(defaultValue || "");
-  const theme = useTheme();
-
-  const handleChange = (value: string) => {
-    setMarkdown(value);
-    onChangeCallback && onChangeCallback(value);
-  };
-
-  return (
-    <Stack
-      direction={"row"}
-      spacing={2}
-      sx={[
-        // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
-    >
-      <TextField
-        name={name}
-        label={label}
-        multiline
-        minRows={4}
-        value={markdown}
-        placeholder={`# Heading 1 \n ## Heading 2 \n ### Heading 3 \n **bold** \n *italic*`}
-        onChange={(e) => handleChange(`${e.target.value}`)}
-        sx={{ flex: 1, whiteSpace: "pre", height: "100%" }}
-        {...textfieldProps}
-      />
-      <Box sx={{ flex: 1 }}>
-        <Paper
-          sx={{
-            p: 2,
-            background: "none",
-            border: `1px solid ${theme.palette.primary.main}`,
-            height: "100%",
-          }}
-        >
-          <MarkdownDisplay>{markdown}</MarkdownDisplay>
-        </Paper>
-      </Box>
-    </Stack>
-  );
-}

package/src/components/common/media/DenseEditMediaForm.tsx

@@ -1,107 +0,0 @@
-"use client";
-
-import React from "react";
-import Box from "@mui/material/Box";
-import Image from "next/image";
-import Stack from "@mui/material/Stack";
-import TextField from "@mui/material/TextField";
-import Alert from "@mui/material/Alert";
-import { updateMediaAction } from "../../../data/actions/media/updateMediaAction";
-import { useFormState } from "react-dom";
-import { MediaItemProps } from "../../../types/common/media/types";
-import { SubmitButton } from "../../SubmitButton";
-import { StrapiErrors } from "../../StrapiErrors";
-
-const INITIAL_STATE = {
-  zodErrors: null,
-  strapiErrors: null,
-  data: null,
-  message: null,
-};
-
-export const DenseEditMediaForm = ({
-  data,
-}: {
-  readonly data: MediaItemProps;
-}) => {
-  const [formState, formAction] = useFormState(
-    updateMediaAction,
-    INITIAL_STATE
-  );
-
-  const { id, name, alternativeText, caption, url } = data;
-
-  return (
-    <form action={formAction}>
-      <input id="id" type="hidden" name="id" value={id} />
-
-      <Stack spacing={2} sx={{ width: "100%" }}>
-        <Box width={150} height={150} position={"relative"}>
-          <Image
-            src={`${process.env.NEXT_PUBLIC_STRAPI_URL}${url}`}
-            fill
-            sizes="100vw"
-            style={{
-              objectFit: "contain",
-            }}
-            alt={name}
-          />
-        </Box>
-        <TextField
-          id="name"
-          name="name"
-          label="name"
-          defaultValue={name}
-          variant="outlined"
-          // error={formState?.zodErrors?.name != undefined ? true : false}
-          // helperText={formState?.zodErrors?.name}
-        />
-        <TextField
-          id="alternativeText"
-          name="alternativeText"
-          label="alternativeText"
-          defaultValue={alternativeText}
-          variant="outlined"
-          // error={formState?.zodErrors?.alternativeText != undefined ? true : false}
-          // helperText={formState?.zodErrors?.alternativeText}
-        />
-        <TextField
-          id="caption"
-          name="caption"
-          label="caption"
-          defaultValue={caption}
-          variant="outlined"
-          // error={formState?.zodErrors?.caption != undefined ? true : false}
-          // helperText={formState?.zodErrors?.caption}
-        />
-        <Stack
-          direction="row-reverse"
-          spacing={2}
-          alignItems={"center"}
-          sx={{
-            width: "100%",
-            // backgroundColor: "secondary.dark",
-            py: 1,
-          }}
-        >
-          <SubmitButton
-            text="save changes"
-            loadingText="loading"
-            // sx={{ color: "primary.contrastText" }}
-          />
-          <StrapiErrors error={formState?.strapiErrors} />
-
-          {formState?.message && (
-            <Alert severity="error">{formState?.message}</Alert>
-          )}
-        </Stack>
-      </Stack>
-    </form>
-  );
-};
-
-/* 
-
-
-              
-              */