@julseb-lib/react 0.0.84 → 0.0.86

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

@@ -0,0 +1,3 @@
+
+
+export * from "./Meta"

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

@@ -0,0 +1,14 @@
+import type { ReactChildren } from "../../types"
+
+export interface ILibMeta {
+	title: string
+	favicon?: string
+	description?: string
+	keywords?: Array<string>
+	author?: string
+	type?: string
+	cover?: string
+	siteName?: string
+	language?: string
+	children?: ReactChildren
+}

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

@@ -1,6 +1,4 @@
-/*=============================================== Modal component ===============================================*/
-
-import { forwardRef, useCallback, useRef } from "react"
+import { useCallback, useRef, type FC } from "react"
 import classNames from "classnames"
 import { enableScroll, getRandomString, stringifyPx } from "@julseb-lib/utils"
 import { useKeyPress, useClickOutside } from "../../"
@@ -13,115 +11,124 @@ const BUTTON_SIZE = 48
 const BUTTON_LABEL = "Close modal"
 
 /**
- * @description Returns a Modal component
- * @link https://documentation-components-react.vercel.app/components/modal
+ * Modal component for displaying content in a dialog overlay with flexible close options, width, and layout.
+ *
+ * @component
  * @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" }
+ * @param {Object} props - Modal props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {ElementType} [props.as] - Custom element type to render as.
+ * @param {Ref<HTMLDivElement>} [props.ref] - Ref forwarded to the root element.
+ * @param {ReactNode} [props.children] - Modal content.
+ * @param {string} [props.className] - Additional class names.
+ * @param {boolean} props.isOpen - Whether the modal is open.
+ * @param {Dispatch<React.SetStateAction<boolean>>} props.setIsOpen - Setter for modal open state.
+ * @param {boolean} [props.disableEsc] - Disable closing the modal with the Escape key.
+ * @param {string|number} [props.contentWidth] - Width of the modal content.
+ * @param {string} [props.contentId] - ID for the modal content container.
+ * @param {boolean} [props.hideCloseButton] - Hide the close button.
+ * @param {{ icon?: string | JSX.Element; color?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"; size?: number; variant?: "plain" | "ghost" | "transparent"; label?: string }} [props.buttonClose] - Customization for the close button (only if hideCloseButton is not set to true).
+ * @param {CssFlexDirection} [props.flexDirection] - Flex direction.
+ * @param {CssFlexWrap} [props.flexWrap] - Flex wrap.
+ * @param {CssJustifyContent} [props.justifyContent] - Justify content.
+ * @param {CssAlignItems} [props.alignItems] - Align items.
+ * @param {CssJustifyItems} [props.justifyItems] - Justify items.
+ * @param {CssAlignContent} [props.alignContent] - Align content.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.gap] - Gap between elements.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.columnGap] - Column gap.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.rowGap] - Row gap.
+ * @param {"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" }} [props.padding] - Padding for the modal container.
+ * @param {any} [props.rest] - Additional props passed to the root element.
+ * @returns {JSX.Element} The rendered Modal component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/modal
+ * @example
+ * <Modal isOpen={isOpen} setIsOpen={setIsOpen}>
+ *   <h2>Modal title</h2>
+ *   <p>Modal content goes here.</p>
+ * </Modal>
  */
-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])
+export const Modal: FC<ILibModal> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    className,
+    isOpen,
+    setIsOpen,
+    disableEsc,
+    buttonClose,
+    hideCloseButton,
+    contentWidth,
+    contentId,
+    ...rest
+}) => {
+    const handleClose = useCallback(() => {
+        setIsOpen(false)
+        enableScroll()
+    }, [setIsOpen])
 
-        useKeyPress(
-            ["Escape"],
-            useCallback(() => {
-                if (isOpen && !disableEsc) handleClose()
-            }, [disableEsc, handleClose, isOpen])
-        )
+    useKeyPress(
+        ["Escape"],
+        useCallback(() => {
+            if (isOpen && !disableEsc) handleClose()
+        }, [disableEsc, handleClose, isOpen])
+    )
 
-        const el = useRef<HTMLDivElement>(null)
+    const el = useRef<HTMLDivElement>(null)
 
-        useClickOutside(el, () => handleClose())
+    useClickOutside(el, () => handleClose())
 
-        const randomClass = getRandomString(10, true)
-        const withClass = className?.split(" ")[0] || randomClass
+    const randomClass = getRandomString(10, true)
+    const withClass = className?.split(" ")[0] || randomClass
 
-        appendStyles(`
+    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}
+    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}
             >
-                <ModalContent
-                    data-testid={testid && `${testid}.ModalContent`}
-                    className={className && "ModalContent"}
-                    ref={el}
-                    id={contentId}
-                >
-                    {children}
-                </ModalContent>
+                {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>
-        )
-    }
-)
+            {!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 +1 @@
-/*=============================================== Modal exports ===============================================*/
-
 export * from "./Modal"

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

@@ -1,5 +1,3 @@
-/*=============================================== Modal styles ===============================================*/
-
 import styled from "styled-components"
 import {
     Flexbox,

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

@@ -1,5 +1,3 @@
-/*=============================================== Modal types ===============================================*/
-
 import type {
     LibButtonVariant,
     LibColorsHover,

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

@@ -1,80 +1,96 @@
-/*=============================================== PageLayout component ===============================================*/
-
-import { Helmet, Header, Wrapper, Main, Footer, PageLoading } from "../../"
+import type { FC } from "react"
+import { Meta, 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
+ * PageLayout component for rendering a full page layout with optional header, footer, wrapper, main content, and loading state.
+ *
+ * @component
+ * @extends React.FC
+ * @param {Object} props - PageLayout props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {boolean} [props.isLoading] - Whether the page is in a loading state.
+ * @param {string} [props.titleLoading] - Title to display in the Helmet while loading.
+ * @param {ILibPageLoading} [props.pageLoading] - Props for the PageLoading component.
+ * @param {ILibHelmet} [props.helmet] - Props for the Helmet component.
+ * @param {ILibHeader & { nav?: JSX.Element }} [props.header] - Props for the Header component, with optional navigation.
+ * @param {ILibFooter} [props.footer] - Props for the Footer component.
+ * @param {ILibWrapper} [props.wrapper] - Props for the Wrapper component (only if noWrapper is not set to true).
+ * @param {boolean} [props.noWrapper] - If true, disables the Wrapper component.
+ * @param {"single" | "multi"} [props.template="single"] - Layout template type.
+ * @param {ILibMain} [props.main] - Props for the Main component (only if template is "single").
+ * @param {string|number} [props.mainMinHeight="85vh"] - Minimum height for the Main component (only if template is "single").
+ * @param {ReactNode} [props.children] - Page content.
+ * @returns {JSX.Element} The rendered PageLayout component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/page-layout
+ * @example
+ * <PageLayout
+ *   isLoading={loading}
+ *   helmet={{ title: "My Page" }}
+ *   header={{ title: "Header" }}
+ *   footer={{ copyright: "© 2025" }}
+ * >
+ *   <h1>Welcome</h1>
+ *   <p>This is the main content.</p>
+ * </PageLayout>
  */
-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
-                    }
-                />
-            )}
+export const PageLayout: FC<ILibPageLayout> = ({
+	children,
+	isLoading,
+	pageLoading,
+	titleLoading,
+	meta: helmet,
+	header,
+	footer,
+	noWrapper,
+	wrapper,
+	template = "single",
+	main,
+	mainMinHeight = "85vh",
+}) => {
+	return (
+		<>
+			{helmet && (
+				<Meta
+					{...helmet}
+					title={
+						isLoading && titleLoading ? titleLoading : helmet.title
+					}
+				/>
+			)}
 
-            {isLoading ? (
-                <PageLoading {...pageLoading} />
-            ) : (
-                <>
-                    {header && (
-                        <Header {...(header as any)}>
-                            {header?.nav && header?.nav}
-                        </Header>
-                    )}
+			{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
-                    )}
+					{!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)} />}
-                </>
-            )}
-        </>
-    )
+					{footer && <Footer {...(footer as any)} />}
+				</>
+			)}
+		</>
+	)
 }

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

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

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

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

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

@@ -1,64 +1,67 @@
-/*=============================================== PageLoading component ===============================================*/
-
-import { forwardRef, useEffect } from "react"
+import { useEffect, type FC } 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
+ * PageLoading component for displaying a fullscreen loading spinner with customizable background, loader color, and variant.
+ *
+ * @component
  * @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
+ * @param {Object} props - PageLoading props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {ElementType} [props.as] - Custom element type to render as.
+ * @param {Ref<HTMLDivElement>} [props.ref] - Ref forwarded to the root element.
+ * @param {string} [props.backgroundColor="primary"] - Background color for the loading overlay.
+ * @param {string} [props.loaderColor="white"] - Color for the loader spinner.
+ * @param {1 | 2 | 3 | 4} [props.loaderVariant=1] - Loader visual variant.
+ * @param {boolean} [props.stopScrolling] - Disable page scrolling while loading.
+ * @param {string} [props.className] - Additional class names.
+ * @param {any} [props.rest] - Additional props passed to the root element.
+ * @returns {JSX.Element} The rendered PageLoading component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/page-loading
+ * @example
+ * <PageLoading backgroundColor="gray" loaderColor="primary" loaderVariant={2} stopScrolling />
  */
-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,
-        }
+export const PageLoading: FC<ILibPageLoading> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    className,
+    backgroundColor = "primary",
+    loaderColor = "white",
+    loaderVariant = 1,
+    stopScrolling,
+    ...rest
+}) => {
+    useEffect(() => {
+        if (stopScrolling) disableScroll()
+    }, [stopScrolling])
 
-        return (
-            <StyledPageLoading
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                className={className}
-                $backgroundColor={backgroundColor}
-                {...rest}
-            >
-                <Loader {...(loaderProps as any)} />
-            </StyledPageLoading>
-        )
+    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 +1 @@
-/*=============================================== PageLoading exports ===============================================*/
-
 export * from "./PageLoading"