umwd-components 0.1.233 → 0.1.235

package/dist/cjs/components/FleetSection.js

@@ -13,6 +13,15 @@ var RadarIcon = require('@mui/icons-material/Radar');
 var SpeedIcon = require('@mui/icons-material/Speed');
 var HeightIcon = require('@mui/icons-material/Height');
 
+/* interface ImageProps {
+  id: number;
+  url: string;
+  alternativeText: string;
+  style: React.CSSProperties;
+  width: number;
+  height: number;
+} */
+
 function FleetSection(_ref) {
   let {
     data
@@ -79,8 +88,8 @@ function FleetSection(_ref) {
       variant: "outlined"
     }, airplane.floorplan !== null && /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
       id: (_airplane$floorplan$i = airplane.floorplan.id) === null || _airplane$floorplan$i === void 0 ? void 0 : _airplane$floorplan$i.toString(),
-      src: airplane.floorplan.url,
-      alt: airplane.floorplan.alternativeText,
+      url: airplane.floorplan.url,
+      alternativeText: airplane.floorplan.alternativeText,
       width: airplane.floorplan.width,
       height: airplane.floorplan.height,
       style: {

package/dist/cjs/components/PageBuilder.js

@@ -0,0 +1,135 @@
+/*
+ * 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 PBTextImageSection = require('./page-builder/PBTextImageSection.js');
+var HeroSection = require('./HeroSection.js');
+var FeaturesSection = require('./FeaturesSection.js');
+var FleetSection = require('./FleetSection.js');
+var IconSection = require('./IconSection.js');
+var ColumnsSection = require('./ColumnsSection.js');
+var ContactForm = require('./ContactForm.js');
+var PersonaliaSection = require('./PersonaliaSection.js');
+var PictureBarSection = require('./PictureBarSection.js');
+var LogoBarSection = require('./LogoBarSection.js');
+var reactDom = require('react-dom');
+var pagebuilderActions = require('../data/actions/pagebuilder-actions.js');
+
+const INITIAL_STATE = {
+  zodErrors: null,
+  strapiErrors: null,
+  data: null,
+  message: null
+};
+function blockRenderer(block) {
+  switch (block.__component) {
+    case "layout.hero-section":
+      return /*#__PURE__*/React.createElement(HeroSection.HeroSection, {
+        key: block.id,
+        data: block
+      });
+    case "layout.features-section":
+      return /*#__PURE__*/React.createElement(FeaturesSection.FeatureSection, {
+        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(PBTextImageSection.PBTextImageSection, {
+        key: block.id,
+        data: block
+      });
+    case "layout.icon-section":
+      return /*#__PURE__*/React.createElement(IconSection.IconSection, {
+        key: block.id,
+        data: block
+      });
+    case "layout.fleet-section":
+      return /*#__PURE__*/React.createElement(FleetSection.FleetSection, {
+        key: block.id,
+        data: block
+      });
+    case "layout.columns-section":
+      return /*#__PURE__*/React.createElement(ColumnsSection.ColumnsSection, {
+        key: block.id,
+        data: block
+      });
+    case "layout.personalia-section":
+      return /*#__PURE__*/React.createElement(PersonaliaSection.PersonaliaSection, {
+        key: block.id,
+        data: block
+      });
+    case "layout.picture-bar-section":
+      return /*#__PURE__*/React.createElement(PictureBarSection.PictureBarSection, {
+        key: block.id,
+        data: block
+      });
+    case "layout.logo-bar-section":
+      return /*#__PURE__*/React.createElement(LogoBarSection.LogoBarSection, {
+        key: block.id,
+        data: block
+      });
+    default:
+      return null;
+  }
+}
+function PageBuilder(_ref) {
+  let {
+    data
+  } = _ref;
+  const {
+    title,
+    description,
+    blocks,
+    sx
+  } = data;
+  if (!blocks) {
+    return /*#__PURE__*/React.createElement("p", null, "No sections found");
+  }
+  const [formState, formAction] = reactDom.useFormState(pagebuilderActions.updatePageAction, INITIAL_STATE);
+  return /*#__PURE__*/React.createElement(material.Box, {
+    sx: {
+      ...sx
+    }
+  }, /*#__PURE__*/React.createElement("form", {
+    action: formAction
+  }, /*#__PURE__*/React.createElement(material.Box, {
+    sx: {
+      width: "100%",
+      backgroundColor: "primary.dark",
+      p: 2
+    }
+  }, /*#__PURE__*/React.createElement(material.Button, {
+    variant: "contained",
+    color: "primary"
+  }, "Save")), /*#__PURE__*/React.createElement(material.Stack, {
+    spacing: 2,
+    sx: {
+      p: 2
+    }
+  }, /*#__PURE__*/React.createElement(material.TextField, {
+    id: "title",
+    name: "title",
+    value: title,
+    label: "title"
+  }), /*#__PURE__*/React.createElement(material.TextField, {
+    id: "description",
+    name: "description",
+    value: description,
+    label: "description"
+  })), blocks.map(blockRenderer)));
+}
+
+exports.default = PageBuilder;

package/dist/cjs/components/PersonaliaSection.js

@@ -14,6 +14,15 @@ var iconsMaterial = require('@mui/icons-material');
 var BlockRendererClient = require('./BlockRendererClient.js');
 var MuiLink = require('./MuiLink.js');
 
+/* interface ImageProps {
+  id: string; // because the next Image ultimately requires a string
+  url: string;
+  alternativeText: string;
+  style: React.CSSProperties;
+  width: number;
+  height: number;
+} */
+
 function needsShortening(data, maxLength) {
   let totalLength = 0;
   for (const paragraph of data) {
@@ -111,8 +120,8 @@ function PartnerDialog(_ref) {
     alignItems: "stretch"
   }, ((_partner$photo = partner.photo) === null || _partner$photo === void 0 ? void 0 : _partner$photo.url) && /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
     id: partner.photo.id,
-    src: partner.photo.url,
-    alt: partner.photo.alternativeText,
+    url: partner.photo.url,
+    alternativeText: partner.photo.alternativeText,
     width: 200,
     height: 200,
     style: {
@@ -217,8 +226,8 @@ function Partner(partner, index) {
     alignItems: "stretch"
   }, ((_partner$photo2 = partner.photo) === null || _partner$photo2 === void 0 ? void 0 : _partner$photo2.url) && /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
     id: partner.photo.id,
-    src: partner.photo.url,
-    alt: partner.photo.alternativeText,
+    url: partner.photo.url,
+    alternativeText: partner.photo.alternativeText,
     width: 200,
     height: 200,
     style: {

package/dist/cjs/components/PictureBarSection.js

@@ -12,6 +12,15 @@ var material = require('@mui/material');
 var StrapiImage = require('./StrapiImage.js');
 var utils = require('../lib/utils.js');
 
+/* interface ImageProps {
+  id: number;
+  url: string;
+  alternativeText: string;
+  style: React.CSSProperties;
+  width: number;
+  height: number;
+} */
+
 function PictureBarSection(_ref) {
   let {
     data
@@ -56,8 +65,8 @@ function PictureBarSection(_ref) {
     }
   }, /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
     id: picture.id.toString(),
-    src: picture.url,
-    alt: picture.alternativeText,
+    url: picture.url,
+    alternativeText: picture.alternativeText,
     width: picture.width,
     height: picture.height,
     style: {

package/dist/cjs/components/TextImageSection.js

@@ -61,10 +61,10 @@ function StickyImage(_ref) {
     }
   }, /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
     id: "image".concat(image.url),
-    alt: image.alternativeText,
+    alternativeText: image.alternativeText,
     height: image.height,
     width: image.width,
-    src: image.url,
+    url: image.url,
     style: {
       width: "100%",
       height: "auto",
@@ -76,19 +76,6 @@ function StickyImage(_ref) {
     }
   }));
 }
-
-/* 
-TODO intregrate this interface into StrapiImage.tsx
-
-interface ImageProps {
-  id: number;
-  url: string;
-  alternativeText: string;
-  style: React.CSSProperties;
-  width: number;
-  height: number;
-} */
-
 function TextImageSection(_ref2) {
   let {
     data

package/dist/cjs/components/dashboard/SideNav.js

@@ -182,7 +182,13 @@ function SideNav(_ref) {
     }
   }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
     onClick: handleDrawerClose
-  }, theme.direction === "rtl" ? /*#__PURE__*/React__namespace.createElement(iconsMaterial.ChevronRight, null) : /*#__PURE__*/React__namespace.createElement(iconsMaterial.ChevronLeft, null))), /*#__PURE__*/React__namespace.createElement(material.Divider, null), sections.map((section, index) => /*#__PURE__*/React__namespace.createElement(Link, {
+  }, theme.direction === "rtl" ? /*#__PURE__*/React__namespace.createElement(iconsMaterial.ChevronRight, null) : /*#__PURE__*/React__namespace.createElement(iconsMaterial.ChevronLeft, null))), /*#__PURE__*/React__namespace.createElement(material.Divider, null), sections.map((section, index) => /*#__PURE__*/React__namespace.createElement(material.Box, {
+    sx: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-start"
+    }
+  }, /*#__PURE__*/React__namespace.createElement(Link, {
     key: index,
     href: section.link,
     passHref: true
@@ -194,11 +200,30 @@ function SideNav(_ref) {
       p: 1,
       cursor: "pointer"
     }
-  }, section.icon, open && /*#__PURE__*/React__namespace.createElement(material.Typography, {
+  }, section.icon, !open && section.subSections && /*#__PURE__*/React__namespace.createElement(material.Typography, null, "..."), open && /*#__PURE__*/React__namespace.createElement(material.Typography, {
     sx: {
       pl: 2
     }
-  }, section.title))))), /*#__PURE__*/React__namespace.createElement(material.Box, {
+  }, section.title))), section.subSections && open && section.subSections.map((subSection, index) => {
+    return /*#__PURE__*/React__namespace.createElement(Link, {
+      key: index,
+      href: subSection.link,
+      passHref: true
+    }, /*#__PURE__*/React__namespace.createElement(material.Box, {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        p: 1,
+        cursor: "pointer"
+      }
+    }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
+      variant: "body2",
+      sx: {
+        pl: 4
+      }
+    }, subSection.title)));
+  })))), /*#__PURE__*/React__namespace.createElement(material.Box, {
     component: "main",
     sx: {
       flexGrow: 1,

package/dist/cjs/components/page-builder/PBTextImageSection.js

@@ -0,0 +1,150 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+var React = require('react');
+var material = require('@mui/material');
+var StrapiImage = require('../StrapiImage.js');
+var utils = require('../../lib/utils.js');
+
+function StickyImage(_ref) {
+  let {
+    image
+  } = _ref;
+  const theme = material.useTheme();
+  const imageSrc = image.url;
+  if (imageSrc === undefined) {
+    return null;
+  }
+  const [offsetY, setOffsetY] = React.useState(0);
+  const handleScroll = () => {
+    const offset = 160;
+    const imageDivID = "image-container".concat(image.url);
+    const imageDiv = document.getElementById(imageDivID);
+    const imageID = "image".concat(image.url);
+    const imageElement = document.getElementById(imageID);
+    if (imageDiv === null || imageElement === null) {
+      return;
+    }
+    const imageDivRect = imageDiv.getBoundingClientRect();
+    const imageRect = imageElement.getBoundingClientRect();
+    if (imageRect.height >= imageDivRect.height) {
+      return;
+    }
+    const imageAtBottomOffset = imageDivRect.height - imageRect.height;
+    if (imageDivRect.y <= offset && -imageDivRect.y <= imageDivRect.height - imageRect.height - offset) {
+      setOffsetY(-imageDivRect.y + offset);
+    } else if (imageDivRect.y > 0) {
+      setOffsetY(0);
+    } else {
+      setOffsetY(imageAtBottomOffset);
+    }
+  };
+  React.useEffect(() => {
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []); // Empty dependency array to run effect only once
+
+  return /*#__PURE__*/React.createElement(material.Box, {
+    id: "image-container".concat(image.url),
+    sx: {
+      height: "100%",
+      position: "relative"
+    }
+  }, /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
+    id: "image".concat(image.url),
+    alternativeText: image.alternativeText,
+    height: image.height,
+    width: image.width,
+    url: image.url,
+    style: {
+      width: "100%",
+      height: "auto",
+      display: "block",
+      position: "relative",
+      top: offsetY,
+      borderRadius: 4,
+      border: "1px solid ".concat(theme.palette.secondary.main)
+    }
+  }));
+}
+function PBTextImageSection(_ref2) {
+  let {
+    data
+  } = _ref2;
+  const {
+    title,
+    text,
+    image,
+    reverse = false,
+    maxWidth,
+    sx = {},
+    glass = false,
+    anchor = ""
+  } = data;
+
+  /* TODO Text_content should deal with linebreaks,
+  reading up upon mui-markdown docs is advised */
+
+  /* TODO Replace with blocks */
+
+  const theme = material.useTheme();
+  return /*#__PURE__*/React.createElement(material.Container, {
+    maxWidth: maxWidth ? maxWidth : "lg",
+    sx: {
+      my: 1,
+      ...sx
+    },
+    id: anchor
+  }, title && /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "h1",
+    textAlign: "center",
+    sx: {
+      pb: 2
+    }
+  }, title), /*#__PURE__*/React.createElement(material.Grid, {
+    container: true,
+    spacing: 2,
+    direction: reverse ? "row-reverse" : "row"
+  }, /*#__PURE__*/React.createElement(material.Grid, {
+    item: true,
+    xs: 12,
+    md: (image === null || image === void 0 ? void 0 : image.url) !== undefined ? 8 : 12
+  }, /*#__PURE__*/React.createElement(material.Paper, {
+    sx: {
+      p: 2,
+      backdropFilter: "blur(3px)",
+      backgroundColor: utils.setOpacity(theme.palette.background.paper, glass ? 0.1 : 1),
+      border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none"
+    }
+  }, text !== null && text !== undefined && /*#__PURE__*/React.createElement(material.Box, {
+    sx: {
+      height: "100%",
+      overflow: "hidden",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-start"
+    }
+  }, /*#__PURE__*/React.createElement(material.TextField, {
+    multiline: true,
+    placeholder: text,
+    value: text,
+    onChange: e => console.log(e.target.value),
+    sx: {
+      width: "100%"
+    }
+  })))), (image === null || image === void 0 ? void 0 : image.url) !== undefined && /*#__PURE__*/React.createElement(material.Grid, {
+    item: true,
+    xs: 12,
+    md: 4
+  }, /*#__PURE__*/React.createElement(StickyImage, {
+    image: image
+  }))));
+}
+
+exports.PBTextImageSection = PBTextImageSection;

package/dist/cjs/data/actions/pagebuilder-actions.js

@@ -0,0 +1,197 @@
+"use server";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+var zod = require('zod');
+var pagebuilderService = require('../services/pagebuilder-service.js');
+
+var _process$env$HOST;
+({
+  maxAge: 60 * 60 * 24 * 7,
+  // 1 week
+  path: "/",
+  domain: (_process$env$HOST = process.env.HOST) !== null && _process$env$HOST !== void 0 ? _process$env$HOST : "localhost",
+  httpOnly: true,
+  secure: process.env.NODE_ENV === "production"
+});
+const schemaUpdate = zod.z.object({
+  id: zod.z.string(),
+  title: zod.z.string().min(3).max(100, {
+    message: "Title must be between 3 and 100 characters"
+  }),
+  description: zod.z.string().min(3).max(200, {
+    message: "Description must be between 3 and 200 characters"
+  })
+  /* blocks: z.array(
+    z.object({
+      id: z.string(),
+      type: z.string(),
+      data: z.object({
+        text: z.string().min(3).max(200, {
+          message: "Text must be between 3 and 200 characters",
+        }),
+      }),
+    })
+  ), */
+});
+async function updatePageAction(prevState, FormData) {
+  const validatedFields = schemaUpdate.safeParse({
+    id: FormData.get("id"),
+    title: FormData.get("title"),
+    description: FormData.get("description")
+    // blocks: FormData.get("blocks"),
+  });
+  if (!validatedFields.success) {
+    return {
+      ...prevState,
+      zodErrors: validatedFields.error.flatten().fieldErrors,
+      strapiErrors: null,
+      message: "Missing Fields. Failed to Update Page."
+    };
+  }
+  const responseData = await pagebuilderService.updatePageService(validatedFields.data);
+  if (!responseData) {
+    return {
+      ...prevState,
+      strapiErrors: null,
+      zodErrors: null,
+      message: "Ops! Something went wrong. Please try again."
+    };
+  }
+  if (responseData.error) {
+    return {
+      ...prevState,
+      strapiErrors: responseData.error,
+      zodErrors: null,
+      message: "Failed to Update Page."
+    };
+  }
+  return {
+    ...prevState,
+    strapiErrors: null,
+    zodErrors: null,
+    message: "Page Updated Successfully."
+  };
+}
+
+/* const schemaRegister = z.object({
+  username: z.string().min(3).max(20, {
+    message: "Username must be between 3 and 20 characters",
+  }),
+  password: z.string().min(6).max(100, {
+    message: "Password must be between 6 and 100 characters",
+  }),
+  email: z.string().email({
+    message: "Please enter a valid email address",
+  }),
+});
+
+export async function registerUserAction(prevState: any, formData: FormData) {
+  const validatedFields = schemaRegister.safeParse({
+    username: formData.get("username"),
+    password: formData.get("password"),
+    email: formData.get("email"),
+  });
+
+  if (!validatedFields.success) {
+    return {
+      ...prevState,
+      zodErrors: validatedFields.error.flatten().fieldErrors,
+      strapiErrors: null,
+      message: "Missing Fields. Failed to Register.",
+    };
+  }
+
+  const responseData = await registerUserService(validatedFields.data);
+
+  if (!responseData) {
+    return {
+      ...prevState,
+      strapiErrors: null,
+      zodErrors: null,
+      message: "Ops! Something went wrong. Please try again.",
+    };
+  }
+
+  if (responseData.error) {
+    return {
+      ...prevState,
+      strapiErrors: responseData.error,
+      zodErrors: null,
+      message: "Failed to Register.",
+    };
+  }
+
+  cookies().set("jwt", responseData.jwt, config);
+  redirect("/dashboard");
+}
+
+const schemaLogin = z.object({
+  identifier: z
+    .string()
+    .min(3, {
+      message: "Identifier must have at least 3 or more characters",
+    })
+    .max(20, {
+      message: "Please enter a valid username or email address",
+    }),
+  password: z
+    .string()
+    .min(6, {
+      message: "Password must have at least 6 or more characters",
+    })
+    .max(100, {
+      message: "Password must be between 6 and 100 characters",
+    }),
+});
+
+export async function loginUserAction(prevState: any, formData: FormData) {
+  const validatedFields = schemaLogin.safeParse({
+    identifier: formData.get("identifier"),
+    password: formData.get("password"),
+  });
+
+  if (!validatedFields.success) {
+    return {
+      ...prevState,
+      zodErrors: validatedFields.error.flatten().fieldErrors,
+      message: "Missing Fields. Failed to Login.",
+    };
+  }
+
+  const responseData = await loginUserService(validatedFields.data);
+
+  if (!responseData) {
+    return {
+      ...prevState,
+      strapiErrors: responseData.error,
+      zodErrors: null,
+      message: "Ops! Something went wrong. Please try again.",
+    };
+  }
+
+  if (responseData.error) {
+    return {
+      ...prevState,
+      strapiErrors: responseData.error,
+      zodErrors: null,
+      message: "Failed to Login.",
+    };
+  }
+
+  cookies().set("jwt", responseData.jwt, config);
+
+  redirect("/dashboard");
+}
+
+export async function logoutAction() {
+  cookies().set("jwt", "", { ...config, maxAge: 0 });
+  redirect("/");
+} */
+
+exports.updatePageAction = updatePageAction;

package/dist/cjs/data/services/pagebuilder-service.js

@@ -0,0 +1,32 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+var utils = require('../../lib/utils.js');
+
+const baseUrl = utils.getStrapiURL();
+async function updatePageService(pageData) {
+  const url = new URL("/api/pages/".concat(pageData.id), baseUrl);
+  try {
+    const response = await fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+        // Add the jwt bearer token here
+      },
+      body: JSON.stringify({
+        ...pageData
+      }),
+      cache: "no-cache"
+    });
+    return response.json();
+  } catch (error) {
+    console.error("Page Builder Error:", error);
+  }
+}
+
+exports.updatePageService = updatePageService;

package/dist/cjs/index.js

@@ -23,6 +23,7 @@ var RegisterForm = require('./components/forms/RegisterForm.js');
 var SigninForm = require('./components/forms/SigninForm.js');
 var SideNav = require('./components/dashboard/SideNav.js');
 var LogoutButton = require('./components/LogoutButton.js');
+var PageBuilder = require('./components/PageBuilder.js');
 
 
 
@@ -43,3 +44,4 @@ exports.RegisterForm = RegisterForm.default;
 exports.SigninForm = SigninForm.default;
 exports.SideNav = SideNav.default;
 exports.LogoutButton = LogoutButton.default;
+exports.PageBuilder = PageBuilder.default;