umwd-components 0.1.840 → 0.1.841

package/dist/esm/umwd-components/src/components/common/media/MediaItem.js

@@ -0,0 +1,36 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx } from 'react/jsx-runtime';
+import Card from '@mui/material/Card';
+import CardMedia from '@mui/material/CardMedia';
+import CardActionArea from '@mui/material/CardActionArea';
+
+function MediaItem({ mediaItem, onClick, isSelected = false, }) {
+    const mediaLink = () => {
+        if (mediaItem.formats?.small?.url !== undefined) {
+            return `${process.env.NEXT_PUBLIC_STRAPI_URL}${mediaItem.formats?.small?.url}`;
+        }
+        else if (mediaItem.formats?.thumbnail?.url !== undefined) {
+            return `${process.env.NEXT_PUBLIC_STRAPI_URL}${mediaItem.formats?.thumbnail?.url}`;
+        }
+        else {
+            return `${process.env.NEXT_PUBLIC_STRAPI_URL}${mediaItem.url}`;
+        }
+    };
+    return (jsx(Card, { sx: [
+            { maxWidth: 345, height: "100%" },
+            isSelected && { outline: "2px solid blue" },
+        ], children: jsx(CardActionArea, { sx: {
+                backgroundColor: "#ddd",
+                opacity: 0.8,
+                backgroundImage: " repeating-linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000), repeating-linear-gradient(45deg, #000 25%, #ddd 25%, #ddd 75%, #000 75%, #000)",
+                backgroundPosition: "0 0, 10px 10px",
+                backgroundSize: "20px 20px",
+            }, onClick: onClick, children: jsx(CardMedia, { sx: { height: 140 }, image: mediaLink(), title: mediaItem.name }) }) }));
+}
+
+export { MediaItem };

package/dist/esm/umwd-components/src/components/common/media/MediaLibraryDialog.js

@@ -0,0 +1,40 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { MediaGrid } from './MediaGrid.js';
+import { UploadMediaForm } from './UploadMediaForm.js';
+import Dialog from '@mui/material/Dialog';
+import Button from '@mui/material/Button';
+import Divider from '@mui/material/Divider';
+import Stack from '@mui/material/Stack';
+import { DialogTitle, DialogContent, Typography, DialogActions } from '@mui/material';
+import { getAllMedia } from '../../../data/loaders/common/media/getAllMedia.js';
+
+function MediaLibraryDialog({ 
+// mediaArray,
+open, handleClose, handleCancel, selected, handleSelect, }) {
+    const [media, setMedia] = useState();
+    useEffect(() => {
+        async function fetchData() {
+            const mediaArr = await getAllMedia();
+            setMedia(mediaArr);
+        }
+        fetchData();
+    }, []);
+    const handleRevalidate = () => {
+        const fetchData = async () => {
+            const mediaArr = await getAllMedia();
+            setMedia(mediaArr);
+        };
+        fetchData();
+    };
+    return (jsxs(Dialog, { open: open, fullWidth: true, maxWidth: "lg", children: [jsx(DialogTitle, { children: "Media Library" }), jsx(DialogContent, { children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "body2", children: "Upload media to use in your content" }), jsx(UploadMediaForm, { revalidateCallback: handleRevalidate }), jsx(Divider, {}), jsx(Typography, { variant: "body2", children: "Select media to use in your content" }), media && (jsx(MediaGrid, { mediaArray: media, selected: selected, handleSelect: handleSelect }))] }) }), jsxs(DialogActions, { children: [jsx(Button, { variant: "outlined", onClick: handleCancel, children: "Close" }), selected.length > 0 && (jsx(Button, { variant: "contained", onClick: handleClose, children: `Use selected file${selected.length > 1 ? "s" : ""}` }))] })] }));
+}
+
+export { MediaLibraryDialog };

package/dist/esm/umwd-components/src/components/common/media/UploadBase64MediaForm.js

@@ -0,0 +1,68 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useActionState, useRef, useEffect } from 'react';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import { uploadBase64MediaAction } from '../../../data/actions/media/uploadBase64MediaAction.js';
+import { StrapiErrors } from '../../StrapiErrors.js';
+import { ZodErrors } from '../../ZodErrors.js';
+import Alert from '@mui/material/Alert';
+import { SubmitButton } from '../../SubmitButton.js';
+
+const INITIAL_STATE = {
+    zodErrors: null,
+    strapiErrors: null,
+    data: null,
+    message: null,
+};
+function UploadBase64MediaForm({ reference, refID, field, multiple = true, accept = "image/*", path = "api/ipos", componentName = "", componentReference, revalidateCallback, }) {
+    const [filePreviews, setFilePreviews] = useState(null);
+    const [fileList, setFileList] = useState(null);
+    const uploadBase64MediaActionWithParams = uploadBase64MediaAction.bind(null, path, refID || "", componentName);
+    const [formState, formAction] = useActionState(uploadBase64MediaActionWithParams, INITIAL_STATE);
+    const fileInput = useRef(null);
+    useEffect(() => {
+        if (formState.data && revalidateCallback) {
+            revalidateCallback();
+        }
+    }, [formState.data]);
+    return (jsx("form", { action: formAction, id: field, children: jsx(Box, { sx: [
+                filePreviews &&
+                    filePreviews.length > 0 && { border: "2px solid red", p: 1 },
+            ], children: jsxs(Stack, { spacing: 1, sx: { flex: 1 }, children: [reference && (jsx("input", { type: "text", name: "ref", value: reference, style: { display: "none" }, readOnly: true })), refID && (jsx("input", { type: "text", name: "refId", value: refID, style: { display: "none" }, readOnly: true })), " ", field && (jsx("input", { type: "text", name: "field", value: field, style: { display: "none" }, readOnly: true })), jsx("input", { id: "component_name", type: "hidden", name: `${componentName}.__component`, value: componentReference }), filePreviews !== null ? (jsx(Box, { onClick: () => fileInput.current?.click(), sx: {
+                            p: 2,
+                            width: "100%",
+                            border: "1px dashed white",
+                            minHeight: "100px",
+                        }, children: jsx(Stack, { spacing: 1, justifyContent: "flex-end", children: filePreviews.map((file, index) => {
+                                return (jsxs(Fragment, { children: [jsx(Typography, { children: file.name }, index), jsx("img", { src: file.url, alt: file.name, style: { width: "100px" } }, index)] }));
+                            }) }) })) : (jsx(Box, { onClick: () => fileInput.current?.click(), sx: {
+                            p: 2,
+                            width: "100%",
+                            border: "1px dashed white",
+                            minHeight: "100px",
+                            cursor: "pointer",
+                        }, children: jsxs(Typography, { children: ["No file", `${multiple ? "s" : ""}`, " selected for upload"] }) })), jsxs(Stack, { direction: "column", spacing: 2, alignItems: "center", justifyContent: "space-between", children: [jsx(StrapiErrors, { error: formState.strapiErrors }), jsx(ZodErrors, { error: formState.zodErrors?.image }), formState?.message && (jsx(Alert, { severity: "error", children: formState?.message })), jsxs(Box, { children: [jsx("label", { htmlFor: "pictureInput", children: jsx("input", { id: "pictureInput", accept: accept.toString(), multiple: multiple, type: "file", name: "files", ref: fileInput, onChange: (e) => {
+                                                const selectedFiles = e.target.files;
+                                                if (selectedFiles === null) {
+                                                    return;
+                                                }
+                                                const filePreviews = Object.keys(selectedFiles).map((item, index) => {
+                                                    return {
+                                                        url: URL.createObjectURL(selectedFiles[index]),
+                                                        name: selectedFiles[index].name,
+                                                    };
+                                                });
+                                                setFileList(selectedFiles);
+                                                setFilePreviews(filePreviews);
+                                            }, style: { display: "none" } }) }), fileList !== null && (jsx(SubmitButton, { text: "upload", loadingText: "loading" }))] })] })] }) }) }));
+}
+
+export { UploadBase64MediaForm };

package/dist/esm/umwd-components/src/components/common/media/UploadMediaForm.js

@@ -0,0 +1,77 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useActionState, useRef, useEffect } from 'react';
+import { uploadMediaAction } from '../../../data/actions/media/uploadMediaAction.js';
+import { StrapiErrors } from '../../StrapiErrors.js';
+import { ZodErrors } from '../../ZodErrors.js';
+import { SubmitButton } from '../../SubmitButton.js';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import Alert from '@mui/material/Alert';
+
+const INITIAL_STATE = {
+    zodErrors: null,
+    strapiErrors: null,
+    data: null,
+    message: null,
+};
+function UploadMediaForm({ reference, refID, field, multiple = true, accept = "image/*", revalidateCallback, }) {
+    const [filePreviews, setFilePreviews] = useState(null);
+    const [fileList, setFileList] = useState(null);
+    const [formState, formAction] = useActionState(uploadMediaAction, INITIAL_STATE);
+    const fileInput = useRef(null);
+    useEffect(() => {
+        if (formState.data) {
+            revalidateCallback?.();
+        }
+    }, [formState.data]);
+    return (jsx("form", { action: formAction, children: jsxs(Stack, { spacing: 2, sx: { flex: 1 }, children: [reference && (jsx("input", { type: "text", name: "ref", value: reference, style: { display: "none" }, readOnly: true })), refID && (jsx("input", { type: "text", name: "refId", value: refID, style: { display: "none" }, readOnly: true })), field && (jsx("input", { type: "text", name: "field", value: field, style: { display: "none" }, readOnly: true })), filePreviews !== null ? (jsx(Box, { onClick: () => fileInput.current?.click(), sx: {
+                        p: 2,
+                        width: "100%",
+                        border: "1px dashed white",
+                        minHeight: "100px",
+                    }, children: accept === undefined || accept === "image/*" ? (jsx(Grid, { container: true, children: filePreviews.map((image, index) => {
+                            return (jsx(Grid, { size: {
+                                    xs: 12,
+                                    sm: 6,
+                                    md: 4,
+                                    lg: 2,
+                                }, children: jsx("img", { src: image.url, alt: image.name, style: { width: "100px" } }, index) }, index));
+                        }) })) : (jsx(Grid, { container: true, children: filePreviews.map((file, index) => {
+                            return (jsx(Grid, { size: {
+                                    xs: 12,
+                                    sm: 6,
+                                    md: 4,
+                                    lg: 2,
+                                }, children: jsx(Typography, { children: file.name }) }, index));
+                        }) })) })) : (jsx(Box, { onClick: () => fileInput.current?.click(), sx: {
+                        p: 2,
+                        width: "100%",
+                        border: "1px dashed white",
+                        minHeight: "100px",
+                        cursor: "pointer",
+                    }, children: jsxs(Typography, { children: ["No file", `${multiple ? "s" : ""}`, " selected, click here to start uploading new files"] }) })), jsxs(Stack, { direction: "column", spacing: 2, alignItems: "center", justifyContent: "space-between", children: [jsx(StrapiErrors, { error: formState.strapiErrors }), jsx(ZodErrors, { error: formState.zodErrors?.image }), formState?.message && (jsx(Alert, { severity: "error", children: formState?.message })), jsxs(Box, { children: [jsx("label", { htmlFor: "pictureInput", children: jsx("input", { id: "pictureInput", accept: accept.toString(), multiple: multiple, type: "file", name: "files", ref: fileInput, onChange: (e) => {
+                                            const selectedFiles = e.target.files;
+                                            if (selectedFiles === null) {
+                                                return;
+                                            }
+                                            const filePreviews = Object.keys(selectedFiles).map((item, index) => {
+                                                return {
+                                                    url: URL.createObjectURL(selectedFiles[index]),
+                                                    name: selectedFiles[index].name,
+                                                };
+                                            });
+                                            setFileList(selectedFiles);
+                                            setFilePreviews(filePreviews);
+                                        }, style: { display: "none" } }) }), fileList !== null && (jsx(SubmitButton, { text: "upload", loadingText: "loading" }))] })] })] }) }));
+}
+
+export { UploadMediaForm };

package/dist/esm/umwd-components/src/components/common/media/minio/MinioDeleteFormButton.js

@@ -0,0 +1,41 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx } from 'react/jsx-runtime';
+import { IconButton } from '@mui/material';
+import { useActionState, useEffect } from 'react';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { deleteMinioMediaAction } from '../../../../data/actions/media/minio/deleteMinioMediaAction.js';
+import { useSnackbar } from '../../../../context/common/SnackbarContext.js';
+
+const INITIAL_STATE = {
+    zodErrors: null,
+    strapiErrors: null,
+    data: null,
+    message: null,
+};
+const MinioDeleteFormButton = ({ bucketName, fileName, revalidateCallback, }) => {
+    const boundAction = deleteMinioMediaAction.bind(null, bucketName, fileName);
+    const [formState, formAction] = useActionState(boundAction, INITIAL_STATE);
+    const { handleAddMessage } = useSnackbar();
+    useEffect(() => {
+        if (formState.message) {
+            handleAddMessage({
+                message: formState.message,
+                severity: formState.severity || "info",
+            });
+        }
+    }, [formState.message]);
+    useEffect(() => {
+        if (formState.message && formState.message.type === "success") {
+            revalidateCallback?.();
+        }
+    }, [formState.message]);
+    return (jsx("form", { action: formAction, children: jsx(IconButton, { type: "submit", color: "error", size: "small", children: jsx(DeleteIcon, {}) }) }));
+};
+
+export { MinioDeleteFormButton };

package/dist/esm/umwd-components/src/components/common/media/minio/MinioDisplay.js

@@ -0,0 +1,22 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Stack, Typography } from '@mui/material';
+import { MinioDownloadButton } from './MinioDownloadButton.js';
+import { MinioDeleteFormButton } from './MinioDeleteFormButton.js';
+
+/**
+ * MinioDisplay component to show file information about a single minio file and actions such as download and delete.
+ * @param param0 - Props containing file information and actions
+ * @returns MinioDisplay component
+ */
+const MinioDisplay = ({ fileSize, mimeType, fileName, bucketName, direction = "column", revalidateCallback, }) => {
+    return (jsxs(Stack, { direction: direction, spacing: 1, marginTop: 1, alignItems: direction === "column" ? "flex-start" : "center", justifyContent: direction === "column" ? "flex-start" : "space-between", children: [jsxs(Typography, { children: ["File: ", fileName] }), jsxs(Typography, { variant: "body2", children: ["Size: ", fileSize, " bytes"] }), jsxs(Typography, { variant: "body2", children: ["Type: ", mimeType] }), jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", justifyContent: "center", width: "min-content", children: [jsx(MinioDownloadButton, { bucketName: bucketName || "umwd", fileName: fileName || "" }), jsx(MinioDeleteFormButton, { bucketName: bucketName || "umwd", fileName: fileName || "", revalidateCallback: revalidateCallback })] })] }));
+};
+
+export { MinioDisplay };

package/dist/esm/umwd-components/src/components/common/media/minio/MinioDownloadButton.js

@@ -0,0 +1,24 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx } from 'react/jsx-runtime';
+import { IconButton } from '@mui/material';
+import { getMinioSignedUrl } from '../../../../data/loaders/common/media/minio/getMinioSignedUrl.js';
+import { downloadMinioItemClient } from '../../../../data/loaders/common/media/minio/downloadMinioItemClient.js';
+import DownloadIcon from '@mui/icons-material/Download';
+
+const MinioDownloadButton = ({ bucketName, fileName, }) => {
+    const handleDownload = async () => {
+        const { signedUrl } = await getMinioSignedUrl(bucketName, fileName);
+        if (signedUrl) {
+            downloadMinioItemClient(signedUrl, fileName);
+        }
+    };
+    return (jsx(IconButton, { onClick: handleDownload, children: jsx(DownloadIcon, {}) }));
+};
+
+export { MinioDownloadButton };

package/dist/esm/umwd-components/src/components/common/media/minio/MinioItemList.js

@@ -0,0 +1,27 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx } from 'react/jsx-runtime';
+import { List, ListItem, ListItemText } from '@mui/material';
+import { MinioDisplay } from './MinioDisplay.js';
+
+/**
+ * MinioItemList component to display a list of Minio file references
+ * @param items - Array of MinioFileReference objects
+ * @param emptyMessage - Message to display when no items are present
+ * @param bucketName - Default bucket name for files (defaults to "umwd")
+ * @param direction - Direction for MinioDisplay component (defaults to "row")
+ * @param revalidateCallback - Callback function to refresh data after actions
+ */
+const MinioItemList = ({ items, emptyMessage = "No attachments found.", bucketName = "umwd", direction = "row", revalidateCallback, }) => {
+    if (!items || items.length === 0) {
+        return (jsx(List, { children: jsx(ListItem, { children: jsx(ListItemText, { primary: emptyMessage }) }) }));
+    }
+    return (jsx(List, { children: items.map((item, index) => (jsx(ListItem, { children: jsx(MinioDisplay, { fileName: item.fileName, fileSize: item.fileSize, bucketName: item.bucketName || bucketName, mimeType: item.mimeType || "application/octet-stream", direction: direction, revalidateCallback: revalidateCallback }) }, item.documentId || index))) }));
+};
+
+export { MinioItemList };

package/dist/esm/umwd-components/src/components/common/media/minio/UploadMinioMediaForm.js

@@ -0,0 +1,146 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useActionState, useRef, useEffect } from 'react';
+import { uploadMinioMediaAction } from '../../../../data/actions/media/minio/uploadMinioMediaAction.js';
+import { useSnackbar } from '../../../../context/common/SnackbarContext.js';
+import { StrapiErrors } from '../../../StrapiErrors.js';
+import { ZodErrors } from '../../../ZodErrors.js';
+import { SubmitButton } from '../../../SubmitButton.js';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import Button from '@mui/material/Button';
+
+const INITIAL_STATE = {
+    zodErrors: null,
+    strapiErrors: null,
+    data: null,
+    message: null,
+    severity: null,
+};
+function UploadMinioMediaForm({ bucketName = process.env.MINIO_BUCKET_NAME || "umwd", multiple = false, accept = process.env.MINIO_ACCEPTED_FILE_TYPES || [
+    "image/jpeg",
+    "image/jpg",
+    "image/png",
+    "image/webp",
+    "image/gif",
+    "application/msword",
+    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+    "application/vnd.ms-excel",
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    "application/vnd.ms-powerpoint",
+    "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+    "application/pdf",
+    "text/plain",
+    "text/markdown",
+    "text/csv",
+    "application/vnd.oasis.opendocument.text",
+    "application/vnd.oasis.opendocument.spreadsheet",
+    "application/vnd.oasis.opendocument.presentation",
+], reference, refID, field, revalidateCallback, sx, handleClose, }) {
+    const [filePreviews, setFilePreviews] = useState(null);
+    const [fileList, setFileList] = useState(null);
+    const [formState, formAction] = useActionState(uploadMinioMediaAction, INITIAL_STATE);
+    const fileInput = useRef(null);
+    const { handleAddMessage } = useSnackbar();
+    useEffect(() => {
+        if (formState?.message) {
+            handleAddMessage({
+                message: formState.message,
+                severity: formState.severity || "error",
+            });
+            if (formState.severity === "success") {
+                revalidateCallback && revalidateCallback();
+                handleClose && handleClose();
+                // Reset form state
+                setFileList(null);
+                setFilePreviews(null);
+                if (fileInput.current) {
+                    fileInput.current.value = "";
+                }
+            }
+        }
+    }, [formState?.message, handleAddMessage, revalidateCallback, handleClose]);
+    useEffect(() => {
+        if (formState?.strapiErrors) {
+            handleAddMessage({
+                message: formState.strapiErrors.message || "Error uploading files",
+                severity: "error",
+            });
+        }
+    }, [formState?.strapiErrors, handleAddMessage]);
+    const isImageFile = (file) => {
+        const imageExtensions = [
+            ".jpg",
+            ".jpeg",
+            ".png",
+            ".gif",
+            ".webp",
+            ".svg",
+            ".bmp",
+        ];
+        return imageExtensions.some((ext) => file.name.toLowerCase().endsWith(ext));
+    };
+    const shouldShowImagePreviews = () => {
+        if (accept === "image/*")
+            return true;
+        if (Array.isArray(accept) &&
+            accept.some((type) => type.startsWith("image/"))) {
+            return filePreviews?.every((file) => isImageFile(file)) || false;
+        }
+        return false;
+    };
+    return (jsx(Box, { sx: [...(Array.isArray(sx) ? sx : [sx])], children: jsx("form", { action: formAction, children: jsxs(Grid, { container: true, spacing: 2, children: [jsxs(Grid, { size: { xs: 12 }, children: [reference && refID && field && (jsxs(Fragment, { children: [jsx("input", { type: "text", name: "reference", value: reference, style: { display: "none" }, readOnly: true }), jsx("input", { type: "text", name: "refID", value: refID, style: { display: "none" }, readOnly: true }), jsx("input", { type: "text", name: "field", value: field, style: { display: "none" }, readOnly: true })] })), bucketName && (jsx("input", { type: "text", name: "bucketName", value: bucketName, style: { display: "none" }, readOnly: true })), filePreviews !== null ? (jsx(Box, { onClick: () => fileInput.current?.click(), sx: {
+                                    p: 2,
+                                    width: "100%",
+                                    border: "1px dashed white",
+                                    minHeight: "100px",
+                                    cursor: "pointer",
+                                }, children: shouldShowImagePreviews() ? (jsx(Grid, { container: true, spacing: 1, children: filePreviews.map((file, index) => {
+                                        return (jsxs(Grid, { size: {
+                                                xs: 12,
+                                                sm: 6,
+                                                md: 4,
+                                                lg: 2,
+                                            }, children: [jsx("img", { src: file.url, alt: file.name, style: {
+                                                        width: "100px",
+                                                        height: "100px",
+                                                        objectFit: "cover",
+                                                    } }), jsx(Typography, { variant: "caption", sx: { display: "block", mt: 1 }, children: file.name })] }, index));
+                                    }) })) : (jsx(Grid, { container: true, spacing: 1, children: filePreviews.map((file, index) => {
+                                        return (jsx(Grid, { size: {
+                                                xs: 12,
+                                                sm: 6,
+                                                md: 4,
+                                                lg: 2,
+                                            }, children: jsx(Typography, { children: file.name }) }, index));
+                                    }) })) })) : (jsx(Box, { onClick: () => fileInput.current?.click(), sx: {
+                                    p: 2,
+                                    width: "100%",
+                                    border: "1px dashed white",
+                                    minHeight: "100px",
+                                    cursor: "pointer",
+                                }, children: jsxs(Typography, { children: ["No file", `${multiple ? "s" : ""}`, " selected, click here to start uploading new files"] }) })), jsx("input", { id: "minioInput", accept: typeof accept === "string" ? accept : accept.join(","), multiple: multiple, type: "file", name: "files", ref: fileInput, onChange: (e) => {
+                                    const selectedFiles = e.target.files;
+                                    if (selectedFiles === null || selectedFiles.length === 0) {
+                                        return;
+                                    }
+                                    const filePreviews = Array.from(selectedFiles).map((file) => {
+                                        return {
+                                            url: URL.createObjectURL(file),
+                                            name: file.name,
+                                        };
+                                    });
+                                    setFileList(selectedFiles);
+                                    setFilePreviews(filePreviews);
+                                }, style: { display: "none" } })] }), jsxs(Grid, { size: { xs: 12 }, children: [jsx(StrapiErrors, { error: formState.strapiErrors }), jsx(ZodErrors, { error: formState.zodErrors?.files })] }), jsx(Grid, { size: { xs: 12 }, children: jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [handleClose && (jsx(Button, { onClick: handleClose, variant: "outlined", children: "Cancel" })), fileList !== null && (jsx(SubmitButton, { text: `Upload ${fileList.length} file${fileList.length > 1 ? "s" : ""}`, loadingText: "Uploading...", variant: "contained" }))] }) })] }) }) }));
+}
+
+export { UploadMinioMediaForm };

package/dist/esm/umwd-components/src/components/common/snackbar/GlobalSnackbar.js

@@ -0,0 +1,32 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx } from 'react/jsx-runtime';
+import Snackbar from '@mui/material/Snackbar';
+import Alert from '@mui/material/Alert';
+import Box from '@mui/material/Box';
+import { useSnackbar } from '../../../context/common/SnackbarContext.js';
+
+function GlobalSnackbar() {
+    const { state, dispatch } = useSnackbar();
+    const displayMessages = state.messages.filter((message) => message.open === true);
+    const handleClose = (event, reason, id) => {
+        if (reason === "clickaway") {
+            return;
+        }
+        const newMessages = [...state.messages];
+        const index = newMessages.findIndex((message) => message.id === id);
+        newMessages[index].open = false;
+        dispatch({ type: "ADD_MESSAGE", payload: newMessages });
+    };
+    return (jsx(Box, { children: displayMessages &&
+            displayMessages.length > 0 &&
+            displayMessages.map((message, index) => {
+                return (jsx(Snackbar, { open: message.open, autoHideDuration: 3000, onClose: (event, reason) => handleClose(event, reason, message.id), sx: { translate: `0px -${60 * index}px`, minWidth: "400px" }, children: jsx(Alert, { onClose: (event) => handleClose(event, "clickaway", message.id), severity: message.severity, sx: { width: "100%" }, children: message.message }) }, index));
+            }) }));
+}
+
+export { GlobalSnackbar as default };

package/dist/esm/umwd-components/src/components/common/socials/Socials.js

@@ -0,0 +1,29 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Stack from '@mui/material/Stack';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import IconButton from '@mui/material/IconButton';
+import { Delete } from '@mui/icons-material';
+
+function SocialsDisplay({ data, }) {
+    const { documentId, name, url, icon, onClick } = data;
+    return (jsx(Stack, { children: jsxs(Stack, { spacing: 2, direction: "row", children: [jsx(AccountCircleIcon, {}), jsxs(Stack, { children: [jsx(Typography, { children: name }), jsx(Typography, { children: url }), onClick && (jsx(Button, { onClick: (e) => {
+                                if (documentId) {
+                                    onClick(e, documentId);
+                                }
+                            }, children: "Edit" }))] })] }) }));
+}
+function SocialsFields({ data, componentName, componentReference, deleteCallback, }) {
+    const { documentId, name, url } = data || {};
+    return (jsxs(Stack, { spacing: 1, children: [documentId && (jsx("input", { id: `${componentName}.documentId`, type: "hidden", name: `${componentName}.documentId`, value: documentId })), jsxs(Stack, { spacing: 1, direction: "row", children: [jsx(TextField, { id: "name", name: `${componentName}.name`, label: "Name of social media", defaultValue: name || "" }), deleteCallback && (jsx(IconButton, { onClick: deleteCallback, children: jsx(Delete, {}) }))] }), jsx(TextField, { id: "url", name: `${componentName}.url`, label: "URL", defaultValue: url || "" })] }));
+}
+
+export { SocialsFields, SocialsDisplay as default };

package/dist/esm/umwd-components/src/components/e-commerce/cart/AddToCartButton.client.js

@@ -0,0 +1,30 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Button from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
+import Link from 'next/link';
+import { useCart } from '../../../context/e-commerce/cart/CartContext.js';
+import { useTheme } from '@mui/material/styles';
+import { Typography } from '@mui/material';
+
+const AddToCartButton = ({ product }) => {
+    const { dispatch } = useCart();
+    const addToCart = () => {
+        dispatch({ type: "ADD_ITEM", payload: product });
+    };
+    useTheme();
+    if (product.stock <= 0) {
+        const subject = `quotation request for ${product.product_number} - ${product.title}`;
+        const contactUrl = `/contact?subject=${encodeURIComponent(subject)}`;
+        return (jsxs(Stack, { direction: "column", spacing: 1, children: [jsx(Typography, { variant: "body2", color: "error", align: "right", children: "Out of stock" }), jsx(Link, { href: contactUrl, passHref: true, children: jsx(Button, { size: "small", variant: "contained", color: "warning", children: "Request a Quotation" }) })] }));
+    }
+    return (jsx(Button, { size: "small", variant: "contained", onClick: addToCart, children: "Add to Card" }));
+};
+
+export { AddToCartButton as default };

package/dist/esm/umwd-components/src/components/e-commerce/cart/CartDisplay.js

@@ -0,0 +1,28 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Grid from '@mui/material/Grid';
+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 CircularProgress from '@mui/material/CircularProgress';
+import Link from 'next/link';
+import { useClientSideCart } from './hooks.js';
+import CartSummary from './CartSummary.js';
+
+function CartDisplay({ data }) {
+    const { shopUrl = "/shop", checkoutUrl = "/shop/check-out" } = data;
+    const { state, isClient } = useClientSideCart();
+    if (!isClient) {
+        return jsx(CircularProgress, {});
+    }
+    return (jsxs(Grid, { container: true, spacing: 2, sx: { py: 3, minHeight: "60vh" }, children: [jsx(Grid, { size: 12, children: jsx(Typography, { variant: "h4", align: "center", component: "h1", children: "My cart" }) }), jsx(Grid, { size: 12, children: jsx(Paper, { sx: { width: "100%", p: 2 }, children: jsxs(Stack, { spacing: 2, children: [jsx(CartSummary, {}), state.items.length > 0 && (jsxs(Stack, { spacing: 2, children: [jsxs(Stack, { direction: "row", children: [jsx(Typography, { sx: { width: "10%" } }), jsx(Typography, { sx: { width: "60%", color: "#555" }, children: "Total excl. VAT" }), jsxs(Typography, { sx: { width: "30%", color: "#555" }, align: "right", children: ["\u20AC ", state.totalExVAT.toFixed(2)] })] }), jsxs(Stack, { direction: "row", children: [jsx(Typography, { sx: { width: "10%" } }), jsx(Typography, { sx: { width: "60%", color: "#555" }, children: "Total VAT" }), jsxs(Typography, { sx: { width: "30%", color: "#555" }, align: "right", children: ["\u20AC ", state.totalVAT.toFixed(2)] })] }), jsxs(Stack, { direction: "row", children: [jsx(Typography, { sx: { width: "10%" } }), jsx(Typography, { sx: { width: "60%", color: "#555", fontWeight: 600 }, children: "Total" }), jsxs(Typography, { sx: { width: "30%", color: "#555", fontWeight: 600 }, align: "right", children: ["\u20AC ", state.totalInclVAT.toFixed(2)] })] })] })), jsxs(Stack, { spacing: 2, justifyContent: "space-between", children: [jsx(Link, { href: shopUrl, legacyBehavior: true, children: jsx(Button, { variant: "outlined", children: "Continue shopping" }) }), state.items.length > 0 && (jsx(Link, { href: checkoutUrl, legacyBehavior: true, children: jsx(Button, { variant: "contained", children: "Check Out" }) }))] })] }) }) })] }));
+}
+
+export { CartDisplay as default };