@julseb-lib/react 0.0.63 → 0.0.65

package/dist/lib/components/Modal/Modal.tsx

@@ -0,0 +1,127 @@
+/*=============================================== Modal component ===============================================*/
+
+import { forwardRef, useCallback, useRef } from "react"
+import classNames from "classnames"
+import { enableScroll, getRandomString, stringifyPx } from "@julseb-lib/utils"
+import { useKeyPress, useClickOutside } from "../../"
+import { roundIconSize, appendStyles } from "../../lib-utils"
+import { Close } from "../../icons"
+import { StyledModal, ButtonClose, ModalContent } from "./styles"
+import type { ILibModal } from "./types"
+
+const BUTTON_SIZE = 48
+const BUTTON_LABEL = "Close modal"
+
+/**
+ * @description Returns a Modal component
+ * @link https://documentation-components-react.vercel.app/components/modal
+ * @extends ILibFlexbox
+ * @prop data-testid?: string
+ * @prop as?: ElementType
+ * @prop ref?: ForwardedRef<HTMLDivElement>
+ * @prop isOpen: boolean
+ * @prop setIsOpen: Dispatch<SetStateAction<boolean>>
+ * @prop disableEsc?: boolean
+ * @prop contentWidth?: string | number
+ * @prop contentId?: string
+ * @prop hideCloseButton?: boolean
+ * @prop buttonClose?: { icon?: string | JSX.Element; color?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"; size?: number; variant?: "plain" | "ghost" | "transparent"; label?: string } => only if hideCloseButton is not set to true
+ * @prop flexDirection?: CssFlexDirection
+ * @prop flexWrap?: CssFlexWrap
+ * @prop justifyContent?: CssJustifyContent
+ * @prop alignItems?: CssAlignItems
+ * @prop justifyItems?: CssJustifyItems
+ * @prop alignContent?: CssAlignContent
+ * @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 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 Modal = forwardRef<HTMLDivElement, ILibModal>(
+    (
+        {
+            "data-testid": testid,
+            as,
+            children,
+            className,
+            isOpen,
+            setIsOpen,
+            disableEsc,
+            buttonClose,
+            hideCloseButton,
+            contentWidth,
+            contentId,
+            ...rest
+        },
+        ref
+    ) => {
+        const handleClose = useCallback(() => {
+            setIsOpen(false)
+            enableScroll()
+        }, [setIsOpen])
+
+        useKeyPress(
+            ["Escape"],
+            useCallback(() => {
+                if (isOpen && !disableEsc) handleClose()
+            }, [disableEsc, handleClose, isOpen])
+        )
+
+        const el = useRef<HTMLDivElement>(null)
+
+        useClickOutside(el, () => handleClose())
+
+        const randomClass = getRandomString(10, true)
+        const withClass = className?.split(" ")[0] || randomClass
+
+        appendStyles(`
+            ${contentId ? `#${contentId}` : `.${withClass}`} {
+                --modal-content-width: ${stringifyPx(contentWidth || "90%")};
+            }
+        `)
+
+        return (
+            <StyledModal
+                data-testid={testid}
+                ref={ref}
+                as={as}
+                className={classNames(className, randomClass, {
+                    Open: isOpen,
+                })}
+                {...rest}
+            >
+                <ModalContent
+                    data-testid={testid && `${testid}.ModalContent`}
+                    className={className && "ModalContent"}
+                    ref={el}
+                    id={contentId}
+                >
+                    {children}
+                </ModalContent>
+
+                {!hideCloseButton && (
+                    <ButtonClose
+                        data-testid={testid && `${testid}.ButtonClose`}
+                        className={className && "ButtonClose"}
+                        aria-label={buttonClose?.label || BUTTON_LABEL}
+                        icon={
+                            buttonClose?.icon || (
+                                <Close
+                                    size={roundIconSize(BUTTON_SIZE)}
+                                    data-testid={
+                                        testid && `${testid}.ButtonClose.Icon`
+                                    }
+                                    className={className && "ButtonCloseIcon"}
+                                />
+                            )
+                        }
+                        size={buttonClose?.size || BUTTON_SIZE}
+                        color={buttonClose?.color || "white"}
+                        variant={buttonClose?.variant || "transparent"}
+                        onClick={handleClose}
+                    />
+                )}
+            </StyledModal>
+        )
+    }
+)

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

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

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

@@ -0,0 +1,62 @@
+/*=============================================== Modal styles ===============================================*/
+
+import styled from "styled-components"
+import {
+    Flexbox,
+    Mixins,
+    OVERLAYS,
+    SPACERS,
+    setDefaultTheme,
+    ButtonIcon,
+    TRANSITIONS,
+} from "../../"
+
+const StyledModal = styled(Flexbox)`
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 999;
+    width: 100%;
+    height: 100vh;
+    background-color: ${OVERLAYS.BLACK_80};
+    transition: ${TRANSITIONS.SHORT};
+    opacity: 0;
+    visibility: hidden;
+    ${Mixins.Flexbox({
+        $alignItems: "center",
+        $justifyContent: "center",
+    })}
+
+    &.Open {
+        opacity: 1;
+        visibility: visible;
+    }
+`
+
+const ButtonClose = styled(ButtonIcon)`
+    position: absolute;
+    z-index: 2;
+    top: ${SPACERS.S};
+    right: ${SPACERS.S};
+`
+
+const ModalContent = styled.div`
+    width: var(--modal-content-width, 90%);
+    max-width: 90%;
+    max-height: 90%;
+    position: relative;
+    z-index: 1;
+    padding: ${SPACERS.XXL};
+    ${Mixins.Flexbox({
+        $alignItems: "center",
+        $justifyContent: "center",
+    })}
+
+    & > * {
+        max-height: 90vh;
+    }
+`
+
+setDefaultTheme([StyledModal, ButtonClose, ModalContent])
+
+export { StyledModal, ButtonClose, ModalContent }

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

@@ -0,0 +1,38 @@
+/*=============================================== Modal types ===============================================*/
+
+import type {
+    LibButtonVariant,
+    LibColorsHover,
+    LibComponentBase,
+    LibIcon,
+    DispatchState,
+} from "../../types"
+import type { ILibFlexbox } from "../Flexbox/types"
+
+interface ILibModalBase
+    extends LibComponentBase<HTMLDivElement>,
+        Omit<ILibFlexbox, "inline"> {
+    isOpen: boolean
+    setIsOpen: DispatchState<boolean>
+    disableEsc?: boolean
+    contentWidth?: string | number
+    contentId?: string
+}
+
+interface ModalWithCloseButton extends ILibModalBase {
+    hideCloseButton?: false | undefined
+    buttonClose?: {
+        icon?: LibIcon
+        color?: LibColorsHover
+        size?: number
+        variant?: Exclude<LibButtonVariant, "outline">
+        label?: string
+    }
+}
+
+interface ModalWithoutCloseButton extends ILibModalBase {
+    hideCloseButton?: true
+    buttonClose?: never
+}
+
+export type ILibModal = ModalWithCloseButton | ModalWithoutCloseButton

package/dist/lib/components/PageLayout/PageLayout.tsx

@@ -0,0 +1,80 @@
+/*=============================================== PageLayout component ===============================================*/
+
+import { Helmet, Header, Wrapper, Main, Footer, PageLoading } from "../../"
+import type { ILibPageLayout } from "./types"
+
+/**
+ * @description Returns a PageLayout component
+ * @link https://documentation-components-react.vercel.app/components/page-layout
+ * @prop data-testid?: string
+ * @prop isLoading?: boolean
+ * @prop titleLoading?: string
+ * @prop pageLoading?: ILibPageLoading => imported from PageLoading component
+ * @prop helmet?: ILibHelmet => imported from Helmet component
+ * @prop header?: ILibHeader & { nav?: JSX.Element } => imported from Header component
+ * @prop footer?: ILibFooter => imported from Footer component
+ * @prop wrapper?: ILibWrapper => imported from Wrapper component, only if noWrapper is not set to true
+ * @prop noWrapper?: false
+ * @prop template?: "single" | "multi"
+ * @prop main?: ILibMain => imported from Main component, only if template is set to single
+ * @prop mainMinHeight?: string | number => only if template is set to single
+ */
+export const PageLayout = ({
+    children,
+    isLoading,
+    pageLoading,
+    titleLoading,
+    helmet,
+    header,
+    footer,
+    noWrapper,
+    wrapper,
+    template = "single",
+    main,
+    mainMinHeight = "85vh",
+}: ILibPageLayout) => {
+    return (
+        <>
+            {helmet && (
+                <Helmet
+                    {...helmet}
+                    title={
+                        isLoading && titleLoading ? titleLoading : helmet.title
+                    }
+                />
+            )}
+
+            {isLoading ? (
+                <PageLoading {...pageLoading} />
+            ) : (
+                <>
+                    {header && (
+                        <Header {...(header as any)}>
+                            {header?.nav && header?.nav}
+                        </Header>
+                    )}
+
+                    {!noWrapper ? (
+                        <Wrapper className="wrapper" {...wrapper}>
+                            {template === "single" ? (
+                                <Main
+                                    className="main"
+                                    minHeight={mainMinHeight}
+                                    {...(main as any)}
+                                >
+                                    {children}
+                                </Main>
+                            ) : (
+                                children
+                            )}
+                        </Wrapper>
+                    ) : (
+                        children
+                    )}
+
+                    {footer && <Footer {...(footer as any)} />}
+                </>
+            )}
+        </>
+    )
+}

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

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

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

@@ -0,0 +1,47 @@
+/*=============================================== PageLayout types ===============================================*/
+
+import type { ReactChildren, LibPageLayoutTemplate } from "../../types"
+import type { ILibHelmet } from "../Helmet/types"
+import type { ILibHeader } from "../Header/types"
+import type { ILibWrapper } from "../Wrapper/types"
+import type { ILibMain } from "../Main/types"
+import type { ILibPageLoading } from "../PageLoading/types"
+import type { ILibFooter } from "../Footer/types"
+
+interface ILibPageLayoutBase {
+    children?: ReactChildren
+    isLoading?: boolean
+    pageLoading?: ILibPageLoading
+    titleLoading?: string
+    helmet?: Omit<ILibHelmet, "children">
+    header?: Omit<ILibHeader, "children"> & { nav?: JSX.Element }
+    footer?: Omit<ILibFooter, "children">
+}
+
+interface PageLayoutWithWrapper extends ILibPageLayoutBase {
+    noWrapper?: false | undefined
+    wrapper?: Omit<ILibWrapper, "children">
+}
+
+interface PageLayoutWitouthWrapper extends ILibPageLayoutBase {
+    noWrapper?: true
+    wrapper?: never
+}
+
+type ILibPageLayoutWrapper = PageLayoutWithWrapper | PageLayoutWitouthWrapper
+
+type PageLayoutWithSingleTemplate = ILibPageLayoutWrapper & {
+    template?: Extract<LibPageLayoutTemplate, "single">
+    main?: Omit<ILibMain, "children">
+    mainMinHeight?: string | number
+}
+
+type PageLayoutWithMultiTemplate = ILibPageLayoutWrapper & {
+    template?: Extract<LibPageLayoutTemplate, "multi">
+    main?: never
+    mainMinHeight?: never
+}
+
+export type ILibPageLayout =
+    | PageLayoutWithSingleTemplate
+    | PageLayoutWithMultiTemplate

package/dist/lib/components/PageLoading/PageLoading.tsx

@@ -0,0 +1,64 @@
+/*=============================================== PageLoading component ===============================================*/
+
+import { forwardRef, useEffect } from "react"
+import { disableScroll } from "@julseb-lib/utils"
+import { Loader } from "../../"
+import { StyledPageLoading } from "./styles"
+import type { ILibPageLoading } from "./types"
+
+/**
+ * @description Returns a PageLoading component
+ * @link https://documentation-components-react.vercel.app/components/page-loading
+ * @extends HTMLDivElement
+ * @prop data-testid?: string
+ * @prop as?: ElementType
+ * @prop ref?: ForwardedRef<HTMLDivElement>
+ * @prop backgroundColor?: Any color from the library
+ * @prop loaderColor?: Any color from the library
+ * @prop loaderVariant?: 1 | 2 | 3 | 4
+ * @prop stopScrolling?: boolean
+ */
+export const PageLoading = forwardRef<HTMLDivElement, ILibPageLoading>(
+    (
+        {
+            "data-testid": testid,
+            as,
+            className,
+            backgroundColor = "primary",
+            loaderColor = "white",
+            loaderVariant = 1,
+            stopScrolling,
+            ...rest
+        },
+        ref
+    ) => {
+        useEffect(() => {
+            if (stopScrolling) disableScroll()
+        }, [stopScrolling])
+
+        const loaderProps = {
+            "data-testid": testid && `${testid}.Loader`,
+            size: 64,
+            color: loaderColor
+                ? loaderColor
+                : backgroundColor === "white"
+                ? "primary"
+                : "background",
+            className: className && "Loader",
+            variant: loaderVariant,
+        }
+
+        return (
+            <StyledPageLoading
+                data-testid={testid}
+                ref={ref}
+                as={as}
+                className={className}
+                $backgroundColor={backgroundColor}
+                {...rest}
+            >
+                <Loader {...(loaderProps as any)} />
+            </StyledPageLoading>
+        )
+    }
+)

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

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

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

@@ -0,0 +1,24 @@
+/*=============================================== PageLoading styles ===============================================*/
+
+import styled from "styled-components"
+import { setDefaultTheme, Mixins } from "../../"
+import type { LibAllColors } from "../../types"
+
+const StyledPageLoading = styled.div<{ $backgroundColor: LibAllColors }>`
+    position: fixed;
+    width: 100%;
+    height: 100vh;
+    top: 0;
+    left: 0;
+    z-index: 999;
+    background-color: ${({ $backgroundColor, theme }) =>
+        Mixins.AllColors($backgroundColor, theme)};
+    ${Mixins.Flexbox({
+        $alignItems: "center",
+        $justifyContent: "center",
+    })}
+`
+
+setDefaultTheme([StyledPageLoading])
+
+export { StyledPageLoading }

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

@@ -0,0 +1,15 @@
+/*=============================================== PageLoading types ===============================================*/
+
+import type {
+    LibComponentBase,
+    LibAllColors,
+    LibLoaderVariant,
+} from "../../types"
+
+export interface ILibPageLoading extends LibComponentBase<HTMLDivElement> {
+    backgroundColor?: LibAllColors
+    loaderColor?: LibAllColors
+    loaderVariant?: LibLoaderVariant
+    stopScrolling?: boolean
+    children?: never
+}