@julseb-lib/react 0.0.51 → 0.0.52

package/src/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/src/lib/components/Timepicker/__preview__/Timepicker.demo.tsx

@@ -1,70 +0,0 @@
-/*=============================================== Tiepicker demo ===============================================*/
-
-import { useState } from "react"
-import { Timepicker } from "../../../"
-import type {
-    LibTimepickerHours,
-    LibTimepickerHalfTimes,
-    LibTimepickerQuarterTimes,
-    LibTimepickerMinutes,
-} from "../../../types"
-import type { ILibTimepicker } from "../types"
-
-export const TimepickerPreview = (
-    props: Partial<Exclude<ILibTimepicker, "value" | "setValue">>
-) => {
-    const [valueHour, setValueHour] = useState<LibTimepickerHours>("06:00")
-    const [valueHalfHour, setValueHalfHour] =
-        useState<LibTimepickerHalfTimes>("06:30")
-    const [valueQuarterHour, setValueQuarterHour] =
-        useState<LibTimepickerQuarterTimes>("06:45")
-    const [valueMinute, setValueMinute] =
-        useState<LibTimepickerMinutes>("03:12")
-
-    if (props.step === "30min")
-        return (
-            <Timepicker
-                {...props}
-                data-testid="testid"
-                className="className"
-                step="30min"
-                value={valueHalfHour}
-                setValue={setValueHalfHour}
-            />
-        )
-
-    if (props.step === "15min")
-        return (
-            <Timepicker
-                {...props}
-                data-testid="testid"
-                className="className"
-                step="15min"
-                value={valueQuarterHour}
-                setValue={setValueQuarterHour}
-            />
-        )
-
-    if (props.step === "1min")
-        return (
-            <Timepicker
-                {...props}
-                data-testid="testid"
-                className="className"
-                step="1min"
-                value={valueMinute}
-                setValue={setValueMinute}
-            />
-        )
-
-    return (
-        <Timepicker
-            {...(props as any)}
-            data-testid="testid"
-            className="className"
-            step="1h"
-            value={valueHour}
-            setValue={setValueHour}
-        />
-    )
-}

package/src/lib/components/Timepicker/__preview__/Timepicker.preview.tsx

@@ -1,60 +0,0 @@
-/*=============================================== TimepickerPreview ===============================================*/
-
-import { Timepicker } from "../../../"
-import type { ILibTimepicker } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-import { TimepickerPreview } from "./Timepicker.demo"
-
-export const timepickerPreview: ComponentPreview<ILibTimepicker> = {
-    name: "Timepicker",
-    component: Timepicker,
-    category: "components",
-    import: "Timepicker",
-    additionalImports: null,
-    optionalImports: null,
-    propsImport: "ILibTimepicker",
-    additionalTypeImports: [
-        "LibTimepickerHours",
-        "LibTimepickerHalfTimes",
-        "LibTimepickerQuarterTimes",
-        "LibTimepickerMinutes",
-    ],
-    extends: ["HTMLInputElement"],
-    previews: [
-        {
-            previewTitle: "With hour step",
-            demo: <TimepickerPreview step="1h" />,
-        },
-        {
-            previewTitle: "With half hour step",
-            demo: <TimepickerPreview step="30min" />,
-        },
-        {
-            previewTitle: "With quarter hour step",
-            demo: <TimepickerPreview step="15min" />,
-        },
-        {
-            previewTitle: "With minute step",
-            demo: <TimepickerPreview step="1min" />,
-        },
-        {
-            previewTitle: "With min and max times",
-            demo: (
-                <TimepickerPreview step="1h" minTime="06:00" maxTime="18:00" />
-            ),
-        },
-        {
-            previewTitle: "With different icon",
-            demo: (
-                <TimepickerPreview
-                    label="Hello"
-                    icon="calendar"
-                    iconSize={16}
-                    iconClock="calendar"
-                    prefix="Hello"
-                    listDirection="up"
-                />
-            ),
-        },
-    ],
-}

package/src/lib/components/Timepicker/__tests__/Preview.tsx

@@ -1,68 +0,0 @@
-/*=============================================== Timepicker tests preview ===============================================*/
-
-import { useState } from "react"
-import { Timepicker } from "../../../"
-import type { ILibTimepicker } from "../../../types/components-props"
-import type {
-    LibTimepickerHours,
-    LibTimepickerHalfTimes,
-    LibTimepickerQuarterTimes,
-    LibTimepickerMinutes,
-} from "../../../types"
-
-export const TimepickerDemo = (props: Partial<ILibTimepicker>) => {
-    const [valueHour, setValueHour] = useState<LibTimepickerHours>("06:00")
-    const [valueHalfHour, setValueHalfHour] =
-        useState<LibTimepickerHalfTimes>("06:30")
-    const [valueQuarterHour, setValueQuarterHour] =
-        useState<LibTimepickerQuarterTimes>("06:45")
-    const [valueMinute, setValueMinute] =
-        useState<LibTimepickerMinutes>("03:12")
-
-    if (props.step === "30min")
-        return (
-            <Timepicker
-                {...props}
-                data-testid="testid"
-                className="className"
-                step="30min"
-                value={valueHalfHour}
-                setValue={setValueHalfHour}
-            />
-        )
-
-    if (props.step === "15min")
-        return (
-            <Timepicker
-                {...props}
-                data-testid="testid"
-                className="className"
-                step="15min"
-                value={valueQuarterHour}
-                setValue={setValueQuarterHour}
-            />
-        )
-
-    if (props.step === "1min")
-        return (
-            <Timepicker
-                {...props}
-                data-testid="testid"
-                className="className"
-                step="1min"
-                value={valueMinute}
-                setValue={setValueMinute}
-            />
-        )
-
-    return (
-        <Timepicker
-            {...(props as any)}
-            data-testid="testid"
-            className="className"
-            step="1h"
-            value={valueHour}
-            setValue={setValueHour}
-        />
-    )
-}

package/src/lib/components/Timepicker/__tests__/Timepicker.cy.tsx

@@ -1,18 +0,0 @@
-/*=============================================== Timepicker tests ===============================================*/
-
-import { TimepickerDemo } from "./Preview"
-
-describe("<Timepicker />", () => {
-    it("renders <Timepicker /> component", () => {
-        cy.mount(<TimepickerDemo />)
-        cy.dataTest().should("exist").should("have.class", "className")
-        cy.dataTest().click()
-        cy.dataTest("testid.ListInput").should("be.visible")
-        cy.dataTest("testid.ListInput")
-        cy.dataTest("testid.ListItem").eq(22).click()
-        cy.dataTest("testid.InputWrapper.InputTime").should(
-            "have.value",
-            "22:00"
-        )
-    })
-})

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

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

package/src/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/src/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