@julseb-lib/react 0.0.85 → 0.0.87

package/dist/lib/components/Tooltip/Tooltip.tsx

@@ -1,6 +1,4 @@
-/*=============================================== Tooltip component ===============================================*/
-
-import { forwardRef, useState, useRef, useCallback } from "react"
+import { useState, useRef, useCallback, type FC } from "react"
 import classNames from "classnames"
 import { useTouchScreen, useClickOutside } from "../../"
 import type { LibTooltipTrigger } from "../../types"
@@ -8,113 +6,124 @@ import { TooltipWrapper, StyledTooltip } from "./styles"
 import type { ILibTooltip } from "./types"
 
 /**
- * @description Returns a Tooltip component
- * @link https://documentation-components-react.vercel.app/components/tooltip
+ * Tooltip component for displaying contextual information on hover or click, with customizable position, colors, arrow, and trigger.
+ *
+ * @component
  * @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
+ * @param {Object} props - Tooltip 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 {ReactNode} props.tooltip - Tooltip content (string or JSX element).
+ * @param {"top" | "bottom" | "left" | "right"} [props.position="top"] - Tooltip position relative to the trigger.
+ * @param {boolean} [props.hideArrow] - If true, hides the tooltip arrow.
+ * @param {"hover" | "click"} [props.trigger] - Trigger event for showing the tooltip.
+ * @param {string} [props.backgroundColor="black-80"] - Tooltip background color.
+ * @param {string} [props.textColor="white"] - Tooltip text color.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.offset="xs"] - Offset between the tooltip and the trigger.
+ * @param {CSSProperties} [props.tooltipStyles] - Custom styles for the tooltip.
+ * @param {MouseEventHandler} [props.onClick] - Custom click handler for the trigger.
+ * @param {MouseEventHandler} [props.onMouseEnter] - Custom mouse enter handler for the trigger.
+ * @param {MouseEventHandler} [props.onMouseLeave] - Custom mouse leave handler for the trigger.
+ * @param {ReactNode} [props.children] - Element that triggers the tooltip.
+ * @param {any} [props.rest] - Additional props passed to the root element.
+ * @returns {JSX.Element} The rendered Tooltip component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/tooltip
+ * @example
+ * <Tooltip tooltip="More info" position="bottom">
+ *   <button>Hover me</button>
+ * </Tooltip>
  */
-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"
+export const Tooltip: FC<ILibTooltip> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    className,
+    children,
+    tooltip,
+    position = "top",
+    hideArrow,
+    trigger,
+    backgroundColor = "black-80",
+    textColor = "white",
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    offset = "xs",
+    tooltipStyles,
+    ...rest
+}) => {
+    const isTouchScreen = useTouchScreen()
+    const defaultTrigger: LibTooltipTrigger =
+        trigger === "click" || isTouchScreen ? "click" : "hover"
 
-        const [isVisible, setIsVisible] = useState(false)
+    const [isVisible, setIsVisible] = useState(false)
 
-        const el = useRef<HTMLDivElement>(null)
-        useClickOutside(el, () => {
-            if (isVisible && defaultTrigger === "click") setIsVisible(false)
-        })
+    const el = useRef<HTMLDivElement>(null)
+    useClickOutside(el, () => {
+        if (isVisible && defaultTrigger === "click") setIsVisible(false)
+    })
 
-        const handleClick = useCallback(() => {
-            setIsVisible(!isVisible)
-        }, [isVisible])
+    const handleClick = useCallback(() => {
+        setIsVisible(!isVisible)
+    }, [isVisible])
 
-        const handleHover = useCallback(() => {
-            setIsVisible(true)
-        }, [])
-        const handleLeave = useCallback(() => {
-            setIsVisible(false)
-        }, [])
+    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}
+    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}
             >
-                <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>
+                {tooltip}
+            </StyledTooltip>
 
-                {children}
-            </TooltipWrapper>
-        )
-    }
-)
+            {children}
+        </TooltipWrapper>
+    )
+}

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== Tooltip styles ===============================================*/
-
 import styled, { css } from "styled-components"
 import {
     FONT_SIZES,

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

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

package/dist/lib/components/Truncate/Truncate.tsx

@@ -1,113 +1,128 @@
-/*=============================================== Truncate component ===============================================*/
-
-import { forwardRef, useLayoutEffect, useState, useRef } from "react"
+import { useLayoutEffect, useState, useRef, type FC } from "react"
 import { useMergeRefs } from "../../"
 import { StyledTruncate, StyledTag } from "./styles"
 import type { ILibTruncate } from "./types"
 
 /**
- * @description Returns a Truncate component
- * @link https://documentation-components-react.vercel.app/components/truncate
+ * Truncate component for displaying a list of items in a single line, truncating overflow items and showing a "+ N" tag for hidden items.
+ *
+ * @component
  * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop gap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
+ * @param {Object} props - Truncate 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 {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.gap="xs"] - Gap between items.
+ * @param {ReactNode} [props.children] - Items to display in the truncate container.
+ * @param {any} [props.rest] - Additional props passed to the root element.
+ * @returns {JSX.Element} The rendered Truncate component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/truncate
+ * @example
+ * <Truncate>
+ *   <Tag>Item 1</Tag>
+ *   <Tag>Item 2</Tag>
+ *   <Tag>Item 3</Tag>
+ *   <Tag>Item 4</Tag>
+ * </Truncate>
  */
-export const Truncate = forwardRef<HTMLDivElement, ILibTruncate>(
-    (
-        { "data-testid": testid, as, className, children, gap = "xs", ...rest },
-        ref
-    ) => {
-        const containerRef = useRef<HTMLDivElement>(null)
-        const [invisibleNumber, setInvisibleNumber] = useState<number>(0)
-
-        useLayoutEffect(() => {
-            const truncate = () => {
-                if (!containerRef.current) return
-
-                const childNodes = Array.from(
-                    containerRef.current.children
-                ) as Array<HTMLElement>
-
-                for (const node of childNodes) {
-                    node.hidden = true
-                }
-
-                if (childNodes.length === 0) return
+export const Truncate: FC<ILibTruncate> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    className,
+    children,
+    gap = "xs",
+    ...rest
+}) => {
+    const containerRef = useRef<HTMLDivElement>(null)
+    const [invisibleNumber, setInvisibleNumber] = useState<number>(0)
+
+    useLayoutEffect(() => {
+        const truncate = () => {
+            if (!containerRef.current) return
+
+            const childNodes = Array.from(
+                containerRef.current.children
+            ) as Array<HTMLElement>
+
+            for (const node of childNodes) {
+                node.hidden = true
+            }
 
-                for (let i = 0; i < childNodes.length; i += 1) {
-                    const itemEl = childNodes[i]
-                    itemEl.hidden = false
+            if (childNodes.length === 0) return
 
-                    const itemRect = itemEl.getBoundingClientRect()
-                    const containerRect =
-                        containerRef.current.getBoundingClientRect()
+            for (let i = 0; i < childNodes.length; i += 1) {
+                const itemEl = childNodes[i]
+                itemEl.hidden = false
 
-                    if (
-                        itemRect.bottom > containerRect.bottom ||
-                        itemRect.right > containerRect.right
-                    ) {
-                        itemEl.hidden = true
+                const itemRect = itemEl.getBoundingClientRect()
+                const containerRect =
+                    containerRef.current.getBoundingClientRect()
 
-                        if (i > 0) {
-                            childNodes[i - 1].hidden = true
-                        }
+                if (
+                    itemRect.bottom > containerRect.bottom ||
+                    itemRect.right > containerRect.right
+                ) {
+                    itemEl.hidden = true
 
-                        if (i) break
+                    if (i > 0) {
+                        childNodes[i - 1].hidden = true
                     }
+
+                    if (i) break
                 }
+            }
 
-                const getInvisibleNumber =
-                    containerRef.current.querySelectorAll("[hidden]").length - 1
+            const getInvisibleNumber =
+                containerRef.current.querySelectorAll("[hidden]").length - 1
 
-                setInvisibleNumber(getInvisibleNumber)
-            }
+            setInvisibleNumber(getInvisibleNumber)
+        }
 
-            truncate()
+        truncate()
 
-            const resizeObserver = new ResizeObserver((entries: any) => {
-                window.requestAnimationFrame(() => {
-                    // eslint-disable-next-line
-                    for (const _ of entries) {
-                        truncate()
-                    }
-                })
+        const resizeObserver = new ResizeObserver((entries: any) => {
+            window.requestAnimationFrame(() => {
+                // eslint-disable-next-line
+                for (const _ of entries) {
+                    truncate()
+                }
             })
+        })
 
-            const containerEl = containerRef.current
+        const containerEl = containerRef.current
 
-            if (containerEl) {
-                resizeObserver.observe(containerEl)
-            }
+        if (containerEl) {
+            resizeObserver.observe(containerEl)
+        }
 
-            return () => {
-                if (containerEl) {
-                    resizeObserver.unobserve(containerEl)
-                }
+        return () => {
+            if (containerEl) {
+                resizeObserver.unobserve(containerEl)
             }
-        }, [children])
-
-        return (
-            <StyledTruncate
-                data-testid={testid}
-                ref={useMergeRefs([ref, containerRef])}
-                as={as}
-                className={className}
-                $gap={gap}
-                {...rest}
-            >
-                {children}
-
-                {invisibleNumber > 0 && (
-                    <StyledTag
-                        data-testid={testid && `${testid}.Plus`}
-                        className={className && "Plus"}
-                    >
-                        {`+ ${invisibleNumber}`}
-                    </StyledTag>
-                )}
-            </StyledTruncate>
-        )
-    }
-)
+        }
+    }, [children])
+
+    return (
+        <StyledTruncate
+            data-testid={testid}
+            ref={useMergeRefs([ref, containerRef])}
+            as={as}
+            className={className}
+            $gap={gap}
+            {...rest}
+        >
+            {children}
+
+            {invisibleNumber > 0 && (
+                <StyledTag
+                    data-testid={testid && `${testid}.Plus`}
+                    className={className && "Plus"}
+                >
+                    {`+ ${invisibleNumber}`}
+                </StyledTag>
+            )}
+        </StyledTruncate>
+    )
+}

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== Truncate styles ===============================================*/
-
 import type { FC } from "react"
 import styled from "styled-components"
 import { FONT_WEIGHTS, Mixins, setDefaultTheme, Tag } from "../../"
@@ -7,6 +5,7 @@ import type { LibSpacers } from "../../types"
 
 const StyledTruncate = styled.div<{ $gap?: LibSpacers }>`
     overflow: hidden;
+    ${Mixins.HideScrollbar};
     ${({ $gap }) =>
         Mixins.Flexbox({
             $flexDirection: "row",

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

@@ -1,5 +1,3 @@
-/*=============================================== Truncate types ===============================================*/
-
 import type { LibComponentBase, LibSpacers } from "../../types"
 
 export interface ILibTruncate extends LibComponentBase<HTMLDivElement> {

package/dist/lib/components/Video/Video.tsx

@@ -1,66 +1,74 @@
-/*=============================================== Video component ===============================================*/
-
-import { forwardRef, Suspense, lazy } from "react"
+import { Suspense, lazy, type FC } from "react"
 import { Fallback } from "../../"
 import type { ILibVideo } from "./types"
 
 const StyledVideo = lazy(() => import("./styles"))
 
 /**
- * @description Returns an HTML Video component
- * @link https://documentation-components-react.vercel.app/components/video
+ * Video component for rendering an HTML video element with customizable source, aspect ratio, fit, and fallback.
+ *
+ * @component
  * @extends HTMLVideoElement
- * @prop data-testid?: string
- * @prop ref?: ForwardedRef<HTMLVideoElement>
- * @prop fit?: CssObjectFit
- * @prop aspectRatio?: string
- * @prop emptyText?: string
- * @prop type?: "video/x-flv" | "video/mp4" | "application/x-mpegURL" | "video/MP2T" | "video/3gpp" | "video/quicktime" | "video/x-msvideo" | "video/x-ms-wmv"
+ * @param {Object} props - Video props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {ForwardedRef<HTMLVideoElement>} [props.ref] - Ref forwarded to the video element.
+ * @param {string} props.src - Source URL of the video.
+ * @param {"video/x-flv" | "video/mp4" | "application/x-mpegURL" | "video/MP2T" | "video/3gpp" | "video/quicktime" | "video/x-msvideo" | "video/x-ms-wmv"} [props.type="video/mp4"] - Video MIME type.
+ * @param {string|number} [props.width="100%"] - Width of the video.
+ * @param {string|number} [props.height="auto"] - Height of the video.
+ * @param {CssObjectFit} [props.fit] - Object-fit style for the video.
+ * @param {string} [props.aspectRatio] - Aspect ratio for the video.
+ * @param {string} [props.emptyText="Your browser doesn't support the video tag."] - Fallback text if the video is not supported.
+ * @param {boolean} [props.autoPlay] - Whether the video should play automatically.
+ * @param {boolean} [props.muted] - Whether the video should be muted.
+ * @param {boolean} [props.controls] - Whether to show video controls.
+ * @param {any} [props.rest] - Additional props passed to the video element.
+ * @returns {JSX.Element} The rendered Video component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/video
+ * @example
+ * <Video src="/video.mp4" aspectRatio="16/9" controls />
  */
-export const Video = forwardRef<HTMLVideoElement, ILibVideo>(
-    (
-        {
-            "data-testid": testid,
-            src,
-            type = "video/mp4",
-            width = "100%",
-            height = "auto",
-            fit,
-            aspectRatio,
-            emptyText = "Your browser doesn't support the video tag.",
-            autoPlay,
-            muted,
-            controls,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <Suspense
-                fallback={
-                    <Fallback
-                        $width={width}
-                        $height={height}
-                        $aspectRatio={aspectRatio}
-                    />
-                }
-            >
-                <StyledVideo
-                    data-testid={testid}
-                    ref={ref}
-                    autoPlay={autoPlay}
-                    muted={muted || autoPlay}
-                    controls={controls || !autoPlay}
+export const Video: FC<ILibVideo> = ({
+    "data-testid": testid,
+    ref,
+    src,
+    type = "video/mp4",
+    width = "100%",
+    height = "auto",
+    fit,
+    aspectRatio,
+    emptyText = "Your browser doesn't support the video tag.",
+    autoPlay,
+    muted,
+    controls,
+    ...rest
+}) => {
+    return (
+        <Suspense
+            fallback={
+                <Fallback
                     $width={width}
                     $height={height}
                     $aspectRatio={aspectRatio}
-                    $fit={fit}
-                    {...rest}
-                >
-                    <source src={src} type={type} />
-                    {emptyText}
-                </StyledVideo>
-            </Suspense>
-        )
-    }
-)
+                />
+            }
+        >
+            <StyledVideo
+                data-testid={testid}
+                ref={ref}
+                autoPlay={autoPlay}
+                muted={muted || autoPlay}
+                controls={controls || !autoPlay}
+                $width={width}
+                $height={height}
+                $aspectRatio={aspectRatio}
+                $fit={fit}
+                {...rest}
+            >
+                <source src={src} type={type} />
+                {emptyText}
+            </StyledVideo>
+        </Suspense>
+    )
+}

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

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

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== Video types ===============================================*/
-
 import type { VideoHTMLAttributes, SourceHTMLAttributes } from "react"
 import type { LibComponentBase, CssObjectFit } from "../../types"