umwd-components 0.1.136 → 0.1.138

package/dist/cjs/components/ContactForm.js

@@ -12,6 +12,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var material = require('@mui/material');
 var isEmail = require('validator/lib/isEmail');
+var utils = require('../lib/utils.js');
+var styles = require('@mui/material/styles');
 
 function ContactForm(_ref) {
   let {
@@ -19,7 +21,8 @@ function ContactForm(_ref) {
   } = _ref;
   const {
     maxWidth,
-    sx = {}
+    sx = {},
+    glass = false
   } = data;
   const [formValues, setFormValues] = React.useState({
     name: "",
@@ -127,6 +130,7 @@ function ContactForm(_ref) {
     console.log("errors from validate", errors);
     return errors;
   };
+  const theme = styles.useTheme();
   return /*#__PURE__*/React.createElement(material.Container, {
     maxWidth: maxWidth ? maxWidth : "lg",
     sx: {
@@ -162,7 +166,10 @@ function ContactForm(_ref) {
     variant: "contained"
   }, "try again")))), !showSuccessMessage && !showFailureMessage && /*#__PURE__*/React.createElement(material.Paper, {
     sx: {
-      p: 2
+      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"
     }
   }, /*#__PURE__*/React.createElement(material.Stack, {
     spacing: 2

package/dist/cjs/components/HeroSection.js

@@ -10,6 +10,7 @@ var React = require('react');
 var Link = require('next/link');
 var material = require('@mui/material');
 var StrapiImage = require('./StrapiImage.js');
+var utils = require('../lib/utils.js');
 
 function HeroSection(_ref) {
   let {
@@ -22,8 +23,11 @@ function HeroSection(_ref) {
     logoImage,
     link,
     maxWidth,
-    sx = {}
+    sx = {},
+    glass = false
   } = data;
+  const theme = material.useTheme();
+  utils.setOpacity(theme.palette.background.paper, 0.1);
   return /*#__PURE__*/React.createElement("header", {
     style: {
       position: "relative",
@@ -63,7 +67,10 @@ function HeroSection(_ref) {
   }, /*#__PURE__*/React.createElement(material.Paper, {
     sx: {
       px: 2,
-      py: 2
+      py: 7,
+      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"
     }
   }, /*#__PURE__*/React.createElement(material.Stack, {
     spacing: 5,

package/dist/cjs/components/TextImageSection.js

@@ -12,6 +12,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var material = require('@mui/material');
 var StrapiImage = require('./StrapiImage.js');
+var utils = require('../lib/utils.js');
 
 const MuiMarkdown = /*#__PURE__*/React.lazy(() => import( /* webpackChunkName: "mui-markdown" */'mui-markdown'));
 
@@ -37,7 +38,8 @@ function TextImageSection(_ref) {
     image,
     reverse = false,
     maxWidth,
-    sx = {}
+    sx = {},
+    glass = false
   } = data;
 
   /* TODO Text_content should deal with linebreaks,
@@ -54,7 +56,10 @@ function TextImageSection(_ref) {
     }
   }, /*#__PURE__*/React.createElement(material.Paper, {
     sx: {
-      p: 2
+      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"
     }
   }, title && /*#__PURE__*/React.createElement(material.Typography, {
     variant: "h1",

package/dist/cjs/lib/utils.js

@@ -23,6 +23,35 @@ function getStrapiMedia(url) {
   if (url.startsWith("http") || url.startsWith("//")) return url;
   return "".concat(getStrapiURL()).concat(url);
 }
+function setOpacity(color, opacity) {
+  // Clamp opacity between 0 and 1
+  opacity = Math.min(Math.max(opacity, 0), 1);
+
+  // Regex to match various color formats (hex, rgb, rgba)
+  const match = color.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i);
+  if (match) {
+    // Hex color
+    const [, r, g, b, alpha = "FF"] = match;
+    return "rgba(".concat(parseInt(r, 16), ", ").concat(parseInt(g, 16), ", ").concat(parseInt(b, 16), ", ").concat(parseInt(alpha, 16) / 255 * opacity, ")");
+  } else {
+    // Parse RGB or RGBA manually
+    const rgbMatch = color.match(/^rgb\((\d+)(?:,(\d+))?(?:,(\d+))?\)$/i);
+    const rgbaMatch = color.match(/^rgba\((\d+)(?:,(\d+))?(?:,(\d+))?(?:,([.\d]+))?\)$/i);
+    if (rgbMatch) {
+      // RGB format
+      const [, red, green, blue] = rgbMatch;
+      return "rgba(".concat(red, ", ").concat(green, ", ").concat(blue, ", ").concat(opacity, ")");
+    } else if (rgbaMatch) {
+      // RGBA format
+      const [, red, green, blue, alpha] = rgbaMatch;
+      return "rgba(".concat(red, ", ").concat(green, ", ").concat(blue, ", ").concat(alpha || opacity, ")"); // Use provided opacity if alpha is missing
+    }
+  }
+
+  // If parsing fails, return original color
+  return color;
+}
 
 exports.getStrapiMedia = getStrapiMedia;
 exports.getStrapiURL = getStrapiURL;
+exports.setOpacity = setOpacity;

package/dist/esm/components/ContactForm.js

@@ -8,6 +8,8 @@
 import React__default from 'react';
 import { Container, Stack, Typography, Paper, Button, TextField } from '@mui/material';
 import isEmail from 'validator/lib/isEmail';
+import { setOpacity } from '../lib/utils.js';
+import { useTheme } from '@mui/material/styles';
 
 function ContactForm(_ref) {
   let {
@@ -15,7 +17,8 @@ function ContactForm(_ref) {
   } = _ref;
   const {
     maxWidth,
-    sx = {}
+    sx = {},
+    glass = false
   } = data;
   const [formValues, setFormValues] = React__default.useState({
     name: "",
@@ -123,6 +126,7 @@ function ContactForm(_ref) {
     console.log("errors from validate", errors);
     return errors;
   };
+  const theme = useTheme();
   return /*#__PURE__*/React__default.createElement(Container, {
     maxWidth: maxWidth ? maxWidth : "lg",
     sx: {
@@ -158,7 +162,10 @@ function ContactForm(_ref) {
     variant: "contained"
   }, "try again")))), !showSuccessMessage && !showFailureMessage && /*#__PURE__*/React__default.createElement(Paper, {
     sx: {
-      p: 2
+      p: 2,
+      backdropFilter: "blur(3px)",
+      backgroundColor: setOpacity(theme.palette.background.paper, glass ? 0.1 : 1),
+      border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none"
     }
   }, /*#__PURE__*/React__default.createElement(Stack, {
     spacing: 2

package/dist/esm/components/HeroSection.js

@@ -6,8 +6,9 @@
   
 import React__default from 'react';
 import Link from 'next/link';
-import { Box, Container, Paper, Stack, Typography, Button } from '@mui/material';
+import { useTheme, Box, Container, Paper, Stack, Typography, Button } from '@mui/material';
 import { StrapiImage } from './StrapiImage.js';
+import { setOpacity } from '../lib/utils.js';
 
 function HeroSection(_ref) {
   let {
@@ -20,8 +21,11 @@ function HeroSection(_ref) {
     logoImage,
     link,
     maxWidth,
-    sx = {}
+    sx = {},
+    glass = false
   } = data;
+  const theme = useTheme();
+  setOpacity(theme.palette.background.paper, 0.1);
   return /*#__PURE__*/React__default.createElement("header", {
     style: {
       position: "relative",
@@ -61,7 +65,10 @@ function HeroSection(_ref) {
   }, /*#__PURE__*/React__default.createElement(Paper, {
     sx: {
       px: 2,
-      py: 2
+      py: 7,
+      backdropFilter: "blur(3px)",
+      backgroundColor: setOpacity(theme.palette.background.paper, glass ? 0.1 : 1),
+      border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none"
     }
   }, /*#__PURE__*/React__default.createElement(Stack, {
     spacing: 5,

package/dist/esm/components/TextImageSection.js

@@ -8,6 +8,7 @@
 import React__default from 'react';
 import { useTheme, Container, Paper, Typography, Stack, Box } from '@mui/material';
 import { StrapiImage } from './StrapiImage.js';
+import { setOpacity } from '../lib/utils.js';
 
 const MuiMarkdown = /*#__PURE__*/React__default.lazy(() => import( /* webpackChunkName: "mui-markdown" */'mui-markdown'));
 
@@ -33,7 +34,8 @@ function TextImageSection(_ref) {
     image,
     reverse = false,
     maxWidth,
-    sx = {}
+    sx = {},
+    glass = false
   } = data;
 
   /* TODO Text_content should deal with linebreaks,
@@ -50,7 +52,10 @@ function TextImageSection(_ref) {
     }
   }, /*#__PURE__*/React__default.createElement(Paper, {
     sx: {
-      p: 2
+      p: 2,
+      backdropFilter: "blur(3px)",
+      backgroundColor: setOpacity(theme.palette.background.paper, glass ? 0.1 : 1),
+      border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none"
     }
   }, title && /*#__PURE__*/React__default.createElement(Typography, {
     variant: "h1",

package/dist/esm/lib/utils.js

@@ -21,5 +21,33 @@ function getStrapiMedia(url) {
   if (url.startsWith("http") || url.startsWith("//")) return url;
   return "".concat(getStrapiURL()).concat(url);
 }
+function setOpacity(color, opacity) {
+  // Clamp opacity between 0 and 1
+  opacity = Math.min(Math.max(opacity, 0), 1);
 
-export { getStrapiMedia, getStrapiURL };
+  // Regex to match various color formats (hex, rgb, rgba)
+  const match = color.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i);
+  if (match) {
+    // Hex color
+    const [, r, g, b, alpha = "FF"] = match;
+    return "rgba(".concat(parseInt(r, 16), ", ").concat(parseInt(g, 16), ", ").concat(parseInt(b, 16), ", ").concat(parseInt(alpha, 16) / 255 * opacity, ")");
+  } else {
+    // Parse RGB or RGBA manually
+    const rgbMatch = color.match(/^rgb\((\d+)(?:,(\d+))?(?:,(\d+))?\)$/i);
+    const rgbaMatch = color.match(/^rgba\((\d+)(?:,(\d+))?(?:,(\d+))?(?:,([.\d]+))?\)$/i);
+    if (rgbMatch) {
+      // RGB format
+      const [, red, green, blue] = rgbMatch;
+      return "rgba(".concat(red, ", ").concat(green, ", ").concat(blue, ", ").concat(opacity, ")");
+    } else if (rgbaMatch) {
+      // RGBA format
+      const [, red, green, blue, alpha] = rgbaMatch;
+      return "rgba(".concat(red, ", ").concat(green, ", ").concat(blue, ", ").concat(alpha || opacity, ")"); // Use provided opacity if alpha is missing
+    }
+  }
+
+  // If parsing fails, return original color
+  return color;
+}
+
+export { getStrapiMedia, getStrapiURL, setOpacity };

package/package.json

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

package/src/components/ContactForm.tsx

@@ -13,6 +13,8 @@ import {
 } from "@mui/material";
 import isEmail from "validator/lib/isEmail";
 import { SxProps, Theme } from "@mui/material/styles";
+import { setOpacity } from "../lib/utils.ts";
+import { useTheme } from "@mui/material/styles";
 
 type MaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | false | undefined;
 
@@ -22,10 +24,11 @@ interface ContactFormProps {
   title: string;
   maxWidth: MaxWidth;
   sx?: SxProps<Theme>;
+  glass?: boolean;
 }
 
 function ContactForm({ data }: { readonly data: ContactFormProps }) {
-  const { maxWidth, sx = {} } = data;
+  const { maxWidth, sx = {}, glass = false } = data;
 
   type FormValues = {
     name: string;
@@ -150,6 +153,8 @@ function ContactForm({ data }: { readonly data: ContactFormProps }) {
     return errors;
   };
 
+  const theme = useTheme();
+
   return (
     <Container maxWidth={maxWidth ? maxWidth : "lg"} sx={{ my: 1, ...sx }}>
       <Stack spacing={2} sx={{ width: "100%" }}>
@@ -180,7 +185,17 @@ function ContactForm({ data }: { readonly data: ContactFormProps }) {
         )}
       </Stack>
       {!showSuccessMessage && !showFailureMessage && (
-        <Paper sx={{ p: 2 }}>
+        <Paper
+          sx={{
+            p: 2,
+            backdropFilter: "blur(3px)",
+            backgroundColor: setOpacity(
+              theme.palette.background.paper,
+              glass ? 0.1 : 1
+            ),
+            border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none",
+          }}
+        >
           <Stack spacing={2}>
             <TextField
               id="name"

package/src/components/HeroSection.tsx

@@ -10,8 +10,11 @@ import {
   useTheme,
 } from "@mui/material";
 import { StrapiImage } from "./StrapiImage.tsx";
+import { setOpacity } from "../lib/utils.ts";
 import { SxProps, Theme } from "@mui/material/styles";
 
+type MaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | false | undefined;
+
 interface ImageProps {
   id: number;
   url: string;
@@ -36,8 +39,9 @@ interface HeroSectionProps {
     bgImage?: ImageProps;
     logoImage?: ImageProps;
     link: LinkProps;
-    maxWidth?: "xs" | "sm" | "md" | "lg" | "xl" | false | undefined;
+    maxWidth?: MaxWidth;
     sx?: SxProps<Theme>;
+    glass?: boolean;
   };
 }
 
@@ -50,8 +54,13 @@ export function HeroSection({ data }: Readonly<HeroSectionProps>) {
     link,
     maxWidth,
     sx = {},
+    glass = false,
   } = data;
 
+  const theme = useTheme();
+
+  const glassColor = setOpacity(theme.palette.background.paper, 0.1);
+
   return (
     <header style={{ position: "relative", padding: 0, margin: 0 }}>
       <Box
@@ -86,7 +95,13 @@ export function HeroSection({ data }: Readonly<HeroSectionProps>) {
           <Paper
             sx={{
               px: 2,
-              py: 2,
+              py: 7,
+              backdropFilter: "blur(3px)",
+              backgroundColor: setOpacity(
+                theme.palette.background.paper,
+                glass ? 0.1 : 1
+              ),
+              border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none",
             }}
           >
             <Stack spacing={5} alignItems="center" justifyContent="center">

package/src/components/TextImageSection.tsx

@@ -14,6 +14,7 @@ const MuiMarkdown = React.lazy(
 );
 import { StrapiImage } from "./StrapiImage.tsx";
 import { SxProps, Theme } from "@mui/material/styles";
+import { setOpacity } from "../lib/utils.ts";
 
 /* 
 TODO intregrate this interface into StrapiImage.tsx
@@ -43,11 +44,20 @@ interface TextImageSectionProps {
     maxWidth?: MaxWidth;
     minHeight: string;
     sx?: SxProps<Theme>;
+    glass?: boolean;
   };
 }
 
 function TextImageSection({ data }: Readonly<TextImageSectionProps>) {
-  const { title, text, image, reverse = false, maxWidth, sx = {} } = data;
+  const {
+    title,
+    text,
+    image,
+    reverse = false,
+    maxWidth,
+    sx = {},
+    glass = false,
+  } = data;
 
   /* TODO Text_content should deal with linebreaks,
   reading up upon mui-markdown docs is advised */
@@ -58,7 +68,17 @@ function TextImageSection({ data }: Readonly<TextImageSectionProps>) {
 
   return (
     <Container maxWidth={maxWidth ? maxWidth : "lg"} sx={{ my: 1, ...sx }}>
-      <Paper sx={{ p: 2 }}>
+      <Paper
+        sx={{
+          p: 2,
+          backdropFilter: "blur(3px)",
+          backgroundColor: setOpacity(
+            theme.palette.background.paper,
+            glass ? 0.1 : 1
+          ),
+          border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none",
+        }}
+      >
         {title && (
           <Typography variant="h1" textAlign="center" sx={{ pb: 2 }}>
             {title}

package/src/stories/Page.stories.js

@@ -188,14 +188,7 @@ AMH.args = {
         url: "/uploads/Asset_2_c4a9c4a5d1.png",
       },
       link: { id: 1, url: "/contact", text: "Contact us", isExternal: false },
-      sx: {
-        ".MuiPaper-root": {
-          py: 7,
-          backdropFilter: "blur(3px)",
-          backgroundColor: "rgba(255, 255, 255, 0.15)",
-          border: "1px solid rgba(255, 255, 255, 0.15)",
-        },
-      },
+      glass: true,
     },
     {
       id: 2,
@@ -380,6 +373,7 @@ AMH.args = {
       },
       text: "**Hello Mars,** \n a distant red planet that has captured the imagination of humanity for centuries. As we gaze upon your mysterious surface from Earth, we can't help but wonder about the secrets you hold. Hello to the vast landscapes of rust-colored terrain, the towering volcanoes, and the enigmatic canyons that weave across your surface.    *Hello Mars,* a planet that has been the focus of numerous space missions, each one aiming to unveil the mysteries of your past and present. From the iconic rovers tirelessly traversing your rocky landscapes to the orbiters capturing breathtaking images from above, we extend our greetings to the scientific endeavors that seek to understand your geology, climate, and potential for life. <br /> <br /> *Hello Mars,* a beacon of human exploration and curiosity. The dreams of setting foot on your soil have fueled the aspirations of generations, and with each technological leap, the possibility of humans visiting you becomes more tangible. The prospect of a human settlement on Mars brings excitement, challenges, and the promise of a new chapter in our interplanetary journey. <br /> <br /> *Hello Mars,* a testament to the indomitable human spirit that constantly seeks to push the boundaries of what is possible. As we continue to study, explore, and dream about the mysteries you hold, we are reminded of the vastness of the cosmos and the endless opportunities for discovery that lie beyond our home planet.",
       reverse: true,
+      glass: true,
     },
     {
       id: 1,
@@ -463,6 +457,7 @@ AMH.args = {
       id: 1,
       __component: "layout.contact-section",
       title: "Contact us",
+      glass: true,
     },
   ],
 };