@julseb-lib/react 0.0.63 → 0.0.64

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

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

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

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

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

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