umwd-components 0.1.769 → 0.1.770

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

@@ -7,9 +7,13 @@
   
 import { jsx } from 'react/jsx-runtime';
 import MuiMarkdown from 'mui-markdown';
+import { Box } from '@mui/material';
 
-function MarkdownDisplay({ children, props, }) {
-    return jsx(MuiMarkdown, { ...props, children: children });
+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/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/page-builder/PBCategoryBlock.js

@@ -1,4 +1,3 @@
-"use client";
 /*
  * UMWD-Components
  * @copyright Jelle Paulus
@@ -13,23 +12,29 @@ import Stack from '@mui/material/Stack';
 import Divider from '@mui/material/Divider';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import TextField from '@mui/material/TextField';
 import { useTheme } from '@mui/material/styles';
 import { setOpacity } from '../../lib/utils.js';
 import ProductCard from '../e-commerce/products/ProductCard.js';
 import MarkdownDisplay from '../common/markdown/MarkdownDisplay.js';
 
-function PBCategoryBlock({ data, }) {
+function PBCategoryBlock({ data, index, }) {
     const { maxWidth = "lg", sx = {}, glass = false, previewAmount = 3 } = data;
     const theme = useTheme();
-    return (jsx(Container, { maxWidth: maxWidth, sx: { my: 1, ...sx }, children: jsx(Grid, { container: true, spacing: 2, children: jsx(Grid, { size: 12, children: jsx(Paper, { sx: {
-                        p: 2,
-                        backdropFilter: "blur(3px)",
-                        backgroundColor: setOpacity(theme.palette.background.paper, glass ? 0.1 : 1),
-                        border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none",
-                    }, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h4", component: "a", href: `/shop/categories/${data.category.slug}`, sx: { textDecoration: "none", color: "inherit" }, children: data.category.title }), data.category?.description &&
-                                typeof data.category.description === "string" && (jsx(MarkdownDisplay, { children: data.category.description.substring(0, 150) + "..." })), jsx(Button, { variant: "contained", href: `/shop/categories/${data.category.slug}`, children: "Learn More" }), data.category?.products?.data != undefined && (jsxs(Fragment, { children: [jsx(Divider, { sx: { my: 2 } }), jsx(Stack, { direction: { xs: "column", sm: "row" }, spacing: 2, justifyContent: "space-around", sx: { pt: 2 }, children: data.category.products.data
-                                            .slice(0, previewAmount)
-                                            .map((product) => (jsx(ProductCard, { product: product }, product.documentId))) })] })), jsx(Typography, { variant: "body2", component: "a", href: `/shop/categories/${data.category.slug}`, sx: { textDecoration: "none", color: "inherit" }, children: "Show all" })] }) }) }) }) }));
+    return (jsx(Container, { maxWidth: maxWidth || "lg", sx: { my: 1, ...sx }, children: jsx(Box, { sx: { p: 1, border: `1px dashed ${theme.palette.primary.main}` }, children: jsx(Grid, { container: true, spacing: 2, children: jsx(Grid, { size: 12, children: jsx(Paper, { sx: {
+                            p: 2,
+                            backdropFilter: "blur(3px)",
+                            backgroundColor: setOpacity(theme.palette.background.paper, glass ? 0.1 : 1),
+                            border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none",
+                        }, children: jsxs(Stack, { spacing: 2, children: [jsx(TextField, { id: "title", name: "title", label: "Title", defaultValue: data.category.title, variant: "outlined", fullWidth: true, InputProps: {
+                                        readOnly: true,
+                                    }, sx: { mb: 2 } }), jsx(TextField, { id: "description", name: "description", label: "Description", defaultValue: data.category.description, variant: "outlined", fullWidth: true, InputProps: {
+                                        readOnly: true,
+                                    } }), data.category?.description &&
+                                    typeof data.category.description === "string" && (jsx(MarkdownDisplay, { children: data.category.description.substring(0, 150) + "..." })), jsx(Button, { variant: "contained", href: `/shop/categories/${data.category.slug}`, children: "Learn More" }), data.category?.products?.data != undefined && (jsxs(Fragment, { children: [jsx(Divider, { sx: { my: 2 } }), jsx(Stack, { direction: { xs: "column", sm: "row" }, spacing: 2, justifyContent: "space-around", sx: { pt: 2 }, children: data.category.products.data
+                                                .slice(0, previewAmount)
+                                                .map((product) => (jsx(ProductCard, { product: product }, product.documentId))) })] })), jsx(Typography, { variant: "body2", component: "a", href: `/shop/categories/${data.category.slug}`, sx: { textDecoration: "none", color: "inherit" }, children: "Show all" })] }) }) }) }) }) }));
 }
 
 export { PBCategoryBlock };

package/dist/esm/src/components/page-builder/PageBuilder.js

@@ -62,7 +62,7 @@ function blockRenderer(block, index) {
         case "page-elements.product-block":
             return (jsx(PBProductBlock, { data: block }, `${block.id}-${block.__component}`));
         case "page-elements.category-block":
-            return (jsx(PBCategoryBlock, { data: block }, `${block.id}-${block.__component}`));
+            return (jsx(PBCategoryBlock, { data: block, index: index }, `${block.id}-${block.__component}`));
         default:
             return null;
     }

package/dist/esm/src/index.js

@@ -90,6 +90,7 @@ export { StrapiErrors } from './components/StrapiErrors.js';
 export { SubmitButton } from './components/SubmitButton.js';
 export { default as MarkdownDisplay } from './components/common/markdown/MarkdownDisplay.js';
 export { default as MarkdownEditor } from './components/common/markdown/MarkdownEditor.js';
+export { default as MarkdownTextField } from './components/common/markdown/MarkdownTextField.js';
 export { areBusinessCredentailsComplete } from './lib/areBusinessCredentialsComplete.js';
 export { isCustomerProfileComplete } from './lib/isCustomerProfileComplete.js';
 export { isCustomerProfileCompleteV2 } from './lib/isCustomerProfileCompleteV2.js';