umwd-components 0.1.834 → 0.1.835

package/dist/esm/src/components/common/TextualAmountUpdater.js

@@ -0,0 +1,50 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { 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';
+
+function TextualAmountUpdater({ label, currentValue, totalValue, minnewvalue, maxnewvalue, handleChange, }) {
+    const [value, setValue] = useState(currentValue);
+    const [error, setError] = useState(false);
+    return (jsxs(Stack, { direction: "row", spacing: 1, justifyContent: "space-between", alignItems: "center", children: [currentValue !== totalValue ? (jsx(Typography, { variant: "body2", children: `${currentValue} / ${totalValue}` })) : (jsx(Typography, { variant: "body2", children: `${currentValue}` })), jsx(TextField, { type: "number", label: label, size: "small", value: value, onChange: (event) => {
+                    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) => {
+                    // `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.blur();
+                }, helperText: `min: ${minnewvalue}, max: ${maxnewvalue}`, error: error, sx: { width: "9rem" } }), jsx(Button, { variant: "contained", color: "primary", onClick: () => {
+                    if (value < minnewvalue || value > maxnewvalue) {
+                        setError(true);
+                    }
+                    else {
+                        handleChange(value);
+                        setError(false);
+                    }
+                }, size: "small", children: "Confirm" })] }));
+}
+
+export { TextualAmountUpdater, TextualAmountUpdater as default };

package/dist/esm/src/components/common/WeekPicker.js

@@ -0,0 +1,45 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx } from 'react/jsx-runtime';
+import Autocomplete from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+import dayjs from '../../../node_modules/dayjs/dayjs.min.js';
+import isoWeek from '../../../node_modules/dayjs/plugin/isoWeek.js';
+
+dayjs.extend(isoWeek);
+const getWeek = (date) => {
+    return dayjs(date).isoWeek();
+};
+const weeks = Array.from({ length: 52 }, (_, index) => index + 1);
+function WeekPicker(props) {
+    const { value, onChangeCallback, label, disabled } = props;
+    function customGetISOWeek(w, y) {
+        let d = new Date(y, 0, 4);
+        d.setDate(d.getDate() - (d.getDay() || 7) + 1 + 7 * (w - 1));
+        return d;
+    }
+    const convertToWeekNumber = (date) => {
+        const weekNumber = getWeek(date);
+        return weekNumber;
+    };
+    const currentWeek = getWeek(new Date());
+    const thisYear = new Date().getFullYear();
+    const nextYear = new Date().getFullYear() + 1;
+    return (jsx(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) => (jsx(TextField, { ...params, label: label !== undefined ? label : "Week" })) }));
+}
+
+export { WeekPicker as default };

package/dist/esm/src/components/common/cookie-consent/CookieConsentBanner.js

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

package/dist/esm/src/components/common/cookie-consent/CookieConsentButton.js

@@ -0,0 +1,20 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx } from 'react/jsx-runtime';
+import { Button } from '@mui/material';
+import { useCookieConsent } from './CookieConsentContext.js';
+
+const CookieConsentButton = () => {
+    const { giveConsent } = useCookieConsent();
+    const handleGiveConsent = () => {
+        giveConsent();
+    };
+    return (jsx(Button, { variant: "outlined", onClick: handleGiveConsent, children: "Accept Cookies" }));
+};
+
+export { CookieConsentButton as default };

package/dist/esm/src/components/common/cookie-consent/CookieConsentButtonSmall.js

@@ -0,0 +1,34 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx } from 'react/jsx-runtime';
+import Button from '@mui/material/Button';
+import { useCookieConsent } from './CookieConsentContext.js';
+import CookieIcon from '@mui/icons-material/Cookie';
+import { useTheme } from '@mui/material/styles';
+
+const CookieConsentButtonSmall = ({ sx, }) => {
+    const { resetConsent } = useCookieConsent();
+    const handleResetConsent = () => {
+        resetConsent();
+    };
+    const theme = useTheme();
+    return (jsx(Button, { variant: "outlined", onClick: handleResetConsent, startIcon: jsx(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]),
+        ], children: "Reset Cookie Preferences" }));
+};
+
+export { CookieConsentButtonSmall as default };

package/dist/esm/src/components/common/cookie-consent/CookieConsentContext.js

@@ -0,0 +1,55 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useState, useEffect, useContext } from 'react';
+import { getCookie } from '../../../lib/getCookie.js';
+import { setCookie } from '../../../lib/setCookie.js';
+import { deleteCookie } from '../../../lib/deleteCookie.js';
+
+const CookieConsentContext = createContext(undefined);
+// Custom hook to use the CookieConsentContext
+const useCookieConsent = () => {
+    const context = useContext(CookieConsentContext);
+    if (!context) {
+        throw new Error("useCookieConsent must be used within a CookieConsentProvider");
+    }
+    return context;
+};
+// CookieConsentProvider component
+const CookieConsentProvider = ({ children, }) => {
+    const [consentGiven, setConsentGiven] = useState(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 (jsx(CookieConsentContext.Provider, { value: { consentGiven, giveConsent, declineConsent, resetConsent }, children: children }));
+};
+
+export { CookieConsentProvider, useCookieConsent };

package/dist/esm/src/components/common/csv/CsvDownloader.js

@@ -0,0 +1,200 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+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 { r as reactCsv } from '../../../../node_modules/react-csv/index.js';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+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, useCallback, useEffect, Fragment as Fragment$1 } from 'react';
+import dayjs from '../../../../node_modules/dayjs/dayjs.min.js';
+import qs from '../../../../node_modules/qs/lib/index.js';
+
+function CsvDownloader(props) {
+    const { defaultAttributes, defaultRelations, defaultStrapiAttributes, additionalDateTypes, fetchCSVData, entityCode = "FU", } = props;
+    const dateFieldOptions = [
+        ...defaultStrapiAttributes.map((attr) => attr.name),
+        ...additionalDateTypes,
+    ];
+    const [endDate, setEndDate] = useState(dayjs(Date.now()).startOf("day"));
+    const [dateType, setDateType] = useState("createdAt");
+    const [startDate, setStartDate] = useState(dayjs(endDate).subtract(1, "month"));
+    const [open, setOpen] = useState(false);
+    const [attributes, setAttributes] = useState([]);
+    const [relations, setRelations] = useState([]);
+    const [strapiAttributes, setStrapiAttributes] = useState([]);
+    const [openRelations, setOpenRelations] = useState([]);
+    const [csvData, setCsvData] = useState(null);
+    const csvLinkRef = useRef(null);
+    const [csvQuery, setCsvQuery] = useState("");
+    const handleAttributeChange = useCallback((e) => {
+        const { name } = e.target;
+        setAttributes((prev) => prev.includes(name)
+            ? prev.filter((attr) => attr !== name)
+            : [...prev, name]);
+    }, []);
+    const handleStrapiAttributeChange = useCallback((e) => {
+        const { name } = e.target;
+        setStrapiAttributes((prev) => prev.includes(name)
+            ? prev.filter((attr) => attr !== name)
+            : [...prev, name]);
+    }, []);
+    const handleRelationChange = useCallback((e) => {
+        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) => {
+        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) => {
+        setOpenRelations((prev) => prev.includes(name) ? prev.filter((rel) => rel !== name) : [...prev, name]);
+    }, []);
+    const selectAllAttributes = useCallback((e) => {
+        const { checked } = e.target;
+        setAttributes(checked ? defaultAttributes.map((a) => a.name) : []);
+    }, [defaultAttributes]);
+    const selectAllStrapiAttributes = useCallback((e) => {
+        const { checked } = e.target;
+        setStrapiAttributes(checked ? defaultStrapiAttributes.map((s) => s.name) : []);
+    }, [defaultStrapiAttributes]);
+    const selectAllRelations = useCallback((e) => {
+        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) => {
+                    const parsedItem = {};
+                    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, ...strapiAttributes],
+            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;
+            }, {}),
+        }, { encodeValuesOnly: true }));
+    }, [attributes, relations, startDate, endDate, dateType]);
+    return (jsx(Paper, { sx: { width: "100%", p: 2 }, children: jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: jsxs(Grid, { container: true, spacing: 2, children: [open && (jsxs(Fragment, { children: [jsxs(Grid, { size: 12, children: [jsx(Stack, { direction: "row", justifyContent: "flex-end", children: jsx(IconButton, { "aria-label": "expand row", size: "small", onClick: () => setOpen(!open), children: open ? jsx(KeyboardArrowUpIcon, {}) : jsx(KeyboardArrowDownIcon, {}) }) }), jsx(Divider, {})] }), jsx(Grid, { size: 12, children: jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [jsx(Typography, { variant: "h6", children: "Attributes" }), jsx(Checkbox, { checked: defaultAttributes.length === attributes.length, indeterminate: defaultAttributes.length !== attributes.length &&
+                                                attributes.length > 0, sx: { "& .MuiSvgIcon-root": { fontSize: 28 } }, onChange: selectAllAttributes })] }) }), defaultAttributes.map((attribute) => (jsx(Grid, { size: 4, children: jsxs(Stack, { spacing: 1, direction: "row", sx: { alignItems: "center" }, children: [jsx(Checkbox, { name: attribute.name, checked: attributes.includes(attribute.name), onChange: handleAttributeChange }), jsx(Typography, { children: attribute.label })] }) }, attribute.name))), jsx(Grid, { size: 12, children: jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [jsx(Typography, { variant: "h6", children: "Relations" }), jsx(Checkbox, { checked: defaultRelations.length === relations.length, indeterminate: defaultRelations.length !== relations.length &&
+                                                relations.length > 0, sx: { "& .MuiSvgIcon-root": { fontSize: 28 } }, onChange: selectAllRelations })] }) }), 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 (jsxs(Grid, { size: 12, children: [jsxs(Stack, { spacing: 1, direction: "row", sx: { alignItems: "center" }, children: [jsx(Checkbox, { name: relation.name, checked: relationChecked, indeterminate: relationIndeterminate, onChange: handleRelationChange }), jsx(Typography, { children: relation.label }), jsx(IconButton, { name: relation.name, onClick: () => toggleRelationOpen(relation.name), children: isOpen ? (jsx(KeyboardArrowDownIcon, {})) : (jsx(KeyboardArrowUpIcon, {})) })] }), jsx(Divider, {}), jsx(Collapse, { in: isOpen, children: jsx(Grid, { container: true, sx: { pl: 2 }, children: relation.attributes.map((attribute) => (jsx(Grid, { size: 3, children: jsxs(Stack, { spacing: 1, direction: "row", sx: { alignItems: "center" }, children: [jsx(Checkbox, { name: `${attribute.name}|${relation.name}`, checked: relations.some((rel) => rel.name === relation.name &&
+                                                                    rel.attributes.includes(attribute.name)), onChange: handleRelationAttributeChange, size: "small" }), jsx(Typography, { variant: "body2", children: attribute.label })] }) }, attribute.name))) }) })] }, relation.name));
+                            }), jsx(Grid, { size: 12, children: jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [jsx(Typography, { variant: "h6", children: "Creation, Publication and Update" }), jsx(Checkbox, { checked: defaultStrapiAttributes.length === strapiAttributes.length, indeterminate: defaultStrapiAttributes.length !==
+                                                strapiAttributes.length && strapiAttributes.length > 0, sx: { "& .MuiSvgIcon-root": { fontSize: 28 } }, onChange: selectAllStrapiAttributes })] }) }), defaultStrapiAttributes.map((strapi) => (jsx(Grid, { size: 4, children: jsxs(Stack, { spacing: 1, direction: "row", sx: { alignItems: "center" }, children: [jsx(Checkbox, { name: strapi.name, checked: strapiAttributes.includes(strapi.name), onChange: handleStrapiAttributeChange }), jsx(Typography, { children: strapi.label })] }) }, strapi.name))), jsx(Grid, { size: 12, children: jsx(Typography, { variant: "h6", children: "Select date range" }) }), jsx(Grid, { size: 12, children: jsxs(Stack, { direction: "row", spacing: 2, children: [jsx(Autocomplete, { value: dateType, options: dateFieldOptions, multiple: false, onChange: (e, newValue) => setDateType(newValue), renderInput: (params) => (jsx(TextField, { ...params, label: "Date Type" })), sx: { width: 300 }, disableClearable: true }), jsx(DatePicker, { value: startDate, label: "start date", onChange: (value) => value && setStartDate(value) }), jsx(DatePicker, { value: endDate, label: "end date", onChange: (value) => value && setEndDate(value) })] }) })] })), jsx(Grid, { size: 12, children: jsxs(Stack, { direction: "row", spacing: 2, sx: { justifyContent: "space-between" }, children: [jsxs(Fragment$1, { children: [jsx(Button, { variant: "contained", disabled: attributes.length === 0 && relations.length === 0, onClick: exportCSV, children: "Export CSV" }), csvData && (jsx(reactCsv.CSVLink, { data: csvData, filename: `${dayjs(startDate).format("DD-MM-YYYY")}_${dayjs(endDate).format("DD-MM-YYYY")}/${dateType}_${entityCode}-export.csv`, ref: csvLinkRef }))] }), jsx(IconButton, { "aria-label": "expand row", size: "small", onClick: () => setOpen(!open), children: open ? jsx(KeyboardArrowUpIcon, {}) : jsx(KeyboardArrowDownIcon, {}) })] }) })] }) }) }));
+}
+
+export { CsvDownloader as default };

package/dist/esm/src/components/common/markdown/MarkdownDisplay.js

@@ -0,0 +1,19 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx } from 'react/jsx-runtime';
+import MuiMarkdown from 'mui-markdown';
+import { Box } from '@mui/material';
+
+function MarkdownDisplay({ children, props, onClickCallback, sx, }) {
+    return (jsx(Box, { onClick: onClickCallback, sx: [
+            // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
+            ...(Array.isArray(sx) ? sx : [sx]),
+        ], children: jsx(MuiMarkdown, { ...props, children: children }) }));
+}
+
+export { MarkdownDisplay as default };

package/dist/esm/src/components/common/markdown/MarkdownEditor.js

@@ -0,0 +1,35 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx } from 'react/jsx-runtime';
+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 } from '@mui/material/styles';
+import MarkdownDisplay from './MarkdownDisplay.js';
+
+function MarkdownEditor({ name, label, defaultValue, sx, onChangeCallback, textfieldProps, }) {
+    const [markdown, setMarkdown] = React.useState(defaultValue || "");
+    const theme = useTheme();
+    const handleChange = (value) => {
+        setMarkdown(value);
+        onChangeCallback && onChangeCallback(value);
+    };
+    return (jsxs(Stack, { direction: "row", spacing: 2, sx: [
+            // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
+            ...(Array.isArray(sx) ? sx : [sx]),
+        ], children: [jsx(TextField, { name: name, label: label, multiline: true, 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 }), jsx(Box, { sx: { flex: 1 }, children: jsx(Paper, { sx: {
+                        p: 2,
+                        background: "none",
+                        border: `1px solid ${theme.palette.primary.main}`,
+                        height: "100%",
+                    }, children: jsx(MarkdownDisplay, { children: markdown }) }) })] }));
+}
+
+export { MarkdownEditor as default };

package/dist/esm/src/components/common/markdown/MarkdownTextField.js

@@ -0,0 +1,32 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import TextField from '@mui/material/TextField';
+import MarkdownDisplay from './MarkdownDisplay.js';
+
+function MarkdownTextField({ id, name, label, defaultValue = "", sx, onChangeCallback, }) {
+    const [isFocused, setIsFocused] = useState(false);
+    const [value, setValue] = useState(defaultValue);
+    const handleChange = (event) => {
+        const newValue = event.target.value;
+        setValue(newValue);
+        if (onChangeCallback) {
+            onChangeCallback(newValue);
+        }
+    };
+    return (jsxs(Fragment, { children: [jsx(TextField, { id: id, name: name, label: label, value: value, variant: "standard", fullWidth: true, multiline: true, onChange: handleChange, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), sx: {
+                    display: isFocused ? "block" : "none",
+                    "& .MuiInputBase-input": {
+                        color: "inherit",
+                        padding: 0,
+                    },
+                    ...sx,
+                } }), !isFocused && value && (jsx(MarkdownDisplay, { onClickCallback: () => setIsFocused(true), sx: { cursor: "pointer" }, children: value }))] }));
+}
+
+export { MarkdownTextField as default };

package/dist/esm/src/components/common/media/DenseEditMediaForm.js

@@ -0,0 +1,37 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx } from 'react/jsx-runtime';
+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.js';
+import { useActionState } from 'react';
+import { SubmitButton } from '../../SubmitButton.js';
+import { StrapiErrors } from '../../StrapiErrors.js';
+
+const INITIAL_STATE = {
+    zodErrors: null,
+    strapiErrors: null,
+    data: null,
+    message: null,
+};
+const DenseEditMediaForm = ({ data, }) => {
+    const [formState, formAction] = useActionState(updateMediaAction, INITIAL_STATE);
+    const { id, name, alternativeText, caption, url } = data;
+    return (jsxs("form", { action: formAction, children: [jsx("input", { id: "id", type: "hidden", name: "id", value: id }), jsxs(Stack, { spacing: 2, sx: { width: "100%" }, children: [jsx(Box, { width: 150, height: 150, position: "relative", children: jsx(Image, { src: `${process.env.NEXT_PUBLIC_STRAPI_URL}${url}`, fill: true, sizes: "100vw", style: {
+                                objectFit: "contain",
+                            }, alt: name }) }), jsx(TextField, { id: "name", name: "name", label: "name", defaultValue: name, variant: "outlined" }), jsx(TextField, { id: "alternativeText", name: "alternativeText", label: "alternativeText", defaultValue: alternativeText, variant: "outlined" }), jsx(TextField, { id: "caption", name: "caption", label: "caption", defaultValue: caption, variant: "outlined" }), jsxs(Stack, { direction: "row-reverse", spacing: 2, alignItems: "center", sx: {
+                            width: "100%",
+                            // backgroundColor: "secondary.dark",
+                            py: 1,
+                        }, children: [jsx(SubmitButton, { text: "save changes", loadingText: "loading" }), jsx(StrapiErrors, { error: formState?.strapiErrors }), formState?.message && (jsx(Alert, { severity: "error", children: formState?.message }))] })] })] }));
+};
+
+export { DenseEditMediaForm };

package/dist/esm/src/components/common/media/EditMediaDialog.js

@@ -0,0 +1,19 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import { DenseEditMediaForm } from './DenseEditMediaForm.js';
+import Button from '@mui/material/Button';
+import { DialogActions } from '@mui/material';
+
+function EditMediaDialog({ open, handleClose, data, }) {
+    return (jsxs(Dialog, { open: open, fullWidth: true, maxWidth: "lg", children: [jsx(DialogTitle, { children: data.name }), jsx(DialogContent, { children: jsx(DenseEditMediaForm, { data: data }) }), jsx(DialogActions, { children: jsx(Button, { onClick: handleClose, children: "close" }) })] }));
+}
+
+export { EditMediaDialog as default };

package/dist/esm/src/components/common/media/MediaGrid.js

@@ -0,0 +1,33 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, Fragment } from 'react';
+import Grid from '@mui/material/Grid';
+import { MediaItem } from './MediaItem.js';
+import EditMediaDialog from './EditMediaDialog.js';
+
+function MediaGrid({ mediaArray, selected = [], handleSelect, }) {
+    const [openDialog, setOpenDialog] = useState(false);
+    const [openItem, setOpenItem] = useState(null);
+    const handleButtonClick = async (index) => {
+        setOpenItem(index);
+        setOpenDialog(true);
+    };
+    const handleClose = () => {
+        setOpenDialog(false);
+        openItem !== null && setOpenItem(null);
+    };
+    return (jsx(Grid, { container: true, spacing: 2, children: mediaArray?.length > 0 &&
+            mediaArray.map((item, index) => {
+                return (jsxs(Fragment, { children: [jsx(EditMediaDialog, { open: openDialog && openItem === index, handleClose: handleClose, data: item }), jsx(Grid, { size: 3, children: jsx(MediaItem, { mediaItem: item, isSelected: selected.findIndex((select) => select.id === item.id) !== -1, onClick: handleSelect
+                                    ? () => handleSelect(item)
+                                    : () => handleButtonClick(index) }) })] }, item.id));
+            }) }));
+}
+
+export { MediaGrid };