umwd-components 0.1.62 → 0.1.64

package/dist/cjs/components/Page.js

@@ -9,10 +9,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var PropTypes = require('prop-types');
-var TextImageBlock = require('./TextImageBlock.js');
+var TextImageSection = require('./TextImageSection.js');
 var HeroSection = require('./HeroSection.js');
 var FeaturesSection = require('./FeaturesSection.js');
 
@@ -29,9 +28,10 @@ function blockRenderer(block) {
         data: block
       });
     case "layout.text-image-section":
-      return /*#__PURE__*/React.createElement(TextImageBlock.default, _rollupPluginBabelHelpers.extends({
-        key: block.id
-      }, block));
+      return /*#__PURE__*/React.createElement(TextImageSection.default, {
+        key: block.id,
+        data: block
+      });
     default:
       return null;
   }

package/dist/cjs/components/StrapiImage.js

@@ -13,10 +13,10 @@ var utils = require('../lib/utils.js');
 function StrapiImage(_ref) {
   let {
     src,
-    alt,
-    height,
-    width,
-    style
+    alt = "",
+    height = 100,
+    width = 100,
+    style = {}
   } = _ref;
   if (!src) return null;
   const imageUrl = utils.getStrapiMedia(src);

package/dist/cjs/components/TextImageSection.js

@@ -0,0 +1,78 @@
+"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 muiMarkdown = require('mui-markdown');
+var StrapiImage = require('./StrapiImage.js');
+
+function TextImageSection(_ref) {
+  let {
+    data
+  } = _ref;
+  const {
+    title,
+    text,
+    image,
+    reverse = false,
+    maxWidth
+  } = data;
+
+  /* TODO Text_content should deal with linebreaks,
+  reading up upon mui-markdown docs is advised */
+
+  return /*#__PURE__*/React.createElement(material.Container, {
+    maxWidth: maxWidth,
+    sx: {
+      my: 1
+    }
+  }, /*#__PURE__*/React.createElement(material.Paper, {
+    sx: {
+      p: 2
+    }
+  }, title && /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "h1",
+    textAlign: "center",
+    width: "100%",
+    sx: {
+      pb: 2
+    }
+  }, title), /*#__PURE__*/React.createElement(material.Stack, {
+    spacing: 2,
+    direction: reverse ? "row-reverse" : "row"
+  }, (image === null || image === void 0 ? void 0 : image.url) !== undefined && /*#__PURE__*/React.createElement(material.Box, {
+    sx: {
+      width: text !== null && text !== undefined ? "50%" : "100%",
+      height: "100%",
+      overflow: "hidden",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }
+  }, /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
+    alt: image.alt,
+    style: {},
+    height: image.height,
+    src: image.url,
+    width: image.width
+  })), text !== null && text !== undefined && /*#__PURE__*/React.createElement(material.Box, {
+    sx: {
+      width: (image === null || image === void 0 ? void 0 : image.url) !== null && (image === null || image === void 0 ? void 0 : image.url) !== undefined ? "50%" : "100%",
+      height: "100%",
+      overflow: "hidden",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }
+  }, /*#__PURE__*/React.createElement(muiMarkdown.MuiMarkdown, null, text)))));
+}
+
+exports.default = TextImageSection;

package/dist/cjs/index.js

@@ -9,7 +9,7 @@
 var Button = require('./components/Button.js');
 var Stack = require('./components/Stack.js');
 var NavBar = require('./components/NavBar.js');
-var TextImageBlock = require('./components/TextImageBlock.js');
+var TextImageSection = require('./components/TextImageSection.js');
 var Page = require('./components/Page.js');
 var Footer = require('./components/Footer.js');
 var ContactForm = require('./components/ContactForm.js');
@@ -21,7 +21,7 @@ var BulletList = require('./components/BulletList.js');
 exports.Button = Button.default;
 exports.Stack = Stack.default;
 exports.NavBar = NavBar.default;
-exports.TextImageBlock = TextImageBlock.default;
+exports.TextImageSection = TextImageSection.default;
 exports.Page = Page.default;
 exports.Footer = Footer.default;
 exports.ContactForm = ContactForm.default;

package/dist/esm/components/Page.js

@@ -5,10 +5,9 @@
  * @license MIT
  */
   
-import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 import React from 'react';
 import PropTypes from 'prop-types';
-import TextImageBlock from './TextImageBlock.js';
+import TextImageSection from './TextImageSection.js';
 import { HeroSection } from './HeroSection.js';
 import { FeatureSection } from './FeaturesSection.js';
 
@@ -25,9 +24,10 @@ function blockRenderer(block) {
         data: block
       });
     case "layout.text-image-section":
-      return /*#__PURE__*/React.createElement(TextImageBlock, _extends({
-        key: block.id
-      }, block));
+      return /*#__PURE__*/React.createElement(TextImageSection, {
+        key: block.id,
+        data: block
+      });
     default:
       return null;
   }

package/dist/esm/components/StrapiImage.js

@@ -11,10 +11,10 @@ import { getStrapiMedia } from '../lib/utils.js';
 function StrapiImage(_ref) {
   let {
     src,
-    alt,
-    height,
-    width,
-    style
+    alt = "",
+    height = 100,
+    width = 100,
+    style = {}
   } = _ref;
   if (!src) return null;
   const imageUrl = getStrapiMedia(src);

package/dist/esm/components/TextImageSection.js

@@ -0,0 +1,74 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import React from 'react';
+import { Container, Paper, Typography, Stack, Box } from '@mui/material';
+import { MuiMarkdown } from 'mui-markdown';
+import { StrapiImage } from './StrapiImage.js';
+
+function TextImageSection(_ref) {
+  let {
+    data
+  } = _ref;
+  const {
+    title,
+    text,
+    image,
+    reverse = false,
+    maxWidth
+  } = data;
+
+  /* TODO Text_content should deal with linebreaks,
+  reading up upon mui-markdown docs is advised */
+
+  return /*#__PURE__*/React.createElement(Container, {
+    maxWidth: maxWidth,
+    sx: {
+      my: 1
+    }
+  }, /*#__PURE__*/React.createElement(Paper, {
+    sx: {
+      p: 2
+    }
+  }, title && /*#__PURE__*/React.createElement(Typography, {
+    variant: "h1",
+    textAlign: "center",
+    width: "100%",
+    sx: {
+      pb: 2
+    }
+  }, title), /*#__PURE__*/React.createElement(Stack, {
+    spacing: 2,
+    direction: reverse ? "row-reverse" : "row"
+  }, (image === null || image === void 0 ? void 0 : image.url) !== undefined && /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      width: text !== null && text !== undefined ? "50%" : "100%",
+      height: "100%",
+      overflow: "hidden",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }
+  }, /*#__PURE__*/React.createElement(StrapiImage, {
+    alt: image.alt,
+    style: {},
+    height: image.height,
+    src: image.url,
+    width: image.width
+  })), text !== null && text !== undefined && /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      width: (image === null || image === void 0 ? void 0 : image.url) !== null && (image === null || image === void 0 ? void 0 : image.url) !== undefined ? "50%" : "100%",
+      height: "100%",
+      overflow: "hidden",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }
+  }, /*#__PURE__*/React.createElement(MuiMarkdown, null, text)))));
+}
+
+export { TextImageSection as default };

package/dist/esm/index.js

@@ -7,7 +7,7 @@
 export { default as Button } from './components/Button.js';
 export { default as Stack } from './components/Stack.js';
 export { default as NavBar } from './components/NavBar.js';
-export { default as TextImageBlock } from './components/TextImageBlock.js';
+export { default as TextImageSection } from './components/TextImageSection.js';
 export { default as Page } from './components/Page.js';
 export { default as Footer } from './components/Footer.js';
 export { default as ContactForm } from './components/ContactForm.js';

package/next.config.js

@@ -1,15 +1,18 @@
 // @ts-check
- 
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    /* config options here */
-    images: {
-        remotePatterns: [{
-            protocol: 'https',
-            hostname: 'www.google.com',
-            pathname: '/images/**',
-        }        ],
-    }
-  }
-   
-  module.exports = nextConfig
+  /* config options here */
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "www.google.com",
+        pathname: "/images/**",
+      },
+      { hostname: "localhost", port: "1337" },
+    ],
+  },
+};
+
+module.exports = nextConfig;

package/package.json

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

package/src/components/Page.js

@@ -2,7 +2,7 @@
 
 import React from "react";
 import PropTypes from "prop-types";
-import TextImageBlock from "./TextImageSection.tsx";
+import TextImageSection from "./TextImageSection.tsx";
 import { HeroSection } from "./HeroSection.tsx";
 import { FeatureSection } from "./FeaturesSection.tsx";
 
@@ -13,7 +13,7 @@ function blockRenderer(block) {
     case "layout.feature-section":
       return <FeatureSection key={block.id} data={block} />;
     case "layout.text-image-section":
-      return <TextImageBlock key={block.id} data={block} />;
+      return <TextImageSection key={block.id} data={block} />;
     default:
       return null;
   }

package/src/components/StrapiImage.tsx

@@ -12,10 +12,10 @@ interface StrapiImageProps {
 
 export function StrapiImage({
   src,
-  alt,
-  height,
-  width,
-  style,
+  alt = "",
+  height = 100,
+  width = 100,
+  style = {},
 }: Readonly<StrapiImageProps>) {
   if (!src) return null;
   const imageUrl = getStrapiMedia(src);

package/src/index.js

@@ -7,7 +7,7 @@
 export { default as Button } from "./components/Button";
 export { default as Stack } from "./components/Stack";
 export { default as NavBar } from "./components/NavBar";
-export { default as TextImageBlock } from "./components/TextImageBlock";
+export { default as TextImageSection } from "./components/TextImageSection.tsx";
 export { default as Page } from "./components/Page";
 export { default as Footer } from "./components/Footer";
 export { default as ContactForm } from "./components/ContactForm";

package/src/stories/Page.stories.js

@@ -57,7 +57,7 @@ HelloWorld.args = {
       __component: "layout.text-image-section",
       title: "Hello Mars",
       image: {
-        url: "https://via.placeholder.com/1200",
+        url: "/uploads/man_in_circle_icon_6c77b6d3e4.png",
         width: 600,
         height: 600,
         alt: "Hello Mars",