umwd-components 0.1.98 → 0.1.100

package/dist/cjs/src/index.js

@@ -16,6 +16,7 @@ var ContactForm = require('./components/ContactForm.js');
 var WebsitePlaceholder = require('./components/WebsitePlaceholder.js');
 var BulletList = require('./components/BulletList.js');
 var WhatsAppClickToChatButton = require('./components/WhatsAppClickToChatButton.js');
+var BlockRendererClient = require('./components/BlockRendererClient.js');
 
 
 
@@ -29,3 +30,4 @@ exports.ContactForm = ContactForm.default;
 exports.WebsitePlaceholder = WebsitePlaceholder.default;
 exports.BulletList = BulletList.default;
 exports.WhatsAppClickToChatButton = WhatsAppClickToChatButton.default;
+exports.BlockRendererClient = BlockRendererClient.default;

package/dist/esm/src/index.js

@@ -14,3 +14,4 @@ export { default as ContactForm } from './components/ContactForm.js';
 export { default as WebsitePlaceholder } from './components/WebsitePlaceholder.js';
 export { default as BulletList } from './components/BulletList.js';
 export { default as WhatsAppClickToChatButton } from './components/WhatsAppClickToChatButton.js';
+export { default as BlockRendererClient } from './components/BlockRendererClient.js';

package/package.json

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

package/src/components/PersonaliaSection.tsx

@@ -6,13 +6,10 @@ import {
   Grid,
   useTheme,
   Button,
-  IconButton,
   Stack,
   Tooltip,
 } from "@mui/material";
-import getIcon from "../lib/getIcon.ts";
 import { StrapiImage } from "./StrapiImage.tsx";
-import Link from "next/link";
 import { Email, LinkedIn } from "@mui/icons-material";
 import BlockRendererClient from "./BlockRendererClient.tsx";
 import { type BlocksContent } from "@strapi/blocks-react-renderer";

package/src/index.js

@@ -1,9 +1,4 @@
 //export all components from this file
-// export * from "./components/Requirements";
-
-// import { HeroSection } from "./components/custom/HeroSection.tsx";
-
-// export * from "./components/NoteTextField";
 export { default as Button } from "./components/Button";
 export { default as Stack } from "./components/Stack";
 export { default as NavBar } from "./components/NavBar";
@@ -14,3 +9,4 @@ export { default as ContactForm } from "./components/ContactForm.tsx";
 export { default as WebsitePlaceholder } from "./components/WebsitePlaceholder";
 export { default as BulletList } from "./components/BulletList";
 export { default as WhatsAppClickToChatButton } from "./components/WhatsAppClickToChatButton.tsx";
+export { default as BlockRendererClient } from "./components/BlockRendererClient.tsx";

package/dist/cjs/components/BulletList.js

@@ -1,43 +0,0 @@
-"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 FiberManualRecordIcon = require('@mui/icons-material/FiberManualRecord');
-
-function BulletList(_ref) {
-  let {
-    bullets,
-    bulletSVG
-  } = _ref;
-  console.log("bulletSVG2", bulletSVG);
-  return /*#__PURE__*/React.createElement(material.Stack, {
-    spacing: 2
-  }, bullets.map((bullet, index) => /*#__PURE__*/React.createElement(material.Typography, {
-    key: index,
-    sx: {
-      verticalAlign: "center",
-      alignItems: "center",
-      justifyContent: "flex-start",
-      display: "inline-flex"
-    }
-  }, bulletSVG ? /*#__PURE__*/React.createElement(material.SvgIcon, {
-    sx: {
-      mr: 1
-    }
-  }, bulletSVG) : /*#__PURE__*/React.createElement(FiberManualRecordIcon, null), bullet)));
-}
-BulletList.propTypes = {
-  bullets: PropTypes.arrayOf(PropTypes.string).isRequired
-};
-
-exports.default = BulletList;

package/dist/cjs/components/Button.js

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

@@ -1,69 +0,0 @@
-/*
- * UMWD-Components
- * @copyright Jelle Paulus
- * @license MIT
- */
-  
-'use strict';
-
-var React = require('react');
-var material = require('@mui/material');
-var getIcon = require('../lib/getIcon.js');
-
-function ColumnsSection(_ref) {
-  let {
-    data
-  } = _ref;
-  const {
-    column,
-    maxWidth
-  } = data;
-
-  // TODO make suitable for multiple column layouts
-
-  return /*#__PURE__*/React.createElement(material.Container, {
-    maxWidth: maxWidth || "lg",
-    sx: {
-      my: 1
-    }
-  }, /*#__PURE__*/React.createElement(material.Grid, {
-    container: true,
-    spacing: 2
-  }, column.map(column => {
-    const Icon = getIcon.default(column.icon);
-    return /*#__PURE__*/React.createElement(material.Grid, {
-      item: true,
-      xs: 12,
-      md: 6,
-      key: column.id
-    }, /*#__PURE__*/React.createElement(material.Paper, {
-      sx: {
-        p: 2,
-        height: "100%"
-      }
-    }, /*#__PURE__*/React.createElement(material.Typography, {
-      variant: "h5",
-      sx: {
-        mb: 2,
-        display: "flex",
-        justifyContent: "flex-start",
-        alignItems: "center"
-      }
-    }, Icon !== null && /*#__PURE__*/React.createElement(Icon, {
-      sx: {
-        mr: 2,
-        mt: 0.2,
-        width: "50px",
-        height: "50px",
-        fill: "currentColor",
-        stroke: "none"
-      }
-    }), column.heading), /*#__PURE__*/React.createElement(material.Typography, {
-      variant: "body2",
-      color: "text.secondary",
-      component: "div"
-    }, column.text)));
-  })));
-}
-
-exports.ColumnsSection = ColumnsSection;

package/dist/cjs/components/ContactForm.js

@@ -1,223 +0,0 @@
-"use client";
-/*
- * 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 isEmail = require('validator/lib/isEmail');
-
-function ContactForm(_ref) {
-  let {
-    data
-  } = _ref;
-  const {
-    maxWidth
-  } = data;
-  const [formValues, setFormValues] = React.useState({
-    name: "",
-    email: "",
-    subject: "",
-    message: ""
-  });
-  const [formErrors, setFormErrors] = React.useState({});
-
-  // Setting button text on form submission
-  React.useState("Send");
-
-  // Setting success or failure messages states
-  const [showSuccessMessage, setShowSuccessMessage] = React.useState(false);
-  const [showFailureMessage, setShowFailureMessage] = React.useState(false);
-  const handleChange = e => {
-    const {
-      name,
-      value
-    } = e.target;
-    setFormValues({
-      ...formValues,
-      [name]: value
-    });
-  };
-  const handleBlur = e => {
-    const {
-      name
-    } = e.target;
-    const errors = validate(formValues);
-    if (errors[name]) {
-      setFormErrors(prevErrors => ({
-        ...prevErrors,
-        [name]: errors[name]
-      }));
-    } else {
-      setFormErrors(prevErrors => {
-        const updatedErrors = {
-          ...prevErrors
-        };
-        delete updatedErrors[name];
-        return updatedErrors;
-      });
-    }
-  };
-  const handleClear = () => {
-    setFormValues({
-      name: "",
-      email: "",
-      subject: "",
-      message: ""
-    });
-  };
-
-  /* const handleSendCallback = () => {
-    console.log("Send callback");
-  }; */
-
-  const handleSubmit = async e => {
-    e.preventDefault();
-    let isValidForm = validate(formValues);
-    console.log("isValidForm", isValidForm);
-    if (Object.keys(isValidForm).length === 0) {
-      const res = await fetch("/api/sendgrid", {
-        body: JSON.stringify({
-          email: formValues.email,
-          fullname: formValues.name,
-          subject: formValues.subject,
-          message: formValues.message
-        }),
-        headers: {
-          "Content-Type": "application/json"
-        },
-        method: "POST"
-      });
-      const {
-        error
-      } = await res.json();
-      if (error) {
-        setShowFailureMessage(true);
-        console.log(error);
-        return;
-      } else {
-        setShowSuccessMessage(true);
-      }
-    }
-  };
-  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.Container, {
-    maxWidth: maxWidth ? maxWidth : "lg",
-    sx: {
-      my: 1
-    }
-  }, /*#__PURE__*/React.createElement(material.Stack, {
-    spacing: 2,
-    sx: {
-      width: "100%"
-    }
-  }, /*#__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"), showSuccessMessage && /*#__PURE__*/React.createElement(material.Paper, {
-    sx: {
-      p: 2
-    }
-  }, /*#__PURE__*/React.createElement(material.Stack, {
-    spacing: 2
-  }, /*#__PURE__*/React.createElement(material.Typography, {
-    variant: "h6"
-  }, "Thank you!"), /*#__PURE__*/React.createElement(material.Typography, null, "Your e-mail has been successfully sent!"))), showFailureMessage && /*#__PURE__*/React.createElement(material.Paper, {
-    sx: {
-      p: 2
-    }
-  }, /*#__PURE__*/React.createElement(material.Stack, {
-    spacing: 2
-  }, /*#__PURE__*/React.createElement(material.Typography, null, "I am sorry, something went wrong, you could email me directly on info@jellepaulus.nl"), /*#__PURE__*/React.createElement(material.Button, {
-    variant: "contained"
-  }, "try again")))), !showSuccessMessage && !showFailureMessage && /*#__PURE__*/React.createElement(material.Paper, {
-    sx: {
-      p: 2
-    }
-  }, /*#__PURE__*/React.createElement(material.Stack, {
-    spacing: 2
-  }, /*#__PURE__*/React.createElement(material.TextField, {
-    id: "name",
-    name: "name",
-    label: "Name",
-    value: formValues.name,
-    variant: "outlined",
-    onBlur: handleBlur,
-    onChange: handleChange,
-    error: formErrors.name != undefined ? true : false,
-    helperText: formErrors.name
-  }), /*#__PURE__*/React.createElement(material.TextField, {
-    id: "email",
-    name: "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",
-    name: "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",
-    name: "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",
-    onClick: handleSubmit
-  }, "Send")))));
-}
-
-exports.default = ContactForm;

package/dist/cjs/components/FeaturesSection.js

@@ -1,100 +0,0 @@
-/*
- * UMWD-Components
- * @copyright Jelle Paulus
- * @license MIT
- */
-  
-'use strict';
-
-var React = require('react');
-var material = require('@mui/material');
-var getIcon = require('../lib/getIcon.js');
-
-function FeatureSection(_ref) {
-  let {
-    data
-  } = _ref;
-  const {
-    feature,
-    maxWidth
-  } = data;
-  const theme = material.useTheme();
-  return /*#__PURE__*/React.createElement(material.Container, {
-    maxWidth: maxWidth || "lg",
-    sx: {
-      my: 1
-    }
-  }, /*#__PURE__*/React.createElement(material.Stack, {
-    spacing: 2,
-    direction: "row",
-    justifyContent: "stretch",
-    flexWrap: "wrap",
-    sx: {
-      width: "100%",
-      [theme.breakpoints.up("xs")]: {
-        flexDirection: "column"
-      },
-      [theme.breakpoints.up("sm")]: {
-        flexDirection: "row"
-      }
-    },
-    useFlexGap: true
-  }, feature.map(feature => {
-    const Icon = getIcon.default(feature.icon);
-    return /*#__PURE__*/React.createElement(material.Card, {
-      key: feature.id,
-      sx: {
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "space-between",
-        flex: 1,
-        minWidth: 275
-      }
-    }, /*#__PURE__*/React.createElement(material.CardContent, null, /*#__PURE__*/React.createElement(material.Box, {
-      sx: {
-        height: 140,
-        display: "grid",
-        alignItems: "center",
-        justifyContent: "center"
-      }
-    }, Icon !== null && /*#__PURE__*/React.createElement(Icon, {
-      sx: {
-        mr: 2,
-        mt: 0.2,
-        width: "75px",
-        height: "75px",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: 0.5
-      }
-    })), /*#__PURE__*/React.createElement(material.Typography, {
-      variant: "h5",
-      align: "center",
-      component: "div",
-      sx: {
-        mb: 2
-      }
-    }, feature.heading), /*#__PURE__*/React.createElement(material.Typography, {
-      variant: "h6",
-      align: "center",
-      component: "div",
-      sx: {
-        mb: 2
-      }
-    }, feature.subHeading.substring(0, 50)), /*#__PURE__*/React.createElement(material.Typography, {
-      variant: "body2",
-      color: "text.secondary",
-      component: "div"
-    }, feature.subHeading)), /*#__PURE__*/React.createElement(material.CardActions, {
-      sx: {
-        mb: 0
-      }
-    }, /*#__PURE__*/React.createElement(material.Button, {
-      size: "small"
-    }, "Contact"), /*#__PURE__*/React.createElement(material.Button, {
-      size: "small"
-    }, "Learn More")));
-  })));
-}
-
-exports.FeatureSection = FeatureSection;