@julseb-lib/react 0.0.63 → 0.0.65

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

@@ -0,0 +1,289 @@
+/*=============================================== 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

@@ -0,0 +1,96 @@
+/*=============================================== 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

@@ -0,0 +1,132 @@
+/*=============================================== 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

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

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

@@ -0,0 +1,89 @@
+/*=============================================== 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

@@ -0,0 +1,10 @@
+/*=============================================== 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

@@ -0,0 +1,25 @@
+/*=============================================== 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
+}