@julseb-lib/react 0.0.85 → 0.0.86

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

@@ -1,6 +1,4 @@
-/*=============================================== Toast component ===============================================*/
-
-import { forwardRef, useEffect, useCallback, useRef, useState } from "react"
+import { useEffect, useCallback, useRef, useState, type FC } from "react"
 import classNames from "classnames"
 import { uuid } from "@julseb-lib/utils"
 import { Text, useToast, useMergeRefs } from "../.."
@@ -19,192 +17,186 @@ import type { ILibToast } from "./types"
 const CLOSE_ICON_SIZE = 24
 
 /**
- * @description Returns a Toast component
- * @link https://documentation-components-react.vercel.app/components/toast
+ * Toast component for displaying a notification message with customizable title, body, icons, status, timer, and close button.
+ *
+ * @component
  * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop title: string
- * @prop toasterPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
- * @prop toastStyle?: { maxWidth?: string | number; border?: { style?: CssBorderStyle; width?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"; color?: Any color from the library }; backgroundColor?: Any color from the library; textColor?: Any color from the library; shadow?: "xxl" | "xl" | "l" | "m" | "s" | "xs" }
- * @prop hideCloseButton?: boolean
- * @prop status?: "success" | "error" | "warning" | "info"
- * @prop options?: LibToastOptions
+ * @param {Object} props - Toast 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.title - Title of the toast.
+ * @param {"top-left" | "top-right" | "bottom-left" | "bottom-right"} [props.toasterPosition] - Position of the toast on the screen.
+ * @param {{ maxWidth?: string | number; border?: { style?: CssBorderStyle; width?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"; color?: string }; backgroundColor?: string; textColor?: string; shadow?: "xxl" | "xl" | "l" | "m" | "s" | "xs" }} [props.toastStyle] - Custom style for the toast.
+ * @param {boolean} [props.hideCloseButton] - If true, hides the close button.
+ * @param {"success" | "error" | "warning" | "info"} [props.status] - Status of the toast for styling.
+ * @param {LibToastOptions} [props.options] - Additional toast options (body, duration, icons, etc.).
+ * @param {any} [props.rest] - Additional props passed to the root element.
+ * @returns {JSX.Element} The rendered Toast component.
  *
- * @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
+ * @see https://documentation-components-react.vercel.app/components/toast
+ * @example
+ * <Toast
+ *   title="Success"
+ *   status="success"
+ *   options={{
+ *     body: "Your changes have been saved.",
+ *     duration: 3000,
+ *     icons: { left: "check" },
+ *     withTimer: true
+ *   }}
+ * />
  */
-export const Toast = forwardRef<HTMLDivElement, ILibToast>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            children,
-            className,
-            title,
-            id = uuid(),
-            options,
-            maxWidth = 400,
-            toasterPosition,
-            role = "alert",
-            hideCloseButton,
-            status,
-            ...rest
-        },
-        ref
-    ) => {
-        const toast = useToast()
-        const [isOpen, setIsOpen] = useState(true)
+export const Toast: FC<ILibToast> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    className,
+    title,
+    id = uuid(),
+    options,
+    maxWidth = 400,
+    toasterPosition,
+    role = "alert",
+    hideCloseButton,
+    status,
+    ...rest
+}) => {
+    const toast = useToast()
+    const [isOpen, setIsOpen] = useState(true)
 
-        const remove = useCallback(() => {
-            setIsOpen(false)
-            setTimeout(() => toast.remove(id), 200)
-        }, [id, toast])
+    const remove = useCallback(() => {
+        setIsOpen(false)
+        setTimeout(() => toast.remove(id), 200)
+    }, [id, toast])
 
-        const el = useRef<HTMLDivElement>(null)
+    const el = useRef<HTMLDivElement>(null)
 
-        useEffect(() => {
-            const duration = options?.duration
+    useEffect(() => {
+        const duration = options?.duration
 
-            if (duration) {
-                setTimeout(() => {
-                    remove()
-                }, duration)
-            }
-        }, [options?.duration, remove])
+        if (duration) {
+            setTimeout(() => {
+                remove()
+            }, duration)
+        }
+    }, [options?.duration, remove])
 
-        const body = children || options?.body
+    const body = children || options?.body
 
-        return (
-            <StyledToast
-                data-testid={testid}
-                ref={useMergeRefs([ref, el])}
-                as={as}
-                role={role}
-                id={id}
-                className={classNames(className, { Open: isOpen })}
-                $status={status}
-                $maxWidth={maxWidth}
-                $toasterPosition={toasterPosition}
-                {...rest}
+    return (
+        <StyledToast
+            data-testid={testid}
+            ref={useMergeRefs([ref, el])}
+            as={as}
+            role={role}
+            id={id}
+            className={classNames(className, { Open: isOpen })}
+            $status={status}
+            $maxWidth={maxWidth}
+            $toasterPosition={toasterPosition}
+            {...rest}
+        >
+            <TitleContainer
+                data-testid={testid && `${testid}.TitleContainer`}
+                className={className && "TitleContainer"}
             >
-                <TitleContainer
-                    data-testid={testid && `${testid}.TitleContainer`}
-                    className={className && "TitleContainer"}
-                >
-                    {options?.icons?.left && (
-                        <IconContainer
+                {options?.icons?.left && (
+                    <IconContainer
+                        data-testid={
+                            testid &&
+                            `${testid}.TitleContainer.IconContainerLeft`
+                        }
+                        className={className && "IconContainerLeft"}
+                    >
+                        <LibIcon
                             data-testid={
                                 testid &&
-                                `${testid}.TitleContainer.IconContainerLeft`
+                                `${testid}.TitleContainer.IconContainerLeft.Icon`
                             }
-                            className={className && "IconContainerLeft"}
-                        >
-                            <LibIcon
-                                data-testid={
-                                    testid &&
-                                    `${testid}.TitleContainer.IconContainerLeft.Icon`
-                                }
-                                className={className && "Icon"}
-                                icon={options.icons.left}
-                                size={options.iconSizes?.left || 16}
-                                color={options?.iconLeftColor}
-                                baseUrl={options?.iconsBaseUrl}
-                            />
-                        </IconContainer>
-                    )}
+                            className={className && "Icon"}
+                            icon={options.icons.left}
+                            size={options.iconSizes?.left || 16}
+                            color={options?.iconLeftColor}
+                            baseUrl={options?.iconsBaseUrl}
+                        />
+                    </IconContainer>
+                )}
 
-                    <Title
-                        data-testid={testid && `${testid}.TitleContainer.Title`}
-                        className={className && "Title"}
-                        tag="strong"
-                    >
-                        {title}
-                    </Title>
+                <Title
+                    data-testid={testid && `${testid}.TitleContainer.Title`}
+                    className={className && "Title"}
+                    tag="strong"
+                >
+                    {title}
+                </Title>
 
-                    {!hideCloseButton && (
-                        <IconContainer
+                {!hideCloseButton && (
+                    <IconContainer
+                        data-testid={
+                            testid &&
+                            `${testid}.TitleContainer.IconContainerRight`
+                        }
+                        className={className && "IconContainerRight"}
+                    >
+                        <CloseButton
+                            onClick={remove}
+                            aria-label={options?.labelClose || "Close toast"}
                             data-testid={
                                 testid &&
-                                `${testid}.TitleContainer.IconContainerRight`
+                                `${testid}.TitleContainer.IconContainerRight.CloseButton`
                             }
-                            className={className && "IconContainerRight"}
+                            className={className && "CloseButton"}
                         >
-                            <CloseButton
-                                onClick={remove}
-                                aria-label={
-                                    options?.labelClose || "Close toast"
-                                }
+                            <LibIcon
                                 data-testid={
                                     testid &&
-                                    `${testid}.TitleContainer.IconContainerRight.CloseButton`
+                                    `${testid}.TitleContainer.IconContainerRight.CloseButton.Icon`
                                 }
-                                className={className && "CloseButton"}
-                            >
-                                <LibIcon
-                                    data-testid={
-                                        testid &&
-                                        `${testid}.TitleContainer.IconContainerRight.CloseButton.Icon`
-                                    }
-                                    className={className && "CloseIcon"}
-                                    icon={
-                                        options?.icons?.close || (
-                                            <Close
-                                                size={CLOSE_ICON_SIZE}
-                                                data-testid={
-                                                    testid &&
-                                                    `${testid}.TitleContainer.IconContainerRight.CloseButton.Icon`
-                                                }
-                                                className={
-                                                    className && "CloseIcon"
-                                                }
-                                            />
-                                        )
-                                    }
-                                    size={
-                                        options?.iconSizes?.close ||
-                                        CLOSE_ICON_SIZE
-                                    }
-                                    color="currentColor"
-                                    baseUrl={options?.iconsBaseUrl}
-                                />
-                            </CloseButton>
-                        </IconContainer>
-                    )}
-                </TitleContainer>
-
-                {body && (
-                    <Text
-                        data-testid={testid && `${testid}.Body`}
-                        className={className && "Body"}
-                    >
-                        {body}
-                    </Text>
+                                className={className && "CloseIcon"}
+                                icon={
+                                    options?.icons?.close || (
+                                        <Close
+                                            size={CLOSE_ICON_SIZE}
+                                            data-testid={
+                                                testid &&
+                                                `${testid}.TitleContainer.IconContainerRight.CloseButton.Icon`
+                                            }
+                                            className={className && "CloseIcon"}
+                                        />
+                                    )
+                                }
+                                size={
+                                    options?.iconSizes?.close || CLOSE_ICON_SIZE
+                                }
+                                color="currentColor"
+                                baseUrl={options?.iconsBaseUrl}
+                            />
+                        </CloseButton>
+                    </IconContainer>
                 )}
+            </TitleContainer>
 
-                {options?.withTimer && (
-                    <Timer
-                        data-testid={testid && `${testid}.Timer`}
-                        className={className && "Timer"}
-                        $duration={options?.duration ?? 3000}
-                        $backgroundColor={
-                            options?.timerBackgroundColor ?? "success-200"
-                        }
-                    />
-                )}
-            </StyledToast>
-        )
-    }
-)
+            {body && (
+                <Text
+                    data-testid={testid && `${testid}.Body`}
+                    className={className && "Body"}
+                >
+                    {body}
+                </Text>
+            )}
+
+            {options?.withTimer && (
+                <Timer
+                    data-testid={testid && `${testid}.Timer`}
+                    className={className && "Timer"}
+                    $duration={options?.duration ?? 3000}
+                    $backgroundColor={
+                        options?.timerBackgroundColor ?? "success-200"
+                    }
+                />
+            )}
+        </StyledToast>
+    )
+}

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

@@ -1,6 +1,4 @@
-/*=============================================== Toaster component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { uuid } from "@julseb-lib/utils"
 import { Toast } from "./Toast"
 import type { LibAllColors, LibToastStatus } from "../../types"
@@ -45,124 +43,114 @@ const toastStatusStyles: {
 }
 
 /**
- * @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 }
+ * Toaster component for displaying a stack of Toast notifications with customizable position, styles, and options.
  *
- * @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
+ * @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.
  *
- * @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
+ * @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 = 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"]
+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>
-        )
-    }
-)
+                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 +1 @@
-/*=============================================== Toast exports ===============================================*/
-
-export * from "./Toast"
+export * from "./Toast"

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

@@ -1,5 +1,3 @@
-/*=============================================== Toast styles ===============================================*/
-
 import styled, { keyframes, css } from "styled-components"
 import { stringifyPx } from "@julseb-lib/utils"
 import {

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

@@ -1,5 +1,3 @@
-/*=============================================== Toast types ===============================================*/
-
 import type {
     LibComponentBase,
     LibToasterPosition,