umwd-components 0.1.37 → 0.1.39

package/dist/cjs/components/ContactForm.js

@@ -12,10 +12,65 @@ 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, {
@@ -27,22 +82,54 @@ function ContactForm({
   }, "We're open for any suggestion or just to have a chat"), /*#__PURE__*/React.createElement(material.TextField, {
     id: "name",
     label: "Name",
-    variant: "outlined"
+    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",
-    variant: "outlined"
+    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",
-    variant: "outlined"
+    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
-  }));
+    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 = {};
 

package/dist/cjs/components/WebsitePlaceholder.js

@@ -0,0 +1,70 @@
+"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 Image = require('next/image');
+
+function WebsitePlaceholder({
+  title,
+  announcement,
+  logo
+}) {
+  const theme = material.useTheme();
+  console.log(theme.palette.primary.main);
+  const handleKeydown = e => {
+    console.log(e);
+  };
+  return /*#__PURE__*/React.createElement(material.Box, {
+    sx: {
+      display: "grid",
+      justifyItems: "center",
+      alignItems: "center",
+      backgroundColor: theme.palette.primary.main,
+      height: "100vh",
+      width: "100vw",
+      overflow: "hidden",
+      position: "fixed",
+      top: 0,
+      left: 0,
+      zIndex: 1000,
+      isolation: "isolate"
+    },
+    onKeyDown: e => {
+      handleKeydown(e);
+    }
+  }, /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "h1",
+    align: "center"
+  }, title), logo?.url && /*#__PURE__*/React.createElement(Image, {
+    src: logo.url,
+    alt: logo.alt || "logo",
+    width: logo.width || "200",
+    height: logo.height || "200"
+  }), /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "h3",
+    align: "center"
+  }, announcement));
+}
+WebsitePlaceholder.propTypes = {
+  title: PropTypes.string.isRequired,
+  announcement: PropTypes.string.isRequired,
+  logo: PropTypes.shape({
+    src: PropTypes.string.isRequired,
+    alt: PropTypes.string,
+    width: PropTypes.string,
+    height: PropTypes.string
+  }),
+  backgroundColor: PropTypes.string
+};
+
+exports.default = WebsitePlaceholder;

package/dist/cjs/index.js

@@ -15,6 +15,7 @@ var TextImageBlock = require('./components/TextImageBlock.js');
 var Page = require('./components/Page.js');
 var Footer = require('./components/Footer.js');
 var ContactForm = require('./components/ContactForm.js');
+var WebsitePlaceholder = require('./components/WebsitePlaceholder.js');
 
 
 
@@ -27,3 +28,4 @@ exports.TextImageBlock = TextImageBlock.default;
 exports.Page = Page.default;
 exports.Footer = Footer.default;
 exports.ContactForm = ContactForm.default;
+exports.WebsitePlaceholder = WebsitePlaceholder.default;

package/dist/esm/components/ContactForm.js

@@ -7,11 +7,66 @@
   
 import React from 'react';
 import 'prop-types';
-import { Stack, Typography, TextField } from '@mui/material';
+import { Stack, Typography, TextField, Button } from '@mui/material';
+import isEmail from '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(Stack, {
     spacing: 2
   }, /*#__PURE__*/React.createElement(Typography, {
@@ -23,22 +78,54 @@ function ContactForm({
   }, "We're open for any suggestion or just to have a chat"), /*#__PURE__*/React.createElement(TextField, {
     id: "name",
     label: "Name",
-    variant: "outlined"
+    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(TextField, {
     id: "email",
     label: "Email",
-    variant: "outlined"
+    value: formValues.email,
+    variant: "outlined",
+    onBlur: handleBlur,
+    onChange: handleChange,
+    error: formErrors.email != undefined ? true : false,
+    helperText: formErrors.email
   }), /*#__PURE__*/React.createElement(TextField, {
     id: "subject",
     label: "Subject",
-    variant: "outlined"
+    value: formValues.subject,
+    variant: "outlined",
+    onBlur: handleBlur,
+    onChange: handleChange,
+    error: formErrors.subject != undefined,
+    helperText: formErrors.subject
   }), /*#__PURE__*/React.createElement(TextField, {
     id: "message",
     label: "Message",
+    value: formValues.message,
     variant: "outlined",
     multiline: true,
-    minRows: 5
-  }));
+    minRows: 5,
+    onBlur: handleBlur,
+    onChange: handleChange,
+    error: formErrors.message != undefined,
+    helperText: formErrors.message
+  }), /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    spacing: 2,
+    justifyContent: "end"
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "outlined",
+    color: "primary",
+    onClick: () => handleClear
+  }, "Clear"), /*#__PURE__*/React.createElement(Button, {
+    variant: "contained",
+    color: "primary",
+    onClick: handleSendCallback
+  }, "Send")));
 }
 ContactForm.propTypes = {};
 

package/dist/esm/components/WebsitePlaceholder.js

@@ -0,0 +1,66 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useTheme, Box, Typography } from '@mui/material';
+import Image from 'next/image';
+
+function WebsitePlaceholder({
+  title,
+  announcement,
+  logo
+}) {
+  const theme = useTheme();
+  console.log(theme.palette.primary.main);
+  const handleKeydown = e => {
+    console.log(e);
+  };
+  return /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      display: "grid",
+      justifyItems: "center",
+      alignItems: "center",
+      backgroundColor: theme.palette.primary.main,
+      height: "100vh",
+      width: "100vw",
+      overflow: "hidden",
+      position: "fixed",
+      top: 0,
+      left: 0,
+      zIndex: 1000,
+      isolation: "isolate"
+    },
+    onKeyDown: e => {
+      handleKeydown(e);
+    }
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "h1",
+    align: "center"
+  }, title), logo?.url && /*#__PURE__*/React.createElement(Image, {
+    src: logo.url,
+    alt: logo.alt || "logo",
+    width: logo.width || "200",
+    height: logo.height || "200"
+  }), /*#__PURE__*/React.createElement(Typography, {
+    variant: "h3",
+    align: "center"
+  }, announcement));
+}
+WebsitePlaceholder.propTypes = {
+  title: PropTypes.string.isRequired,
+  announcement: PropTypes.string.isRequired,
+  logo: PropTypes.shape({
+    src: PropTypes.string.isRequired,
+    alt: PropTypes.string,
+    width: PropTypes.string,
+    height: PropTypes.string
+  }),
+  backgroundColor: PropTypes.string
+};
+
+export { WebsitePlaceholder as default };

package/dist/esm/index.js

@@ -13,3 +13,4 @@ export { default as TextImageBlock } from './components/TextImageBlock.js';
 export { default as Page } from './components/Page.js';
 export { default as Footer } from './components/Footer.js';
 export { default as ContactForm } from './components/ContactForm.js';
+export { default as WebsitePlaceholder } from './components/WebsitePlaceholder.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umwd-components",
-  "version": "0.1.37",
+  "version": "0.1.39",
   "description": "UMWD Component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -72,7 +72,8 @@
     "next": "^14.1.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "validator": "^13.11.0"
   },
   "dependencies": {
     "next-router-mock": "^0.9.12",

package/src/components/ContactForm.js

@@ -2,9 +2,64 @@
 
 import React from "react";
 import PropTypes from "prop-types";
-import { TextField, Typography, Stack } from "@mui/material";
+import { TextField, Typography, Stack, Button } from "@mui/material";
+import isEmail from "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 (
     <Stack spacing={2}>
       <Typography variant="h6" align="center">
@@ -13,16 +68,60 @@ function ContactForm({ ...args }) {
       <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="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}
+      />
+      <TextField
+        id="email"
+        label="Email"
+        value={formValues.email}
+        variant="outlined"
+        onBlur={handleBlur}
+        onChange={handleChange}
+        error={formErrors.email != undefined ? true : false}
+        helperText={formErrors.email}
+      />
+      <TextField
+        id="subject"
+        label="Subject"
+        value={formValues.subject}
+        variant="outlined"
+        onBlur={handleBlur}
+        onChange={handleChange}
+        error={formErrors.subject != undefined}
+        helperText={formErrors.subject}
+      />
       <TextField
         id="message"
         label="Message"
+        value={formValues.message}
         variant="outlined"
         multiline
         minRows={5}
+        onBlur={handleBlur}
+        onChange={handleChange}
+        error={formErrors.message != undefined}
+        helperText={formErrors.message}
       />
+      <Stack direction={"row"} spacing={2} justifyContent={"end"}>
+        <Button variant="outlined" color="primary" onClick={() => handleClear}>
+          Clear
+        </Button>
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={handleSendCallback}
+        >
+          Send
+        </Button>
+      </Stack>
     </Stack>
   );
 }

package/src/components/WebsitePlaceholder.js

@@ -0,0 +1,67 @@
+"use client";
+
+import React from "react";
+import PropTypes from "prop-types";
+import { Typography, Box, useTheme } from "@mui/material";
+import Image from "next/image";
+
+function WebsitePlaceholder({ title, announcement, logo }) {
+  const theme = useTheme();
+
+  console.log(theme.palette.primary.main);
+
+  const handleKeydown = (e) => {
+    console.log(e);
+  };
+
+  return (
+    <Box
+      sx={{
+        display: "grid",
+        justifyItems: "center",
+        alignItems: "center",
+        backgroundColor: theme.palette.primary.main,
+        height: "100vh",
+        width: "100vw",
+        overflow: "hidden",
+        position: "fixed",
+        top: 0,
+        left: 0,
+        zIndex: 1000,
+        isolation: "isolate",
+      }}
+      onKeyDown={(e) => {
+        handleKeydown(e);
+      }}
+    >
+      <Typography variant="h1" align="center">
+        {title}
+      </Typography>
+      {logo?.url && (
+        <Image
+          src={logo.url}
+          alt={logo.alt || "logo"}
+          width={logo.width || "200"}
+          height={logo.height || "200"}
+        />
+      )}
+      <Typography variant="h3" align="center">
+        {announcement}
+      </Typography>
+    </Box>
+  );
+}
+
+WebsitePlaceholder.propTypes = {
+  title: PropTypes.string.isRequired,
+  announcement: PropTypes.string.isRequired,
+  logo: PropTypes.shape({
+    src: PropTypes.string.isRequired,
+    alt: PropTypes.string,
+    width: PropTypes.string,
+    height: PropTypes.string,
+  }),
+  backgroundColor: PropTypes.string,
+};
+
+export default WebsitePlaceholder;

package/src/index.js

@@ -8,3 +8,4 @@ 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";
+export { default as WebsitePlaceholder } from "./components/WebsitePlaceholder";

package/src/stories/WebsitePlaceholder.stories.js

@@ -0,0 +1,38 @@
+import WebsitePlaceholder from "../components/WebsitePlaceholder";
+import React from "react";
+
+export default {
+  title: "UMWD/WebsitePlaceholder",
+  component: WebsitePlaceholder,
+  // argTypes: { numberOfChildren: { type: "number" } },
+};
+
+const Template = ({ title, announcement, logo, ...args }) => (
+  <WebsitePlaceholder title={title} announcement={announcement} logo={logo} />
+);
+
+export const HelloWorld = Template.bind({});
+
+export const HelloMars = Template.bind({});
+
+HelloWorld.args = {
+  title: "A New Website Near You!",
+  logo: {
+    url: "https://via.placeholder.com/850",
+    width: 850,
+    height: 850,
+    alt: "Hello World",
+  },
+  announcement: "Coming Soon!",
+  backgroundColor: "lightgrey",
+};
+
+HelloMars.args = {
+  title: "A Martian Near You!",
+  logo: {
+    url: "https://via.placeholder.com/850",
+    alt: "Hello Mars",
+  },
+  announcement: "In cinama's this summer!",
+  backgroundColor: "slategrey",
+};