umwd-components 0.1.36 → 0.1.38

package/dist/cjs/_virtual/_rollupPluginBabelHelpers.js

@@ -0,0 +1,24 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+exports.extends = _extends;

package/dist/cjs/components/Button.js

@@ -0,0 +1,44 @@
+/*
+ * 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({
+  label,
+  backgroundColor = "red",
+  size = "md",
+  onClick
+}) {
+  let scale = 1;
+  if (size === "sm") {
+    scale = 0.75;
+  }
+  if (size === "lg") {
+    scale = 1.25;
+  }
+  const style = {
+    backgroundColor,
+    padding: `${0.5 * scale}rem ${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/Checkmark/Checkmark.js

@@ -0,0 +1,29 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+// Ported from Alexander Haniotis' code here: https://codepen.io/haniotis/pen/KwvYLO
+// import React from "react";
+
+const Checkmark = () => {
+  return /*#__PURE__*/React.createElement("svg", {
+    className: "checkmark",
+    viewBox: "0 0 52 52"
+  }, /*#__PURE__*/React.createElement("circle", {
+    className: "checkmark__circle",
+    cx: "26",
+    cy: "26",
+    r: "25",
+    fill: "none"
+  }), /*#__PURE__*/React.createElement("path", {
+    className: "checkmark__check",
+    fill: "none",
+    d: "M14.1 27.2l7.1 7.2 16.7-16.8"
+  }));
+};
+
+exports.Checkmark = Checkmark;

package/dist/cjs/components/ContactForm.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');
+require('prop-types');
+var material = require('@mui/material');
+var isEmail = require('validator/lib/isEmail');
+
+function ContactForm({
+  ...args
+}) {
+  const [formValues, setFormValues] = React.useState({
+    name: "",
+    email: "",
+    subject: "",
+    message: ""
+  });
+  const [formErrors, setFormErrors] = React.useState({});
+  const handleBlur = e => {
+    console.log(e.target.id);
+    console.log(e.target.value);
+    const errors = validate(formValues);
+    console.log(errors);
+    setFormErrors({
+      ...formErrors,
+      [e.target.id]: errors[e.target.id]
+    });
+  };
+  const handleChange = e => {
+    const {
+      id,
+      value
+    } = e.target;
+    setFormValues({
+      ...formValues,
+      [id]: value
+    });
+    console.log("formValues", formValues);
+  };
+  const handleClear = () => {
+    setFormValues({});
+  };
+  const handleSendCallback = () => {
+    console.log("Send callback");
+  };
+  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.Stack, {
+    spacing: 2
+  }, /*#__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"), /*#__PURE__*/React.createElement(material.TextField, {
+    id: "name",
+    label: "Name",
+    value: formValues.name,
+    variant: "outlined",
+    onBlur: e => handleBlur(e),
+    onChange: e => handleChange(e),
+    error: formErrors.name != undefined ? true : false,
+    helperText: formErrors.name
+  }), /*#__PURE__*/React.createElement(material.TextField, {
+    id: "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",
+    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",
+    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",
+    color: "primary",
+    onClick: handleSendCallback
+  }, "Send")));
+}
+ContactForm.propTypes = {};
+
+exports.default = ContactForm;

package/dist/cjs/components/Footer.js

@@ -0,0 +1,173 @@
+/*
+ * 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 Link = require('next/link');
+var Image = require('next/image');
+var PropTypes = require('prop-types');
+
+Footer.propTypes = {
+  site_title: PropTypes.string.isRequired,
+  site_logo: PropTypes.string,
+  company_name: PropTypes.string.isRequired,
+  parent_company_name: PropTypes.string,
+  company_address: PropTypes.shape({
+    street: PropTypes.string,
+    street_number: PropTypes.string,
+    street_number_addition: PropTypes.string,
+    postal_code: PropTypes.string,
+    city: PropTypes.string
+  }),
+  CoC_number: PropTypes.string.isRequired,
+  VAT_number: PropTypes.string.isRequired,
+  company_socials: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired,
+    icon: PropTypes.elementType
+  })),
+  disclaimer_link: PropTypes.string,
+  privacypolicy_link: PropTypes.string
+};
+function Footer({
+  site_title,
+  site_logo,
+  company_name,
+  parent_company_name,
+  company_address,
+  CoC_number,
+  VAT_number,
+  company_socials,
+  disclaimer_link,
+  privacypolicy_link
+}) {
+  return /*#__PURE__*/React.createElement(material.AppBar, {
+    position: "relative"
+  }, /*#__PURE__*/React.createElement(material.Container, {
+    maxWidth: "xl"
+  }, /*#__PURE__*/React.createElement(material.Toolbar, {
+    disableGutters: true
+  }, /*#__PURE__*/React.createElement(material.Grid, {
+    container: true,
+    sx: {
+      p: 2
+    },
+    spacing: 2
+  }, /*#__PURE__*/React.createElement(material.Grid, {
+    item: true,
+    xs: 12,
+    sm: 4,
+    align: "center"
+  }, /*#__PURE__*/React.createElement(Link, {
+    href: "/"
+  }, /*#__PURE__*/React.createElement(material.Box, {
+    sx: {
+      display: {
+        xs: "none",
+        md: "flex"
+      },
+      cursor: "pointer",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center"
+    }
+  }, /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "h6"
+  }, site_title), site_logo && /*#__PURE__*/React.createElement(material.Box, null, /*#__PURE__*/React.createElement(Image, {
+    src: site_logo,
+    width: 64,
+    height: 64,
+    alt: "site logo"
+  }))))), /*#__PURE__*/React.createElement(material.Grid, {
+    item: true,
+    xs: 12,
+    sm: 4,
+    align: "center"
+  }, /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "h6"
+  }, "Contact Information"), /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "h6"
+  }, company_name), parent_company_name && /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "h6"
+  }, "By ", parent_company_name), company_address && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "body1"
+  }, company_address.street, " ", company_address.street_number, " ", company_address.street_number_addition && company_address.street_number_addition), /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "body1"
+  }, company_address.postal_code, " ", company_address.city)), /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "body1"
+  }, "CoC: ", CoC_number), /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "body1"
+  }, "VAT: ", VAT_number), /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "body1"
+  }), /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "body1"
+  })), /*#__PURE__*/React.createElement(material.Grid, {
+    item: true,
+    xs: 12,
+    sm: 4,
+    align: "center"
+  }, company_socials.length > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "h6"
+  }, "Socials"), /*#__PURE__*/React.createElement(material.Stack, {
+    spacing: 2,
+    sx: {
+      width: "min-content",
+      color: "primary.contrastText"
+    }
+  }, company_socials.map((company_social, index) => {
+    return /*#__PURE__*/React.createElement(material.IconButton, {
+      key: index,
+      color: "inherit",
+      href: company_social.url
+    }, company_social.icon);
+  })))), /*#__PURE__*/React.createElement(material.Grid, {
+    item: true,
+    xs: 12
+  }, /*#__PURE__*/React.createElement(material.Divider, null)), disclaimer_link && /*#__PURE__*/React.createElement(material.Grid, {
+    item: true,
+    xs: 12,
+    sm: 4,
+    sx: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center"
+    }
+  }, /*#__PURE__*/React.createElement(Link, {
+    href: disclaimer_link
+  }, /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "body1"
+  }, "Disclaimer"))), privacypolicy_link && /*#__PURE__*/React.createElement(material.Grid, {
+    item: true,
+    xs: 12,
+    sm: 4,
+    sx: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center"
+    }
+  }, /*#__PURE__*/React.createElement(Link, {
+    href: privacypolicy_link
+  }, /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "body1"
+  }, "Privacy Policy"))), Boolean(disclaimer_link || privacypolicy_link) && /*#__PURE__*/React.createElement(material.Grid, {
+    item: true,
+    xs: 12
+  }, /*#__PURE__*/React.createElement(material.Divider, null)), /*#__PURE__*/React.createElement(material.Grid, {
+    item: true,
+    xs: 12,
+    sx: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center"
+    }
+  }, /*#__PURE__*/React.createElement(material.Typography, null, "Made possible by Atelier Paulus"))))));
+}
+
+exports.default = Footer;

package/dist/cjs/components/NavBar.js

@@ -0,0 +1,286 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var Link = require('next/link');
+var material = require('@mui/material');
+var CloseIcon = require('@mui/icons-material/Close');
+var MoreVertIcon = require('@mui/icons-material/MoreVert');
+var navigation = require('next/navigation');
+var PropTypes = require('prop-types');
+
+NavBar.propTypes = {
+  site_title: PropTypes.string,
+  logo: PropTypes.shape({
+    url: PropTypes.string.isRequired,
+    width: PropTypes.string,
+    height: PropTypes.string,
+    alt: PropTypes.string
+  }).isRequired,
+  pages: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired
+  })),
+  tabs: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired
+  }))
+};
+function NavBar({
+  site_title,
+  logo,
+  pages = [],
+  tabs = [],
+  maxWidth = "xl"
+}) {
+  // handleMobileMenu
+
+  const [mobileNavOpen, setMobileNavOpen] = React.useState(false);
+  const [currentTab, setCurrentTab] = React.useState(tabs[0]?.name || "");
+  const handleOpenMobileMenu = e => {
+    setMobileNavOpen(true);
+  };
+  const handleCloseMobileMenu = e => {
+    setMobileNavOpen(false);
+  };
+  const router = navigation.useRouter();
+  const handleChange = (event, newValue) => {
+    console.log(newValue);
+    setCurrentTab(newValue);
+  };
+  return /*#__PURE__*/React.createElement(material.AppBar, {
+    position: "sticky"
+  }, /*#__PURE__*/React.createElement(material.Container, {
+    maxWidth: maxWidth
+  }, /*#__PURE__*/React.createElement(material.Toolbar, {
+    disableGutters: true,
+    sx: {
+      py: 1
+    }
+  }, /*#__PURE__*/React.createElement(Link, {
+    href: "/",
+    style: {
+      textDecoration: "none",
+      color: "unset"
+    }
+  }, /*#__PURE__*/React.createElement(material.Box, {
+    sx: {
+      display: {
+        xs: "none",
+        md: "flex"
+      },
+      cursor: "pointer",
+      alignItems: "center"
+    }
+  }, /*#__PURE__*/React.createElement(material.Box, {
+    sx: {
+      display: "flex",
+      mr: 1
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    src: logo.url,
+    width: logo.width || "32px",
+    height: logo.height || "32px",
+    alt: "site logo",
+    style: {
+      maxWidth: "60px",
+      maxHeight: "60px"
+    }
+  })), site_title !== undefined && /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "h6",
+    noWrap: true,
+    component: "h1",
+    sx: {
+      display: "flex",
+      textDecoration: "none"
+    }
+  }, site_title))), pages.length > 0 && /*#__PURE__*/React.createElement(material.Box, {
+    sx: {
+      flexGrow: 1,
+      display: {
+        xs: "none",
+        md: "flex"
+      },
+      alignItems: "center"
+    }
+  }, pages.map(page => {
+    return /*#__PURE__*/React.createElement(material.Button, {
+      key: page.name,
+      onClick: () => {
+        router.push(page.url);
+      },
+      sx: {
+        my: 2,
+        color: "primary.contrastText",
+        display: "block"
+      }
+    }, page.name);
+  })), /*#__PURE__*/React.createElement(Link, {
+    href: "/",
+    style: {
+      textDecoration: "none",
+      color: "unset"
+    }
+  }, /*#__PURE__*/React.createElement(material.Box, {
+    sx: {
+      display: {
+        xs: "flex",
+        md: "none"
+      },
+      alignItems: "center"
+    }
+  }, logo.url !== undefined && /*#__PURE__*/React.createElement(material.Box, {
+    sx: {
+      display: "flex",
+      mr: 1
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    src: logo.url,
+    width: logo.width || "32px",
+    height: logo.height || "32px",
+    alt: logo.alt || "site logo",
+    style: {
+      maxWidth: "60px",
+      maxHeight: "60px"
+    }
+  })), site_title !== undefined && /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "h5",
+    noWrap: true,
+    component: "h1",
+    sx: {
+      display: "flex",
+      flexGrow: 1
+    }
+  }, site_title))), /*#__PURE__*/React.createElement(material.Box, {
+    sx: {
+      display: {
+        xs: "flex",
+        md: "none"
+      },
+      flexGrow: 1
+    }
+  }), /*#__PURE__*/React.createElement(material.Box, {
+    sx: {
+      flexGrow: 0,
+      display: {
+        xs: "flex",
+        md: "none"
+      }
+    }
+  }, /*#__PURE__*/React.createElement(material.Button, {
+    onClick: handleOpenMobileMenu,
+    sx: {
+      width: "40px",
+      height: "40px",
+      borderRadius: "50%",
+      p: 0,
+      minWidth: "unset",
+      color: "primary.contrastText",
+      boxShadow: "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)"
+    }
+  }, /*#__PURE__*/React.createElement(MoreVertIcon, {
+    sx: {
+      color: "primary.contrastText"
+    }
+  })), /*#__PURE__*/React.createElement(material.Dialog, {
+    fullScreen: true,
+    open: mobileNavOpen,
+    onClose: handleCloseMobileMenu
+  }, /*#__PURE__*/React.createElement(material.AppBar, {
+    position: "sticky"
+  }, /*#__PURE__*/React.createElement(material.Container, {
+    maxWidth: "xl"
+  }, /*#__PURE__*/React.createElement(material.Toolbar, {
+    disableGutters: true,
+    sx: {
+      py: 1,
+      justifyContent: "space-between"
+    }
+  }, /*#__PURE__*/React.createElement(Link, {
+    href: "/",
+    style: {
+      textDecoration: "none",
+      color: "unset"
+    }
+  }, /*#__PURE__*/React.createElement(material.Box, {
+    sx: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center"
+    }
+  }, /*#__PURE__*/React.createElement(material.Box, {
+    sx: {
+      display: "flex",
+      mr: 1
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    src: logo.url,
+    alt: logo.alt || "logo",
+    width: logo.width || "32px",
+    height: logo.height || "32px",
+    style: {
+      maxWidth: "60px",
+      maxHeight: "60px"
+    }
+  })), /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "h5",
+    noWrap: true,
+    component: "h1",
+    sx: {
+      display: "flex",
+      flexGrow: 1
+    }
+  }, site_title !== undefined && site_title))), /*#__PURE__*/React.createElement(material.Button, {
+    onClick: handleCloseMobileMenu,
+    sx: {
+      width: "40px",
+      height: "40px",
+      borderRadius: "50%",
+      p: 0,
+      minWidth: "unset",
+      color: "primary.contrastText",
+      boxShadow: "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)"
+    },
+    "aria-label": "close"
+  }, /*#__PURE__*/React.createElement(CloseIcon, {
+    sx: {
+      color: "primary.contrastText"
+    }
+  }))))), pages.length > 0 && /*#__PURE__*/React.createElement(material.List, null, pages.map(page => {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(material.ListItem, {
+      key: page.name,
+      onClick: () => {
+        router.push(page.url);
+        handleCloseMobileMenu();
+      }
+    }, /*#__PURE__*/React.createElement(material.ListItemText, {
+      primary: page.name
+    })), /*#__PURE__*/React.createElement(material.Divider, null));
+  }))))), tabs.length > 0 && /*#__PURE__*/React.createElement(material.Tabs, {
+    value: currentTab,
+    onChange: (event, newValue) => handleChange(event, newValue),
+    "aria-label": "wrapped label tabs example",
+    textColor: "secondary",
+    indicatorColor: "secondary",
+    variant: "fullWidth"
+  }, tabs.length > 0 && tabs.map(tab => {
+    return /*#__PURE__*/React.createElement(material.Tab, {
+      key: tab.name,
+      value: tab.name,
+      label: tab.name,
+      onClick: () => {
+        router.push(tab.url);
+      }
+    });
+  }))));
+}
+
+exports.default = NavBar;