@julseb-lib/react 0.1.3 → 0.1.5

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

@@ -1,31 +0,0 @@
-// @ts-nocheck
-
-import { isValidElement, type FC } from "react"
-import { Link } from "../../"
-import type { ILibHeaderNavLink } from "./subtypes"
-
-export const HeaderNavLink: FC<ILibHeaderNavLink> = ({
-    "data-testid": testid,
-    link,
-    className,
-}) => {
-    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

@@ -1,81 +0,0 @@
-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: FC<ILibHeaderSearch> = ({
-    "data-testid": testid,
-    className,
-    search,
-    handleClose,
-}) => {
-    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/styles.tsx

@@ -1,350 +0,0 @@
-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,
-}

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

@@ -1,79 +0,0 @@
-import type { FC, ReactElement, 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
-
-export interface ILibHeaderNav
-	extends Pick<
-		ILibHeader,
-		| "data-testid"
-		| "className"
-		| "search"
-		| "children"
-		| "links"
-		| "variant"
-		| "navMobileVariant"
-		| "burgerPosition"
-		| "nav"
-		| "role"
-	> {
-	burgerRef: Ref<HTMLButtonElement>
-	isOpen: boolean
-	headerHeight: number
-	handleClose: () => void
-}
-
-export interface ILibHeaderBurger
-	extends Pick<
-		ILibHeader,
-		| "data-testid"
-		| "className"
-		| "navMobileVariant"
-		| "variant"
-		| "burgerColor"
-	> {
-	isOpen: boolean
-	handleOpen: () => void
-	handleClose: () => void
-	ref?: Ref<HTMLButtonElement>
-}
-
-export interface ILibHeaderLogo
-	extends Pick<
-		ILibHeader,
-		"data-testid" | "className" | "logo" | "children"
-	> {
-	isOpen: boolean
-}
-
-export interface ILibHeaderNavLink {
-	"data-testid": string | undefined
-	className: string | undefined
-	link: LibHeaderLink | ReactElement | FC
-}
-
-export interface ILibHeaderSearch
-	extends Pick<ILibHeader, "data-testid" | "className" | "search"> {
-	handleClose: () => void
-}
-
-type HeaderLogoWithText = LibLink & {
-	text: string
-	img?: never
-	imgOpen?: never
-	alt?: never
-	width?: never
-	height?: never
-}
-
-type HeaderLogoWithImg = LibLink & {
-	text?: never
-	img: string
-	imgOpen?: string
-	alt?: string
-	width?: number
-	height?: number
-}
-
-export type LibHeaderLogo = string | HeaderLogoWithText | HeaderLogoWithImg

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

@@ -1,89 +0,0 @@
-import type {
-    LibComponentBase,
-    LibHeaderPosition,
-    LibIcon,
-    LibInputBackground,
-    LibInputVariant,
-    LibNavBurgerPosition,
-    LibNavMobileVariant,
-    LibHeaderLink,
-    ReactChildren,
-    LibHeaderVariant,
-    LibColorsHover,
-    LibAllColors,
-} from "../../types"
-import type { LibHeaderLogo } from "./subtypes"
-
-interface ILibHeaderBase extends LibComponentBase<HTMLDivElement> {
-    logo: LibHeaderLogo
-    burgerPosition?: LibNavBurgerPosition
-    burgerColor?:
-        | LibColorsHover
-        | { closed: LibColorsHover; open: LibColorsHover }
-    navDesktopVariant?: LibNavBurgerPosition
-    navMobileVariant?: LibNavMobileVariant
-    enableScrollingOpen?: boolean
-    search?: {
-        pathname: string
-        queries?: Array<Array<string>>
-        iconLeft?: LibIcon
-        iconLeftSize?: number
-        iconClear?: LibIcon
-        iconClearSize?: number
-        iconBaseUrl?: string
-        placeholder?: string
-        keyboardShortcut?: Array<string>
-        showKeys?: boolean
-        inputBackground?: LibInputBackground
-        maxWidth?: string | number
-        inputVariant?: LibInputVariant
-    }
-}
-
-interface HeaderNotFixed extends ILibHeaderBase {
-    position?: Exclude<LibHeaderPosition, "fixed">
-    hideOnScroll?: never
-}
-
-interface HeaderFixed extends ILibHeaderBase {
-    position?: Extract<LibHeaderPosition, "fixed">
-    hideOnScroll?: boolean | number
-}
-
-type HeaderPosition = HeaderNotFixed | HeaderFixed
-
-type HeaderWithLinks = HeaderPosition & {
-    links: Array<LibHeaderLink | JSX.Element>
-    nav?: never
-    children?: never
-}
-
-type HeaderWithNav = HeaderPosition & {
-    links?: never
-    nav?: ReactChildren
-    children?: never
-}
-
-type HeaderWithChildren = HeaderPosition & {
-    links?: never
-    nav?: never
-    children?: ReactChildren
-}
-
-type LibHeaderChildren = HeaderWithLinks | HeaderWithNav | HeaderWithChildren
-
-type HeaderWithBackground = LibHeaderChildren & {
-    variant?: Extract<LibHeaderVariant, "primary">
-    backgroundColor?: LibAllColors
-    textColor?: LibAllColors
-    linkColor?: LibColorsHover
-}
-
-type HeaderWithoutBackground = LibHeaderChildren & {
-    variant?: Exclude<LibHeaderVariant, "primary">
-    backgroundColor?: never
-    textColor?: never
-    linkColor?: never
-}
-
-export type ILibHeader = HeaderWithBackground | HeaderWithoutBackground

package/dist/lib/components/Highlight/Highlight.tsx

@@ -1,47 +0,0 @@
-import type { FC } from "react"
-import { Text } from "../../"
-import { getHighlightedText } from "../../lib-utils"
-import type { ILibHighlight } from "./types"
-
-/**
- * Highlight component for emphasizing selected text within its children.
- *
- * @component
- * @extends ILibText
- * @param {Object} props - Highlight props.
- * @param {ForwardedRef<HTMLHeadingElement & HTMLParagraphElement & HTMLQuoteElement & HTMLUListElement & HTMLOListElement & HTMLDListElement>} [props.ref] - Ref forwarded to the root element.
- * @param {string} props.highlightedText - Text to highlight within the children.
- * @param {CSSProperties} [props.highlightStyle] - Custom style for the highlighted text.
- * @param {string} [props.color] - Any color from the library.
- * @param {"primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"} [props.linkColor] - Link color for highlighted text.
- * @param {CssTextAlign} [props.textAlign] - Text alignment.
- * @param {"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "strong" | "em" | "small" | "blockquote" | "ul" | "ol" | "dl"} [props.tag] - HTML tag to render as.
- * @param {boolean} [props.display] - Display property (only if tag is set to h1 to h5).
- * @param {string} [props.className] - Additional class names.
- * @param {ReactNode} [props.children] - Text content to search and highlight.
- * @returns {JSX.Element} The rendered Highlight component.
- *
- * @example
- * <Highlight highlightedText="React" highlightStyle={{ background: "yellow" }}>
- *   React makes it painless to create interactive UIs.
- * </Highlight>
- */
-export const Highlight: FC<ILibHighlight> = ({
-    ref,
-    children = "",
-    highlightedText,
-    className,
-    highlightStyle,
-    ...rest
-}) => {
-    return (
-        <Text ref={ref} className={className} {...rest}>
-            {getHighlightedText(
-                children,
-                highlightedText,
-                className,
-                highlightStyle
-            )}
-        </Text>
-    )
-}

package/dist/lib/components/Highlight/types.ts

@@ -1,9 +0,0 @@
-import type { CSSProperties } from "react"
-import type { ReactChildren } from "../../types"
-import type { ILibText } from "../Text/types"
-
-export type ILibHighlight = ILibText & {
-    children?: ReactChildren
-    highlightedText: string
-    highlightStyle?: CSSProperties
-}