@julseb-lib/react 0.0.84 → 0.0.86

package/dist/lib/components/InputCounter/InputCounter.tsx

@@ -1,6 +1,4 @@
-/*=============================================== InputCounter component ===============================================*/
-
-import { forwardRef, type ChangeEvent, useCallback } from "react"
+import { useCallback, type ChangeEvent, type FC } from "react"
 import classNames from "classnames"
 import { ButtonIcon } from "../../"
 import { InputContainer } from "../InputComponents"
@@ -15,273 +13,284 @@ import {
 } from "./styles"
 import type { ILibInputCounter } from "./types"
 
+const BUTTON_SIZE = 32 as const
+
 /**
- * @description Returns a InputCounter component
- * @link https://documentation-components-react.vercel.app/components/input-counter
+ * InputCounter component for rendering a numeric input with increment and decrement buttons, supporting validation, tooltips, and flexible styling.
+ *
+ * @component
  * @extends HTMLInputElement
- * @prop data-testid?: string
- * @prop ref?: ForwardedRef<HTMLInputElement>
- * @prop value: number
- * @prop setValue: Dispatch<SetStateAction< number>>
- * @prop min?: number
- * @prop max?: number
- * @prop step?: number
- * @prop buttonVariant?: "plain" | "transparent" | "ghost"
- * @prop icons?: { plus?: string | JSX.Element; minus?: string | JSX.Element }
- * @prop iconSizes?: { plus?: number; minus?: number }
- * @prop labelButtons?: { plus?: string; minus?: string }
- * @prop showButtonTooltip?: boolean
- * @prop inputNoEdit?: boolean
- * @prop inputBackground?: "light" | "dark" => only if inputNoEdit is set to true or undefined
- * @prop inputVariant?: "rounded" | "pill" => only if inputNoEdit is set to true or undefined
- * @prop id?: string
- * @prop label?: string
- * @prop labelComment?: string
- * @prop helper?: string
- * @prop helperBottom?: string | { text: string => only if element is not defined; element: ReactChildren => only if text is not defined; textColor?: Any color from the library; fontStyle?: CssFontStyle; icon?: string | JSX.Element; iconColor?: Any color from the library; iconSize?: number }
- * @prop validation?: { status: LibValidationStatus; message?: string; iconNotPassed?: LibIcon; iconNotPassedSize?: number; iconPassed?: LibIcon; iconPassedSize?: number; iconBaseUrl?: string }
- * @prop iconBaseUrl?: string
- * @prop inputBackground?: "light" | "dark"
- * @prop inputVariant?: "rounded" | "pill"
- * @prop containerStyle?: CSSProperties
+ * @param {Object} props - InputCounter props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ *  * @param {Ref<HTMLInputElement>} [props.ref] - Ref forwarded to the input element.
+ * @param {number} props.value - Current value of the counter.
+ *  * @param {Dispatch<React.SetStateAction<number>>} props.setValue - Setter for the counter value.
+ * @param {number} [props.min] - Minimum value.
+ * @param {number} [props.max] - Maximum value.
+ * @param {number} [props.step=1] - Step increment/decrement.
+ * @param {"plain" | "transparent" | "ghost"} [props.buttonVariant] - Button variant for plus/minus buttons.
+ * @param {{ plus?: string | JSX.Element; minus?: string | JSX.Element }} [props.icons] - Custom icons for plus and minus buttons.
+ * @param {{ plus?: number; minus?: number }} [props.iconSizes] - Icon sizes for plus and minus buttons.
+ * @param {{ plus?: string; minus?: string }} [props.labelButtons] - Aria-labels/tooltips for plus and minus buttons.
+ * @param {boolean} [props.showButtonTooltip] - Show tooltips for plus/minus buttons.
+ * @param {boolean} [props.inputNoEdit] - If true, disables direct input editing.
+ * @param {"light" | "dark"} [props.inputBackground] - Input background style (only if inputNoEdit is false or undefined).
+ * @param {"rounded" | "pill"} [props.inputVariant="rounded"] - Input variant style (only if inputNoEdit is false or undefined).
+ * @param {string} [props.id] - Input id.
+ * @param {string} [props.label] - Label for the input.
+ * @param {string} [props.labelComment] - Additional comment for the label.
+ * @param {string} [props.helper] - Helper text above the input.
+ * @param {string|Object} [props.helperBottom] - Helper text or element below the input.
+ * @param {Object} [props.validation] - Validation status and message.
+ * @param {string} [props.iconBaseUrl] - Base URL for icons.
+ *  * @param {CSSProperties} [props.containerStyle] - Style for the input container.
+ * @param {boolean} [props.disabled] - Disable the input and buttons.
+ * @param {string} [props.className] - Additional class names.
+ * @param {any} [props.rest] - Additional props passed to the input.
+ * @returns {JSX.Element} The rendered InputCounter component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/input-counter
+ * @example
+ * <InputCounter
+ *   value={1}
+ *   setValue={setValue}
+ *   min={0}
+ *   max={10}
+ *   step={1}
+ *   label="Quantity"
+ *   showButtonTooltip
+ * />
  */
+export const InputCounter: FC<ILibInputCounter> = ({
+    "data-testid": testid,
+    ref,
+    className,
+    label,
+    labelComment,
+    helper,
+    helperBottom,
+    id,
+    validation,
+    inputBackground,
+    inputVariant = "rounded",
+    value = 0,
+    setValue,
+    min,
+    max,
+    step = 1,
+    buttonVariant,
+    iconSizes = {
+        plus: roundIconSize(BUTTON_SIZE),
+        minus: roundIconSize(BUTTON_SIZE),
+    },
+    icons,
+    iconBaseUrl,
+    labelButtons = {
+        plus: "Plus",
+        minus: "Minus",
+    },
+    showButtonTooltip,
+    inputNoEdit,
+    disabled,
+    containerStyle,
+    ...rest
+}) => {
+    const hasContainer: boolean = !!(
+        label ||
+        labelComment ||
+        helper ||
+        helperBottom ||
+        validation
+    )
 
-const BUTTON_SIZE = 32 as const
-
-export const InputCounter = forwardRef<HTMLInputElement, ILibInputCounter>(
-    (
-        {
-            "data-testid": testid,
-            className,
-            label,
-            labelComment,
-            helper,
-            helperBottom,
-            id,
-            validation,
-            inputBackground,
-            inputVariant = "rounded",
-            value = 0,
-            setValue,
-            min,
-            max,
-            step = 1,
-            buttonVariant,
-            iconSizes = {
-                plus: roundIconSize(BUTTON_SIZE),
-                minus: roundIconSize(BUTTON_SIZE),
-            },
-            icons,
-            iconBaseUrl,
-            labelButtons = {
-                plus: "Plus",
-                minus: "Minus",
-            },
-            showButtonTooltip,
-            inputNoEdit,
-            disabled,
-            containerStyle,
-            ...rest
+    const buttonProps: Partial<
+        Pick<
+            ILibButtonIcon,
+            | "size"
+            | "showTooltip"
+            | "disabled"
+            | "aria-disabled"
+            | "variant"
+            | "color"
+            | "iconBaseUrl"
+        >
+    > = {
+        size: 32,
+        showTooltip: showButtonTooltip && {
+            position: "top",
+            offset: 2,
         },
-        ref
-    ) => {
-        const hasContainer: boolean = !!(
-            label ||
-            labelComment ||
-            helper ||
-            helperBottom ||
-            validation
-        )
+        variant: buttonVariant,
+        color: validation?.status === false ? "danger" : "primary",
+        iconBaseUrl,
+    }
 
-        const buttonProps: Partial<
-            Pick<
-                ILibButtonIcon,
-                | "size"
-                | "showTooltip"
-                | "disabled"
-                | "aria-disabled"
-                | "variant"
-                | "color"
-                | "iconBaseUrl"
-            >
-        > = {
-            size: 32,
-            showTooltip: showButtonTooltip && {
-                position: "top",
-                offset: 2,
-            },
-            variant: buttonVariant,
-            color: validation?.status === false ? "danger" : "primary",
-            iconBaseUrl,
+    const isMinDisabled = disabled || !!(min && value <= min)
+    const isMaxDisabled = disabled || !!(max && value >= max)
+
+    const handleMinus = useCallback(() => {
+        const newValue = value - step
+
+        if (min && newValue < min) {
+            setValue(min)
+            return
         }
 
-        const isMinDisabled = disabled || !!(min && value <= min)
-        const isMaxDisabled = disabled || !!(max && value >= max)
+        setValue(newValue)
+    }, [min, setValue, step, value])
 
-        const handleMinus = useCallback(() => {
-            const newValue = value - step
+    const handlePlus = useCallback(() => {
+        const newValue = value + step
 
-            if (min && newValue < min) {
-                setValue(min)
-                return
-            }
+        if (max && newValue > max) {
+            setValue(max)
+            return
+        }
 
-            setValue(newValue)
-        }, [min, setValue, step, value])
+        setValue(newValue)
+    }, [max, setValue, step, value])
 
-        const handlePlus = useCallback(() => {
-            const newValue = value + step
+    const handleChange = useCallback(
+        (e: ChangeEvent<HTMLInputElement>) => {
+            const numberValue = Number(e.target.value)
 
-            if (max && newValue > max) {
+            if (min && numberValue < min) {
+                setValue(min)
+                return
+            }
+            if (max && numberValue > max) {
                 setValue(max)
                 return
             }
 
-            setValue(newValue)
-        }, [max, setValue, step, value])
-
-        const handleChange = useCallback(
-            (e: ChangeEvent<HTMLInputElement>) => {
-                const numberValue = Number(e.target.value)
+            setValue(numberValue)
+        },
+        [max, min, setValue]
+    )
 
-                if (min && numberValue < min) {
-                    setValue(min)
-                    return
+    return (
+        <InputContainer
+            data-testid={testid}
+            className={className}
+            label={label}
+            labelComment={labelComment}
+            helper={helper}
+            helperBottom={helperBottom}
+            id={id}
+            validation={validation}
+            value={value}
+            counter={undefined}
+            maxLength={undefined}
+            iconBaseUrl={iconBaseUrl}
+            style={containerStyle}
+            hasListOpen={undefined}
+        >
+            <InputCounterWrapper
+                data-testid={
+                    hasContainer && testid
+                        ? `${testid}.InputCounterWrapper`
+                        : testid
                 }
-                if (max && numberValue > max) {
-                    setValue(max)
-                    return
+                className={
+                    hasContainer && className
+                        ? "InputCounterWrapper"
+                        : className
                 }
-
-                setValue(numberValue)
-            },
-            [max, min, setValue]
-        )
-
-        return (
-            <InputContainer
-                data-testid={testid}
-                className={className}
-                label={label}
-                labelComment={labelComment}
-                helper={helper}
-                helperBottom={helperBottom}
-                id={id}
-                validation={validation}
-                value={value}
-                counter={undefined}
-                maxLength={undefined}
-                iconBaseUrl={iconBaseUrl}
-                style={containerStyle}
-                hasListOpen={undefined}
+                $isInputEditable={!inputNoEdit}
             >
-                <InputCounterWrapper
-                    data-testid={
-                        hasContainer && testid
-                            ? `${testid}.InputCounterWrapper`
-                            : testid
-                    }
-                    className={
-                        hasContainer && className
-                            ? "InputCounterWrapper"
-                            : className
+                <ButtonIcon
+                    data-testid={testid && `${testid}.Button.Minus`}
+                    className={className && "ButtonMinus"}
+                    icon={
+                        icons?.minus || (
+                            <Minus
+                                data-testid={
+                                    testid && `${testid}.Button.Minus.Icon`
+                                }
+                                className={className && "IconMinus"}
+                                size={iconSizes.minus}
+                            />
+                        )
                     }
-                    $isInputEditable={!inputNoEdit}
-                >
-                    <ButtonIcon
-                        data-testid={testid && `${testid}.Button.Minus`}
-                        className={className && "ButtonMinus"}
-                        icon={
-                            icons?.minus || (
-                                <Minus
-                                    data-testid={
-                                        testid && `${testid}.Button.Minus.Icon`
-                                    }
-                                    className={className && "IconMinus"}
-                                    size={iconSizes.minus}
-                                />
-                            )
-                        }
-                        iconSize={iconSizes.minus}
-                        aria-label={labelButtons.minus}
-                        tooltip={labelButtons.minus}
-                        onClick={handleMinus}
-                        disabled={isMinDisabled}
-                        aria-disabled={isMinDisabled}
-                        {...(buttonProps as any)}
-                    />
+                    iconSize={iconSizes.minus}
+                    aria-label={labelButtons.minus}
+                    tooltip={labelButtons.minus}
+                    onClick={handleMinus}
+                    disabled={isMinDisabled}
+                    aria-disabled={isMinDisabled}
+                    {...(buttonProps as any)}
+                />
 
-                    {!inputNoEdit ? (
-                        <StyledInputWrapper
-                            data-testid={testid}
-                            className={className}
-                            hasContainer={hasContainer}
-                            isTextArea={false}
-                            inputBackground={inputBackground}
-                            inputVariant={inputVariant}
-                            validationStatus={validation?.status}
-                            hasListOpen={undefined}
-                        >
-                            <Input
-                                data-testid={testid && `${testid}.Input`}
-                                className={classNames(
-                                    { Input: className },
-                                    { WithListOpen: false }
-                                )}
-                                id={id}
-                                ref={ref}
-                                type="number"
-                                value={value}
-                                onChange={handleChange}
-                                min={min}
-                                max={max}
-                                step={step}
-                                disabled={disabled}
-                                aria-disabled={disabled}
-                                $inputBackground={inputBackground}
-                                $inputVariant={inputVariant}
-                                $disabled={disabled}
-                                $validationStatus={validation?.status}
-                                $length={value.toString().length}
-                                {...rest}
-                            />
-                        </StyledInputWrapper>
-                    ) : (
-                        <NumberValue
-                            data-testid={testid && `${testid}.Number`}
-                            className={className && "NumberValue"}
+                {!inputNoEdit ? (
+                    <StyledInputWrapper
+                        data-testid={testid}
+                        className={className}
+                        hasContainer={hasContainer}
+                        isTextArea={false}
+                        inputBackground={inputBackground}
+                        inputVariant={inputVariant}
+                        validationStatus={validation?.status}
+                        hasListOpen={undefined}
+                    >
+                        <Input
+                            data-testid={testid && `${testid}.Input`}
+                            className={classNames(
+                                { Input: className },
+                                { WithListOpen: false }
+                            )}
+                            id={id}
                             ref={ref}
+                            type="number"
+                            value={value}
+                            onChange={handleChange}
+                            min={min}
+                            max={max}
+                            step={step}
+                            disabled={disabled}
+                            aria-disabled={disabled}
+                            $inputBackground={inputBackground}
+                            $inputVariant={inputVariant}
                             $disabled={disabled}
+                            $validationStatus={validation?.status}
+                            $length={value.toString().length}
                             {...rest}
-                        >
-                            {value}
-                        </NumberValue>
-                    )}
+                        />
+                    </StyledInputWrapper>
+                ) : (
+                    <NumberValue
+                        data-testid={testid && `${testid}.Number`}
+                        className={className && "NumberValue"}
+                        ref={ref}
+                        $disabled={disabled}
+                        {...rest}
+                    >
+                        {value}
+                    </NumberValue>
+                )}
 
-                    <ButtonIcon
-                        data-testid={testid && `${testid}.Button.Plus`}
-                        className={className && "ButtonPlus"}
-                        icon={
-                            icons?.plus || (
-                                <Plus
-                                    data-testid={
-                                        testid && `${testid}.Button.Plus.Icon`
-                                    }
-                                    className={className && "IconPlus"}
-                                    size={iconSizes.plus}
-                                />
-                            )
-                        }
-                        iconSize={iconSizes.plus}
-                        aria-label={labelButtons.plus}
-                        tooltip={labelButtons.plus}
-                        onClick={handlePlus}
-                        disabled={isMaxDisabled}
-                        aria-disabled={isMaxDisabled}
-                        {...(buttonProps as any)}
-                    />
-                </InputCounterWrapper>
-            </InputContainer>
-        )
-    }
-)
+                <ButtonIcon
+                    data-testid={testid && `${testid}.Button.Plus`}
+                    className={className && "ButtonPlus"}
+                    icon={
+                        icons?.plus || (
+                            <Plus
+                                data-testid={
+                                    testid && `${testid}.Button.Plus.Icon`
+                                }
+                                className={className && "IconPlus"}
+                                size={iconSizes.plus}
+                            />
+                        )
+                    }
+                    iconSize={iconSizes.plus}
+                    aria-label={labelButtons.plus}
+                    tooltip={labelButtons.plus}
+                    onClick={handlePlus}
+                    disabled={isMaxDisabled}
+                    aria-disabled={isMaxDisabled}
+                    {...(buttonProps as any)}
+                />
+            </InputCounterWrapper>
+        </InputContainer>
+    )
+}

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

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

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

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

package/dist/lib/components/InputCounter/subtypes.ts

@@ -1,5 +1,3 @@
-/*=============================================== InputCounter sub components types ===============================================*/
-
 import type { ILibInputBaseMixin } from "../ComponentsMixins"
 
 // ! DO NOT EXPORT THOSE TYPES, ONLY USE THEM IN INPUT_COUNTER COMPONENTS

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

@@ -1,5 +1,3 @@
-/*=============================================== InputCounter types ===============================================*/
-
 import type { InputHTMLAttributes } from "react"
 import type {
     LibIcon,

package/dist/lib/components/InputImage/EmptyContainer.tsx

@@ -1,18 +1,17 @@
-/*=============================================== EmptyContainer ===============================================*/
-
+import type { FC } from "react"
 import { Image } from "../../icons"
 import { LibIcon } from "../LibIcon"
 import { StyledEmptyContainer } from "./styles"
 import type { ILibEmptyContainer } from "./subtypes"
 
-export const EmptyContainer = ({
+export const EmptyContainer: FC<ILibEmptyContainer> = ({
     "data-testid": testid,
     className,
     validation,
     iconSizes,
     icons,
     iconBaseUrl,
-}: ILibEmptyContainer) => {
+}) => {
     return (
         <StyledEmptyContainer
             data-testid={testid && `${testid}.EmptyContainer`}

package/dist/lib/components/InputImage/HoverContainer.tsx

@@ -1,12 +1,11 @@
-/*=============================================== HoverContainer ===============================================*/
-
 import classNames from "classnames"
 import { LibIcon } from "../LibIcon"
 import { Edit } from "../../icons"
 import { StyledHoverContainer } from "./styles"
 import type { ILibHoverContainer } from "./subtypes"
+import type { FC } from "react"
 
-export const HoverContainer = ({
+export const HoverContainer: FC<ILibHoverContainer> = ({
     "data-testid": testid,
     className,
     validation,
@@ -15,7 +14,7 @@ export const HoverContainer = ({
     iconBaseUrl,
     isVisible,
     disabled = false,
-}: ILibHoverContainer) => {
+}) => {
     return (
         <StyledHoverContainer
             data-testid={testid && `${testid}.HoverContainer`}