@julseb-lib/react 0.0.50 → 0.0.52

package/dist/lib/components/Timepicker/Timepicker.tsx

@@ -1,294 +0,0 @@
-/*=============================================== Timepicker component ===============================================*/
-
-import { forwardRef, useRef, type ChangeEvent } from "react"
-import { useClickOutside } from "../../"
-import {
-    InputContainer,
-    InputAndListContainer,
-    InputWrapper,
-    InputLeftContainer,
-    InputPrefix,
-    InputIcon,
-    InputRightContainer,
-    InputButton,
-    InputValidationIcon,
-    ListInput,
-    ListInputItem,
-} from "../InputComponents"
-import { Clock } from "../../icons"
-import { useKeyboardNavigation } from "../ComponentsMixins"
-import { typeValues } from "../../types"
-import { InputTime } from "./styles"
-import type { ILibTimepicker } from "./types"
-
-/**
- * @description Returns a Timepicker component
- * @link https://documentation-components-react.vercel.app/components/timepicker
- * @extends HTMLInputElement
- * @prop data-testid?: string
- * @prop ref?: ForwardedRef<HTMLInputElement>
- * @prop value: LibTimepickerHours | LibTimepickerHalfTimes | LibTimepickerQuarterTimes | LibTimepickerMinutes
- * @prop setValue: Dispatch<SetStateAction< LibTimepickerHours | LibTimepickerHalfTimes | LibTimepickerQuarterTimes | LibTimepickerMinutes>>
- * @prop iconClock?: string | JSX.Element
- * @prop iconClockSize?: number
- * @prop listDirection?: "up" | "down"
- * @prop prefix?: string | JSX.Element
- * @prop step?: LibTimepickerSteps
- * @prop minTime?: LibTimepickerHours | LibTimepickerHalfTimes | LibTimepickerQuarterTimes | LibTimepickerMinutes
- * @prop maxTime?: LibTimepickerHours | LibTimepickerHalfTimes | LibTimepickerQuarterTimes | LibTimepickerMinutes
- * @prop data-testid?: 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
- * @prop icon?: string | JSX.Element
- * @prop iconSize?: number
- * @prop prefix?: string | JSX.Element
- */
-export const Timepicker = forwardRef<HTMLInputElement, ILibTimepicker>(
-    (
-        {
-            "data-testid": testid,
-            className,
-            icon,
-            iconSize,
-            iconBaseUrl,
-            iconClockSize = 16,
-            iconClock = (
-                <Clock
-                    data-testid={testid && `${testid}.RightContainer.IconClock`}
-                    className={className && "IconClock"}
-                    size={iconClockSize}
-                />
-            ),
-            id,
-            label,
-            labelComment,
-            helper,
-            helperBottom,
-            validation,
-            inputBackground,
-            inputVariant,
-            containerStyle,
-            inputAndListContainerStyle,
-            listDirection,
-            step = "1h",
-            minTime,
-            maxTime,
-            value,
-            setValue,
-            prefix,
-            disabled,
-            tabIndex,
-            ...rest
-        },
-        ref
-    ) => {
-        const hasContainer: boolean = !!(
-            label ||
-            labelComment ||
-            helper ||
-            helperBottom ||
-            validation
-        )
-
-        const el = useRef<HTMLDivElement>(null)
-
-        let times: Array<string> =
-            step === "30min"
-                ? Object.keys(typeValues.halfHours)
-                : step === "15min"
-                ? Object.keys(typeValues.quarterHours)
-                : step === "1min"
-                ? Object.keys(typeValues.minutes)
-                : Object.keys(typeValues.hours)
-
-        if (minTime) {
-            times = times.splice(
-                times.indexOf(times.find(found => found === minTime)!),
-                times.length - 1
-            )
-        }
-
-        if (maxTime) {
-            times = times.splice(0, times.indexOf(maxTime) + 1)
-        }
-
-        const { isOpen, setIsOpen, cursor, listRef } = useKeyboardNavigation<
-            typeof times
-        >({
-            data: times,
-            value,
-            // @ts-ignore
-            setValue,
-        })
-
-        const handleClick = () => {
-            if (isOpen) setIsOpen(false)
-            setIsOpen(true)
-        }
-
-        const handleOpen = () => setIsOpen(true)
-        const handleClose = () => setIsOpen(false)
-
-        const handleChange = (e: ChangeEvent<HTMLInputElement>) =>
-            setValue(e.target.value as string)
-
-        const handleSelectTime = (time: string) => {
-            setValue(time as any)
-            handleClose()
-        }
-
-        useClickOutside(listRef, handleClose)
-
-        return (
-            <InputContainer
-                data-testid={testid}
-                id={id}
-                label={label}
-                labelComment={labelComment}
-                helper={helper}
-                helperBottom={helperBottom}
-                validation={validation}
-                value={value}
-                className={className}
-                iconBaseUrl={iconBaseUrl}
-                style={containerStyle}
-                hasListOpen={isOpen}
-                counter={undefined}
-                maxLength={undefined}
-            >
-                <InputAndListContainer
-                    data-testid={testid}
-                    className={className}
-                    hasListOpen={isOpen}
-                    isParent={!hasContainer}
-                    ref={el}
-                    inputAndListContainerStyle={inputAndListContainerStyle}
-                >
-                    <InputWrapper
-                        data-testid={testid}
-                        className={className}
-                        isTextArea={false}
-                        inputBackground={inputBackground}
-                        inputVariant={inputVariant}
-                        validationStatus={validation?.status}
-                        hasListOpen={isOpen}
-                        hasContainer
-                    >
-                        {(icon || prefix) && (
-                            <InputLeftContainer
-                                data-testid={testid}
-                                className={className}
-                                disabled={disabled}
-                            >
-                                {prefix && (
-                                    <InputPrefix
-                                        data-testid={testid}
-                                        className={className}
-                                        prefix={prefix}
-                                        inputBackground={inputBackground}
-                                    />
-                                )}
-
-                                {icon && (
-                                    <InputIcon
-                                        data-testid={testid}
-                                        className={className}
-                                        icon={icon}
-                                        iconSize={iconSize}
-                                        validationStatus={validation?.status}
-                                        disabled={disabled}
-                                        inputBackground={inputBackground}
-                                        inputVariant={inputVariant}
-                                        iconBaseUrl={iconBaseUrl}
-                                    />
-                                )}
-                            </InputLeftContainer>
-                        )}
-
-                        <InputTime
-                            data-testid={
-                                testid && `${testid}.InputWrapper.InputTime`
-                            }
-                            className={className && "InputTime"}
-                            ref={ref}
-                            onClick={handleClick}
-                            onFocus={handleOpen}
-                            tabIndex={tabIndex}
-                            value={value}
-                            onChange={handleChange}
-                            disabled={disabled}
-                            $disabled={disabled}
-                            $validationStatus={validation?.status}
-                            $inputBackground={inputBackground}
-                            $inputVariant={inputVariant}
-                            {...rest}
-                        />
-
-                        <InputRightContainer
-                            data-testid={testid}
-                            className={className}
-                            disabled={disabled}
-                            withBorder={false}
-                            withPadding
-                        >
-                            <InputButton
-                                data-testid={testid}
-                                className={className}
-                                icon={iconClock}
-                                iconSize={iconClockSize}
-                                onClick={handleClick}
-                                aria-label="Calendar"
-                                disabled={disabled}
-                                inputBackground={inputBackground}
-                                validationStatus={validation?.status}
-                            />
-
-                            {validation && (
-                                <InputValidationIcon
-                                    data-testid={testid}
-                                    className={className}
-                                    validation={validation}
-                                    inputBackground={inputBackground}
-                                />
-                            )}
-                        </InputRightContainer>
-                    </InputWrapper>
-
-                    <ListInput
-                        data-testid={testid}
-                        className={className}
-                        direction={listDirection}
-                        inputBackground={inputBackground}
-                        inputVariant={inputVariant}
-                        validationStatus={validation?.status}
-                        isOpen={!!(value && isOpen)}
-                        ref={listRef}
-                    >
-                        {times.map((time, i) => (
-                            <ListInputItem
-                                key={time}
-                                data-testid={testid}
-                                className={className}
-                                validationStatus={validation?.status}
-                                inputBackground={inputBackground}
-                                onClick={() => handleSelectTime(time)}
-                                isActive={i === cursor}
-                                isHovered={value === time}
-                            >
-                                {time}
-                            </ListInputItem>
-                        ))}
-                    </ListInput>
-                </InputAndListContainer>
-            </InputContainer>
-        )
-    }
-)

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

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

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

@@ -1,34 +0,0 @@
-/*=============================================== Timepicker styles ===============================================*/
-
-import styled from "styled-components"
-import { FONT_WEIGHTS, Mixins, setDefaultTheme } from "../../"
-import type {
-    LibInputBackground,
-    LibInputVariant,
-    LibValidationStatus,
-} from "../../types"
-import { InputBaseMixin } from "../ComponentsMixins"
-import type {} from "./types"
-
-const InputTime = styled.input<{
-    $inputVariant: LibInputVariant | undefined
-    $inputBackground: LibInputBackground | undefined
-    $validationStatus: LibValidationStatus | undefined
-    $disabled: boolean | undefined
-}>`
-    font-weight: ${FONT_WEIGHTS.REGULAR};
-    cursor: pointer;
-    ${Mixins.Flexbox({
-        $alignItems: "center",
-        $justifyContent: "space-between",
-    })};
-    ${InputBaseMixin};
-
-    &:disabled {
-        cursor: not-allowed;
-    }
-`
-
-setDefaultTheme([InputTime])
-
-export { InputTime }

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

@@ -1,69 +0,0 @@
-/*=============================================== Timepicker types ===============================================*/
-
-import type { InputHTMLAttributes } from "react"
-import type {
-    LibComponentBase,
-    LibIcon,
-    LibInputListDirection,
-    LibTimepickerHours,
-    LibTimepickerHalfTimes,
-    LibTimepickerQuarterTimes,
-    LibTimepickerMinutes,
-    DispatchState,
-    LibTimepickerSteps,
-    LibInputPrefixAndSuffix,
-} from "../../types"
-import type {
-    ILibInputBase,
-    ILibInputIcon,
-    LibInputWithValidation,
-} from "../InputComponents/types"
-
-type ILibTimepickerBase = Exclude<LibComponentBase<HTMLInputElement>, "as"> &
-    InputHTMLAttributes<HTMLInputElement> &
-    ILibInputBase &
-    ILibInputIcon &
-    LibInputWithValidation & {
-        iconClock?: LibIcon
-        iconClockSize?: number
-        listDirection?: LibInputListDirection
-        prefix?: LibInputPrefixAndSuffix
-    }
-
-type TimepickerWithHourStep = ILibTimepickerBase & {
-    step?: Extract<LibTimepickerSteps, "1h">
-    minTime?: LibTimepickerHours
-    maxTime?: LibTimepickerHours
-    value: LibTimepickerHours
-    setValue: DispatchState<LibTimepickerHours>
-}
-
-type TimepickerWithHalfHourStep = ILibTimepickerBase & {
-    step?: Extract<LibTimepickerSteps, "30min">
-    minTime?: LibTimepickerHalfTimes
-    maxTime?: LibTimepickerHalfTimes
-    value: LibTimepickerHalfTimes
-    setValue: DispatchState<LibTimepickerHalfTimes>
-}
-
-type TimepickerWithQuarterHourStep = ILibTimepickerBase & {
-    step?: Extract<LibTimepickerSteps, "15min">
-    minTime?: LibTimepickerQuarterTimes
-    maxTime?: LibTimepickerQuarterTimes
-    value: LibTimepickerQuarterTimes
-    setValue: DispatchState<LibTimepickerQuarterTimes>
-}
-
-type TimepickerWithMinuteStep = ILibTimepickerBase & {
-    step?: Extract<LibTimepickerSteps, "1min">
-    minTime?: LibTimepickerMinutes
-    maxTime?: LibTimepickerMinutes
-    value: LibTimepickerMinutes
-    setValue: DispatchState<LibTimepickerMinutes>
-}
-
-export type ILibTimepicker =
-    | TimepickerWithHourStep
-    | TimepickerWithHalfHourStep
-    | TimepickerWithQuarterHourStep
-    | TimepickerWithMinuteStep

package/dist/lib/components/Toast/Toast.tsx

@@ -1,210 +0,0 @@
-/*=============================================== Toast component ===============================================*/
-
-import { forwardRef, useEffect, useCallback, useRef, useState } from "react"
-import classNames from "classnames"
-import { uuid } from "@julseb-lib/utils"
-import { Text, useToast, useMergeRefs } from "../.."
-import { LibIcon } from "../LibIcon"
-import { Close } from "../../icons"
-import {
-    StyledToast,
-    TitleContainer,
-    IconContainer,
-    CloseButton,
-    Timer,
-    Title,
-} from "./styles"
-import type { ILibToast } from "./types"
-
-const CLOSE_ICON_SIZE = 24
-
-/**
- * @description Returns a Toast component
- * @link https://documentation-components-react.vercel.app/components/toast
- * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop title: string
- * @prop toasterPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
- * @prop toastStyle?: { maxWidth?: string | number; border?: { style?: CssBorderStyle; width?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"; color?: Any color from the library }; backgroundColor?: Any color from the library; textColor?: Any color from the library; shadow?: "xxl" | "xl" | "l" | "m" | "s" | "xs" }
- * @prop hideCloseButton?: boolean
- * @prop status?: "success" | "error" | "warning" | "info"
- * @prop options?: LibToastOptions
- *
- * @type LibToastOptions
- * @prop data-testid?: string
- * @prop className?: string
- * @prop id?: string
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop body?: string | ReactChildren
- * @prop duration?: number
- * @prop icons?: { left?: string | JSX.Element; close?: string | JSX.Element }
- * @prop iconSizes?: { left?: number close?: number }
- * @prop iconLeftColor?: Any color from the library
- * @prop labelClose?: string
- * @prop withTimer?: boolean
- * @prop timerBackgroundColor?: Any color from the library
- */
-export const Toast = forwardRef<HTMLDivElement, ILibToast>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            children,
-            className,
-            title,
-            id = uuid(),
-            options,
-            maxWidth = 400,
-            toasterPosition,
-            role = "alert",
-            hideCloseButton,
-            status,
-            ...rest
-        },
-        ref
-    ) => {
-        const toast = useToast()
-        const [isOpen, setIsOpen] = useState(true)
-
-        const remove = useCallback(() => {
-            setIsOpen(false)
-            setTimeout(() => toast.remove(id), 200)
-        }, [id, toast])
-
-        const el = useRef<HTMLDivElement>(null)
-
-        useEffect(() => {
-            const duration = options?.duration
-
-            if (duration) {
-                setTimeout(() => {
-                    remove()
-                }, duration)
-            }
-        }, [options?.duration, remove])
-
-        const body = children || options?.body
-
-        return (
-            <StyledToast
-                data-testid={testid}
-                ref={useMergeRefs([ref, el])}
-                as={as}
-                role={role}
-                id={id}
-                className={classNames(className, { Open: isOpen })}
-                $status={status}
-                $maxWidth={maxWidth}
-                $toasterPosition={toasterPosition}
-                {...rest}
-            >
-                <TitleContainer
-                    data-testid={testid && `${testid}.TitleContainer`}
-                    className={className && "TitleContainer"}
-                >
-                    {options?.icons?.left && (
-                        <IconContainer
-                            data-testid={
-                                testid &&
-                                `${testid}.TitleContainer.IconContainerLeft`
-                            }
-                            className={className && "IconContainerLeft"}
-                        >
-                            <LibIcon
-                                data-testid={
-                                    testid &&
-                                    `${testid}.TitleContainer.IconContainerLeft.Icon`
-                                }
-                                className={className && "Icon"}
-                                icon={options.icons.left}
-                                size={options.iconSizes?.left || 16}
-                                color={options?.iconLeftColor}
-                                baseUrl={options?.iconsBaseUrl}
-                            />
-                        </IconContainer>
-                    )}
-
-                    <Title
-                        data-testid={testid && `${testid}.TitleContainer.Title`}
-                        className={className && "Title"}
-                        tag="strong"
-                    >
-                        {title}
-                    </Title>
-
-                    {!hideCloseButton && (
-                        <IconContainer
-                            data-testid={
-                                testid &&
-                                `${testid}.TitleContainer.IconContainerRight`
-                            }
-                            className={className && "IconContainerRight"}
-                        >
-                            <CloseButton
-                                onClick={remove}
-                                aria-label={
-                                    options?.labelClose || "Close toast"
-                                }
-                                data-testid={
-                                    testid &&
-                                    `${testid}.TitleContainer.IconContainerRight.CloseButton`
-                                }
-                                className={className && "CloseButton"}
-                            >
-                                <LibIcon
-                                    data-testid={
-                                        testid &&
-                                        `${testid}.TitleContainer.IconContainerRight.CloseButton.Icon`
-                                    }
-                                    className={className && "CloseIcon"}
-                                    icon={
-                                        options?.icons?.close || (
-                                            <Close
-                                                size={CLOSE_ICON_SIZE}
-                                                data-testid={
-                                                    testid &&
-                                                    `${testid}.TitleContainer.IconContainerRight.CloseButton.Icon`
-                                                }
-                                                className={
-                                                    className && "CloseIcon"
-                                                }
-                                            />
-                                        )
-                                    }
-                                    size={
-                                        options?.iconSizes?.close ||
-                                        CLOSE_ICON_SIZE
-                                    }
-                                    color="currentColor"
-                                    baseUrl={options?.iconsBaseUrl}
-                                />
-                            </CloseButton>
-                        </IconContainer>
-                    )}
-                </TitleContainer>
-
-                {body && (
-                    <Text
-                        data-testid={testid && `${testid}.Body`}
-                        className={className && "Body"}
-                    >
-                        {body}
-                    </Text>
-                )}
-
-                {options?.withTimer && (
-                    <Timer
-                        data-testid={testid && `${testid}.Timer`}
-                        className={className && "Timer"}
-                        $duration={options?.duration ?? 3000}
-                        $backgroundColor={
-                            options?.timerBackgroundColor ?? "success-200"
-                        }
-                    />
-                )}
-            </StyledToast>
-        )
-    }
-)