@julseb-lib/react 0.0.85 → 0.0.86

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

@@ -1,5 +1,3 @@
-/*=============================================== Datepicker types ===============================================*/
-
 import type { InputHTMLAttributes } from "react"
 import type {
     DispatchState,

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

@@ -1,127 +1,121 @@
-/*=============================================== DragList component ===============================================*/
-
-import { forwardRef, Fragment, useState, useRef, type DragEvent } from "react"
+import { Fragment, useState, useRef, type DragEvent, type FC } 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 }
+ * DragList component for displaying a sortable list with drag-and-drop support.
+ *
+ * @component
+ * @param {Object} props - DragList props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {ElementType} [props.as] - Custom element type to render as.
+ * @param {Ref<HTMLDivElement>} [props.ref] - Ref forwarded to the root element.
+ * @param {Array<LibDragListItem>} [props.items] - Array of list items (used if children is not provided).
+ * @param {Dispatch<SetStateAction<Array<LibDragListItem>>>} [props.setItems] - Setter for the list items (used if items is provided).
+ * @param {boolean} [props.hideSeparator] - Hide the separator between items.
+ * @param {ReactNode} [props.children] - List items as children (used if items is not provided).
+ * @param {string|JSX.Element} [props.iconDrag] - Icon for drag handle.
+ * @param {number} [props.iconDragSize] - Size of the drag icon.
+ * @param {string} [props.iconDragBaseUrl] - Base URL for the drag icon.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.gap="s"] - Gap between items.
+ * @param {Object} [props.border] - Border style, width, and color.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | Object} [props.borderRadius="m"] - Border radius for the list.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" | Object} [props.padding="s"] - Padding for the list.
+ * @param {string} [props.className] - Additional class names.
+ * @returns {JSX.Element} The rendered DragList component.
  *
- * @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
+ * @example
+ * <DragList
+ *   items={items}
+ *   setItems={setItems}
+ *   iconDrag={<DragIcon />}
+ * />
  */
-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)
+export const DragList: FC<ILibDragList> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    className,
+    gap = "s",
+    iconDrag,
+    iconDragSize,
+    iconDragBaseUrl,
+    items,
+    setItems,
+    border = { color: "gray-200" },
+    padding = "s",
+    borderRadius = "m",
+    hideSeparator,
+    ...rest
+}) => {
+    const [dragIndex, setDragIndex] = useState(-1)
+    const dragNode = useRef<HTMLDivElement>(null)
 
-        const handleDragStart = (e: DragEvent<HTMLDivElement>, i: number) => {
-            const { target } = e
-            setDragIndex(i)
+    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)
+        if (dragNode && dragNode.current) {
+            dragNode.current = target as HTMLDivElement
+            e.dataTransfer.effectAllowed = "move"
+
+            if (target instanceof HTMLElement) {
+                e.dataTransfer.setData("text/html", target.outerHTML)
             }
         }
+    }
 
-        const handleDragOver = (e: DragEvent<HTMLDivElement>, i: number) => {
-            e.preventDefault()
+    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)
-            }
+        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}
-                        />
+    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>
-        )
-    }
-)
+                    {!hideSeparator && i !== items.length - 1 && (
+                        <Hr data-testid={testid && `${testid}.Separator`} />
+                    )}
+                </Fragment>
+            )) ?? children}
+        </StyledDragList>
+    )
+}

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

@@ -1,6 +1,4 @@
-/*=============================================== DragListItem component ===============================================*/
-
-import { forwardRef, type DragEvent } from "react"
+import type { DragEvent, FC } from "react"
 import { Text, Badge } from "../../"
 import { Drag } from "../../icons"
 import { LibIcon } from "../LibIcon"
@@ -14,178 +12,173 @@ 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
+ * DragListItem component for rendering a draggable item in a DragList.
+ *
+ * @component
+ * @param {Object} props - DragListItem props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {ElementType} [props.as] - Custom element type to render as.
+ * @param {Ref<HTMLDivElement>} [props.ref] - Ref forwarded to the root element.
+ * @param {string} [props.className] - Additional class names.
+ * @param {string} [props.id] - HTML id attribute (used if item is not provided).
+ * @param {LibDragListItem} [props.item] - Item object to render (used if children is not provided).
+ * @param {ReactNode} [props.children] - Custom content (used if item is not provided).
+ * @param {number} props.index - Index of the item in the list.
+ * @param {(e: DragEvent<HTMLDivElement>, i: number) => void} props.handleDragStart - Handler for drag start event.
+ * @param {(e: DragEvent<HTMLDivElement>, i: number) => void} props.handleDragOver - Handler for drag over event.
+ * @param {string|JSX.Element} [props.iconDrag] - Icon for the drag handle.
+ * @param {number} [props.iconDragSize=24] - Size of the drag icon.
+ * @param {string} [props.iconDragBaseUrl] - Base URL for the drag icon.
+ * @returns {JSX.Element} The rendered DragListItem component.
  *
- * @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
+ * @example
+ * <DragListItem
+ *   item={item}
+ *   index={0}
+ *   handleDragStart={handleDragStart}
+ *   handleDragOver={handleDragOver}
+ * />
  */
-export const DragListItem = forwardRef<HTMLDivElement, ILibDragListItem>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            className,
-            id,
-            iconDragSize = 24,
-            iconDrag = (
-                <Drag
-                    data-testid={testid && `${testid}.IconDrag`}
+export const DragListItem: FC<ILibDragListItem> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    className,
+    id,
+    iconDragSize = 24,
+    iconDrag = (
+        <Drag
+            data-testid={testid && `${testid}.IconDrag`}
+            className={className && "IconDrag"}
+            size={iconDragSize}
+        />
+    ),
+    iconDragBaseUrl,
+    item,
+    children,
+    index,
+    handleDragStart,
+    handleDragOver,
+    ...rest
+}) => {
+    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}
                 />
-            ),
-            iconDragBaseUrl,
-            item,
-            children,
-            index,
-            handleDragStart,
-            handleDragOver,
-            ...rest
-        },
-        ref
-    ) => {
-        if (item?.element) return item.element
+            </DragIconContainer>
 
-        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}
+            <Content
+                data-testid={testid && `${testid}.DragListItemContent`}
+                className={className && "DragListItemContent"}
             >
-                <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 && (
+                {item ? (
+                    <>
+                        <Text
+                            tag="h6"
+                            data-testid={
+                                testid && `${testid}.DragListItemContent.Title`
+                            }
+                            className={className && "DragListItemTitle"}
+                        >
+                            {item.title}
+                        </Text>
+                        {item.body && (
                             <Text
                                 data-testid={
                                     testid &&
-                                    `${testid}.DragListItemRightContainer.Date`
+                                    `${testid}.DragListItemContent.Body`
                                 }
-                                className={className && "Date"}
-                                tag="small"
-                                color="gray"
+                                className={className && "DragListItemBody"}
                             >
-                                {item?.date.toString()}
+                                {item.body}
                             </Text>
                         )}
-                    </RightContainer>
+                    </>
+                ) : (
+                    children
                 )}
-            </StyledItem>
-        )
-    }
-)
+            </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/dist/lib/components/DragList/index.ts

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

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

@@ -1,5 +1,3 @@
-/*=============================================== DragList styles ===============================================*/
-
 import styled from "styled-components"
 import { stringifyPx } from "@julseb-lib/utils"
 import { Mixins, setDefaultTheme } from "../../"

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

@@ -1,5 +1,3 @@
-/*=============================================== DragList types ===============================================*/
-
 import type { DragEvent } from "react"
 import type {
     LibComponentBase,
@@ -13,8 +11,6 @@ import type {
     DispatchState,
 } from "../../types"
 
-/*====================== DragList ======================*/
-
 interface ILibDragListBase extends LibComponentBase<HTMLDivElement> {
     iconDrag?: LibIcon
     iconDragSize?: number
@@ -41,8 +37,6 @@ interface DragListWithChildren extends ILibDragListBase {
 
 export type ILibDragList = DragListWithItems | DragListWithChildren
 
-/*====================== DragListItem ======================*/
-
 interface ILibDragListItemBase extends LibComponentBase<HTMLDivElement> {
     index: number
     iconDrag?: LibIcon