@julseb-lib/react 0.0.85 → 0.0.87

package/dist/lib/components/ButtonGroup/ButtonGroup.tsx

@@ -1,6 +1,4 @@
-/*=============================================== ButtonGroup component ===============================================*/
-
-import { forwardRef, useState, Fragment } from "react"
+import { useState, Fragment, type FC } from "react"
 import { uuid } from "@julseb-lib/utils"
 import { ButtonGroupButton } from "./ButtonGroupButton"
 import { ButtonGroupToggle } from "./ButtonGroupToggle"
@@ -8,151 +6,131 @@ import { StyledButtonGroup, Separator } from "./styles"
 import type { ILibButtonGroup } from "./types"
 
 /**
- * @description Returns a ButtonGroup component
- * @link https://documentation-components-react.vercel.app/components/button-group
- * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop buttons: Array<LibButtonGroupButtonItem> => only if toggles is not defined
- * @prop name?: string => required when toggles is defined
- * @prop toggles: Array<LibButtonGroupToggle> => only if buttons is not defined
- * @prop toggleType?: "single" | "multi" => only if toogles is defined
- * @prop color?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"
- * @prop variant?: "plain" | "transparent" | "ghost"
- * @prop borderRadius?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | { topLeft?: LibRadiuses; topRight?: LibRadiuses; bottomLeft?: LibRadiuses; bottomRight?: LibRadiuses }
- * @prop size?: "default" | "small"
- * @prop iconBaseUrl?: string
+ * ButtonGroup component for grouping buttons or toggles with shared styles and optional separators.
  *
- * @type LibButtonGroupButtonItem
- * @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
- * @prop data-testid?: string
- * @prop className?: string
- * @prop id?: string
- * @prop ref?: ForwardedRef<HTMLButtonElement>
- * @prop text: string => only if `iconOnly` is not defined
- * @prop iconLeft?: string | JSX.Element
- * @prop iconRight?: string | JSX.Element
- * @prop iconOnly: string | JSX.Element => only if `text` is not defined
- * @prop iconSizes?: { left?: number; right?: number; only?: number }
- * @prop "aria-label"?: string
+ * @component
+ * @param {Object} props - ButtonGroup 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<LibButtonGroupButtonItem>} [props.buttons] - Array of button items (used if toggles is not provided).
+ * @param {Array<LibButtonGroupToggle>} [props.toggles] - Array of toggle items (used if buttons is not provided).
+ * @param {"single" | "multi"} [props.toggleType="single"] - Toggle selection type (only if toggles is defined).
+ * @param {string} [props.name] - Name for the toggle group (required when toggles is defined).
+ * @param {"primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"} [props.color="primary"] - Color of the group.
+ * @param {"plain" | "transparent" | "ghost"} [props.variant="plain"] - Visual variant of the group.
+ * @param {"default" | "small"} [props.size="default"] - Size of the group.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | Object} [props.borderRadius] - Border radius for the group.
+ * @param {string} [props.iconBaseUrl] - Base URL for icons.
+ * @returns {JSX.Element} The rendered ButtonGroup component.
  *
- * @type LibButtonGroupToggle
- * @prop data-testid?: string
- * @prop className?: string
- * @prop id?: string
- * @prop ref?: ForwardedRef<HTMLInputElement>
- * @prop text: string => only if icon is not defined
- * @prop icon: string | JSX.Element => only if text is not defined
- * @prop iconSize?: number => only if text is not defined
- * @prop label?: string => only if text is not defined
- * @prop tooltip?: string => only if text is not defined
- * @prop showTooltip?: boolean => only if text is not defined
+ * @example
+ * <ButtonGroup
+ *   buttons={[
+ *     { text: "Left", onClick: () => {} },
+ *     { text: "Right", onClick: () => {} }
+ *   ]}
+ *   color="secondary"
+ *   variant="transparent"
+ * />
+ * <ButtonGroup
+ *   toggles={[
+ *     { id: "a", text: "A" },
+ *     { id: "b", text: "B" }
+ *   ]}
+ *   toggleType="multi"
+ *   name="letters"
+ * />
  */
-export const ButtonGroup = forwardRef<HTMLDivElement, ILibButtonGroup>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            className,
-            buttons,
-            color = "primary",
-            variant = "plain",
-            size = "default",
-            borderRadius = size === "small" ? "s" : "m",
-            toggles,
-            toggleType = "single",
-            name,
-            iconBaseUrl,
-            ...rest
-        },
-        ref
-    ) => {
-        const commonProps = {
-            "data-testid": testid,
-            className,
-            color,
-            variant,
-            size,
-        }
+export const ButtonGroup: FC<ILibButtonGroup> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    className,
+    buttons,
+    color = "primary",
+    variant = "plain",
+    size = "default",
+    borderRadius = size === "small" ? "s" : "m",
+    toggles,
+    toggleType = "single",
+    name,
+    iconBaseUrl,
+    ...rest
+}) => {
+    const commonProps = {
+        "data-testid": testid,
+        className,
+        color,
+        variant,
+        size,
+    }
 
-        const separatorProps = (i: number) => ({
-            "data-testid": testid && `${testid}.Separator.${i}`,
-            className: className && "Separator",
-            $color: color,
-        })
+    const separatorProps = (i: number) => ({
+        "data-testid": testid && `${testid}.Separator.${i}`,
+        className: className && "Separator",
+        $color: color,
+    })
 
-        const [allToggles, setAllToggles] = useState(
-            toggles
-                ? Object.assign(
-                      {},
-                      ...(toggles
-                          ?.map(t => ({
-                              [t.id]: t.value ?? false,
-                          }))
-                          ?.filter(v => v !== undefined) as any)
-                  )
-                : null
-        )
+    const [allToggles, setAllToggles] = useState(
+        toggles
+            ? Object.assign(
+                  {},
+                  ...(toggles
+                      ?.map(t => ({
+                          [t.id]: t.value ?? false,
+                      }))
+                      ?.filter(v => v !== undefined) as any)
+              )
+            : null
+    )
 
-        return (
-            <StyledButtonGroup
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                className={className}
-                $size={size}
-                $borderRadius={borderRadius}
-                $variant={variant}
-                $color={color}
-                {...rest}
-            >
-                {buttons?.map((button, i) => (
-                    <Fragment key={uuid()}>
-                        <ButtonGroupButton
-                            button={button}
-                            index={i}
-                            iconBaseUrl={iconBaseUrl}
-                            {...(commonProps as any)}
-                        />
+    return (
+        <StyledButtonGroup
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            className={className}
+            $size={size}
+            $borderRadius={borderRadius}
+            $variant={variant}
+            $color={color}
+            {...rest}
+        >
+            {buttons?.map((button, i) => (
+                <Fragment key={uuid()}>
+                    <ButtonGroupButton
+                        button={button}
+                        index={i}
+                        iconBaseUrl={iconBaseUrl}
+                        {...(commonProps as any)}
+                    />
 
-                        {variant === "transparent" &&
-                            i !== buttons.length - 1 && (
-                                <Separator
-                                    key={uuid()}
-                                    {...separatorProps(i)}
-                                />
-                            )}
-                    </Fragment>
-                ))}
+                    {variant === "transparent" && i !== buttons.length - 1 && (
+                        <Separator key={uuid()} {...separatorProps(i)} />
+                    )}
+                </Fragment>
+            ))}
 
-                {toggles?.map((toggle, i) => (
-                    <Fragment key={uuid()}>
-                        <ButtonGroupToggle
-                            {...(commonProps as any)}
-                            toggle={toggle}
-                            toggleType={toggleType}
-                            name={name}
-                            index={i}
-                            toggles={allToggles}
-                            setToggles={setAllToggles}
-                            iconBaseUrl={iconBaseUrl}
-                        />
+            {toggles?.map((toggle, i) => (
+                <Fragment key={uuid()}>
+                    <ButtonGroupToggle
+                        {...(commonProps as any)}
+                        toggle={toggle}
+                        toggleType={toggleType}
+                        name={name}
+                        index={i}
+                        toggles={allToggles}
+                        setToggles={setAllToggles}
+                        iconBaseUrl={iconBaseUrl}
+                    />
 
-                        {variant === "transparent" &&
-                            i !== toggles.length - 1 && (
-                                <Separator
-                                    key={uuid()}
-                                    {...separatorProps(i)}
-                                />
-                            )}
-                    </Fragment>
-                ))}
-            </StyledButtonGroup>
-        )
-    }
-)
+                    {variant === "transparent" && i !== toggles.length - 1 && (
+                        <Separator key={uuid()} {...separatorProps(i)} />
+                    )}
+                </Fragment>
+            ))}
+        </StyledButtonGroup>
+    )
+}

package/dist/lib/components/ButtonGroup/ButtonGroupButton.tsx

@@ -1,6 +1,4 @@
-/*=============================================== ButtonGroupButtons ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { capitalize, filterObject } from "@julseb-lib/utils"
 import { Button, ButtonIcon } from "../.."
 import type { ILibButton } from "../Button/types"
@@ -8,82 +6,71 @@ import type { ILibButtonIcon } from "../ButtonIcon/types"
 import type { LibButtonGroupButtonItem } from "../../types"
 import type { ILibButtonGroupButton } from "./subtypes"
 
-export const ButtonGroupButton = forwardRef<
-    HTMLButtonElement,
-    ILibButtonGroupButton
->(
-    (
-        {
-            "data-testid": testid,
-            className,
-            button,
-            color,
-            variant,
-            size,
-            index,
-            iconBaseUrl,
-        },
-        ref
-    ) => {
-        const commonProps: Partial<
-            (ILibButton | ILibButtonIcon) & LibButtonGroupButtonItem
-        > = {
-            "data-testid":
-                button["data-testid"] ||
-                (testid && `${testid}.Button.${index}`),
-            className: button.className || (className && "Button"),
-            id: button.id,
-            ref: ref || button.ref,
-            color,
-            variant: variant as any,
-        }
-
-        const filteredButtonRest = filterObject(
-            button,
-            // @ts-expect-error
-            ([n]) => n !== "iconOnly"
-        )
+export const ButtonGroupButton: FC<ILibButtonGroupButton> = ({
+    "data-testid": testid,
+    ref,
+    className,
+    button,
+    color,
+    variant,
+    size,
+    index,
+    iconBaseUrl,
+}) => {
+    const commonProps: Partial<
+        (ILibButton | ILibButtonIcon) & LibButtonGroupButtonItem
+    > = {
+        "data-testid":
+            button["data-testid"] || (testid && `${testid}.Button.${index}`),
+        className: button.className || (className && "Button"),
+        id: button.id,
+        ref: (ref || button.ref) as any,
+        color,
+        variant: variant as any,
+    }
 
-        if (button.icons && button.icons.only)
-            return (
-                <ButtonIcon
-                    {...(commonProps as any)}
-                    icon={button.icons.only}
-                    borderRadius={0}
-                    size={size === "small" ? 24 : (34 as any)}
-                    aria-label={
-                        button["aria-label"] ||
-                        capitalize(
-                            typeof button.icons.only === "string"
-                                ? button.icons.only
-                                : "button"
-                        )
-                    }
-                    iconSize={button?.iconSizes?.only}
-                    iconBaseUrl={iconBaseUrl}
-                    {...(filteredButtonRest as any)}
-                />
-            )
+    // @ts-ignore
+    const filteredButtonRest = filterObject(button, ([n]) => n !== "iconOnly")
 
+    if (button.icons && button.icons.only)
         return (
-            <Button
+            <ButtonIcon
                 {...(commonProps as any)}
+                icon={button.icons.only}
                 borderRadius={0}
-                size={size as any}
-                icons={{
-                    left: button.icons?.left,
-                    right: button.icons?.right,
-                }}
-                iconSizes={{
-                    left: button?.iconSizes?.left,
-                    right: button?.iconSizes?.right,
-                }}
-                aria-label={button["aria-label"] || button.text}
+                size={size === "small" ? 24 : (34 as any)}
+                aria-label={
+                    button["aria-label"] ||
+                    capitalize(
+                        typeof button.icons.only === "string"
+                            ? button.icons.only
+                            : "button"
+                    )
+                }
+                iconSize={button?.iconSizes?.only}
                 iconBaseUrl={iconBaseUrl}
                 {...(filteredButtonRest as any)}
-            >
-                {button.text}
-            </Button>
+            />
         )
-    }
-)
+
+    return (
+        <Button
+            {...(commonProps as any)}
+            borderRadius={0}
+            size={size as any}
+            icons={{
+                left: button.icons?.left,
+                right: button.icons?.right,
+            }}
+            iconSizes={{
+                left: button?.iconSizes?.left,
+                right: button?.iconSizes?.right,
+            }}
+            aria-label={button["aria-label"] || button.text}
+            iconBaseUrl={iconBaseUrl}
+            {...(filteredButtonRest as any)}
+        >
+            {button.text}
+        </Button>
+    )
+}

package/dist/lib/components/ButtonGroup/ButtonGroupToggle.tsx

@@ -1,99 +1,88 @@
-/*=============================================== ButtonGroupToggles ===============================================*/
-
-import { forwardRef, type ChangeEvent } from "react"
+import type { FC, ChangeEvent } from "react"
 import { roundIconSize } from "../../lib-utils"
 import { LibIcon } from "../LibIcon"
 import { StyledToggle, ToggleInput, ToggleLabel } from "./styles"
 import type { ILibButtonGroupToggle } from "./subtypes"
 
-export const ButtonGroupToggle = forwardRef<
-    HTMLLabelElement,
-    ILibButtonGroupToggle
->(
-    (
-        {
-            "data-testid": testid,
-            className,
-            toggle,
-            toggleType,
-            color,
-            variant,
-            size,
-            name,
-            index,
-            toggles,
-            setToggles,
-            iconBaseUrl,
-        },
-        ref
-    ) => {
-        const handleSingle = (e: ChangeEvent<HTMLInputElement>) => {
-            const { id, checked } = e.target
+export const ButtonGroupToggle: FC<ILibButtonGroupToggle> = ({
+    "data-testid": testid,
+    ref,
+    className,
+    toggle,
+    toggleType,
+    color,
+    variant,
+    size,
+    name,
+    index,
+    toggles,
+    setToggles,
+    iconBaseUrl,
+}) => {
+    const handleSingle = (e: ChangeEvent<HTMLInputElement>) => {
+        const { id, checked } = e.target
+
+        setToggles(prevState => {
+            const nextState: { [id: string]: boolean } = {}
 
+            Object.keys(prevState).forEach(key => {
+                nextState[key] = false
+            })
+            return { ...nextState, [id]: checked }
+        })
+    }
+
+    const handleUncheckRadio = () => {
+        if (toggles[toggle.id] === true && toggleType === "single") {
             setToggles(prevState => {
                 const nextState: { [id: string]: boolean } = {}
 
                 Object.keys(prevState).forEach(key => {
                     nextState[key] = false
                 })
-                return { ...nextState, [id]: checked }
+
+                return nextState
             })
         }
+    }
 
-        const handleUncheckRadio = () => {
-            if (toggles[toggle.id] === true && toggleType === "single") {
-                setToggles(prevState => {
-                    const nextState: { [id: string]: boolean } = {}
-
-                    Object.keys(prevState).forEach(key => {
-                        nextState[key] = false
-                    })
+    const handleMulti = (e: ChangeEvent<HTMLInputElement>) =>
+        setToggles({ ...toggles, [e.target.id]: e.target.checked })
 
-                    return nextState
-                })
+    return (
+        <StyledToggle
+            data-testid={
+                toggle["data-testid"] ||
+                (testid && `${testid}.ToggleContainer.${index}`)
             }
-        }
+            ref={ref}
+            className={toggle.className ?? (className && "ToggleContainer")}
+            onClick={handleUncheckRadio}
+            htmlFor={toggle.id}
+            $color={color!}
+            $size={size}
+            $variant={variant}
+            $withIcon={!!toggle.icon}
+        >
+            <ToggleInput
+                id={toggle.id}
+                name={name}
+                type={toggleType === "multi" ? "checkbox" : "radio"}
+                onChange={toggleType === "multi" ? handleMulti : handleSingle}
+                checked={toggles[toggle.id] === true}
+            />
 
-        const handleMulti = (e: ChangeEvent<HTMLInputElement>) =>
-            setToggles({ ...toggles, [e.target.id]: e.target.checked })
+            <ToggleLabel>
+                {toggle.icon && (
+                    <LibIcon
+                        icon={toggle.icon}
+                        size={toggle.iconSize ?? roundIconSize(24)}
+                        baseUrl={iconBaseUrl}
+                    />
+                )}
 
-        return (
-            <StyledToggle
-                data-testid={
-                    toggle["data-testid"] ||
-                    (testid && `${testid}.ToggleContainer.${index}`)
-                }
-                ref={ref}
-                className={toggle.className ?? (className && "ToggleContainer")}
-                onClick={handleUncheckRadio}
-                htmlFor={toggle.id}
-                $color={color!}
-                $size={size}
-                $variant={variant}
-                $withIcon={!!toggle.icon}
-            >
-                <ToggleInput
-                    id={toggle.id}
-                    name={name}
-                    type={toggleType === "multi" ? "checkbox" : "radio"}
-                    onChange={
-                        toggleType === "multi" ? handleMulti : handleSingle
-                    }
-                    checked={toggles[toggle.id] === true}
-                />
-
-                <ToggleLabel>
-                    {toggle.icon && (
-                        <LibIcon
-                            icon={toggle.icon}
-                            size={toggle.iconSize ?? roundIconSize(24)}
-                            baseUrl={iconBaseUrl}
-                        />
-                    )}
-
-                    {toggle.text && toggle.text}
-                </ToggleLabel>
-            </StyledToggle>
-        )
-    }
-)
+                {toggle.text && toggle.text}
+            </ToggleLabel>
+        </StyledToggle>
+    )
+}

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== ButtonGroup styles ===============================================*/
-
 import styled, { css } from "styled-components"
 import { FONT_WEIGHTS, Mixins, setDefaultTheme, SPACERS } from "../../"
 import { ButtonMixin } from "../ComponentsMixins"

package/dist/lib/components/ButtonGroup/subtypes.ts

@@ -1,5 +1,4 @@
-/*=============================================== ButtonGroup sub components types ===============================================*/
-
+import type { Ref } from "react"
 import type {
     DispatchState,
     LibButtonGroupButtonItem,
@@ -18,6 +17,7 @@ export interface ILibButtonGroupButton
         | "color"
         | "size"
         | "iconBaseUrl"
+        | "ref"
     > {
     button: LibButtonGroupButtonItem
     index: number
@@ -39,4 +39,5 @@ export interface ILibButtonGroupToggle
     toggles: { [id: string]: boolean }
     setToggles: DispatchState<{ [id: string]: boolean }>
     index: number
+    ref?: Ref<HTMLLabelElement>
 }

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

@@ -1,5 +1,3 @@
-/*=============================================== ButtonGroup types ===============================================*/
-
 import type {
     LibComponentBase,
     LibButtonGroupButtonItem,