@arolariu/components 0.1.2 → 0.2.0

package/src/components/ui/typewriter.tsx

@@ -1,188 +1,174 @@
-"use client";
-
-import * as React from "react";
-import { cn } from "@/lib/utils";
-import { motion, stagger, useAnimate, useInView } from "motion/react";
-import { useEffect } from "react";
-
-export const TypewriterText = ({
-  words,
-  className,
-  cursorClassName,
-}: {
-  words: {
-    text: string;
-    className?: string;
-  }[];
-  className?: string;
-  cursorClassName?: string;
-}): React.JSX.Element => {
-  // split text inside of words into array of characters
-  const wordsArray = words.map((word) => {
-    return {
-      ...word,
-      text: word.text.split(""),
-    };
-  });
-
-  const [scope, animate] = useAnimate();
-  const isInView = useInView(scope);
-  useEffect(() => {
-    if (isInView) {
-      animate(
-        "span",
-        {
-          display: "inline-block",
-          opacity: 1,
-          width: "fit-content",
-        },
-        {
-          duration: 0.3,
-          delay: stagger(0.1),
-          ease: "easeInOut",
-        },
-      );
-    }
-  }, [isInView]);
-
-  const renderWords = () => {
-    return (
-      <motion.div ref={scope} className="inline">
-        {wordsArray.map((word, idx) => {
-          return (
-            <div key={`word-${idx}`} className="inline-block">
-              {word.text.map((char, index) => (
-                <motion.span
-                  initial={{}}
-                  key={`char-${index}`}
-                  className={cn(
-                    `dark:text-white text-black opacity-0 hidden`,
-                    word.className,
-                  )}
-                >
-                  {char}
-                </motion.span>
-              ))}
-              &nbsp;
-            </div>
-          );
-        })}
-      </motion.div>
-    );
-  };
-  return (
-    <div
-      className={cn(
-        "text-base sm:text-xl md:text-3xl lg:text-5xl font-bold text-center",
-        className,
-      )}
-    >
-      {renderWords()}
-      <motion.span
-        initial={{
-          opacity: 0,
-        }}
-        animate={{
-          opacity: 1,
-        }}
-        transition={{
-          duration: 0.8,
-          repeat: Infinity,
-          repeatType: "reverse",
-        }}
-        className={cn(
-          "inline-block rounded-sm w-[4px] h-4 md:h-6 lg:h-10 bg-blue-500",
-          cursorClassName,
-        )}
-      ></motion.span>
-    </div>
-  );
-};
-
-export const TypewriterTextSmooth = ({
-  words,
-  className,
-  cursorClassName,
-}: {
-  words: {
-    text: string;
-    className?: string;
-  }[];
-  className?: string;
-  cursorClassName?: string;
-}): React.JSX.Element => {
-  // split text inside of words into array of characters
-  const wordsArray = words.map((word) => {
-    return {
-      ...word,
-      text: word.text.split(""),
-    };
-  });
-  const renderWords = () => {
-    return (
-      <div>
-        {wordsArray.map((word, idx) => {
-          return (
-            <div key={`word-${idx}`} className="inline-block">
-              {word.text.map((char, index) => (
-                <span
-                  key={`char-${index}`}
-                  className={cn(`dark:text-white text-black `, word.className)}
-                >
-                  {char}
-                </span>
-              ))}
-              &nbsp;
-            </div>
-          );
-        })}
-      </div>
-    );
-  };
-
-  return (
-    <div className={cn("flex space-x-1 my-6", className)}>
-      <motion.div
-        className="overflow-hidden pb-2"
-        initial={{
-          width: "0%",
-        }}
-        whileInView={{
-          width: "fit-content",
-        }}
-        transition={{
-          duration: 2,
-          ease: "linear",
-          delay: 1,
-        }}
-      >
-        <div
-          className="text-xs sm:text-base md:text-xl lg:text:3xl xl:text-5xl font-bold"
-          style={{
-            whiteSpace: "nowrap",
-          }}
-        >
-          {renderWords()}{" "}
-        </div>{" "}
-      </motion.div>
-      <motion.span
-        initial={{
-          opacity: 0,
-        }}
-        animate={{
-          opacity: 1,
-        }}
-        transition={{
-          duration: 0.8,
-
-          repeat: Infinity,
-          repeatType: "reverse",
-        }}
-        className={cn(
-          "block rounded-sm w-[4px]  h-4 sm:h-6 xl:h-12 bg-blue-500",
-          cursorClassName,
-        )}
-      ></motion.span>
-    </div>
-  );
-};
+"use client";
+
+import {cn} from "@/lib/utilities";
+import {motion, stagger, useAnimate, useInView} from "motion/react";
+import * as React from "react";
+import {useEffect} from "react";
+
+export const TypewriterText = ({
+  words,
+  className,
+  cursorClassName,
+}: {
+  words: {
+    text: string;
+    className?: string;
+  }[];
+  className?: string;
+  cursorClassName?: string;
+}): React.JSX.Element => {
+  // split text inside of words into array of characters
+  const wordsArray = words.map((word) => {
+    return {
+      ...word,
+      text: [...word.text],
+    };
+  });
+
+  const [scope, animate] = useAnimate();
+  const isInView = useInView(scope);
+  useEffect(() => {
+    if (isInView) {
+      animate(
+        "span",
+        {
+          display: "inline-block",
+          opacity: 1,
+          width: "fit-content",
+        },
+        {
+          duration: 0.3,
+          delay: stagger(0.1),
+          ease: "easeInOut",
+        },
+      );
+    }
+  }, [isInView]);
+
+  const renderWords = () => {
+    return (
+      <motion.div
+        ref={scope}
+        className='inline'>
+        {wordsArray.map((word, idx) => {
+          return (
+            <div
+              key={`word-${idx}`}
+              className='inline-block'>
+              {word.text.map((char, index) => (
+                <motion.span
+                  initial={{}}
+                  key={`char-${index}`}
+                  className={cn(`hidden text-black opacity-0 dark:text-white`, word.className)}>
+                  {char}
+                </motion.span>
+              ))}
+              &nbsp;
+            </div>
+          );
+        })}
+      </motion.div>
+    );
+  };
+  return (
+    <div className={cn("text-center text-base font-bold sm:text-xl md:text-3xl lg:text-5xl", className)}>
+      {renderWords()}
+      <motion.span
+        initial={{
+          opacity: 0,
+        }}
+        animate={{
+          opacity: 1,
+        }}
+        transition={{
+          duration: 0.8,
+          repeat: Infinity,
+          repeatType: "reverse",
+        }}
+        className={cn("inline-block h-4 w-[4px] rounded-sm bg-blue-500 md:h-6 lg:h-10", cursorClassName)}></motion.span>
+    </div>
+  );
+};
+
+export const TypewriterTextSmooth = ({
+  words,
+  className,
+  cursorClassName,
+}: {
+  words: {
+    text: string;
+    className?: string;
+  }[];
+  className?: string;
+  cursorClassName?: string;
+}): React.JSX.Element => {
+  // split text inside of words into array of characters
+  const wordsArray = words.map((word) => {
+    return {
+      ...word,
+      text: [...word.text],
+    };
+  });
+  const renderWords = () => {
+    return (
+      <div>
+        {wordsArray.map((word, idx) => {
+          return (
+            <div
+              key={`word-${idx}`}
+              className='inline-block'>
+              {word.text.map((char, index) => (
+                <span
+                  key={`char-${index}`}
+                  className={cn(`text-black dark:text-white`, word.className)}>
+                  {char}
+                </span>
+              ))}
+              &nbsp;
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+  return (
+    <div className={cn("my-6 flex space-x-1", className)}>
+      <motion.div
+        className='overflow-hidden pb-2'
+        initial={{
+          width: "0%",
+        }}
+        whileInView={{
+          width: "fit-content",
+        }}
+        transition={{
+          duration: 2,
+          ease: "linear",
+          delay: 1,
+        }}>
+        <div
+          className='lg:text:3xl text-xs font-bold sm:text-base md:text-xl xl:text-5xl'
+          style={{
+            whiteSpace: "nowrap",
+          }}>
+          {renderWords()}{" "}
+        </div>{" "}
+      </motion.div>
+      <motion.span
+        initial={{
+          opacity: 0,
+        }}
+        animate={{
+          opacity: 1,
+        }}
+        transition={{
+          duration: 0.8,
+
+          repeat: Infinity,
+          repeatType: "reverse",
+        }}
+        className={cn("block h-4 w-[4px] rounded-sm bg-blue-500 sm:h-6 xl:h-12", cursorClassName)}></motion.span>
+    </div>
+  );
+};

package/src/hooks/useIsMobile.tsx

@@ -1,45 +1,42 @@
-"use client";
-import * as React from "react";
-
-const MOBILE_BREAKPOINT = 768;
-
-/**
- * A custom React hook that detects whether the current device is a mobile device
- * based on the screen width.
- *
- * This hook uses a media query to check if the viewport width is less than the defined
- * mobile breakpoint (768px). It updates the state when the window size changes.
- *
- * @returns {boolean} Returns true if the viewport width is less than the mobile breakpoint,
- *                   false otherwise.
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *   const isMobile = useIsMobile();
- *
- *   return (
- *     <div>
- *       {isMobile ? 'Mobile View' : 'Desktop View'}
- *     </div>
- *   );
- * }
- * ```
- */
-export function useIsMobile(): boolean {
-  const [isMobile, setIsMobile] = React.useState<boolean | null>(null);
-
-  React.useEffect(() => {
-    const mql = globalThis.window.matchMedia(
-      `(max-width: ${MOBILE_BREAKPOINT - 1}px)`,
-    );
-    const onChange = () => {
-      setIsMobile(globalThis.window.innerWidth < MOBILE_BREAKPOINT);
-    };
-    mql.addEventListener("change", onChange);
-    setIsMobile(globalThis.window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener("change", onChange);
-  }, []);
-
-  return !!isMobile;
-}
+"use client";
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+/**
+ * A custom React hook that detects whether the current device is a mobile device
+ * based on the screen width.
+ * This hook uses a media query to check if the viewport width is less than the defined
+ * mobile breakpoint (768px). It updates the state when the window size changes.
+ * @returns Returns true if the viewport width is less than the mobile breakpoint,
+ * false otherwise.
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const isMobile = useIsMobile();
+ *
+ *   return (
+ *     <div>
+ *       {isMobile ? 'Mobile View' : 'Desktop View'}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useIsMobile(): boolean {
+  const [isMobile, setIsMobile] = React.useState<boolean | null>(null);
+
+  React.useEffect(() => {
+    const mql = globalThis.window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect
+      setIsMobile(globalThis.window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect
+    setIsMobile(globalThis.window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return Boolean(isMobile);
+}

package/src/hooks/useWindowSize.tsx

@@ -1,72 +1,66 @@
-/** @format */
-
-"use client";
-
-import { useEffect, useState } from "react";
-
-const MOBILE_BREAKPOINT = 768;
-
-type WindowSize = {
-  width: number | null;
-  height: number | null;
-};
-
-type HookReturnType = Readonly<{
-  windowSize: WindowSize;
-  isMobile: boolean;
-  isDesktop: boolean;
-}>;
-
-/**
- * Client hook to get the window size and whether the window is mobile or desktop.
- * @returns An object containing the window size and whether the window is mobile or desktop.
- *@example
- * ```tsx
- * function MyComponent() {
- *   const { windowSize, isMobile, isDesktop } = useWindowSize();
- *
- *   return (
- *     <div>
- *       <p>Window Size: {windowSize.width} x {windowSize.height}</p>
- *       <p>{isMobile ? 'Mobile View' : 'Desktop View'}</p>
- *     </div>
- *   );
- * }
- * ```
- */
-export function useWindowSize(): HookReturnType {
-  const [windowSize, setWindowSize] = useState<WindowSize>({
-    width: null,
-    height: null,
-  });
-
-  useEffect(() => {
-    /**
-     * This function updates the window size.
-     * It is created inside of useEffect and has a short lifespan.
-     * After it is attached to the window object, it will be garbage collected
-     *  when the component unmounts or the window is resized.
-     */
-    function __handleResize__() {
-      setWindowSize({
-        width: globalThis.window.innerWidth,
-        height: globalThis.window.innerHeight,
-      });
-    }
-
-    globalThis.window.addEventListener("resize", __handleResize__);
-    __handleResize__(); // Call the function once to get the initial window size
-    return () =>
-      globalThis.window.removeEventListener("resize", __handleResize__);
-  }, []); // Empty array ensures that effect is only run on mount
-
-  return {
-    windowSize,
-    isMobile:
-      typeof windowSize.width === "number" &&
-      windowSize.width < MOBILE_BREAKPOINT,
-    isDesktop:
-      typeof windowSize.width === "number" &&
-      windowSize.width >= MOBILE_BREAKPOINT,
-  } as const;
-}
+"use client";
+
+import {useEffect, useState} from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+type WindowSize = {
+  width: number | null;
+  height: number | null;
+};
+
+type HookReturnType = Readonly<{
+  windowSize: WindowSize;
+  isMobile: boolean;
+  isDesktop: boolean;
+}>;
+
+/**
+ * Client hook to get the window size and whether the window is mobile or desktop.
+ * @returns An object containing the window size and whether the window is mobile or desktop.
+ *@example
+ * ```tsx
+ * function MyComponent() {
+ *   const { windowSize, isMobile, isDesktop } = useWindowSize();
+ *
+ *   return (
+ *     <div>
+ *       <p>Window Size: {windowSize.width} x {windowSize.height}</p>
+ *       <p>{isMobile ? 'Mobile View' : 'Desktop View'}</p>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useWindowSize(): HookReturnType {
+  const [windowSize, setWindowSize] = useState<WindowSize>({
+    width: null,
+    height: null,
+  });
+
+  useEffect(() => {
+    /**
+     * This function updates the window size.
+     * It is created inside of useEffect and has a short lifespan.
+     * After it is attached to the window object, it will be garbage collected
+     *  when the component unmounts or the window is resized.
+     */
+    function __handleResize__() {
+      // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect
+      setWindowSize({
+        width: globalThis.window.innerWidth,
+        height: globalThis.window.innerHeight,
+      });
+    }
+
+    globalThis.window.addEventListener("resize", __handleResize__);
+    __handleResize__(); // Call the function once to get the initial window size
+    return () => globalThis.window.removeEventListener("resize", __handleResize__);
+  }, []); // Empty array ensures that effect is only run on mount
+
+  return {
+    windowSize,
+    isMobile: typeof windowSize.width === "number" && windowSize.width < MOBILE_BREAKPOINT,
+    isDesktop: typeof windowSize.width === "number" && windowSize.width >= MOBILE_BREAKPOINT,
+  } as const;
+}