umwd-components 0.1.111 → 0.1.112

package/dist/cjs/components/BulletList.js

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

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

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

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

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

package/dist/cjs/components/FleetSection.js

@@ -0,0 +1,153 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+var React = require('react');
+var material = require('@mui/material');
+var StrapiImage = require('./StrapiImage.js');
+var RadarIcon = require('@mui/icons-material/Radar');
+var SpeedIcon = require('@mui/icons-material/Speed');
+var HeightIcon = require('@mui/icons-material/Height');
+
+function FleetSection(_ref) {
+  let {
+    data
+  } = _ref;
+  const {
+    airplane,
+    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
+  }, airplane.map(airplane => /*#__PURE__*/React.createElement(material.Card, {
+    key: airplane.id,
+    sx: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      flex: 1,
+      minWidth: 275
+    }
+  }, /*#__PURE__*/React.createElement(material.CardHeader, {
+    title: airplane.name,
+    subheader: airplane.description
+  }), /*#__PURE__*/React.createElement(material.CardMedia, {
+    sx: {
+      p: 1,
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement(material.Paper, {
+    sx: {
+      p: 1,
+      py: "4rem",
+      position: "relative",
+      display: "grid",
+      alignItems: "center",
+      justifyContent: "center",
+      height: "100%"
+    },
+    variant: "outlined"
+  }, airplane.floorplan !== null && /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
+    src: airplane.floorplan.url,
+    alt: airplane.floorplan.alternativeText,
+    width: airplane.floorplan.width,
+    height: airplane.floorplan.height,
+    style: {
+      objectFit: "contain",
+      width: "100%",
+      height: "100%"
+    }
+  }), /*#__PURE__*/React.createElement(material.Box, {
+    sx: {
+      position: "absolute",
+      right: "1rem",
+      bottom: "1rem"
+    }
+  }, /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "body2",
+    color: "text.secondary",
+    align: "right"
+  }, /*#__PURE__*/React.createElement("strong", null, "Cabin Dimensions:"), " ", /*#__PURE__*/React.createElement("strong", null, "H"), " ", airplane.cabinHeight, " m ", /*#__PURE__*/React.createElement("strong", null, "W"), " ", airplane.cabinWidth, " m ", /*#__PURE__*/React.createElement("strong", null, "L"), " ", airplane.cabinLength, " m")))), /*#__PURE__*/React.createElement(material.CardContent, {
+    sx: {}
+  }, /*#__PURE__*/React.createElement(material.Stack, {
+    direction: "row",
+    spacing: 1,
+    flexWrap: "wrap",
+    useFlexGap: true
+  }, /*#__PURE__*/React.createElement(material.Chip, {
+    label: "Range: ".concat(airplane.range, " km"),
+    variant: "filled",
+    color: "primary",
+    icon: /*#__PURE__*/React.createElement(RadarIcon, null)
+  }), /*#__PURE__*/React.createElement(material.Chip, {
+    label: "Speed: ".concat(airplane.speed, " km/h"),
+    variant: "filled",
+    color: "primary",
+    icon: /*#__PURE__*/React.createElement(SpeedIcon, null)
+  }), /*#__PURE__*/React.createElement(material.Chip, {
+    label: "Ceiling: ".concat(airplane.ceiling, " ft"),
+    variant: "filled",
+    color: "primary",
+    icon: /*#__PURE__*/React.createElement(HeightIcon, null)
+  })))))));
+}
+
+/* 
+{
+      id: 1,
+      __component: "layout.fleet-section",
+      title: "Fleet",
+      description: "Description of our fleet",
+      airplane: [
+        {
+          id: 1,
+          name: "CHALLENGER 604",
+          description:
+            "Bombardier Challenger 604. Is our best long-range jet and can be equipped with an intensive care unit for one critical care patient or the option to carry 2 stable patients. ",
+          range: "7408",
+          speed: "854",
+          ceiling: "41000",
+          cabinHeight: 1.83,
+          cabinWidth: 2.11,
+          cabinLength: 8.66,
+        },
+        {
+          id: 2,
+          name: "BEECHCRAFT KING AIR 200",
+          description:
+            "A twin turboprop aircraft with pressurized cabin. Is our best air ambulance for Europe and North Africa. It is equipped with a single stretcher for one stable ICU patient.",
+          range: "2200",
+          speed: "500",
+          ceiling: "35000",
+          cabinHeight: 1.46,
+          cabinWidth: 1.37,
+          cabinLength: 5.08,
+        },
+      ],
+    },
+     */
+
+exports.FleetSection = FleetSection;