umwd-components 0.1.36 → 0.1.37

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,49 @@
+"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');
+
+function ContactForm({
+  ...args
+}) {
+  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",
+    variant: "outlined"
+  }), /*#__PURE__*/React.createElement(material.TextField, {
+    id: "email",
+    label: "Email",
+    variant: "outlined"
+  }), /*#__PURE__*/React.createElement(material.TextField, {
+    id: "subject",
+    label: "Subject",
+    variant: "outlined"
+  }), /*#__PURE__*/React.createElement(material.TextField, {
+    id: "message",
+    label: "Message",
+    variant: "outlined",
+    multiline: true,
+    minRows: 5
+  }));
+}
+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;

package/dist/cjs/components/NoteTextField/NoteTextField.js

@@ -0,0 +1,21 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var material = require('@mui/material');
+
+const NoteTextField = props => {
+  return /*#__PURE__*/React.createElement(material.TextField, _rollupPluginBabelHelpers.extends({}, props, {
+    sx: {
+      background: "linear-gradient(45deg, rgba(251,246,137,1) 30%, rgba(252,242,138,1) 90%)"
+    }
+  }));
+};
+
+exports.NoteTextField = NoteTextField;

package/dist/cjs/components/Page.js

@@ -0,0 +1,51 @@
+"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 TextImageBlock = require('./TextImageBlock.js');
+var material = require('@mui/material');
+
+function Page({
+  page_title,
+  page_description,
+  page_blocks
+}) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "h1",
+    align: "center"
+  }, page_title), /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "h6",
+    align: "center"
+  }, page_description), page_blocks.map((block, index) => {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextImageBlock.default, {
+      key: index,
+      block_title: block.block_title,
+      text_content: block.text_content,
+      image_content: block.image_content,
+      reverse: block.reverse,
+      maxWidth: block.maxWidth
+    }));
+  }));
+}
+Page.propTypes = {
+  page_title: PropTypes.string,
+  page_description: PropTypes.string,
+  page_blocks: PropTypes.arrayOf(PropTypes.shape({
+    block_title: PropTypes.string,
+    text_content: PropTypes.string,
+    image_content: PropTypes.string,
+    reverse: PropTypes.bool,
+    maxWidth: PropTypes.string
+  }))
+};
+
+exports.default = Page;