@julseb-lib/react 0.0.61 → 0.0.64

package/dist/lib/components/InputCounter/InputCounter.tsx

@@ -0,0 +1,287 @@
+/*=============================================== InputCounter component ===============================================*/
+
+import { forwardRef, type ChangeEvent, useCallback } from "react"
+import classNames from "classnames"
+import { ButtonIcon } from "../../"
+import { InputContainer } from "../InputComponents"
+import { Plus, Minus } from "../../icons"
+import { roundIconSize } from "../../lib-utils"
+import type { ILibButtonIcon } from "../ButtonIcon/types"
+import {
+    InputCounterWrapper,
+    Input,
+    NumberValue,
+    StyledInputWrapper,
+} from "./styles"
+import type { ILibInputCounter } from "./types"
+
+/**
+ * @description Returns a InputCounter component
+ * @link https://documentation-components-react.vercel.app/components/input-counter
+ * @extends HTMLInputElement
+ * @prop data-testid?: string
+ * @prop ref?: ForwardedRef<HTMLInputElement>
+ * @prop value: number
+ * @prop setValue: Dispatch<SetStateAction< number>>
+ * @prop min?: number
+ * @prop max?: number
+ * @prop step?: number
+ * @prop buttonVariant?: "plain" | "transparent" | "ghost"
+ * @prop icons?: { plus?: string | JSX.Element; minus?: string | JSX.Element }
+ * @prop iconSizes?: { plus?: number; minus?: number }
+ * @prop labelButtons?: { plus?: string; minus?: string }
+ * @prop showButtonTooltip?: boolean
+ * @prop inputNoEdit?: boolean
+ * @prop inputBackground?: "light" | "dark" => only if inputNoEdit is set to true or undefined
+ * @prop inputVariant?: "rounded" | "pill" => only if inputNoEdit is set to true or undefined
+ * @prop id?: string
+ * @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 validation?: { status: LibValidationStatus; message?: string; iconNotPassed?: LibIcon; iconNotPassedSize?: number; iconPassed?: LibIcon; iconPassedSize?: number; iconBaseUrl?: string }
+ * @prop iconBaseUrl?: string
+ * @prop inputBackground?: "light" | "dark"
+ * @prop inputVariant?: "rounded" | "pill"
+ * @prop containerStyle?: CSSProperties
+ */
+
+const BUTTON_SIZE = 32 as const
+
+export const InputCounter = forwardRef<HTMLInputElement, ILibInputCounter>(
+    (
+        {
+            "data-testid": testid,
+            className,
+            label,
+            labelComment,
+            helper,
+            helperBottom,
+            id,
+            validation,
+            inputBackground,
+            inputVariant = "rounded",
+            value = 0,
+            setValue,
+            min,
+            max,
+            step = 1,
+            buttonVariant,
+            iconSizes = {
+                plus: roundIconSize(BUTTON_SIZE),
+                minus: roundIconSize(BUTTON_SIZE),
+            },
+            icons,
+            iconBaseUrl,
+            labelButtons = {
+                plus: "Plus",
+                minus: "Minus",
+            },
+            showButtonTooltip,
+            inputNoEdit,
+            disabled,
+            containerStyle,
+            ...rest
+        },
+        ref
+    ) => {
+        const hasContainer: boolean = !!(
+            label ||
+            labelComment ||
+            helper ||
+            helperBottom ||
+            validation
+        )
+
+        const buttonProps: Partial<
+            Pick<
+                ILibButtonIcon,
+                | "size"
+                | "showTooltip"
+                | "disabled"
+                | "aria-disabled"
+                | "variant"
+                | "color"
+                | "iconBaseUrl"
+            >
+        > = {
+            size: 32,
+            showTooltip: showButtonTooltip && {
+                position: "top",
+                offset: 2,
+            },
+            variant: buttonVariant,
+            color: validation?.status === false ? "danger" : "primary",
+            iconBaseUrl,
+        }
+
+        const isMinDisabled = disabled || !!(min && value <= min)
+        const isMaxDisabled = disabled || !!(max && value >= max)
+
+        const handleMinus = useCallback(() => {
+            const newValue = value - step
+
+            if (min && newValue < min) {
+                setValue(min)
+                return
+            }
+
+            setValue(newValue)
+        }, [min, setValue, step, value])
+
+        const handlePlus = useCallback(() => {
+            const newValue = value + step
+
+            if (max && newValue > max) {
+                setValue(max)
+                return
+            }
+
+            setValue(newValue)
+        }, [max, setValue, step, value])
+
+        const handleChange = useCallback(
+            (e: ChangeEvent<HTMLInputElement>) => {
+                const numberValue = Number(e.target.value)
+
+                if (min && numberValue < min) {
+                    setValue(min)
+                    return
+                }
+                if (max && numberValue > max) {
+                    setValue(max)
+                    return
+                }
+
+                setValue(numberValue)
+            },
+            [max, min, setValue]
+        )
+
+        return (
+            <InputContainer
+                data-testid={testid}
+                className={className}
+                label={label}
+                labelComment={labelComment}
+                helper={helper}
+                helperBottom={helperBottom}
+                id={id}
+                validation={validation}
+                value={value}
+                counter={undefined}
+                maxLength={undefined}
+                iconBaseUrl={iconBaseUrl}
+                style={containerStyle}
+                hasListOpen={undefined}
+            >
+                <InputCounterWrapper
+                    data-testid={
+                        hasContainer && testid
+                            ? `${testid}.InputCounterWrapper`
+                            : testid
+                    }
+                    className={
+                        hasContainer && className
+                            ? "InputCounterWrapper"
+                            : className
+                    }
+                    $isInputEditable={!inputNoEdit}
+                >
+                    <ButtonIcon
+                        data-testid={testid && `${testid}.Button.Minus`}
+                        className={className && "ButtonMinus"}
+                        icon={
+                            icons?.minus || (
+                                <Minus
+                                    data-testid={
+                                        testid && `${testid}.Button.Minus.Icon`
+                                    }
+                                    className={className && "IconMinus"}
+                                    size={iconSizes.minus}
+                                />
+                            )
+                        }
+                        iconSize={iconSizes.minus}
+                        aria-label={labelButtons.minus}
+                        tooltip={labelButtons.minus}
+                        onClick={handleMinus}
+                        disabled={isMinDisabled}
+                        aria-disabled={isMinDisabled}
+                        {...(buttonProps as any)}
+                    />
+
+                    {!inputNoEdit ? (
+                        <StyledInputWrapper
+                            data-testid={testid}
+                            className={className}
+                            hasContainer={hasContainer}
+                            isTextArea={false}
+                            inputBackground={inputBackground}
+                            inputVariant={inputVariant}
+                            validationStatus={validation?.status}
+                            hasListOpen={undefined}
+                        >
+                            <Input
+                                data-testid={testid && `${testid}.Input`}
+                                className={classNames(
+                                    { Input: className },
+                                    { WithListOpen: false }
+                                )}
+                                id={id}
+                                ref={ref}
+                                type="number"
+                                value={value}
+                                onChange={handleChange}
+                                min={min}
+                                max={max}
+                                step={step}
+                                disabled={disabled}
+                                aria-disabled={disabled}
+                                $inputBackground={inputBackground}
+                                $inputVariant={inputVariant}
+                                $disabled={disabled}
+                                $validationStatus={validation?.status}
+                                $length={value.toString().length}
+                                {...rest}
+                            />
+                        </StyledInputWrapper>
+                    ) : (
+                        <NumberValue
+                            data-testid={testid && `${testid}.Number`}
+                            className={className && "NumberValue"}
+                            ref={ref}
+                            $disabled={disabled}
+                            {...rest}
+                        >
+                            {value}
+                        </NumberValue>
+                    )}
+
+                    <ButtonIcon
+                        data-testid={testid && `${testid}.Button.Plus`}
+                        className={className && "ButtonPlus"}
+                        icon={
+                            icons?.plus || (
+                                <Plus
+                                    data-testid={
+                                        testid && `${testid}.Button.Plus.Icon`
+                                    }
+                                    className={className && "IconPlus"}
+                                    size={iconSizes.plus}
+                                />
+                            )
+                        }
+                        iconSize={iconSizes.plus}
+                        aria-label={labelButtons.plus}
+                        tooltip={labelButtons.plus}
+                        onClick={handlePlus}
+                        disabled={isMaxDisabled}
+                        aria-disabled={isMaxDisabled}
+                        {...(buttonProps as any)}
+                    />
+                </InputCounterWrapper>
+            </InputContainer>
+        )
+    }
+)

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

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

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

@@ -0,0 +1,53 @@
+/*=============================================== InputCounter styles ===============================================*/
+
+import styled from "styled-components"
+import {
+    FONT_SIZES,
+    FONT_WEIGHTS,
+    Mixins,
+    SPACERS,
+    setDefaultTheme,
+} from "../../"
+import { InputBaseMixin } from "../ComponentsMixins"
+import { InputWrapper } from "../InputComponents"
+import type { ILibInputCounterStyles } from "./subtypes"
+
+const InputCounterWrapper = styled.div<{
+    $isInputEditable: boolean | undefined
+}>`
+    ${({ $isInputEditable }) =>
+        Mixins.Flexbox({
+            $gap: $isInputEditable ? "xs" : "s",
+            $alignItems: "center",
+        })}
+`
+
+const StyledInputWrapper = styled(InputWrapper)`
+    width: fit-content;
+`
+
+const Input = styled.input<ILibInputCounterStyles>`
+    ${InputBaseMixin}
+    width: ${({ $length }) =>
+        $length > 3 ? `calc(48px + ${$length} * ${SPACERS.XS})` : "48px"};
+    text-align: center;
+    flex-grow: inherit;
+    -moz-appearance: textfield;
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+`
+
+const NumberValue = styled.span<{ $disabled: boolean | undefined }>`
+    font-size: ${FONT_SIZES.H4};
+    font-weight: ${FONT_WEIGHTS.BLACK};
+    color: ${({ $disabled, theme }) =>
+        $disabled ? theme.GRAY_500 : theme.FONT};
+`
+
+setDefaultTheme([InputCounterWrapper, Input, NumberValue])
+
+export { InputCounterWrapper, Input, NumberValue, StyledInputWrapper }

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

@@ -0,0 +1,9 @@
+/*=============================================== InputCounter sub components types ===============================================*/
+
+import type { ILibInputBaseMixin } from "../ComponentsMixins"
+
+// ! DO NOT EXPORT THOSE TYPES, ONLY USE THEM IN INPUT_COUNTER COMPONENTS
+
+export interface ILibInputCounterStyles extends ILibInputBaseMixin {
+    $length: number
+}

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

@@ -0,0 +1,51 @@
+/*=============================================== InputCounter types ===============================================*/
+
+import type { InputHTMLAttributes } from "react"
+import type {
+    LibIcon,
+    LibInputBackground,
+    LibInputVariant,
+    DispatchState,
+    LibButtonIconVariant,
+} from "../../types"
+import type { ILibInputBase } from "../InputComponents/types"
+
+type ILibInputCounterBase = InputHTMLAttributes<HTMLInputElement> &
+    ILibInputBase & {
+        value: number
+        setValue: DispatchState<number>
+        min?: number
+        max?: number
+        step?: number
+        type?: never
+        buttonVariant?: LibButtonIconVariant
+        icons?: {
+            plus?: LibIcon
+            minus?: LibIcon
+        }
+        iconSizes?: {
+            plus?: number
+            minus?: number
+        }
+        labelButtons?: {
+            plus?: string
+            minus?: string
+        }
+        showButtonTooltip?: boolean
+    }
+
+interface InputCounterInputEditable extends ILibInputCounterBase {
+    inputNoEdit?: true | undefined
+    inputBackground?: LibInputBackground
+    inputVariant?: LibInputVariant
+}
+
+interface InputCounterInputNotEditable extends ILibInputCounterBase {
+    inputNoEdit?: false
+    inputBackground?: never
+    inputVariant?: never
+}
+
+export type ILibInputCounter =
+    | InputCounterInputEditable
+    | InputCounterInputNotEditable

package/dist/lib/components/InputImage/EmptyContainer.tsx

@@ -0,0 +1,41 @@
+/*=============================================== EmptyContainer ===============================================*/
+
+import { Image } from "../../icons"
+import { LibIcon } from "../LibIcon"
+import { StyledEmptyContainer } from "./styles"
+import type { ILibEmptyContainer } from "./subtypes"
+
+export const EmptyContainer = ({
+    "data-testid": testid,
+    className,
+    validation,
+    iconSizes,
+    icons,
+    iconBaseUrl,
+}: ILibEmptyContainer) => {
+    return (
+        <StyledEmptyContainer
+            data-testid={testid && `${testid}.EmptyContainer`}
+            className={className && "EmptyContainer"}
+            $validationStatus={validation?.status}
+        >
+            <LibIcon
+                data-testid={testid && `${testid}.EmptyContainer.Icon`}
+                className={className && "IconEmpty"}
+                icon={
+                    icons?.empty ?? (
+                        <Image
+                            data-testid={
+                                testid && `${testid}.EmptyContainer.Icon`
+                            }
+                            className={className && "IconEmpty"}
+                            size={iconSizes?.empty ?? 48}
+                        />
+                    )
+                }
+                size={iconSizes?.empty ?? 48}
+                baseUrl={iconBaseUrl}
+            />
+        </StyledEmptyContainer>
+    )
+}

package/dist/lib/components/InputImage/HoverContainer.tsx

@@ -0,0 +1,48 @@
+/*=============================================== HoverContainer ===============================================*/
+
+import classNames from "classnames"
+import { LibIcon } from "../LibIcon"
+import { Edit } from "../../icons"
+import { StyledHoverContainer } from "./styles"
+import type { ILibHoverContainer } from "./subtypes"
+
+export const HoverContainer = ({
+    "data-testid": testid,
+    className,
+    validation,
+    iconSizes,
+    icons,
+    iconBaseUrl,
+    isVisible,
+    disabled = false,
+}: ILibHoverContainer) => {
+    return (
+        <StyledHoverContainer
+            data-testid={testid && `${testid}.HoverContainer`}
+            className={classNames(
+                { HoverContainer: className },
+                { Visible: isVisible }
+            )}
+            $validationStatus={validation?.status}
+            $disabled={disabled}
+        >
+            <LibIcon
+                data-testid={testid && `${testid}.EmptyContainer.Icon`}
+                className={className && "IconEmpty"}
+                icon={
+                    icons?.hover ?? (
+                        <Edit
+                            data-testid={
+                                testid && `${testid}.HoverContainer.Icon`
+                            }
+                            className={className && "IconHover"}
+                            size={iconSizes?.hover ?? 32}
+                        />
+                    )
+                }
+                size={iconSizes?.hover ?? 32}
+                baseUrl={iconBaseUrl}
+            />
+        </StyledHoverContainer>
+    )
+}

package/dist/lib/components/InputImage/InputImage.tsx

@@ -0,0 +1,151 @@
+/*=============================================== InputImage component ===============================================*/
+
+import { forwardRef, useCallback, useState } from "react"
+import { InputContainer } from "../InputComponents"
+import { EmptyContainer } from "./EmptyContainer"
+import { HoverContainer } from "./HoverContainer"
+import { StyledInputImage, StyledImage, StyledInput } from "./styles"
+import type { ILibInputImage } from "./types"
+
+/**
+ * @description Returns a InputImage component
+ * @link https://documentation-components-react.vercel.app/components/input-image
+ * @extends HTMLInputElement
+ * @prop data-testid?: string
+ * @prop ref?: ForwardedRef<HTMLInputElement>
+ * @prop id: string
+ * @prop value: string
+ * @prop width?: string | number
+ * @prop height?: string | number
+ * @prop size?: string | number
+ * @prop borderRadius?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | { topLeft?: LibRadiuses; topRight?: LibRadiuses; bottomLeft?: LibRadiuses; bottomRight?: LibRadiuses }
+ * @prop icons?: { empty?: string | JSX.Element; hover?: string | JSX.Element }
+ * @prop iconSizes?: { empty?: number; hover?: number }
+ * @prop iconBaseUrl?: string
+ * @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 validation?: { status: LibValidationStatus; message?: string; iconNotPassed?: LibIcon; iconNotPassedSize?: number; iconPassed?: LibIcon; iconPassedSize?: number; iconBaseUrl?: string }
+ * @prop iconBaseUrl?: string
+ * @prop containerStyle?: CSSProperties
+ */
+export const InputImage = forwardRef<HTMLInputElement, ILibInputImage>(
+    (
+        {
+            "data-testid": testid,
+            className,
+            id,
+            label,
+            labelComment,
+            helper,
+            helperBottom,
+            validation,
+            value,
+            icons,
+            iconSizes,
+            iconBaseUrl,
+            size,
+            width = 64,
+            height = 64,
+            borderRadius = "m",
+            disabled,
+            containerStyle,
+            ...rest
+        },
+        ref
+    ) => {
+        const hasContainer: boolean = !!(
+            label ||
+            labelComment ||
+            helper ||
+            helperBottom ||
+            validation
+        )
+
+        const [isHovered, setIsHovered] = useState(false)
+
+        const handleMouseEnter = useCallback(() => {
+            setIsHovered(true)
+        }, [])
+        const handleMouseLeave = useCallback(() => {
+            setIsHovered(false)
+        }, [])
+
+        return (
+            <InputContainer
+                data-testid={testid}
+                className={className}
+                id={id}
+                label={label}
+                labelComment={labelComment}
+                helper={helper}
+                helperBottom={helperBottom}
+                validation={validation}
+                counter={undefined}
+                maxLength={undefined}
+                value={undefined}
+                iconBaseUrl={iconBaseUrl}
+                style={containerStyle}
+                hasListOpen={undefined}
+            >
+                <StyledInputImage
+                    data-testid={
+                        hasContainer && testid ? `${testid}.InputLabel` : testid
+                    }
+                    className={
+                        hasContainer && className ? "InputLabel" : className
+                    }
+                    htmlFor={id}
+                    $width={size ?? width}
+                    $height={size ?? height}
+                    $borderRadius={borderRadius}
+                    $disabled={disabled}
+                    $validationStatus={validation?.status}
+                    onMouseEnter={handleMouseEnter}
+                    onMouseLeave={handleMouseLeave}
+                >
+                    {value === "" || !value ? (
+                        <EmptyContainer
+                            data-testid={testid}
+                            className={className}
+                            validation={validation}
+                            icons={icons}
+                            iconSizes={iconSizes}
+                            iconBaseUrl={iconBaseUrl}
+                        />
+                    ) : (
+                        <StyledImage
+                            data-testid={testid && `${testid}.Image`}
+                            className={className && "Image"}
+                            src={value}
+                            alt="Image input"
+                            $disabled={disabled}
+                        />
+                    )}
+
+                    <HoverContainer
+                        data-testid={testid}
+                        className={className}
+                        validation={validation}
+                        icons={icons}
+                        iconSizes={iconSizes}
+                        isVisible={isHovered}
+                        disabled={disabled}
+                        iconBaseUrl={iconBaseUrl}
+                    />
+
+                    <StyledInput
+                        data-testid={testid && `${testid}.Input`}
+                        className={className && "Input"}
+                        ref={ref}
+                        id={id}
+                        disabled={disabled}
+                        type="file"
+                        {...rest}
+                    />
+                </StyledInputImage>
+            </InputContainer>
+        )
+    }
+)

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

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