@julseb-lib/react 0.0.85 → 0.0.87

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

@@ -1,6 +1,4 @@
-/*=============================================== Paginator component ===============================================*/
-
-import { forwardRef, useCallback, useState, type ChangeEvent } from "react"
+import { useCallback, useState, type ChangeEvent, type FC } from "react"
 import { useSearchParams } from "react-router-dom"
 import { Text, ButtonIcon, usePagination, Flexbox } from "../../"
 import { roundIconSize } from "../../lib-utils"
@@ -11,154 +9,161 @@ import type { ILibPaginator } from "./types"
 const DEFAULT_ICON_SIZE = 32
 
 /**
- * @description Returns a Paginator component
- * @link https://documentation-components-react.vercel.app/components/paginator
+ * Paginator component for rendering a pagination control with input, previous/next buttons, and flexible icon, label, and layout options.
+ *
+ * @component
  * @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>>
+ * @param {Object} props - Paginator 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.className] - Additional class names.
+ * @param {number} props.totalPages - Total number of pages.
+ * @param {boolean} [props.inputNotEditable] - If true, disables editing the page input.
+ * @param {{ page?: string; of?: string }} [props.texts] - Texts for "page" and "of" labels.
+ * @param {{ prev?: string | JSX.Element; next?: string | JSX.Element }} [props.icons] - Custom icons for previous/next buttons.
+ * @param {{ prev?: number; next?: number }} [props.iconSizes] - Icon sizes for previous/next buttons.
+ * @param {string} [props.iconsBaseUrl] - Base URL for icons.
+ * @param {{ prev?: string; next?: string; show?: boolean }} [props.labels] - Labels and tooltip options for previous/next buttons.
+ * @param {Array<Array<string>>} [props.queries] - Query parameters for pagination.
+ * @param {"primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"} [props.accentColor="primary"] - Accent color for active page and buttons.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.gap="xs"] - Gap between elements.
+ * @param {CssAlignItems} [props.alignItems="center"] - Align items property for Flexbox.
+ * @param {any} [props.rest] - Additional props passed to the root element.
+ * @returns {JSX.Element|null} The rendered Paginator component, or null if totalPages is 1 or less.
+ *
+ * @see https://documentation-components-react.vercel.app/components/paginator
+ * @example
+ * <Paginator
+ *   totalPages={10}
+ *   texts={{ page: "Page", of: "of" }}
+ *   labels={{ prev: "Previous", next: "Next", show: true }}
+ * />
  */
-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
+export const Paginator: FC<ILibPaginator> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    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
+}) => {
+    const [searchParams] = useSearchParams()
+    const page = Number(searchParams.get("page")) || 1
 
-        const [currentPage, setCurrentPage] = useState(page)
+    const [currentPage, setCurrentPage] = useState(page)
 
-        const { handlePrev, handleNext, handlePage } = usePagination({
-            currentPage,
-            setCurrentPage,
-            queries,
-            totalPages,
-        })
+    const { handlePrev, handleNext, handlePage } = usePagination({
+        currentPage,
+        setCurrentPage,
+        queries,
+        totalPages,
+    })
 
-        const handleChange = useCallback(
-            (e: ChangeEvent<HTMLInputElement>) =>
-                handlePage(Number(e.target.value)),
-            [handlePage]
-        )
+    const handleChange = useCallback(
+        (e: ChangeEvent<HTMLInputElement>) =>
+            handlePage(Number(e.target.value)),
+        [handlePage]
+    )
 
-        if (totalPages && totalPages <= 1) return null
+    if (totalPages && totalPages <= 1) return null
 
-        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>
-                )}
+    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.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>
-        )
-    }
-)
+            <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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== Paginator styles ===============================================*/
-
 import type { FC } from "react"
 import styled from "styled-components"
 import { setDefaultTheme, Input, Mixins } from "../../"

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

@@ -1,5 +1,3 @@
-/*=============================================== Paginator types ===============================================*/
-
 import type { LibColorsHover, LibIcon } from "../../types"
 import type { ILibFlexbox } from "../Flexbox/types"
 

package/dist/lib/components/ProgressBar/ProgressBar.tsx

@@ -1,6 +1,4 @@
-/*=============================================== ProgressBar component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import classNames from "classnames"
 import { getPercentage, getRandomString } from "@julseb-lib/utils"
 import { appendStyles } from "../../lib-utils"
@@ -8,61 +6,69 @@ import { StyledProgressBar } from "./styles"
 import type { ILibProgressBar } from "./types"
 
 /**
- * @description Returns a ProgressBar component
- * @link https://documentation-components-react.vercel.app/components/progress-bar
+ * ProgressBar component for displaying a progress indicator with customizable color, animation, and value range.
+ *
+ * @component
  * @extends HTMLMeterElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLMeterElement>
- * @prop value: number
- * @prop color?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"
- * @prop noAnimation?: boolean
+ * @param {Object} props - ProgressBar props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {ElementType} [props.as] - Custom element type to render as.
+ * @param {Ref<HTMLMeterElement>} [props.ref] - Ref forwarded to the meter element.
+ * @param {string} [props.className] - Additional class names.
+ * @param {number} props.value - Current value of the progress bar.
+ * @param {"primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"} [props.color="primary"] - Color of the progress bar.
+ * @param {boolean} [props.noAnimation] - Disable animation.
+ * @param {number} [props.min=0] - Minimum value.
+ * @param {number} [props.max=100] - Maximum value.
+ * @param {string} [props.id] - ID for the progress bar element.
+ * @param {any} [props.rest] - Additional props passed to the meter element.
+ * @returns {JSX.Element} The rendered ProgressBar component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/progress-bar
+ * @example
+ * <ProgressBar value={60} color="success" />
  */
-export const ProgressBar = forwardRef<HTMLMeterElement, ILibProgressBar>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            className,
-            value,
-            color = "primary",
-            noAnimation,
-            min = 0,
-            max = 100,
-            id,
-            ...rest
-        },
-        ref
-    ) => {
-        const randomClass = getRandomString(10, true)
-        const withClass = className?.split(" ")[0] || randomClass
+export const ProgressBar: FC<ILibProgressBar> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    className,
+    value,
+    color = "primary",
+    noAnimation,
+    min = 0,
+    max = 100,
+    id,
+    ...rest
+}) => {
+    const randomClass = getRandomString(10, true)
+    const withClass = className?.split(" ")[0] || randomClass
 
-        appendStyles(`
+    appendStyles(`
             ${id ? `#${id}` : `.${withClass}`} {
                 --progress-value: ${getPercentage(value, Number(max))}%;
                 --progress-speed: ${value};
             }
         `)
 
-        return (
-            <StyledProgressBar
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                className={classNames(
-                    className,
-                    { Animated: !noAnimation },
-                    randomClass,
-                    { RadiusCircle: value < 3 }
-                )}
-                id={id}
-                min={min}
-                max={max}
-                value={value}
-                $color={color}
-                $max={Number(max)}
-                {...rest}
-            />
-        )
-    }
-)
+    return (
+        <StyledProgressBar
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            className={classNames(
+                className,
+                { Animated: !noAnimation },
+                randomClass,
+                { RadiusCircle: value < 3 }
+            )}
+            id={id}
+            min={min}
+            max={max}
+            value={value}
+            $color={color}
+            $max={Number(max)}
+            {...rest}
+        />
+    )
+}

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

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

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== ProgressBar types ===============================================*/
-
 import type { MeterHTMLAttributes } from "react"
 import type { LibComponentBase, LibColorsHover } from "../../types"
 

package/dist/lib/components/ProgressCircle/Circle.tsx

@@ -1,15 +1,14 @@
-/*=============================================== Circle ===============================================*/
-
+import type { FC } from "react"
 import classNames from "classnames"
 import { StyledCircle } from "./styles"
 import type { ILibProgressCircle } from "./types"
 
-export const Circle = ({
+export const Circle: FC<ILibProgressCircle> = ({
     className,
     value,
     color = "primary",
     noAnimation,
-}: ILibProgressCircle) => {
+}) => {
     const r = 70
     const circ = 2 * Math.PI * r
     const strokePct = ((100 - value) * circ) / 100