@julseb-lib/react 0.0.84 → 0.0.86

package/dist/lib/components/Avatar/Avatar.tsx

@@ -1,6 +1,4 @@
-/*=============================================== Avatar component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import classNames from "classnames"
 import { capitalize } from "@julseb-lib/utils"
 import { roundIconSize } from "../../lib-utils"
@@ -9,135 +7,139 @@ import { StyledAvatarContainer, StyledBadge } from "./styles"
 import type { ILibAvatar } from "./types"
 
 /**
- * @description Returns a Avatar component
- * @link https://documentation-components-react.vercel.app/components/avatar
- * @extends HTMLSpanElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLSpanElement>
- * @prop size?: number
- * @prop border?: { style?: CssBorderStyle; width?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"; color?: 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 img: string | { src: string; alt: string } => only if letter and icon are not defined
- * @prop letter?: string => only if img and icon are not defined
- * @prop icon?: string | JSX.Element => only if img and letter are not defined
- * @prop iconSize?: number => only if icon is defined
- * @prop iconBaseUrl?: number => only if icon is defined
- * @prop backgroundColor?: Any color from the library => only if icon or letter are defined
- * @prop contentColor?: Any color from the library => only if icon or letter are defined
- * @prop badge?: boolean | number | { content?: number; contentColor?: Any color from the library; backgroundColor?: Any color from the library; position?: LibAvatarBadgePosition; size?: number; 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" }; outline?: { style?: CssBorderStyle; width?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"; color?: Any color from the library } }
- * @prop containerStyle?: CSSProperties
+ * Avatar component for displaying user profile images, initials, or icons, with optional badge.
+ *
+ * @component
+ * @param {Object} props - Avatar 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 {number} [props.size=32] - Size of the avatar.
+ * @param {Object} [props.border] - Border style, width, and color.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | Object} [props.borderRadius="circle"] - Border radius for the avatar.
+ * @param {string|Object} [props.img] - Image source or object with src and alt.
+ * @param {string} [props.letter] - Letter to display (if img and icon are not defined).
+ * @param {string|JSX.Element} [props.icon] - Icon to display (if img and letter are not defined).
+ * @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 {string} [props.backgroundColor="primary"] - Background color (if icon or letter are defined).
+ * @param {string} [props.contentColor] - Content color (if icon or letter are defined).
+ * @param {boolean|number|Object} [props.badge] - Badge content, color, position, and style.
+ * @param {CSSProperties} [props.containerStyle] - Style for the outer container.
+ * @param {string} [props.className] - Additional class names.
+ * @returns {JSX.Element} The rendered Avatar component.
+ *
+ * @example
+ * <Avatar img="avatar.jpg" size={40} badge={3} />
+ * <Avatar letter="A" backgroundColor="secondary" />
+ * <Avatar icon={<UserIcon />} badge={{ content: 1, backgroundColor: "danger" }} />
  */
-export const Avatar = forwardRef<HTMLSpanElement, ILibAvatar>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            size = 32,
-            border,
-            borderRadius = "circle",
-            badge,
-            img,
-            letter,
-            icon,
-            iconSize = roundIconSize(size),
-            backgroundColor = "primary",
-            contentColor = backgroundColor === "white"
-                ? "primary"
-                : backgroundColor === "black"
-                ? "white"
-                : "background",
-            className,
-            containerStyle,
-            ...rest
-        },
-        ref
-    ) => {
-        const isBadgeObject = typeof badge === "object"
-        const badgeSize = isBadgeObject && badge.size ? badge.size : 8
+export const Avatar: FC<ILibAvatar> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    size = 32,
+    border,
+    borderRadius = "circle",
+    badge,
+    img,
+    letter,
+    icon,
+    iconSize = roundIconSize(size),
+    backgroundColor = "primary",
+    contentColor = backgroundColor === "white"
+        ? "primary"
+        : backgroundColor === "black"
+        ? "white"
+        : "background",
+    className,
+    containerStyle,
+    ...rest
+}) => {
+    const isBadgeObject = typeof badge === "object"
+    const badgeSize = isBadgeObject && badge.size ? badge.size : 8
 
-        const avatarProps = {
-            "data-testid": testid,
-            as,
-            className,
-            hasBadge: !!badge,
-            backgroundColor,
-            border,
-            borderRadius,
-            size,
-            contentColor,
-            img,
-            letter,
-            icon,
-            iconSize,
-            ref,
-            ...rest,
-        }
+    const avatarProps = {
+        "data-testid": testid,
+        as,
+        className,
+        hasBadge: !!badge,
+        backgroundColor,
+        border,
+        borderRadius,
+        size,
+        contentColor,
+        img,
+        letter,
+        icon,
+        iconSize,
+        ref,
+        ...rest,
+    }
 
-        if (badge)
-            return (
-                <StyledAvatarContainer
-                    data-testid={testid}
-                    ref={ref}
-                    as={as}
-                    className={className}
-                    style={containerStyle}
-                    $backgroundColor={backgroundColor}
-                    $border={border}
-                    $borderRadius={borderRadius}
-                    $size={size}
-                    $contentColor={contentColor}
-                >
-                    <AvatarFunction {...avatarProps} />
+    if (badge)
+        return (
+            <StyledAvatarContainer
+                data-testid={testid}
+                ref={ref}
+                as={as}
+                className={className}
+                style={containerStyle}
+                $backgroundColor={backgroundColor}
+                $border={border}
+                $borderRadius={borderRadius}
+                $size={size}
+                $contentColor={contentColor}
+            >
+                <AvatarFunction {...avatarProps} />
 
-                    <StyledBadge
-                        data-testid={testid && `${testid}.Badge`}
-                        className={classNames(
-                            { Badge: className },
-                            `Position${capitalize(
-                                isBadgeObject && badge.position
-                                    ? badge.position
-                                    : "top"
-                            )}`
-                        )}
-                        size={badgeSize}
-                        number={
-                            isBadgeObject && badge.content
-                                ? badge.content
-                                : undefined
-                        }
-                        backgroundColor={
-                            isBadgeObject && badge.backgroundColor
-                                ? badge.backgroundColor
-                                : undefined
-                        }
-                        contentColor={
-                            isBadgeObject && badge.contentColor
-                                ? badge.contentColor
-                                : undefined
-                        }
-                        padding={
-                            isBadgeObject && badge.padding
-                                ? badge.padding
-                                : undefined
-                        }
-                        $width={badgeSize}
-                        $paddingLeftRight={
-                            isBadgeObject &&
-                            typeof badge.padding === "object" &&
-                            badge.padding?.leftRight
-                                ? badge.padding?.leftRight
-                                : "0px"
-                        }
-                        $outline={
-                            isBadgeObject && badge.outline
-                                ? badge.outline
-                                : undefined
-                        }
-                    />
-                </StyledAvatarContainer>
-            )
+                <StyledBadge
+                    data-testid={testid && `${testid}.Badge`}
+                    className={classNames(
+                        { Badge: className },
+                        `Position${capitalize(
+                            isBadgeObject && badge.position
+                                ? badge.position
+                                : "top"
+                        )}`
+                    )}
+                    size={badgeSize}
+                    number={
+                        isBadgeObject && badge.content
+                            ? badge.content
+                            : undefined
+                    }
+                    backgroundColor={
+                        isBadgeObject && badge.backgroundColor
+                            ? badge.backgroundColor
+                            : undefined
+                    }
+                    contentColor={
+                        isBadgeObject && badge.contentColor
+                            ? badge.contentColor
+                            : undefined
+                    }
+                    padding={
+                        isBadgeObject && badge.padding
+                            ? badge.padding
+                            : undefined
+                    }
+                    $width={badgeSize}
+                    $paddingLeftRight={
+                        isBadgeObject &&
+                        typeof badge.padding === "object" &&
+                        badge.padding?.leftRight
+                            ? badge.padding?.leftRight
+                            : "0px"
+                    }
+                    $outline={
+                        isBadgeObject && badge.outline
+                            ? badge.outline
+                            : undefined
+                    }
+                />
+            </StyledAvatarContainer>
+        )
 
-        return <AvatarFunction {...avatarProps} />
-    }
-)
+    return <AvatarFunction {...avatarProps} />
+}

package/dist/lib/components/Avatar/AvatarFunction.tsx

@@ -1,6 +1,4 @@
-/*=============================================== AvatarFunction ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import classNames from "classnames"
 import { getRandomString } from "@julseb-lib/utils"
 import { Image } from "../../"
@@ -10,127 +8,122 @@ import type { LibComponentBase } from "../../types"
 import { StyledAvatar, StyledFallback } from "./styles"
 import type { ILibAvatar } from "./types"
 
-export const AvatarFunction = forwardRef<
-    HTMLSpanElement,
-    Pick<
-        ILibAvatar,
-        | "data-testid"
-        | "as"
-        | "className"
-        | "id"
-        | "backgroundColor"
-        | "border"
-        | "borderRadius"
-        | "size"
-        | "contentColor"
-        | "img"
-        | "letter"
-        | "icon"
-        | "iconSize"
-        | "iconBaseUrl"
-        | "fontSize"
-    > &
-        LibComponentBase<HTMLSpanElement> & {
-            hasBadge?: boolean
-        }
->(
-    (
-        {
-            "data-testid": testid,
-            as,
-            className,
-            id,
-            hasBadge,
-            backgroundColor,
-            border,
-            borderRadius,
-            size,
-            contentColor,
-            img,
-            letter,
-            icon,
-            iconSize,
-            iconBaseUrl,
-            fontSize = "body",
-            ...rest
-        },
-        ref
-    ) => {
-        const randomClass = getRandomString(10, true)
-        const withClass = className?.split(" ")[0] || randomClass
+type IAvatarFunction = Pick<
+    ILibAvatar,
+    | "data-testid"
+    | "as"
+    | "className"
+    | "id"
+    | "backgroundColor"
+    | "border"
+    | "borderRadius"
+    | "size"
+    | "contentColor"
+    | "img"
+    | "letter"
+    | "icon"
+    | "iconSize"
+    | "iconBaseUrl"
+    | "fontSize"
+> &
+    LibComponentBase<HTMLSpanElement> & {
+        hasBadge?: boolean
+    }
+
+export const AvatarFunction: FC<IAvatarFunction> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    className,
+    id,
+    hasBadge,
+    backgroundColor,
+    border,
+    borderRadius,
+    size,
+    contentColor,
+    img,
+    letter,
+    icon,
+    iconSize,
+    iconBaseUrl,
+    fontSize = "body",
+    ...rest
+}) => {
+    const randomClass = getRandomString(10, true)
+    const withClass = className?.split(" ")[0] || randomClass
 
-        appendStyles(`
+    appendStyles(`
             ${id ? `#${id}` : `.${withClass}`} {
             --avatar-size: ${size}px;
             }
         `)
 
-        return (
-            <StyledAvatar
-                data-testid={hasBadge && testid ? `${testid}.Avatar` : testid}
-                ref={!hasBadge ? ref : undefined}
-                as={!hasBadge ? as : "span"}
-                id={id}
-                className={classNames(
-                    hasBadge && className ? `Avatar` : className,
-                    randomClass
-                )}
-                $backgroundColor={backgroundColor}
-                $border={border}
-                $borderRadius={borderRadius}
-                $size={size}
-                $contentColor={contentColor}
-                $fontSize={fontSize}
-                {...rest}
-            >
-                {img && (
-                    <Image
-                        data-testid={testid && `${testid}.Image`}
-                        className={className && "Image"}
-                        src={typeof img === "object" ? img.src : img}
-                        alt={typeof img === "object" ? img.alt : "Avatar"}
-                        width="100%"
-                        height="100%"
-                        fit="cover"
-                        imgFallback={
-                            typeof img === "object"
-                                ? { text: img.fallback || "", fontSize }
-                                : undefined
-                        }
-                        fallback={
-                            typeof img === "object" ? (
-                                // @ts-ignore
-                                <StyledFallback
-                                    $backgroundColor={
-                                        img.fallbackBackgroundColor ??
-                                        backgroundColor
-                                    }
-                                    $fontColor={
-                                        img.fallbackFontColor ?? contentColor
-                                    }
-                                    $size={size}
-                                    $fontSize={img.fallbackFontSize ?? fontSize}
-                                >
-                                    {img.fallback}
-                                </StyledFallback>
-                            ) : undefined
-                        }
-                    />
-                )}
+    return (
+        <StyledAvatar
+            data-testid={hasBadge && testid ? `${testid}.Avatar` : testid}
+            ref={!hasBadge ? ref : undefined}
+            as={!hasBadge ? as : "span"}
+            id={id}
+            className={classNames(
+                hasBadge && className ? `Avatar` : className,
+                randomClass
+            )}
+            $backgroundColor={backgroundColor}
+            $border={border}
+            $borderRadius={borderRadius}
+            $size={size}
+            $contentColor={contentColor}
+            $fontSize={fontSize}
+            {...rest}
+        >
+            {img && (
+                <Image
+                    data-testid={testid && `${testid}.Image`}
+                    className={className && "Image"}
+                    src={typeof img === "object" ? img.src : img}
+                    alt={typeof img === "object" ? img.alt : "Avatar"}
+                    width="100%"
+                    height="100%"
+                    fit="cover"
+                    imgFallback={
+                        typeof img === "object"
+                            ? { text: img.fallback || "", fontSize }
+                            : undefined
+                    }
+                    fallback={
+                        typeof img === "object" ? (
+                            // @ts-ignore
+                            <StyledFallback
+                                $backgroundColor={
+                                    img.fallbackBackgroundColor ??
+                                    backgroundColor
+                                }
+                                $fontColor={
+                                    img.fallbackFontColor ?? contentColor
+                                }
+                                $size={size}
+                                $fontSize={img.fallbackFontSize ?? fontSize}
+                            >
+                                {img.fallback}
+                            </StyledFallback>
+                        ) : undefined
+                    }
+                />
+            )}
 
-                {letter && letter}
+            {letter && letter}
 
-                {icon && (
-                    <LibIcon
-                        data-testid={testid && `${testid}.Icon`}
-                        className={className && "Icon"}
-                        icon={icon}
-                        size={iconSize}
-                        color={contentColor}
-                        baseUrl={iconBaseUrl}
-                    />
-                )}
-            </StyledAvatar>
-        )
-    }
-)
+            {icon && (
+                <LibIcon
+                    data-testid={testid && `${testid}.Icon`}
+                    className={className && "Icon"}
+                    icon={icon}
+                    size={iconSize}
+                    color={contentColor}
+                    baseUrl={iconBaseUrl}
+                />
+            )}
+        </StyledAvatar>
+    )
+}

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== Avatar styles ===============================================*/
-
 import type { FC } from "react"
 import styled, { css } from "styled-components"
 import {

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

@@ -1,5 +1,3 @@
-/*=============================================== Avatar types ===============================================*/
-
 import type { CSSProperties } from "react"
 import type {
     LibComponentBase,