umwd-components 0.1.34 → 0.1.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umwd-components",
-  "version": "0.1.34",
+  "version": "0.1.36",
   "description": "UMWD Component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/ContactForm.js

@@ -0,0 +1,32 @@
+"use client";
+
+import React from "react";
+import PropTypes from "prop-types";
+import { TextField, Typography, Stack } from "@mui/material";
+
+function ContactForm({ ...args }) {
+  return (
+    <Stack spacing={2}>
+      <Typography variant="h6" align="center">
+        Write us
+      </Typography>
+      <Typography variant="body1" align="center">
+        We're open for any suggestion or just to have a chat
+      </Typography>
+      <TextField id="name" label="Name" variant="outlined" />
+      <TextField id="email" label="Email" variant="outlined" />
+      <TextField id="subject" label="Subject" variant="outlined" />
+      <TextField
+        id="message"
+        label="Message"
+        variant="outlined"
+        multiline
+        minRows={5}
+      />
+    </Stack>
+  );
+}
+
+ContactForm.propTypes = {};
+
+export default ContactForm;

package/src/components/TextImageBlock.js

@@ -12,6 +12,7 @@ function TextImageBlock({
   image_content,
   reverse,
   maxWidth,
+  minHeight,
 }) {
   reverse = Boolean(reverse);
 
@@ -53,7 +54,7 @@ function TextImageBlock({
               xs={text_content !== null && text_content !== undefined ? 6 : 12}
               sx={{
                 padding: "10px",
-                minHeight: "100vh",
+                minHeight: minHeight || "300px",
                 display: "grid",
                 alignItems: "center",
                 justifyContent: "center",
@@ -84,7 +85,7 @@ function TextImageBlock({
               xs={image_content?.url !== undefined ? 6 : 12}
               sx={{
                 p: 1,
-                minHeight: "100vh",
+                minHeight: minHeight || "300px",
                 display: "grid",
                 alignItems: "center",
                 justifyContent: "center",
@@ -102,7 +103,7 @@ function TextImageBlock({
               xs={image_content?.url !== undefined ? 6 : 12}
               sx={{
                 p: 1,
-                minHeight: "100vh",
+                minHeight: minHeight || "300px",
                 display: "grid",
                 alignItems: "center",
                 justifyContent: "center",
@@ -117,7 +118,7 @@ function TextImageBlock({
               xs={text_content !== null && text_content !== undefined ? 6 : 12}
               sx={{
                 padding: "10px",
-                minHeight: "100vh",
+                minHeight: minHeight || "300px",
                 display: "grid",
                 alignItems: "center",
                 justifyContent: "center",

package/src/index.js

@@ -7,3 +7,4 @@ export { default as NavBar } from "./components/NavBar";
 export { default as TextImageBlock } from "./components/TextImageBlock";
 export { default as Page } from "./components/Page";
 export { default as Footer } from "./components/Footer";
+export { default as ContactForm } from "./components/ContactForm";

package/src/stories/ContactForm.stories.js

@@ -0,0 +1,13 @@
+import ContactForm from "../components/ContactForm";
+import React from "react";
+
+export default {
+  title: "UMWD/ContactForm",
+  component: ContactForm,
+};
+
+const Template = ({ ...args }) => <ContactForm />;
+
+export const HelloWorld = Template.bind({});
+
+HelloWorld.args = {};

package/dist/cjs/_virtual/_rollupPluginBabelHelpers.js

@@ -1,24 +0,0 @@
-/*
- * 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

@@ -1,44 +0,0 @@
-/*
- * 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

@@ -1,29 +0,0 @@
-/*
- * 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/Footer.js

@@ -1,173 +0,0 @@
-/*
- * 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

@@ -1,286 +0,0 @@
-"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

@@ -1,21 +0,0 @@
-/*
- * 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;