@julseb-lib/react 0.0.50 → 0.0.52

package/dist/lib/components/Form/Form.tsx

@@ -1,148 +0,0 @@
-/*=============================================== Form component ===============================================*/
-
-import { forwardRef } from "react"
-import { Flexbox, Button } from "../../"
-import type { ILibButton } from "../Button/types"
-import { StyledForm } from "./styles"
-import type { ILibForm } from "./types"
-
-/**
- * @description Returns a Form component
- * @link https://documentation-components-react.vercel.app/components/form
- * @extends HTMLFormElement
- * @prop data-testid?: string
- * @prop ref?: ForwardedRef<HTMLFormElement>
- * @prop buttonPrimary?: string | { text: string; iconLeft?: string | JSX.Element; iconRight?: string | JSX.Element; iconLeftSize?: number; iconRightSize?: number }
- * @prop buttonSecondary?: { onClick?: void => only if to or href are not defined; disabled?: boolean => only if onClick is defined; to?: string => only if onClick and href are not defined; href?: string => only if onClick and to are not defined; text: string; iconLeft?: string | JSX.Element; iconRight?: string | JSX.Element; iconLeftSize?: number; iconRightSize?: number }
- * @prop isLoading?: boolean
- * @prop disabled?: boolean
- * @prop gap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
- * @prop maxWidth?: string | number
- */
-export const Form = forwardRef<HTMLFormElement, ILibForm>(
-    (
-        {
-            "data-testid": testid,
-            className,
-            children,
-            buttonPrimary,
-            buttonSecondary,
-            isLoading,
-            disabled,
-            gap = "s",
-            maxWidth = "100%",
-            ...rest
-        },
-        ref
-    ) => {
-        const buttonSecondaryProps: Pick<
-            ILibButton,
-            | "variant"
-            | "icons"
-            | "iconSizes"
-            | "children"
-            | "data-testid"
-            | "className"
-        > = {
-            variant: "transparent",
-            icons: {
-                left:
-                    typeof buttonSecondary === "object"
-                        ? buttonSecondary.iconLeft
-                        : undefined,
-                right:
-                    typeof buttonSecondary === "object"
-                        ? buttonSecondary.iconRight
-                        : undefined,
-            },
-            iconSizes: {
-                left:
-                    typeof buttonSecondary === "object"
-                        ? buttonSecondary.iconLeftSize
-                        : undefined,
-                right:
-                    typeof buttonSecondary === "object"
-                        ? buttonSecondary.iconRightSize
-                        : undefined,
-            },
-            children: buttonSecondary?.text,
-            "data-testid":
-                testid && `${testid}.ButtonsContainer.ButtonSecondary`,
-            className: className && "ButtonSecondary",
-        }
-
-        return (
-            <StyledForm
-                data-testid={testid}
-                ref={ref}
-                className={className}
-                $gap={gap}
-                $maxWidth={maxWidth}
-                {...rest}
-            >
-                {children}
-
-                {(buttonPrimary || buttonSecondary) && (
-                    <Flexbox
-                        gap="xxs"
-                        data-testid={testid && `${testid}.ButtonsContainer`}
-                        className={className && "ButtonsContainer"}
-                    >
-                        {buttonPrimary && (
-                            <Button
-                                data-testid={
-                                    testid &&
-                                    `${testid}.ButtonsContainer.ButtonSubmit`
-                                }
-                                className={className && "ButtonSubmit"}
-                                type="submit"
-                                isLoading={isLoading}
-                                disabled={disabled}
-                                icons={{
-                                    left:
-                                        typeof buttonPrimary === "object"
-                                            ? buttonPrimary.iconLeft
-                                            : undefined,
-                                    right:
-                                        typeof buttonPrimary === "object"
-                                            ? buttonPrimary.iconRight
-                                            : undefined,
-                                }}
-                                iconSizes={{
-                                    left:
-                                        typeof buttonPrimary === "object"
-                                            ? buttonPrimary.iconLeftSize
-                                            : undefined,
-                                    right:
-                                        typeof buttonPrimary === "object"
-                                            ? buttonPrimary.iconRightSize
-                                            : undefined,
-                                }}
-                            >
-                                {typeof buttonPrimary === "object"
-                                    ? buttonPrimary.text
-                                    : buttonPrimary}
-                            </Button>
-                        )}
-
-                        {buttonSecondary &&
-                            (buttonSecondary.onClick ? (
-                                <Button
-                                    type="button"
-                                    onClick={buttonSecondary.onClick}
-                                    {...(buttonSecondaryProps as any)}
-                                    {...buttonSecondary}
-                                />
-                            ) : (
-                                <Button
-                                    to={buttonSecondary.to}
-                                    {...(buttonSecondaryProps as any)}
-                                    {...buttonSecondary}
-                                />
-                            ))}
-                    </Flexbox>
-                )}
-            </StyledForm>
-        )
-    }
-)

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

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

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

@@ -1,24 +0,0 @@
-/*=============================================== Form styles ===============================================*/
-
-import styled from "styled-components"
-import { stringifyPx } from "@julseb-lib/utils"
-import { Mixins, setDefaultTheme } from "../../"
-import type { LibSpacers } from "../../types"
-
-const StyledForm = styled.form<{
-    $gap?: LibSpacers
-    $maxWidth: string | number
-}>`
-    max-width: ${({ $maxWidth }) => stringifyPx($maxWidth)};
-    width: 100%;
-    ${({ $gap }) =>
-        Mixins.Flexbox({
-            $flexDirection: "column",
-            $alignItems: "stretch",
-            $gap,
-        })}
-`
-
-setDefaultTheme([StyledForm])
-
-export { StyledForm }

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

@@ -1,32 +0,0 @@
-/*=============================================== Form types ===============================================*/
-
-import type {
-    LibButtonLinkRequired,
-    LibComponentBase,
-    LibIcon,
-    LibSpacers,
-} from "../../types"
-
-export interface ILibForm
-    extends Exclude<LibComponentBase<HTMLFormElement>, "as"> {
-    buttonPrimary?:
-        | string
-        | {
-              text: string
-              iconLeft?: LibIcon
-              iconRight?: LibIcon
-              iconLeftSize?: number
-              iconRightSize?: number
-          }
-    buttonSecondary?: LibButtonLinkRequired & {
-        text: string
-        iconLeft?: LibIcon
-        iconRight?: LibIcon
-        iconLeftSize?: number
-        iconRightSize?: number
-    }
-    isLoading?: boolean
-    disabled?: boolean
-    gap?: LibSpacers
-    maxWidth?: string | number
-}

package/dist/lib/components/FullBleed/FullBleed.tsx

@@ -1,45 +0,0 @@
-/*=============================================== FullBleed component ===============================================*/
-
-import { forwardRef } from "react"
-import { StyledFullBleed } from "./styles"
-import type { ILibFullBleed } from "./types"
-
-/**
- * @description Returns a FullBleed component
- * @link https://documentation-components-react.vercel.app/components/full-bleed
- * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop height?: number | string
- * @prop aspectRatio?: string
- * @prop padding?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" | { left?: LibSpacers | "auto"; top?: LibSpacers | "auto"; right?: LibSpacers | "auto"; bottom?: LibSpacers | "auto"; leftRight?: LibSpacers | "auto"; topBottom?: LibSpacers | "auto" }
- */
-export const FullBleed = forwardRef<HTMLDivElement, ILibFullBleed>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            children,
-            height,
-            aspectRatio,
-            padding,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledFullBleed
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                $height={height}
-                $aspectRatio={aspectRatio}
-                $padding={padding}
-                {...rest}
-            >
-                {children}
-            </StyledFullBleed>
-        )
-    }
-)

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

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

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

@@ -1,32 +0,0 @@
-/*=============================================== FullBleed styles ===============================================*/
-
-import styled, { css } from "styled-components"
-import { stringifyPx } from "@julseb-lib/utils"
-import { Mixins, setDefaultTheme } from "../../"
-import type { ILibPadding } from "../../types"
-
-const StyledFullBleed = styled.div<{
-    $height?: number | string
-    $aspectRatio?: string
-    $padding?: ILibPadding
-}>`
-    width: 100%;
-    grid-column: 1/4;
-    aspect-ratio: ${({ $aspectRatio }) => $aspectRatio};
-    ${({ $padding }) => Mixins.Padding($padding)}
-
-    ${({ $height }) =>
-        $height &&
-        css`
-            height: ${stringifyPx($height)};
-
-            & > img,
-            & > figure {
-                height: 100%;
-            }
-        `}
-`
-
-setDefaultTheme([StyledFullBleed])
-
-export { StyledFullBleed }

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

@@ -1,9 +0,0 @@
-/*=============================================== FullBleed types ===============================================*/
-
-import type { LibComponentBase, ILibPadding } from "../../types"
-
-export interface ILibFullBleed extends LibComponentBase<HTMLDivElement> {
-    height?: number | string
-    aspectRatio?: string
-    padding?: ILibPadding
-}

package/dist/lib/components/Grid/Grid.tsx

@@ -1,66 +0,0 @@
-/*=============================================== Grid component ===============================================*/
-
-import { forwardRef } from "react"
-import { StyledGrid } from "./styles"
-import type { ILibGrid } from "./types"
-
-/**
- * @description Returns a Grid component
- * @link https://documentation-components-react.vercel.app/layouts/grid
- * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop inline?: boolean
- * @prop col?: number | string
- * @prop gap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
- * @prop columnGap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
- * @prop rowGap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
- * @prop justifyItems?: CssJustifyItems
- * @prop alignItems?: CssAlignItems
- * @prop justifyContent?: CssJustifyContent
- * @prop alignContent?: CssAlignContent
- * @prop padding?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" | { left?: LibSpacers | "auto"; top?: LibSpacers | "auto"; right?: LibSpacers | "auto"; bottom?: LibSpacers | "auto"; leftRight?: LibSpacers | "auto"; topBottom?: LibSpacers | "auto" }
- */
-export const Grid = forwardRef<HTMLDivElement, ILibGrid>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            children,
-            inline,
-            col,
-            gap,
-            columnGap,
-            rowGap,
-            justifyItems,
-            alignItems,
-            justifyContent,
-            alignContent,
-            padding,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledGrid
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                $inline={inline}
-                $col={col}
-                $gap={gap}
-                $columnGap={columnGap}
-                $rowGap={rowGap}
-                $justifyItems={justifyItems}
-                $alignItems={alignItems}
-                $justifyContent={justifyContent}
-                $alignContent={alignContent}
-                $padding={padding}
-                {...rest}
-            >
-                {children}
-            </StyledGrid>
-        )
-    }
-)

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

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

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

@@ -1,31 +0,0 @@
-/*=============================================== Grid styles ===============================================*/
-
-import styled from "styled-components"
-import { setDefaultTheme, Mixins } from "../../"
-import type {
-    CssAlignContent,
-    CssAlignItems,
-    CssJustifyContent,
-    CssJustifyItems,
-    ILibPadding,
-    LibSpacers,
-} from "../../types"
-
-const StyledGrid = styled.div<{
-    $inline?: boolean
-    $col?: number | string
-    $gap?: LibSpacers
-    $columnGap?: LibSpacers
-    $rowGap?: LibSpacers
-    $justifyItems?: CssJustifyItems
-    $alignItems?: CssAlignItems
-    $justifyContent?: CssJustifyContent
-    $alignContent?: CssAlignContent
-    $padding?: ILibPadding
-}>`
-    ${Mixins.Grid}
-`
-
-setDefaultTheme([StyledGrid])
-
-export { StyledGrid }

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

@@ -1,24 +0,0 @@
-/*=============================================== Grid types ===============================================*/
-
-import type {
-    CssAlignContent,
-    CssAlignItems,
-    CssJustifyContent,
-    CssJustifyItems,
-    LibComponentBase,
-    LibSpacers,
-    ILibPadding,
-} from "../../types"
-
-export interface ILibGrid extends LibComponentBase<HTMLDivElement> {
-    inline?: boolean
-    col?: number | string
-    gap?: LibSpacers
-    columnGap?: LibSpacers
-    rowGap?: LibSpacers
-    justifyItems?: CssJustifyItems
-    alignItems?: CssAlignItems
-    justifyContent?: CssJustifyContent
-    alignContent?: CssAlignContent
-    padding?: ILibPadding
-}

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

@@ -1,212 +0,0 @@
-/*=============================================== Header component ===============================================*/
-
-import { forwardRef, useState, useEffect, useRef, type RefObject } from "react"
-import classNames from "classnames"
-import { enableScroll, disableScroll } from "@julseb-lib/utils"
-import { useMaxWidth, useKeyPress } from "../../"
-import { HeaderBurger } from "./HeaderBurger"
-import { HeaderSearch } from "./HeaderSearch"
-import { HeaderNav } from "./HeaderNav"
-import { HeaderLogo } from "./HeaderLogo"
-import { StyledHeader, Overlay } from "./styles"
-import type { ILibHeader } from "./types"
-import type {
-    ILibHeaderNav,
-    ILibHeaderBurger,
-    ILibHeaderSearch,
-} from "./subtypes"
-
-/**
- * @description Returns a Header component
- * @link https://documentation-components-react.vercel.app/components/header
- * @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"
- */
-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)
-        }
-
-        const handleClose = () => {
-            if (!enableScrollingOpen) enableScroll()
-            setTimeout(() => setIsOpen(false), 10)
-        }
-
-        const isMobile = useMaxWidth(600)
-
-        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 headerHeight = valueForHeight + 16 * 2
-
-        const [isHidden, setIsHidden] = useState(false)
-        const hidePosition =
-            typeof hideOnScroll === "boolean" ? 400 : hideOnScroll
-
-        useEffect(() => {
-            if (hidePosition) {
-                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,
-        }
-
-        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,
-        }
-
-        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}
-                    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>
-        )
-    }
-)