@julseb-lib/react 0.0.50 → 0.0.52

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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