@julseb-lib/react 0.0.85 → 0.0.87

package/dist/lib/components/Header/Header.tsx

@@ -1,6 +1,4 @@
-/*=============================================== Header component ===============================================*/
-
-import { forwardRef, useState, useEffect, useRef, type RefObject } from "react"
+import { useState, useEffect, useRef, type Ref, type FC } from "react"
 import classNames from "classnames"
 import { enableScroll, disableScroll } from "@julseb-lib/utils"
 import { useMaxWidth, useKeyPress } from "../../"
@@ -17,196 +15,207 @@ import type {
 } from "./subtypes"
 
 /**
- * @description Returns a Header component
- * @link https://documentation-components-react.vercel.app/components/header
+ * Header component for displaying a responsive navigation bar with logo, links, burger menu, and optional search.
+ *
+ * @component
  * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop logo: LibHeaderLogo
- * @prop links: Array<LibHeaderLink> => only if children is not defined
- * @prop children?: ReactChildren => only if links is not defined
- * @prop burgerPosition?: LibNavBurgerPosition
- * @prop burgerColor?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background" { closed: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"; open: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background" }
- * @prop navDesktopVariant?: LibNavBurgerPosition
- * @prop navMobileVariant?: LibNavMobileVariant
- * @prop enableScrollingOpen?: boolean
- * @prop search?: { pathname: string; queries?: Array<Array<string>>; iconLeft?: string | JSX.Element; iconLeftSize?: number; iconClear?: string | JSX.Element; iconClearSize?: number; iconBaseUrl?: string; placeholder?: string; keyboardShortcut?: Array<string>; showKeys?: boolean; inputBackground?: "light" | "dark"; maxWidth?: string | number; inputVariant?: "rounded" | "pill" }
- * @prop position?: LibHeaderPosition
- * @prop hideOnScroll?: boolean | number => only if position is set to fixed
- * @prop variant?: "primary" | "white" | "transparent"
- * @prop backgroundColor?: Any color from the library => only if variant is set to primary
- * @prop textColor?: Any color from the library => only if variant is set to primary
- * @prop linkColor?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font"
+ * @param {Object} props - Header props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {ElementType} [props.as] - Custom element type to render as.
+ * @param {ForwardedRef<HTMLDivElement>} [props.ref] - Ref forwarded to the root element.
+ * @param {LibHeaderLogo|String} props.logo - Logo for the header (object or string).
+ * @param {Array<LibHeaderLink>} [props.links] - Array of navigation links (used if children is not provided).
+ * @param {ReactNode} [props.children] - Custom header content (used if links is not provided).
+ * @param {"left" | "right"} [props.burgerPosition="right"] - Position of the burger menu.
+ * @param {Object|string} [props.burgerColor] - Color for burger menu (string or object with open/closed).
+ * @param {"left" | "right"} [props.navDesktopVariant="right"] - Desktop navigation alignment.
+ * @param {"drawer" | "inline"} [props.navMobileVariant="drawer"] - Mobile navigation variant.
+ * @param {boolean} [props.enableScrollingOpen] - Allow scrolling when menu is open.
+ * @param {Object} [props.search] - Search bar configuration.
+ * @param {"relative" | "fixed"} [props.position="relative"] - Header position.
+ * @param {boolean|number} [props.hideOnScroll] - Hide header on scroll (only if position is fixed).
+ * @param {"primary" | "white" | "transparent"} [props.variant="primary"] - Header visual variant.
+ * @param {string} [props.backgroundColor="primary"] - Header background color (only if variant is primary).
+ * @param {string} [props.textColor="background"] - Header text color (only if variant is primary).
+ * @param {"primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font"} [props.linkColor="white"] - Link color.
+ * @param {string} [props.className] - Additional class names.
+ * @returns {JSX.Element} The rendered Header component.
+ *
+ * @example
+ * <Header
+ *   logo={{ img: "/logo.svg", text: "MyApp", alt: "Logo" }}
+ *   links={[
+ *     { text: "Home", to: "/" },
+ *     { text: "About", to: "/about" }
+ *   ]}
+ *   burgerPosition="left"
+ *   variant="primary"
+ *   backgroundColor="primary"
+ *   textColor="background"
+ *   linkColor="white"
+ * />
  */
-export const Header = forwardRef<HTMLDivElement, ILibHeader>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            children,
-            className,
-            logo,
-            variant = "primary",
-            burgerPosition = "right",
-            navDesktopVariant = "right",
-            navMobileVariant = "drawer",
-            search,
-            position = "relative",
-            hideOnScroll,
-            links,
-            nav,
-            enableScrollingOpen,
-            backgroundColor = "primary",
-            textColor = "background",
-            linkColor = "white",
-            ...rest
-        },
-        ref
-    ) => {
-        const [isOpen, setIsOpen] = useState(false)
-
-        const handleOpen = () => {
-            if (!enableScrollingOpen) disableScroll()
-            setIsOpen(true)
-        }
+export const Header: FC<ILibHeader> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    className,
+    logo,
+    variant = "primary",
+    burgerPosition = "right",
+    navDesktopVariant = "right",
+    navMobileVariant = "drawer",
+    search,
+    position = "relative",
+    hideOnScroll,
+    links,
+    nav,
+    enableScrollingOpen,
+    backgroundColor = "primary",
+    textColor = "background",
+    linkColor = "white",
+    ...rest
+}) => {
+    const [isOpen, setIsOpen] = useState(false)
+
+    const handleOpen = () => {
+        if (!enableScrollingOpen) disableScroll()
+        setIsOpen(true)
+    }
 
-        const handleClose = () => {
-            if (!enableScrollingOpen) enableScroll()
-            setTimeout(() => setIsOpen(false), 10)
-        }
+    const handleClose = () => {
+        if (!enableScrollingOpen) enableScroll()
+        setTimeout(() => setIsOpen(false), 10)
+    }
+
+    const isMobile = useMaxWidth(600)
 
-        const isMobile = useMaxWidth(600)
+    const logoObj = typeof logo === "object" ? logo : undefined
 
-        const logoObj = typeof logo === "object" ? logo : undefined
+    const logoHeight = logoObj?.height || 30
+    const burgerHeight = 32
+    const logoTextHeight = 35
+    const heightsArr = [logoHeight, burgerHeight, logoTextHeight].sort()
+    const valueForHeight = heightsArr[heightsArr.length - 1]
 
-        const logoHeight = logoObj?.height || 30
-        const burgerHeight = 32
-        const logoTextHeight = 35
-        const heightsArr = [logoHeight, burgerHeight, logoTextHeight].sort()
-        const valueForHeight = heightsArr[heightsArr.length - 1]
+    const headerHeight = valueForHeight + 16 * 2
 
-        const headerHeight = valueForHeight + 16 * 2
+    const [isHidden, setIsHidden] = useState(false)
+    const hidePosition = typeof hideOnScroll === "boolean" ? 400 : hideOnScroll
 
-        const [isHidden, setIsHidden] = useState(false)
-        const hidePosition =
-            typeof hideOnScroll === "boolean" ? 400 : hideOnScroll
+    useEffect(() => {
+        if (hidePosition) {
+            if (window.pageYOffset >= hidePosition) {
+                setIsHidden(true)
+            } else {
+                setIsHidden(false)
+            }
 
-        useEffect(() => {
-            if (hidePosition) {
+            window.addEventListener("scroll", () => {
                 if (window.pageYOffset >= hidePosition) {
                     setIsHidden(true)
                 } else {
                     setIsHidden(false)
                 }
-
-                window.addEventListener("scroll", () => {
-                    if (window.pageYOffset >= hidePosition) {
-                        setIsHidden(true)
-                    } else {
-                        setIsHidden(false)
-                    }
-                })
-            }
-        }, [hidePosition])
-
-        const burgerRef = useRef<HTMLButtonElement>(null)
-
-        useKeyPress("Escape", () => {
-            if (isOpen) handleClose()
-        })
-
-        const burgerProps: ILibHeaderBurger & {
-            ref: RefObject<HTMLButtonElement>
-        } = {
-            "data-testid": testid,
-            className,
-            isOpen,
-            navMobileVariant,
-            variant,
-            ref: burgerRef,
-            handleOpen,
-            handleClose,
+            })
         }
+    }, [hidePosition])
+
+    const burgerRef = useRef<HTMLButtonElement>(null as any)
+
+    useKeyPress("Escape", () => {
+        if (isOpen) handleClose()
+    })
+
+    const burgerProps: ILibHeaderBurger & {
+        ref: Ref<HTMLButtonElement>
+    } = {
+        "data-testid": testid,
+        className,
+        isOpen,
+        navMobileVariant,
+        variant,
+        ref: burgerRef,
+        handleOpen,
+        handleClose,
+    }
 
-        const navProps: ILibHeaderNav = {
-            "data-testid": testid,
-            className,
-            search,
-            isOpen,
-            handleClose,
-            links,
-            children,
-            headerHeight,
-            variant,
-            navMobileVariant,
-            burgerPosition,
-            burgerRef,
-        }
+    const navProps: ILibHeaderNav = {
+        "data-testid": testid,
+        className,
+        search,
+        isOpen,
+        handleClose,
+        links,
+        children,
+        headerHeight,
+        variant,
+        navMobileVariant,
+        burgerPosition,
+        burgerRef,
+    }
 
-        const searchProps: ILibHeaderSearch = {
-            "data-testid": testid,
-            className,
-            search,
-            handleClose,
-        }
+    const searchProps: ILibHeaderSearch = {
+        "data-testid": testid,
+        className,
+        search,
+        handleClose,
+    }
 
-        return (
-            <StyledHeader
+    return (
+        <StyledHeader
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            className={classNames(
+                className,
+                { Hidden: isHidden },
+                { Open: isOpen }
+            )}
+            $burgerPosition={burgerPosition}
+            $headerHeight={headerHeight}
+            $position={position}
+            $variant={variant}
+            $backgroundColor={backgroundColor}
+            $linkColor={linkColor}
+            $textColor={textColor}
+            {...rest}
+        >
+            {burgerPosition === "left" && <HeaderBurger {...burgerProps} />}
+
+            <HeaderLogo
                 data-testid={testid}
-                ref={ref}
-                as={as}
-                className={classNames(
-                    className,
-                    { Hidden: isHidden },
-                    { Open: isOpen }
-                )}
-                $burgerPosition={burgerPosition}
-                $headerHeight={headerHeight}
-                $position={position}
-                $variant={variant}
-                $backgroundColor={backgroundColor}
-                $linkColor={linkColor}
-                $textColor={textColor}
-                {...rest}
+                className={className}
+                logo={logo}
+                isOpen={isOpen}
             >
-                {burgerPosition === "left" && <HeaderBurger {...burgerProps} />}
-
-                <HeaderLogo
-                    data-testid={testid}
-                    className={className}
-                    logo={logo}
-                    isOpen={isOpen}
-                >
-                    {typeof logo === "object" ? logo.text : logo}
-                </HeaderLogo>
-
-                {navDesktopVariant === "left" && <HeaderNav {...navProps} />}
-
-                {!isMobile && navDesktopVariant === "right" && (
-                    <HeaderSearch {...searchProps} />
-                )}
-
-                {burgerPosition === "right" && (
-                    <HeaderBurger {...burgerProps} />
-                )}
-
-                {navDesktopVariant === "right" && <HeaderNav {...navProps} />}
-
-                {isMobile && navMobileVariant === "drawer" && (
-                    <Overlay
-                        onClick={() => setIsOpen(false)}
-                        className={classNames(
-                            { HeaderOverlay: className },
-                            { Visible: isOpen }
-                        )}
-                    />
-                )}
-
-                {!isMobile && navDesktopVariant === "left" && (
-                    <HeaderSearch {...searchProps} />
-                )}
-            </StyledHeader>
-        )
-    }
-)
+                {typeof logo === "object" ? logo.text : logo}
+            </HeaderLogo>
+
+            {navDesktopVariant === "left" && <HeaderNav {...navProps} />}
+
+            {!isMobile && navDesktopVariant === "right" && (
+                <HeaderSearch {...searchProps} />
+            )}
+
+            {burgerPosition === "right" && <HeaderBurger {...burgerProps} />}
+
+            {navDesktopVariant === "right" && <HeaderNav {...navProps} />}
+
+            {isMobile && navMobileVariant === "drawer" && (
+                <Overlay
+                    onClick={() => setIsOpen(false)}
+                    className={classNames(
+                        { HeaderOverlay: className },
+                        { Visible: isOpen }
+                    )}
+                />
+            )}
+
+            {!isMobile && navDesktopVariant === "left" && (
+                <HeaderSearch {...searchProps} />
+            )}
+        </StyledHeader>
+    )
+}

package/dist/lib/components/Header/HeaderBurger.tsx

@@ -1,59 +1,51 @@
-/*=============================================== HeaderBurger ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import type { LibColorsHover } from "../../types"
 import { StyledHeaderBurger } from "./styles"
 import type { ILibHeaderBurger } from "./subtypes"
 
-export const HeaderBurger = forwardRef<HTMLButtonElement, ILibHeaderBurger>(
-    (
-        {
-            "data-testid": testid,
-            className,
-            isOpen,
-            navMobileVariant,
-            variant,
-            burgerColor,
-            handleOpen,
-            handleClose,
-        },
-        ref
-    ) => {
-        const getBurgerColor = (): LibColorsHover => {
-            if (burgerColor) {
-                if (typeof burgerColor === "string") return burgerColor
-
-                return isOpen ? burgerColor.open : burgerColor.closed
-            }
+export const HeaderBurger: FC<ILibHeaderBurger> = ({
+    "data-testid": testid,
+    ref,
+    className,
+    isOpen,
+    navMobileVariant,
+    variant,
+    burgerColor,
+    handleOpen,
+    handleClose,
+}) => {
+    const getBurgerColor = (): LibColorsHover => {
+        if (burgerColor) {
+            if (typeof burgerColor === "string") return burgerColor
 
-            if (
-                (navMobileVariant === "drawer" && isOpen) ||
-                variant === "primary" ||
-                navMobileVariant === "full" ||
-                (navMobileVariant === "top" &&
-                    isOpen &&
-                    variant === "transparent")
-            ) {
-                return "white"
-            }
+            return isOpen ? burgerColor.open : burgerColor.closed
+        }
 
-            return "primary"
+        if (
+            (navMobileVariant === "drawer" && isOpen) ||
+            variant === "primary" ||
+            navMobileVariant === "full" ||
+            (navMobileVariant === "top" && isOpen && variant === "transparent")
+        ) {
+            return "white"
         }
 
-        return (
-            <StyledHeaderBurger
-                data-testid={testid && `${testid}.HeaderBurger`}
-                ref={ref}
-                className={className && "HeaderBurger"}
-                isOpen={isOpen}
-                onClick={() => {
-                    if (isOpen) handleClose()
-                    else handleOpen()
-                }}
-                width={32}
-                height={24}
-                color={getBurgerColor()}
-            />
-        )
+        return "primary"
     }
-)
+
+    return (
+        <StyledHeaderBurger
+            data-testid={testid && `${testid}.HeaderBurger`}
+            ref={ref}
+            className={className && "HeaderBurger"}
+            isOpen={isOpen}
+            onClick={() => {
+                if (isOpen) handleClose()
+                else handleOpen()
+            }}
+            width={32}
+            height={24}
+            color={getBurgerColor()}
+        />
+    )
+}

package/dist/lib/components/Header/HeaderLogo.tsx

@@ -1,16 +1,15 @@
-/*=============================================== HeaderLogo ===============================================*/
-
+import type { FC } from "react"
 import { Link } from "react-router-dom"
 import { Logo, LogoImg } from "./styles"
 import type { ILibHeaderLogo } from "./subtypes"
 
-export const HeaderLogo = ({
+export const HeaderLogo: FC<ILibHeaderLogo> = ({
     "data-testid": testid,
     className,
     logo,
     children,
     isOpen,
-}: ILibHeaderLogo) => {
+}) => {
     const {
         to = "/",
         href,

package/dist/lib/components/Header/HeaderNav.tsx

@@ -1,6 +1,4 @@
-/*=============================================== HeaderNav ===============================================*/
-
-import { useRef, type ReactNode } from "react"
+import { useRef, type FC, type ReactNode } from "react"
 import classNames from "classnames"
 import { uuid } from "@julseb-lib/utils"
 import { useMaxWidth, useClickOutside } from "../../"
@@ -10,7 +8,7 @@ import { Nav } from "./styles"
 import type { ILibHeaderNav } from "./subtypes"
 import type { LibHeaderLink } from "../../types"
 
-export const HeaderNav = ({
+export const HeaderNav: FC<ILibHeaderNav> = ({
     "data-testid": testid,
     className,
     search,
@@ -24,10 +22,10 @@ export const HeaderNav = ({
     burgerRef,
     handleClose,
     nav,
-}: ILibHeaderNav) => {
+}) => {
     const isMobile = useMaxWidth(600)
 
-    const el = useRef<HTMLDivElement>(null)
+    const el = useRef<HTMLDivElement>(null as any)
     useClickOutside(el, e => {
         if (!burgerRef?.current?.contains(e.target as any)) {
             handleClose()

package/dist/lib/components/Header/HeaderNavLink.tsx

@@ -1,15 +1,14 @@
 // @ts-nocheck
-/*=============================================== HeaderNavLink ===============================================*/
 
-import { isValidElement } from "react"
+import { isValidElement, type FC } from "react"
 import { Link } from "../../"
 import type { ILibHeaderNavLink } from "./subtypes"
 
-export const HeaderNavLink = ({
+export const HeaderNavLink: FC<ILibHeaderNavLink> = ({
     "data-testid": testid,
     link,
     className,
-}: ILibHeaderNavLink) => {
+}) => {
     if (isValidElement(link)) return link
 
     return (

package/dist/lib/components/Header/HeaderSearch.tsx

@@ -1,17 +1,15 @@
-/*=============================================== HeaderSearch ===============================================*/
-
-import { useState, type FormEvent, type ChangeEvent } from "react"
+import { useState, type FormEvent, type ChangeEvent, type FC } from "react"
 import { useNavigate, createSearchParams } from "react-router-dom"
 import { Input } from "../../"
 import { SearchForm } from "./styles"
 import type { ILibHeaderSearch } from "./subtypes"
 
-export const HeaderSearch = ({
+export const HeaderSearch: FC<ILibHeaderSearch> = ({
     "data-testid": testid,
     className,
     search,
     handleClose,
-}: ILibHeaderSearch) => {
+}) => {
     if (!search) return null
 
     const {

package/dist/lib/components/Header/index.ts

@@ -1,3 +1 @@
-/*=============================================== Header exports ===============================================*/
-
 export * from "./Header"

package/dist/lib/components/Header/styles.tsx

@@ -1,5 +1,3 @@
-/*=============================================== Header styles ===============================================*/
-
 import styled, { css } from "styled-components"
 import { Link } from "react-router-dom"
 import { stringifyPx } from "@julseb-lib/utils"

package/dist/lib/components/Header/subtypes.ts

@@ -1,12 +1,9 @@
-/*=============================================== Header sub components types ===============================================*/
-
-import type { FC, RefObject } from "react"
+import type { FC, Ref } from "react"
 import type { LibHeaderLink, LibLink } from "../../types"
 import type { ILibHeader } from "./types"
 
 // ! DO NOT EXPORT THOSE TYPES, ONLY USE THEM IN THOSE COMPONENTS
 
-/*====================== HeaderNav ======================*/
 export interface ILibHeaderNav
     extends Pick<
         ILibHeader,
@@ -20,13 +17,12 @@ export interface ILibHeaderNav
         | "burgerPosition"
         | "nav"
     > {
-    burgerRef: RefObject<HTMLButtonElement>
+    burgerRef: Ref<HTMLButtonElement>
     isOpen: boolean
     headerHeight: number
     handleClose: () => void
 }
 
-/*====================== HeaderBurger ======================*/
 export interface ILibHeaderBurger
     extends Pick<
         ILibHeader,
@@ -39,9 +35,9 @@ export interface ILibHeaderBurger
     isOpen: boolean
     handleOpen: () => void
     handleClose: () => void
+    ref?: Ref<HTMLButtonElement>
 }
 
-/*====================== HeaderLogo ======================*/
 export interface ILibHeaderLogo
     extends Pick<
         ILibHeader,
@@ -50,21 +46,17 @@ export interface ILibHeaderLogo
     isOpen: boolean
 }
 
-/*====================== HeaderNavLink ======================*/
 export interface ILibHeaderNavLink {
     "data-testid": string | undefined
     className: string | undefined
     link: LibHeaderLink | JSX.Element | FC
 }
 
-/*====================== HeaderSearch ======================*/
 export interface ILibHeaderSearch
     extends Pick<ILibHeader, "data-testid" | "className" | "search"> {
     handleClose: () => void
 }
 
-/*====================== HeaderNav ======================*/
-
 type HeaderLogoWithText = LibLink & {
     text: string
     img?: never