@julseb-lib/react 0.0.84 → 0.0.86

package/dist/lib/components/InputContainer/InputContainer.tsx

@@ -1,6 +1,4 @@
-/*=============================================== InputContainer component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import classNames from "classnames"
 import { Text } from "../../"
 import { InputValidationHelper } from "../InputComponents"
@@ -14,119 +12,132 @@ import {
 import type { ILibInputContainer } from "./types"
 
 /**
- * @description Returns a InputContainer component
- * @link https://documentation-components-react.vercel.app/components/input-container
+ * InputContainer component for wrapping input fields with label, helper, validation, counter, and additional UI elements.
+ *
+ * @component
  * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @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 value?: any
- * @prop counter?: boolean
- * @prop maxLength?: number
- * @prop hasListOpen?: boolean
- * @prop style?: CSSProperties
- * @prop iconBaseUrl?: string
- * @prop validation?: { status: LibValidationStatus; message?: string; iconNotPassed?: LibIcon; iconNotPassedSize?: number; iconPassed?: LibIcon; iconPassedSize?: number; iconBaseUrl?: string }
+ * @param {Object} props - InputContainer 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.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. Object: { text, element, textColor, fontStyle, icon, iconColor, iconSize }.
+ * @param {any} [props.value] - Value of the input (used for counter).
+ * @param {boolean} [props.counter] - Show character counter.
+ * @param {number} [props.maxLength] - Maximum length for the input value.
+ * @param {boolean} [props.hasListOpen] - Whether a dropdown/list is open (for styling).
+ *  * @param {CSSProperties} [props.style] - Custom style for the container.
+ * @param {string} [props.iconBaseUrl] - Base URL for icons.
+ * @param {Object} [props.validation] - Validation status and message. { status, message, iconNotPassed, iconNotPassedSize, iconPassed, iconPassedSize, iconBaseUrl }
+ * @param {string} [props.className] - Additional class names.
+ *  * @param {ReactNode} [props.children] - Input field and other children.
+ * @returns {JSX.Element} The rendered InputContainer component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/input-container
+ * @example
+ * <InputContainer
+ *   label="Username"
+ *   helper="Enter your username"
+ *   counter
+ *   maxLength={20}
+ *   validation={{ status: "success", message: "Looks good!" }}
+ * >
+ *   <input type="text" />
+ * </InputContainer>
  */
-export const InputContainer = forwardRef<HTMLDivElement, ILibInputContainer>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            children,
-            id,
-            label,
-            labelComment,
-            helper,
-            helperBottom,
-            validation,
-            counter,
-            maxLength,
-            value,
-            className,
-            hasListOpen,
-            style,
-            iconBaseUrl,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledInputContainer
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                className={classNames(className, { Open: hasListOpen })}
-                style={style}
-                {...rest}
-            >
-                {(label || labelComment) && (
-                    <Label
-                        data-testid={testid && `${testid}.Label`}
-                        className={className && "Label"}
-                        htmlFor={id}
-                    >
-                        {label && label}
+export const InputContainer: FC<ILibInputContainer> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    id,
+    label,
+    labelComment,
+    helper,
+    helperBottom,
+    validation,
+    counter,
+    maxLength,
+    value,
+    className,
+    hasListOpen,
+    style,
+    iconBaseUrl,
+    ...rest
+}) => {
+    return (
+        <StyledInputContainer
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            className={classNames(className, { Open: hasListOpen })}
+            style={style}
+            {...rest}
+        >
+            {(label || labelComment) && (
+                <Label
+                    data-testid={testid && `${testid}.Label`}
+                    className={className && "Label"}
+                    htmlFor={id}
+                >
+                    {label && label}
 
-                        {labelComment && (
-                            <>
-                                {" "}
-                                <LabelComment
-                                    data-testid={
-                                        testid && `${testid}.Label.Comment`
-                                    }
-                                    className={className && "Comment"}
-                                >
-                                    {labelComment}
-                                </LabelComment>
-                            </>
-                        )}
-                    </Label>
-                )}
+                    {labelComment && (
+                        <>
+                            {" "}
+                            <LabelComment
+                                data-testid={
+                                    testid && `${testid}.Label.Comment`
+                                }
+                                className={className && "Comment"}
+                            >
+                                {labelComment}
+                            </LabelComment>
+                        </>
+                    )}
+                </Label>
+            )}
 
-                {helper && (
-                    <Text
-                        data-testid={testid && `${testid}.Helper`}
-                        className={className && "Helper"}
-                    >
-                        {helper}
-                    </Text>
-                )}
+            {helper && (
+                <Text
+                    data-testid={testid && `${testid}.Helper`}
+                    className={className && "Helper"}
+                >
+                    {helper}
+                </Text>
+            )}
 
-                {children}
+            {children}
 
-                {helperBottom && (
-                    <HelperBottom
-                        data-testid={testid}
-                        className={className}
-                        helperBottom={helperBottom}
-                    />
-                )}
+            {helperBottom && (
+                <HelperBottom
+                    data-testid={testid}
+                    className={className}
+                    helperBottom={helperBottom}
+                />
+            )}
 
-                {counter && (
-                    <StyledHelperBottom
-                        data-testid={testid && `${testid}.Counter`}
-                        className={className && "Counter"}
-                        color="gray"
-                        $fontStyle="italic"
-                    >
-                        {value.toString().length}
-                        {maxLength && `/${maxLength}`}
-                    </StyledHelperBottom>
-                )}
+            {counter && (
+                <StyledHelperBottom
+                    data-testid={testid && `${testid}.Counter`}
+                    className={className && "Counter"}
+                    color="gray"
+                    $fontStyle="italic"
+                >
+                    {value.toString().length}
+                    {maxLength && `/${maxLength}`}
+                </StyledHelperBottom>
+            )}
 
-                {validation && (
-                    <InputValidationHelper
-                        data-testid={testid}
-                        className={className}
-                        validation={validation}
-                    />
-                )}
-            </StyledInputContainer>
-        )
-    }
-)
+            {validation && (
+                <InputValidationHelper
+                    data-testid={testid}
+                    className={className}
+                    validation={validation}
+                />
+            )}
+        </StyledInputContainer>
+    )
+}

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== InputContainer styles ===============================================*/
-
 import type { FC } from "react"
 import styled from "styled-components"
 import { stringifyPx } from "@julseb-lib/utils"

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== InputContainer types ===============================================*/
-
 import type { CSSProperties } from "react"
 import type {
     LibComponentBase,