umwd-components 0.1.97 → 0.1.99

package/dist/cjs/node_modules/@strapi/blocks-react-renderer/dist/Block.js

@@ -0,0 +1,63 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var BlocksRenderer = require('./BlocksRenderer.js');
+var Text = require('./Text.js');
+
+const voidTypes = ["image"];
+const augmentProps = (content) => {
+  const { children: childrenNodes, type, ...props } = content;
+  if (type === "code") {
+    const getPlainText = (children) => {
+      return children.reduce((currentPlainText, node) => {
+        if (node.type === "text") {
+          return currentPlainText.concat(node.text);
+        }
+        if (node.type === "link") {
+          return currentPlainText.concat(getPlainText(node.children));
+        }
+        return currentPlainText;
+      }, "");
+    };
+    return {
+      ...props,
+      plainText: getPlainText(content.children)
+    };
+  }
+  return props;
+};
+const Block = ({ content }) => {
+  const { children: childrenNodes, type, ...props } = content;
+  const { blocks, missingBlockTypes } = BlocksRenderer.useComponentsContext();
+  const BlockComponent = blocks[type];
+  if (!BlockComponent) {
+    if (!missingBlockTypes.includes(type)) {
+      console.warn(`[@strapi/block-react-renderer] No component found for block type "${type}"`);
+      missingBlockTypes.push(type);
+    }
+    return null;
+  }
+  if (voidTypes.includes(type)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(BlockComponent, { ...props });
+  }
+  if (type === "paragraph" && childrenNodes.length === 1 && childrenNodes[0].type === "text" && childrenNodes[0].text === "") {
+    return /* @__PURE__ */ jsxRuntime.jsx("br", {});
+  }
+  const augmentedProps = augmentProps(content);
+  return /* @__PURE__ */ jsxRuntime.jsx(BlockComponent, { ...augmentedProps, children: childrenNodes.map((childNode, index) => {
+    if (childNode.type === "text") {
+      const { type: _type, ...childNodeProps } = childNode;
+      return /* @__PURE__ */ React.createElement(Text.Text, { ...childNodeProps, key: index });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(Block, { content: childNode }, index);
+  }) });
+};
+
+exports.Block = Block;

package/dist/cjs/node_modules/@strapi/blocks-react-renderer/dist/BlocksRenderer.js

@@ -0,0 +1,109 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var Block = require('./Block.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const defaultComponents = {
+  blocks: {
+    paragraph: (props) => /* @__PURE__ */ jsxRuntime.jsx("p", { children: props.children }),
+    quote: (props) => /* @__PURE__ */ jsxRuntime.jsx("blockquote", { children: props.children }),
+    code: (props) => /* @__PURE__ */ jsxRuntime.jsx("pre", { children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: props.plainText }) }),
+    heading: ({ level, children }) => {
+      switch (level) {
+        case 1:
+          return /* @__PURE__ */ jsxRuntime.jsx("h1", { children });
+        case 2:
+          return /* @__PURE__ */ jsxRuntime.jsx("h2", { children });
+        case 3:
+          return /* @__PURE__ */ jsxRuntime.jsx("h3", { children });
+        case 4:
+          return /* @__PURE__ */ jsxRuntime.jsx("h4", { children });
+        case 5:
+          return /* @__PURE__ */ jsxRuntime.jsx("h5", { children });
+        case 6:
+          return /* @__PURE__ */ jsxRuntime.jsx("h6", { children });
+      }
+    },
+    link: (props) => /* @__PURE__ */ jsxRuntime.jsx("a", { href: props.url, children: props.children }),
+    list: (props) => {
+      if (props.format === "ordered") {
+        return /* @__PURE__ */ jsxRuntime.jsx("ol", { children: props.children });
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx("ul", { children: props.children });
+    },
+    "list-item": (props) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: props.children }),
+    image: (props) => /* @__PURE__ */ jsxRuntime.jsx("img", { src: props.image.url, alt: props.image.alternativeText || void 0 })
+  },
+  modifiers: {
+    bold: (props) => /* @__PURE__ */ jsxRuntime.jsx("strong", { children: props.children }),
+    italic: (props) => /* @__PURE__ */ jsxRuntime.jsx("em", { children: props.children }),
+    underline: (props) => /* @__PURE__ */ jsxRuntime.jsx("u", { children: props.children }),
+    strikethrough: (props) => /* @__PURE__ */ jsxRuntime.jsx("del", { children: props.children }),
+    code: (props) => /* @__PURE__ */ jsxRuntime.jsx("code", { children: props.children })
+  },
+  missingBlockTypes: [],
+  missingModifierTypes: []
+};
+const ComponentsContext = React__namespace.createContext(defaultComponents);
+const ComponentsProvider = ({ children, value = defaultComponents }) => {
+  const memoizedValue = React__namespace.useMemo(() => value, [value]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ComponentsContext.Provider, { value: memoizedValue, children });
+};
+function useComponentsContext() {
+  return React__namespace.useContext(ComponentsContext);
+}
+const BlocksRenderer = (props) => {
+  const blocks = {
+    ...defaultComponents.blocks,
+    ...props.blocks
+  };
+  const modifiers = {
+    ...defaultComponents.modifiers,
+    ...props.modifiers
+  };
+  const missingBlockTypes = React__namespace.useRef([]);
+  const missingModifierTypes = React__namespace.useRef([]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ComponentsProvider,
+    {
+      value: {
+        blocks,
+        modifiers,
+        missingBlockTypes: missingBlockTypes.current,
+        missingModifierTypes: missingModifierTypes.current
+      },
+      children: props.content.map((content, index) => /* @__PURE__ */ jsxRuntime.jsx(Block.Block, { content }, index))
+    }
+  );
+};
+
+exports.BlocksRenderer = BlocksRenderer;
+exports.ComponentsProvider = ComponentsProvider;
+exports.useComponentsContext = useComponentsContext;

package/dist/cjs/node_modules/@strapi/blocks-react-renderer/dist/Text.js

@@ -0,0 +1,37 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var BlocksRenderer = require('./BlocksRenderer.js');
+
+const Text = ({ text, ...modifiers }) => {
+  const { modifiers: modifierComponents, missingModifierTypes } = BlocksRenderer.useComponentsContext();
+  const modifierNames = Object.keys(modifiers);
+  return modifierNames.reduce(
+    (children, modifierName) => {
+      if (!modifiers[modifierName]) {
+        return children;
+      }
+      const ModifierComponent = modifierComponents[modifierName];
+      if (!ModifierComponent) {
+        if (!missingModifierTypes.includes(modifierName)) {
+          console.warn(
+            `[@strapi/block-react-renderer] No component found for modifier "${modifierName}"`
+          );
+          missingModifierTypes.push(modifierName);
+        }
+        return children;
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(ModifierComponent, { children });
+    },
+    // By default, return the text without any wrapper to avoid useless nesting
+    /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: text })
+  );
+};
+
+exports.Text = Text;

package/dist/cjs/src/components/BlockRendererClient.js

@@ -0,0 +1,94 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var BlocksRenderer = require('../../node_modules/@strapi/blocks-react-renderer/dist/BlocksRenderer.js');
+var material = require('@mui/material');
+
+function BlockRendererClient(_ref) {
+  let {
+    content
+  } = _ref;
+  if (!content) return null;
+  return /*#__PURE__*/React.createElement(BlocksRenderer.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.default = BlockRendererClient;

package/dist/cjs/src/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/src/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/src/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/src/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;