@julseb-lib/react 0.1.3 → 0.1.5

package/dist/lib/components/Toast/Toaster.tsx

@@ -1,156 +0,0 @@
-import type { FC } from "react"
-import { uuid } from "@julseb-lib/utils"
-import { Toast } from "./Toast"
-import type { LibAllColors, LibToastStatus } from "../../types"
-import { StyledToaster } from "./styles"
-import type { ILibToaster } from "./types"
-
-const DEFAULT_ICON_SIZE = 16
-
-const toastStatusStyles: {
-    [key: string]: {
-        status: LibToastStatus
-        timerColor: LibAllColors
-        iconLeftColor: LibAllColors
-        iconLeft?: JSX.Element
-        iconLeftSize: number
-    }
-} = {
-    success: {
-        status: "success",
-        timerColor: "success",
-        iconLeftColor: "success",
-        iconLeftSize: DEFAULT_ICON_SIZE,
-    },
-    error: {
-        status: "error",
-        timerColor: "danger",
-        iconLeftColor: "danger",
-        iconLeftSize: DEFAULT_ICON_SIZE,
-    },
-    warning: {
-        status: "warning",
-        timerColor: "warning",
-        iconLeftColor: "warning",
-        iconLeftSize: DEFAULT_ICON_SIZE,
-    },
-    info: {
-        status: "info",
-        timerColor: "primary",
-        iconLeftColor: "primary",
-        iconLeftSize: DEFAULT_ICON_SIZE,
-    },
-}
-
-/**
- * Toaster component for displaying a stack of Toast notifications with customizable position, styles, and options.
- *
- * @component
- * @extends HTMLDivElement
- * @param {Object} props - Toaster props.
- * @param {string} [props.data-testid] - Test id for testing purposes.
- * @param {ElementType} [props.as] - Custom element type to render as.
- * @param {ForwardedRef<HTMLDivElement>} [props.ref] - Ref forwarded to the root element.
- * @param {string} [props.className] - Additional class names.
- * @param {Array<LibToast>} props.toasts - Array of toast objects to display.
- * @param {Object} [props.toastsOptions] - Default options for all toasts (duration, labelClose, withTimer, icons, iconSizes, iconLeftColor, iconsBaseUrl, etc.).
- * @param {boolean} props.isOpen - Whether the toaster is open and visible.
- * @param {"top-left" | "top-right" | "bottom-left" | "bottom-right"} [props.position="bottom-right"] - Position of the toaster on the screen.
- * @param {any} [props.rest] - Additional props passed to the root element.
- * @returns {JSX.Element} The rendered Toaster component.
- *
- * @see https://documentation-components-react.vercel.app/components/toast
- * @example
- * <Toaster
- *   toasts={[
- *     { title: "Success", status: "success", options: { body: "Saved!" } },
- *     { title: "Error", status: "error", options: { body: "Failed!" } }
- *   ]}
- *   isOpen={true}
- *   position="top-right"
- * />
- */
-export const Toaster: FC<ILibToaster> = ({
-    "data-testid": testid,
-    as,
-    ref,
-    className,
-    toasts,
-    toastsOptions,
-    isOpen,
-    position = "bottom-right",
-    ...rest
-}) => {
-    return (
-        <StyledToaster
-            data-testid={testid}
-            as={as}
-            className={className}
-            ref={ref}
-            $position={position}
-            {...rest}
-        >
-            {toasts.map(toast => {
-                const styles = toastStatusStyles[toast.status || "success"]
-
-                return (
-                    <Toast
-                        data-testid={
-                            toast.options?.["data-testid"] ||
-                            toast["data-testid"] ||
-                            (testid && `${testid}.Toast`)
-                        }
-                        className={
-                            toast.options?.className ||
-                            toast.className ||
-                            (className && "Toast")
-                        }
-                        title={toast.title}
-                        id={toast.options?.id || toast.id}
-                        ref={toast.options?.ref || toast.ref}
-                        toasterPosition={position}
-                        options={{
-                            duration:
-                                toast.options?.duration ||
-                                toastsOptions?.duration ||
-                                3000,
-                            icons: {
-                                left:
-                                    toast.options?.icons?.left ||
-                                    styles?.iconLeft,
-                                close:
-                                    toast.options?.icons?.close ||
-                                    toastsOptions?.icons?.close,
-                            },
-                            iconSizes: {
-                                left:
-                                    toast.options?.iconSizes?.left ||
-                                    styles?.iconLeftSize,
-                                close:
-                                    toast.options?.iconSizes?.close ||
-                                    toastsOptions?.iconSizes?.close,
-                            },
-                            iconLeftColor:
-                                toast.options?.iconLeftColor ||
-                                toastsOptions?.iconLeftColor ||
-                                styles.iconLeftColor,
-                            ref: toast.options?.ref || toast.ref,
-                            labelClose:
-                                toast.options?.labelClose ||
-                                toastsOptions?.labelClose,
-                            body: toast.options?.body,
-                            id: toast.options?.id || toast.id,
-                            timerBackgroundColor:
-                                toast.options?.timerBackgroundColor ||
-                                styles.timerColor,
-                            ...toastsOptions,
-                            ...toast.options,
-                        }}
-                        status={toast.status}
-                        key={uuid()}
-                    />
-                )
-            })}
-        </StyledToaster>
-    )
-}

package/dist/lib/components/Toast/index.ts

@@ -1 +0,0 @@
-export * from "./Toast"

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

@@ -1,247 +0,0 @@
-import styled, { keyframes, css } from "styled-components"
-import { stringifyPx } from "@julseb-lib/utils"
-import {
-    MEDIA,
-    FONT_SIZES,
-    LINE_HEIGHTS,
-    Mixins,
-    RADIUSES,
-    SPACERS,
-    TRANSITIONS,
-    setDefaultTheme,
-    Text,
-} from "../../"
-import type {
-    LibAllColors,
-    LibToasterPosition,
-    LibToastStatus,
-} from "../../types"
-
-const OpenFromLeft = keyframes`
-0% { transform: translateX(-100%); }
-
-100% { transform: translateX(0); }
-`
-
-const CloseFromLeft = keyframes`
-0% { transform: translateX(0); }
-
-100% { transform: translateX(-100%); }
-`
-
-const OpenFromRight = keyframes`
-0% { transform: translateX(100%); }
-
-100% { transform: translateX(0); }
-`
-
-const CloseFromRight = keyframes`
-0% { transform: translateX(0); }
-
-100% { transform: translateX(100%); }
-`
-
-const StyledToast = styled.div<{
-    $status: LibToastStatus
-    $toasterPosition?: LibToasterPosition
-    $maxWidth: string | number
-}>`
-    position: relative;
-    width: 100%;
-    max-width: ${({ $maxWidth }) => stringifyPx($maxWidth)};
-    padding: ${SPACERS.S};
-    border-radius: ${RADIUSES.M};
-    transition: ${TRANSITIONS.SHORT};
-    border: 1px solid;
-    overflow: hidden;
-
-    ${({ $toasterPosition }) => {
-        const speedAndFunction = "200ms ease"
-
-        switch ($toasterPosition) {
-            case "top-left":
-            case "bottom-left":
-                return css`
-                    animation: ${CloseFromLeft} ${speedAndFunction};
-
-                    &.Open {
-                        animation: ${OpenFromLeft} ${speedAndFunction};
-                    }
-                `
-            case "top-right":
-            case "bottom-right":
-                return css`
-                    animation: ${CloseFromRight} ${speedAndFunction};
-
-                    &.Open {
-                        animation: ${OpenFromRight} ${speedAndFunction};
-                    }
-                `
-            default:
-                return null
-        }
-    }}
-
-    ${({ $status, theme }) => {
-        switch ($status) {
-            case "success":
-                return css`
-                    background-color: ${Mixins.AllColors("success-50", theme)};
-                    border-color: ${Mixins.AllColors("success", theme)};
-                `
-            case "error":
-                return css`
-                    background-color: ${Mixins.AllColors("danger-50", theme)};
-                    border-color: ${Mixins.AllColors("danger", theme)};
-                `
-            case "warning":
-                return css`
-                    background-color: ${Mixins.AllColors("warning-50", theme)};
-                    border-color: ${Mixins.AllColors("warning", theme)};
-                `
-            case "info":
-                return css`
-                    background-color: ${Mixins.AllColors(
-                        "secondary-50",
-                        theme
-                    )};
-                    border-color: ${Mixins.AllColors("secondary", theme)};
-                `
-            default:
-                return null
-        }
-    }}
-`
-
-const TitleContainer = styled.div`
-    width: 100%;
-    ${Mixins.Flexbox({
-        $gap: "xs",
-    })}
-
-    & > p {
-        flex-grow: 1;
-    }
-`
-
-const ICON_CONTAINER_SIZE = 24
-
-const IconContainer = styled.span`
-    height: calc(${FONT_SIZES.H6} * ${LINE_HEIGHTS.BODY});
-    ${Mixins.Flexbox({
-        $inline: true,
-        $alignItems: "center",
-        $justifyContent: "center",
-    })}
-`
-
-const CloseButton = styled.button`
-    width: ${ICON_CONTAINER_SIZE}px;
-    height: ${ICON_CONTAINER_SIZE}px;
-    padding: 0;
-    border: none;
-    background-color: transparent;
-    color: ${({ theme }) => Mixins.ColorsHoverDefault("gray", theme)};
-    ${Mixins.Flexbox({
-        $inline: true,
-        $alignItems: "center",
-        $justifyContent: "center",
-    })}
-
-    @media ${MEDIA.HOVER} {
-        &:hover {
-            color: ${({ theme }) => Mixins.ColorsHoverHover("gray", theme)};
-        }
-
-        &:active {
-            color: ${({ theme }) => Mixins.ColorsHoverActive("gray", theme)};
-        }
-    }
-`
-
-const Progress = keyframes`
-0% { width: 100%; }
-
-100% { width: 0; }
-`
-
-const Timer = styled.span<{
-    $backgroundColor: LibAllColors
-    $duration: number
-}>`
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 4px;
-    background-color: ${({ theme, $backgroundColor }) =>
-        Mixins.AllColors($backgroundColor, theme)};
-    animation: ${Progress} ${({ $duration }) => $duration}ms linear forwards;
-`
-
-const StyledToaster = styled.div<{ $position: LibToasterPosition }>`
-    position: fixed;
-    width: 300px;
-    height: fit-content;
-    max-height: 100vh;
-    z-index: 9999;
-    overflow-y: scroll;
-    ${Mixins.Flexbox({
-        $flexDirection: "column",
-        $justifyContent: "flex-end",
-        $gap: "s",
-    })}
-
-    ${({ $position }) => {
-        const SPACING = SPACERS.S
-
-        switch ($position) {
-            case "top-left":
-                return css`
-                    left: ${SPACING};
-                    top: ${SPACING};
-                `
-            case "top-right":
-                return css`
-                    right: ${SPACING};
-                    top: ${SPACING};
-                `
-            case "bottom-left":
-                return css`
-                    left: ${SPACING};
-                    bottom: ${SPACING};
-                `
-            case "bottom-right":
-                return css`
-                    right: ${SPACING};
-                    bottom: ${SPACING};
-                `
-            default:
-                return null
-        }
-    }}
-`
-
-const Title = styled(Text)`
-    width: 100%;
-` as any
-
-setDefaultTheme([
-    StyledToast,
-    TitleContainer,
-    IconContainer,
-    CloseButton,
-    Timer,
-    StyledToaster,
-    Title,
-])
-
-export {
-    StyledToast,
-    TitleContainer,
-    IconContainer,
-    CloseButton,
-    Timer,
-    StyledToaster,
-    Title,
-}

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

@@ -1,30 +0,0 @@
-import type {
-    LibComponentBase,
-    LibToasterPosition,
-    LibToast,
-    LibToastOptions,
-} from "../../types"
-
-export interface ILibToast extends LibComponentBase<HTMLDivElement>, LibToast {
-    title: string
-    toasterPosition?: LibToasterPosition
-    maxWidth?: string | number
-    hideCloseButton?: boolean
-}
-
-export interface ILibToaster extends LibComponentBase<HTMLDivElement> {
-    className?: string
-    toasts: Array<LibToast>
-    toastsOptions?: Pick<
-        LibToastOptions,
-        | "duration"
-        | "labelClose"
-        | "withTimer"
-        | "icons"
-        | "iconSizes"
-        | "iconsBaseUrl"
-        | "iconLeftColor"
-    >
-    isOpen: boolean
-    position?: LibToasterPosition
-}

package/dist/lib/components/Tooltip/Tooltip.tsx

@@ -1,129 +0,0 @@
-import { useState, useRef, useCallback, type FC } from "react"
-import classNames from "classnames"
-import { useTouchScreen, useClickOutside } from "../../"
-import type { LibTooltipTrigger } from "../../types"
-import { TooltipWrapper, StyledTooltip } from "./styles"
-import type { ILibTooltip } from "./types"
-
-/**
- * Tooltip component for displaying contextual information on hover or click, with customizable position, colors, arrow, and trigger.
- *
- * @component
- * @extends HTMLDivElement
- * @param {Object} props - Tooltip props.
- * @param {string} [props.data-testid] - Test id for testing purposes.
- * @param {ElementType} [props.as] - Custom element type to render as.
- * @param {ForwardedRef<HTMLDivElement>} [props.ref] - Ref forwarded to the root element.
- * @param {string} [props.className] - Additional class names.
- * @param {ReactNode} props.tooltip - Tooltip content (string or JSX element).
- * @param {"top" | "bottom" | "left" | "right"} [props.position="top"] - Tooltip position relative to the trigger.
- * @param {boolean} [props.hideArrow] - If true, hides the tooltip arrow.
- * @param {"hover" | "click"} [props.trigger] - Trigger event for showing the tooltip.
- * @param {string} [props.backgroundColor="black-80"] - Tooltip background color.
- * @param {string} [props.textColor="white"] - Tooltip text color.
- * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.offset="xs"] - Offset between the tooltip and the trigger.
- * @param {CSSProperties} [props.tooltipStyles] - Custom styles for the tooltip.
- * @param {MouseEventHandler} [props.onClick] - Custom click handler for the trigger.
- * @param {MouseEventHandler} [props.onMouseEnter] - Custom mouse enter handler for the trigger.
- * @param {MouseEventHandler} [props.onMouseLeave] - Custom mouse leave handler for the trigger.
- * @param {ReactNode} [props.children] - Element that triggers the tooltip.
- * @param {any} [props.rest] - Additional props passed to the root element.
- * @returns {JSX.Element} The rendered Tooltip component.
- *
- * @see https://documentation-components-react.vercel.app/components/tooltip
- * @example
- * <Tooltip tooltip="More info" position="bottom">
- *   <button>Hover me</button>
- * </Tooltip>
- */
-export const Tooltip: FC<ILibTooltip> = ({
-    "data-testid": testid,
-    as,
-    ref,
-    className,
-    children,
-    tooltip,
-    position = "top",
-    hideArrow,
-    trigger,
-    backgroundColor = "black-80",
-    textColor = "white",
-    onClick,
-    onMouseEnter,
-    onMouseLeave,
-    offset = "xs",
-    tooltipStyles,
-    ...rest
-}) => {
-    const isTouchScreen = useTouchScreen()
-    const defaultTrigger: LibTooltipTrigger =
-        trigger === "click" || isTouchScreen ? "click" : "hover"
-
-    const [isVisible, setIsVisible] = useState(false)
-
-    const el = useRef<HTMLDivElement>(null)
-    useClickOutside(el, () => {
-        if (isVisible && defaultTrigger === "click") setIsVisible(false)
-    })
-
-    const handleClick = useCallback(() => {
-        setIsVisible(!isVisible)
-    }, [isVisible])
-
-    const handleHover = useCallback(() => {
-        setIsVisible(true)
-    }, [])
-    const handleLeave = useCallback(() => {
-        setIsVisible(false)
-    }, [])
-
-    return (
-        <TooltipWrapper
-            data-testid={testid}
-            ref={ref}
-            as={as}
-            className={classNames(className, { Visible: isVisible })}
-            onClick={
-                onClick
-                    ? onClick
-                    : defaultTrigger === "click"
-                    ? handleClick
-                    : undefined
-            }
-            onMouseEnter={
-                onMouseEnter
-                    ? onMouseEnter
-                    : defaultTrigger === "hover"
-                    ? handleHover
-                    : undefined
-            }
-            onMouseLeave={
-                onMouseLeave
-                    ? onMouseLeave
-                    : defaultTrigger === "hover"
-                    ? handleLeave
-                    : undefined
-            }
-            {...rest}
-        >
-            <StyledTooltip
-                data-testid={testid && `${testid}.Tooltip`}
-                className={classNames(
-                    { Tooltip: className },
-                    { Visible: isVisible }
-                )}
-                ref={el}
-                style={tooltipStyles}
-                $position={position}
-                $withArrow={!hideArrow}
-                $backgroundColor={backgroundColor}
-                $textColor={textColor}
-                $offset={offset}
-            >
-                {tooltip}
-            </StyledTooltip>
-
-            {children}
-        </TooltipWrapper>
-    )
-}