@julseb-lib/react 0.0.63 → 0.0.65

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

@@ -0,0 +1,265 @@
+/*=============================================== Pagination component ===============================================*/
+
+import { forwardRef, useCallback, useState } from "react"
+import { useSearchParams } from "react-router-dom"
+import classNames from "classnames"
+import { usePagination, useMaxWidth, Flexbox } from "../../"
+import { roundIconSize } from "../../lib-utils"
+import { PaginationButton } from "./PaginationButton"
+import { LibIcon } from "../LibIcon"
+import { ChevronLeft, ChevronRight } from "../../icons"
+import type { ILibPagination } from "./types"
+
+/**
+ * @description Returns a Pagination component
+ * @link https://documentation-components-react.vercel.app/components/pagination
+ * @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" }
+ */
+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
+
+        const [page, setPage] = useState(currentPage)
+
+        const { handlePrev, handleNext, handlePage } = usePagination({
+            currentPage: page,
+            setCurrentPage: setPage,
+            queries,
+        })
+
+        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()
+
+        const isMobile = useMaxWidth(600)
+        const defaultGap = gap || isMobile ? "xxs" : "xs"
+
+        if (totalPages && totalPages <= 1) return null
+
+        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.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>
+                            </>
+                        )}
+
+                        {paginationGroup.map(n => (
+                            <PaginationButton
+                                data-testid={
+                                    testid &&
+                                    `${testid}.PaginationButton.Number${
+                                        page === n ? ".Active" : ""
+                                    }`
+                                }
+                                className={
+                                    className &&
+                                    classNames("Number", { Active: page === n })
+                                }
+                                isActive={n === page}
+                                onClick={() => handlePage(n)}
+                                accentColor={accentColor}
+                                key={n}
+                            >
+                                {n}
+                            </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.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

@@ -0,0 +1,51 @@
+/*=============================================== PaginationButton component ===============================================*/
+
+import { forwardRef } 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
+ * @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"
+ */
+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>
+        )
+    }
+)

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

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

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

@@ -0,0 +1,72 @@
+/*=============================================== Pagination styles ===============================================*/
+
+import styled, { css } from "styled-components"
+import { setDefaultTheme, MEDIA, Mixins, RADIUSES, TRANSITIONS } from "../../"
+import type { LibColorsHover } from "../../types"
+
+const BUTTON_SIZE = 32
+
+const StyledPaginationButton = styled.button<{
+    $readOnly?: boolean
+    $accentColor: LibColorsHover
+}>`
+    width: ${BUTTON_SIZE}px;
+    height: ${BUTTON_SIZE}px;
+    padding: 0;
+    border-radius: ${RADIUSES.CIRCLE};
+    border: none;
+    background-color: transparent;
+    color: ${({ theme, $accentColor }) =>
+        Mixins.ColorsHoverDefault($accentColor, theme)};
+    transition: ${TRANSITIONS.SHORT};
+    ${Mixins.Flexbox({
+        $alignItems: "center",
+        $justifyContent: "center",
+        $inline: true,
+    })}
+
+    &:disabled {
+        color: ${({ theme }) => theme.GRAY_500};
+    }
+
+    &.Active {
+        background-color: ${({ theme, $accentColor }) =>
+            Mixins.ColorsHoverDefault($accentColor, theme)};
+        color: ${({ theme }) => theme.BACKGROUND};
+    }
+
+    ${({ $readOnly, theme, $accentColor }) => {
+        switch ($readOnly) {
+            case true:
+                return css`
+                    cursor: default;
+                `
+            case false:
+            case undefined:
+                return css`
+                    @media ${MEDIA.HOVER} {
+                        &:not(:disabled):hover {
+                            background-color: ${Mixins.ColorsHoverHover(
+                                $accentColor,
+                                theme
+                            )};
+                            color: ${({ theme }) => theme.BACKGROUND};
+                        }
+
+                        &:not(:disabled):active {
+                            background-color: ${Mixins.ColorsHoverActive(
+                                $accentColor,
+                                theme
+                            )};
+                        }
+                    }
+                `
+            default:
+                return null
+        }
+    }}
+`
+
+setDefaultTheme([StyledPaginationButton])
+
+export { StyledPaginationButton }

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

@@ -0,0 +1,61 @@
+/*=============================================== Pagination types ===============================================*/
+
+import type { ButtonHTMLAttributes } from "react"
+import type {
+    LibColorsHover,
+    LibComponentBase,
+    LibIcon,
+    ReactChildren,
+} from "../../types"
+import type { ILibFlexbox } from "../Flexbox/types"
+
+/*====================== Pagination ======================*/
+
+interface ILibPaginationBase extends ILibFlexbox {
+    accentColor?: LibColorsHover
+    queries?: Array<Array<string>>
+}
+
+interface ILibPaginationWithItems extends ILibPaginationBase {
+    totalPages: number
+    pageLimit?: number
+    icons?: { previous?: LibIcon; next?: LibIcon }
+    iconSizes?: { previous?: number; next?: number }
+    iconBaseUrl?: string
+    children?: never
+}
+
+interface ILibPaginationWithChildren extends ILibPaginationBase {
+    totalPages?: never
+    pageLimit?: never
+    icons?: never
+    iconSizes?: never
+    iconBaseUrl?: never
+    children?: ReactChildren
+}
+
+export type ILibPagination =
+    | ILibPaginationWithItems
+    | ILibPaginationWithChildren
+
+/*====================== PaginationButton ======================*/
+
+interface ILibPaginationButtonBase
+    extends LibComponentBase<HTMLButtonElement>,
+        ButtonHTMLAttributes<HTMLButtonElement> {
+    accentColor?: LibColorsHover
+}
+
+interface PaginationButtonActive extends ILibPaginationButtonBase {
+    isActive: boolean
+    readOnly?: never
+}
+
+interface PaginationButtonReadOnly extends ILibPaginationButtonBase {
+    isActive?: never
+    readOnly: boolean
+}
+
+export type ILibPaginationButton =
+    | PaginationButtonActive
+    | PaginationButtonReadOnly

package/dist/lib/components/Paginator/Paginator.tsx

@@ -0,0 +1,162 @@
+/*=============================================== Paginator component ===============================================*/
+
+import { forwardRef, useCallback, useState, type ChangeEvent } from "react"
+import { useSearchParams } from "react-router-dom"
+import { Text, ButtonIcon, usePagination, Flexbox } from "../../"
+import { roundIconSize } from "../../lib-utils"
+import { ChevronLeft, ChevronRight } from "../../icons"
+import { TextContainer, StyledInput } from "./styles"
+import type { ILibPaginator } from "./types"
+
+const DEFAULT_ICON_SIZE = 32
+
+/**
+ * @description Returns a Paginator component
+ * @link https://documentation-components-react.vercel.app/components/paginator
+ * @extends ILibFlexbox
+ * @prop data-testid?: string
+ * @prop as?: ElementType
+ * @prop ref?: ForwardedRef<HTMLDivElement>
+ * @prop totalPages: number
+ * @prop accentColor?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"
+ * @prop inputNotEditable?: boolean
+ * @prop texts?: { page?: string; of?: string }
+ * @prop icons?: { prev?: string | JSX.Element; next?: string | JSX.Element }
+ * @prop iconSizes?: { prev?: number; next?: number }
+ * @prop iconsBaseUrl?: string
+ * @prop labels?: { prev?: string; next?: string; show?: boolean }
+ * @prop queries?: Array<Array<string>>
+ */
+export const Paginator = forwardRef<HTMLDivElement, ILibPaginator>(
+    (
+        {
+            "data-testid": testid,
+            as,
+            className,
+            totalPages,
+            inputNotEditable,
+            texts = { page: "Page", of: "of" },
+            iconSizes = {
+                prev: roundIconSize(DEFAULT_ICON_SIZE),
+                next: roundIconSize(DEFAULT_ICON_SIZE),
+            },
+            icons,
+            iconsBaseUrl,
+            labels = { prev: "Previous", next: "Next" },
+            queries,
+            gap = "xs",
+            alignItems = "center",
+            accentColor = "primary",
+            ...rest
+        },
+        ref
+    ) => {
+        const [searchParams] = useSearchParams()
+        const page = Number(searchParams.get("page")) || 1
+
+        const [currentPage, setCurrentPage] = useState(page)
+
+        const { handlePrev, handleNext, handlePage } = usePagination({
+            currentPage,
+            setCurrentPage,
+            queries,
+            totalPages,
+        })
+
+        const handleChange = useCallback(
+            (e: ChangeEvent<HTMLInputElement>) =>
+                handlePage(Number(e.target.value)),
+            [handlePage]
+        )
+
+        return (
+            <Flexbox
+                data-testid={testid}
+                ref={ref}
+                as={as}
+                className={className}
+                gap={gap}
+                alignItems={alignItems}
+                {...rest}
+            >
+                {!inputNotEditable ? (
+                    <TextContainer
+                        data-testid={testid && `${testid}.Text`}
+                        className={className && "Text"}
+                    >
+                        {texts?.page}
+                        <StyledInput
+                            data-testid={testid && `${testid}.Text.Input`}
+                            className={className && "Input"}
+                            type="number"
+                            value={currentPage}
+                            onChange={handleChange}
+                            $accentColor={accentColor}
+                        />
+                        {texts?.of} {totalPages}
+                    </TextContainer>
+                ) : (
+                    <Text
+                        data-testid={testid && `${testid}.Text`}
+                        className={className && "Text"}
+                        as="span"
+                    >
+                        {texts?.page} {currentPage} {texts?.of} {totalPages}
+                    </Text>
+                )}
+
+                <ButtonIcon
+                    data-testid={testid && `${testid}.Button.Prev`}
+                    className={className && "ButtonPrev"}
+                    icon={
+                        icons?.prev || (
+                            <ChevronLeft
+                                data-testid={
+                                    testid && `${testid}.Button.Prev.Icon`
+                                }
+                                className={className && "IconPrev"}
+                                size={iconSizes.prev}
+                            />
+                        )
+                    }
+                    iconSize={iconSizes?.prev}
+                    size={32}
+                    variant="transparent"
+                    onClick={handlePrev}
+                    disabled={currentPage === 1}
+                    showTooltip={labels?.show}
+                    tooltip={labels?.prev}
+                    aria-label={labels?.prev}
+                    color={accentColor}
+                    iconBaseUrl={iconsBaseUrl}
+                />
+
+                <ButtonIcon
+                    data-testid={testid && `${testid}.Button.Next`}
+                    className={className && "ButtonNext"}
+                    icon={
+                        icons?.next || (
+                            <ChevronRight
+                                data-testid={
+                                    testid && `${testid}.Button.Next.Icon`
+                                }
+                                className={className && "IconNext"}
+                                size={iconSizes.next}
+                            />
+                        )
+                    }
+                    iconSize={iconSizes?.next}
+                    size={32}
+                    variant="transparent"
+                    onClick={handleNext}
+                    disabled={currentPage === totalPages}
+                    showTooltip={labels?.show}
+                    tooltip={labels?.next}
+                    aria-label={labels?.next}
+                    color={accentColor}
+                    iconBaseUrl={iconsBaseUrl}
+                />
+            </Flexbox>
+        )
+    }
+)

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

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

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

@@ -0,0 +1,36 @@
+/*=============================================== Paginator styles ===============================================*/
+
+import type { FC } from "react"
+import styled from "styled-components"
+import { setDefaultTheme, Input, Mixins } from "../../"
+import type { LibColorsHover } from "../../types"
+
+const TextContainer = styled.span`
+    ${Mixins.Flexbox({
+        $alignItems: "center",
+        $justifyContent: "flex-start",
+        $gap: "xs",
+    })}
+`
+
+const StyledInput = styled(Input)<{ $accentColor: LibColorsHover }>`
+    width: 48px;
+    -moz-appearance: textfield;
+    appearance: textfield;
+
+    &:has(input:focus) {
+        border-color: ${({ theme, $accentColor }) =>
+            Mixins.ColorsHoverDefault($accentColor, theme)};
+    }
+
+    input {
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+        }
+    }
+` as FC<any>
+
+setDefaultTheme([TextContainer, StyledInput])
+
+export { TextContainer, StyledInput }

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

@@ -0,0 +1,16 @@
+/*=============================================== Paginator types ===============================================*/
+
+import type { LibColorsHover, LibIcon } from "../../types"
+import type { ILibFlexbox } from "../Flexbox/types"
+
+export interface ILibPaginator extends ILibFlexbox {
+    totalPages: number
+    accentColor?: LibColorsHover
+    inputNotEditable?: boolean
+    texts?: { page?: string; of?: string }
+    icons?: { prev?: LibIcon; next?: LibIcon }
+    iconSizes?: { prev?: number; next?: number }
+    iconsBaseUrl?: string
+    labels?: { prev?: string; next?: string; show?: boolean }
+    queries?: Array<Array<string>>
+}