@julseb-lib/react 0.0.84 → 0.0.86

package/dist/lib/components/ListGroup/ListGroupItem.tsx

@@ -1,6 +1,4 @@
-/*=============================================== ListGroupItem component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { Link } from "react-router-dom"
 import { Text, Badge } from "../../"
 import type { ILibBadge } from "../Badge/types"
@@ -13,152 +11,161 @@ import {
 import type { ILibListGroupItem } from "./types"
 
 /**
- * @description Returns a ListGroupItem component
- * @link https://documentation-components-react.vercel.app/components/list-group
+ * ListGroupItem component for rendering a single item in a ListGroup, supporting text, body, badge, date, click, link, and flexible rendering.
+ *
+ * @component
  * @extends HTMLDivElement & LibButtonLinkBlank
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop text: string
- * @prop body?: string
- * @prop isInArray?: boolean
- * @prop noSeparator?: boolean
- * @prop number?: number
- * @prop badge?: boolean | { icon?: string | JSX.Element => only if `number` is not defined; number?: number => only if `icon` is not defined; backgroundColor?: Any color from the library; contentColor?: Any color from the library } => only if `date` is not defined
- * @prop date?: string | Date => only if badge is not defined
- * @prop onClick?: void => only if to or href are not defined
- * @prop disabled?: boolean => only if onClick is defined
- * @prop to?: string => only if onClick and href are not defined
- * @prop href?: string => only if onClick and to are not defined
- * @prop blank?: boolean => only if to or href are defined
+ * @param {Object} props - ListGroupItem 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.text - Main text content for the item.
+ * @param {string} [props.body] - Secondary body text.
+ * @param {boolean} [props.isInArray] - Whether the item is part of an array (for styling).
+ * @param {boolean} [props.noSeparator] - Hide separator below the item.
+ * @param {number} [props.number] - Number to display (for numbered lists).
+ * @param {boolean|Object} [props.badge] - Badge to display. Object: { icon, iconSize, number, backgroundColor, contentColor }.
+ * @param {string|Date} [props.date] - Date to display (only if badge is not defined).
+ * @param {() => void} [props.onClick] - Click handler (only if to or href are not defined).
+ * @param {boolean} [props.disabled] - Disable the item (only if onClick is defined).
+ * @param {string} [props.to] - React Router link target (only if onClick and href are not defined).
+ * @param {string} [props.href] - Anchor link target (only if onClick and to are not defined).
+ * @param {boolean} [props.blank] - Open link in new tab (only if to or href are defined).
+ * @param {string} [props.className] - Additional class names.
+ * @param {any} [props.rest] - Additional props passed to the root element.
+ * @returns {JSX.Element} The rendered ListGroupItem component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/list-group
+ * @example
+ * <ListGroupItem
+ *   text="Apple"
+ *   badge={{ number: 2, backgroundColor: "primary" }}
+ *   onClick={handleClick}
+ * />
  */
-export const ListGroupItem = forwardRef<HTMLDivElement, ILibListGroupItem>(
-    (
-        {
-            "data-testid": testid,
-            className,
-            as,
-            number,
-            isInArray,
-            noSeparator,
-            text,
-            body,
-            badge,
-            date,
-            onClick,
-            to,
-            href,
-            disabled,
-            blank,
-            ...rest
-        },
-        ref
-    ) => {
-        const badgeProps: ILibBadge = {
-            "data-testid": testid && `${testid}.Content.RightContainer.Badge`,
-            className: className && "Badge",
-            backgroundColor:
-                typeof badge === "object" ? badge?.backgroundColor : undefined,
-            contentColor:
-                typeof badge === "object" ? badge?.contentColor : undefined,
-        }
+export const ListGroupItem: FC<ILibListGroupItem> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    className,
+    number,
+    isInArray,
+    noSeparator,
+    text,
+    body,
+    badge,
+    date,
+    onClick,
+    to,
+    href,
+    disabled,
+    blank,
+    ...rest
+}) => {
+    const badgeProps: ILibBadge = {
+        "data-testid": testid && `${testid}.Content.RightContainer.Badge`,
+        className: className && "Badge",
+        backgroundColor:
+            typeof badge === "object" ? badge?.backgroundColor : undefined,
+        contentColor:
+            typeof badge === "object" ? badge?.contentColor : undefined,
+    }
 
-        const asElement = as
-            ? as
-            : to
-            ? Link
-            : href
-            ? "a"
-            : onClick
-            ? "button"
-            : "div"
+    const asElement = as
+        ? as
+        : to
+        ? Link
+        : href
+        ? "a"
+        : onClick
+        ? "button"
+        : "div"
 
-        return (
-            <StyledListItem
-                data-testid={testid && `${testid}.ListGroupItem`}
-                ref={ref}
-                className={className}
-                as={asElement}
-                onClick={onClick}
-                to={to}
-                href={href}
-                disabled={disabled}
-                target={blank ? "_blank" : undefined}
-                rel={blank ? "noreferrer noopener" : undefined}
-                $isHoverable={!!(to || href || onClick)}
-                $noSeparator={noSeparator}
-                {...rest}
+    return (
+        <StyledListItem
+            data-testid={testid && `${testid}.ListGroupItem`}
+            ref={ref}
+            className={className}
+            as={asElement}
+            onClick={onClick}
+            to={to}
+            href={href}
+            disabled={disabled}
+            target={blank ? "_blank" : undefined}
+            rel={blank ? "noreferrer noopener" : undefined}
+            $isHoverable={!!(to || href || onClick)}
+            $noSeparator={noSeparator}
+            {...rest}
+        >
+            <ListItemContent
+                data-testid={testid && `${testid}.Content`}
+                className={className && "Content"}
             >
-                <ListItemContent
-                    data-testid={testid && `${testid}.Content`}
-                    className={className && "Content"}
-                >
-                    {number && (
-                        <LeftContainer
-                            data-testid={
-                                testid && `${testid}.Content.LeftContainer`
-                            }
-                            className={className && "LeftContainer"}
-                        >
-                            {number}.
-                        </LeftContainer>
-                    )}
-
-                    <Text
-                        data-testid={testid && `${testid}.Content.Text`}
-                        className={className && "Text"}
-                        tag="h6"
-                        as="p"
+                {number && (
+                    <LeftContainer
+                        data-testid={
+                            testid && `${testid}.Content.LeftContainer`
+                        }
+                        className={className && "LeftContainer"}
                     >
-                        {text}
-                    </Text>
-
-                    {(badge || date) && (
-                        <RightContainer
-                            data-testid={
-                                testid && `${testid}.Content.RightContainer`
-                            }
-                            className={className && "RightContainer"}
-                        >
-                            {badge &&
-                                (typeof badge === "object" ? (
-                                    <Badge
-                                        icon={badge.icon}
-                                        iconSize={badge.iconSize}
-                                        number={badge.number}
-                                        {...(badgeProps as any)}
-                                    />
-                                ) : (
-                                    <Badge {...badgeProps} />
-                                ))}
+                        {number}.
+                    </LeftContainer>
+                )}
 
-                            {date && (
-                                <Text
-                                    data-testid={
-                                        testid &&
-                                        `${testid}.Content.RightContainer.Date`
-                                    }
-                                    className={className && "Date"}
-                                    tag="small"
-                                    color="gray"
-                                >
-                                    {date.toString()}
-                                </Text>
-                            )}
-                        </RightContainer>
-                    )}
-                </ListItemContent>
+                <Text
+                    data-testid={testid && `${testid}.Content.Text`}
+                    className={className && "Text"}
+                    tag="h6"
+                    as="p"
+                >
+                    {text}
+                </Text>
 
-                {body && (
-                    <Text
-                        data-testid={testid && `${testid}.Body`}
-                        className={className && "Body"}
-                        tag="small"
+                {(badge || date) && (
+                    <RightContainer
+                        data-testid={
+                            testid && `${testid}.Content.RightContainer`
+                        }
+                        className={className && "RightContainer"}
                     >
-                        {body}
-                    </Text>
+                        {badge &&
+                            (typeof badge === "object" ? (
+                                <Badge
+                                    icon={badge.icon}
+                                    iconSize={badge.iconSize}
+                                    number={badge.number}
+                                    {...(badgeProps as any)}
+                                />
+                            ) : (
+                                <Badge {...badgeProps} />
+                            ))}
+
+                        {date && (
+                            <Text
+                                data-testid={
+                                    testid &&
+                                    `${testid}.Content.RightContainer.Date`
+                                }
+                                className={className && "Date"}
+                                tag="small"
+                                color="gray"
+                            >
+                                {date.toString()}
+                            </Text>
+                        )}
+                    </RightContainer>
                 )}
-            </StyledListItem>
-        )
-    }
-)
+            </ListItemContent>
+
+            {body && (
+                <Text
+                    data-testid={testid && `${testid}.Body`}
+                    className={className && "Body"}
+                    tag="small"
+                >
+                    {body}
+                </Text>
+            )}
+        </StyledListItem>
+    )
+}

package/dist/lib/components/ListGroup/ListGroupTitle.tsx

@@ -1,31 +1,27 @@
-/*=============================================== ListGroupTitle component ===============================================*/
-
-import { forwardRef, useState, useEffect } from "react"
+import { useState, useEffect, type FC } from "react"
 import classNames from "classnames"
 import { StyledListGroupTitle } from "./styles"
 import type { ILibListGroupTitle } from "./types"
 
-export const ListGroupTitle = forwardRef<HTMLDivElement, ILibListGroupTitle>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            children,
-            className,
-            backgroundColor = "primary",
-            contentColor = "background",
-            noSeparator,
-            isFixed,
-            shadowOnScroll,
-            listRef,
-            ...rest
-        },
-        ref
-    ) => {
-        const [isScrolled, setIsScrolled] = useState(false)
+export const ListGroupTitle: FC<ILibListGroupTitle> = ({
+    "data-testid": testid,
+    ref,
+    as,
+    children,
+    className,
+    backgroundColor = "primary",
+    contentColor = "background",
+    noSeparator,
+    isFixed,
+    shadowOnScroll,
+    listRef,
+    ...rest
+}) => {
+    const [isScrolled, setIsScrolled] = useState(false)
 
-        useEffect(() => {
-            listRef?.current?.addEventListener("scroll", () => {
+    useEffect(() => {
+        if (listRef && typeof listRef !== "function" && listRef.current) {
+            const handleScroll = () => {
                 const scroll = listRef.current?.scrollTop
 
                 if (scroll && scroll >= 24) {
@@ -33,24 +29,28 @@ export const ListGroupTitle = forwardRef<HTMLDivElement, ILibListGroupTitle>(
                 } else {
                     setIsScrolled(false)
                 }
-            })
-        }, [])
+            }
+            listRef.current.addEventListener("scroll", handleScroll)
+            return () => {
+                listRef.current?.removeEventListener("scroll", handleScroll)
+            }
+        }
+    }, [])
 
-        return (
-            <StyledListGroupTitle
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                className={classNames(className, { Scrolled: isScrolled })}
-                $backgroundColor={backgroundColor}
-                $contentColor={contentColor}
-                $noSeparator={noSeparator}
-                $isFixed={isFixed}
-                $shadow={shadowOnScroll}
-                {...rest}
-            >
-                {children}
-            </StyledListGroupTitle>
-        )
-    }
-)
+    return (
+        <StyledListGroupTitle
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            className={classNames(className, { Scrolled: isScrolled })}
+            $backgroundColor={backgroundColor}
+            $contentColor={contentColor}
+            $noSeparator={noSeparator}
+            $isFixed={isFixed}
+            $shadow={shadowOnScroll}
+            {...rest}
+        >
+            {children}
+        </StyledListGroupTitle>
+    )
+}

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

@@ -1,5 +1,3 @@
-/*=============================================== ListGroup exports ===============================================*/
-
 export * from "./ListGroup"
 export * from "./ListGroupItem"
 export * from "./ListGroupTitle"

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

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

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

@@ -1,6 +1,4 @@
-/*=============================================== ListGroup types ===============================================*/
-
-import type { ForwardedRef, RefObject } from "react"
+import type { ForwardedRef, Ref } from "react"
 import type {
     LibAllColors,
     LibComponentBase,
@@ -11,8 +9,6 @@ import type {
     LibIcon,
 } from "../../types"
 
-/*====================== ListGroup ======================*/
-
 interface ILibListGroupBase
     extends Omit<LibComponentBase<HTMLDivElement>, "title"> {
     title?:
@@ -44,8 +40,6 @@ interface ListGroupWithChildren extends ILibListGroupBase {
 
 export type ILibListGroup = ListGroupWithItems | ListGroupWithChildren
 
-/*====================== ListGroupTitle ======================*/
-
 interface ILibListGroupTitleBase extends LibComponentBase<HTMLDivElement> {
     backgroundColor?: LibAllColors
     contentColor?: LibAllColors
@@ -55,7 +49,7 @@ interface ILibListGroupTitleBase extends LibComponentBase<HTMLDivElement> {
 
 interface ListGroupItemTitleWithShadow extends ILibListGroupTitleBase {
     shadowOnScroll?: LibShadows
-    listRef: RefObject<HTMLDivElement>
+    listRef: Ref<HTMLDivElement>
 }
 
 interface ListGroupItemTitleWithoutShadow extends ILibListGroupTitleBase {
@@ -67,8 +61,6 @@ export type ILibListGroupTitle =
     | ListGroupItemTitleWithShadow
     | ListGroupItemTitleWithoutShadow
 
-/*====================== ListGroupItem ======================*/
-
 type ListGroupItemBadgeBase = {
     backgroundColor?: LibAllColors
     contentColor?: LibAllColors

package/dist/lib/components/Loader/Loader.tsx

@@ -1,6 +1,4 @@
-/*=============================================== Loader component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { LoaderOne } from "./templates/LoaderOne"
 import { LoaderTwo } from "./templates/LoaderTwo"
 import { LoaderThree } from "./templates/LoaderThree"
@@ -8,28 +6,40 @@ import { LoaderFour } from "./templates/LoaderFour"
 import type { ILibLoader } from "./types"
 
 /**
- * @description Returns a Loader component
- * @link https://documentation-components-react.vercel.app/components/loader
+ * Loader component for displaying a loading spinner with multiple visual variants, size, color, and border width options.
+ *
+ * @component
  * @extends HTMLSpanElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLSpanElement>
- * @prop variant?: 1 | 2 | 3 | 4
- * @prop borderWidth?: number => only if variant is set to 1 | 2 | 3
- * @prop size?: number
- * @prop color?: Any color from the library
+ * @param {Object} props - Loader 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 {1 | 2 | 3 | 4} [props.variant] - Loader visual variant.
+ * @param {number} [props.borderWidth] - Border width (only if variant is 1, 2, or 3).
+ * @param {number} [props.size=48] - Size of the loader.
+ * @param {string} [props.color="primary"] - Any color from the library.
+ * @param {any} [props.rest] - Additional props passed to the loader.
+ * @returns {JSX.Element} The rendered Loader component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/loader
+ * @example
+ * <Loader variant={2} size={32} color="secondary" />
  */
-export const Loader = forwardRef<HTMLSpanElement, ILibLoader>(
-    ({ variant, size = 48, color = "primary", ...rest }, ref) => {
-        if (variant === 2)
+export const Loader: FC<ILibLoader> = ({
+    ref,
+    variant,
+    size = 48,
+    color = "primary",
+    ...rest
+}) => {
+    switch (variant) {
+        case 2:
             return <LoaderTwo ref={ref} size={size} color={color} {...rest} />
-
-        if (variant === 3)
+        case 3:
             return <LoaderThree ref={ref} size={size} color={color} {...rest} />
-
-        if (variant === 4)
+        case 4:
             return <LoaderFour ref={ref} size={size} color={color} {...rest} />
-
-        return <LoaderOne ref={ref} size={size} color={color} {...rest} />
+        default:
+            return <LoaderOne ref={ref} size={size} color={color} {...rest} />
     }
-)
+}

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

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

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

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

package/dist/lib/components/Loader/templates/LoaderFour.tsx

@@ -1,24 +1,27 @@
-/*=============================================== LoaderFour ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { StyledLoaderFour } from "../styles"
 import type { ILibLoader } from "../types"
 
-export const LoaderFour = forwardRef<HTMLSpanElement, ILibLoader>(
-    ({ "data-testid": testid, as, size, color, ...rest }, ref) => {
-        return (
-            <StyledLoaderFour
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                $size={size}
-                $color={color}
-                {...rest}
-            >
-                <span />
-                <span />
-                <span />
-            </StyledLoaderFour>
-        )
-    }
-)
+export const LoaderFour: FC<ILibLoader> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    size,
+    color,
+    ...rest
+}) => {
+    return (
+        <StyledLoaderFour
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            $size={size}
+            $color={color}
+            {...rest}
+        >
+            <span />
+            <span />
+            <span />
+        </StyledLoaderFour>
+    )
+}

package/dist/lib/components/Loader/templates/LoaderOne.tsx

@@ -1,13 +1,10 @@
-/*=============================================== LoaderOne ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { StyledLoaderOne } from "../styles"
 import type { ILibLoader } from "../types"
 
-export const LoaderOne = forwardRef<HTMLSpanElement, ILibLoader>(
+export const LoaderOne: FC<ILibLoader> = (
     (
-        { "data-testid": testid, as, size, color, borderWidth = 8, ...rest },
-        ref
+        { "data-testid": testid, ref, as, size, color, borderWidth = 8, ...rest },
     ) => {
         return (
             <StyledLoaderOne