@julseb-lib/react 0.0.61 → 0.0.64

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

@@ -0,0 +1,59 @@
+/*=============================================== HeaderBurger ===============================================*/
+
+import { forwardRef } 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
+            }
+
+            if (
+                (navMobileVariant === "drawer" && isOpen) ||
+                variant === "primary" ||
+                navMobileVariant === "full" ||
+                (navMobileVariant === "top" &&
+                    isOpen &&
+                    variant === "transparent")
+            ) {
+                return "white"
+            }
+
+            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

@@ -0,0 +1,65 @@
+/*=============================================== HeaderLogo ===============================================*/
+
+import { Link } from "react-router-dom"
+import { Logo, LogoImg } from "./styles"
+import type { ILibHeaderLogo } from "./subtypes"
+
+export const HeaderLogo = ({
+    "data-testid": testid,
+    className,
+    logo,
+    children,
+    isOpen,
+}: ILibHeaderLogo) => {
+    const {
+        to = "/",
+        href,
+        img,
+        imgOpen,
+        alt = "Logo",
+        width = 100,
+        height = 30,
+    } = logo as any
+
+    if (img) {
+        const imgProps = {
+            "data-testid": testid && `${testid}.HeaderLogo.Img`,
+            className: className && "HeaderLogoImg",
+            src: imgOpen && isOpen ? imgOpen : img,
+            alt,
+            width,
+            height,
+        }
+
+        return href ? (
+            <a
+                href={href}
+                data-testid={testid && `${testid}.HeaderLogo`}
+                className={className && "HeaderLogo"}
+            >
+                <LogoImg {...imgProps} />
+            </a>
+        ) : (
+            <Link
+                data-testid={testid && `${testid}.HeaderLogo`}
+                className={className && "HeaderLogo"}
+                to={to}
+            >
+                <LogoImg {...imgProps} />
+            </Link>
+        )
+    }
+
+    return (
+        <Logo
+            data-testid={testid && `${testid}.HeaderLogo`}
+            as={href ? "a" : Link}
+            className={className && "HeaderLogo"}
+            to={to}
+            href={href}
+            translate="no"
+        >
+            {children}
+        </Logo>
+    )
+}

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

@@ -0,0 +1,82 @@
+/*=============================================== HeaderNav ===============================================*/
+
+import { useRef, type ReactNode } from "react"
+import classNames from "classnames"
+import { uuid } from "@julseb-lib/utils"
+import { useMaxWidth, useClickOutside } from "../../"
+import { HeaderNavLink } from "./HeaderNavLink"
+import { HeaderSearch } from "./HeaderSearch"
+import { Nav } from "./styles"
+import type { ILibHeaderNav } from "./subtypes"
+import type { LibHeaderLink } from "../../types"
+
+export const HeaderNav = ({
+    "data-testid": testid,
+    className,
+    search,
+    isOpen,
+    children,
+    links,
+    headerHeight,
+    variant,
+    navMobileVariant,
+    burgerPosition,
+    burgerRef,
+    handleClose,
+    nav,
+}: ILibHeaderNav) => {
+    const isMobile = useMaxWidth(600)
+
+    const el = useRef<HTMLDivElement>(null)
+    useClickOutside(el, e => {
+        if (!burgerRef?.current?.contains(e.target as any)) {
+            handleClose()
+        }
+    })
+
+    const valueArr = links ? links : (children as Array<ReactNode>)
+
+    const searchHeight = isMobile && !!search ? 32 : 0
+
+    const linksHeight = links
+        ? links.length * 24 + ([...valueArr, searchHeight].length - 1) * 12
+        : 56
+
+    const navHeight = searchHeight + linksHeight
+
+    return (
+        <Nav
+            data-testid={testid && `${testid}.HeaderNav`}
+            ref={el}
+            className={classNames({ HeaderNav: className }, { Open: isOpen })}
+            $headerHeight={headerHeight}
+            $variant={variant}
+            $burgerPosition={burgerPosition}
+            $navMobileVariant={navMobileVariant}
+            $navHeight={navHeight}
+        >
+            {isMobile && search && (
+                <HeaderSearch
+                    {...search}
+                    data-testid={testid}
+                    className={className}
+                    handleClose={handleClose}
+                />
+            )}
+
+            {links &&
+                links.map(link => (
+                    <HeaderNavLink
+                        data-testid={testid}
+                        className={className}
+                        link={link as LibHeaderLink | JSX.Element}
+                        key={uuid()}
+                    />
+                ))}
+
+            {children && children}
+
+            {nav && nav}
+        </Nav>
+    )
+}

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

@@ -0,0 +1,32 @@
+// @ts-nocheck
+/*=============================================== HeaderNavLink ===============================================*/
+
+import { isValidElement } from "react"
+import { Link } from "../../"
+import type { ILibHeaderNavLink } from "./subtypes"
+
+export const HeaderNavLink = ({
+    "data-testid": testid,
+    link,
+    className,
+}: ILibHeaderNavLink) => {
+    if (isValidElement(link)) return link
+
+    return (
+        <Link
+            data-testid={link["data-testid"] || (testid && `${testid}.NavLink`)}
+            className={link.className || (className && "NavLink")}
+            id={link.id}
+            ref={link.ref}
+            end={link.end}
+            blank={link.blank}
+            to={link.to}
+            href={link.href}
+            onClick={link.onClick}
+            disabled={link.disabled}
+            isNavLink
+        >
+            {link.text}
+        </Link>
+    )
+}

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

@@ -0,0 +1,83 @@
+/*=============================================== HeaderSearch ===============================================*/
+
+import { useState, type FormEvent, type ChangeEvent } from "react"
+import { useNavigate, createSearchParams } from "react-router-dom"
+import { Input } from "../../"
+import { SearchForm } from "./styles"
+import type { ILibHeaderSearch } from "./subtypes"
+
+export const HeaderSearch = ({
+    "data-testid": testid,
+    className,
+    search,
+    handleClose,
+}: ILibHeaderSearch) => {
+    if (!search) return null
+
+    const {
+        maxWidth,
+        placeholder,
+        iconLeft,
+        iconLeftSize,
+        iconClear,
+        iconClearSize,
+        iconBaseUrl,
+        inputBackground,
+        inputVariant,
+        keyboardShortcut,
+        showKeys,
+        pathname,
+        queries,
+    } = search
+
+    const navigate = useNavigate()
+
+    const [searchValue, setSearchValue] = useState("")
+    const handleSearch = (e: ChangeEvent<HTMLInputElement>) =>
+        setSearchValue(e.target.value)
+    const clearSearch = () => setSearchValue("")
+
+    const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+        e.preventDefault()
+
+        navigate({
+            pathname: pathname,
+            search: createSearchParams({
+                query: searchValue,
+                ...Object.fromEntries(queries || []),
+            }).toString(),
+        })
+
+        setSearchValue("")
+        handleClose()
+    }
+
+    return (
+        <SearchForm
+            data-testid={testid && `${testid}.HeaderSearch`}
+            className={className && "HeaderSearch"}
+            onSubmit={handleSubmit}
+            role="search"
+            $maxWidth={maxWidth}
+        >
+            <Input
+                data-testid={testid && `${testid}.SearchInput`}
+                className={className && "SearchInput"}
+                type="search"
+                clearSearch={clearSearch}
+                onChange={handleSearch}
+                value={searchValue}
+                placeholder={placeholder}
+                icon={iconLeft}
+                iconSize={iconLeftSize}
+                iconClear={iconClear}
+                iconClearSize={iconClearSize}
+                inputBackground={inputBackground}
+                inputVariant={inputVariant}
+                focusKeys={keyboardShortcut}
+                showKeys={showKeys}
+                iconBaseUrl={iconBaseUrl}
+            />
+        </SearchForm>
+    )
+}

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

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

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

@@ -0,0 +1,352 @@
+/*=============================================== Header styles ===============================================*/
+
+import styled, { css } from "styled-components"
+import { Link } from "react-router-dom"
+import { stringifyPx } from "@julseb-lib/utils"
+import {
+    setDefaultTheme,
+    Image,
+    Burger,
+    Mixins,
+    SPACERS,
+    TRANSITIONS,
+    FONT_SIZES,
+    FONT_WEIGHTS,
+    MEDIA,
+    OVERLAYS,
+    LINE_HEIGHTS,
+} from "../../"
+import type {
+    LibAllColors,
+    LibColorsHover,
+    LibHeaderPosition,
+    LibHeaderVariant,
+    LibNavBurgerPosition,
+    LibNavMobileVariant,
+} from "../../types"
+
+const LogoImg = styled(Image).attrs({ fit: "contain" })`
+    object-position: left center;
+    position: relative;
+    z-index: 999;
+` as any
+
+const Logo = styled(Link)`
+    position: relative;
+    z-index: 999;
+    line-height: ${LINE_HEIGHTS.BODY};
+`
+
+const StyledHeaderBurger = styled(Burger)`
+    display: none;
+    z-index: 999;
+
+    @media ${MEDIA.BREAKPOINT_MOBILE} {
+        display: inherit;
+    }
+`
+
+const StyledHeader = styled.header<{
+    $variant: LibHeaderVariant
+    $burgerPosition: LibNavBurgerPosition
+    $position: LibHeaderPosition
+    $headerHeight: number
+    $backgroundColor: LibAllColors
+    $textColor: LibAllColors
+    $linkColor: LibColorsHover
+}>`
+    position: ${({ $position }) => $position};
+    left: 0;
+    top: 0;
+    z-index: 999;
+    width: 100vw;
+    ${Mixins.Flexbox({
+        $alignItems: "center",
+        $justifyContent: "space-between",
+        $gap: "l",
+    })};
+    padding: ${SPACERS.M} 5vw;
+    transition: ${TRANSITIONS.SHORT};
+    background-color: ${({ $backgroundColor }) =>
+        Mixins.AllColors($backgroundColor)};
+    color: ${({ $textColor }) => Mixins.AllColors($textColor)};
+
+    @media ${MEDIA.BREAKPOINT_MOBILE} {
+        height: ${({ $headerHeight }) => $headerHeight}px;
+    }
+
+    & > a,
+    & > button:not(${StyledHeaderBurger}),
+    & > nav > a,
+    & > nav > button {
+        font-size: ${FONT_SIZES.BODY};
+        padding: 0;
+        border: none;
+        background-color: transparent;
+        text-decoration: none;
+        font-weight: ${FONT_WEIGHTS.REGULAR};
+
+        &.active,
+        &${Logo} {
+            font-weight: ${FONT_WEIGHTS.BLACK};
+        }
+    }
+
+    ${({ $burgerPosition }) =>
+        $burgerPosition === "left" &&
+        css`
+            @media ${MEDIA.BREAKPOINT_MOBILE} {
+                justify-content: flex-start;
+                gap: ${SPACERS.XS};
+            }
+        `}
+
+    ${({ $position, $headerHeight }) =>
+        ($position === "absolute" || $position === "fixed") &&
+        css`
+            top: 0;
+
+            &.Hidden {
+                top: calc(${$headerHeight * -1}px - ${SPACERS.S});
+            }
+        `}
+
+    ${({ $variant, $linkColor }) =>
+        ($variant === "white" || $variant === "transparent") &&
+        css`
+            & > a,
+            & > button:not(${StyledHeaderBurger}),
+            & > nav > a,
+            & > nav > button {
+                color: ${({ theme }) =>
+                    Mixins.ColorsHoverDefault($linkColor, theme)};
+
+                @media ${MEDIA.HOVER} {
+                    &:hover {
+                        color: ${({ theme }) =>
+                            Mixins.ColorsHoverHover($linkColor, theme)};
+                    }
+
+                    &:active {
+                        color: ${({ theme }) =>
+                            Mixins.ColorsHoverActive($linkColor, theme)};
+                    }
+                }
+            }
+
+            & > ${Logo} {
+                color: ${({ theme }) =>
+                    Mixins.ColorsHoverDefault($linkColor, theme)};
+            }
+        `}
+    
+    ${({ $variant, theme, $backgroundColor, $textColor, $linkColor }) => {
+        switch ($variant) {
+            case "white":
+                return css`
+                    background-color: ${({ theme }) => theme.WHITE};
+                `
+            case "transparent":
+                return css`
+                    background-color: transparent;
+
+                    @media ${MEDIA.BREAKPOINT_MOBILE} {
+                        &.Open {
+                            background-color: ${theme.PRIMARY_500};
+
+                            & > a,
+                            & > button:not(${StyledHeaderBurger}),
+                            & > nav > a,
+                            & > nav > button {
+                                color: ${({ theme }) =>
+                                    Mixins.ColorsHoverDefault("white", theme)};
+
+                                @media ${MEDIA.HOVER} {
+                                    &:hover {
+                                        color: ${({ theme }) =>
+                                            Mixins.ColorsHoverHover(
+                                                "white",
+                                                theme
+                                            )};
+                                    }
+
+                                    &:active {
+                                        color: ${({ theme }) =>
+                                            Mixins.ColorsHoverActive(
+                                                "white",
+                                                theme
+                                            )};
+                                    }
+                                }
+                            }
+
+                            & > ${Logo} {
+                                color: ${({ theme }) =>
+                                    Mixins.ColorsHoverDefault("white", theme)};
+                            }
+                        }
+                    }
+                `
+            case "primary":
+                return css`
+                    background-color: ${Mixins.AllColors(
+                        $backgroundColor,
+                        theme
+                    )};
+                    color: ${Mixins.AllColors($textColor, theme)};
+
+                    & > a,
+                    & > button:not(${StyledHeaderBurger}),
+                    & > nav > a,
+                    & > nav > button,
+                    & > ${Logo} {
+                        color: ${Mixins.ColorsHoverDefault($linkColor, theme)};
+
+                        @media ${MEDIA.HOVER} {
+                            &:hover {
+                                color: ${({ theme }) =>
+                                    Mixins.ColorsHoverHover($linkColor, theme)};
+                            }
+
+                            &:active {
+                                color: ${({ theme }) =>
+                                    Mixins.ColorsHoverActive(
+                                        $linkColor,
+                                        theme
+                                    )};
+                            }
+                        }
+                    }
+                `
+        }
+    }}
+`
+
+const Nav = styled.nav<{
+    $navMobileVariant: LibNavMobileVariant | undefined
+    $burgerPosition: LibNavBurgerPosition | undefined
+    $variant: LibHeaderVariant | undefined
+    $headerHeight: number
+    $navHeight: number
+}>`
+    ${Mixins.Flexbox({
+        $alignItems: "center",
+        $gap: "s",
+    })};
+
+    ${({ $burgerPosition }) =>
+        $burgerPosition === "left" &&
+        css`
+            flex-grow: 1;
+        `}
+
+    @media ${MEDIA.BREAKPOINT_MOBILE} {
+        position: absolute;
+        background-color: ${({ theme, $variant }) =>
+            $variant === "white" ? theme.WHITE : theme.PRIMARY_500};
+        transition: ${TRANSITIONS.SHORT};
+        z-index: 997;
+
+        ${({ $navMobileVariant, $headerHeight, $navHeight }) => {
+            switch ($navMobileVariant) {
+                case "full":
+                    return css`
+                        width: 100vw;
+                        height: 100vh;
+                        top: 0;
+                        left: -100vw;
+                        flex-direction: column;
+                        justify-content: center;
+                        padding: ${SPACERS.L};
+
+                        & > a,
+                        & > button {
+                            font-size: ${FONT_SIZES.H5};
+                        }
+
+                        &.Open {
+                            left: 0;
+                        }
+                    `
+                case "drawer":
+                    return css`
+                        width: 70%;
+                        height: 100vh;
+                        top: 0;
+                        left: -100vw;
+                        flex-direction: column;
+                        justify-content: flex-start;
+                        align-items: flex-start;
+                        padding: calc(${$headerHeight}px + ${SPACERS.L}) 5vw
+                            ${SPACERS.S};
+
+                        &.Open {
+                            left: 0;
+                        }
+                    `
+                case "top":
+                    return css`
+                        top: calc(
+                            (${$navHeight}px + ${SPACERS.M} + ${SPACERS.M}) * -1
+                        );
+                        left: 0;
+                        padding: ${SPACERS.M} 5vw;
+                        width: 100%;
+                        flex-direction: column;
+                        align-items: flex-start;
+
+                        &.Open {
+                            top: ${$headerHeight}px;
+                        }
+                    `
+            }
+        }}
+    }
+`
+
+const Overlay = styled.span`
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: ${OVERLAYS.BLACK_80};
+    z-index: 995;
+    visibility: hidden;
+    opacity: 0;
+    transition: ${TRANSITIONS.SHORT};
+
+    &.Visible {
+        opacity: 1;
+        visibility: visible;
+    }
+`
+
+const SearchForm = styled.form<{ $maxWidth?: string | number }>`
+    width: 100%;
+    max-width: ${({ $maxWidth }) => $maxWidth && stringifyPx($maxWidth)};
+
+    @media ${MEDIA.BREAKPOINT_MOBILE} {
+        max-width: 100%;
+    }
+`
+
+setDefaultTheme([
+    LogoImg,
+    Logo,
+    StyledHeaderBurger,
+    StyledHeader,
+    Nav,
+    Overlay,
+    SearchForm,
+])
+
+export {
+    LogoImg,
+    Logo,
+    StyledHeaderBurger,
+    StyledHeader,
+    Nav,
+    Overlay,
+    SearchForm,
+}