@julseb-lib/react 0.0.85 → 0.0.87

package/dist/lib/components/Input/Input.tsx

@@ -1,6 +1,4 @@
-/*=============================================== Input component ===============================================*/
-
-import { forwardRef, type ForwardedRef } from "react"
+import { type FC, type ForwardedRef } from "react"
 import { ColorInput } from "./templates/ColorInput"
 import { DateInput } from "./templates/DateInput"
 import { FileInput } from "./templates/FileInput"
@@ -46,144 +44,120 @@ function renderComponent(
     }
 }
 
-const InputFunction = forwardRef<
-    HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,
-    ILibInput
->(({ type, ...rest }, ref) => renderComponent(rest, type, ref))
+const InputFunction: FC<ILibInput> = ({ type, ref, ...rest }) =>
+    renderComponent(rest, type, ref)
 
 /**
- * @description Returns a Input component
- * @link https://documentation-components-react.vercel.app/components/input
- * @extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
- * @constant => for all inputs
- * @prop data-testid?: string
- * @prop ref?: ForwardedRef<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>
- * @prop type?: "color" | "date" | "datetime-local" | "month" | "week" | "file" | "password" | "search" | "select" | "textarea" | "email" | "number" | "tel" | "text" | "url" | "time"
- * @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
- *
- * @type for type date | datetime-local | month | week | password | search | email | number | tel | text | url | time
- * @prop icon?: string | JSX.Element
- * @prop iconSize?: number
- * @prop prefix?: string | JSX.Element
- *
- * @type for type date | datetime-local | month | week
- * @prop iconCalendar?: string | JSX.Element
- * @prop iconCalendarSize?: number
- *
- * @type for type password
- * @prop hideButton?: boolean
- * @prop button?: { iconShow: string | JSX.Element; iconShowSize?: number; iconHide: string | JSX.Element; iconHideSize?: number; textShow?: string; textHide?: string }
+ * Input component for rendering various types of input fields, including text, select, textarea, date, file, password, search, color, and time, with flexible configuration and styling.
  *
- * @type for type search
- * @prop clearSearch?: MouseEventHandler<HTMLButtonElement>
- * @prop iconClear?: string | JSX.Element
- * @prop iconClearSize?: number
- * @prop focusKeys?: Array<string>
- * @prop showKeys?: boolean => only if focusKeys is defined
- *
- * @type for type select
- * @prop iconSelect?: string | JSX.Element
- * @prop iconSelectSize?: number
- * @prop children?: ReactChildren
- *
- * @type for type time
- * @prop iconClock?: string | JSX.Element
- * @prop iconClockSize?: number
+ * @component
+ * @extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+ * @param {Object} props - Input props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {ForwardedRef<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>} [props.ref] - Ref forwarded to the root element.
+ * @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 {number} [props.counter] - Character counter value.
+ * @param {number} [props.maxLength] - Maximum length for the input value.
+ * @param {string|number} [props.value] - Input value.
+ * @param {string} [props.className] - Additional class names.
+ * @param {"color" | "date" | "datetime-local" | "month" | "week" | "file" | "password" | "search" | "select" | "textarea" | "email" | "number" | "tel" | "text" | "url" | "time"} [props.type="text"] - Input type.
+ * @param {"light" | "dark"} [props.inputBackground] - Input background style.
+ * @param {"rounded" | "pill"} [props.inputVariant="rounded"] - Input variant style.
+ * @param {string} [props.iconBaseUrl] - Base URL for icons.
+ * @param {CSSProperties} [props.containerStyle] - Style for the input container.
+ * @param {any} [props.rest] - Additional props passed to the input.
+ * @returns {JSX.Element} The rendered Input component.
  *
- * @type for type email | number | tel | text | url
- * @prop suffix?: string | JSX.Element
+ * @see https://documentation-components-react.vercel.app/components/input
+ * @example
+ * <Input
+ *   label="Email"
+ *   type="email"
+ *   helper="Enter your email address"
+ *   validation={{ status: "success", message: "Looks good!" }}
+ *   inputVariant="pill"
+ * />
  */
-export const Input = forwardRef<
-    HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,
-    ILibInput
->(
-    (
-        {
-            "data-testid": testid,
-            id,
-            label,
-            labelComment,
-            helper,
-            helperBottom,
-            validation,
-            counter,
-            maxLength,
-            value,
-            className,
-            type = "text",
-            inputBackground,
-            inputVariant = "rounded",
-            iconBaseUrl,
-            containerStyle,
-            ...rest
-        },
-        ref
-    ) => {
-        const hasContainer = !!(
-            label ||
-            labelComment ||
-            helper ||
-            helperBottom ||
-            validation ||
-            counter
-        )
+export const Input: FC<ILibInput> = ({
+    "data-testid": testid,
+    ref,
+    id,
+    label,
+    labelComment,
+    helper,
+    helperBottom,
+    validation,
+    counter,
+    maxLength,
+    value,
+    className,
+    type = "text",
+    inputBackground,
+    inputVariant = "rounded",
+    iconBaseUrl,
+    containerStyle,
+    ...rest
+}) => {
+    const hasContainer = !!(
+        label ||
+        labelComment ||
+        helper ||
+        helperBottom ||
+        validation ||
+        counter
+    )
 
-        return (
-            <InputContainer
+    return (
+        <InputContainer
+            data-testid={testid}
+            id={id}
+            label={label}
+            labelComment={labelComment}
+            helper={helper}
+            helperBottom={helperBottom}
+            validation={validation}
+            counter={counter}
+            maxLength={maxLength}
+            value={value}
+            className={className}
+            iconBaseUrl={iconBaseUrl}
+            style={containerStyle}
+            hasListOpen={undefined}
+        >
+            <InputWrapper
                 data-testid={testid}
-                id={id}
-                label={label}
-                labelComment={labelComment}
-                helper={helper}
-                helperBottom={helperBottom}
-                validation={validation}
-                counter={counter}
-                maxLength={maxLength}
-                value={value}
                 className={className}
-                iconBaseUrl={iconBaseUrl}
-                style={containerStyle}
-                hasListOpen={undefined}
+                hasContainer={hasContainer}
+                isTextArea={type === "textarea"}
+                inputBackground={inputBackground}
+                inputVariant={inputVariant}
+                validationStatus={validation?.status}
+                hasListOpen={false}
             >
-                <InputWrapper
+                <InputFunction
                     data-testid={testid}
+                    id={id}
+                    ref={ref}
+                    label={label}
+                    helper={helper}
+                    helperBottom={helperBottom}
+                    validation={validation}
+                    counter={counter}
+                    maxLength={maxLength}
+                    value={value}
                     className={className}
-                    hasContainer={hasContainer}
-                    isTextArea={type === "textarea"}
+                    type={type}
                     inputBackground={inputBackground}
                     inputVariant={inputVariant}
-                    validationStatus={validation?.status}
-                    hasListOpen={false}
-                >
-                    <InputFunction
-                        data-testid={testid}
-                        id={id}
-                        ref={ref}
-                        label={label}
-                        helper={helper}
-                        helperBottom={helperBottom}
-                        validation={validation}
-                        counter={counter}
-                        maxLength={maxLength}
-                        value={value}
-                        className={className}
-                        type={type}
-                        inputBackground={inputBackground}
-                        inputVariant={inputVariant}
-                        iconBaseUrl={iconBaseUrl}
-                        {...(rest as any)}
-                    />
-                </InputWrapper>
-            </InputContainer>
-        )
-    }
-)
+                    iconBaseUrl={iconBaseUrl}
+                    {...(rest as any)}
+                />
+            </InputWrapper>
+        </InputContainer>
+    )
+}

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== Input styles ===============================================*/
-
 import styled, { css } from "styled-components"
 import { SPACERS, setDefaultTheme, FONT_SIZES, LINE_HEIGHTS } from "../.."
 import { InputBaseMixin } from "../ComponentsMixins"

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

@@ -1,8 +1,7 @@
-/*=============================================== Input sub components types ===============================================*/
-
 import type {
     InputHTMLAttributes,
     MouseEventHandler,
+    Ref,
     SelectHTMLAttributes,
     TextareaHTMLAttributes,
 } from "react"
@@ -22,16 +21,12 @@ import type { ILibInputBaseMixin } from "../ComponentsMixins"
 
 // ! DO NOT EXPORT THOSE TYPES, ONLY USE THEM IN INPUT COMPONENTS
 
-/*====================== ColorInput ======================*/
-
 export type ILibColorInput = InputHTMLAttributes<HTMLInputElement> &
     Omit<ILibExtendedInputBase, "inputAndListContainerStyle"> &
     ILibInputNoFocusKeys & {
         type: "color"
     }
 
-/*====================== DateInput ======================*/
-
 export type ILibDateInput = InputHTMLAttributes<HTMLInputElement> &
     Omit<ILibExtendedInputBase, "inputAndListContainerStyle"> &
     ILibInputIcon &
@@ -42,8 +37,6 @@ export type ILibDateInput = InputHTMLAttributes<HTMLInputElement> &
         iconCalendarSize?: number
     }
 
-/*====================== FileInput ======================*/
-
 export type ILibFileInput = InputHTMLAttributes<HTMLInputElement> &
     Omit<ILibExtendedInputBase, "inputAndListContainerStyle"> &
     LibInputWithValidation &
@@ -51,8 +44,6 @@ export type ILibFileInput = InputHTMLAttributes<HTMLInputElement> &
         type: "file"
     }
 
-/*====================== PasswordInput ======================*/
-
 type ILibPasswordInputBase = Omit<
     InputHTMLAttributes<HTMLInputElement>,
     "prefix"
@@ -98,8 +89,6 @@ export type ILibPasswordInput =
     | PasswordWithButtonText
     | PasswordWithoutButton
 
-/*====================== SearchInput ======================*/
-
 type ILibSearchInputBase = Omit<
     InputHTMLAttributes<HTMLInputElement>,
     "prefix"
@@ -124,8 +113,6 @@ type SearchInputHideKeys = ILibSearchInputBase & {
 
 export type ILibSearchInput = SearchInputShowKeys | SearchInputHideKeys
 
-/*====================== SelectInput ======================*/
-
 export type ILibSelectInput = Omit<
     SelectHTMLAttributes<HTMLSelectElement>,
     "prefix"
@@ -139,17 +126,14 @@ export type ILibSelectInput = Omit<
         children?: ReactChildren
     }
 
-/*====================== TextareaInput ======================*/
-
 export type ILibTextareaInput = TextareaHTMLAttributes<HTMLTextAreaElement> &
     Omit<ILibExtendedInputBase, "inputAndListContainerStyle"> &
     ILibInputNoFocusKeys & {
+        ref?: Ref<HTMLTextAreaElement>
         type: "textarea"
         inputVariant?: never
     }
 
-/*====================== TextInput ======================*/
-
 export type ILibTextInput = Omit<
     InputHTMLAttributes<HTMLInputElement>,
     "prefix"
@@ -161,8 +145,6 @@ export type ILibTextInput = Omit<
         type?: "email" | "number" | "tel" | "text" | "url" | undefined
     }
 
-/*====================== TimeInput ======================*/
-
 export type ILibTimeInput = Omit<
     InputHTMLAttributes<HTMLInputElement>,
     "prefix"
@@ -176,8 +158,6 @@ export type ILibTimeInput = Omit<
         iconClockSize?: number
     }
 
-/*====================== Styles ======================*/
-
 export interface ILibInputStyle extends ILibInputBaseMixin {
     $inputVariant: LibInputVariant | undefined
     $inputBackground: LibInputBackground | undefined

package/dist/lib/components/Input/templates/ColorInput.tsx

@@ -1,40 +1,34 @@
-/*=============================================== ColorInput component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { StyledInput } from "../styles"
 import type { ILibColorInput } from "../subtypes"
 
-export const ColorInput = forwardRef<HTMLInputElement, ILibColorInput>(
-    (
-        {
-            "data-testid": testid,
-            id,
-            label,
-            helper,
-            helperBottom,
-            validation,
-            inputBackground,
-            inputVariant = "rounded",
-            className,
-            disabled,
-            type = "color",
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledInput
-                data-testid={testid && `${testid}.Input`}
-                className={className && "Input"}
-                id={id}
-                ref={ref}
-                type={type}
-                $inputBackground={inputBackground}
-                $inputVariant={inputVariant}
-                $disabled={disabled}
-                $validationStatus={validation?.status}
-                {...rest}
-            />
-        )
-    }
-)
+export const ColorInput: FC<ILibColorInput> = ({
+    "data-testid": testid,
+    ref,
+    id,
+    label,
+    helper,
+    helperBottom,
+    validation,
+    inputBackground,
+    inputVariant = "rounded",
+    className,
+    disabled,
+    type = "color",
+    ...rest
+}) => {
+    return (
+        <StyledInput
+            data-testid={testid && `${testid}.Input`}
+            className={className && "Input"}
+            id={id}
+            ref={ref}
+            type={type}
+            $inputBackground={inputBackground}
+            $inputVariant={inputVariant}
+            $disabled={disabled}
+            $validationStatus={validation?.status}
+            {...rest}
+        />
+    )
+}

package/dist/lib/components/Input/templates/DateInput.tsx

@@ -1,6 +1,4 @@
-/*=============================================== DateInput component ===============================================*/
-
-import { forwardRef, useCallback, useRef } from "react"
+import { useCallback, useRef, type FC } from "react"
 import { useMergeRefs } from "../../.."
 import { Calendar } from "../../../icons"
 import {
@@ -14,114 +12,107 @@ import {
 import { StyledInput } from "../styles"
 import type { ILibDateInput } from "../subtypes"
 
-export const DateInput = forwardRef<HTMLInputElement, ILibDateInput>(
-    (
-        {
-            "data-testid": testid,
-            id,
-            label,
-            helper,
-            helperBottom,
-            validation,
-            inputBackground,
-            inputVariant = "rounded",
-            className,
-            disabled,
-            icon,
-            iconSize,
-            iconBaseUrl,
-            type,
-            iconCalendarSize = 16,
-            iconCalendar = (
-                <Calendar
-                    data-testid={testid && `${testid}.Button.Icon`}
-                    className={className && "Icon"}
-                    size={iconCalendarSize}
-                />
-            ),
-            prefix,
-            ...rest
-        },
-        ref
-    ) => {
-        const inputRef = useRef<HTMLInputElement>(null)
-        const showPicker = useCallback(
-            () => inputRef?.current?.showPicker(),
-            []
-        )
+export const DateInput: FC<ILibDateInput> = ({
+    "data-testid": testid,
+    ref,
+    id,
+    label,
+    helper,
+    helperBottom,
+    validation,
+    inputBackground,
+    inputVariant = "rounded",
+    className,
+    disabled,
+    icon,
+    iconSize,
+    iconBaseUrl,
+    type,
+    iconCalendarSize = 16,
+    iconCalendar = (
+        <Calendar
+            data-testid={testid && `${testid}.Button.Icon`}
+            className={className && "Icon"}
+            size={iconCalendarSize}
+        />
+    ),
+    prefix,
+    ...rest
+}) => {
+    const inputRef = useRef<HTMLInputElement>(null as any)
+    const showPicker = useCallback(() => inputRef?.current?.showPicker(), [])
 
-        return (
-            <>
-                {(prefix || icon) && (
-                    <InputLeftContainer
+    return (
+        <>
+            {(prefix || icon) && (
+                <InputLeftContainer
+                    data-testid={testid}
+                    className={className}
+                    disabled={disabled}
+                >
+                    <InputPrefix
                         data-testid={testid}
                         className={className}
-                        disabled={disabled}
-                    >
-                        <InputPrefix
-                            data-testid={testid}
-                            className={className}
-                            prefix={prefix}
-                            inputBackground={inputBackground}
-                        />
+                        prefix={prefix}
+                        inputBackground={inputBackground}
+                    />
 
-                        <InputIcon
-                            data-testid={testid}
-                            className={className}
-                            icon={icon}
-                            iconSize={iconSize}
-                            validationStatus={validation?.status}
-                            disabled={disabled}
-                            inputBackground={inputBackground}
-                            inputVariant={inputVariant}
-                            iconBaseUrl={iconBaseUrl}
-                        />
-                    </InputLeftContainer>
-                )}
+                    <InputIcon
+                        data-testid={testid}
+                        className={className}
+                        icon={icon}
+                        iconSize={iconSize}
+                        validationStatus={validation?.status}
+                        disabled={disabled}
+                        inputBackground={inputBackground}
+                        inputVariant={inputVariant}
+                        iconBaseUrl={iconBaseUrl}
+                    />
+                </InputLeftContainer>
+            )}
 
-                <StyledInput
-                    data-testid={testid && `${testid}.Input`}
-                    id={id}
-                    className={className && "Input"}
-                    ref={useMergeRefs([inputRef, ref])}
-                    type={type}
-                    disabled={disabled}
-                    $inputBackground={inputBackground}
-                    $inputVariant={inputVariant}
-                    $disabled={disabled}
-                    $validationStatus={validation?.status}
-                    {...rest}
-                />
+            <StyledInput
+                data-testid={testid && `${testid}.Input`}
+                id={id}
+                className={className && "Input"}
+                ref={useMergeRefs([inputRef, ref])}
+                type={type}
+                disabled={disabled}
+                $inputBackground={inputBackground}
+                $inputVariant={inputVariant}
+                $disabled={disabled}
+                $validationStatus={validation?.status}
+                {...rest}
+            />
 
-                <InputRightContainer
+            <InputRightContainer
+                data-testid={testid}
+                className={className}
+                disabled={disabled}
+                withPadding
+                withBorder={false}
+            >
+                <InputButton
                     data-testid={testid}
                     className={className}
+                    icon={iconCalendar}
+                    iconSize={iconCalendarSize}
+                    onClick={showPicker}
+                    aria-label="Calendar"
                     disabled={disabled}
-                    withPadding
-                    withBorder={false}
-                >
-                    <InputButton
+                    inputBackground={inputBackground}
+                    validationStatus={validation?.status}
+                />
+
+                {validation && (
+                    <InputValidationIcon
                         data-testid={testid}
                         className={className}
-                        icon={iconCalendar}
-                        iconSize={iconCalendarSize}
-                        onClick={showPicker}
-                        aria-label="Calendar"
-                        disabled={disabled}
+                        validation={validation}
                         inputBackground={inputBackground}
-                        validationStatus={validation?.status}
                     />
-
-                    {validation && (
-                        <InputValidationIcon
-                            data-testid={testid}
-                            className={className}
-                            validation={validation}
-                            inputBackground={inputBackground}
-                        />
-                    )}
-                </InputRightContainer>
-            </>
-        )
-    }
-)
+                )}
+            </InputRightContainer>
+        </>
+    )
+}