@julseb-lib/react 0.0.84 → 0.0.86

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

@@ -1,5 +1,3 @@
-/*=============================================== PageLoading styles ===============================================*/
-
 import styled from "styled-components"
 import { setDefaultTheme, Mixins } from "../../"
 import type { LibAllColors } from "../../types"

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

@@ -1,5 +1,3 @@
-/*=============================================== PageLoading types ===============================================*/
-
 import type {
     LibComponentBase,
     LibAllColors,

package/dist/lib/components/Pagination/Pagination.tsx

@@ -1,6 +1,4 @@
-/*=============================================== Pagination component ===============================================*/
-
-import { forwardRef, useCallback, useState } from "react"
+import { useCallback, useState, type FC } from "react"
 import { useSearchParams } from "react-router-dom"
 import classNames from "classnames"
 import { usePagination, useMaxWidth, Flexbox } from "../../"
@@ -11,255 +9,254 @@ import { ChevronLeft, ChevronRight } from "../../icons"
 import type { ILibPagination } from "./types"
 
 /**
- * @description Returns a Pagination component
- * @link https://documentation-components-react.vercel.app/components/pagination
+ * Pagination component for rendering a pagination control with page numbers, previous/next buttons, and flexible icon and layout options.
+ *
+ * @component
  * @extends ILibFlexbox
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop totalPages: number => only if children is not defined
- * @prop pageLimit?: number => only if children is not defined
- * @prop icons?: { previous?: string | JSX.Element; next?: string | JSX.Element } => only if children is not defined
- * @prop iconSizes?: { previous?: number; next?: number } => only if children is not defined
- * @prop iconBaseUrl?: string => only if children is not defined
- * @prop children?: ReactChildren => only if totalPages is not defined
- * @prop accentColor?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"
- * @prop queries?: Array<Array<string>>
- * @prop inline?: boolean
- * @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 - Pagination 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 {number} [props.totalPages] - Total number of pages (used if children is not defined).
+ * @param {number} [props.pageLimit=5] - Maximum number of page buttons to display at once (used if children is not defined).
+ * @param {{ previous?: string | JSX.Element; next?: string | JSX.Element }} [props.icons] - Custom icons for previous/next buttons (used if children is not defined).
+ * @param {{ previous?: number; next?: number }} [props.iconSizes] - Icon sizes for previous/next buttons (used if children is not defined).
+ * @param {string} [props.iconBaseUrl] - Base URL for icons (used if children is not defined).
+ * @param {ReactNode} [props.children] - Custom pagination content (used if totalPages is not defined).
+ * @param {"primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"} [props.accentColor="primary"] - Accent color for active page and buttons.
+ * @param {Array<Array<string>>} [props.queries] - Query parameters for pagination.
+ * @param {boolean} [props.inline] - Display pagination inline.
+ * @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 pagination container.
+ * @param {any} [props.rest] - Additional props passed to the root element.
+ * @returns {JSX.Element|null} The rendered Pagination component, or null if totalPages is 1 or less.
+ *
+ * @see https://documentation-components-react.vercel.app/components/pagination
+ * @example
+ * <Pagination totalPages={10} pageLimit={5} />
  */
-export const Pagination = forwardRef<HTMLDivElement, ILibPagination>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            children,
-            className,
-            accentColor = "primary",
-            queries,
-            totalPages,
-            pageLimit = 5,
-            icons,
-            iconSizes,
-            iconBaseUrl,
-            justifyContent = "center",
-            gap,
-            ...rest
-        },
-        ref
-    ) => {
-        const [searchParams] = useSearchParams()
-        const currentPage = Number(searchParams.get("page")) || 1
+export const Pagination: FC<ILibPagination> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    className,
+    accentColor = "primary",
+    queries,
+    totalPages,
+    pageLimit = 5,
+    icons,
+    iconSizes,
+    iconBaseUrl,
+    justifyContent = "center",
+    gap,
+    ...rest
+}) => {
+    const [searchParams] = useSearchParams()
+    const currentPage = Number(searchParams.get("page")) || 1
 
-        const [page, setPage] = useState(currentPage)
+    const [page, setPage] = useState(currentPage)
 
-        const { handlePrev, handleNext, handlePage } = usePagination({
-            currentPage: page,
-            setCurrentPage: setPage,
-            queries,
-        })
+    const { handlePrev, handleNext, handlePage } = usePagination({
+        currentPage: page,
+        setCurrentPage: setPage,
+        queries,
+    })
 
-        const getPaginationGroup = useCallback(() => {
-            const start = Math.floor((currentPage - 1) / pageLimit) * pageLimit
+    const getPaginationGroup = useCallback(() => {
+        const start = Math.floor((currentPage - 1) / pageLimit) * pageLimit
 
-            return new Array(pageLimit)
-                .fill(totalPages)
-                .map((_, i) => start + i + 1)
-                .filter(item => item <= (totalPages || 0))
-        }, [currentPage, pageLimit, totalPages])
-        const paginationGroup = getPaginationGroup()
+        return new Array(pageLimit)
+            .fill(totalPages)
+            .map((_, i) => start + i + 1)
+            .filter(item => item <= (totalPages || 0))
+    }, [currentPage, pageLimit, totalPages])
+    const paginationGroup = getPaginationGroup()
 
-        const isMobile = useMaxWidth(600)
-        const defaultGap = gap || isMobile ? "xxs" : "xs"
+    const isMobile = useMaxWidth(600)
+    const defaultGap = gap || isMobile ? "xxs" : "xs"
 
-        if (totalPages && totalPages <= 1) return null
+    if (totalPages && totalPages <= 1) return null
 
-        return (
-            <Flexbox
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                justifyContent={justifyContent}
-                gap={defaultGap}
-                className={className}
-                {...rest}
-            >
-                {totalPages ? (
-                    <>
-                        <PaginationButton
+    return (
+        <Flexbox
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            justifyContent={justifyContent}
+            gap={defaultGap}
+            className={className}
+            {...rest}
+        >
+            {totalPages ? (
+                <>
+                    <PaginationButton
+                        data-testid={
+                            testid && `${testid}.PaginationButton.Previous`
+                        }
+                        className={className && "ButtonPrevious"}
+                        onClick={handlePrev}
+                        isActive={false}
+                        disabled={page === 1}
+                        accentColor={accentColor}
+                    >
+                        <LibIcon
                             data-testid={
-                                testid && `${testid}.PaginationButton.Previous`
+                                testid &&
+                                `${testid}.PaginationButton.Previous.Icon`
                             }
-                            className={className && "ButtonPrevious"}
-                            onClick={handlePrev}
-                            isActive={false}
-                            disabled={page === 1}
-                            accentColor={accentColor}
-                        >
-                            <LibIcon
-                                data-testid={
-                                    testid &&
-                                    `${testid}.PaginationButton.Previous.Icon`
-                                }
-                                className={className && "IconPrevious"}
-                                size={roundIconSize(iconSizes?.previous || 32)}
-                                icon={
-                                    icons?.previous || (
-                                        <ChevronLeft
-                                            data-testid={
-                                                testid &&
-                                                `${testid}.PaginationButton.Previous.Icon`
-                                            }
-                                            className={
-                                                className && "IconPrevious"
-                                            }
-                                            size={roundIconSize(
-                                                iconSizes?.previous || 32
-                                            )}
-                                        />
-                                    )
-                                }
-                                baseUrl={iconBaseUrl}
-                            />
-                        </PaginationButton>
-
-                        {paginationGroup[0] !== 1 && (
-                            <>
-                                <PaginationButton
-                                    data-testid={
-                                        testid &&
-                                        `${testid}.PaginationButton.Number${
-                                            page === 1 ? ".Active" : ""
-                                        }`
-                                    }
-                                    className={
-                                        className &&
-                                        classNames(`Number`, {
-                                            Active: page === 1,
-                                        })
-                                    }
-                                    isActive={page === 1}
-                                    onClick={() => handlePage(1)}
-                                    accentColor={accentColor}
-                                >
-                                    1
-                                </PaginationButton>
-
-                                <PaginationButton
-                                    data-testid={
-                                        testid &&
-                                        `${testid}.PaginationButton.More`
-                                    }
-                                    className={className && "More"}
-                                    accentColor={accentColor}
-                                    readOnly
-                                >
-                                    ...
-                                </PaginationButton>
-                            </>
-                        )}
+                            className={className && "IconPrevious"}
+                            size={roundIconSize(iconSizes?.previous || 32)}
+                            icon={
+                                icons?.previous || (
+                                    <ChevronLeft
+                                        data-testid={
+                                            testid &&
+                                            `${testid}.PaginationButton.Previous.Icon`
+                                        }
+                                        className={className && "IconPrevious"}
+                                        size={roundIconSize(
+                                            iconSizes?.previous || 32
+                                        )}
+                                    />
+                                )
+                            }
+                            baseUrl={iconBaseUrl}
+                        />
+                    </PaginationButton>
 
-                        {paginationGroup.map(n => (
+                    {paginationGroup[0] !== 1 && (
+                        <>
                             <PaginationButton
                                 data-testid={
                                     testid &&
                                     `${testid}.PaginationButton.Number${
-                                        page === n ? ".Active" : ""
+                                        page === 1 ? ".Active" : ""
                                     }`
                                 }
                                 className={
                                     className &&
-                                    classNames("Number", { Active: page === n })
+                                    classNames(`Number`, {
+                                        Active: page === 1,
+                                    })
                                 }
-                                isActive={n === page}
-                                onClick={() => handlePage(n)}
+                                isActive={page === 1}
+                                onClick={() => handlePage(1)}
                                 accentColor={accentColor}
-                                key={n}
                             >
-                                {n}
+                                1
                             </PaginationButton>
-                        ))}
-
-                        {paginationGroup[paginationGroup.length - 1] !==
-                            totalPages && (
-                            <>
-                                <PaginationButton
-                                    data-testid={
-                                        testid &&
-                                        `${testid}.PaginationButton.More`
-                                    }
-                                    className={className && "More"}
-                                    accentColor={accentColor}
-                                    readOnly
-                                >
-                                    ...
-                                </PaginationButton>
 
-                                <PaginationButton
-                                    data-testid={
-                                        testid &&
-                                        `${testid}.PaginationButton.Number${
-                                            page === totalPages ? ".Active" : ""
-                                        }`
-                                    }
-                                    className={className && "Number"}
-                                    isActive={page === totalPages}
-                                    onClick={() => handlePage(totalPages)}
-                                    accentColor={accentColor}
-                                >
-                                    {totalPages}
-                                </PaginationButton>
-                            </>
-                        )}
+                            <PaginationButton
+                                data-testid={
+                                    testid && `${testid}.PaginationButton.More`
+                                }
+                                className={className && "More"}
+                                accentColor={accentColor}
+                                readOnly
+                            >
+                                ...
+                            </PaginationButton>
+                        </>
+                    )}
 
+                    {paginationGroup.map(n => (
                         <PaginationButton
                             data-testid={
-                                testid && `${testid}.PaginationButton.Next`
+                                testid &&
+                                `${testid}.PaginationButton.Number${
+                                    page === n ? ".Active" : ""
+                                }`
                             }
-                            className={className && "ButtonNext"}
-                            onClick={handleNext}
-                            isActive={false}
-                            disabled={page === totalPages}
+                            className={
+                                className &&
+                                classNames("Number", { Active: page === n })
+                            }
+                            isActive={n === page}
+                            onClick={() => handlePage(n)}
                             accentColor={accentColor}
+                            key={n}
                         >
-                            <LibIcon
+                            {n}
+                        </PaginationButton>
+                    ))}
+
+                    {paginationGroup[paginationGroup.length - 1] !==
+                        totalPages && (
+                        <>
+                            <PaginationButton
                                 data-testid={
-                                    testid &&
-                                    `${testid}.PaginationButton.Next.Icon`
+                                    testid && `${testid}.PaginationButton.More`
                                 }
-                                className={className && "IconNext"}
-                                size={roundIconSize(iconSizes?.next || 32)}
-                                icon={
-                                    icons?.next || (
-                                        <ChevronRight
-                                            data-testid={
-                                                testid &&
-                                                `${testid}.PaginationButton.Next.Icon`
-                                            }
-                                            className={className && "IconNext"}
-                                            size={roundIconSize(
-                                                iconSizes?.next || 32
-                                            )}
-                                        />
-                                    )
+                                className={className && "More"}
+                                accentColor={accentColor}
+                                readOnly
+                            >
+                                ...
+                            </PaginationButton>
+
+                            <PaginationButton
+                                data-testid={
+                                    testid &&
+                                    `${testid}.PaginationButton.Number${
+                                        page === totalPages ? ".Active" : ""
+                                    }`
                                 }
-                                baseUrl={iconBaseUrl}
-                            />
-                        </PaginationButton>
-                    </>
-                ) : (
-                    children
-                )}
-            </Flexbox>
-        )
-    }
-)
+                                className={className && "Number"}
+                                isActive={page === totalPages}
+                                onClick={() => handlePage(totalPages)}
+                                accentColor={accentColor}
+                            >
+                                {totalPages}
+                            </PaginationButton>
+                        </>
+                    )}
+
+                    <PaginationButton
+                        data-testid={
+                            testid && `${testid}.PaginationButton.Next`
+                        }
+                        className={className && "ButtonNext"}
+                        onClick={handleNext}
+                        isActive={false}
+                        disabled={page === totalPages}
+                        accentColor={accentColor}
+                    >
+                        <LibIcon
+                            data-testid={
+                                testid && `${testid}.PaginationButton.Next.Icon`
+                            }
+                            className={className && "IconNext"}
+                            size={roundIconSize(iconSizes?.next || 32)}
+                            icon={
+                                icons?.next || (
+                                    <ChevronRight
+                                        data-testid={
+                                            testid &&
+                                            `${testid}.PaginationButton.Next.Icon`
+                                        }
+                                        className={className && "IconNext"}
+                                        size={roundIconSize(
+                                            iconSizes?.next || 32
+                                        )}
+                                    />
+                                )
+                            }
+                            baseUrl={iconBaseUrl}
+                        />
+                    </PaginationButton>
+                </>
+            ) : (
+                children
+            )}
+        </Flexbox>
+    )
+}

package/dist/lib/components/Pagination/PaginationButton.tsx

@@ -1,51 +1,52 @@
-/*=============================================== PaginationButton component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import classNames from "classnames"
 import { StyledPaginationButton } from "./styles"
 import type { ILibPaginationButton } from "./types"
 
 /**
- * @description Returns a PaginationButton component
- * @link https://documentation-components-react.vercel.app/components/pagination
+ * PaginationButton component for rendering a styled button used in pagination controls.
+ *
+ * @component
  * @extends HTMLButtonElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLButtonElement>
- * @prop isActive: boolean => only if readOnly is not defined
- * @prop readOnly: boolean => only if isActive is not defined
- * @prop accentColor?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"
+ * @param {Object} props - PaginationButton props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {ElementType} [props.as] - Custom element type to render as.
+ * @param {Ref<HTMLButtonElement>} [props.ref] - Ref forwarded to the button element.
+ * @param {boolean} [props.isActive] - Whether the button is active (only if readOnly is not defined).
+ * @param {boolean} [props.readOnly] - Whether the button is read-only (only if isActive is not defined).
+ * @param {"primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"} [props.accentColor] - Accent color for the button.
+ * @param {string} [props.className] - Additional class names.
+ * @param {ReactNode} [props.children] - Button content.
+ * @param {any} [props.rest] - Additional props passed to the button element.
+ * @returns {JSX.Element} The rendered PaginationButton component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/pagination
+ * @example
+ * <PaginationButton isActive accentColor="primary">1</PaginationButton>
  */
-export const PaginationButton = forwardRef<
-    HTMLButtonElement,
-    ILibPaginationButton
->(
-    (
-        {
-            "data-testid": testid,
-            as,
-            className,
-            isActive,
-            children,
-            accentColor,
-            readOnly,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledPaginationButton
-                data-testid={testid}
-                as={as}
-                ref={ref}
-                className={classNames(className, { Active: isActive })}
-                type="button"
-                $accentColor={accentColor}
-                $readOnly={readOnly}
-                {...rest}
-            >
-                {children}
-            </StyledPaginationButton>
-        )
-    }
-)
+export const PaginationButton: FC<ILibPaginationButton> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    className,
+    isActive,
+    children,
+    accentColor,
+    readOnly,
+    ...rest
+}) => {
+    return (
+        <StyledPaginationButton
+            data-testid={testid}
+            as={as}
+            ref={ref}
+            className={classNames(className, { Active: isActive })}
+            type="button"
+            $accentColor={accentColor}
+            $readOnly={readOnly}
+            {...rest}
+        >
+            {children}
+        </StyledPaginationButton>
+    )
+}

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

@@ -1,4 +1,2 @@
-/*=============================================== Pagination exports ===============================================*/
-
 export * from "./Pagination"
 export * from "./PaginationButton"

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

@@ -1,5 +1,3 @@
-/*=============================================== Pagination styles ===============================================*/
-
 import styled, { css } from "styled-components"
 import { setDefaultTheme, MEDIA, Mixins, RADIUSES, TRANSITIONS } from "../../"
 import type { LibColorsHover } from "../../types"

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

@@ -1,5 +1,3 @@
-/*=============================================== Pagination types ===============================================*/
-
 import type { ButtonHTMLAttributes } from "react"
 import type {
     LibColorsHover,
@@ -9,8 +7,6 @@ import type {
 } from "../../types"
 import type { ILibFlexbox } from "../Flexbox/types"
 
-/*====================== Pagination ======================*/
-
 interface ILibPaginationBase extends ILibFlexbox {
     accentColor?: LibColorsHover
     queries?: Array<Array<string>>
@@ -38,8 +34,6 @@ export type ILibPagination =
     | ILibPaginationWithItems
     | ILibPaginationWithChildren
 
-/*====================== PaginationButton ======================*/
-
 interface ILibPaginationButtonBase
     extends LibComponentBase<HTMLButtonElement>,
         ButtonHTMLAttributes<HTMLButtonElement> {