@julseb-lib/react 0.0.85 → 0.0.86

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

@@ -1,5 +1,3 @@
-/*=============================================== Header types ===============================================*/
-
 import type {
     LibComponentBase,
     LibHeaderPosition,

package/dist/lib/components/Highlight/Highlight.tsx

@@ -1,45 +1,47 @@
-/*=============================================== Highlight component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { Text } from "../../"
 import { getHighlightedText } from "../../lib-utils"
 import type { ILibHighlight } from "./types"
 
 /**
- * @description Highlight selected text
- * @link https://documentation-components-react.vercel.app/components/highlight
+ * Highlight component for emphasizing selected text within its children.
+ *
+ * @component
  * @extends ILibText
- * @prop ref?: ForwardedRef<HTMLHeadingElement & HTMLParagraphElement & HTMLQuoteElement & HTMLUListElement & HTMLOListElement & HTMLDListElement>
- * @prop highlightedText: string
- * @prop highlightStyle?: CSSProperties
- * @prop color?: Any color from the library
- * @prop linkColor?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"
- * @prop textAlign?: CssTextAlign
- * @prop tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "strong" | "em" | "small" | "blockquote" | "ul" | "ol" | "dl"
- * @prop display?: boolean => only if tag is set to h1 to h5
+ * @param {Object} props - Highlight props.
+ * @param {ForwardedRef<HTMLHeadingElement & HTMLParagraphElement & HTMLQuoteElement & HTMLUListElement & HTMLOListElement & HTMLDListElement>} [props.ref] - Ref forwarded to the root element.
+ * @param {string} props.highlightedText - Text to highlight within the children.
+ * @param {CSSProperties} [props.highlightStyle] - Custom style for the highlighted text.
+ * @param {string} [props.color] - Any color from the library.
+ * @param {"primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"} [props.linkColor] - Link color for highlighted text.
+ * @param {CssTextAlign} [props.textAlign] - Text alignment.
+ * @param {"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "strong" | "em" | "small" | "blockquote" | "ul" | "ol" | "dl"} [props.tag] - HTML tag to render as.
+ * @param {boolean} [props.display] - Display property (only if tag is set to h1 to h5).
+ * @param {string} [props.className] - Additional class names.
+ * @param {ReactNode} [props.children] - Text content to search and highlight.
+ * @returns {JSX.Element} The rendered Highlight component.
+ *
+ * @example
+ * <Highlight highlightedText="React" highlightStyle={{ background: "yellow" }}>
+ *   React makes it painless to create interactive UIs.
+ * </Highlight>
  */
-export const Highlight = forwardRef<
-    HTMLHeadingElement &
-        HTMLParagraphElement &
-        HTMLQuoteElement &
-        HTMLUListElement &
-        HTMLOListElement &
-        HTMLDListElement,
-    ILibHighlight
->(
-    (
-        { children = "", highlightedText, className, highlightStyle, ...rest },
-        ref
-    ) => {
-        return (
-            <Text ref={ref} className={className} {...rest}>
-                {getHighlightedText(
-                    children,
-                    highlightedText,
-                    className,
-                    highlightStyle
-                )}
-            </Text>
-        )
-    }
-)
+export const Highlight: FC<ILibHighlight> = ({
+    ref,
+    children = "",
+    highlightedText,
+    className,
+    highlightStyle,
+    ...rest
+}) => {
+    return (
+        <Text ref={ref} className={className} {...rest}>
+            {getHighlightedText(
+                children,
+                highlightedText,
+                className,
+                highlightStyle
+            )}
+        </Text>
+    )
+}

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== Highlight types ===============================================*/
-
 import type { CSSProperties } from "react"
 import type { ReactChildren } from "../../types"
 import type { ILibText } from "../Text/types"

package/dist/lib/components/Hr/Hr.tsx

@@ -1,50 +1,52 @@
-/*=============================================== Hr component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import classNames from "classnames"
 import { StyledHr } from "./styles"
 import type { ILibHr } from "./types"
 
 /**
- * @description Returns a Hr component
- * @link https://documentation-components-react.vercel.app/components/hr
+ * Hr component for rendering a horizontal rule with customizable color, width, margin, and rounded corners.
+ *
+ * @component
  * @extends HTMLHRElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLHRElement>
- * @prop height?: number
- * @prop maxWidth?: string | number
- * @prop color?: Any color from the library
- * @prop margin?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" | "auto" | "0 auto" | { left?: LibSpacers | "auto"; top?: LibSpacers | "auto"; right?: LibSpacers | "auto"; bottom?: LibSpacers | "auto"; leftRight?: LibSpacers | "auto"; topBottom?: LibSpacers | "auto" }
- * @prop isRounded?: boolean
+ * @param {Object} props - Hr props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {ElementType} [props.as] - Custom element type to render as.
+ * @param {ForwardedRef<HTMLHRElement>} [props.ref] - Ref forwarded to the root element.
+ * @param {number} [props.height=1] - Height of the horizontal rule.
+ * @param {string|number} [props.maxWidth="100%"] - Maximum width of the horizontal rule.
+ * @param {string} [props.color="gray-200"] - Any color from the library.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" | "auto" | "0 auto" | { left?: LibSpacers | "auto"; top?: LibSpacers | "auto"; right?: LibSpacers | "auto"; bottom?: LibSpacers | "auto"; leftRight?: LibSpacers | "auto"; topBottom?: LibSpacers | "auto" }} [props.margin="0 auto"] - Margin for the horizontal rule.
+ * @param {boolean} [props.isRounded] - Whether the horizontal rule has rounded corners.
+ * @param {string} [props.className] - Additional class names.
+ * @returns {JSX.Element} The rendered Hr component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/hr
+ * @example
+ * <Hr color="primary" height={2} maxWidth={200} margin="l" isRounded />
  */
-export const Hr = forwardRef<HTMLHRElement, ILibHr>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            className,
-            height = 1,
-            maxWidth = "100%",
-            color = "gray-200",
-            margin = "0 auto",
-            isRounded,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledHr
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                className={classNames(className, { Rounded: isRounded })}
-                $height={height}
-                $maxWidth={maxWidth}
-                $color={color}
-                $margin={margin}
-                {...rest}
-            />
-        )
-    }
-)
+export const Hr: FC<ILibHr> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    className,
+    height = 1,
+    maxWidth = "100%",
+    color = "gray-200",
+    margin = "0 auto",
+    isRounded,
+    ...rest
+}) => {
+    return (
+        <StyledHr
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            className={classNames(className, { Rounded: isRounded })}
+            $height={height}
+            $maxWidth={maxWidth}
+            $color={color}
+            $margin={margin}
+            {...rest}
+        />
+    )
+}

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

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

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== Hr types ===============================================*/
-
 import type { LibAllColors, LibComponentBase, ILibMargin } from "../../types"
 
 export interface ILibHr extends LibComponentBase<HTMLHRElement> {

package/dist/lib/components/Icon/Icon.tsx

@@ -1,42 +1,42 @@
-/*=============================================== Icon component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { StyledIcon } from "./styles"
 import type { ILibIcon } from "./types"
 
 /**
- * @description Returns an Icon component
- * @link https://documentation-components-react.vercel.app/components/icon
+ * Icon component for rendering SVG icons from the `/public/icons` folder.
+ *
+ * @component
  * @extends Props from react-inlinesvg
- * @tutorial To use this component, add the SVG file for the icon you want to render in `/public/icons` folder
- * @prop data-testid?: string
- * @prop ref?: ForwardedRef<SVGElement>
- * @prop src: string
- * @prop size?: number
- * @prop color?: Any color from the library
- * @prop baseUrl?: string
+ * @param {Object} props - Icon props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {ForwardedRef<SVGElement>} [props.ref] - Ref forwarded to the SVG element.
+ * @param {string} props.src - Icon name (SVG file name without extension).
+ * @param {number} [props.size=32] - Size of the icon.
+ * @param {string} [props.color="currentColor"] - Any color from the library.
+ * @param {string} [props.baseURL="/icons"] - Base URL for the icon files.
+ * @returns {JSX.Element} The rendered Icon component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/icon
+ * @example
+ * <Icon src="star" size={24} color="primary" />
  */
-export const Icon = forwardRef<SVGElement, ILibIcon>(
-    (
-        {
-            "data-testid": testid,
-            src,
-            size = 32,
-            color = "currentColor",
-            baseURL = "/icons",
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledIcon
-                data-testid={testid}
-                innerRef={ref}
-                src={`${baseURL}/${src}.svg`}
-                $size={size}
-                $color={color}
-                {...rest}
-            />
-        )
-    }
-)
+export const Icon: FC<ILibIcon> = ({
+    "data-testid": testid,
+    ref,
+    src,
+    size = 32,
+    color = "currentColor",
+    baseURL = "/icons",
+    ...rest
+}) => {
+    return (
+        <StyledIcon
+            data-testid={testid}
+            innerRef={ref}
+            src={`${baseURL}/${src}.svg`}
+            $size={size}
+            $color={color}
+            {...rest}
+        />
+    )
+}

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== Icon styles ===============================================*/
-
 import styled from "styled-components"
 import SVG from "react-inlinesvg"
 import { stringifyPx } from "@julseb-lib/utils"

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

@@ -1,10 +1,10 @@
-/*=============================================== Icon types ===============================================*/
-
 import type { Props as SVGProps } from "react-inlinesvg"
 import type { LibAllColors } from "../../types"
+import type { Ref } from "react"
 
 export interface ILibIcon extends SVGProps {
     "data-testid"?: string
+    ref?: Ref<SVGElement>
     src: string
     size?: number
     color?: LibAllColors

package/dist/lib/components/IconMenu/IconMenu.tsx

@@ -1,6 +1,4 @@
-/*=============================================== IconMenu component ===============================================*/
-
-import { forwardRef, useState, useRef } from "react"
+import { useState, useRef, type FC } from "react"
 import classNames from "classnames"
 import { Burger, useClickOutside, useMergeRefs } from "../../"
 import { IconMenuItem } from "./IconMenuItem"
@@ -13,145 +11,138 @@ import {
 import type { ILibIconMenu } from "./types"
 
 /**
- * @description Returns a IconMenu component
- * @link https://documentation-components-react.vercel.app/components/icon-menu
+ * IconMenu component for displaying a menu of icon buttons with flexible direction, positioning, and tooltips.
+ *
+ * @component
  * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop items: Array<LibIconMenuItem> => only if children is not defined
- * @prop children?: ReactChildren => only if items is not defined
- * @prop direction?: "left" | "up" | "right" | "down"
- * @prop color?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"
- * @prop position?: "relative" | "absolute" | "fixed"
- * @prop hideTooltips?: boolean
- * @prop buttonsVariant?: "plain" | "transparent" | "ghost"
- * @prop iconBaseUrl?: string
- * @prop icon?: "plus" | "burger" | { open: string | JSX.Element; close: string | JSX.Element; openSize?: number; closeSize?: number }
+ * @param {Object} props - IconMenu 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 {Array<LibIconMenuItem>} [props.items] - Array of menu items (used if children is not provided).
+ * @param {ReactNode} [props.children] - Custom menu content (used if items is not provided).
+ * @param {"left" | "up" | "right" | "down"} [props.direction="right"] - Direction in which the menu appears.
+ * @param {"primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"} [props.color="primary"] - Color for the menu and icons.
+ * @param {"relative" | "absolute" | "fixed" | Object} [props.position] - Positioning for the menu container.
+ * @param {boolean} [props.hideTooltips] - Hide tooltips for menu items.
+ * @param {"plain" | "transparent" | "ghost"} [props.buttonsVariant] - Button variant for menu items.
+ * @param {string} [props.iconBaseUrl] - Base URL for icon files.
+ * @param {"plus" | "burger" | { open: string | JSX.Element; close: string | JSX.Element; openSize?: number; closeSize?: number }} [props.icon="plus"] - Icon for the open/close button.
+ * @returns {JSX.Element} The rendered IconMenu component.
  *
- * @type LibIconMenuItem
- * @prop data-testid?: string
- * @prop className?: string
- * @prop id?: string
- * @prop ref?: ForwardedRef<HTMLButtonElement & HTMLAnchorElement>
- * @prop label: string
- * @prop icon: string | JSX.Element
- * @prop iconSize?: number
- * @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
+ * @see https://documentation-components-react.vercel.app/components/icon-menu
+ * @example
+ * <IconMenu
+ *   items={[
+ *     { label: "Edit", icon: "edit", onClick: handleEdit },
+ *     { label: "Delete", icon: "delete", onClick: handleDelete }
+ *   ]}
+ *   direction="down"
+ *   color="secondary"
+ * />
  */
-export const IconMenu = forwardRef<HTMLDivElement, ILibIconMenu>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            children,
-            className,
-            icon = "plus",
-            position,
-            direction = "right",
-            color = "primary",
-            items,
-            hideTooltips,
-            buttonsVariant,
-            iconBaseUrl,
-            ...rest
-        },
-        ref
-    ) => {
-        const [isOpen, setIsOpen] = useState(false)
+export const IconMenu: FC<ILibIconMenu> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    className,
+    icon = "plus",
+    position,
+    direction = "right",
+    color = "primary",
+    items,
+    hideTooltips,
+    buttonsVariant,
+    iconBaseUrl,
+    ...rest
+}) => {
+    const [isOpen, setIsOpen] = useState(false)
 
-        const el = useRef<HTMLDivElement>(null)
+    const el = useRef<HTMLDivElement>(null as any)
 
-        useClickOutside(el, () => {
-            if (isOpen) setIsOpen(false)
-        })
+    useClickOutside(el, () => {
+        if (isOpen) setIsOpen(false)
+    })
 
-        return (
-            <StyledIconMenu
-                data-testid={testid}
-                ref={useMergeRefs([ref, el])}
-                className={className}
-                $position={position?.position || "relative"}
-                $left={position?.left}
-                $top={position?.top}
-                $right={position?.right}
-                $bottom={position?.bottom}
-                $zIndex={position?.zIndex || 999}
-                as={as}
-                {...rest}
-            >
-                {/* @ts-ignore */}
-                <OpenButton
-                    data-testid={testid && `${testid}.OpenButton`}
-                    className={className && "OpenButton"}
-                    icon={
-                        typeof icon === "object" ? (
-                            isOpen ? (
-                                icon.open
-                            ) : (
-                                icon.close
-                            )
-                        ) : icon === "burger" ? (
-                            <Burger
-                                data-testid={
-                                    testid && `${testid}.OpenButton.Burger`
-                                }
-                                className={className && "OpenBurger"}
-                                isOpen={isOpen}
-                                color={color === "white" ? "primary" : "white"}
-                                as="span"
-                                width={DEFAULT_BUTTON_SIZE * 0.5}
-                                height={DEFAULT_BUTTON_SIZE * 0.4}
-                                noHover
-                            />
+    return (
+        <StyledIconMenu
+            data-testid={testid}
+            ref={useMergeRefs([ref, el])}
+            className={className}
+            $position={position?.position || "relative"}
+            $left={position?.left}
+            $top={position?.top}
+            $right={position?.right}
+            $bottom={position?.bottom}
+            $zIndex={position?.zIndex || 999}
+            as={as}
+            {...rest}
+        >
+            <OpenButton
+                data-testid={testid && `${testid}.OpenButton`}
+                className={className && "OpenButton"}
+                icon={
+                    typeof icon === "object" ? (
+                        isOpen ? (
+                            icon.open
                         ) : (
-                            <OpenIcon
-                                data-testid={
-                                    testid && `${testid}.OpenButton.Icon`
-                                }
-                                className={classNames(
-                                    { OpenIcon: className },
-                                    { Open: isOpen }
-                                )}
-                            />
+                            icon.close
                         )
-                    }
-                    color={color}
-                    onClick={() => setIsOpen(!isOpen)}
-                />
+                    ) : icon === "burger" ? (
+                        <Burger
+                            data-testid={
+                                testid && `${testid}.OpenButton.Burger`
+                            }
+                            className={className && "OpenBurger"}
+                            isOpen={isOpen}
+                            color={color === "white" ? "primary" : "white"}
+                            as="span"
+                            width={DEFAULT_BUTTON_SIZE * 0.5}
+                            height={DEFAULT_BUTTON_SIZE * 0.4}
+                            noHover
+                        />
+                    ) : (
+                        <OpenIcon
+                            data-testid={testid && `${testid}.OpenButton.Icon`}
+                            className={classNames(
+                                { OpenIcon: className },
+                                { Open: isOpen }
+                            )}
+                        />
+                    )
+                }
+                color={color}
+                onClick={() => setIsOpen(!isOpen)}
+            />
 
-                {items
-                    ? items?.map((item, i) => (
-                          <IconMenuItem
-                              key={i}
-                              data-testid={
-                                  item["data-testid"] ||
-                                  (testid && `${testid}.Item`)
-                              }
-                              className={classNames(
-                                  item.className,
-                                  { IconMenuItem: className },
-                                  { Open: isOpen }
-                              )}
-                              id={item.id}
-                              ref={item.ref}
-                              {...(item as any)}
-                              direction={direction}
-                              indexPosition={i + 1}
-                              isOpen={isOpen}
-                              size={DEFAULT_BUTTON_SIZE}
-                              tooltip={item?.label}
-                              showTooltip={!hideTooltips && { offset: -12 }}
-                              variant={buttonsVariant}
-                              iconBaseUrl={iconBaseUrl}
-                          />
-                      ))
-                    : children}
-            </StyledIconMenu>
-        )
-    }
-)
+            {items
+                ? items?.map((item, i) => (
+                      <IconMenuItem
+                          key={i}
+                          data-testid={
+                              item["data-testid"] ||
+                              (testid && `${testid}.Item`)
+                          }
+                          className={classNames(
+                              item.className,
+                              { IconMenuItem: className },
+                              { Open: isOpen }
+                          )}
+                          id={item.id}
+                          ref={item.ref}
+                          {...(item as any)}
+                          direction={direction}
+                          indexPosition={i + 1}
+                          isOpen={isOpen}
+                          size={DEFAULT_BUTTON_SIZE}
+                          tooltip={item?.label}
+                          showTooltip={!hideTooltips && { offset: -12 }}
+                          variant={buttonsVariant}
+                          iconBaseUrl={iconBaseUrl}
+                      />
+                  ))
+                : children}
+        </StyledIconMenu>
+    )
+}