umwd-components 0.1.116 → 0.1.117

package/dist/cjs/components/BlockRendererClient.js

@@ -0,0 +1,93 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+var React = require('react');
+var blocksReactRenderer = require('@strapi/blocks-react-renderer');
+var material = require('@mui/material');
+
+function BlockRendererClient(_ref) {
+  let {
+    content
+  } = _ref;
+  if (!content) return null;
+  return /*#__PURE__*/React.createElement(blocksReactRenderer.BlocksRenderer, {
+    content: content,
+    blocks: {
+      // You can use the default components to set class names...
+      paragraph: _ref2 => {
+        let {
+          children
+        } = _ref2;
+        return /*#__PURE__*/React.createElement(material.Typography, {
+          variant: "body1",
+          sx: {
+            mb: 2
+          }
+        }, children);
+      },
+      // ...or point to a design system
+      heading: _ref3 => {
+        let {
+          children,
+          level
+        } = _ref3;
+        switch (level) {
+          case 1:
+            return /*#__PURE__*/React.createElement(material.Typography, {
+              variant: "h1"
+            }, children);
+          case 2:
+            return /*#__PURE__*/React.createElement(material.Typography, {
+              variant: "h2"
+            }, children);
+          case 3:
+            return /*#__PURE__*/React.createElement(material.Typography, {
+              variant: "h3"
+            }, children);
+          case 4:
+            return /*#__PURE__*/React.createElement(material.Typography, {
+              variant: "h4"
+            }, children);
+          case 5:
+            return /*#__PURE__*/React.createElement(material.Typography, {
+              variant: "h5"
+            }, children);
+          case 6:
+            return /*#__PURE__*/React.createElement(material.Typography, {
+              variant: "h6"
+            }, children);
+          default:
+            return /*#__PURE__*/React.createElement(material.Typography, {
+              variant: "h1"
+            }, children);
+        }
+      }
+      // For links, you may want to use the component from your router or framework
+      // link: ({ children, url }) => <Link to={url}>{children}</Link>,
+    },
+    modifiers: {
+      bold: _ref4 => {
+        let {
+          children
+        } = _ref4;
+        return /*#__PURE__*/React.createElement("strong", null, children);
+      },
+      italic: _ref5 => {
+        let {
+          children
+        } = _ref5;
+        return /*#__PURE__*/React.createElement("span", {
+          className: "italic"
+        }, children);
+      }
+    }
+  });
+}
+
+exports.BlockRendererClient = BlockRendererClient;

package/dist/cjs/components/BulletList.js

@@ -0,0 +1,43 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var material = require('@mui/material');
+var FiberManualRecordIcon = require('@mui/icons-material/FiberManualRecord');
+
+function BulletList(_ref) {
+  let {
+    bullets,
+    bulletSVG
+  } = _ref;
+  console.log("bulletSVG2", bulletSVG);
+  return /*#__PURE__*/React.createElement(material.Stack, {
+    spacing: 2
+  }, bullets.map((bullet, index) => /*#__PURE__*/React.createElement(material.Typography, {
+    key: index,
+    sx: {
+      verticalAlign: "center",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      display: "inline-flex"
+    }
+  }, bulletSVG ? /*#__PURE__*/React.createElement(material.SvgIcon, {
+    sx: {
+      mr: 1
+    }
+  }, bulletSVG) : /*#__PURE__*/React.createElement(FiberManualRecordIcon, null), bullet)));
+}
+BulletList.propTypes = {
+  bullets: PropTypes.arrayOf(PropTypes.string).isRequired
+};
+
+exports.default = BulletList;

package/dist/cjs/components/Button.js

@@ -0,0 +1,45 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var PropTypes = require('prop-types');
+
+function Button(_ref) {
+  let {
+    label,
+    backgroundColor = "red",
+    size = "md",
+    onClick
+  } = _ref;
+  let scale = 1;
+  if (size === "sm") {
+    scale = 0.75;
+  }
+  if (size === "lg") {
+    scale = 1.25;
+  }
+  const style = {
+    backgroundColor,
+    padding: "".concat(0.5 * scale, "rem ").concat(1 * scale, "rem"),
+    border: "none"
+  };
+  return /*#__PURE__*/React.createElement("button", {
+    style: style,
+    onClick: onClick
+  }, label);
+}
+Button.propTypes = {
+  label: PropTypes.string,
+  backgroundColor: PropTypes.string,
+  size: PropTypes.oneOf(["sm", "md", "lg"]),
+  onClick: PropTypes.func
+};
+
+exports.default = Button;

package/dist/cjs/components/ColumnsSection.js

@@ -0,0 +1,69 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+var React = require('react');
+var material = require('@mui/material');
+var getIcon = require('../lib/getIcon.js');
+
+function ColumnsSection(_ref) {
+  let {
+    data
+  } = _ref;
+  const {
+    column,
+    maxWidth
+  } = data;
+
+  // TODO make suitable for multiple column layouts
+
+  return /*#__PURE__*/React.createElement(material.Container, {
+    maxWidth: maxWidth || "lg",
+    sx: {
+      my: 1
+    }
+  }, /*#__PURE__*/React.createElement(material.Grid, {
+    container: true,
+    spacing: 2
+  }, column.map(column => {
+    const Icon = getIcon.default(column.icon);
+    return /*#__PURE__*/React.createElement(material.Grid, {
+      item: true,
+      xs: 12,
+      md: 6,
+      key: column.id
+    }, /*#__PURE__*/React.createElement(material.Paper, {
+      sx: {
+        p: 2,
+        height: "100%"
+      }
+    }, /*#__PURE__*/React.createElement(material.Typography, {
+      variant: "h5",
+      sx: {
+        mb: 2,
+        display: "flex",
+        justifyContent: "flex-start",
+        alignItems: "center"
+      }
+    }, Icon !== null && /*#__PURE__*/React.createElement(Icon, {
+      sx: {
+        mr: 2,
+        mt: 0.2,
+        width: "50px",
+        height: "50px",
+        fill: "currentColor",
+        stroke: "none"
+      }
+    }), column.heading), /*#__PURE__*/React.createElement(material.Typography, {
+      variant: "body2",
+      color: "text.secondary",
+      component: "div"
+    }, column.text)));
+  })));
+}
+
+exports.ColumnsSection = ColumnsSection;

package/dist/cjs/components/ContactForm.js

@@ -0,0 +1,223 @@
+"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 isEmail = require('validator/lib/isEmail');
+
+function ContactForm(_ref) {
+  let {
+    data
+  } = _ref;
+  const {
+    maxWidth
+  } = data;
+  const [formValues, setFormValues] = React.useState({
+    name: "",
+    email: "",
+    subject: "",
+    message: ""
+  });
+  const [formErrors, setFormErrors] = React.useState({});
+
+  // Setting button text on form submission
+  React.useState("Send");
+
+  // Setting success or failure messages states
+  const [showSuccessMessage, setShowSuccessMessage] = React.useState(false);
+  const [showFailureMessage, setShowFailureMessage] = React.useState(false);
+  const handleChange = e => {
+    const {
+      name,
+      value
+    } = e.target;
+    setFormValues({
+      ...formValues,
+      [name]: value
+    });
+  };
+  const handleBlur = e => {
+    const {
+      name
+    } = e.target;
+    const errors = validate(formValues);
+    if (errors[name]) {
+      setFormErrors(prevErrors => ({
+        ...prevErrors,
+        [name]: errors[name]
+      }));
+    } else {
+      setFormErrors(prevErrors => {
+        const updatedErrors = {
+          ...prevErrors
+        };
+        delete updatedErrors[name];
+        return updatedErrors;
+      });
+    }
+  };
+  const handleClear = () => {
+    setFormValues({
+      name: "",
+      email: "",
+      subject: "",
+      message: ""
+    });
+  };
+
+  /* const handleSendCallback = () => {
+    console.log("Send callback");
+  }; */
+
+  const handleSubmit = async e => {
+    e.preventDefault();
+    let isValidForm = validate(formValues);
+    console.log("isValidForm", isValidForm);
+    if (Object.keys(isValidForm).length === 0) {
+      const res = await fetch("/api/sendgrid", {
+        body: JSON.stringify({
+          email: formValues.email,
+          fullname: formValues.name,
+          subject: formValues.subject,
+          message: formValues.message
+        }),
+        headers: {
+          "Content-Type": "application/json"
+        },
+        method: "POST"
+      });
+      const {
+        error
+      } = await res.json();
+      if (error) {
+        setShowFailureMessage(true);
+        console.log(error);
+        return;
+      } else {
+        setShowSuccessMessage(true);
+      }
+    }
+  };
+  const validate = values => {
+    console.log("values from validate", values);
+    let errors = {};
+    if (values.name === "") {
+      errors.name = "Name is required";
+    }
+    if (values.email === "") {
+      errors.email = "Email is required";
+    } else if (!isEmail(values.email)) {
+      errors.email = "Invalid email";
+    }
+    if (values.subject === "") {
+      errors.subject = "Subject is required";
+    }
+    if (values.message === "") {
+      errors.message = "Message is required";
+    }
+    console.log("errors from validate", errors);
+    return errors;
+  };
+  return /*#__PURE__*/React.createElement(material.Container, {
+    maxWidth: maxWidth ? maxWidth : "lg",
+    sx: {
+      my: 1
+    }
+  }, /*#__PURE__*/React.createElement(material.Stack, {
+    spacing: 2,
+    sx: {
+      width: "100%"
+    }
+  }, /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "h6",
+    align: "center"
+  }, "Write us"), /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "body1",
+    align: "center"
+  }, "We're open for any suggestion or just to have a chat"), showSuccessMessage && /*#__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!"))), showFailureMessage && /*#__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")))), !showSuccessMessage && !showFailureMessage && /*#__PURE__*/React.createElement(material.Paper, {
+    sx: {
+      p: 2
+    }
+  }, /*#__PURE__*/React.createElement(material.Stack, {
+    spacing: 2
+  }, /*#__PURE__*/React.createElement(material.TextField, {
+    id: "name",
+    name: "name",
+    label: "Name",
+    value: formValues.name,
+    variant: "outlined",
+    onBlur: handleBlur,
+    onChange: handleChange,
+    error: formErrors.name != undefined ? true : false,
+    helperText: formErrors.name
+  }), /*#__PURE__*/React.createElement(material.TextField, {
+    id: "email",
+    name: "email",
+    label: "Email",
+    value: formValues.email,
+    variant: "outlined",
+    onBlur: handleBlur,
+    onChange: handleChange,
+    error: formErrors.email != undefined ? true : false,
+    helperText: formErrors.email
+  }), /*#__PURE__*/React.createElement(material.TextField, {
+    id: "subject",
+    name: "subject",
+    label: "Subject",
+    value: formValues.subject,
+    variant: "outlined",
+    onBlur: handleBlur,
+    onChange: handleChange,
+    error: formErrors.subject != undefined,
+    helperText: formErrors.subject
+  }), /*#__PURE__*/React.createElement(material.TextField, {
+    id: "message",
+    name: "message",
+    label: "Message",
+    value: formValues.message,
+    variant: "outlined",
+    multiline: true,
+    minRows: 5,
+    onBlur: handleBlur,
+    onChange: handleChange,
+    error: formErrors.message != undefined,
+    helperText: formErrors.message
+  }), /*#__PURE__*/React.createElement(material.Stack, {
+    direction: "row",
+    spacing: 2,
+    justifyContent: "end"
+  }, /*#__PURE__*/React.createElement(material.Button, {
+    variant: "outlined",
+    color: "primary",
+    onClick: handleClear
+  }, "Clear"), /*#__PURE__*/React.createElement(material.Button, {
+    variant: "contained",
+    onClick: handleSubmit
+  }, "Send")))));
+}
+
+exports.default = ContactForm;

package/dist/cjs/components/FeaturesSection.js

@@ -0,0 +1,100 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+var React = require('react');
+var material = require('@mui/material');
+var getIcon = require('../lib/getIcon.js');
+
+function FeatureSection(_ref) {
+  let {
+    data
+  } = _ref;
+  const {
+    feature,
+    maxWidth
+  } = data;
+  const theme = material.useTheme();
+  return /*#__PURE__*/React.createElement(material.Container, {
+    maxWidth: maxWidth || "lg",
+    sx: {
+      my: 1
+    }
+  }, /*#__PURE__*/React.createElement(material.Stack, {
+    spacing: 2,
+    direction: "row",
+    justifyContent: "stretch",
+    flexWrap: "wrap",
+    sx: {
+      width: "100%",
+      [theme.breakpoints.up("xs")]: {
+        flexDirection: "column"
+      },
+      [theme.breakpoints.up("sm")]: {
+        flexDirection: "row"
+      }
+    },
+    useFlexGap: true
+  }, feature.map(feature => {
+    const Icon = getIcon.default(feature.icon);
+    return /*#__PURE__*/React.createElement(material.Card, {
+      key: feature.id,
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-between",
+        flex: 1,
+        minWidth: 275
+      }
+    }, /*#__PURE__*/React.createElement(material.CardContent, null, /*#__PURE__*/React.createElement(material.Box, {
+      sx: {
+        height: 140,
+        display: "grid",
+        alignItems: "center",
+        justifyContent: "center"
+      }
+    }, Icon !== null && /*#__PURE__*/React.createElement(Icon, {
+      sx: {
+        mr: 2,
+        mt: 0.2,
+        width: "75px",
+        height: "75px",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 0.5
+      }
+    })), /*#__PURE__*/React.createElement(material.Typography, {
+      variant: "h5",
+      align: "center",
+      component: "div",
+      sx: {
+        mb: 2
+      }
+    }, feature.heading), /*#__PURE__*/React.createElement(material.Typography, {
+      variant: "h6",
+      align: "center",
+      component: "div",
+      sx: {
+        mb: 2
+      }
+    }, feature.subHeading.substring(0, 50)), /*#__PURE__*/React.createElement(material.Typography, {
+      variant: "body2",
+      color: "text.secondary",
+      component: "div"
+    }, feature.subHeading)), /*#__PURE__*/React.createElement(material.CardActions, {
+      sx: {
+        mb: 0
+      }
+    }, /*#__PURE__*/React.createElement(material.Button, {
+      size: "small"
+    }, "Contact"), /*#__PURE__*/React.createElement(material.Button, {
+      size: "small"
+    }, "Learn More")));
+  })));
+}
+
+exports.FeatureSection = FeatureSection;