umwd-components 0.1.239 → 0.1.241

package/dist/cjs/components/HeroSection.js

@@ -24,22 +24,7 @@ function HeroSection(_ref) {
     logoImage,
     link,
     maxWidth,
-    sx = {
-      ".manipulator": {
-        position: "absolute",
-        mt: "-100px",
-        width: "100%",
-        zIndex: -1,
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        img: {
-          objectFit: "contain",
-          width: "100%",
-          height: "100%"
-        }
-      }
-    },
+    sx = {},
     glass = false
   } = data;
   const theme = material.useTheme();
@@ -127,12 +112,7 @@ function HeroSection(_ref) {
   }, heading), /*#__PURE__*/React.createElement(material.Box, {
     className: "spacer",
     sx: {
-      height: {
-        xs: "120px",
-        sm: "200px",
-        md: "250px",
-        lg: "350px"
-      }
+      display: "none"
     }
   }), /*#__PURE__*/React.createElement(material.Typography, {
     variant: "h4",

package/dist/cjs/components/PageBuilder.js

@@ -12,12 +12,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var material = require('@mui/material');
 var PBTextImageSection = require('./page-builder/PBTextImageSection.js');
-var HeroSection = require('./HeroSection.js');
+var PBHeroSection = require('./page-builder/PBHeroSection.js');
 var FeaturesSection = require('./FeaturesSection.js');
 var FleetSection = require('./FleetSection.js');
 var IconSection = require('./IconSection.js');
 var ColumnsSection = require('./ColumnsSection.js');
-var ContactForm = require('./ContactForm.js');
+var PBContactForm = require('./page-builder/PBContactForm.js');
 var PersonaliaSection = require('./PersonaliaSection.js');
 var PictureBarSection = require('./PictureBarSection.js');
 var LogoBarSection = require('./LogoBarSection.js');
@@ -35,7 +35,7 @@ const INITIAL_STATE = {
 function blockRenderer(block) {
   switch (block.__component) {
     case "layout.hero-section":
-      return /*#__PURE__*/React.createElement(HeroSection.HeroSection, {
+      return /*#__PURE__*/React.createElement(PBHeroSection.PBHeroSection, {
         key: block.id,
         data: block
       });
@@ -45,7 +45,7 @@ function blockRenderer(block) {
         data: block
       });
     case "layout.contact-section":
-      return /*#__PURE__*/React.createElement(ContactForm.default, {
+      return /*#__PURE__*/React.createElement(PBContactForm.default, {
         key: block.id,
         data: block
       });
@@ -110,17 +110,19 @@ function PageBuilder(_ref) {
     }
   }, /*#__PURE__*/React.createElement("form", {
     action: formAction
-  }, /*#__PURE__*/React.createElement(material.Box, {
+  }, /*#__PURE__*/React.createElement(material.Stack, {
+    direction: "row-reverse",
+    spacing: 2,
     sx: {
-      width: "100%",
       backgroundColor: "primary.dark",
-      p: 2
+      px: 2,
+      py: 1
     }
   }, /*#__PURE__*/React.createElement(SubmitButton.SubmitButton, {
-    text: "submit",
+    text: "save changes",
     loadingText: "loading"
   }), /*#__PURE__*/React.createElement(StrapiErrors.StrapiErrors, {
-    error: formState.strapiErrors
+    error: formState === null || formState === void 0 ? void 0 : formState.strapiErrors
   })), /*#__PURE__*/React.createElement(material.Stack, {
     spacing: 2,
     sx: {

package/dist/cjs/components/SubmitButton.js

@@ -29,7 +29,8 @@ function SubmitButton(_ref2) {
   return /*#__PURE__*/React.createElement(material.Button, {
     type: "submit",
     "aria-disabled": status.pending || loading,
-    disabled: status.pending || loading
+    disabled: status.pending || loading,
+    variant: "outlined"
   }, status.pending || loading ? /*#__PURE__*/React.createElement(Loader, {
     text: loadingText
   }) : text);

package/dist/cjs/components/page-builder/PBContactForm.js

@@ -0,0 +1,136 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var material = require('@mui/material');
+var utils = require('../../lib/utils.js');
+var styles = require('@mui/material/styles');
+
+function PBContactForm(_ref) {
+  let {
+    data
+  } = _ref;
+  const {
+    title = "Write us",
+    subtitle = "We're open for any suggestion or just to have a chat",
+    maxWidth,
+    sx = {},
+    glass = false
+  } = data;
+  const theme = styles.useTheme();
+  return /*#__PURE__*/React.createElement(material.Container, {
+    maxWidth: maxWidth ? maxWidth : "lg",
+    sx: {
+      my: 1,
+      ...sx
+    }
+  }, /*#__PURE__*/React.createElement(material.Stack, {
+    spacing: 2,
+    sx: {
+      width: "100%"
+    }
+  }, /*#__PURE__*/React.createElement(material.TextField, {
+    id: "title",
+    name: "title",
+    label: "title",
+    defaultValue: title
+    // error={formState?.zodErrors?.heading != undefined ? true : false}
+    // helperText={formState?.zodErrors?.heading}
+    ,
+    sx: {
+      input: {
+        textAlign: "center",
+        fontFamily: theme.typography.h6.fontFamily,
+        fontWeight: theme.typography.h6.fontWeight,
+        fontSize: theme.typography.h6.fontSize
+      }
+    }
+  }), /*#__PURE__*/React.createElement(material.TextField, {
+    id: "subtitle",
+    name: "subtitle",
+    label: "subtitle",
+    defaultValue: subtitle
+    // error={formState?.zodErrors?.heading != undefined ? true : false}
+    // helperText={formState?.zodErrors?.heading}
+    ,
+    sx: {
+      input: {
+        textAlign: "center",
+        fontFamily: theme.typography.body1.fontFamily,
+        fontWeight: theme.typography.body1.fontWeight,
+        fontSize: theme.typography.body1.fontSize
+      }
+    }
+  }), /*#__PURE__*/React.createElement(material.Paper, {
+    sx: {
+      p: 2
+    }
+  }, /*#__PURE__*/React.createElement(material.Stack, {
+    spacing: 2
+  }, /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "h6"
+  }, "Thank you!"), /*#__PURE__*/React.createElement(material.Typography, null, "Your e-mail has been successfully sent!"))), /*#__PURE__*/React.createElement(material.Paper, {
+    sx: {
+      p: 2
+    }
+  }, /*#__PURE__*/React.createElement(material.Stack, {
+    spacing: 2
+  }, /*#__PURE__*/React.createElement(material.Typography, null, "I am sorry, something went wrong, you could email me directly on info@jellepaulus.nl"), /*#__PURE__*/React.createElement(material.Button, {
+    variant: "contained"
+  }, "try again")))), /*#__PURE__*/React.createElement(material.Paper, {
+    sx: {
+      p: 2,
+      backdropFilter: "blur(3px)",
+      backgroundColor: utils.setOpacity(theme.palette.background.paper, glass ? 0.1 : 1),
+      border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none"
+    }
+  }, /*#__PURE__*/React.createElement(material.Stack, {
+    spacing: 2
+  }, /*#__PURE__*/React.createElement(material.TextField, {
+    id: "name",
+    name: "name",
+    label: "Name",
+    variant: "outlined",
+    disabled: true
+  }), /*#__PURE__*/React.createElement(material.TextField, {
+    id: "email",
+    name: "email",
+    label: "Email",
+    variant: "outlined",
+    disabled: true
+  }), /*#__PURE__*/React.createElement(material.TextField, {
+    id: "subject",
+    name: "subject",
+    label: "Subject",
+    variant: "outlined",
+    disabled: true
+  }), /*#__PURE__*/React.createElement(material.TextField, {
+    id: "message",
+    name: "message",
+    label: "Message",
+    variant: "outlined",
+    multiline: true,
+    disabled: true,
+    minRows: 5
+  }), /*#__PURE__*/React.createElement(material.Stack, {
+    direction: "row",
+    spacing: 2,
+    justifyContent: "end"
+  }, /*#__PURE__*/React.createElement(material.Button, {
+    disabled: true,
+    variant: "outlined"
+  }, "Clear"), /*#__PURE__*/React.createElement(material.Button, {
+    variant: "contained",
+    disabled: true
+  }, "Send")))));
+}
+
+exports.default = PBContactForm;

package/dist/cjs/components/page-builder/PBHeroSection.js

@@ -0,0 +1,199 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+var React = require('react');
+var material = require('@mui/material');
+var StrapiImage = require('../StrapiImage.js');
+var utils = require('../../lib/utils.js');
+
+function PBHeroSection(_ref) {
+  var _bgImage$id, _logoImage$id;
+  let {
+    data
+  } = _ref;
+  const {
+    heading,
+    subHeading,
+    bgImage,
+    logoImage,
+    link,
+    maxWidth,
+    sx = {},
+    glass = false
+  } = data;
+  const theme = material.useTheme();
+  console.log(theme.typography.button);
+
+  // const glassColor = setOpacity(theme.palette.background.paper, 0.1);
+
+  return /*#__PURE__*/React.createElement("header", {
+    style: {
+      position: "relative",
+      padding: 0,
+      margin: 0
+    }
+  }, /*#__PURE__*/React.createElement(material.Box, {
+    sx: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "100%",
+      overflow: "hidden",
+      minHeight: "600px",
+      py: 6,
+      ...sx
+    }
+  }, bgImage && bgImage.url && /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
+    id: (_bgImage$id = bgImage.id) === null || _bgImage$id === void 0 ? void 0 : _bgImage$id.toString(),
+    alternativeText: "Background",
+    style: {
+      position: "absolute",
+      inset: 0,
+      objectFit: "cover",
+      width: "100%",
+      height: "100%"
+    },
+    height: bgImage.height || 1080,
+    url: bgImage.url,
+    width: bgImage.width || 1920
+  }), /*#__PURE__*/React.createElement(material.Container, {
+    maxWidth: maxWidth || "lg",
+    sx: {
+      my: 1,
+      zIndex: 1
+    }
+  }, /*#__PURE__*/React.createElement(material.Paper, {
+    sx: {
+      px: 2,
+      py: 7,
+      backdropFilter: "blur(3px)",
+      backgroundColor: utils.setOpacity(theme.palette.background.paper, glass ? 0.1 : 1),
+      border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none"
+    }
+  }, /*#__PURE__*/React.createElement(material.Stack, {
+    spacing: 5,
+    alignItems: "center",
+    justifyContent: "center"
+  }, logoImage && logoImage.url !== null && /*#__PURE__*/React.createElement(material.Box, {
+    className: "manipulator",
+    sx: {
+      position: "relative",
+      mt: "-100px",
+      width: "100%",
+      zIndex: -1,
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      img: {
+        objectFit: "contain",
+        width: "100%",
+        height: "100%"
+      }
+    }
+  }, /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
+    id: (_logoImage$id = logoImage.id) === null || _logoImage$id === void 0 ? void 0 : _logoImage$id.toString(),
+    alternativeText: logoImage.alternativeText,
+    height: logoImage.height || 100,
+    url: logoImage.url,
+    width: logoImage.width || 100,
+    style: {
+      objectFit: "contain"
+    }
+  })), /*#__PURE__*/React.createElement(material.TextField, {
+    id: "heading",
+    name: "heading",
+    label: "heading",
+    defaultValue: heading,
+    variant: "outlined"
+    // error={formState?.zodErrors?.heading != undefined ? true : false}
+    // helperText={formState?.zodErrors?.heading}
+    ,
+    sx: {
+      input: {
+        textAlign: "center",
+        fontFamily: theme.typography.h2.fontFamily,
+        fontWeight: theme.typography.h2.fontWeight,
+        fontSize: theme.typography.h2.fontSize
+      }
+    }
+  }), /*#__PURE__*/React.createElement(material.Box, {
+    className: "spacer",
+    sx: {
+      display: "none"
+    }
+  }), /*#__PURE__*/React.createElement(material.TextField, {
+    id: "subHeading",
+    name: "subHeading",
+    label: "subHeading",
+    defaultValue: subHeading,
+    variant: "outlined",
+    multiline: true,
+    rows: 8
+    // error={formState?.zodErrors?.heading != undefined ? true : false}
+    // helperText={formState?.zodErrors?.heading}
+    ,
+    sx: {
+      width: "100%",
+      "textarea#subHeading": {
+        textAlign: "center",
+        fontFamily: theme.typography.h4.fontFamily,
+        fontWeight: theme.typography.h4.fontWeight,
+        fontSize: theme.typography.h4.fontSize,
+        lineHeight: theme.typography.h4.lineHeight
+      }
+    }
+  }), /*#__PURE__*/React.createElement(material.Stack, {
+    direction: "column",
+    spacing: 2,
+    sx: {
+      p: 1,
+      border: "1px dashed white",
+      borderRadius: "4px"
+    }
+  }, /*#__PURE__*/React.createElement(material.TextField, {
+    id: "link.text",
+    name: "link.text",
+    label: "link.text",
+    defaultValue: link === null || link === void 0 ? void 0 : link.text
+    // error={formState?.zodErrors?.heading != undefined ? true : false}
+    // helperText={formState?.zodErrors?.heading}
+    ,
+    sx: {
+      backgroundColor: theme.palette.primary.main,
+      borderRadius: "4px",
+      input: {
+        color: theme.palette.primary.contrastText,
+        textAlign: "center",
+        fontFamily: theme.typography.button.fontFamily,
+        fontWeight: theme.typography.button.fontWeight,
+        fontSize: "1.5rem",
+        letterSpacing: theme.typography.button.letterSpacing,
+        textTransform: theme.typography.button.textTransform
+      }
+    }
+  }), /*#__PURE__*/React.createElement(material.TextField, {
+    id: "url",
+    name: "url",
+    label: "url",
+    defaultValue: link === null || link === void 0 ? void 0 : link.url
+    // error={formState?.zodErrors?.heading != undefined ? true : false}
+    // helperText={formState?.zodErrors?.heading}
+    ,
+    sx: {
+      input: {
+        textAlign: "center",
+        fontFamily: theme.typography.button.fontFamily,
+        fontWeight: theme.typography.button.fontWeight,
+        fontSize: theme.typography.button.fontSize
+      }
+    }
+  })))))));
+}
+
+exports.PBHeroSection = PBHeroSection;

package/dist/cjs/data/actions/pagebuilder-actions.js

@@ -39,13 +39,14 @@ const schemaUpdate = zod.z.object({
     })
   ), */
 });
-async function updatePageAction(prevState, FormData) {
+async function updatePageAction(prevState, formData) {
   const validatedFields = schemaUpdate.safeParse({
-    id: FormData.get("id"),
-    title: FormData.get("title"),
-    description: FormData.get("description")
-    // blocks: FormData.get("blocks"),
+    id: formData.get("id"),
+    title: formData.get("title"),
+    description: formData.get("description")
+    // blocks: formData.get("blocks"),
   });
+  console.log(validatedFields);
   if (!validatedFields.success) {
     return {
       ...prevState,

package/dist/cjs/data/services/pagebuilder-service.js

@@ -11,6 +11,7 @@ var utils = require('../../lib/utils.js');
 const baseUrl = utils.getStrapiURL();
 async function updatePageService(pageData) {
   const url = new URL("/api/pages/".concat(pageData.id), baseUrl);
+  console.log(url);
   try {
     const response = await fetch(url, {
       method: "POST",

package/dist/esm/components/HeroSection.js

@@ -22,22 +22,7 @@ function HeroSection(_ref) {
     logoImage,
     link,
     maxWidth,
-    sx = {
-      ".manipulator": {
-        position: "absolute",
-        mt: "-100px",
-        width: "100%",
-        zIndex: -1,
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        img: {
-          objectFit: "contain",
-          width: "100%",
-          height: "100%"
-        }
-      }
-    },
+    sx = {},
     glass = false
   } = data;
   const theme = useTheme();
@@ -125,12 +110,7 @@ function HeroSection(_ref) {
   }, heading), /*#__PURE__*/React__default.createElement(Box, {
     className: "spacer",
     sx: {
-      height: {
-        xs: "120px",
-        sm: "200px",
-        md: "250px",
-        lg: "350px"
-      }
+      display: "none"
     }
   }), /*#__PURE__*/React__default.createElement(Typography, {
     variant: "h4",

package/dist/esm/components/PageBuilder.js

@@ -8,12 +8,12 @@
 import React__default from 'react';
 import { Box, Stack, TextField } from '@mui/material';
 import { PBTextImageSection } from './page-builder/PBTextImageSection.js';
-import { HeroSection } from './HeroSection.js';
+import { PBHeroSection } from './page-builder/PBHeroSection.js';
 import { FeatureSection } from './FeaturesSection.js';
 import { FleetSection } from './FleetSection.js';
 import { IconSection } from './IconSection.js';
 import { ColumnsSection } from './ColumnsSection.js';
-import ContactForm from './ContactForm.js';
+import PBContactForm from './page-builder/PBContactForm.js';
 import { PersonaliaSection } from './PersonaliaSection.js';
 import { PictureBarSection } from './PictureBarSection.js';
 import { LogoBarSection } from './LogoBarSection.js';
@@ -31,7 +31,7 @@ const INITIAL_STATE = {
 function blockRenderer(block) {
   switch (block.__component) {
     case "layout.hero-section":
-      return /*#__PURE__*/React__default.createElement(HeroSection, {
+      return /*#__PURE__*/React__default.createElement(PBHeroSection, {
         key: block.id,
         data: block
       });
@@ -41,7 +41,7 @@ function blockRenderer(block) {
         data: block
       });
     case "layout.contact-section":
-      return /*#__PURE__*/React__default.createElement(ContactForm, {
+      return /*#__PURE__*/React__default.createElement(PBContactForm, {
         key: block.id,
         data: block
       });
@@ -106,17 +106,19 @@ function PageBuilder(_ref) {
     }
   }, /*#__PURE__*/React__default.createElement("form", {
     action: formAction
-  }, /*#__PURE__*/React__default.createElement(Box, {
+  }, /*#__PURE__*/React__default.createElement(Stack, {
+    direction: "row-reverse",
+    spacing: 2,
     sx: {
-      width: "100%",
       backgroundColor: "primary.dark",
-      p: 2
+      px: 2,
+      py: 1
     }
   }, /*#__PURE__*/React__default.createElement(SubmitButton, {
-    text: "submit",
+    text: "save changes",
     loadingText: "loading"
   }), /*#__PURE__*/React__default.createElement(StrapiErrors, {
-    error: formState.strapiErrors
+    error: formState === null || formState === void 0 ? void 0 : formState.strapiErrors
   })), /*#__PURE__*/React__default.createElement(Stack, {
     spacing: 2,
     sx: {

package/dist/esm/components/SubmitButton.js

@@ -27,7 +27,8 @@ function SubmitButton(_ref2) {
   return /*#__PURE__*/React__default.createElement(Button, {
     type: "submit",
     "aria-disabled": status.pending || loading,
-    disabled: status.pending || loading
+    disabled: status.pending || loading,
+    variant: "outlined"
   }, status.pending || loading ? /*#__PURE__*/React__default.createElement(Loader, {
     text: loadingText
   }) : text);