@julseb-lib/react 0.0.50 → 0.0.52

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

@@ -1,158 +0,0 @@
-/*=============================================== 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

@@ -1,89 +0,0 @@
-/*=============================================== 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

@@ -1,99 +0,0 @@
-/*=============================================== 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

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

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

@@ -1,91 +0,0 @@
-/*=============================================== 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

@@ -1,42 +0,0 @@
-/*=============================================== 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

@@ -1,36 +0,0 @@
-/*=============================================== 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

@@ -1,95 +0,0 @@
-/*=============================================== 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>
-        )
-    }
-)