@julseb-lib/react 0.0.50 → 0.0.52

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

@@ -1,62 +0,0 @@
-/*=============================================== InputButton component ===============================================*/
-
-import { LibIcon } from "../../LibIcon"
-import { StyledInputButton } from "../styles"
-import type { ILibInputButton } from "../types"
-
-/**
- * @description Returns a button used on the right of an input
- * @access Only for building library, do not export
- * @prop data-testid: string | undefined
- * @prop icon: string | JSX.Element | undefined => only if text is not defined, required when text is not defined
- * @prop iconSize: number | undefined => only if icon is defined
- * @prop iconBaseUrl: string | undefined => only if icon is defined
- * @prop text: string | undefined => only if icon is not defined, required when icon is not defined
- * @prop aria-label: string | undefined
- * @prop onClick?: MouseEventHandler<HTMLButtonElement>
- * @prop disabled: boolean | undefined
- * @prop inputBackground: "light" | "dark" | undefined
- * @prop validationStatus: boolean | undefined | undefined
- * @prop className: string | undefined
- */
-export const InputButton = ({
-    "data-testid": testid,
-    "aria-label": ariaLabel,
-    onClick,
-    icon,
-    iconSize = 16,
-    iconBaseUrl,
-    text,
-    disabled,
-    inputBackground,
-    validationStatus,
-    className,
-}: ILibInputButton) => {
-    return (
-        <StyledInputButton
-            aria-label={ariaLabel}
-            data-testid={testid && `${testid}.Button`}
-            className={className && "InputButton"}
-            onClick={onClick}
-            disabled={disabled}
-            as={onClick ? "button" : "span"}
-            type="button"
-            $inputBackground={inputBackground}
-            $validationStatus={validationStatus}
-            $isSpan={!onClick}
-            $disabled={disabled}
-        >
-            {icon ? (
-                <LibIcon
-                    icon={icon}
-                    size={iconSize}
-                    data-testid={testid && `${testid}.Button.Icon`}
-                    className={className && "Icon"}
-                    baseUrl={iconBaseUrl}
-                />
-            ) : (
-                text
-            )}
-        </StyledInputButton>
-    )
-}

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

@@ -1,70 +0,0 @@
-/*=============================================== InputContainer component ===============================================*/
-
-import { InputContainer as Container } from "../../InputContainer"
-import type { ILibInputContainer } from "../../InputContainer/types"
-
-/**
- * @description Returns a input container, with label, helper, helper bottom, counter and validation
- * @access Only for building library, do not export
- * @prop data-testid: string | undefined
- * @prop className: string | undefined
- * @prop label: string | undefined
- * @prop labelComment: string | undefined
- * @prop helper: string | undefined
- * @prop helperBottom: string | { text: string; textColor?: Any color from the library; fontStyle?: CssFontStyle; icon?: string | JSX.Element; iconColor?: Any color from the library; iconSize?: number } | undefined
- * @prop children?: ReactChildren
- * @prop value: any | undefined
- * @prop counter: boolean | undefined
- * @prop maxLength: number | undefined
- * @prop hasListOpen: boolean | undefined
- * @prop style: CSSProperties | undefined
- * @prop iconBaseUrl: string | undefined
- */
-export const InputContainer = ({
-    "data-testid": testid,
-    id,
-    label,
-    labelComment,
-    helper,
-    helperBottom,
-    validation,
-    counter,
-    maxLength,
-    children,
-    value,
-    className,
-    hasListOpen,
-    iconBaseUrl,
-    style,
-}: ILibInputContainer) => {
-    if (
-        !label &&
-        !labelComment &&
-        !helper &&
-        !helperBottom &&
-        !validation &&
-        !counter
-    )
-        return children
-
-    return (
-        <Container
-            data-testid={testid}
-            id={id}
-            label={label}
-            labelComment={labelComment}
-            helper={helper}
-            helperBottom={helperBottom}
-            validation={validation}
-            counter={counter}
-            maxLength={maxLength}
-            value={value}
-            className={className}
-            hasListOpen={hasListOpen}
-            iconBaseUrl={iconBaseUrl}
-            style={style}
-        >
-            {children}
-        </Container>
-    )
-}

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

@@ -1,51 +0,0 @@
-/*=============================================== InputIconComponent ===============================================*/
-
-import { LibIcon } from "../../LibIcon"
-import { StyledInputIconContainer } from "../styles"
-import type { ILibInputIconContainer } from "../types"
-
-/**
- * @description Returns a icon located on the left of an input
- * @access Only for building library, do not export
- * @prop data-testid: string | undefined
- * @prop className: string | undefined
- * @prop icon: string | JSX.Element | undefined
- * @prop iconSize: number | undefined
- * @prop iconBaseUrl: string | undefined
- * @prop validationStatus: boolean | undefined
- * @prop disabled: boolean | undefined
- * @prop inputBackground: "light" | "dark" | undefined
- * @prop inputVariant: "rounded" | "pill" | undefined
- */
-export const InputIcon = ({
-    "data-testid": testid,
-    className,
-    icon,
-    iconSize = 24,
-    iconBaseUrl,
-    validationStatus,
-    inputBackground,
-    disabled,
-    inputVariant,
-}: ILibInputIconContainer) => {
-    if (!icon) return null
-
-    return (
-        <StyledInputIconContainer
-            data-testid={testid && `${testid}.IconContainer`}
-            className={className && "IconContainerLeft"}
-            $disabled={disabled}
-            $inputBackground={inputBackground}
-            $inputVariant={inputVariant}
-            $validationStatus={validationStatus}
-        >
-            <LibIcon
-                data-testid={testid && `${testid}.IconContainer.Icon`}
-                className={className && "IconLeft"}
-                icon={icon}
-                size={iconSize}
-                baseUrl={iconBaseUrl}
-            />
-        </StyledInputIconContainer>
-    )
-}

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

@@ -1,29 +0,0 @@
-/*=============================================== InputLeftContainer component ===============================================*/
-
-import { forwardRef } from "react"
-import { StyledInputLeftContainer } from "../styles"
-import type { ILibInputLeftContainer } from "../types"
-
-/**
- * @description Returns a container on the left of an input
- * @access Only for building library, do not export
- * @prop data-testid: string | undefined
- * @prop className: string | undefined
- * @prop children?: ReactChildren
- * @prop disabled: boolean | undefined
- */
-export const InputLeftContainer = forwardRef<
-    HTMLSpanElement,
-    ILibInputLeftContainer
->(({ "data-testid": testid, className, children, disabled }, ref) => {
-    return (
-        <StyledInputLeftContainer
-            data-testid={testid && `${testid}.LeftContainer`}
-            ref={ref}
-            className={className && "LeftContainer"}
-            $disabled={disabled}
-        >
-            {children}
-        </StyledInputLeftContainer>
-    )
-})

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

@@ -1,31 +0,0 @@
-/*=============================================== InputPrefix component ===============================================*/
-
-import { StyledInputPrefix } from "../styles"
-import type { ILibInputPrefix } from "../types"
-
-/**
- * @description Returns a prefix on the left of an input
- * @access Only for building library, do not export
- * @prop data-testid: string | undefined
- * @prop className: string | undefined
- * @prop inputBackground: "light" | "dark" | undefined
- * @prop prefix: string | JSX.Element | undefined
- */
-export const InputPrefix = ({
-    "data-testid": testid,
-    className,
-    prefix,
-    inputBackground,
-}: ILibInputPrefix) => {
-    if (!prefix) return null
-
-    return (
-        <StyledInputPrefix
-            data-testid={testid && `${testid}.Prefix`}
-            className={className && "Prefix"}
-            $inputBackground={inputBackground}
-        >
-            {prefix}
-        </StyledInputPrefix>
-    )
-}

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

@@ -1,35 +0,0 @@
-/*=============================================== InputRightContainer component ===============================================*/
-
-import { StyledInputRightContainer } from "../styles"
-import type { ILibInputRightContainer } from "../types"
-
-/**
- * @description Returns a container on the right of an input
- * @access Only for building library, do not export
- * @prop data-testid: string | undefined
- * @prop className: string | undefined
- * @prop disabled: boolean | undefined
- * @prop withPadding: boolean | undefined
- * @prop withBorder: boolean | undefined
- * @prop children?: ReactChildren
- */
-export const InputRightContainer = ({
-    "data-testid": testid,
-    className,
-    children,
-    disabled,
-    withPadding,
-    withBorder,
-}: ILibInputRightContainer) => {
-    return (
-        <StyledInputRightContainer
-            data-testid={testid && `${testid}.RightContainer`}
-            className={className && "RightContainer"}
-            $disabled={disabled}
-            $withPadding={withPadding}
-            $withBorder={withBorder}
-        >
-            {children}
-        </StyledInputRightContainer>
-    )
-}

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

@@ -1,31 +0,0 @@
-/*=============================================== InputSuffix component ===============================================*/
-
-import { StyledInputSuffix } from "../styles"
-import type { ILibInputSuffix } from "../types"
-
-/**
- * @description Add suffix on inputs with text
- * @access Only for building library, do not export
- * @prop data-testid: string | undefined
- * @prop className: string | undefined
- * @prop inputBackground: "light" | "dark" | undefined
- * @prop prefix: string | JSX.Element | undefined
- */
-export const InputSuffix = ({
-    "data-testid": testid,
-    className,
-    suffix,
-    inputBackground,
-}: ILibInputSuffix) => {
-    if (!suffix) return null
-
-    return (
-        <StyledInputSuffix
-            data-testid={testid && `${testid}.Suffix`}
-            className={className && "Suffix"}
-            $inputBackground={inputBackground}
-        >
-            {suffix}
-        </StyledInputSuffix>
-    )
-}

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

@@ -1,98 +0,0 @@
-/*=============================================== InputValidationHelper component ===============================================*/
-
-import { getIconSizeFromFont } from "../../../lib-utils"
-import { LibIcon } from "../../LibIcon"
-import { CloseCircle, CheckCircle } from "../../../icons"
-import {
-    HelperBottomContainer,
-    HelperBottomIconContainer,
-    StyledHelperBottom,
-} from "../../InputContainer/styles"
-import type { ILibInputValidationHelper } from "../types"
-
-/**
- * @description Returns a component for input validation, showing under the input
- * @access Only for building library, do not export
- * @prop data-testid: string | undefined
- * @prop className: string | undefined
- * @prop validation: { status: LibValidationStatus; message?: string; iconNotPassed?: LibIcon; iconNotPassedSize?: number; iconPassed?: LibIcon; iconPassedSize?: number; iconBaseUrl?: string }
- */
-export const InputValidationHelper = ({
-    "data-testid": testid,
-    className,
-    validation,
-}: ILibInputValidationHelper) => {
-    const {
-        status,
-        message,
-        iconNotPassed = (
-            <CloseCircle
-                data-testid={
-                    testid && `${testid}.ValidationHelper.IconContainer.Icon`
-                }
-                className={className && "ValidationIconBottom"}
-                size={getIconSizeFromFont("small")}
-                color="danger"
-            />
-        ),
-        iconNotPassedSize = getIconSizeFromFont("small"),
-        iconPassed = (
-            <CheckCircle
-                data-testid={
-                    testid && `${testid}.ValidationHelper.IconContainer.Icon`
-                }
-                className={className && "ValidationIconBottom"}
-                size={getIconSizeFromFont("small")}
-                color="success"
-            />
-        ),
-        iconPassedSize = getIconSizeFromFont("small"),
-        iconBaseUrl,
-    } = validation
-
-    if (!message || !validation || status === undefined) return null
-
-    return (
-        <HelperBottomContainer
-            data-testid={testid && `${testid}.ValidationHelper`}
-            className={className && "ValidationHelper"}
-        >
-            <HelperBottomIconContainer
-                data-testid={
-                    testid && `${testid}.ValidationHelper.IconContainer`
-                }
-                className={className && "ValidationIconContainerBottom"}
-                $iconSize={
-                    (status === false
-                        ? iconNotPassedSize
-                        : iconPassedSize) as number
-                }
-            >
-                <LibIcon
-                    data-testid={
-                        testid &&
-                        `${testid}.ValidationHelper.IconContainer.Icon`
-                    }
-                    className={className && "ValidationIconBottom"}
-                    icon={status === false ? iconNotPassed : iconPassed}
-                    size={status === false ? iconNotPassedSize : iconPassedSize}
-                    color={status === false ? "danger" : "success"}
-                    baseUrl={iconBaseUrl}
-                />
-            </HelperBottomIconContainer>
-
-            <StyledHelperBottom
-                data-testid={testid && `${testid}.ValidationHelper.Text`}
-                className={className && "ValidationTextBottom"}
-                $hasIcon
-                $iconSize={
-                    (status === false
-                        ? iconNotPassedSize
-                        : iconPassedSize) as number
-                }
-            >
-                {message}
-            </StyledHelperBottom>
-        </HelperBottomContainer>
-    )
-}

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

@@ -1,66 +0,0 @@
-/*=============================================== InputValidation component ===============================================*/
-
-import { CheckCircle, CloseCircle } from "../../../icons"
-import { LibIcon } from "../../LibIcon"
-import { StyledInputValidationIcon } from "../styles"
-import type { ILibInputValidationIcon } from "../types"
-
-const DEFAULT_ICON_SIZE = 16
-
-/**
- * @description Returns a icon on the right of an input when there's validation
- * @access Only for building library, do not export
- * @prop data-testid: string | undefined
- * @prop className: string | undefined
- * @prop inputBackground: "light" | "dark" | undefined
- * @prop validation: { status: LibValidationStatus; message?: string; iconNotPassed?: LibIcon; iconNotPassedSize?: number; iconPassed?: LibIcon; iconPassedSize?: number; iconBaseUrl?: string }
- */
-export const InputValidationIcon = ({
-    "data-testid": testid,
-    className,
-    validation,
-    inputBackground,
-}: ILibInputValidationIcon) => {
-    const commonIconProps = {
-        className: className && "ValidationIcon",
-        size: DEFAULT_ICON_SIZE,
-    }
-
-    const {
-        status,
-        iconPassed = (
-            <CheckCircle
-                data-testid={testid && `${testid}.Validation.Passed.Icon`}
-                {...commonIconProps}
-            />
-        ),
-        iconPassedSize = DEFAULT_ICON_SIZE,
-        iconNotPassed = (
-            <CloseCircle
-                data-testid={testid && `${testid}.Validation.NotPassed.Icon`}
-                {...commonIconProps}
-            />
-        ),
-        iconNotPassedSize = DEFAULT_ICON_SIZE,
-        iconBaseUrl,
-    } = validation
-
-    if (status === undefined) return null
-
-    return (
-        <StyledInputValidationIcon
-            data-testid={testid && `${testid}.ValidationIconContainer`}
-            className={className && "ValidationIconContainer"}
-            $inputBackground={inputBackground}
-            $validationStatus={status}
-        >
-            <LibIcon
-                data-testid={testid && `${testid}.ValidationIconContainer.Icon`}
-                className={className && "Icon"}
-                icon={status === false ? iconNotPassed : iconPassed}
-                size={status === false ? iconNotPassedSize : iconPassedSize}
-                baseUrl={iconBaseUrl}
-            />
-        </StyledInputValidationIcon>
-    )
-}

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

@@ -1,46 +0,0 @@
-/*=============================================== InputWrapper component ===============================================*/
-
-import classNames from "classnames"
-import { StyledInputWrapper } from "../styles"
-import type { ILibInputWrapper } from "../types"
-
-/**
- * @description Returns a wrapper for inputs holding icon left, input and right container
- * @access Only for building library, do not export
- * @prop data-testid: string | undefined
- * @prop className: string | undefined
- * @prop hasContainer: boolean | undefined
- * @prop hasListOpen: boolean | undefined
- * @prop isTextArea: boolean
- * @prop inputBackground: "light" | "dark" | undefined
- * @prop inputVariant: "rounded" | "pill" | undefined
- * @prop validationStatus: boolean | undefined
- * @prop children?: ReactChildren
- */
-export const InputWrapper = ({
-    "data-testid": testid,
-    className,
-    hasContainer,
-    children,
-    hasListOpen,
-    isTextArea,
-    inputBackground,
-    inputVariant,
-    validationStatus,
-}: ILibInputWrapper) => {
-    return (
-        <StyledInputWrapper
-            data-testid={hasContainer && testid ? `${testid}.Wrapper` : testid}
-            className={classNames(
-                hasContainer && className ? "Wrapper" : className,
-                { Open: hasListOpen }
-            )}
-            $isTextArea={isTextArea}
-            $inputBackground={inputBackground}
-            $inputVariant={inputVariant}
-            $validationStatus={validationStatus}
-        >
-            {children}
-        </StyledInputWrapper>
-    )
-}

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

@@ -1,51 +0,0 @@
-/*=============================================== ListInput component ===============================================*/
-
-import { forwardRef } from "react"
-import classNames from "classnames"
-import { StyledListInput } from "../styles"
-import type { ILibListInput } from "../types"
-
-/**
- * @description Lists used in Inputs
- * @access Only for building library, do not export
- * @prop data-testid: string | undefined
- * @prop className: string | undefined
- * @prop isOpen: boolean
- * @prop direction: "up" | "down" | undefined
- * @prop inputBackground: "light" | "dark" | undefined
- * @prop inputVariant: "rounded" | "pill" | undefined
- * @prop validationStatus: boolean | undefined
- * @prop children?: ReactChildren
- */
-export const ListInput = forwardRef<HTMLDivElement, ILibListInput>(
-    (
-        {
-            "data-testid": testid,
-            className,
-            children,
-            direction = "down",
-            inputBackground,
-            validationStatus,
-            isOpen,
-            inputVariant,
-        },
-        ref
-    ) => {
-        return (
-            <StyledListInput
-                data-testid={testid && `${testid}.ListInput`}
-                className={classNames(
-                    { ListInput: className },
-                    { Open: isOpen }
-                )}
-                ref={ref}
-                $direction={direction}
-                $inputBackground={inputBackground}
-                $validationStatus={validationStatus}
-                $inputVariant={inputVariant}
-            >
-                {children}
-            </StyledListInput>
-        )
-    }
-)

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

@@ -1,56 +0,0 @@
-/*=============================================== ListInputItem component ===============================================*/
-
-import { forwardRef } from "react"
-import classNames from "classnames"
-import { StyledListInputItem } from "../styles"
-import type { ILibListInputItem } from "../types"
-
-/**
- * @description Item for lists used in Inputs
- * @access Only for building library, do not export
- * @prop data-testid: string | undefined
- * @prop className: string | undefined
- * @prop isActive: boolean => only if readOnly is not defined or set to false
- * @prop isHovered?: boolean => only if readOnly is not defined or set to false
- * @prop onClick: MouseEventHandler<HTMLSpanElement> => only if readOnly is not defined or set to false
- * @prop readOnly?: boolean => only if isActive is not defined
- * @prop validationStatus: boolean | undefined
- * @prop inputBackground: "light" | "dark" | undefined
- * @prop children?: ReactChildren
- */
-export const ListInputItem = forwardRef<HTMLSpanElement, ILibListInputItem>(
-    (
-        {
-            "data-testid": testid,
-            className,
-            validationStatus,
-            inputBackground,
-            children,
-            isActive,
-            onClick,
-            readOnly,
-            isHovered,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledListInputItem
-                data-testid={testid && `${testid}.ListItem`}
-                ref={ref}
-                className={classNames(
-                    { ListItem: className },
-                    { Active: isActive },
-                    { Hovered: isHovered }
-                )}
-                onClick={onClick}
-                $readOnly={readOnly}
-                $validationStatus={validationStatus}
-                $inputBackground={inputBackground}
-                {...rest}
-            >
-                {children}
-            </StyledListInputItem>
-        )
-    }
-)

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

@@ -1,15 +0,0 @@
-/*=============================================== InputComponents exports ===============================================*/
-
-export * from "./components/InputContainer"
-export * from "./components/InputIcon"
-export * from "./components/InputRightContainer"
-export * from "./components/InputValidationIcon"
-export * from "./components/InputValidationHelper"
-export * from "./components/InputButton"
-export * from "./components/InputWrapper"
-export * from "./components/ListInput"
-export * from "./components/ListInputItem"
-export * from "./components/InputPrefix"
-export * from "./components/InputSuffix"
-export * from "./components/InputLeftContainer"
-export * from "./components/InputAndListContainer"