@julseb-lib/react 0.0.61 → 0.0.64

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

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

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

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