@julseb-lib/react 0.0.50 → 0.0.52

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

@@ -1,289 +0,0 @@
-/*=============================================== InputComponents types ===============================================*/
-
-import type { CSSProperties, MouseEventHandler } from "react"
-import type {
-    ReactChildren,
-    LibInputListDirection,
-    LibIcon,
-    LibInputBackground,
-    LibInputVariant,
-    LibValidationStatus,
-    RequireAtLeastOne,
-    LibInputPrefixAndSuffix,
-    LibHelperBottom,
-} from "../../types"
-
-/*====================== Validation ======================*/
-
-interface LibValidationHelper {
-    status: LibValidationStatus
-    message?: string
-    iconNotPassed?: LibIcon
-    iconNotPassedSize?: number
-    iconPassed?: LibIcon
-    iconPassedSize?: number
-    iconBaseUrl?: string
-}
-
-export interface LibInputWithValidation {
-    validation?: LibValidationHelper
-}
-
-export interface ILibInputValidationHelper {
-    "data-testid": string | undefined
-    className: string | undefined
-    validation: LibValidationHelper
-}
-
-export interface ILibInputValidationIcon {
-    "data-testid": string | undefined
-    className: string | undefined
-    inputBackground: LibInputBackground | undefined
-    validation: LibValidationHelper
-}
-
-/*====================== No focus ======================*/
-
-export interface ILibInputNoFocusKeys {
-    type:
-        | undefined
-        | null
-        | "email"
-        | "number"
-        | "tel"
-        | "text"
-        | "url"
-        | "color"
-        | "date"
-        | "datetime-local"
-        | "month"
-        | "week"
-        | "file"
-        | "password"
-        | "select"
-        | "textarea"
-        | "time"
-    focusKeys?: never
-    showKeys?: never
-}
-
-/*====================== InputBase ======================*/
-
-/**
- * @description Base props for inputs
- * @prop data-testid?: string
- */
-export interface ILibInputBase
-    extends Partial<
-        Pick<
-            ILibInputContainer,
-            | "data-testid"
-            | "id"
-            | "label"
-            | "labelComment"
-            | "helper"
-            | "helperBottom"
-            | "validation"
-            | "iconBaseUrl"
-        >
-    > {
-    children?: never
-    inputBackground?: LibInputBackground
-    inputVariant?: LibInputVariant
-    containerStyle?: CSSProperties
-    inputAndListContainerStyle?: CSSProperties
-}
-
-export interface ILibExtendedInputBase extends ILibInputBase {
-    counter?: boolean
-    maxLength?: number
-}
-
-/*====================== InputContainer ======================*/
-
-export interface ILibInputContainer {
-    "data-testid": string | undefined
-    className: string | undefined
-    id: string | undefined
-    label: string | undefined
-    labelComment: string | undefined
-    helper: string | undefined
-    helperBottom: LibHelperBottom | undefined
-    validation: LibValidationHelper | undefined
-    children?: ReactChildren
-    value: any | undefined
-    counter: boolean | undefined
-    maxLength: number | undefined
-    hasListOpen?: boolean
-    iconBaseUrl?: string
-    style?: CSSProperties
-}
-
-/*====================== InputIconContainer ======================*/
-
-export interface ILibInputIconContainer {
-    "data-testid": string | undefined
-    className: string | undefined
-    icon: LibIcon | undefined
-    iconSize: number | undefined
-    iconBaseUrl: string | undefined
-    validationStatus: LibValidationStatus | undefined
-    disabled: boolean | undefined
-    inputBackground: LibInputBackground | undefined
-    inputVariant: LibInputVariant | undefined
-}
-
-/*====================== InputRightContainer ======================*/
-
-export interface ILibInputRightContainer {
-    "data-testid": string | undefined
-    className: string | undefined
-    disabled: boolean | undefined
-    withPadding: boolean | undefined
-    withBorder: boolean | undefined
-    children?: ReactChildren
-}
-
-/*====================== InputLeftContainer ======================*/
-
-export interface ILibInputLeftContainer {
-    "data-testid": string | undefined
-    className: string | undefined
-    children?: ReactChildren
-    disabled: boolean | undefined
-}
-
-/*====================== InputButton ======================*/
-
-interface ILibInputButtonBase {
-    "data-testid": string | undefined
-    "aria-label": string | undefined
-    onClick?: MouseEventHandler<HTMLButtonElement>
-    disabled: boolean | undefined
-    inputBackground: LibInputBackground | undefined
-    validationStatus: LibValidationStatus | undefined
-    className: string | undefined
-}
-
-interface InputButtonWithIcon extends ILibInputButtonBase {
-    icon: LibIcon | undefined
-    iconSize: number | undefined
-    iconBaseUrl: string | undefined
-    text?: never
-}
-
-interface InputButtonWithText extends ILibInputButtonBase {
-    icon?: never
-    iconSize?: never
-    iconBaseUrl?: never
-    text: string | undefined
-}
-
-export type ILibInputButton = RequireAtLeastOne<
-    InputButtonWithIcon | InputButtonWithText,
-    "icon" | "text"
->
-
-/*====================== InputWrapper ======================*/
-
-export interface ILibInputWrapper {
-    "data-testid": string | undefined
-    className: string | undefined
-    hasContainer: boolean | undefined
-    children?: ReactChildren
-    hasListOpen: boolean | undefined
-    isTextArea: boolean
-    inputBackground: LibInputBackground | undefined
-    inputVariant: LibInputVariant | undefined
-    validationStatus: LibValidationStatus
-}
-
-/*====================== List input ======================*/
-
-export interface ILibListInput {
-    "data-testid": string | undefined
-    className: string | undefined
-    direction: LibInputListDirection | undefined
-    inputBackground: LibInputBackground | undefined
-    inputVariant: LibInputVariant | undefined
-    validationStatus: LibValidationStatus
-    isOpen: boolean
-    children?: ReactChildren
-}
-
-/*====================== List input item ======================*/
-
-interface ILibListInputItemBase {
-    "data-testid": string | undefined
-    className: string | undefined
-    validationStatus: LibValidationStatus
-    inputBackground: LibInputBackground | undefined
-    children?: ReactChildren
-}
-
-interface ListInputItemActive extends ILibListInputItemBase {
-    isActive: boolean
-    isHovered?: boolean
-    onClick: MouseEventHandler<HTMLSpanElement>
-    readOnly?: never
-}
-
-interface ListInputItemReadOnly extends ILibListInputItemBase {
-    isActive?: never
-    isHovered?: never
-    onClick?: never
-    readOnly: true
-}
-
-export type ILibListInputItem = ListInputItemActive | ListInputItemReadOnly
-
-/*====================== Input with icon and prefix / suffix ======================*/
-
-export interface ILibInputIcon {
-    suffix?: LibInputPrefixAndSuffix
-    icon?: LibIcon
-    iconSize?: number
-    iconBaseUrl?: string
-    prefix?: string
-}
-
-/*====================== Inputs with prefix and suffix ======================*/
-
-interface ILibPrefixAndSuffixBase {
-    "data-testid": string | undefined
-    className: string | undefined
-    inputBackground: LibInputBackground | undefined
-}
-
-export interface ILibInputPrefix extends ILibPrefixAndSuffixBase {
-    /**
-     * @description Add prefix on inputs with text
-     * @prop data-testid: string | undefined
-     * @prop className: string | undefined
-     * @prop inputBackground: "light" | "dark" | undefined
-     * @prop suffix: string | JSX.Element | undefined
-     */
-    prefix: LibInputPrefixAndSuffix | undefined
-}
-
-export interface ILibInputSuffix extends ILibPrefixAndSuffixBase {
-    /**
-     * @description Add suffix on inputs with text
-     * @prop data-testid: string | undefined
-     * @prop className: string | undefined
-     * @prop inputBackground: "light" | "dark" | undefined
-     * @prop prefix: string | JSX.Element | undefined
-     */
-    suffix?: LibInputPrefixAndSuffix
-}
-
-/*====================== InputAndListContainer ======================*/
-
-export interface ILibInputAndListContainer {
-    "data-testid": string | undefined
-    className: string | undefined
-    hasListOpen: boolean
-    isParent: boolean | undefined
-    inputAndListContainerStyle: CSSProperties | undefined
-    children?: ReactChildren
-}

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

@@ -1,96 +0,0 @@
-/*=============================================== HelperBottom ===============================================*/
-
-import type { FC } from "react"
-import { LibIcon } from "../LibIcon"
-import { getIconSizeFromFont } from "../../lib-utils"
-import {
-    StyledHelperBottom,
-    HelperBottomContainer,
-    HelperBottomIconContainer,
-} from "./styles"
-import type { ILibHelperBottom } from "./subtypes"
-
-export const HelperBottom: FC<ILibHelperBottom> = ({
-    "data-testid": testid,
-    className,
-    helperBottom,
-    iconBaseUrl,
-}) => {
-    if (typeof helperBottom === "string") {
-        return <StyledHelperBottom>{helperBottom}</StyledHelperBottom>
-    }
-
-    if (typeof helperBottom === "object") {
-        const {
-            element,
-            text,
-            textColor,
-            fontStyle,
-            icon,
-            iconColor = "primary",
-            iconSize = getIconSizeFromFont("small") as number,
-            linkColor,
-        } = helperBottom
-
-        if (element)
-            return (
-                <StyledHelperBottom linkColor={linkColor}>
-                    {element}
-                </StyledHelperBottom>
-            )
-
-        if (icon)
-            return (
-                <HelperBottomContainer
-                    data-testid={testid && `${testid}.HelperBottomContainer`}
-                    className={className && "HelperBottomContainer"}
-                >
-                    <HelperBottomIconContainer
-                        data-testid={
-                            testid && `${testid}.HelperBottom.IconContainer`
-                        }
-                        className={className && "BottomIconContainer"}
-                        $iconSize={iconSize}
-                    >
-                        <LibIcon
-                            data-testid={
-                                testid &&
-                                `${testid}.HelperBottom.IconContainer.Icon`
-                            }
-                            className={className && "HelperBottomIcon"}
-                            icon={icon}
-                            color={iconColor}
-                            size={iconSize || getIconSizeFromFont("small")}
-                            baseUrl={iconBaseUrl}
-                        />
-                    </HelperBottomIconContainer>
-
-                    <StyledHelperBottom
-                        data-testid={testid && `${testid}.HelperBottom.Text`}
-                        className={className && "HelperBottomText"}
-                        color={textColor}
-                        linkColor={linkColor}
-                        $fontStyle={fontStyle}
-                        $iconSize={iconSize}
-                        $hasIcon
-                    >
-                        {helperBottom.text}
-                    </StyledHelperBottom>
-                </HelperBottomContainer>
-            )
-
-        return (
-            <StyledHelperBottom
-                data-testid={testid && `${testid}.HelperBottom`}
-                className={className && "HelperBottom"}
-                color={textColor}
-                $fontStyle={fontStyle}
-                $hasIcon={false}
-            >
-                {text}
-            </StyledHelperBottom>
-        )
-    }
-
-    return null
-}

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

@@ -1,132 +0,0 @@
-/*=============================================== InputContainer component ===============================================*/
-
-import { forwardRef } from "react"
-import classNames from "classnames"
-import { Text } from "../../"
-import { InputValidationHelper } from "../InputComponents"
-import { HelperBottom } from "./HelperBottom"
-import {
-    StyledInputContainer,
-    Label,
-    LabelComment,
-    StyledHelperBottom,
-} from "./styles"
-import type { ILibInputContainer } from "./types"
-
-/**
- * @description Returns a InputContainer component
- * @link https://documentation-components-react.vercel.app/components/input-container
- * @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 }
- */
-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}
-
-                        {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>
-                )}
-
-                {children}
-
-                {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>
-                )}
-
-                {validation && (
-                    <InputValidationHelper
-                        data-testid={testid}
-                        className={className}
-                        validation={validation}
-                    />
-                )}
-            </StyledInputContainer>
-        )
-    }
-)

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

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

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

@@ -1,89 +0,0 @@
-/*=============================================== InputContainer styles ===============================================*/
-
-import type { FC } from "react"
-import styled from "styled-components"
-import { stringifyPx } from "@julseb-lib/utils"
-import {
-    setDefaultTheme,
-    Mixins,
-    Text,
-    FONT_SIZES,
-    FONT_WEIGHTS,
-    LINE_HEIGHTS,
-    SPACERS,
-} from "../../"
-import type { CssFontStyle } from "../../types"
-
-const StyledInputContainer = styled.div`
-    position: relative;
-    width: 100%;
-    z-index: 1;
-    ${Mixins.Flexbox({
-        $flexDirection: "column",
-        $alignItems: "stretch",
-        $gap: "xxs",
-    })}
-
-    &.Open {
-        z-index: 20;
-    }
-`
-
-const Label = styled.label`
-    color: ${({ theme }) => theme.PRIMARY_500};
-    font-weight: ${FONT_WEIGHTS.BLACK};
-`
-
-const LabelComment = styled.span`
-    font-size: ${FONT_SIZES.SMALL};
-    color: ${({ theme }) => theme.GRAY_500};
-    font-weight: ${FONT_WEIGHTS.REGULAR};
-    font-style: italic;
-    line-height: calc(${FONT_SIZES.BODY} * ${LINE_HEIGHTS.BODY});
-`
-
-const HelperBottomContainer = styled.div`
-    ${Mixins.Flexbox({
-        $gap: "xxs",
-    })}
-`
-
-const HelperBottomIconContainer = styled.span<{ $iconSize: number }>`
-    height: calc(${FONT_SIZES.SMALL} * ${LINE_HEIGHTS.BODY});
-    width: ${({ $iconSize }) => stringifyPx($iconSize)};
-    ${Mixins.Flexbox({
-        $inline: true,
-        $alignItems: "center",
-        $justifyContent: "center",
-    })}
-`
-
-const StyledHelperBottom = styled(Text).attrs({ tag: "small" })<{
-    $fontStyle?: CssFontStyle
-    $hasIcon?: boolean
-    $iconSize?: number
-}>`
-    font-style: ${({ $fontStyle }) => $fontStyle};
-    width: ${({ $hasIcon, $iconSize }) =>
-        $hasIcon &&
-        $iconSize &&
-        `calc(100% - ${stringifyPx($iconSize)} - ${SPACERS.XXS})`};
-` as FC<any>
-
-setDefaultTheme([
-    StyledInputContainer,
-    Label,
-    LabelComment,
-    HelperBottomContainer,
-    HelperBottomIconContainer,
-    StyledHelperBottom,
-])
-
-export {
-    StyledInputContainer,
-    Label,
-    LabelComment,
-    HelperBottomContainer,
-    HelperBottomIconContainer,
-    StyledHelperBottom,
-}

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

@@ -1,10 +0,0 @@
-/*=============================================== Header sub components types ===============================================*/
-
-import type { ILibInputContainer } from "./types"
-
-// ! DO NOT EXPORT THOSE TYPES, ONLY USE THEM IN THOSE COMPONENTS
-
-export type ILibHelperBottom = Pick<
-    ILibInputContainer,
-    "helperBottom" | "data-testid" | "className" | "iconBaseUrl"
->

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

@@ -1,25 +0,0 @@
-/*=============================================== InputContainer types ===============================================*/
-
-import type { CSSProperties } from "react"
-import type {
-    LibComponentBase,
-    ReactChildren,
-    LibHelperBottom,
-} from "../../types"
-import type { LibInputWithValidation } from "../InputComponents/types"
-
-export interface ILibInputContainer
-    extends LibComponentBase<HTMLDivElement>,
-        LibInputWithValidation {
-    label?: string
-    labelComment?: string
-    helper?: string
-    helperBottom?: LibHelperBottom
-    children?: ReactChildren
-    value?: any
-    counter?: boolean
-    maxLength?: number
-    hasListOpen?: boolean
-    style?: CSSProperties
-    iconBaseUrl?: string
-}