@julseb-lib/react 0.0.61 → 0.0.64

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

@@ -0,0 +1,148 @@
+/*=============================================== 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

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

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

@@ -0,0 +1,24 @@
+/*=============================================== 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

@@ -0,0 +1,32 @@
+/*=============================================== 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

@@ -0,0 +1,45 @@
+/*=============================================== 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

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

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

@@ -0,0 +1,32 @@
+/*=============================================== 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

@@ -0,0 +1,9 @@
+/*=============================================== 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

@@ -0,0 +1,66 @@
+/*=============================================== 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

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

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

@@ -0,0 +1,31 @@
+/*=============================================== 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

@@ -0,0 +1,24 @@
+/*=============================================== 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

@@ -0,0 +1,212 @@
+/*=============================================== 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>
+        )
+    }
+)