@julseb-lib/react 0.0.50 → 0.0.52

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

@@ -1,456 +0,0 @@
-/*=============================================== Datepicker styles ===============================================*/
-
-import styled, { css } from "styled-components"
-import {
-    setDefaultTheme,
-    Mixins,
-    FONT_WEIGHTS,
-    RADIUSES,
-    SPACERS,
-    COLORS_LIGHT,
-    COLORS_DARK,
-    MEDIA,
-    FONT_SIZES,
-} from "../../"
-import type {
-    LibInputBackground,
-    LibInputListDirection,
-    LibInputVariant,
-    LibValidationStatus,
-} from "../../types"
-import { InputBaseMixin } from "../ComponentsMixins"
-
-const BUTTON_SIZE = 32
-const BUTTON_MOBILE = 24
-
-const InputDate = styled.input<{
-    $inputVariant: LibInputVariant | undefined
-    $validationStatus: LibValidationStatus | undefined
-    $inputBackground: LibInputBackground | undefined
-    $disabled: boolean | undefined
-}>`
-    font-weight: ${FONT_WEIGHTS.REGULAR};
-    cursor: pointer;
-    ${Mixins.Flexbox({
-        $alignItems: "center",
-        $justifyContent: "space-between",
-    })};
-    ${InputBaseMixin};
-
-    &:disabled {
-        cursor: not-allowed;
-    }
-`
-
-const StyledCalendar = styled.div<{
-    $direction: LibInputListDirection
-    $validationStatus: LibValidationStatus | undefined
-    $inputBackground: LibInputBackground | undefined
-}>`
-    border-radius: ${RADIUSES.M};
-    width: 100%;
-    max-width: 400px;
-    overflow: hidden;
-    display: none;
-    position: absolute;
-    left: 0;
-    overflow-x: scroll;
-    border: 1px solid
-        ${({ theme, $validationStatus }) =>
-            $validationStatus === false ? theme.DANGER_500 : theme.PRIMARY_500};
-    ${Mixins.HideScrollbar}
-
-    &.Open {
-        display: block;
-    }
-
-    ${({ $direction }) => {
-        switch ($direction) {
-            case "up":
-                return css`
-                    bottom: ${BUTTON_SIZE}px;
-                `
-            case "down":
-                return css`
-                    top: ${BUTTON_SIZE}px;
-                `
-            default:
-                return null
-        }
-    }}
-
-    ${({ $inputBackground, $validationStatus }) => {
-        switch ($inputBackground) {
-            case "light":
-                return css`
-                    border-color: ${$validationStatus === false
-                        ? COLORS_LIGHT.DANGER_500
-                        : COLORS_LIGHT.PRIMARY_500};
-                `
-            case "dark":
-                return css`
-                    border-color: ${$validationStatus === false
-                        ? COLORS_DARK.DANGER_500
-                        : COLORS_DARK.PRIMARY_500};
-                `
-            default:
-                return null
-        }
-    }}
-`
-
-const CalendarHeader = styled.div<{
-    $validationStatus: LibValidationStatus | undefined
-    $inputBackground: LibInputBackground | undefined
-}>`
-    padding: ${SPACERS.XS};
-    ${Mixins.Flexbox({
-        $alignItems: "center",
-        $justifyContent: "space-between",
-    })};
-    text-align: center;
-    background-color: ${({ theme, $validationStatus }) =>
-        $validationStatus === false ? theme.DANGER_500 : theme.PRIMARY_500};
-    color: ${({ theme }) => theme.BACKGROUND};
-
-    ${({ $inputBackground, $validationStatus }) => {
-        switch ($inputBackground) {
-            case "light":
-                return css`
-                    background-color: ${$validationStatus === false
-                        ? COLORS_LIGHT.DANGER_500
-                        : COLORS_LIGHT.PRIMARY_500};
-                    color: ${COLORS_LIGHT.BACKGROUND};
-                `
-            case "dark":
-                return css`
-                    background-color: ${$validationStatus === false
-                        ? COLORS_DARK.DANGER_500
-                        : COLORS_DARK.PRIMARY_500};
-                    color: ${COLORS_DARK.BACKGROUND};
-                `
-            default:
-                return null
-        }
-    }}
-`
-
-const CalendarNavButton = styled.button<{
-    $validationStatus: LibValidationStatus | undefined
-    $inputBackground: LibInputBackground | undefined
-}>`
-    width: ${BUTTON_SIZE}px;
-    height: ${BUTTON_SIZE}px;
-    ${Mixins.Flexbox({
-        $inline: true,
-        $alignItems: "center",
-        $justifyContent: "center",
-    })};
-    border-radius: ${RADIUSES.CIRCLE};
-    padding: 0;
-    border: none;
-    background-color: transparent;
-    color: currentColor;
-
-    @media ${MEDIA.HOVER} {
-        &:not(:disabled):hover {
-            background-color: ${({ theme, $validationStatus }) =>
-                Mixins.ColorsHoverHover(
-                    $validationStatus === false ? "danger" : "primary",
-                    theme
-                )};
-        }
-
-        &:not(:disabled):active {
-            background-color: ${({ theme, $validationStatus }) =>
-                Mixins.ColorsHoverActive(
-                    $validationStatus === false ? "danger" : "primary",
-                    theme
-                )};
-        }
-    }
-
-    &:disabled {
-        color: ${({ theme }) => theme.GRAY_500};
-    }
-
-    ${({ $inputBackground, $validationStatus }) => {
-        switch ($inputBackground) {
-            case "light":
-                return css`
-                    @media ${MEDIA.HOVER} {
-                        &:not(:disabled):hover {
-                            background-color: ${Mixins.ColorsHoverHover(
-                                $validationStatus === false
-                                    ? "danger"
-                                    : "primary",
-                                null,
-                                "light"
-                            )};
-                        }
-
-                        &:not(:disabled):active {
-                            background-color: ${Mixins.ColorsHoverActive(
-                                $validationStatus === false
-                                    ? "danger"
-                                    : "primary",
-                                null,
-                                "light"
-                            )};
-                        }
-                    }
-
-                    &:disabled {
-                        color: ${COLORS_LIGHT.GRAY_500};
-                    }
-                `
-            case "dark":
-                return css`
-                    @media ${MEDIA.HOVER} {
-                        &:not(:disabled):hover {
-                            background-color: ${Mixins.ColorsHoverHover(
-                                $validationStatus === false
-                                    ? "danger"
-                                    : "primary",
-                                null,
-                                "dark"
-                            )};
-                        }
-
-                        &:not(:disabled):active {
-                            background-color: ${Mixins.ColorsHoverActive(
-                                $validationStatus === false
-                                    ? "danger"
-                                    : "primary",
-                                null,
-                                "dark"
-                            )};
-                        }
-                    }
-
-                    &:disabled {
-                        color: ${COLORS_DARK.GRAY_500};
-                    }
-                `
-            default:
-                return null
-        }
-    }}
-`
-
-const CalendarEmptyDate = styled.span`
-    width: ${BUTTON_SIZE}px;
-    height: ${BUTTON_SIZE}px;
-`
-
-const DaysContainer = styled.div<{
-    $inputBackground: LibInputBackground | undefined
-}>`
-    ${Mixins.Grid({
-        $col: 7,
-        $gap: "xs",
-        $padding: "xs",
-        $justifyItems: "center",
-    })};
-    background-color: ${({ theme }) => theme.BACKGROUND};
-    color: ${({ theme }) => theme.FONT};
-
-    ${({ $inputBackground }) => {
-        switch ($inputBackground) {
-            case "light":
-                return css`
-                    background-color: ${COLORS_LIGHT.BACKGROUND};
-                    color: ${COLORS_LIGHT.FONT};
-                `
-            case "dark":
-                return css`
-                    background-color: ${COLORS_DARK.BACKGROUND};
-                    color: ${COLORS_DARK.FONT};
-                `
-            default:
-                return null
-        }
-    }}
-`
-
-const CalendarDay = styled.button<{
-    $inputBackground: LibInputBackground | undefined
-    $validationStatus: LibValidationStatus | undefined
-}>`
-    width: ${BUTTON_SIZE}px;
-    height: ${BUTTON_SIZE}px;
-    padding: 0;
-    border: 1px solid transparent;
-    border-radius: ${RADIUSES.CIRCLE};
-    background-color: transparent;
-    font-size: ${FONT_SIZES.SMALL};
-    color: ${({ theme }) => theme.FONT};
-
-    &.Today {
-        border-color: ${({ theme, $validationStatus }) =>
-            Mixins.ColorsHoverDefault(
-                $validationStatus === false ? "danger" : "primary",
-                theme
-            )};
-    }
-
-    &.Active {
-        background-color: ${({ theme, $validationStatus }) =>
-            Mixins.ColorsHoverDefault(
-                $validationStatus === false ? "danger" : "primary",
-                theme
-            )};
-        color: ${({ theme }) => theme.BACKGROUND};
-    }
-
-    @media ${MEDIA.HOVER} {
-        &:not(:disabled):hover {
-            background-color: ${({ theme, $validationStatus }) =>
-                Mixins.ColorsHoverHover(
-                    $validationStatus === false ? "danger" : "primary",
-                    theme
-                )};
-            color: ${({ theme }) => theme.BACKGROUND};
-        }
-
-        &:not(:disabled):active {
-            background-color: ${({ theme, $validationStatus }) =>
-                Mixins.ColorsHoverActive(
-                    $validationStatus === false ? "danger" : "primary",
-                    theme
-                )};
-        }
-    }
-
-    &:disabled {
-        color: ${({ theme }) => theme.GRAY_500};
-    }
-
-    @media ${MEDIA.BREAKPOINT_MOBILE} {
-        width: ${BUTTON_MOBILE}px;
-        height: ${BUTTON_MOBILE}px;
-    }
-
-    ${({ $inputBackground, $validationStatus }) => {
-        switch ($inputBackground) {
-            case "light":
-                return css`
-                    color: ${COLORS_LIGHT.FONT};
-
-                    &.Today {
-                        border-color: ${Mixins.ColorsHoverDefault(
-                            $validationStatus === false ? "danger" : "primary",
-                            null,
-                            "light"
-                        )};
-                    }
-
-                    &.Active {
-                        background-color: ${Mixins.ColorsHoverDefault(
-                            $validationStatus === false ? "danger" : "primary",
-                            null,
-                            "light"
-                        )};
-                        color: ${COLORS_LIGHT.BACKGROUND};
-                    }
-
-                    @media ${MEDIA.HOVER} {
-                        &:not(:disabled):hover {
-                            background-color: ${Mixins.ColorsHoverHover(
-                                $validationStatus === false
-                                    ? "danger"
-                                    : "primary",
-                                null,
-                                "light"
-                            )};
-                            color: ${COLORS_LIGHT.BACKGROUND};
-                        }
-
-                        &:not(:disabled):active {
-                            background-color: ${Mixins.ColorsHoverActive(
-                                $validationStatus === false
-                                    ? "danger"
-                                    : "primary",
-                                null,
-                                "light"
-                            )};
-                        }
-                    }
-
-                    &:disabled {
-                        color: ${COLORS_LIGHT.GRAY_500};
-                    }
-                `
-            case "dark":
-                return css`
-                    color: ${COLORS_DARK.FONT};
-
-                    &.Today {
-                        border-color: ${Mixins.ColorsHoverDefault(
-                            $validationStatus === false ? "danger" : "primary",
-                            null,
-                            "dark"
-                        )};
-                    }
-
-                    &.Active {
-                        background-color: ${Mixins.ColorsHoverDefault(
-                            $validationStatus === false ? "danger" : "primary",
-                            null,
-                            "dark"
-                        )};
-                        color: ${COLORS_DARK.BACKGROUND};
-                    }
-
-                    @media ${MEDIA.HOVER} {
-                        &:not(:disabled):hover {
-                            background-color: ${Mixins.ColorsHoverHover(
-                                $validationStatus === false
-                                    ? "danger"
-                                    : "primary",
-                                null,
-                                "dark"
-                            )};
-                            color: ${COLORS_DARK.BACKGROUND};
-                        }
-
-                        &:not(:disabled):active {
-                            background-color: ${Mixins.ColorsHoverActive(
-                                $validationStatus === false
-                                    ? "danger"
-                                    : "primary",
-                                null,
-                                "dark"
-                            )};
-                        }
-                    }
-
-                    &:disabled {
-                        color: ${COLORS_DARK.GRAY_500};
-                    }
-                `
-            default:
-                return null
-        }
-    }}
-`
-
-setDefaultTheme([
-    InputDate,
-    StyledCalendar,
-    CalendarHeader,
-    CalendarNavButton,
-    CalendarEmptyDate,
-    DaysContainer,
-    CalendarDay,
-])
-
-export {
-    InputDate,
-    StyledCalendar,
-    CalendarHeader,
-    CalendarNavButton,
-    CalendarEmptyDate,
-    DaysContainer,
-    CalendarDay,
-}

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

@@ -1,68 +0,0 @@
-/*=============================================== Datepicker types ===============================================*/
-
-import type { InputHTMLAttributes } from "react"
-import type {
-    DispatchState,
-    LibComponentBase,
-    LibIcon,
-    LibInputListDirection,
-    LibInputPrefixAndSuffix,
-    LibInputVariant,
-} from "../../types"
-import type {
-    ILibInputBase,
-    LibInputWithValidation,
-} from "../InputComponents/types"
-
-export type ILibDatepicker = Exclude<LibComponentBase<HTMLDivElement>, "as"> &
-    InputHTMLAttributes<HTMLInputElement> &
-    ILibInputBase &
-    LibInputWithValidation & {
-        minDate?: string
-        maxDate?: string
-        texts?: {
-            weekDays?: {
-                mon?: string
-                tue?: string
-                wed?: string
-                thu?: string
-                fri?: string
-                sat?: string
-                sun?: string
-            }
-            months?: {
-                jan?: string
-                feb?: string
-                mar?: string
-                apr?: string
-                may?: string
-                jun?: string
-                jul?: string
-                aug?: string
-                sep?: string
-                oct?: string
-                nov?: string
-                dec?: string
-            }
-        }
-        value: string
-        setValue: DispatchState<string>
-        icons?: {
-            prev?: LibIcon
-            next?: LibIcon
-            calendar?: LibIcon
-            left?: LibIcon
-        }
-        iconsSizes?: {
-            prev?: number
-            next?: number
-            calendar?: number
-            left?: number
-        }
-        iconsBaseUrl?: string
-        calendarDirection?: LibInputListDirection
-        inputVariant?: LibInputVariant
-        disabled?: boolean
-        tabIndex?: number
-        prefix?: LibInputPrefixAndSuffix
-    }

package/dist/lib/components/DragList/DragList.tsx

@@ -1,127 +0,0 @@
-/*=============================================== DragList component ===============================================*/
-
-import { forwardRef, Fragment, useState, useRef, type DragEvent } from "react"
-import { Hr } from "../../"
-import { DragListItem } from "./DragListItem"
-import { StyledDragList } from "./styles"
-import type { ILibDragList } from "./types"
-
-/**
- * @description Returns a DragList component
- * @link https://documentation-components-react.vercel.app/components/drag-list
- * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop items: Array<LibDragListItem> => only if children is not defined
- * @prop setItems: Dispatch<SetStateAction<Array<LibDragListItem>>> => only if children is not defined
- * @prop hideSeparator?: boolean => only if children is not defined
- * @prop children?: ReactChildren => only if items is not defined
- * @prop iconDrag?: string | JSX.Element
- * @prop iconDragSize?: number
- * @prop iconDragBaseUrl?: string
- * @prop gap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
- * @prop border?: { style?: CssBorderStyle; width?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"; color?: Any color from the library }
- * @prop padding?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" | { left?: LibSpacers | "auto"; top?: LibSpacers | "auto"; right?: LibSpacers | "auto"; bottom?: LibSpacers | "auto"; leftRight?: LibSpacers | "auto"; topBottom?: LibSpacers | "auto" }
- * @prop borderRadius?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | { topLeft?: LibRadiuses; topRight?: LibRadiuses; bottomLeft?: LibRadiuses; bottomRight?: LibRadiuses }
- *
- * @type LibDragListItem
- * @prop data-testid?: string
- * @prop className?: string
- * @prop id: string
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop title: string => only if element is not defined
- * @prop body?: string => only if element is not defined
- * @prop badge?: boolean | ListGroupItemBadgeExtended => only if element and date are not defined
- * @prop date?: string | Date => only if element and badge are not defined
- * @prop element?: JSX.ELement => only if title and other props are not defined
- */
-export const DragList = forwardRef<HTMLDivElement, ILibDragList>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            children,
-            className,
-            gap = "s",
-            iconDrag,
-            iconDragSize,
-            iconDragBaseUrl,
-            items,
-            setItems,
-            border = { color: "gray-200" },
-            padding = "s",
-            borderRadius = "m",
-            hideSeparator,
-            ...rest
-        },
-        ref
-    ) => {
-        const [dragIndex, setDragIndex] = useState(-1)
-        const dragNode = useRef<HTMLDivElement>(null)
-
-        const handleDragStart = (e: DragEvent<HTMLDivElement>, i: number) => {
-            const { target } = e
-            setDragIndex(i)
-
-            if (dragNode && dragNode.current) {
-                // @ts-ignore
-                dragNode.current = target
-                e.dataTransfer.effectAllowed = "move"
-                // @ts-ignore
-                e.dataTransfer.setData("text/html", target)
-            }
-        }
-
-        const handleDragOver = (e: DragEvent<HTMLDivElement>, i: number) => {
-            e.preventDefault()
-
-            if (dragNode.current !== e.target && items) {
-                const newItems = [...items]
-                newItems.splice(i, 0, newItems.splice(dragIndex, 1)[0])
-                setDragIndex(i)
-                setItems(newItems)
-            }
-        }
-
-        return (
-            <StyledDragList
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                className={className}
-                $gap={gap}
-                $border={border}
-                $padding={padding}
-                $borderRadius={borderRadius}
-                {...rest}
-            >
-                {items?.map((item, i) => (
-                    <Fragment key={item.id}>
-                        <DragListItem
-                            data-testid={
-                                item["data-testid"] ||
-                                (testid && `${testid}.DragListItem`)
-                            }
-                            className={
-                                item.className || (className && "DragListItem")
-                            }
-                            id={item.id}
-                            iconDrag={iconDrag}
-                            iconDragSize={iconDragSize}
-                            item={item}
-                            index={i}
-                            handleDragStart={handleDragStart}
-                            handleDragOver={handleDragOver}
-                            iconDragBaseUrl={iconDragBaseUrl}
-                        />
-
-                        {!hideSeparator && i !== items.length - 1 && (
-                            <Hr data-testid={testid && `${testid}.Separator`} />
-                        )}
-                    </Fragment>
-                )) ?? children}
-            </StyledDragList>
-        )
-    }
-)