@julseb-lib/react 0.0.56 → 0.0.57

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

@@ -1,115 +0,0 @@
-/*=============================================== InputImage styles ===============================================*/
-
-import styled, { css } from "styled-components"
-import { stringifyPx } from "@julseb-lib/utils"
-import {
-    MEDIA,
-    Image,
-    Mixins,
-    setDefaultTheme,
-    OVERLAYS,
-    TRANSITIONS,
-} from "../../"
-import type { ILibRadius, LibValidationStatus } from "../../types"
-
-const StyledInputImage = styled.label<{
-    $width: string | number
-    $height: string | number
-    $borderRadius: ILibRadius
-    $disabled: boolean | undefined
-    $validationStatus: LibValidationStatus
-}>`
-    width: ${({ $width }) => stringifyPx($width)};
-    height: ${({ $height }) => stringifyPx($height)};
-    position: relative;
-    overflow: hidden;
-    background-color: ${({ theme, $validationStatus }) =>
-        $validationStatus === false ? theme.DANGER_50 : theme.GRAY_100};
-    cursor: ${({ $disabled }) => ($disabled ? "not-allowed" : "pointer")};
-    color: ${({ $validationStatus, $disabled, theme }) => {
-        if ($disabled) return theme.GRAY_500
-
-        return Mixins.ColorsHoverDefault(
-            $validationStatus === false ? "danger" : "primary",
-            theme
-        )
-    }};
-    ${({ $borderRadius }) => Mixins.BorderRadius($borderRadius)}
-    ${Mixins.Flexbox({
-        $alignItems: "center",
-        $justifyContent: "center",
-    })};
-`
-
-const ContainerCommon = css`
-    width: 100%;
-    height: 100%;
-    ${Mixins.Flexbox({
-        $alignItems: "center",
-        $justifyContent: "center",
-    })};
-`
-
-const StyledHoverContainer = styled.div<{
-    $validationStatus: LibValidationStatus
-    $disabled: boolean
-}>`
-    ${ContainerCommon}
-    background-color: ${OVERLAYS.WHITE_50};
-    opacity: 0;
-    transition: ${TRANSITIONS.SHORT};
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 1;
-
-    ${({ $disabled }) =>
-        !$disabled &&
-        css`
-            @media ${MEDIA.HOVER} {
-                opacity: 0;
-
-                &.Visible {
-                    opacity: 1;
-                }
-            }
-        `}
-`
-
-const StyledEmptyContainer = styled.div<{
-    $validationStatus: LibValidationStatus
-}>`
-    ${ContainerCommon}
-    position: relative;
-    z-index: 0;
-`
-
-const StyledImage = styled(Image).attrs({
-    width: "100%",
-    height: "100%",
-    fit: "cover",
-})<{ $disabled: boolean | undefined }>`
-    position: relative;
-    z-index: 0;
-    opacity: ${({ $disabled }) => $disabled && 0.5};
-` as any
-
-const StyledInput = styled.input`
-    display: none;
-`
-
-setDefaultTheme([
-    StyledInputImage,
-    StyledEmptyContainer,
-    StyledHoverContainer,
-    StyledImage,
-    StyledInput,
-])
-
-export {
-    StyledInputImage,
-    StyledEmptyContainer,
-    StyledHoverContainer,
-    StyledImage,
-    StyledInput,
-}

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

@@ -1,30 +0,0 @@
-/*=============================================== InputImage sub components types ===============================================*/
-
-import type { ILibInputImage } from "./types"
-
-// ! DO NOT EXPORT THOSE TYPES, ONLY USE THEM IN INPUT IMAGE COMPONENTS
-
-export interface ILibEmptyContainer
-    extends Pick<
-        ILibInputImage,
-        | "data-testid"
-        | "className"
-        | "validation"
-        | "iconSizes"
-        | "icons"
-        | "iconBaseUrl"
-    > {}
-
-export interface ILibHoverContainer
-    extends Pick<
-        ILibInputImage,
-        | "data-testid"
-        | "className"
-        | "validation"
-        | "icons"
-        | "iconSizes"
-        | "iconBaseUrl"
-        | "disabled"
-    > {
-    isVisible: boolean
-}

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

@@ -1,25 +0,0 @@
-/*=============================================== InputImage types ===============================================*/
-
-import type { InputHTMLAttributes } from "react"
-import type { LibIcon, ILibRadius } from "../../types"
-import type { ILibInputBase } from "../InputComponents/types"
-
-export type ILibInputImage = InputHTMLAttributes<HTMLInputElement> &
-    Omit<ILibInputBase, "inputBackground" | "inputVariant"> & {
-        id: string
-        value: string
-        width?: string | number
-        height?: string | number
-        size?: string | number
-        borderRadius?: ILibRadius
-        icons?: {
-            empty?: LibIcon
-            hover?: LibIcon
-        }
-        iconSizes?: {
-            empty?: number
-            hover?: number
-        }
-        iconBaseUrl?: string
-        type?: never
-    }

package/dist/lib/components/InputPhone/InputPhone.tsx

@@ -1,386 +0,0 @@
-/*=============================================== InputPhone component ===============================================*/
-
-import {
-    forwardRef,
-    useState,
-    useRef,
-    useCallback,
-    useMemo,
-    type ChangeEvent,
-} from "react"
-import classNames from "classnames"
-import { useClickOutside } from "../../"
-import {
-    InputWrapper,
-    ListInput,
-    ListInputItem,
-    InputContainer,
-    InputRightContainer,
-    InputValidationIcon,
-    InputLeftContainer,
-    InputAndListContainer,
-} from "../InputComponents"
-import { LibIcon } from "../LibIcon"
-import { Search, CaretDown } from "../../icons"
-import { countries } from "./utils/countries"
-import type { LibCountry } from "../../types"
-import {
-    StyledInputPhone,
-    CountryButton,
-    SearchContainer,
-    SearchInput,
-    Flag,
-    CountryCode,
-} from "./styles"
-import type { ILibInputPhone } from "./types"
-import type { ILibListInputItem } from "../InputComponents/types"
-
-const DEFAULT_ICONS_SIZES = {
-    SEARCH: 16,
-    CARET: 12,
-}
-
-/**
- * @description Returns a InputPhone component
- * @link https://documentation-components-react.vercel.app/components/input-phone
- * @extends HTMLInputElement
- * @prop data-testid?: string
- * @prop ref?: ForwardedRef<HTMLInputElement>
- * @prop selectedCountry: name: string; dial_code: string; code: CountryCode; flag: string | undefined
- * @prop setSelectedCountry: Dispatch<SetStateAction<{ name: string; dial_code: string; code: CountryCode; flag: string | undefined } | undefined>>
- * @prop defaultCountry?: Any Alpha-2 Code from https://www.iban.com/country-codes
- * @prop icons?: { search?: string | JSX.Element; caret?: string | JSX.Element }
- * @prop iconSizes?: { search?: number; caret?: number }
- * @prop searchPlaceholder?: string
- * @prop listDirection?: "up" | "down"
- * @prop countryButtonAriaLabel?: string
- * @prop textNoResult?: string
- * @prop validation?: { status: LibValidationStatus; message?: string; iconNotPassed?: LibIcon; iconNotPassedSize?: number; iconPassed?: LibIcon; iconPassedSize?: number; iconBaseUrl?: string }
- * @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
- */
-export const InputPhone = forwardRef<HTMLInputElement, ILibInputPhone>(
-    (
-        {
-            "data-testid": testid,
-            className,
-            id,
-            label,
-            labelComment,
-            helper,
-            helperBottom,
-            validation,
-            inputBackground,
-            inputVariant = "rounded",
-            selectedCountry,
-            setSelectedCountry,
-            defaultCountry = "de",
-            icons,
-            iconSizes,
-            iconBaseUrl,
-            searchPlaceholder = "Search country or code",
-            listDirection,
-            value,
-            maxLength,
-            disabled,
-            countryButtonAriaLabel = "Select country",
-            textNoResult = "Your search did not return any result.",
-            containerStyle,
-            inputAndListContainerStyle,
-            ...rest
-        },
-        ref
-    ) => {
-        const hasContainer: boolean = !!(
-            label ||
-            labelComment ||
-            helper ||
-            helperBottom ||
-            validation
-        )
-
-        const country = useMemo(() => {
-            if (selectedCountry) return selectedCountry
-            else
-                return countries.find(
-                    country => country.code === defaultCountry
-                )
-        }, [defaultCountry, selectedCountry])
-
-        const [isOpen, setIsOpen] = useState(false)
-
-        const handleClickCountry = useCallback(() => {
-            setIsOpen(!isOpen)
-        }, [isOpen])
-
-        const listRef = useRef<HTMLDivElement>(null)
-        useClickOutside(
-            listRef,
-            useCallback(() => {
-                if (isOpen) setIsOpen(false)
-            }, [isOpen])
-        )
-
-        const [search, setSearch] = useState("")
-        const results = useMemo(() => {
-            return countries.filter(
-                country =>
-                    country.name.toLowerCase().includes(search.toLowerCase()) ||
-                    country.dial_code
-                        .toLowerCase()
-                        .includes(search.toLowerCase()) ||
-                    country.code.toLowerCase().includes(search.toLowerCase())
-            )
-        }, [search])
-
-        const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
-            setSearch(e.target.value)
-        }, [])
-
-        const handleClickResult = useCallback(
-            (result: LibCountry) => {
-                setSelectedCountry(result)
-                setIsOpen(false)
-            },
-            [setSelectedCountry]
-        )
-
-        const defaultIcons = {
-            search: (
-                <Search
-                    size={iconSizes?.search || DEFAULT_ICONS_SIZES.SEARCH}
-                    data-testid={
-                        testid && `${testid}.ListInput.SearchContainer.Icon`
-                    }
-                    className={className && "SearchIcon"}
-                />
-            ),
-            caret: (
-                <CaretDown
-                    size={iconSizes?.search || DEFAULT_ICONS_SIZES.CARET}
-                    data-testid={
-                        testid &&
-                        `${testid}.LeftContainer.CountryButton.CaretIcon`
-                    }
-                    className={className && "CaretIcon"}
-                />
-            ),
-        }
-
-        const listItemProps: Omit<
-            ILibListInputItem,
-            "onClick" | "isActive" | "readOnly" | "isHovered"
-        > = {
-            "data-testid": testid,
-            className,
-            validationStatus: validation?.status,
-            inputBackground,
-        }
-
-        return (
-            <InputContainer
-                data-testid={testid}
-                id={id}
-                className={className}
-                label={label}
-                labelComment={labelComment}
-                helper={helper}
-                helperBottom={helperBottom}
-                validation={validation}
-                value={value}
-                counter={undefined}
-                maxLength={maxLength}
-                hasListOpen={isOpen}
-                iconBaseUrl={iconBaseUrl}
-                style={containerStyle}
-            >
-                <InputAndListContainer
-                    data-testid={testid}
-                    className={className}
-                    hasListOpen={isOpen}
-                    inputAndListContainerStyle={inputAndListContainerStyle}
-                    isParent={!hasContainer}
-                >
-                    <InputWrapper
-                        data-testid={testid}
-                        className={className}
-                        hasContainer={hasContainer}
-                        hasListOpen={isOpen}
-                        isTextArea={false}
-                        inputVariant={inputVariant}
-                        inputBackground={inputBackground}
-                        validationStatus={validation?.status}
-                    >
-                        <InputLeftContainer
-                            data-testid={testid}
-                            className={className}
-                            disabled={disabled}
-                        >
-                            <CountryButton
-                                data-testid={
-                                    testid &&
-                                    `${testid}.LeftContainer.CountryButton`
-                                }
-                                className={className && "CountryButton"}
-                                type="button"
-                                disabled={disabled}
-                                aria-disabled={disabled}
-                                aria-label={countryButtonAriaLabel}
-                                onClick={handleClickCountry}
-                                $inputBackground={inputBackground}
-                            >
-                                <Flag
-                                    data-testid={
-                                        testid &&
-                                        `${testid}.LeftContainer.CountryButton.Flag`
-                                    }
-                                    className={className && "Flag"}
-                                    src={country?.flag}
-                                    alt={`Flag ${country?.name}`}
-                                />
-
-                                <LibIcon
-                                    icon={icons?.caret || defaultIcons.caret}
-                                    size={
-                                        iconSizes?.caret ||
-                                        DEFAULT_ICONS_SIZES.CARET
-                                    }
-                                    data-testid={
-                                        testid &&
-                                        `${testid}.LeftContainer.CountryButton.CaretIcon`
-                                    }
-                                    className={className && "CaretIcon"}
-                                    baseUrl={iconBaseUrl}
-                                />
-                            </CountryButton>
-
-                            <CountryCode
-                                data-testid={
-                                    testid &&
-                                    `${testid}.LeftContainer.CountryCode`
-                                }
-                                className={className && "CountryCode"}
-                                $inputBackground={inputBackground}
-                                $disabled={disabled}
-                            >
-                                {country?.dial_code}
-                            </CountryCode>
-                        </InputLeftContainer>
-
-                        <StyledInputPhone
-                            data-testid={testid && `${testid}.Input`}
-                            ref={ref}
-                            className={classNames(
-                                { Input: className },
-                                { WithListOpen: isOpen }
-                            )}
-                            id={id}
-                            type="tel"
-                            disabled={disabled}
-                            $disabled={disabled}
-                            $inputBackground={inputBackground}
-                            $validationStatus={validation?.status}
-                            $inputVariant={inputVariant}
-                            {...rest}
-                        />
-
-                        {validation && (
-                            <InputRightContainer
-                                data-testid={testid}
-                                className={className}
-                                disabled={disabled}
-                                withBorder={false}
-                                withPadding
-                            >
-                                <InputValidationIcon
-                                    data-testid={testid}
-                                    className={className}
-                                    validation={validation}
-                                    inputBackground={inputBackground}
-                                />
-                            </InputRightContainer>
-                        )}
-                    </InputWrapper>
-
-                    <ListInput
-                        data-testid={testid}
-                        className={className}
-                        ref={listRef}
-                        isOpen={isOpen}
-                        direction={listDirection}
-                        inputBackground={inputBackground}
-                        validationStatus={validation?.status}
-                        inputVariant={inputVariant}
-                    >
-                        <ListInputItem readOnly {...listItemProps}>
-                            <SearchContainer
-                                data-testid={
-                                    testid &&
-                                    `${testid}.ListInput.SearchContainer`
-                                }
-                                className={className && "SearchContainer"}
-                                $validationStatus={validation?.status}
-                                $inputBackground={inputBackground}
-                            >
-                                <LibIcon
-                                    icon={icons?.search || defaultIcons.search}
-                                    size={
-                                        iconSizes?.search ||
-                                        DEFAULT_ICONS_SIZES.SEARCH
-                                    }
-                                    data-testid={
-                                        testid &&
-                                        `${testid}.ListInput.SearchContainer.Icon`
-                                    }
-                                    className={className && "IconSearch"}
-                                    baseUrl={iconBaseUrl}
-                                />
-
-                                <SearchInput
-                                    data-testid={
-                                        testid &&
-                                        `${testid}.ListInput.SearchContainer.Input`
-                                    }
-                                    className={className && "InputSearch"}
-                                    placeholder={searchPlaceholder}
-                                    value={search}
-                                    onChange={handleChange}
-                                    $inputBackground={inputBackground}
-                                />
-                            </SearchContainer>
-                        </ListInputItem>
-
-                        {results.length ? (
-                            results.map(result => (
-                                <ListInputItem
-                                    onClick={() => handleClickResult(result)}
-                                    isActive={country === result}
-                                    key={result.code}
-                                    {...listItemProps}
-                                >
-                                    <Flag src={result.flag} width={16} />
-
-                                    <span>
-                                        ({result.dial_code}) {result.name}
-                                    </span>
-                                </ListInputItem>
-                            ))
-                        ) : (
-                            <ListInputItem readOnly {...listItemProps}>
-                                {textNoResult}
-                            </ListInputItem>
-                        )}
-                    </ListInput>
-                </InputAndListContainer>
-            </InputContainer>
-        )
-    }
-)

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

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