umwd-components 0.1.69 → 0.1.70

package/dist/cjs/components/ContactForm.js

@@ -10,11 +10,18 @@
 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(_ref) {
+  let {
+    data
+  } = _ref;
+  const {
+    id,
+    title,
+    maxWidth = "lg"
+  } = data;
   const [formValues, setFormValues] = React.useState({
     name: "",
     email: "",
@@ -23,10 +30,7 @@ function ContactForm(_ref) {
   });
   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]
@@ -69,7 +73,16 @@ function ContactForm(_ref) {
     console.log("errors from validate", errors);
     return errors;
   };
-  return /*#__PURE__*/React.createElement(material.Stack, {
+  return /*#__PURE__*/React.createElement(material.Container, {
+    maxWidth: maxWidth,
+    sx: {
+      my: 1
+    }
+  }, /*#__PURE__*/React.createElement(material.Paper, {
+    sx: {
+      p: 2
+    }
+  }, /*#__PURE__*/React.createElement(material.Stack, {
     spacing: 2
   }, /*#__PURE__*/React.createElement(material.Typography, {
     variant: "h6",
@@ -127,8 +140,7 @@ function ContactForm(_ref) {
     variant: "contained",
     color: "primary",
     onClick: handleSendCallback
-  }, "Send")));
+  }, "Send")))));
 }
-ContactForm.propTypes = {};
 
 exports.default = ContactForm;

package/dist/cjs/components/Page.js

@@ -16,6 +16,7 @@ var HeroSection = require('./HeroSection.js');
 var FeaturesSection = require('./FeaturesSection.js');
 var IconSection = require('./IconSection.js');
 var material = require('@mui/material');
+var ContactForm = require('./ContactForm.js');
 
 function blockRenderer(block) {
   switch (block.__component) {
@@ -29,6 +30,11 @@ function blockRenderer(block) {
         key: block.id,
         data: block
       });
+    case "layout.contact-section":
+      return /*#__PURE__*/React.createElement(ContactForm.default, {
+        key: block.id,
+        data: block
+      });
     case "layout.text-image-section":
       return /*#__PURE__*/React.createElement(TextImageSection.default, {
         key: block.id,

package/dist/cjs/components/TextImageSection.js

@@ -23,7 +23,7 @@ function TextImageSection(_ref) {
     text,
     image,
     reverse = false,
-    maxWidth
+    maxWidth = "lg"
   } = data;
 
   /* TODO Text_content should deal with linebreaks,

package/dist/esm/components/ContactForm.js

@@ -6,11 +6,18 @@
  */
   
 import React from 'react';
-import 'prop-types';
-import { Stack, Typography, TextField, Button } from '@mui/material';
+import { Container, Paper, Stack, Typography, TextField, Button } from '@mui/material';
 import isEmail from 'validator/lib/isEmail';
 
 function ContactForm(_ref) {
+  let {
+    data
+  } = _ref;
+  const {
+    id,
+    title,
+    maxWidth = "lg"
+  } = data;
   const [formValues, setFormValues] = React.useState({
     name: "",
     email: "",
@@ -19,10 +26,7 @@ function ContactForm(_ref) {
   });
   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]
@@ -65,7 +69,16 @@ function ContactForm(_ref) {
     console.log("errors from validate", errors);
     return errors;
   };
-  return /*#__PURE__*/React.createElement(Stack, {
+  return /*#__PURE__*/React.createElement(Container, {
+    maxWidth: maxWidth,
+    sx: {
+      my: 1
+    }
+  }, /*#__PURE__*/React.createElement(Paper, {
+    sx: {
+      p: 2
+    }
+  }, /*#__PURE__*/React.createElement(Stack, {
     spacing: 2
   }, /*#__PURE__*/React.createElement(Typography, {
     variant: "h6",
@@ -123,8 +136,7 @@ function ContactForm(_ref) {
     variant: "contained",
     color: "primary",
     onClick: handleSendCallback
-  }, "Send")));
+  }, "Send")))));
 }
-ContactForm.propTypes = {};
 
 export { ContactForm as default };

package/dist/esm/components/Page.js

@@ -12,6 +12,7 @@ import { HeroSection } from './HeroSection.js';
 import { FeatureSection } from './FeaturesSection.js';
 import { IconSection } from './IconSection.js';
 import { Box } from '@mui/material';
+import ContactForm from './ContactForm.js';
 
 function blockRenderer(block) {
   switch (block.__component) {
@@ -25,6 +26,11 @@ function blockRenderer(block) {
         key: block.id,
         data: block
       });
+    case "layout.contact-section":
+      return /*#__PURE__*/React.createElement(ContactForm, {
+        key: block.id,
+        data: block
+      });
     case "layout.text-image-section":
       return /*#__PURE__*/React.createElement(TextImageSection, {
         key: block.id,

package/dist/esm/components/TextImageSection.js

@@ -19,7 +19,7 @@ function TextImageSection(_ref) {
     text,
     image,
     reverse = false,
-    maxWidth
+    maxWidth = "lg"
   } = data;
 
   /* TODO Text_content should deal with linebreaks,

package/package.json

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

package/src/components/ContactForm.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import React from "react";
+import {
+  Container,
+  Paper,
+  TextField,
+  Typography,
+  Stack,
+  Button,
+} from "@mui/material";
+import isEmail from "validator/lib/isEmail";
+
+interface ContactFormProps {
+  id: number;
+  title: string;
+  maxWidth: string;
+}
+
+function ContactForm({ data }: { readonly data: ContactFormProps }) {
+  const { id, title, maxWidth = "lg" } = data;
+
+  const [formValues, setFormValues] = React.useState({
+    name: "",
+    email: "",
+    subject: "",
+    message: "",
+  });
+
+  const [formErrors, setFormErrors] = React.useState({});
+
+  const handleBlur = (e: Event) => {
+    const errors = validate(formValues);
+    setFormErrors({ ...formErrors, [e.target.id]: errors[e.target.id] });
+  };
+
+  const handleChange = (e: Event) => {
+    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 (
+    <Container maxWidth={maxWidth} sx={{ my: 1 }}>
+      <Paper sx={{ p: 2 }}>
+        <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"
+            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>
+      </Paper>
+    </Container>
+  );
+}
+
+export default ContactForm;

package/src/components/Page.js

@@ -7,6 +7,7 @@ import { HeroSection } from "./HeroSection.tsx";
 import { FeatureSection } from "./FeaturesSection.tsx";
 import { IconSection } from "./IconSection.tsx";
 import { Box } from "@mui/material";
+import ContactForm from "./ContactForm.tsx";
 
 function blockRenderer(block) {
   switch (block.__component) {
@@ -14,10 +15,13 @@ function blockRenderer(block) {
       return <HeroSection key={block.id} data={block} />;
     case "layout.features-section":
       return <FeatureSection key={block.id} data={block} />;
+    case "layout.contact-section":
+      return <ContactForm key={block.id} data={block} />;
     case "layout.text-image-section":
       return <TextImageSection key={block.id} data={block} />;
     case "layout.icon-section":
       return <IconSection key={block.id} data={block} />;
+
     default:
       return null;
   }

package/src/components/TextImageSection.tsx

@@ -24,7 +24,7 @@ interface TextImageSectionProps {
 }
 
 function TextImageSection({ data }: Readonly<TextImageSectionProps>) {
-  const { title, text, image, reverse = false, maxWidth } = data;
+  const { title, text, image, reverse = false, maxWidth = "lg" } = data;
 
   /* TODO Text_content should deal with linebreaks,
   reading up upon mui-markdown docs is advised */

package/src/index.js

@@ -10,6 +10,6 @@ export { default as NavBar } from "./components/NavBar";
 export { default as TextImageSection } from "./components/TextImageSection.tsx";
 export { default as Page } from "./components/Page";
 export { default as Footer } from "./components/Footer";
-export { default as ContactForm } from "./components/ContactForm";
+export { default as ContactForm } from "./components/ContactForm.tsx";
 export { default as WebsitePlaceholder } from "./components/WebsitePlaceholder";
 export { default as BulletList } from "./components/BulletList";

package/src/stories/Page.stories.js

@@ -313,5 +313,10 @@ AMH.args = {
         },
       ],
     },
+    {
+      id: 1,
+      __component: "layout.contact-section",
+      title: "Contact us",
+    },
   ],
 };

package/src/components/ContactForm.js

@@ -1,131 +0,0 @@
-"use client";
-
-import React from "react";
-import PropTypes from "prop-types";
-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">
-        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"
-        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>
-  );
-}
-
-ContactForm.propTypes = {};
-
-export default ContactForm;