@julseb-lib/react 0.0.56 → 0.0.58

package/dist/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/dist/lib/components/DragList/index.ts

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

package/dist/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/dist/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

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

@@ -1,110 +0,0 @@
-/*=============================================== Drawer component ===============================================*/
-
-import { forwardRef, useEffect } 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"
-
-/**
- * @description Returns a Drawer component
- * @link https://documentation-components-react.vercel.app/components/drawer
- * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop isOpen: boolean
- * @prop setIsOpen: Dispatch<SetStateAction<boolean>>
- * @prop position?: "left" | "right"
- * @prop enableScrollingOpen?: boolean
- * @prop disableEsc?: boolean
- * @prop backgroundColor?: Any color from the library
- * @prop contentColor?: Any color from the library
- * @prop linksColor?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"
- * @prop gap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
- * @prop width?: string | number
- * @prop zIndex?: number
- * @prop overlayColor?: Any color or overlay 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" }
- */
-export const Drawer = forwardRef<HTMLDivElement, ILibDrawer>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            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
-        },
-        ref
-    ) => {
-        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/index.ts

@@ -1,3 +0,0 @@
-/*=============================================== Drawer exports ===============================================*/
-
-export * from "./Drawer"

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

@@ -1,136 +0,0 @@
-/*=============================================== Drawer styles ===============================================*/
-
-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,28 +0,0 @@
-/*=============================================== Drawer types ===============================================*/
-
-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
-}