@julseb-lib/react 0.0.56 → 0.0.58

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

@@ -1,168 +0,0 @@
-/*=============================================== Toaster component ===============================================*/
-
-import { forwardRef } 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,
-    },
-}
-
-/**
- * @description Returns a Toaster component
- * @link https://documentation-components-react.vercel.app/components/toast
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop toasts: Array<LibToast>
- * @prop isOpen: boolean
- * @prop position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
- * @prop toastsOptions?: { duration?: number; labelClose?: string; withTimer?: boolean; icons?: { left?: string | JSX.Element; close?: string | JSX.Element }; iconSizes?: { left?: number; close?: number }; iconLeftColor?: Any color from the library; iconsBaseUrl?: string }
- *
- * @type LibToast
- * @prop data-testid?: string
- * @prop className?: string
- * @prop id?: string
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop title: string
- * @prop id?: string
- * @prop status?: "success" | "error" | "warning" | "info" | "loading"
- * @prop options?: LibToastOptions
- *
- * @type LibToastOptions
- * @prop data-testid?: string
- * @prop className?: string
- * @prop id?: string
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop body?: string | ReactChildren
- * @prop duration?: number
- * @prop icons?: { left?: string | JSX.Element; close?: string | JSX.Element }
- * @prop iconSizes?: { left?: number close?: number }
- * @prop iconLeftColor?: Any color from the library
- * @prop labelClose?: string
- * @prop withTimer?: boolean
- * @prop timerBackgroundColor?: Any color from the library
- */
-export const Toaster = forwardRef<HTMLDivElement, ILibToaster>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            className,
-            toasts,
-            toastsOptions,
-            isOpen,
-            position = "bottom-right",
-            ...rest
-        },
-        ref
-    ) => {
-        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,3 +0,0 @@
-/*=============================================== Toast exports ===============================================*/
-
-export * from "./Toast"

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

@@ -1,249 +0,0 @@
-/*=============================================== Toast styles ===============================================*/
-
-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,32 +0,0 @@
-/*=============================================== Toast types ===============================================*/
-
-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,120 +0,0 @@
-/*=============================================== Tooltip component ===============================================*/
-
-import { forwardRef, useState, useRef, useCallback } 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"
-
-/**
- * @description Returns a Tooltip component
- * @link https://documentation-components-react.vercel.app/components/tooltip
- * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop tooltip: string | JSX.Element
- * @prop position?: "top" | "bottom" | "left" | "right"
- * @prop hideArrow?: boolean
- * @prop trigger?: "hover" | "click"
- * @prop backgroundColor?: Any color or overlay from the library
- * @prop textColor?: Any color from the library
- * @prop offset?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
- * @prop tooltipStyles?: CSSProperties
- */
-export const Tooltip = forwardRef<HTMLDivElement, ILibTooltip>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            className,
-            children,
-            tooltip,
-            position = "top",
-            hideArrow,
-            trigger,
-            backgroundColor = "black-80",
-            textColor = "white",
-            onClick,
-            onMouseEnter,
-            onMouseLeave,
-            offset = "xs",
-            tooltipStyles,
-            ...rest
-        },
-        ref
-    ) => {
-        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>
-        )
-    }
-)

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

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