@julseb-lib/react 0.0.56 → 0.0.57

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

@@ -1,197 +0,0 @@
-/*=============================================== PasswordInput component ===============================================*/
-
-import { forwardRef, useState } from "react"
-import { Hide, Show } from "../../../icons"
-import {
-    InputButton,
-    InputIcon,
-    InputRightContainer,
-    InputValidationIcon,
-    InputPrefix,
-    InputLeftContainer,
-} from "../../InputComponents"
-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}
-                            />
-                        )}
-
-                        {icon && (
-                            <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`}
-                    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}
-                                />
-                            ) : (
-                                <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>
-                )}
-            </>
-        )
-    }
-)

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

@@ -1,140 +0,0 @@
-/*=============================================== SearchInput component ===============================================*/
-
-import { forwardRef, useRef, useCallback } from "react"
-import { Key, useKeyPress, useMergeRefs, useTouchScreen } from "../../.."
-import {
-    InputButton,
-    InputIcon,
-    InputPrefix,
-    InputRightContainer,
-    InputLeftContainer,
-} from "../../InputComponents"
-import { Close } from "../../../icons"
-import { transformSearchKeys } from "../../../lib-utils"
-import { StyledInput } from "../styles"
-import type { ILibSearchInput } from "../subtypes"
-
-export const SearchInput = forwardRef<HTMLInputElement, ILibSearchInput>(
-    (
-        {
-            "data-testid": testid,
-            id,
-            label,
-            helper,
-            helperBottom,
-            inputBackground,
-            inputVariant = "rounded",
-            className,
-            disabled,
-            clearSearch,
-            iconClearSize = 24,
-            iconClear = (
-                <Close
-                    data-testid={testid && `${testid}.Button.Icon`}
-                    className={className && "Icon"}
-                    size={iconClearSize}
-                />
-            ),
-            icon,
-            iconSize,
-            iconBaseUrl,
-            focusKeys,
-            showKeys,
-            value,
-            prefix,
-            ...rest
-        },
-        ref
-    ) => {
-        const isTouchScreen = useTouchScreen()
-
-        const inputRef = useRef<HTMLInputElement>(null)
-
-        const handleFocus = useCallback(() => inputRef?.current?.focus(), [])
-
-        const keys = focusKeys || [""]
-        useKeyPress(keys, () => handleFocus())
-
-        return (
-            <>
-                {(prefix || icon) && (
-                    <InputLeftContainer
-                        data-testid={testid}
-                        className={className}
-                        disabled={disabled}
-                    >
-                        <InputPrefix
-                            data-testid={testid}
-                            className={className}
-                            prefix={prefix}
-                            inputBackground={inputBackground}
-                        />
-
-                        <InputIcon
-                            data-testid={testid}
-                            className={className}
-                            icon={icon}
-                            iconSize={iconSize}
-                            validationStatus={undefined}
-                            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}
-                    value={value}
-                    prefix={undefined as any}
-                    $inputBackground={inputBackground}
-                    $inputVariant={inputVariant}
-                    $disabled={disabled}
-                    $validationStatus={undefined}
-                    {...rest}
-                />
-
-                {(clearSearch || (showKeys && !isTouchScreen)) && (
-                    <InputRightContainer
-                        data-testid={testid}
-                        className={className}
-                        disabled={disabled}
-                        withPadding
-                        withBorder={false}
-                    >
-                        {clearSearch &&
-                            value &&
-                            value.toString().length > 0 && (
-                                <InputButton
-                                    data-testid={testid}
-                                    className={className}
-                                    icon={iconClear}
-                                    iconSize={iconClearSize}
-                                    inputBackground={inputBackground}
-                                    disabled={disabled}
-                                    aria-label="Clear"
-                                    onClick={clearSearch}
-                                    validationStatus={undefined}
-                                    iconBaseUrl={iconBaseUrl}
-                                />
-                            )}
-
-                        {showKeys && !isTouchScreen && (
-                            <Key
-                                data-testid={testid && `${testid}.Keys`}
-                                keys={transformSearchKeys(keys)}
-                                accentColor="primary"
-                                className={className && "Keys"}
-                            />
-                        )}
-                    </InputRightContainer>
-                )}
-            </>
-        )
-    }
-)

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

@@ -1,116 +0,0 @@
-/*=============================================== SelectInput component ===============================================*/
-
-import { forwardRef, useRef } from "react"
-import { useMergeRefs } from "../../../hooks"
-import { CaretDown } from "../../../icons"
-import {
-    InputButton,
-    InputRightContainer,
-    InputIcon,
-    InputPrefix,
-    InputLeftContainer,
-} from "../../InputComponents"
-import { StyledInput } from "../styles"
-import type { ILibSelectInput } from "../subtypes"
-
-export const SelectInput = forwardRef<HTMLSelectElement, ILibSelectInput>(
-    (
-        {
-            "data-testid": testid,
-            id,
-            label,
-            helper,
-            helperBottom,
-            validation,
-            inputBackground,
-            inputVariant = "rounded",
-            className,
-            disabled,
-            children,
-            iconSelectSize = 12,
-            iconSelect = (
-                <CaretDown
-                    data-testid={testid && `${testid}.Button.Icon`}
-                    className={className && "Icon"}
-                    size={iconSelectSize}
-                />
-            ),
-            icon,
-            iconSize,
-            iconBaseUrl,
-            prefix,
-            ...rest
-        },
-        ref
-    ) => {
-        const inputRef = useRef<HTMLSelectElement>(null)
-
-        return (
-            <>
-                {(prefix || icon) && (
-                    <InputLeftContainer
-                        data-testid={testid}
-                        className={className}
-                        disabled={disabled}
-                    >
-                        <InputPrefix
-                            data-testid={testid}
-                            className={className}
-                            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>
-                )}
-
-                <StyledInput
-                    as="select"
-                    data-testid={testid && `${testid}.Select`}
-                    id={id}
-                    className={className && "Select"}
-                    ref={useMergeRefs([inputRef as any, ref as any]) as any}
-                    disabled={disabled}
-                    $inputBackground={inputBackground}
-                    $inputVariant={inputVariant}
-                    $disabled={disabled}
-                    $validationStatus={validation?.status}
-                    $isSelect
-                    {...rest}
-                >
-                    {children}
-                </StyledInput>
-
-                <InputRightContainer
-                    data-testid={testid}
-                    className={className}
-                    disabled={disabled}
-                    withBorder={false}
-                    withPadding
-                >
-                    <InputButton
-                        data-testid={testid}
-                        className={className}
-                        aria-label="Caret"
-                        disabled={disabled}
-                        inputBackground={inputBackground}
-                        icon={iconSelect}
-                        iconSize={iconSelectSize}
-                        iconBaseUrl={iconBaseUrl}
-                        validationStatus={undefined}
-                    />
-                </InputRightContainer>
-            </>
-        )
-    }
-)

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

@@ -1,116 +0,0 @@
-/*=============================================== TextInput component ===============================================*/
-
-import { forwardRef } from "react"
-import {
-    InputIcon,
-    InputRightContainer,
-    InputValidationIcon,
-    InputPrefix,
-    InputSuffix,
-    InputLeftContainer,
-} from "../../InputComponents"
-import { StyledInput } from "../styles"
-import type { ILibTextInput } from "../subtypes"
-
-export const TextInput = forwardRef<HTMLInputElement, ILibTextInput>(
-    (
-        {
-            "data-testid": testid,
-            id,
-            label,
-            labelComment,
-            helper,
-            helperBottom,
-            validation,
-            inputBackground,
-            inputVariant = "rounded",
-            className,
-            disabled,
-            value,
-            maxLength,
-            counter,
-            type = "text",
-            icon,
-            iconSize,
-            iconBaseUrl,
-            prefix,
-            suffix,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <>
-                {(prefix || icon) && (
-                    <InputLeftContainer
-                        data-testid={testid}
-                        className={className}
-                        disabled={disabled}
-                    >
-                        <InputPrefix
-                            data-testid={testid}
-                            className={className}
-                            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>
-                )}
-
-                <StyledInput
-                    data-testid={testid && `${testid}.Input`}
-                    id={id}
-                    className={className && "Input"}
-                    ref={ref}
-                    value={value}
-                    maxLength={maxLength}
-                    disabled={disabled}
-                    type={type}
-                    prefix={undefined as any}
-                    $inputBackground={inputBackground}
-                    $inputVariant={inputVariant}
-                    $disabled={disabled}
-                    $validationStatus={validation?.status}
-                    {...rest}
-                />
-
-                {(validation || suffix) && (
-                    <InputRightContainer
-                        data-testid={testid}
-                        className={className}
-                        disabled={disabled}
-                        withPadding={validation && !suffix}
-                        withBorder={!!(suffix && !validation)}
-                    >
-                        {validation && (
-                            <InputValidationIcon
-                                data-testid={testid}
-                                className={className}
-                                validation={validation}
-                                inputBackground={inputBackground}
-                            />
-                        )}
-
-                        <InputSuffix
-                            data-testid={testid}
-                            className={className}
-                            suffix={suffix}
-                            inputBackground={inputBackground}
-                        />
-                    </InputRightContainer>
-                )}
-            </>
-        )
-    }
-)

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

@@ -1,43 +0,0 @@
-/*=============================================== TextareaInput component ===============================================*/
-
-import { forwardRef } 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}
-            />
-        )
-    }
-)