umwd-components 0.1.96 → 0.1.98

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 {
@@ -23,6 +24,9 @@ function HeroSection(_ref) {
     link,
     maxWidth
   } = data;
+  const theme = material.useTheme();
+  console.log(theme.palette.background.paper);
+  const glassColor = utils.setOpacity(theme.palette.background.paper, 0.45);
   return /*#__PURE__*/React.createElement("header", {
     style: {
       position: "relative",
@@ -60,7 +64,10 @@ function HeroSection(_ref) {
     }
   }, /*#__PURE__*/React.createElement(material.Paper, {
     sx: {
-      p: 2
+      px: 2,
+      py: 7,
+      backdropFilter: "blur(4px)",
+      backgroundColor: glassColor
     }
   }, /*#__PURE__*/React.createElement(material.Stack, {
     spacing: 5,
@@ -72,11 +79,13 @@ function HeroSection(_ref) {
     src: logoImage.url,
     width: logoImage.width || 100
   }), /*#__PURE__*/React.createElement(material.Typography, {
-    variant: "h1",
-    align: "center"
+    variant: "h2",
+    align: "center",
+    component: "h1"
   }, heading), /*#__PURE__*/React.createElement(material.Typography, {
-    variant: "h3",
-    align: "center"
+    variant: "h4",
+    align: "center",
+    component: "h2"
   }, subHeading), /*#__PURE__*/React.createElement(Link, {
     href: link.url
   }, /*#__PURE__*/React.createElement(material.Button, {

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/cjs/node_modules/@strapi/blocks-react-renderer/dist/Block.js

@@ -0,0 +1,63 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var BlocksRenderer = require('./BlocksRenderer.js');
+var Text = require('./Text.js');
+
+const voidTypes = ["image"];
+const augmentProps = (content) => {
+  const { children: childrenNodes, type, ...props } = content;
+  if (type === "code") {
+    const getPlainText = (children) => {
+      return children.reduce((currentPlainText, node) => {
+        if (node.type === "text") {
+          return currentPlainText.concat(node.text);
+        }
+        if (node.type === "link") {
+          return currentPlainText.concat(getPlainText(node.children));
+        }
+        return currentPlainText;
+      }, "");
+    };
+    return {
+      ...props,
+      plainText: getPlainText(content.children)
+    };
+  }
+  return props;
+};
+const Block = ({ content }) => {
+  const { children: childrenNodes, type, ...props } = content;
+  const { blocks, missingBlockTypes } = BlocksRenderer.useComponentsContext();
+  const BlockComponent = blocks[type];
+  if (!BlockComponent) {
+    if (!missingBlockTypes.includes(type)) {
+      console.warn(`[@strapi/block-react-renderer] No component found for block type "${type}"`);
+      missingBlockTypes.push(type);
+    }
+    return null;
+  }
+  if (voidTypes.includes(type)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(BlockComponent, { ...props });
+  }
+  if (type === "paragraph" && childrenNodes.length === 1 && childrenNodes[0].type === "text" && childrenNodes[0].text === "") {
+    return /* @__PURE__ */ jsxRuntime.jsx("br", {});
+  }
+  const augmentedProps = augmentProps(content);
+  return /* @__PURE__ */ jsxRuntime.jsx(BlockComponent, { ...augmentedProps, children: childrenNodes.map((childNode, index) => {
+    if (childNode.type === "text") {
+      const { type: _type, ...childNodeProps } = childNode;
+      return /* @__PURE__ */ React.createElement(Text.Text, { ...childNodeProps, key: index });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(Block, { content: childNode }, index);
+  }) });
+};
+
+exports.Block = Block;

package/dist/cjs/node_modules/@strapi/blocks-react-renderer/dist/BlocksRenderer.js

@@ -0,0 +1,109 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var Block = require('./Block.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const defaultComponents = {
+  blocks: {
+    paragraph: (props) => /* @__PURE__ */ jsxRuntime.jsx("p", { children: props.children }),
+    quote: (props) => /* @__PURE__ */ jsxRuntime.jsx("blockquote", { children: props.children }),
+    code: (props) => /* @__PURE__ */ jsxRuntime.jsx("pre", { children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: props.plainText }) }),
+    heading: ({ level, children }) => {
+      switch (level) {
+        case 1:
+          return /* @__PURE__ */ jsxRuntime.jsx("h1", { children });
+        case 2:
+          return /* @__PURE__ */ jsxRuntime.jsx("h2", { children });
+        case 3:
+          return /* @__PURE__ */ jsxRuntime.jsx("h3", { children });
+        case 4:
+          return /* @__PURE__ */ jsxRuntime.jsx("h4", { children });
+        case 5:
+          return /* @__PURE__ */ jsxRuntime.jsx("h5", { children });
+        case 6:
+          return /* @__PURE__ */ jsxRuntime.jsx("h6", { children });
+      }
+    },
+    link: (props) => /* @__PURE__ */ jsxRuntime.jsx("a", { href: props.url, children: props.children }),
+    list: (props) => {
+      if (props.format === "ordered") {
+        return /* @__PURE__ */ jsxRuntime.jsx("ol", { children: props.children });
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx("ul", { children: props.children });
+    },
+    "list-item": (props) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: props.children }),
+    image: (props) => /* @__PURE__ */ jsxRuntime.jsx("img", { src: props.image.url, alt: props.image.alternativeText || void 0 })
+  },
+  modifiers: {
+    bold: (props) => /* @__PURE__ */ jsxRuntime.jsx("strong", { children: props.children }),
+    italic: (props) => /* @__PURE__ */ jsxRuntime.jsx("em", { children: props.children }),
+    underline: (props) => /* @__PURE__ */ jsxRuntime.jsx("u", { children: props.children }),
+    strikethrough: (props) => /* @__PURE__ */ jsxRuntime.jsx("del", { children: props.children }),
+    code: (props) => /* @__PURE__ */ jsxRuntime.jsx("code", { children: props.children })
+  },
+  missingBlockTypes: [],
+  missingModifierTypes: []
+};
+const ComponentsContext = React__namespace.createContext(defaultComponents);
+const ComponentsProvider = ({ children, value = defaultComponents }) => {
+  const memoizedValue = React__namespace.useMemo(() => value, [value]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ComponentsContext.Provider, { value: memoizedValue, children });
+};
+function useComponentsContext() {
+  return React__namespace.useContext(ComponentsContext);
+}
+const BlocksRenderer = (props) => {
+  const blocks = {
+    ...defaultComponents.blocks,
+    ...props.blocks
+  };
+  const modifiers = {
+    ...defaultComponents.modifiers,
+    ...props.modifiers
+  };
+  const missingBlockTypes = React__namespace.useRef([]);
+  const missingModifierTypes = React__namespace.useRef([]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ComponentsProvider,
+    {
+      value: {
+        blocks,
+        modifiers,
+        missingBlockTypes: missingBlockTypes.current,
+        missingModifierTypes: missingModifierTypes.current
+      },
+      children: props.content.map((content, index) => /* @__PURE__ */ jsxRuntime.jsx(Block.Block, { content }, index))
+    }
+  );
+};
+
+exports.BlocksRenderer = BlocksRenderer;
+exports.ComponentsProvider = ComponentsProvider;
+exports.useComponentsContext = useComponentsContext;

package/dist/cjs/node_modules/@strapi/blocks-react-renderer/dist/Text.js

@@ -0,0 +1,37 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var BlocksRenderer = require('./BlocksRenderer.js');
+
+const Text = ({ text, ...modifiers }) => {
+  const { modifiers: modifierComponents, missingModifierTypes } = BlocksRenderer.useComponentsContext();
+  const modifierNames = Object.keys(modifiers);
+  return modifierNames.reduce(
+    (children, modifierName) => {
+      if (!modifiers[modifierName]) {
+        return children;
+      }
+      const ModifierComponent = modifierComponents[modifierName];
+      if (!ModifierComponent) {
+        if (!missingModifierTypes.includes(modifierName)) {
+          console.warn(
+            `[@strapi/block-react-renderer] No component found for modifier "${modifierName}"`
+          );
+          missingModifierTypes.push(modifierName);
+        }
+        return children;
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(ModifierComponent, { children });
+    },
+    // By default, return the text without any wrapper to avoid useless nesting
+    /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: text })
+  );
+};
+
+exports.Text = Text;

package/dist/cjs/src/components/BlockRendererClient.js

@@ -0,0 +1,94 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var BlocksRenderer = require('../../node_modules/@strapi/blocks-react-renderer/dist/BlocksRenderer.js');
+var material = require('@mui/material');
+
+function BlockRendererClient(_ref) {
+  let {
+    content
+  } = _ref;
+  if (!content) return null;
+  return /*#__PURE__*/React.createElement(BlocksRenderer.BlocksRenderer, {
+    content: content,
+    blocks: {
+      // You can use the default components to set class names...
+      paragraph: _ref2 => {
+        let {
+          children
+        } = _ref2;
+        return /*#__PURE__*/React.createElement(material.Typography, {
+          variant: "body1",
+          sx: {
+            mb: 2
+          }
+        }, children);
+      },
+      // ...or point to a design system
+      heading: _ref3 => {
+        let {
+          children,
+          level
+        } = _ref3;
+        switch (level) {
+          case 1:
+            return /*#__PURE__*/React.createElement(material.Typography, {
+              variant: "h1"
+            }, children);
+          case 2:
+            return /*#__PURE__*/React.createElement(material.Typography, {
+              variant: "h2"
+            }, children);
+          case 3:
+            return /*#__PURE__*/React.createElement(material.Typography, {
+              variant: "h3"
+            }, children);
+          case 4:
+            return /*#__PURE__*/React.createElement(material.Typography, {
+              variant: "h4"
+            }, children);
+          case 5:
+            return /*#__PURE__*/React.createElement(material.Typography, {
+              variant: "h5"
+            }, children);
+          case 6:
+            return /*#__PURE__*/React.createElement(material.Typography, {
+              variant: "h6"
+            }, children);
+          default:
+            return /*#__PURE__*/React.createElement(material.Typography, {
+              variant: "h1"
+            }, children);
+        }
+      }
+      // For links, you may want to use the component from your router or framework
+      // link: ({ children, url }) => <Link to={url}>{children}</Link>,
+    },
+    modifiers: {
+      bold: _ref4 => {
+        let {
+          children
+        } = _ref4;
+        return /*#__PURE__*/React.createElement("strong", null, children);
+      },
+      italic: _ref5 => {
+        let {
+          children
+        } = _ref5;
+        return /*#__PURE__*/React.createElement("span", {
+          className: "italic"
+        }, children);
+      }
+    }
+  });
+}
+
+exports.default = BlockRendererClient;

package/dist/cjs/src/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/src/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/src/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;