umwd-components 0.1.38 → 0.1.40

package/dist/cjs/components/WebsitePlaceholder.js

@@ -0,0 +1,73 @@
+"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 Image = require('next/image');
+require('@mui/icons-material');
+
+function WebsitePlaceholder({
+  title,
+  announcement,
+  logo
+}) {
+  const theme = material.useTheme();
+  const [visible, setVisible] = React.useState(true);
+  const handleKeydown = e => {
+    console.log("handleKeydown", e);
+    if (e.key === "W") {
+      setVisible(false);
+    }
+  };
+  return /*#__PURE__*/React.createElement(material.Box, {
+    sx: [visible && {
+      display: "grid",
+      justifyItems: "center",
+      alignItems: "center",
+      backgroundColor: theme.palette.primary.main,
+      height: "100vh",
+      maxHeight: "100vh",
+      width: "100vw",
+      overflow: "hidden",
+      position: "fixed",
+      top: 0,
+      left: 0,
+      zIndex: 9000,
+      isolation: "isolate"
+    }],
+    onKeyDown: e => handleKeydown()
+  }, visible && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "h1",
+    align: "center"
+  }, title), logo?.url && /*#__PURE__*/React.createElement(Image, {
+    src: logo.url,
+    alt: logo.alt || "logo",
+    width: logo.width || "200",
+    height: logo.height || "200"
+  }), /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "h3",
+    align: "center"
+  }, announcement)));
+}
+WebsitePlaceholder.propTypes = {
+  title: PropTypes.string.isRequired,
+  announcement: PropTypes.string.isRequired,
+  logo: PropTypes.shape({
+    url: PropTypes.string.isRequired,
+    alt: PropTypes.string,
+    width: PropTypes.string,
+    height: PropTypes.string
+  }),
+  backgroundColor: PropTypes.string
+};
+
+exports.default = WebsitePlaceholder;

package/dist/cjs/index.js

@@ -15,6 +15,7 @@ var TextImageBlock = require('./components/TextImageBlock.js');
 var Page = require('./components/Page.js');
 var Footer = require('./components/Footer.js');
 var ContactForm = require('./components/ContactForm.js');
+var WebsitePlaceholder = require('./components/WebsitePlaceholder.js');
 
 
 
@@ -27,3 +28,4 @@ exports.TextImageBlock = TextImageBlock.default;
 exports.Page = Page.default;
 exports.Footer = Footer.default;
 exports.ContactForm = ContactForm.default;
+exports.WebsitePlaceholder = WebsitePlaceholder.default;

package/dist/esm/components/WebsitePlaceholder.js

@@ -0,0 +1,69 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useTheme, Box, Typography } from '@mui/material';
+import Image from 'next/image';
+import '@mui/icons-material';
+
+function WebsitePlaceholder({
+  title,
+  announcement,
+  logo
+}) {
+  const theme = useTheme();
+  const [visible, setVisible] = React.useState(true);
+  const handleKeydown = e => {
+    console.log("handleKeydown", e);
+    if (e.key === "W") {
+      setVisible(false);
+    }
+  };
+  return /*#__PURE__*/React.createElement(Box, {
+    sx: [visible && {
+      display: "grid",
+      justifyItems: "center",
+      alignItems: "center",
+      backgroundColor: theme.palette.primary.main,
+      height: "100vh",
+      maxHeight: "100vh",
+      width: "100vw",
+      overflow: "hidden",
+      position: "fixed",
+      top: 0,
+      left: 0,
+      zIndex: 9000,
+      isolation: "isolate"
+    }],
+    onKeyDown: e => handleKeydown()
+  }, visible && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
+    variant: "h1",
+    align: "center"
+  }, title), logo?.url && /*#__PURE__*/React.createElement(Image, {
+    src: logo.url,
+    alt: logo.alt || "logo",
+    width: logo.width || "200",
+    height: logo.height || "200"
+  }), /*#__PURE__*/React.createElement(Typography, {
+    variant: "h3",
+    align: "center"
+  }, announcement)));
+}
+WebsitePlaceholder.propTypes = {
+  title: PropTypes.string.isRequired,
+  announcement: PropTypes.string.isRequired,
+  logo: PropTypes.shape({
+    url: PropTypes.string.isRequired,
+    alt: PropTypes.string,
+    width: PropTypes.string,
+    height: PropTypes.string
+  }),
+  backgroundColor: PropTypes.string
+};
+
+export { WebsitePlaceholder as default };

package/dist/esm/index.js

@@ -13,3 +13,4 @@ export { default as TextImageBlock } from './components/TextImageBlock.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';
+export { default as WebsitePlaceholder } from './components/WebsitePlaceholder.js';

package/package.json

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

package/src/components/WebsitePlaceholder.js

@@ -0,0 +1,76 @@
+"use client";
+
+import React from "react";
+import PropTypes from "prop-types";
+import { Typography, Box, useTheme } from "@mui/material";
+import Image from "next/image";
+import { Visibility } from "@mui/icons-material";
+
+function WebsitePlaceholder({ title, announcement, logo }) {
+  const theme = useTheme();
+
+  const [visible, setVisible] = React.useState(true);
+
+  const handleKeydown = (e) => {
+    console.log("handleKeydown", e);
+    if (e.key === "W") {
+      setVisible(false);
+    }
+  };
+
+  return (
+    <Box
+      sx={[
+        visible && {
+          display: "grid",
+          justifyItems: "center",
+          alignItems: "center",
+          backgroundColor: theme.palette.primary.main,
+          height: "100vh",
+          maxHeight: "100vh",
+          width: "100vw",
+          overflow: "hidden",
+          position: "fixed",
+          top: 0,
+          left: 0,
+          zIndex: 9000,
+          isolation: "isolate",
+        },
+      ]}
+      onKeyDown={(e) => handleKeydown()}
+    >
+      {visible && (
+        <>
+          <Typography variant="h1" align="center">
+            {title}
+          </Typography>
+          {logo?.url && (
+            <Image
+              src={logo.url}
+              alt={logo.alt || "logo"}
+              width={logo.width || "200"}
+              height={logo.height || "200"}
+            />
+          )}
+          <Typography variant="h3" align="center">
+            {announcement}
+          </Typography>
+        </>
+      )}
+    </Box>
+  );
+}
+
+WebsitePlaceholder.propTypes = {
+  title: PropTypes.string.isRequired,
+  announcement: PropTypes.string.isRequired,
+  logo: PropTypes.shape({
+    url: PropTypes.string.isRequired,
+    alt: PropTypes.string,
+    width: PropTypes.string,
+    height: PropTypes.string,
+  }),
+  backgroundColor: PropTypes.string,
+};
+
+export default WebsitePlaceholder;

package/src/index.js

@@ -8,3 +8,4 @@ export { default as TextImageBlock } from "./components/TextImageBlock";
 export { default as Page } from "./components/Page";
 export { default as Footer } from "./components/Footer";
 export { default as ContactForm } from "./components/ContactForm";
+export { default as WebsitePlaceholder } from "./components/WebsitePlaceholder";

package/src/stories/WebsitePlaceholder.stories.js

@@ -0,0 +1,47 @@
+import WebsitePlaceholder from "../components/WebsitePlaceholder";
+import React from "react";
+import { Box } from "@mui/material";
+
+export default {
+  title: "UMWD/WebsitePlaceholder",
+  component: WebsitePlaceholder,
+};
+
+const Template = ({ title, announcement, logo, ...args }) => (
+  <>
+    <WebsitePlaceholder title={title} announcement={announcement} logo={logo}>
+      <Box sx={{ height: "300px" }}></Box>
+      <Box sx={{ height: "300px" }}></Box>
+      <Box sx={{ height: "300px" }}></Box>
+      <Box sx={{ height: "300px" }}></Box>
+      <Box sx={{ height: "300px" }}></Box>
+      <Box sx={{ height: "300px" }}></Box>
+    </WebsitePlaceholder>
+  </>
+);
+
+export const HelloWorld = Template.bind({});
+
+export const HelloMars = Template.bind({});
+
+HelloWorld.args = {
+  title: "A New Website Near You!",
+  logo: {
+    url: "https://via.placeholder.com/850",
+    width: 850,
+    height: 850,
+    alt: "Hello World",
+  },
+  announcement: "Coming Soon!",
+  backgroundColor: "lightgrey",
+};
+
+HelloMars.args = {
+  title: "A Martian Near You!",
+  logo: {
+    url: "https://via.placeholder.com/850",
+    alt: "Hello Mars",
+  },
+  announcement: "In cinama's this summer!",
+  backgroundColor: "slategrey",
+};