umwd-components 0.1.716 → 0.1.717

package/rollup.config.mjs

@@ -1,94 +0,0 @@
-import babel from "@rollup/plugin-babel";
-import resolve from "@rollup/plugin-node-resolve";
-import peerDepsExternal from "rollup-plugin-peer-deps-external";
-import terser from "@rollup/plugin-terser";
-import postcss from "rollup-plugin-postcss";
-import preserveDirectives from "rollup-plugin-preserve-directives";
-import commonjs from "@rollup/plugin-commonjs";
-import typescript from "@rollup/plugin-typescript";
-
-const outputOptions = {
-  exports: "named",
-  preserveModules: true,
-  banner: `/*
- * UMWD-Components
- * @copyright Jelle Paulus
- * @license MIT
- */
-  `,
-};
-
-export default {
-  input: "./src/index.ts", // Entry point of your library
-  output: {
-    dir: "dist",
-    format: "es",
-    ...outputOptions,
-    plugins: [terser({ compress: { directives: false } })],
-  },
-  onwarn(warning, warn) {
-    // Suppress warnings about module level directives
-    if (warning.code === "MODULE_LEVEL_DIRECTIVE") {
-      return;
-    }
-    // Use default warning handling for other warnings
-    warn(warning);
-  },
-
-  plugins: [
-    peerDepsExternal(), // Exclude peer dependencies from bundling // Preferably set as first plugin.
-    commonjs({ include: "node_modules/**" }), // Convert CommonJS modules to ES6
-    resolve({
-      browser: true,
-      preferBuiltins: false,
-      extensions: [".js", ".jsx", ".es6", ".es", ".mjs", ".cjs", ".ts", ".tsx"],
-    }), // Resolve third-party dependencies
-    postcss({
-      plugins: [],
-      minimize: true,
-    }),
-    babel({
-      babelHelpers: "bundled",
-      presets: [
-        "@babel/preset-react",
-        "@babel/preset-env",
-        "@babel/preset-typescript",
-      ],
-      extensions: [".js", ".jsx", ".es6", ".es", ".mjs", ".cjs", ".ts", ".tsx"],
-    }),
-    typescript({
-      tsconfig: "./tsconfig.build.json",
-    }),
-    preserveDirectives(),
-  ],
-};
-
-/* babel({
-  presets: [
-    "@babel/preset-react",
-    "@babel/preset-env",
-    "@babel/preset-typescript",
-  ],
-  extensions: [".js", ".jsx", ".es6", ".es", ".mjs", ".cjs", ".ts", ".tsx"],
-}),
-
-    commonjs({ include: "node_modules/**" }), // Convert CommonJS modules to ES6
-
-    */
-
-/* 
-[
-    {
-      dir: "dist",
-      format: "cjs",
-      ...outputOptions,
-      plugins: [terser({ compress: { directives: false } })],
-    },
-    {
-      dir: "dist",
-      format: "es",
-      ...outputOptions,
-      plugins: [terser({ compress: { directives: false } })],
-    },
-  ],
-   */

package/src/components/BlockRendererClient.tsx

@@ -1,54 +0,0 @@
-// "use client";
-//
-// import React from "react";
-// import {
-//   BlocksRenderer,
-//   type BlocksContent,
-// } from "@strapi/blocks-react-renderer";
-// import Typography from "@mui/material/Typography";
-//
-// export function BlockRendererClient({
-//   content,
-// }: {
-//   readonly content: BlocksContent;
-// }) {
-//   if (!content) return null;
-//   return (
-//     <BlocksRenderer
-//       content={content}
-//       blocks={{
-//         // You can use the default components to set class names...
-//         paragraph: ({ children }) => (
-//           <Typography variant="body1" sx={{ mb: 2 }}>
-//             {children}
-//           </Typography>
-//         ),
-//         // ...or point to a design system
-//         heading: ({ children, level }) => {
-//           switch (level) {
-//             case 1:
-//               return <Typography variant="h1">{children}</Typography>;
-//             case 2:
-//               return <Typography variant="h2">{children}</Typography>;
-//             case 3:
-//               return <Typography variant="h3">{children}</Typography>;
-//             case 4:
-//               return <Typography variant="h4">{children}</Typography>;
-//             case 5:
-//               return <Typography variant="h5">{children}</Typography>;
-//             case 6:
-//               return <Typography variant="h6">{children}</Typography>;
-//             default:
-//               return <Typography variant="h1">{children}</Typography>;
-//           }
-//         },
-//         // For links, you may want to use the component from your router or framework
-//         // link: ({ children, url }) => <Link to={url}>{children}</Link>,
-//       }}
-//       modifiers={{
-//         bold: ({ children }) => <strong>{children}</strong>,
-//         italic: ({ children }) => <span className="italic">{children}</span>,
-//       }}
-//     />
-//   );
-// }

package/src/components/ContactForm.tsx

@@ -1,281 +0,0 @@
-"use client";
-
-import React, { useEffect } from "react";
-import Container from "@mui/material/Container";
-import Paper from "@mui/material/Paper";
-import TextField from "@mui/material/TextField";
-import Typography from "@mui/material/Typography";
-import Stack from "@mui/material/Stack";
-import Button from "@mui/material/Button";
-import isEmail from "validator/lib/isEmail";
-import { SxProps, Theme } from "@mui/material/styles";
-import { setOpacity } from "../lib/utils";
-import { useTheme } from "@mui/material/styles";
-import { useSearchParams } from "next/navigation";
-
-// this component requires the app/api/sendgrid.js function to be created
-
-type MaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | false | undefined;
-
-interface ContactFormProps {
-  id: number;
-  __component: string;
-  title?: string;
-  subtitle?: string;
-  successHeading?: string;
-  successText?: string;
-  errorHeading?: string;
-  errorText?: string;
-  maxWidth: MaxWidth;
-  sx?: SxProps<Theme>;
-  glass?: boolean;
-}
-
-function ContactForm({ data }: { readonly data: ContactFormProps }) {
-  const {
-    title = "Write us",
-    subtitle = "We're open for any suggestion or just to have a chat",
-    successHeading = "Thank you!",
-    successText = "Your e-mail has been successfully sent!",
-    errorHeading,
-    errorText = "I am sorry, something went wrong, you could email me directly on info@jellepaulus.nl",
-    maxWidth,
-    sx = {},
-    glass = false,
-  } = data;
-
-  const searchParams = useSearchParams();
-
-  const subject = searchParams.get("subject");
-
-  type FormValues = {
-    name: string;
-    email: string;
-    subject: string;
-    message: string;
-  };
-
-  const [formValues, setFormValues] = React.useState<FormValues>({
-    name: "",
-    email: "",
-    subject: subject ? String(subject) : "",
-    message: "",
-  });
-
-  useEffect(() => {
-    if (subject) {
-      setFormValues((prevValues) => ({
-        ...prevValues,
-        subject: String(subject),
-      }));
-    }
-  }, [subject]);
-
-  type FormErrors = {
-    name?: string;
-    email?: string;
-    subject?: string;
-    message?: string;
-    [key: string]: string | undefined; // Add index signature
-  };
-
-  const [formErrors, setFormErrors] = React.useState<FormErrors>({});
-
-  // Setting button text on form submission
-  const [buttonText, setButtonText] = React.useState("Send");
-
-  // Setting success or failure messages states
-  const [showSuccessMessage, setShowSuccessMessage] = React.useState(false);
-  const [showFailureMessage, setShowFailureMessage] = React.useState(false);
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
-    const { name, value } = e.target;
-    setFormValues({ ...formValues, [name]: value });
-  };
-
-  const handleBlur = (e: React.FocusEvent<HTMLInputElement>): void => {
-    const { name } = e.target;
-    const errors = validate(formValues);
-    if (errors[name]) {
-      setFormErrors((prevErrors) => ({
-        ...prevErrors,
-        [name]: errors[name],
-      }));
-    } else {
-      setFormErrors((prevErrors) => {
-        const updatedErrors = { ...prevErrors };
-        delete updatedErrors[name];
-        return updatedErrors;
-      });
-    }
-  };
-
-  const handleClear = () => {
-    setFormValues({
-      name: "",
-      email: "",
-      subject: "",
-      message: "",
-    });
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    let isValidForm = validate(formValues);
-
-    if (Object.keys(isValidForm).length === 0) {
-      const res = await fetch("/api/sendgrid", {
-        body: JSON.stringify({
-          email: formValues.email,
-          fullname: formValues.name,
-          subject: formValues.subject,
-          message: formValues.message,
-        }),
-        headers: {
-          "Content-Type": "application/json",
-        },
-        method: "POST",
-      });
-
-      if (res.ok) {
-        setShowSuccessMessage(true);
-        setShowFailureMessage(false);
-        handleClear();
-      } else {
-        setShowSuccessMessage(false);
-        setShowFailureMessage(true);
-      }
-    } else {
-      setFormErrors(isValidForm);
-    }
-  };
-
-  const validate = (values: FormValues): FormErrors => {
-    const errors: FormErrors = {};
-    if (!values.name) {
-      errors.name = "Name is required";
-    }
-    if (!values.email) {
-      errors.email = "Email is required";
-    } else if (!isEmail(values.email)) {
-      errors.email = "Invalid email address";
-    }
-    if (!values.subject) {
-      errors.subject = "Subject is required";
-    }
-    if (!values.message) {
-      errors.message = "Message is required";
-    }
-    return errors;
-  };
-
-  const theme = useTheme();
-
-  return (
-    <Container maxWidth={maxWidth ? maxWidth : "lg"} sx={{ my: 1, ...sx }}>
-      <Stack spacing={2} sx={{ width: "100%" }}>
-        <Typography variant="h6" align="center">
-          {title}
-        </Typography>
-        <Typography variant="body1" align="center" sx={{ pb: 3 }}>
-          {subtitle}
-        </Typography>
-        {showSuccessMessage && (
-          <Paper sx={{ p: 2 }}>
-            <Stack spacing={2}>
-              <Typography variant="h6">{successHeading}</Typography>
-              <Typography>{successText}</Typography>
-            </Stack>
-          </Paper>
-        )}
-        {showFailureMessage && (
-          <Paper sx={{ p: 2 }}>
-            <Stack spacing={2}>
-              {errorHeading && (
-                <Typography variant="h6">{errorHeading}</Typography>
-              )}
-              <Typography>{errorText}</Typography>
-              <Button variant="contained">try again</Button>
-            </Stack>
-          </Paper>
-        )}
-      </Stack>
-      {!showSuccessMessage && !showFailureMessage && (
-        <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"
-              name="name"
-              label="Name"
-              value={formValues.name}
-              variant="outlined"
-              onBlur={handleBlur}
-              onChange={handleChange}
-              error={!!formErrors.name}
-              helperText={formErrors.name}
-            />
-
-            <TextField
-              id="email"
-              name="email"
-              label="Email"
-              value={formValues.email}
-              variant="outlined"
-              onBlur={handleBlur}
-              onChange={handleChange}
-              error={!!formErrors.email}
-              helperText={formErrors.email}
-            />
-
-            <TextField
-              id="subject"
-              name="subject"
-              label="Subject"
-              value={formValues.subject}
-              variant="outlined"
-              onBlur={handleBlur}
-              onChange={handleChange}
-              error={!!formErrors.subject}
-              helperText={formErrors.subject}
-            />
-
-            <TextField
-              id="message"
-              name="message"
-              label="Message"
-              value={formValues.message}
-              variant="outlined"
-              multiline
-              minRows={5}
-              onBlur={handleBlur}
-              onChange={handleChange}
-              error={!!formErrors.message}
-              helperText={formErrors.message}
-            />
-            <Stack direction={"row"} spacing={2} justifyContent={"end"}>
-              <Button variant="outlined" color="primary" onClick={handleClear}>
-                Clear
-              </Button>
-              <Button variant="contained" onClick={handleSubmit}>
-                Send
-              </Button>
-            </Stack>
-          </Stack>
-        </Paper>
-      )}
-    </Container>
-  );
-}
-
-export { ContactForm };

package/src/components/ExplanatoryFoldOut.tsx

@@ -1,62 +0,0 @@
-// "use client"
-
-import React from "react";
-
-import Typography from "@mui/material/Typography";
-import Divider from "@mui/material/Divider";
-import Box from "@mui/material/Box";
-import Collapse from "@mui/material/Collapse";
-import Chip from "@mui/material/Chip";
-
-import { SxProps, Theme } from "@mui/material/styles";
-
-// import { KeyboardArrowDown, KeyboardArrowUp } from "@mui/icons-material";
-import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
-import KeyboardArrowUp from "@mui/icons-material/KeyboardArrowUp";
-import { useState } from "react";
-
-// INFO TODO Description and children basically have the same functionality, but description is a string and children is a ReactNode.
-// eventually we should remove description and only use children.
-
-interface ExplanatoryFoldOutProps {
-  title: string;
-  description?: string;
-  sx?: SxProps<Theme>;
-  children?: React.ReactNode;
-}
-
-export function ExplanatoryFoldOut({
-  title,
-  description,
-  sx = [],
-  children,
-}: Readonly<ExplanatoryFoldOutProps>) {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <Box
-      sx={[
-        // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
-    >
-      <Divider textAlign="left">
-        <Chip
-          label={title}
-          size="small"
-          color="primary"
-          onClick={() => setOpen(!open)}
-          icon={open ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
-        />
-      </Divider>
-      <Collapse in={open}>
-        {description && (
-          <Typography variant="body2" color={"primary"} sx={{ mt: 1 }}>
-            {description}
-          </Typography>
-        )}
-        {children && <Box sx={{ mt: 1 }}>{children}</Box>}
-      </Collapse>
-    </Box>
-  );
-}

package/src/components/FluidBackground.tsx

@@ -1,204 +0,0 @@
-"use client";
-
-import React, { useState, useEffect, useRef } from "react";
-import { useTheme } from "@mui/material/styles";
-
-function MovingObject({ ObjectSize = 300 }) {
-  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
-  const followerRef = useRef<SVGSVGElement | null>(null);
-
-  const theme = useTheme();
-
-  // Function to handle mouse movement
-  const handleMouseMove = (event: MouseEvent) => {
-    const { clientX, clientY } = event;
-    setMousePosition({ x: clientX, y: clientY });
-  };
-
-  // Function to update the animation frame
-  const updateFollowerPosition = () => {
-    if (followerRef.current) {
-      followerRef.current.style.position = "absolute";
-      followerRef.current.style.top = `${mousePosition.y}px`;
-      followerRef.current.style.left = `${mousePosition.x}px`;
-      // followerRef.current.style.transform = `translate(${mousePosition.x}px, ${mousePosition.y}px)`;
-    }
-    requestAnimationFrame(updateFollowerPosition);
-  };
-
-  useEffect(() => {
-    // Attach the mouse move listener
-    window.addEventListener("mousemove", handleMouseMove);
-
-    // Start the animation
-    requestAnimationFrame(updateFollowerPosition);
-
-    // Cleanup on component unmount
-    return () => {
-      window.removeEventListener("mousemove", handleMouseMove);
-    };
-  }, [mousePosition]);
-
-  return (
-    <svg
-      id="object"
-      ref={followerRef}
-      width={`${ObjectSize}px`}
-      height={`${ObjectSize}px`}
-      style={{
-        position: "absolute",
-        // top: `${objectY}px`,
-        // left: `${objectX}px`,
-        transform: "translate(-50%, -50%)",
-      }}
-    >
-      <defs>
-        <mask id="radial-gradient-mask">
-          <radialGradient
-            id="gradient"
-            cx="50%"
-            cy="50%"
-            r="50%"
-            fx="50%"
-            fy="50%"
-          >
-            <stop offset="0%" stopColor="white" />
-            <stop offset="100%" stopColor="black" />
-          </radialGradient>
-          <rect width="100%" height="100%" fill="url(#gradient)" />
-        </mask>
-      </defs>
-      <rect
-        width="100%"
-        height="100%"
-        fill={theme.palette.primary.main}
-        mask="url(#radial-gradient-mask)"
-        style={{ filter: `opacity(.5)` }}
-      />
-    </svg>
-  );
-}
-
-function FluidBackground() {
-  const [ObjectSize, setObjectSize] = useState<number>(300);
-
-  const theme = useTheme();
-
-  // setting up all the initial values
-  useEffect(() => {
-    setObjectSize(
-      Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 1.3
-    );
-  }, []);
-
-  return (
-    <div
-      style={{
-        position: "fixed",
-        top: 0,
-        left: 0,
-        width: "100vw",
-        height: "100vh",
-        zIndex: -1,
-        pointerEvents: "none",
-        isolation: "isolate",
-      }}
-    >
-      <div
-        id="background"
-        style={{
-          position: "absolute",
-          top: 0,
-          left: 0,
-          display: "Block",
-          width: "100%",
-          height: "100%",
-          background: theme.palette.background.paper,
-          zIndex: -1,
-        }}
-      />
-      <MovingObject ObjectSize={ObjectSize} />
-
-      <svg
-        id="foreground"
-        style={{
-          position: "absolute",
-        }}
-        preserveAspectRatio="xMidYMid slice"
-        width="100%"
-        height="100%"
-        viewBox="0 0 7680 4320 "
-      >
-        <defs>
-          <mask id="mask">
-            <rect width={"100%"} height={"100%"} fill="white" />
-            <text
-              transform="translate(-1000 200) rotate(-15)"
-              style={{
-                fill: "#000",
-                fontFamily: "Merriweather-Bold, Merriweather",
-                fontSize: "360px",
-                fontWeight: 700,
-                letterSpacing: ".055em",
-              }}
-            >
-              <tspan x="0" y="0">
-                JELLE PAULUS IS A TALENTED WEB DEVELOPER AND{" "}
-              </tspan>
-              <tspan x="0" y="432">
-                DESIGNER WITH A PASSION FOR CREATING VISUALLY{" "}
-              </tspan>
-              <tspan x="0" y="864">
-                STUNNING AND USER-FRIENDLY WEBSITES. WITH A{" "}
-              </tspan>
-              <tspan x="0" y="1296">
-                KEEN EYE FOR DETAIL AND A FOCUS ON CREATING{" "}
-              </tspan>
-              <tspan x="0" y="1728">
-                CLEAN, FUNCTIONAL DESIGNS, JELLE HAS A{" "}
-              </tspan>
-              <tspan x="0" y="2160">
-                REPUTATION FOR DELIVERING HIGH-QUALITY WORK{" "}
-              </tspan>
-              <tspan x="0" y="2592">
-                THAT EXCEEDS HIS CLIENTS&apos; EXPECTATIONS. HE HAS A{" "}
-              </tspan>
-              <tspan x="0" y="3024">
-                DEEP UNDERSTANDING OF THE LATEST WEB{" "}
-              </tspan>
-              <tspan x="0" y="3456">
-                DEVELOPMENT TECHNOLOGIES, AND IS ABLE TO{" "}
-              </tspan>
-              <tspan x="0" y="3888">
-                SEAMLESSLY INTEGRATE FUNCTIONALITY AND{" "}
-              </tspan>
-              <tspan x="0" y="4320">
-                AESTHETICS TO CREATE WEBSITES THAT ARE BOTH{" "}
-              </tspan>
-              <tspan x="0" y="4752">
-                FUNCTIONAL AND VISUALLY APPEALING. WHETHER{" "}
-              </tspan>
-              <tspan x="0" y="5184">
-                YOU&apos;RE LOOKING TO ESTABLISH AN ONLINE PRESENCE{" "}
-              </tspan>
-              <tspan x="0" y="5616">
-                OR REVAMP AN EXISTING WEBSITE, JELLE HAS THE{" "}
-              </tspan>
-              <tspan x="0" y="6048">
-                SKILLS AND EXPERTISE TO BRING YOUR VISION TO LIFE.
-              </tspan>
-            </text>
-          </mask>
-        </defs>
-        <rect
-          width={"100%"}
-          height={"100%"}
-          fill={theme.palette.background.default}
-          mask="url(#mask)"
-        ></rect>
-      </svg>
-    </div>
-  );
-}
-
-export default FluidBackground;