@julseb-lib/react 0.1.2 → 0.1.4

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

@@ -1,184 +0,0 @@
-import type { DragEvent, FC } 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"
-
-/**
- * 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.
- *
- * @example
- * <DragListItem
- *   item={item}
- *   index={0}
- *   handleDragStart={handleDragStart}
- *   handleDragOver={handleDragOver}
- * />
- */
-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}
-                />
-            </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/dist/lib/components/DragList/styles.tsx

@@ -1,73 +0,0 @@
-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/dist/lib/components/DragList/types.ts

@@ -1,59 +0,0 @@
-import type { DragEvent } from "react"
-import type {
-    LibComponentBase,
-    LibDragListItem,
-    LibIcon,
-    LibSpacers,
-    ReactChildren,
-    ILibBorder,
-    ILibPadding,
-    ILibRadius,
-    DispatchState,
-} from "../../types"
-
-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
-
-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

package/dist/lib/components/Drawer/Drawer.tsx

@@ -1,113 +0,0 @@
-import { useEffect, type FC } from "react"
-import classNames from "classnames"
-import {
-    enableScroll,
-    disableScroll as disableScrollFn,
-} from "@julseb-lib/utils"
-import { useKeyPress } from "../../"
-import { StyledDrawer, Overlay, DrawerContent } from "./styles"
-import type { ILibDrawer } from "./types"
-
-/**
- * Drawer component for displaying a sliding panel from the left or right side of the screen.
- *
- * @component
- * @param {Object} props - Drawer 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 {ReactNode} [props.children] - Content of the drawer.
- * @param {string} [props.className] - Additional class names.
- * @param {boolean} props.isOpen - Whether the drawer is open.
- * @param {Dispatch<SetStateAction<boolean>>} props.setIsOpen - Setter for the open state.
- * @param {boolean} [props.enableScrollingOpen] - Allow scrolling when drawer is open.
- * @param {boolean} [props.disableEsc] - Disable closing the drawer with Escape key.
- * @param {string} [props.backgroundColor="primary"] - Drawer background color.
- * @param {string} [props.contentColor="background"] - Drawer content color.
- * @param {"primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"} [props.linksColor="background"] - Color for links inside the drawer.
- * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.gap="s"] - Gap between drawer content elements.
- * @param {string|number} [props.width="30vw"] - Width of the drawer.
- * @param {number} [props.zIndex=998] - z-index of the drawer.
- * @param {string} [props.overlayColor="black-80"] - Overlay color.
- * @param {"left" | "right"} [props.position="right"] - Drawer position.
- * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" | Object} [props.padding="l"] - Padding for the drawer content.
- * @returns {JSX.Element} The rendered Drawer component.
- *
- * @example
- * <Drawer isOpen={open} setIsOpen={setOpen} position="left">
- *   <p>Drawer content</p>
- * </Drawer>
- */
-export const Drawer: FC<ILibDrawer> = ({
-    "data-testid": testid,
-    as,
-    ref,
-    children,
-    className,
-    isOpen,
-    setIsOpen,
-    enableScrollingOpen,
-    disableEsc,
-    backgroundColor = "primary",
-    contentColor = "background",
-    linksColor = "background",
-    gap = "s",
-    width = "30vw",
-    zIndex = 998,
-    overlayColor = "black-80",
-    position = "right",
-    padding = "l",
-    ...rest
-}) => {
-    useEffect(() => {
-        if (isOpen && !enableScrollingOpen) disableScrollFn()
-        else enableScroll()
-    }, [isOpen])
-
-    const handleClose = () => {
-        setIsOpen(false)
-        enableScroll()
-    }
-
-    useKeyPress("Escape", () => {
-        if (!disableEsc && isOpen) handleClose()
-    })
-
-    return (
-        <StyledDrawer
-            data-testid={testid}
-            ref={ref}
-            as={as}
-            className={classNames(className, { Open: isOpen })}
-            $zIndex={zIndex}
-            {...rest}
-        >
-            <Overlay
-                data-testid={testid && `${testid}.Overlay`}
-                onClick={handleClose}
-                className={classNames(
-                    { DrawerOverlay: className },
-                    { Open: isOpen }
-                )}
-                $overlayColor={overlayColor}
-            />
-
-            <DrawerContent
-                data-testid={testid && `${testid}.Content`}
-                className={classNames(
-                    { DrawerContent: className },
-                    { Open: isOpen }
-                )}
-                $gap={gap}
-                $backgroundColor={backgroundColor}
-                $contentColor={contentColor}
-                $linksColor={linksColor}
-                $width={width}
-                $position={position}
-                $padding={padding}
-            >
-                {children}
-            </DrawerContent>
-        </StyledDrawer>
-    )
-}

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

@@ -1,134 +0,0 @@
-import styled, { css } from "styled-components"
-import {
-    setDefaultTheme,
-    Mixins,
-    TRANSITIONS,
-    stringifyPx,
-    MEDIA,
-} from "../../"
-import type {
-    LibAllColors,
-    LibAllColorsAndOverlays,
-    LibColorsHover,
-    LibSpacers,
-    LibDrawerPosition,
-    ILibPadding,
-} from "../../types"
-
-const StyledDrawer = styled.div<{
-    $zIndex: number
-}>`
-    width: 100%;
-    height: 100vh;
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: ${({ $zIndex }) => $zIndex};
-    opacity: 0;
-    visibility: hidden;
-    transition: ${TRANSITIONS.SHORT};
-
-    &.Open {
-        opacity: 1;
-        visibility: visible;
-        transition: none;
-    }
-`
-
-const Overlay = styled.div<{ $overlayColor: LibAllColorsAndOverlays }>`
-    background-color: ${({ $overlayColor }) =>
-        Mixins.ColorsAndOverlays($overlayColor)};
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    visibility: hidden;
-    transition: ${TRANSITIONS.SHORT};
-
-    &.Open {
-        opacity: 1;
-        visibility: visible;
-    }
-`
-
-const DrawerContent = styled.div<{
-    $gap: LibSpacers
-    $backgroundColor: LibAllColors
-    $contentColor: LibAllColors
-    $linksColor: LibColorsHover
-    $width: string | number
-    $position: LibDrawerPosition
-    $padding: ILibPadding
-}>`
-    width: ${({ $width }) => stringifyPx($width)};
-    height: 100%;
-    background-color: ${({ $backgroundColor, theme }) =>
-        Mixins.AllColors($backgroundColor, theme)};
-    color: ${({ $contentColor, theme }) =>
-        Mixins.AllColors($contentColor, theme)};
-    position: absolute;
-    top: 0;
-    z-index: 1;
-    transition: ${TRANSITIONS.SHORT};
-
-    ${({ $gap }) =>
-        Mixins.Flexbox({
-            $flexDirection: "column",
-            $alignItems: "stretch",
-            $gap,
-        })}
-    ${({ $padding }) => Mixins.Padding($padding)}
-
-    a, button {
-        color: ${({ $linksColor, theme }) =>
-            Mixins.ColorsHoverDefault($linksColor, theme)};
-        text-decoration: none;
-        background-color: transparent;
-        padding: 0;
-        border: none;
-        text-align: left;
-        transition: ${TRANSITIONS.SHORT};
-
-        @media ${MEDIA.HOVER} {
-            &:hover {
-                color: ${({ $linksColor, theme }) =>
-                    Mixins.ColorsHoverHover($linksColor, theme)};
-            }
-
-            &:active {
-                color: ${({ $linksColor, theme }) =>
-                    Mixins.ColorsHoverActive($linksColor, theme)};
-            }
-        }
-    }
-
-    ${({ $position, $width }) => {
-        switch ($position) {
-            case "left":
-                return css`
-                    left: calc(${$width} * -1);
-
-                    &.Open {
-                        left: 0;
-                    }
-                `
-            case "right":
-                return css`
-                    right: calc(${$width} * -1);
-
-                    &.Open {
-                        right: 0;
-                    }
-                `
-            default:
-                return null
-        }
-    }}
-`
-
-setDefaultTheme([StyledDrawer, Overlay, DrawerContent])
-
-export { StyledDrawer, Overlay, DrawerContent }

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

@@ -1,26 +0,0 @@
-import type {
-    DispatchState,
-    LibAllColors,
-    LibAllColorsAndOverlays,
-    LibColorsHover,
-    LibComponentBase,
-    LibSpacers,
-    LibDrawerPosition,
-    ILibPadding,
-} from "../../types"
-
-export interface ILibDrawer extends LibComponentBase<HTMLDivElement> {
-    isOpen: boolean
-    setIsOpen: DispatchState<boolean>
-    position?: LibDrawerPosition
-    enableScrollingOpen?: boolean
-    disableEsc?: boolean
-    backgroundColor?: LibAllColors
-    contentColor?: LibAllColors
-    linksColor?: LibColorsHover
-    gap?: LibSpacers
-    width?: string | number
-    zIndex?: number
-    overlayColor?: LibAllColorsAndOverlays
-    padding?: ILibPadding
-}

package/dist/lib/components/Dropdown/Dropdown.tsx

@@ -1,98 +0,0 @@
-import { useRef, useCallback, type FC } from "react"
-import classNames from "classnames"
-import { uuid } from "@julseb-lib/utils"
-import { useMergeRefs, useClickOutside } from "../../"
-import { DropdownItem } from "./DropdownItem"
-import { StyledDropdown } from "./styles"
-import type { ILibDropdown } from "./types"
-
-/**
- * Dropdown component for displaying a list of selectable items or custom children, with flexible direction and styling.
- *
- * @component
- * @param {Object} props - Dropdown 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 {boolean} props.isOpen - Whether the dropdown is open.
- * @param {Dispatch<SetStateAction<boolean>>} props.setIsOpen - Setter for the open state.
- * @param {Array<LibDropdownItem>} [props.items] - Array of dropdown items (used if children is not provided).
- * @param {ReactNode} [props.children] - Dropdown items as children (used if items is not provided).
- * @param {"primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"} [props.accentColor="primary"] - Accent color for the dropdown.
- * @param {"up" | "down"} [props.direction="down"] - Direction in which the dropdown appears.
- * @param {number} [props.maxHeightOpen] - Maximum height of the open dropdown.
- * @param {number} [props.positionFromButton=34] - Position offset from the button.
- * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | null} [props.shadow="m"] - Shadow style for the dropdown.
- * @returns {JSX.Element} The rendered Dropdown component.
- *
- * @example
- * <Dropdown
- *   isOpen={isOpen}
- *   setIsOpen={setIsOpen}
- *   items={[
- *     { id: "1", text: "Option 1" },
- *     { id: "2", text: "Option 2" }
- *   ]}
- *   accentColor="secondary"
- *   direction="up"
- * />
- */
-export const Dropdown: FC<ILibDropdown> = ({
-    "data-testid": testid,
-    as,
-    ref,
-    className,
-    children,
-    isOpen,
-    setIsOpen,
-    accentColor = "primary",
-    direction = "down",
-    items,
-    maxHeightOpen = items ? items.length * 40 : 300,
-    positionFromButton = 34,
-    shadow = "m",
-    ...rest
-}) => {
-    const el = useRef<HTMLDivElement>(null as any)
-
-    useClickOutside(
-        el,
-        useCallback(() => setIsOpen(false), [setIsOpen])
-    )
-
-    return (
-        <StyledDropdown
-            data-testid={testid}
-            ref={useMergeRefs([ref, el])}
-            as={as}
-            className={classNames(className, { Open: isOpen })}
-            $direction={direction}
-            $maxHeight={maxHeightOpen}
-            $buttonOpenHeight={positionFromButton}
-            $shadow={shadow}
-            {...rest}
-        >
-            {items
-                ? items.map(item => (
-                      <DropdownItem
-                          data-testid={
-                              item["data-testid"] ||
-                              (testid && `${testid}.DropdownItem`)
-                          }
-                          className={
-                              item.className || (className && "DropdownItem")
-                          }
-                          id={item.id}
-                          ref={item.ref}
-                          accentColor={accentColor}
-                          {...item}
-                          key={uuid()}
-                      >
-                          {item.text}
-                      </DropdownItem>
-                  ))
-                : children}
-        </StyledDropdown>
-    )
-}