@julseb-lib/react 0.0.51 → 0.0.52

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

package/src/lib/components/DragList/DragListItem.tsx

@@ -1,191 +0,0 @@
-/*=============================================== DragListItem component ===============================================*/
-
-import { forwardRef, type DragEvent } from "react"
-import { Text, Badge } from "../../"
-import { Drag } from "../../icons"
-import { LibIcon } from "../LibIcon"
-import {
-    StyledItem,
-    DragIconContainer,
-    Content,
-    RightContainer,
-} from "./styles"
-import type { ILibDragListItem } from "./types"
-import type { ILibBadge } from "../Badge/types"
-
-/**
- * @description Returns a DragList item 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 handleDragStart: (e: DragEvent<HTMLDivElement>, i: number) => void
- * @prop handleDragOver: (e: DragEvent<HTMLDivElement>, i: number) => void
- * @prop index: number
- * @prop item: LibDragListItem => only if children is not defined
- * @prop children?: ReactChildren => only if item is not defined
- * @prop iconDrag?: string | JSX.Element
- * @prop iconDragSize?: number
- * @prop iconDragBaseUrl?: string
- *
- * @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 DragListItem = forwardRef<HTMLDivElement, ILibDragListItem>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            className,
-            id,
-            iconDragSize = 24,
-            iconDrag = (
-                <Drag
-                    data-testid={testid && `${testid}.IconDrag`}
-                    className={className && "IconDrag"}
-                    size={iconDragSize}
-                />
-            ),
-            iconDragBaseUrl,
-            item,
-            children,
-            index,
-            handleDragStart,
-            handleDragOver,
-            ...rest
-        },
-        ref
-    ) => {
-        if (item?.element) return item.element
-
-        const badgeProps: ILibBadge = {
-            "data-testid":
-                testid && `${testid}.DragListItemRightContainer.Badge`,
-            className: className && "Badge",
-            backgroundColor:
-                typeof item?.badge === "object"
-                    ? item.badge.backgroundColor
-                    : undefined,
-            contentColor:
-                typeof item?.badge === "object"
-                    ? item.badge?.contentColor
-                    : undefined,
-            size:
-                typeof item?.badge === "object" && item.badge.size
-                    ? item?.badge?.size
-                    : 12,
-        }
-
-        return (
-            <StyledItem
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                className={className}
-                id={item ? item.id : id}
-                draggable
-                onDragStart={(e: DragEvent<HTMLDivElement>) =>
-                    handleDragStart(e, index)
-                }
-                onDragOver={(e: DragEvent<HTMLDivElement>) =>
-                    handleDragOver(e, index)
-                }
-                {...rest}
-            >
-                <DragIconContainer
-                    data-testid={testid && `${testid}.DragIconContainer`}
-                    className={className && "DragIconContainer"}
-                    $size={iconDragSize}
-                >
-                    <LibIcon
-                        data-testid={
-                            testid && `${testid}.DragIconContainer.IconDrag`
-                        }
-                        className={className && "IconDrag"}
-                        icon={iconDrag}
-                        size={iconDragSize}
-                        baseUrl={iconDragBaseUrl}
-                    />
-                </DragIconContainer>
-
-                <Content
-                    data-testid={testid && `${testid}.DragListItemContent`}
-                    className={className && "DragListItemContent"}
-                >
-                    {item ? (
-                        <>
-                            <Text
-                                tag="h6"
-                                data-testid={
-                                    testid &&
-                                    `${testid}.DragListItemContent.Title`
-                                }
-                                className={className && "DragListItemTitle"}
-                            >
-                                {item.title}
-                            </Text>
-                            {item.body && (
-                                <Text
-                                    data-testid={
-                                        testid &&
-                                        `${testid}.DragListItemContent.Body`
-                                    }
-                                    className={className && "DragListItemBody"}
-                                >
-                                    {item.body}
-                                </Text>
-                            )}
-                        </>
-                    ) : (
-                        children
-                    )}
-                </Content>
-
-                {(item?.badge || item?.date) && (
-                    <RightContainer
-                        data-testid={
-                            testid && `${testid}.DragListItemRightContainer`
-                        }
-                        className={className && "DragListItemRightContainer"}
-                    >
-                        {item?.badge &&
-                            (typeof item.badge === "object" ? (
-                                <Badge
-                                    icon={item.badge.icon}
-                                    iconSize={item.badge.iconSize}
-                                    number={item.badge.number}
-                                    size={4}
-                                    {...(badgeProps as any)}
-                                />
-                            ) : (
-                                <Badge {...badgeProps} />
-                            ))}
-
-                        {item?.date && (
-                            <Text
-                                data-testid={
-                                    testid &&
-                                    `${testid}.DragListItemRightContainer.Date`
-                                }
-                                className={className && "Date"}
-                                tag="small"
-                                color="gray"
-                            >
-                                {item?.date.toString()}
-                            </Text>
-                        )}
-                    </RightContainer>
-                )}
-            </StyledItem>
-        )
-    }
-)

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

@@ -1,57 +0,0 @@
-/*=============================================== DragListPreview ===============================================*/
-
-import { useState } from "react"
-import { convertDateShort } from "@julseb-lib/utils"
-import { DragList } from "../../../"
-import type { LibDragListItem } from "../../../types"
-import type { ILibDragList } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-const DragListDemo = (
-    props: Omit<ILibDragList, "items" | "setItems" | "children">
-) => {
-    const [items, setItems] = useState<Array<LibDragListItem>>([
-        { id: "0", title: "First", body: "Body" },
-        {
-            id: "1",
-            title: "Second",
-            badge: { backgroundColor: "success" },
-        },
-        {
-            id: "2",
-            title: "Third",
-            body: "Item",
-            date: convertDateShort(new Date()),
-        },
-    ])
-
-    return <DragList items={items} setItems={setItems} {...props} />
-}
-
-export const dragListPreview: ComponentPreview<ILibDragList> = {
-    name: "DragList",
-    component: DragList,
-    category: "components",
-    import: "DragList",
-    additionalImports: null,
-    optionalImports: ["DragListItem"],
-    propsImport: "ILibDragList",
-    additionalTypeImports: ["LibDragListItem"],
-    extends: ["HTMLDivElement"],
-    previews: [
-        { previewTitle: "Default", demo: <DragListDemo /> },
-        {
-            previewTitle: "Other styles & props",
-            demo: (
-                <DragListDemo
-                    gap="xxl"
-                    iconDrag="burger-menu"
-                    border={{ style: "dotted", width: 2, color: "secondary" }}
-                    borderRadius="xxl"
-                    padding="xxl"
-                    hideSeparator
-                />
-            ),
-        },
-    ],
-}

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

@@ -1,25 +0,0 @@
-/*=============================================== DragList tests ===============================================*/
-
-import { LIB_TOKENS } from "../../.."
-import { DragListPreview } from "./Preview"
-
-describe("<DragList />", () => {
-    it("renders <DragList /> component", () => {
-        cy.mount(<DragListPreview />)
-        cy.dataTest()
-            .should("exist")
-            .should("have.class", "className")
-            .should(
-                "have.css",
-                "border-color",
-                LIB_TOKENS.colors.light["gray-200"].rgb
-            )
-            .should("have.css", "border-style", "solid")
-            .should("have.css", "border-width", "1px")
-            .should("have.css", "padding", LIB_TOKENS.spacers.s)
-            .should("have.css", "border-radius", LIB_TOKENS.radiuses.m)
-            .should("have.css", "gap", LIB_TOKENS.spacers.s)
-
-        cy.dataTest("testid.DragListItem").should("have.length", 3)
-    })
-})

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

@@ -1,34 +0,0 @@
-/*=============================================== DragListPreview ===============================================*/
-
-import { useState } from "react"
-import { convertDateShort } from "@julseb-lib/utils"
-import { DragList } from "../../../"
-import type { LibDragListItem } from "../../../types"
-import type { ILibDragList } from "../types"
-
-export const DragListPreview = (props: Omit<ILibDragList, "items" | "setItems" | "children">) => {
-    const [items, setItems] = useState<Array<LibDragListItem>>([
-        { id: "0", title: "First", body: "Body" },
-        {
-            id: "1",
-            title: "Second",
-            badge: { backgroundColor: "success" },
-        },
-        {
-            id: "2",
-            title: "Third",
-            body: "Item",
-            date: convertDateShort(new Date()),
-        },
-    ])
-
-    return (
-        <DragList
-            data-testid="testid"
-            className="className"
-            items={items}
-            setItems={setItems}
-            {...props}
-        />
-    )
-}

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

@@ -1,4 +0,0 @@
-/*=============================================== DragList exports ===============================================*/
-
-export * from "./DragList"
-export * from "./DragListItem"

package/src/lib/components/DragList/styles.tsx

@@ -1,75 +0,0 @@
-/*=============================================== DragList styles ===============================================*/
-
-import styled from "styled-components"
-import { stringifyPx } from "@julseb-lib/utils"
-import { Mixins, setDefaultTheme } from "../../"
-import type {
-    ILibBorder,
-    ILibPadding,
-    ILibRadius,
-    LibSpacers,
-} from "../../types"
-
-const StyledDragList = styled.div<{
-    $gap: LibSpacers
-    $border: ILibBorder
-    $padding: ILibPadding
-    $borderRadius: ILibRadius
-}>`
-    ${({ $gap }) =>
-        Mixins.Flexbox({
-            $flexDirection: "column",
-            $alignItems: "stretch",
-            $gap,
-        })}
-    ${({ $border }) => Mixins.Border($border)};
-    ${({ $padding }) => Mixins.Padding($padding)};
-    ${({ $borderRadius }) => Mixins.BorderRadius($borderRadius)};
-`
-
-const StyledItem = styled.div`
-    ${Mixins.Flexbox({
-        $gap: "xs",
-        $alignItems: "flex-start",
-    })}
-    cursor: grab;
-
-    &:active {
-        cursor: grabbing;
-    }
-`
-
-const DragIconContainer = styled.span<{ $size: number }>`
-    width: ${({ $size }) => stringifyPx($size)};
-    height: ${({ $size }) => stringifyPx($size)};
-    color: ${({ theme }) => theme.GRAY_500};
-    ${Mixins.Flexbox({
-        $alignItems: "center",
-        $justifyContent: "center",
-    })};
-    margin-top: 2px;
-`
-
-const Content = styled.div`
-    flex-grow: 1;
-`
-
-const RightContainer = styled.span`
-    margin-top: 2px;
-`
-
-setDefaultTheme([
-    StyledDragList,
-    StyledItem,
-    DragIconContainer,
-    Content,
-    RightContainer,
-])
-
-export {
-    StyledDragList,
-    StyledItem,
-    DragIconContainer,
-    Content,
-    RightContainer,
-}

package/src/lib/components/DragList/types.ts

@@ -1,65 +0,0 @@
-/*=============================================== DragList types ===============================================*/
-
-import type { DragEvent } from "react"
-import type {
-    LibComponentBase,
-    LibDragListItem,
-    LibIcon,
-    LibSpacers,
-    ReactChildren,
-    ILibBorder,
-    ILibPadding,
-    ILibRadius,
-    DispatchState,
-} from "../../types"
-
-/*====================== DragList ======================*/
-
-interface ILibDragListBase extends LibComponentBase<HTMLDivElement> {
-    iconDrag?: LibIcon
-    iconDragSize?: number
-    iconDragBaseUrl?: string
-    gap?: LibSpacers
-    border?: ILibBorder
-    padding?: ILibPadding
-    borderRadius?: ILibRadius
-}
-
-interface DragListWithItems extends ILibDragListBase {
-    items: Array<LibDragListItem>
-    setItems: DispatchState<Array<LibDragListItem>>
-    hideSeparator?: boolean
-    children?: never
-}
-
-interface DragListWithChildren extends ILibDragListBase {
-    items?: never
-    setItems?: never
-    hideSeparator?: never
-    children?: ReactChildren
-}
-
-export type ILibDragList = DragListWithItems | DragListWithChildren
-
-/*====================== DragListItem ======================*/
-
-interface ILibDragListItemBase extends LibComponentBase<HTMLDivElement> {
-    index: number
-    iconDrag?: LibIcon
-    iconDragSize?: number
-    iconDragBaseUrl?: string
-    handleDragStart: (e: DragEvent<HTMLDivElement>, i: number) => void
-    handleDragOver: (e: DragEvent<HTMLDivElement>, i: number) => void
-}
-
-interface DragListItemWithItem extends ILibDragListItemBase {
-    item: LibDragListItem
-    children?: never
-}
-
-interface DragListItemWithChildren extends ILibDragListItemBase {
-    item?: never
-    children?: ReactChildren
-}
-
-export type ILibDragListItem = DragListItemWithItem | DragListItemWithChildren