@julseb-lib/react 0.0.61 → 0.0.64

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

@@ -0,0 +1,158 @@
+/*=============================================== ButtonGroup component ===============================================*/
+
+import { forwardRef, useState, Fragment } from "react"
+import { uuid } from "@julseb-lib/utils"
+import { ButtonGroupButton } from "./ButtonGroupButton"
+import { ButtonGroupToggle } from "./ButtonGroupToggle"
+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
+ *
+ * @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
+ *
+ * @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
+ */
+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,
+        }
+
+        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
+        )
+
+        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>
+                ))}
+
+                {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>
+        )
+    }
+)

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

@@ -0,0 +1,89 @@
+/*=============================================== ButtonGroupButtons ===============================================*/
+
+import { forwardRef } from "react"
+import { capitalize, filterObject } from "@julseb-lib/utils"
+import { Button, ButtonIcon } from "../.."
+import type { ILibButton } from "../Button/types"
+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"
+        )
+
+        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)}
+                />
+            )
+
+        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

@@ -0,0 +1,99 @@
+/*=============================================== ButtonGroupToggles ===============================================*/
+
+import { forwardRef, type 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
+
+            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
+                })
+            }
+        }
+
+        const handleMulti = (e: ChangeEvent<HTMLInputElement>) =>
+            setToggles({ ...toggles, [e.target.id]: e.target.checked })
+
+        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>
+        )
+    }
+)

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

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

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

@@ -0,0 +1,91 @@
+/*=============================================== ButtonGroup styles ===============================================*/
+
+import styled, { css } from "styled-components"
+import { FONT_WEIGHTS, Mixins, setDefaultTheme, SPACERS } from "../../"
+import { ButtonMixin } from "../ComponentsMixins"
+import type {
+    LibButtonSize,
+    LibButtonVariant,
+    LibColorsHover,
+    ILibRadius,
+} from "../../types"
+
+const StyledButtonGroup = styled.div<{
+    $size?: LibButtonSize
+    $borderRadius?: ILibRadius
+    $variant?: Extract<LibButtonVariant, "plain" | "transparent" | "ghost">
+    $color: LibColorsHover
+}>`
+    height: ${({ $size }) => ($size === "small" ? 24 : 34)}px;
+    overflow: hidden;
+    width: fit-content;
+    ${({ $borderRadius }) => Mixins.BorderRadius($borderRadius)};
+    ${Mixins.Flexbox({
+        $inline: true,
+        $justifyContent: "flex-start",
+        $alignItems: "flex-start",
+    })}
+
+    ${({ $variant, theme, $color }) =>
+        $variant === "transparent" &&
+        css`
+            border: 1px solid ${Mixins.ColorsHoverDefault($color, theme)};
+        `}
+
+    & > * {
+        height: 100%;
+    }
+`
+
+const Separator = styled.hr<{ $color: LibColorsHover }>`
+    width: 1px;
+    position: relative;
+    top: 0;
+    border: none;
+    background-color: ${({ theme, $color }) =>
+        Mixins.ColorsHoverDefault($color, theme)};
+`
+
+const StyledToggle = styled.label<{
+    $size?: LibButtonSize
+    $variant?: Extract<LibButtonVariant, "plain" | "transparent" | "ghost">
+    $color: LibColorsHover
+    $withIcon: boolean
+}>`
+    width: ${({ $withIcon, $size }) =>
+        $withIcon && ($size === "small" ? 22 : 34)}px;
+    height: ${({ $size }) => ($size === "small" ? 22 : 34)}px;
+    ${ButtonMixin}
+    padding: ${({ $withIcon }) => !$withIcon && `0 ${SPACERS.XS}`};
+    font-weight: ${FONT_WEIGHTS.BLACK};
+
+    &:has(input:checked) {
+        background-color: ${({ $color, theme }) =>
+            Mixins.AllColors(`${$color}-300` as any, theme)};
+        color: ${({ theme }) => Mixins.AllColors("background", theme)};
+
+        ${({ $variant, $color, theme }) =>
+            $variant === "transparent" &&
+            css`
+                &:hover {
+                    color: ${Mixins.ColorsHoverDefault($color, theme)};
+                }
+            `}
+    }
+`
+
+const ToggleInput = styled.input`
+    display: none;
+`
+
+const ToggleLabel = styled.span``
+
+setDefaultTheme([
+    StyledButtonGroup,
+    Separator,
+    StyledToggle,
+    ToggleInput,
+    ToggleLabel,
+])
+
+export { StyledButtonGroup, Separator, StyledToggle, ToggleInput, ToggleLabel }

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

@@ -0,0 +1,42 @@
+/*=============================================== ButtonGroup sub components types ===============================================*/
+
+import type {
+    DispatchState,
+    LibButtonGroupButtonItem,
+    LibButtonGroupToggle,
+} from "../../types"
+import type { ILibButtonGroup } from "./types"
+
+// ! DO NOT EXPORT THOSE TYPES, ONLY USE THEM IN BUTTON_GROUP COMPONENTS
+
+export interface ILibButtonGroupButton
+    extends Pick<
+        ILibButtonGroup,
+        | "data-testid"
+        | "className"
+        | "variant"
+        | "color"
+        | "size"
+        | "iconBaseUrl"
+    > {
+    button: LibButtonGroupButtonItem
+    index: number
+}
+
+export interface ILibButtonGroupToggle
+    extends Pick<
+        ILibButtonGroup,
+        | "data-testid"
+        | "className"
+        | "toggleType"
+        | "color"
+        | "variant"
+        | "size"
+        | "name"
+        | "iconBaseUrl"
+    > {
+    toggle: LibButtonGroupToggle
+    toggles: { [id: string]: boolean }
+    setToggles: DispatchState<{ [id: string]: boolean }>
+    index: number
+}

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

@@ -0,0 +1,36 @@
+/*=============================================== ButtonGroup types ===============================================*/
+
+import type {
+    LibComponentBase,
+    LibButtonGroupButtonItem,
+    LibColorsHover,
+    LibButtonVariant,
+    ILibRadius,
+    LibButtonSize,
+    LibButtonGroupToggleSelect,
+    LibButtonGroupToggle,
+} from "../../types"
+
+interface ILibButtonGroupBase extends LibComponentBase<HTMLDivElement> {
+    color?: LibColorsHover
+    variant?: Extract<LibButtonVariant, "plain" | "transparent" | "ghost">
+    borderRadius?: ILibRadius
+    size?: LibButtonSize
+    iconBaseUrl?: string
+}
+
+interface ButtonGroupWithButtons extends ILibButtonGroupBase {
+    buttons: Array<LibButtonGroupButtonItem>
+    name?: string
+    toggles?: never
+    toggleType?: never
+}
+
+interface ButtonGroupWithToggles extends ILibButtonGroupBase {
+    buttons?: never
+    name: string
+    toggles: Array<LibButtonGroupToggle>
+    toggleType?: LibButtonGroupToggleSelect
+}
+
+export type ILibButtonGroup = ButtonGroupWithButtons | ButtonGroupWithToggles

package/dist/lib/components/ButtonIcon/ButtonFunction.tsx

@@ -0,0 +1,95 @@
+/*=============================================== ButtonIconFunction ===============================================*/
+
+import { forwardRef } from "react"
+import { Link } from "react-router-dom"
+import { Loader } from "../../"
+import { LibIcon } from "../LibIcon"
+import type { ILibLoader } from "../Loader/types"
+import { StyledButtonIcon } from "./styles"
+import type { ILibButtonIcon } from "./types"
+
+export const ButtonIconFunction = forwardRef<
+    HTMLButtonElement & HTMLAnchorElement,
+    ILibButtonIcon
+>(
+    (
+        {
+            "data-testid": testid,
+            as,
+            className,
+            showTooltip,
+            to,
+            href,
+            isLoading,
+            disabled,
+            "aria-disabled": ariaDisabled,
+            "aria-label": ariaLabel,
+            blank,
+            variant,
+            showBackgroundHover,
+            borderRadius,
+            color,
+            shadow,
+            size,
+            loaderVariant,
+            icon,
+            iconSize,
+            iconBaseUrl,
+            loaderBorderWidth,
+            ...rest
+        },
+        ref
+    ) => {
+        const loaderProps: Omit<ILibLoader, "variant" | "borderWidth"> = {
+            size: iconSize,
+            color: "gray",
+            "data-testid": testid && `${testid}.Loader`,
+            className: className && "Loader",
+        }
+
+        return (
+            <StyledButtonIcon
+                data-testid={
+                    showTooltip && testid ? `${testid}.Button` : testid
+                }
+                ref={ref}
+                as={as ? as : to ? Link : href ? "a" : "button"}
+                className={showTooltip && className ? "Button" : className}
+                aria-label={ariaLabel}
+                disabled={isLoading || disabled}
+                aria-disabled={ariaDisabled && ariaDisabled.toString()}
+                to={to === "prev" ? -1 : to}
+                href={href}
+                target={blank && "_blank"}
+                rel={blank && "noreferrer noopener"}
+                $variant={variant}
+                $showBackgroundHover={showBackgroundHover}
+                $borderRadius={borderRadius}
+                $color={color}
+                $shadow={shadow}
+                $size={size}
+                {...rest}
+            >
+                {isLoading ? (
+                    loaderVariant === 4 ? (
+                        <Loader variant={4} {...loaderProps} />
+                    ) : (
+                        <Loader
+                            variant={loaderVariant}
+                            borderWidth={loaderBorderWidth}
+                            {...loaderProps}
+                        />
+                    )
+                ) : (
+                    <LibIcon
+                        data-testid={testid && `${testid}.Icon`}
+                        className={className && "Icon"}
+                        icon={icon}
+                        size={iconSize}
+                        baseUrl={iconBaseUrl}
+                    />
+                )}
+            </StyledButtonIcon>
+        )
+    }
+)