@julseb-lib/react 0.0.85 → 0.0.87

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

@@ -1,61 +1,55 @@
-/*=============================================== FileInput component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { InputRightContainer, InputValidationIcon } from "../../InputComponents"
 import { StyledInput } from "../styles"
 import type { ILibFileInput } from "../subtypes"
 
-export const FileInput = forwardRef<HTMLInputElement, ILibFileInput>(
-    (
-        {
-            "data-testid": testid,
-            id,
-            label,
-            helper,
-            helperBottom,
-            validation,
-            inputBackground,
-            inputVariant = "rounded",
-            className,
-            disabled,
-            type = "file",
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <>
-                <StyledInput
-                    data-testid={testid && `${testid}.Input`}
-                    className={className && "Input"}
-                    id={id}
-                    ref={ref}
-                    type={type}
-                    disabled={disabled}
-                    $inputBackground={inputBackground}
-                    $inputVariant={inputVariant}
-                    $disabled={disabled}
-                    $validationStatus={validation?.status}
-                    {...rest}
-                />
+export const FileInput: FC<ILibFileInput> = ({
+    "data-testid": testid,
+    ref,
+    id,
+    label,
+    helper,
+    helperBottom,
+    validation,
+    inputBackground,
+    inputVariant = "rounded",
+    className,
+    disabled,
+    type = "file",
+    ...rest
+}) => {
+    return (
+        <>
+            <StyledInput
+                data-testid={testid && `${testid}.Input`}
+                className={className && "Input"}
+                id={id}
+                ref={ref}
+                type={type}
+                disabled={disabled}
+                $inputBackground={inputBackground}
+                $inputVariant={inputVariant}
+                $disabled={disabled}
+                $validationStatus={validation?.status}
+                {...rest}
+            />
 
-                {validation && (
-                    <InputRightContainer
+            {validation && (
+                <InputRightContainer
+                    data-testid={testid}
+                    className={className}
+                    disabled={disabled}
+                    withPadding
+                    withBorder={false}
+                >
+                    <InputValidationIcon
                         data-testid={testid}
                         className={className}
-                        disabled={disabled}
-                        withPadding
-                        withBorder={false}
-                    >
-                        <InputValidationIcon
-                            data-testid={testid}
-                            className={className}
-                            validation={validation}
-                            inputBackground={inputBackground}
-                        />
-                    </InputRightContainer>
-                )}
-            </>
-        )
-    }
-)
+                        validation={validation}
+                        inputBackground={inputBackground}
+                    />
+                </InputRightContainer>
+            )}
+        </>
+    )
+}

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

@@ -1,6 +1,4 @@
-/*=============================================== PasswordInput component ===============================================*/
-
-import { forwardRef, useState } from "react"
+import { useState, type FC } from "react"
 import { Hide, Show } from "../../../icons"
 import {
     InputButton,
@@ -14,184 +12,174 @@ import type { ILibInputButton } from "../../InputComponents/types"
 import { StyledInput } from "../styles"
 import type { ILibPasswordInput } from "../subtypes"
 
-export const PasswordInput = forwardRef<HTMLInputElement, ILibPasswordInput>(
-    (
-        {
-            "data-testid": testid,
-            id,
-            label,
-            helper,
-            helperBottom,
-            validation,
-            inputBackground,
-            inputVariant = "rounded",
-            className,
-            disabled,
-            icon,
-            iconSize,
-            iconBaseUrl,
-            counter,
-            hideButton,
-            type = "password",
-            value,
-            maxLength,
-            button,
-            prefix,
-            ...rest
-        },
-        ref
-    ) => {
-        const [inputType, setInputType] = useState<"password" | "text">(
-            "password"
-        )
-
-        const buttonCommonProps: Pick<
-            ILibInputButton,
-            | "data-testid"
-            | "onClick"
-            | "inputBackground"
-            | "disabled"
-            | "aria-label"
-            | "validationStatus"
-            | "className"
-            | "iconBaseUrl"
-        > = {
-            "data-testid": testid,
-            onClick: () =>
-                setInputType(inputType === "password" ? "text" : "password"),
-            inputBackground,
-            disabled,
-            "aria-label": `${
-                inputType === "password" ? "Show" : "Hide"
-            } password`,
-            validationStatus: validation?.status,
-            className,
-            iconBaseUrl,
-        }
-
-        return (
-            <>
-                {(prefix || icon) && (
-                    <InputLeftContainer
-                        data-testid={testid}
-                        className={className}
-                        disabled={disabled}
-                    >
-                        {prefix && (
-                            <InputPrefix
-                                data-testid={testid}
-                                className={className}
-                                prefix={prefix}
-                                inputBackground={inputBackground}
-                            />
-                        )}
+export const PasswordInput: FC<ILibPasswordInput> = ({
+    "data-testid": testid,
+    ref,
+    id,
+    label,
+    helper,
+    helperBottom,
+    validation,
+    inputBackground,
+    inputVariant = "rounded",
+    className,
+    disabled,
+    icon,
+    iconSize,
+    iconBaseUrl,
+    counter,
+    hideButton,
+    type = "password",
+    value,
+    maxLength,
+    button,
+    prefix,
+    ...rest
+}) => {
+    const [inputType, setInputType] = useState<"password" | "text">("password")
 
-                        {icon && (
-                            <InputIcon
-                                data-testid={testid}
-                                className={className}
-                                icon={icon}
-                                iconSize={iconSize}
-                                validationStatus={validation?.status}
-                                disabled={disabled}
-                                inputBackground={inputBackground}
-                                inputVariant={inputVariant}
-                                iconBaseUrl={iconBaseUrl}
-                            />
-                        )}
-                    </InputLeftContainer>
-                )}
+    const buttonCommonProps: Pick<
+        ILibInputButton,
+        | "data-testid"
+        | "onClick"
+        | "inputBackground"
+        | "disabled"
+        | "aria-label"
+        | "validationStatus"
+        | "className"
+        | "iconBaseUrl"
+    > = {
+        "data-testid": testid,
+        onClick: () =>
+            setInputType(inputType === "password" ? "text" : "password"),
+        inputBackground,
+        disabled,
+        "aria-label": `${inputType === "password" ? "Show" : "Hide"} password`,
+        validationStatus: validation?.status,
+        className,
+        iconBaseUrl,
+    }
 
-                <StyledInput
-                    data-testid={testid && `${testid}.Input`}
-                    ref={ref}
-                    id={id}
-                    className={className && "Input"}
-                    type={hideButton ? type : inputType}
-                    value={value}
-                    maxLength={maxLength}
+    return (
+        <>
+            {(prefix || icon) && (
+                <InputLeftContainer
+                    data-testid={testid}
+                    className={className}
                     disabled={disabled}
-                    prefix={undefined as any}
-                    $inputVariant={inputVariant}
-                    $inputBackground={inputBackground}
-                    $disabled={disabled}
-                    $validationStatus={validation?.status}
-                    {...rest}
-                />
+                >
+                    {prefix && (
+                        <InputPrefix
+                            data-testid={testid}
+                            className={className}
+                            prefix={prefix}
+                            inputBackground={inputBackground}
+                        />
+                    )}
 
-                {(!hideButton || validation) && (
-                    <InputRightContainer
-                        data-testid={testid}
-                        className={className}
-                        disabled={disabled}
-                        withPadding
-                        withBorder={false}
-                    >
-                        {!hideButton &&
-                            (button?.textShow && button?.textHide ? (
-                                <InputButton
-                                    text={
-                                        inputType === "password"
-                                            ? button?.textShow
-                                            : button?.textHide
-                                    }
-                                    {...buttonCommonProps}
-                                />
-                            ) : (
-                                <InputButton
-                                    icon={
-                                        inputType === "password"
-                                            ? button?.iconShow || (
-                                                  <Hide
-                                                      data-testid={
-                                                          testid &&
-                                                          `${testid}.Button.Icon`
-                                                      }
-                                                      className={
-                                                          className && "Icon"
-                                                      }
-                                                      size={
-                                                          button?.iconShowSize ||
-                                                          16
-                                                      }
-                                                  />
-                                              )
-                                            : button?.iconHide || (
-                                                  <Show
-                                                      data-testid={
-                                                          testid &&
-                                                          `${testid}.Button.Icon`
-                                                      }
-                                                      className={
-                                                          className && "Icon"
-                                                      }
-                                                      size={
-                                                          button?.iconHideSize ||
-                                                          16
-                                                      }
-                                                  />
-                                              )
-                                    }
-                                    iconSize={
-                                        inputType === "password"
-                                            ? button?.iconShowSize || 16
-                                            : button?.iconHideSize || 16
-                                    }
-                                    {...buttonCommonProps}
-                                />
-                            ))}
+                    {icon && (
+                        <InputIcon
+                            data-testid={testid}
+                            className={className}
+                            icon={icon}
+                            iconSize={iconSize}
+                            validationStatus={validation?.status}
+                            disabled={disabled}
+                            inputBackground={inputBackground}
+                            inputVariant={inputVariant}
+                            iconBaseUrl={iconBaseUrl}
+                        />
+                    )}
+                </InputLeftContainer>
+            )}
 
-                        {validation && (
-                            <InputValidationIcon
-                                data-testid={testid}
-                                className={className}
-                                validation={validation}
-                                inputBackground={inputBackground}
+            <StyledInput
+                data-testid={testid && `${testid}.Input`}
+                ref={ref}
+                id={id}
+                className={className && "Input"}
+                type={hideButton ? type : inputType}
+                value={value}
+                maxLength={maxLength}
+                disabled={disabled}
+                prefix={undefined as any}
+                $inputVariant={inputVariant}
+                $inputBackground={inputBackground}
+                $disabled={disabled}
+                $validationStatus={validation?.status}
+                {...rest}
+            />
+
+            {(!hideButton || validation) && (
+                <InputRightContainer
+                    data-testid={testid}
+                    className={className}
+                    disabled={disabled}
+                    withPadding
+                    withBorder={false}
+                >
+                    {!hideButton &&
+                        (button?.textShow && button?.textHide ? (
+                            <InputButton
+                                text={
+                                    inputType === "password"
+                                        ? button?.textShow
+                                        : button?.textHide
+                                }
+                                {...buttonCommonProps}
                             />
-                        )}
-                    </InputRightContainer>
-                )}
-            </>
-        )
-    }
-)
+                        ) : (
+                            <InputButton
+                                icon={
+                                    inputType === "password"
+                                        ? button?.iconShow || (
+                                              <Hide
+                                                  data-testid={
+                                                      testid &&
+                                                      `${testid}.Button.Icon`
+                                                  }
+                                                  className={
+                                                      className && "Icon"
+                                                  }
+                                                  size={
+                                                      button?.iconShowSize || 16
+                                                  }
+                                              />
+                                          )
+                                        : button?.iconHide || (
+                                              <Show
+                                                  data-testid={
+                                                      testid &&
+                                                      `${testid}.Button.Icon`
+                                                  }
+                                                  className={
+                                                      className && "Icon"
+                                                  }
+                                                  size={
+                                                      button?.iconHideSize || 16
+                                                  }
+                                              />
+                                          )
+                                }
+                                iconSize={
+                                    inputType === "password"
+                                        ? button?.iconShowSize || 16
+                                        : button?.iconHideSize || 16
+                                }
+                                {...buttonCommonProps}
+                            />
+                        ))}
+
+                    {validation && (
+                        <InputValidationIcon
+                            data-testid={testid}
+                            className={className}
+                            validation={validation}
+                            inputBackground={inputBackground}
+                        />
+                    )}
+                </InputRightContainer>
+            )}
+        </>
+    )
+}