@julseb-lib/react 0.0.84 → 0.0.86

package/dist/lib/components/BackToTop/BackToTop.tsx

@@ -1,6 +1,4 @@
-/*=============================================== BackToTop component ===============================================*/
-
-import { forwardRef, useState, useEffect } from "react"
+import { useState, useEffect, type FC } from "react"
 import classNames from "classnames"
 import { scrollToTop } from "@julseb-lib/utils"
 import { ArrowUp } from "../../icons"
@@ -9,93 +7,98 @@ import type { ILibBackToTop } from "./types"
 import { roundIconSize } from "../../lib-utils"
 
 /**
- * @description Returns a BackToTop component
- * @link https://documentation-components-react.vercel.app/components/back-to-top
- * @extends Partial<ILibButtonIcon>
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLButtonElement>
- * @prop position?: { left?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" | "unset"; top?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" | "unset"; right?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" | "unset"; bottom?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" | "unset"; zIndex?: number }
+ * BackToTop component for displaying a floating button that scrolls the page to the top.
+ *
+ * @component
+ * @param {Object} props - BackToTop props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {ElementType} [props.as] - Custom element type to render as.
+ * @param {Ref<HTMLButtonElement>} [props.ref] - Ref forwarded to the button element.
+ * @param {string} [props.className] - Additional class names.
+ * @param {ReactNode} [props.icon] - Icon to display in the button.
+ * @param {string} [props.tooltip="Back to top"] - Tooltip text.
+ * @param {boolean|Object} [props.showTooltip] - Show tooltip or tooltip options.
+ * @param {Object} [props.position] - Position of the button ({ left, top, right, bottom, zIndex }).
+ * @returns {JSX.Element} The rendered BackToTop component.
+ *
+ * @example
+ * <BackToTop tooltip="Go up" position={{ right: "l", bottom: "l" }} />
  */
-export const BackToTop = forwardRef<HTMLButtonElement, ILibBackToTop>(
-    (
-        {
-            "data-testid": testid,
-            className,
-            icon = (
-                <ArrowUp
-                    size={roundIconSize(48)}
-                    data-testid={testid && `${testid}.Button.Icon`}
-                    className={className && "IconArrowUp"}
-                />
-            ),
-            tooltip = "Back to top",
-            showTooltip,
-            position,
-            ...rest
-        },
-        ref
-    ) => {
-        const [isVisible, setIsVisible] = useState(false)
+export const BackToTop: FC<ILibBackToTop> = ({
+    "data-testid": testid,
+    ref,
+    className,
+    icon = (
+        <ArrowUp
+            size={roundIconSize(48)}
+            data-testid={testid && `${testid}.Button.Icon`}
+            className={className && "IconArrowUp"}
+        />
+    ),
+    tooltip = "Back to top",
+    showTooltip,
+    position,
+    ...rest
+}) => {
+    const [isVisible, setIsVisible] = useState(false)
+
+    useEffect(() => {
+        if (window.scrollY >= 200) {
+            setIsVisible(true)
+        } else {
+            setIsVisible(false)
+        }
 
-        useEffect(() => {
+        window.addEventListener("scroll", () => {
             if (window.scrollY >= 200) {
                 setIsVisible(true)
             } else {
                 setIsVisible(false)
             }
+        })
+    }, [])
 
-            window.addEventListener("scroll", () => {
-                if (window.scrollY >= 200) {
-                    setIsVisible(true)
-                } else {
-                    setIsVisible(false)
-                }
-            })
-        }, [])
-
-        const smoothScroll = () => {
-            document.body.classList.add("smooth")
-            document.documentElement.classList.add("smooth")
+    const smoothScroll = () => {
+        document.body.classList.add("smooth")
+        document.documentElement.classList.add("smooth")
 
-            setTimeout(() => scrollToTop(), 100)
+        setTimeout(() => scrollToTop(), 100)
 
-            setTimeout(() => {
-                document.body.classList.remove("smooth")
-                document.documentElement.classList.remove("smooth")
-            }, 1000)
-        }
+        setTimeout(() => {
+            document.body.classList.remove("smooth")
+            document.documentElement.classList.remove("smooth")
+        }, 1000)
+    }
 
-        const tooltipObj =
-            showTooltip && typeof showTooltip === "object"
-                ? { offset: 42, ...showTooltip }
-                : showTooltip !== false
-                ? { offset: 42 }
-                : false
+    const tooltipObj =
+        showTooltip && typeof showTooltip === "object"
+            ? { offset: 42, ...showTooltip }
+            : showTooltip !== false
+            ? { offset: 42 }
+            : false
 
-        return (
-            <StyledBackToTop
-                data-testid={testid}
-                className={classNames(className, { Visible: isVisible })}
-                ref={ref}
-                icon={icon}
-                onClick={smoothScroll}
-                size={48}
-                iconSize={roundIconSize(48)}
-                tooltip={tooltip}
-                showTooltip={{
-                    ...tooltipObj,
-                    position: "left",
-                    backgroundColor: "white",
-                    textColor: "black",
-                }}
-                $left={position?.left}
-                $top={position?.top}
-                $right={position?.right ?? "xl"}
-                $bottom={position?.bottom ?? "xl"}
-                $zIndex={position?.zIndex ?? 999}
-                {...rest}
-            />
-        )
-    }
-)
+    return (
+        <StyledBackToTop
+            data-testid={testid}
+            className={classNames(className, { Visible: isVisible })}
+            ref={ref}
+            icon={icon}
+            onClick={smoothScroll}
+            size={48}
+            iconSize={roundIconSize(48)}
+            tooltip={tooltip}
+            showTooltip={{
+                ...tooltipObj,
+                position: "left",
+                backgroundColor: "white",
+                textColor: "black",
+            }}
+            $left={position?.left}
+            $top={position?.top}
+            $right={position?.right ?? "xl"}
+            $bottom={position?.bottom ?? "xl"}
+            $zIndex={position?.zIndex ?? 999}
+            {...rest}
+        />
+    )
+}

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== BackToTop styles ===============================================*/
-
 import styled from "styled-components"
 import { setDefaultTheme, ButtonIcon, TRANSITIONS, Mixins } from "../../"
 import type { LibSpacers } from "../../types"

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

@@ -1,5 +1,3 @@
-/*=============================================== BackToTop types ===============================================*/
-
 import type { ILibButtonIcon } from "../ButtonIcon/types"
 import type { LibBackToTopPosition } from "../../types"
 

package/dist/lib/components/Badge/Badge.tsx

@@ -1,6 +1,4 @@
-/*=============================================== Badge component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import classNames from "classnames"
 import { getRandomString } from "@julseb-lib/utils"
 import { roundIconSize, appendStyles } from "../../lib-utils"
@@ -9,86 +7,91 @@ import { StyledBadge } from "./styles"
 import type { ILibBadge } from "./types"
 
 /**
- * @description Returns a Badge component
- * @link https://documentation-components-react.vercel.app/components/badge
- * @extends HTMLSpanElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLSpanElement>
- * @prop size?: number
- * @prop backgroundColor?: Any color from the library
- * @prop contentColor?: Any color from the library
- * @prop borderRadius?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | { topLeft?: LibRadiuses; topRight?: LibRadiuses; bottomLeft?: LibRadiuses; bottomRight?: LibRadiuses }
- * @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" }
- * @prop icon?: string | JSX.Element
- * @prop iconSize?: number => only if icon is defined
- * @prop iconBaseUrl?: string => only if icon is defined
- * @prop number?: number => only if icon is not defined
+ * Badge component for displaying a small count, icon, or status indicator.
+ *
+ * @component
+ * @param {Object} props - Badge props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {ElementType} [props.as] - Custom element type to render as.
+ * @param {Ref<HTMLSpanElement>} [props.ref] - Ref forwarded to the root element.
+ * @param {string} [props.id] - HTML id attribute.
+ * @param {number} [props.size=16] - Size of the badge.
+ * @param {string|JSX.Element} [props.icon] - Icon to display in the badge.
+ * @param {number} [props.iconSize] - Size of the icon (if icon is defined).
+ * @param {string} [props.iconBaseUrl] - Base URL for the icon (if icon is defined).
+ * @param {number} [props.number] - Number to display (if icon is not defined).
+ * @param {string} [props.backgroundColor="primary"] - Background color of the badge.
+ * @param {string} [props.contentColor] - Content color of the badge.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | Object} [props.borderRadius="round"] - Border radius for the badge.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" | Object} [props.padding] - Padding for the badge.
+ * @param {string} [props.className] - Additional class names.
+ * @returns {JSX.Element} The rendered Badge component.
+ *
+ * @example
+ * <Badge number={5} />
+ * <Badge icon="star" backgroundColor="warning" />
+ * <Badge icon={<CustomIcon />} size={24} />
  */
-export const Badge = forwardRef<HTMLSpanElement, ILibBadge>(
-    (
-        {
-            "data-testid": testid,
-            className,
-            id,
-            as,
-            size = 16,
-            icon,
-            iconSize = roundIconSize(size),
-            iconBaseUrl,
-            number,
-            backgroundColor = "primary",
-            contentColor = backgroundColor === "white"
-                ? "primary"
-                : backgroundColor === "black"
-                ? "white"
-                : "background",
-            borderRadius = "round",
-            padding = {
-                leftRight: "xs",
-            },
-            ...rest
-        },
-        ref
-    ) => {
-        const randomClass = getRandomString(10, true)
-        const withClass = className?.split(" ")[0] || randomClass
+export const Badge: FC<ILibBadge> = ({
+    "data-testid": testid,
+    className,
+    ref,
+    id,
+    as,
+    size = 16,
+    icon,
+    iconSize = roundIconSize(size),
+    iconBaseUrl,
+    number,
+    backgroundColor = "primary",
+    contentColor = backgroundColor === "white"
+        ? "primary"
+        : backgroundColor === "black"
+        ? "white"
+        : "background",
+    borderRadius = "round",
+    padding = {
+        leftRight: "xs",
+    },
+    ...rest
+}) => {
+    const randomClass = getRandomString(10, true)
+    const withClass = className?.split(" ")[0] || randomClass
 
-        appendStyles(`
+    appendStyles(`
             ${id ? `#${id}` : `.${withClass}`} {
                 --badge-size: ${size}px;
                 --badge-font-size: ${roundIconSize(size)}px;
             }
         `)
 
-        return (
-            <StyledBadge
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                className={classNames(className, randomClass)}
-                id={id}
-                $backgroundColor={backgroundColor}
-                $contentColor={contentColor}
-                $borderRadius={borderRadius}
-                $padding={padding}
-                $hasChildren={!!(icon || number)}
-                $childrenLength={number?.toString().length}
-                {...rest}
-            >
-                {icon && (
-                    <LibIcon
-                        data-testid={testid && `${testid}.Icon`}
-                        className={className && "Icon"}
-                        icon={icon}
-                        color={contentColor}
-                        size={iconSize}
-                        baseUrl={iconBaseUrl}
-                    />
-                )}
+    return (
+        <StyledBadge
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            className={classNames(className, randomClass)}
+            id={id}
+            $backgroundColor={backgroundColor}
+            $contentColor={contentColor}
+            $borderRadius={borderRadius}
+            $padding={padding}
+            $hasChildren={!!(icon || number)}
+            $childrenLength={number?.toString().length}
+            {...rest}
+        >
+            {icon && (
+                <LibIcon
+                    data-testid={testid && `${testid}.Icon`}
+                    className={className && "Icon"}
+                    icon={icon}
+                    color={contentColor}
+                    size={iconSize}
+                    baseUrl={iconBaseUrl}
+                />
+            )}
 
-                {number}
-            </StyledBadge>
-        )
-    }
-)
+            {number}
+        </StyledBadge>
+    )
+}

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== Badge styles ===============================================*/
-
 import styled, { css } from "styled-components"
 import { FONT_WEIGHTS, Mixins, setDefaultTheme } from "../../"
 import type { LibAllColors, ILibPadding, ILibRadius } from "../../types"

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

@@ -1,5 +1,3 @@
-/*=============================================== Badge types ===============================================*/
-
 import type {
     LibAllColors,
     LibComponentBase,

package/dist/lib/components/Breadcrumbs/BreadcrumbItem.tsx

@@ -1,15 +1,14 @@
-/*=============================================== BreadcrumbItem ===============================================*/
-
+import type { FC } from "react"
 import { Link } from "react-router-dom"
 import { uuid } from "@julseb-lib/utils"
 import type { ILibBreadcrumbItem } from "./subtypes"
 
-export const BreadcrumbItem = ({
+export const BreadcrumbItem: FC<ILibBreadcrumbItem> = ({
     "data-testid": testid,
     className,
     item,
     index,
-}: ILibBreadcrumbItem) => {
+}) => {
     if (item.to)
         return (
             <Link

package/dist/lib/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,52 +1,62 @@
-/*=============================================== Breadcrumbs component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { uuid } from "@julseb-lib/utils"
 import { BreadcrumbsFn } from "./BreadcrumbsFn"
 import { BreadcrumbItem } from "./BreadcrumbItem"
 import type { ILibBreadcrumbs } from "./types"
 
 /**
- * @description Returns a Breadcrumbs component
- * @link https://documentation-components-react.vercel.app/components/breadcrumbs
- * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType$
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop items: Array<LibBreadcrumbItem> => only if children is not defined
- * @prop children?: Array<ReactNode> => only if items is not defined
- * @prop linksColor?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"
- * @prop activeColor?: Any color from the library
- * @prop separatorColor?: Any color from the library
- * @prop gap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
- * @prop separator?: "slash" | "chevron" | JSX.Element
+ * Breadcrumbs component for displaying navigation hierarchy.
+ *
+ * @component
+ * @param {Object} props - Breadcrumbs 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 {Array<LibBreadcrumbItem>} [props.items] - Array of breadcrumb items (used if children is not provided).
+ * @param {ReactNode} [props.children] - Breadcrumb items as children (used if items is not provided).
+ * @param {"primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"} [props.linksColor] - Color for breadcrumb links.
+ * @param {string} [props.activeColor] - Color for the active breadcrumb.
+ * @param {string} [props.separatorColor] - Color for the separator.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.gap] - Gap between breadcrumb items.
+ * @param {"slash" | "chevron" | JSX.Element} [props.separator] - Separator between breadcrumb items.
+ * @returns {JSX.Element} The rendered Breadcrumbs component.
  *
- * @type LibBreadcrumbItem
- * @prop data-testid?: string
- * @prop className?: string
- * @prop id?: string
- * @prop ref?: ForwardedRef<HTMLAnchorElement & HTMLSpanElement>
- * @prop text: string
+ * @example
+ * <Breadcrumbs
+ *   items={[
+ *     { text: "Home", to: "/" },
+ *     { text: "Library", to: "/library" },
+ *     { text: "Data" }
+ *   ]}
+ *   linksColor="primary"
+ *   separator="chevron"
+ * />
  */
-export const Breadcrumbs = forwardRef<HTMLDivElement, ILibBreadcrumbs>(
-    ({ "data-testid": testid, className, children, items, ...rest }, ref) => {
-        return (
-            <BreadcrumbsFn
-                data-testid={testid}
-                ref={ref}
-                className={className}
-                {...rest}
-            >
-                {items?.map((item, i) => (
-                    <BreadcrumbItem
-                        key={uuid()}
-                        data-testid={testid}
-                        className={className}
-                        item={item}
-                        index={i}
-                    />
-                )) ?? children}
-            </BreadcrumbsFn>
-        )
-    }
-)
+export const Breadcrumbs: FC<ILibBreadcrumbs> = ({
+    "data-testid": testid,
+    ref,
+    className,
+    children,
+    items,
+    ...rest
+}) => {
+    return (
+        <BreadcrumbsFn
+            data-testid={testid}
+            ref={ref}
+            className={className}
+            {...rest}
+        >
+            {items?.map((item, i) => (
+                <BreadcrumbItem
+                    key={uuid()}
+                    data-testid={testid}
+                    className={className}
+                    item={item}
+                    index={i}
+                />
+            )) ?? children}
+        </BreadcrumbsFn>
+    )
+}