@julseb-lib/react 0.0.85 → 0.0.86

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

@@ -1,43 +1,37 @@
-/*=============================================== TextareaInput component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { StyledInput } from "../styles"
 import type { ILibTextareaInput } from "../subtypes"
 
-export const TextareaInput = forwardRef<HTMLTextAreaElement, ILibTextareaInput>(
-    (
-        {
-            "data-testid": testid,
-            id,
-            label,
-            helper,
-            helperBottom,
-            validation,
-            inputBackground,
-            className,
-            disabled,
-            counter,
-            maxLength,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledInput
-                data-testid={testid && `${testid}.Textarea`}
-                id={id}
-                className={className && "Textarea"}
-                ref={ref}
-                disabled={disabled}
-                as="textarea"
-                maxLength={maxLength}
-                $inputBackground={inputBackground}
-                $inputVariant={undefined}
-                $disabled={disabled}
-                $validationStatus={validation?.status}
-                $isTextarea
-                {...rest}
-            />
-        )
-    }
-)
+export const TextareaInput: FC<ILibTextareaInput> = ({
+    "data-testid": testid,
+    ref,
+    id,
+    label,
+    helper,
+    helperBottom,
+    validation,
+    inputBackground,
+    className,
+    disabled,
+    counter,
+    maxLength,
+    ...rest
+}) => {
+    return (
+        <StyledInput
+            data-testid={testid && `${testid}.Textarea`}
+            id={id}
+            className={className && "Textarea"}
+            ref={ref}
+            disabled={disabled}
+            as="textarea"
+            maxLength={maxLength}
+            $inputBackground={inputBackground}
+            $inputVariant={undefined}
+            $disabled={disabled}
+            $validationStatus={validation?.status}
+            $isTextarea
+            {...rest}
+        />
+    )
+}

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

@@ -1,6 +1,4 @@
-/*=============================================== TimeInput component ===============================================*/
-
-import { forwardRef, useCallback, useRef } from "react"
+import { useCallback, useRef, type FC } from "react"
 import { useMergeRefs } from "../../.."
 import {
     InputIcon,
@@ -14,113 +12,106 @@ import { Clock } from "../../../icons"
 import { StyledInput } from "../styles"
 import type { ILibTimeInput } from "../subtypes"
 
-export const TimeInput = forwardRef<HTMLInputElement, ILibTimeInput>(
-    (
-        {
-            "data-testid": testid,
-            id,
-            label,
-            helper,
-            helperBottom,
-            validation,
-            inputBackground,
-            inputVariant = "rounded",
-            className,
-            disabled,
-            iconClockSize = 16,
-            iconClock = (
-                <Clock
-                    data-testid={testid && `${testid}.Button.Icon`}
-                    className={className && "Icon"}
-                    size={iconClockSize}
-                />
-            ),
-            icon,
-            iconSize,
-            iconBaseUrl,
-            prefix,
-            ...rest
-        },
-        ref
-    ) => {
-        const inputRef = useRef<HTMLInputElement>(null)
-        const showPicker = useCallback(
-            () => inputRef?.current?.showPicker(),
-            []
-        )
+export const TimeInput: FC<ILibTimeInput> = ({
+    "data-testid": testid,
+    id,
+    ref,
+    label,
+    helper,
+    helperBottom,
+    validation,
+    inputBackground,
+    inputVariant = "rounded",
+    className,
+    disabled,
+    iconClockSize = 16,
+    iconClock = (
+        <Clock
+            data-testid={testid && `${testid}.Button.Icon`}
+            className={className && "Icon"}
+            size={iconClockSize}
+        />
+    ),
+    icon,
+    iconSize,
+    iconBaseUrl,
+    prefix,
+    ...rest
+}) => {
+    const inputRef = useRef<HTMLInputElement>(null)
+    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([ref, inputRef])}
-                    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([ref, inputRef])}
+                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={iconClock}
+                    iconSize={iconClockSize}
+                    inputBackground={inputBackground}
                     disabled={disabled}
-                    withPadding
-                    withBorder={false}
-                >
-                    <InputButton
+                    aria-label="Clock"
+                    onClick={showPicker}
+                    validationStatus={validation?.status}
+                    iconBaseUrl={iconBaseUrl}
+                />
+
+                {validation && (
+                    <InputValidationIcon
                         data-testid={testid}
                         className={className}
-                        icon={iconClock}
-                        iconSize={iconClockSize}
+                        validation={validation}
                         inputBackground={inputBackground}
-                        disabled={disabled}
-                        aria-label="Clock"
-                        onClick={showPicker}
-                        validationStatus={validation?.status}
-                        iconBaseUrl={iconBaseUrl}
                     />
-
-                    {validation && (
-                        <InputValidationIcon
-                            data-testid={testid}
-                            className={className}
-                            validation={validation}
-                            inputBackground={inputBackground}
-                        />
-                    )}
-                </InputRightContainer>
-            </>
-        )
-    }
-)
+                )}
+            </InputRightContainer>
+        </>
+    )
+}

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

@@ -1,5 +1,3 @@
-/*=============================================== Input types ===============================================*/
-
 import type {
     ILibColorInput,
     ILibDateInput,

package/dist/lib/components/InputCheck/InputCheck.tsx

@@ -1,6 +1,4 @@
-/*=============================================== InputCheck component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import classNames from "classnames"
 import { capitalize } from "@julseb-lib/utils"
 import { LibIcon } from "../LibIcon"
@@ -17,122 +15,131 @@ import {
 import type { ILibInputCheck } from "./types"
 
 /**
- * @description Returns a InputCheck component
- * @link https://documentation-components-react.vercel.app/components/input-check
+ * InputCheck component for rendering a checkbox or radio input with flexible variants, icons, and validation.
+ *
+ * @component
  * @extends HTMLInputElement
- * @prop data-testid?: string
- * @prop ref?: ForwardedRef<HTMLInputElement>
- * @prop id: string
- * @prop label: ReactChildren
- * @prop validation?: boolean | undefined
- * @prop variant?: "tile" | "toggle" | "selector"
- * @prop containerStyle?: CSSProperties
- * @prop type?: "checkbox" | "radio"
- * @prop iconCheck?: string | JSX.Element => only if type is set to checkbox
- * @prop iconCheckSize?: number => only if type is set to checkbox
- * @prop iconBaseUrl?: string => only if type is set to checkbox
+ * @param {Object} props - InputCheck props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {ForwardedRef<HTMLInputElement>} [props.ref] - Ref forwarded to the input element.
+ * @param {string} props.id - Input id.
+ * @param {ReactNode} props.label - Label for the input.
+ * @param {boolean} [props.validation] - Validation status.
+ * @param {"tile" | "toggle" | "selector"} [props.variant] - Visual variant of the input.
+ * @param {CSSProperties} [props.containerStyle] - Style for the input container.
+ * @param {"checkbox" | "radio"} [props.type="checkbox"] - Input type.
+ * @param {string | JSX.Element} [props.iconCheck] - Icon for the checkbox (only if type is checkbox).
+ * @param {number} [props.iconCheckSize=14] - Size of the checkbox icon (only if type is checkbox).
+ * @param {string} [props.iconBaseUrl] - Base URL for the icon (only if type is checkbox).
+ * @param {boolean} [props.disabled] - Disable the input.
+ * @param {string} [props.className] - Additional class names.
+ * @param {any} [props.rest] - Additional props passed to the input.
+ * @returns {JSX.Element} The rendered InputCheck component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/input-check
+ * @example
+ * <InputCheck
+ *   id="accept"
+ *   label="Accept terms"
+ *   type="checkbox"
+ *   variant="tile"
+ *   validation={true}
+ * />
  */
-export const InputCheck = forwardRef<HTMLInputElement, ILibInputCheck>(
-    (
-        {
-            "data-testid": testid,
-            type = "checkbox",
-            className,
-            validation,
-            id,
-            variant,
-            label,
-            iconCheckSize = 14,
-            iconCheck = (
-                <Check
-                    size={iconCheckSize}
-                    data-testid={
-                        testid && `${testid}.CheckContainer.Checkbox.Icon`
-                    }
-                    className={className && "Icon"}
-                />
-            ),
-            iconBaseUrl,
-            disabled,
-            containerStyle,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledInputCheck
-                data-testid={testid}
-                className={
-                    className &&
-                    classNames(className, variant && capitalize(variant))
-                }
-                htmlFor={id}
-                style={containerStyle}
-                $variant={variant}
-                $disabled={disabled}
-                $validationStatus={validation}
-            >
-                <StyledInput
-                    data-testid={testid && `${testid}.Input`}
-                    className={className && "Input"}
-                    ref={ref}
-                    type={type}
-                    id={id}
-                    disabled={disabled}
-                    {...rest}
-                />
+export const InputCheck: FC<ILibInputCheck> = ({
+    "data-testid": testid,
+    ref,
+    type = "checkbox",
+    className,
+    validation,
+    id,
+    variant,
+    label,
+    iconCheckSize = 14,
+    iconCheck = (
+        <Check
+            size={iconCheckSize}
+            data-testid={testid && `${testid}.CheckContainer.Checkbox.Icon`}
+            className={className && "Icon"}
+        />
+    ),
+    iconBaseUrl,
+    disabled,
+    containerStyle,
+    ...rest
+}) => {
+    return (
+        <StyledInputCheck
+            data-testid={testid}
+            className={
+                className &&
+                classNames(className, variant && capitalize(variant))
+            }
+            htmlFor={id}
+            style={containerStyle}
+            $variant={variant}
+            $disabled={disabled}
+            $validationStatus={validation}
+        >
+            <StyledInput
+                data-testid={testid && `${testid}.Input`}
+                className={className && "Input"}
+                ref={ref}
+                type={type}
+                id={id}
+                disabled={disabled}
+                {...rest}
+            />
 
-                {variant !== "selector" && (
-                    <CheckContainer
-                        data-testid={testid && `${testid}.CheckContainer`}
-                        className={className && "CheckContainer"}
-                        $validationStatus={validation}
-                        $disabled={disabled}
-                    >
-                        {variant === "toggle" ? (
-                            <Toggle
-                                data-testid={
-                                    testid && `${testid}.CheckContainer.Toggle`
-                                }
-                                className={className && "Toggle"}
-                            />
-                        ) : type === "radio" ? (
-                            <Radio
-                                data-testid={
-                                    testid && `${testid}.CheckContainer.Radio`
-                                }
-                                className={className && "Radio"}
-                            />
-                        ) : (
-                            <Checkbox
+            {variant !== "selector" && (
+                <CheckContainer
+                    data-testid={testid && `${testid}.CheckContainer`}
+                    className={className && "CheckContainer"}
+                    $validationStatus={validation}
+                    $disabled={disabled}
+                >
+                    {variant === "toggle" ? (
+                        <Toggle
+                            data-testid={
+                                testid && `${testid}.CheckContainer.Toggle`
+                            }
+                            className={className && "Toggle"}
+                        />
+                    ) : type === "radio" ? (
+                        <Radio
+                            data-testid={
+                                testid && `${testid}.CheckContainer.Radio`
+                            }
+                            className={className && "Radio"}
+                        />
+                    ) : (
+                        <Checkbox
+                            data-testid={
+                                testid && `${testid}.CheckContainer.Checkbox`
+                            }
+                            className={className && "Checkbox"}
+                        >
+                            <LibIcon
                                 data-testid={
                                     testid &&
-                                    `${testid}.CheckContainer.Checkbox`
+                                    `${testid}.CheckContainer.Checkbox.Icon`
                                 }
-                                className={className && "Checkbox"}
-                            >
-                                <LibIcon
-                                    data-testid={
-                                        testid &&
-                                        `${testid}.CheckContainer.Checkbox.Icon`
-                                    }
-                                    className={className && "CheckIcon"}
-                                    icon={iconCheck}
-                                    size={iconCheckSize}
-                                    baseUrl={iconBaseUrl}
-                                />
-                            </Checkbox>
-                        )}
-                    </CheckContainer>
-                )}
+                                className={className && "CheckIcon"}
+                                icon={iconCheck}
+                                size={iconCheckSize}
+                                baseUrl={iconBaseUrl}
+                            />
+                        </Checkbox>
+                    )}
+                </CheckContainer>
+            )}
 
-                <StyledText
-                    data-testid={testid && `${testid}.Text`}
-                    className={className && "Text"}
-                >
-                    {label}
-                </StyledText>
-            </StyledInputCheck>
-        )
-    }
-)
+            <StyledText
+                data-testid={testid && `${testid}.Text`}
+                className={className && "Text"}
+            >
+                {label}
+            </StyledText>
+        </StyledInputCheck>
+    )
+}

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== InputCheck styles ===============================================*/
-
 import styled, { css } from "styled-components"
 import {
     MEDIA,

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

@@ -1,6 +1,4 @@
-/*=============================================== InputCheck types ===============================================*/
-
-import type { CSSProperties, InputHTMLAttributes } from "react"
+import type { CSSProperties, InputHTMLAttributes, Ref } from "react"
 import type {
     LibIcon,
     LibValidationStatus,
@@ -10,6 +8,7 @@ import type {
 
 interface ILibInputCheckBase extends InputHTMLAttributes<HTMLInputElement> {
     "data-testid"?: string
+    ref?: Ref<HTMLInputElement>
     id: string
     label: ReactChildren
     children?: never

package/dist/lib/components/InputComponents/components/InputAndListContainer.tsx

@@ -1,6 +1,4 @@
-/*=============================================== InputAndListContainer component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import classNames from "classnames"
 import { StyledInputAndListContainer } from "../styles"
 import type { ILibInputAndListContainer } from "../types"
@@ -15,37 +13,30 @@ import type { ILibInputAndListContainer } from "../types"
  * @prop inputAndListContainerStyle: CSSProperties | undefined
  * @prop children?: ReactChildren
  */
-export const InputAndListContainer = forwardRef<
-    HTMLDivElement,
-    ILibInputAndListContainer
->(
-    (
-        {
-            "data-testid": testid,
-            className,
-            children,
-            hasListOpen,
-            isParent,
-            inputAndListContainerStyle,
-        },
-        ref
-    ) => {
-        return (
-            <StyledInputAndListContainer
-                data-testid={
-                    testid &&
-                    (isParent ? testid : `${testid}.InputAndListContainer`)
-                }
-                className={classNames(
-                    { InputAndListContainer: className && !isParent },
-                    { Open: hasListOpen },
-                    isParent && className
-                )}
-                ref={ref}
-                style={inputAndListContainerStyle}
-            >
-                {children}
-            </StyledInputAndListContainer>
-        )
-    }
-)
+export const InputAndListContainer: FC<ILibInputAndListContainer> = ({
+    "data-testid": testid,
+    ref,
+    className,
+    children,
+    hasListOpen,
+    isParent,
+    inputAndListContainerStyle,
+}) => {
+    return (
+        <StyledInputAndListContainer
+            data-testid={
+                testid &&
+                (isParent ? testid : `${testid}.InputAndListContainer`)
+            }
+            className={classNames(
+                { InputAndListContainer: className && !isParent },
+                { Open: hasListOpen },
+                isParent && className
+            )}
+            ref={ref}
+            style={inputAndListContainerStyle}
+        >
+            {children}
+        </StyledInputAndListContainer>
+    )
+}