@julseb-lib/react 0.1.2 → 0.1.4

package/dist/lib/components/Button/Button.tsx

@@ -1,136 +0,0 @@
-import type { FC } from "react"
-import { Link } from "react-router-dom"
-import { Loader } from "../../"
-import { LibIcon } from "../LibIcon"
-import type { ILibLoader } from "../Loader/types"
-import { StyledButton } from "./styles"
-import type { ILibButton } from "./types"
-
-/**
- * Button component for actions, navigation, or links, supporting icons, loading state, and variants.
- *
- * @component
- * @param {Object} props - Button props.
- * @param {string} [props.data-testid] - Test id for testing purposes.
- * @param {string} [props.aria-label="Button"] - Accessible label for the button.
- * @param {boolean} [props.disabled] - Disables the button (only if `onClick` is defined).
- * @param {ElementType} [props.as] - Custom element type to render as.
- * @param {Ref<HTMLButtonElement & HTMLAnchorElement>} [props.ref] - Ref forwarded to the root element.
- * @param {string} [props.className] - Additional class names.
- * @param {ReactNode} [props.children] - Button content.
- * @param {string} [props.color="primary"] - Button color.
- * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | object} [props.shadow] - Shadow style.
- * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | object} [props.borderRadius] - Border radius.
- * @param {"default" | "small"} [props.size="default"] - Button size.
- * @param {Object} [props.icons] - Icons for left and right ({ left, right }).
- * @param {Object} [props.iconSizes] - Icon sizes for left and right ({ left, right }).
- * @param {string} [props.iconBaseUrl] - Base URL for icons.
- * @param {boolean} [props.isLoading] - Show loading indicator.
- * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.gap="xs"] - Gap between content and icons/loader.
- * @param {"plain" | "outline" | "ghost" | "transparent"} [props.variant="plain"] - Button visual variant.
- * @param {boolean} [props.noPadding] - Remove padding (only if variant is transparent).
- * @param {1 | 2 | 3 | 4} [props.loaderVariant] - Loader variant (only if isLoading is true).
- * @param {string} [props.to] - React Router link target (only if `onClick` and `href` are not defined).
- * @param {string} [props.href] - Anchor link target (only if `onClick` and `to` are not defined).
- * @param {boolean} [props.blank] - Open link in new tab (only if `to` or `href` are defined).
- * @returns {JSX.Element} The rendered Button component.
- *
- * @example
- * <Button color="success" size="small" icons={{ left: <CheckIcon /> }}>
- *   Confirm
- * </Button>
- */
-export const Button: FC<ILibButton> = ({
-	"data-testid": testid,
-	"aria-label": ariaLabel = "Button",
-	disabled,
-	"aria-disabled": ariaDisabled = disabled,
-	as,
-	ref,
-	className,
-	role = "button",
-	children,
-	color = "primary",
-	shadow,
-	size = "default",
-	borderRadius = size === "small" ? "s" : "m",
-	icons,
-	iconSizes,
-	iconBaseUrl,
-	gap = "xs",
-	variant = "plain",
-	noPadding,
-	isLoading,
-	loaderVariant,
-	to,
-	href,
-	blank,
-	...rest
-}) => {
-	const loaderProps: Omit<ILibLoader, "variant" | "borderWidth"> = {
-		size: size === "small" ? 14 : 16,
-		color: "gray",
-		"data-testid": testid && `${testid}.Loader`,
-		className: "Loader",
-	}
-
-	const defaultIconSize = size === "small" ? 14 : 16
-
-	return (
-		<StyledButton
-			data-testid={testid}
-			ref={ref}
-			as={as ? as : to ? Link : href ? "a" : "button"}
-			to={to === "prev" ? -1 : to}
-			role={role}
-			href={href}
-			className={className}
-			aria-label={ariaLabel}
-			aria-disabled={ariaDisabled}
-			disabled={isLoading || disabled}
-			target={blank && "_blank"}
-			rel={blank && "noreferrer noopener"}
-			$color={color}
-			$shadow={shadow}
-			$borderRadius={borderRadius}
-			$size={size}
-			$gap={gap}
-			$variant={variant}
-			$noPadding={noPadding}
-			{...rest}
-		>
-			{icons?.left && !isLoading && (
-				<LibIcon
-					icon={icons.left}
-					data-testid={testid && `${testid}.IconLeft`}
-					className={className && "IconLeft"}
-					size={iconSizes?.left || defaultIconSize}
-					baseUrl={iconBaseUrl}
-				/>
-			)}
-
-			{isLoading &&
-				(loaderVariant === 4 ? (
-					<Loader variant={4 as any} {...loaderProps} />
-				) : (
-					<Loader
-						variant={loaderVariant as any}
-						borderWidth={2}
-						{...loaderProps}
-					/>
-				))}
-
-			{children}
-
-			{icons?.right && (
-				<LibIcon
-					icon={icons.right}
-					data-testid={testid && `${testid}.IconRight`}
-					className={className && "IconRight"}
-					size={iconSizes?.right || defaultIconSize}
-					baseUrl={iconBaseUrl}
-				/>
-			)}
-		</StyledButton>
-	)
-}

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

@@ -1,30 +0,0 @@
-import styled from "styled-components"
-import {
-    FONT_FAMILIES,
-    FONT_SIZES,
-    FONT_WEIGHTS,
-    Mixins,
-    SPACERS,
-    setDefaultTheme,
-} from "../../"
-import { ButtonMixin } from "../ComponentsMixins"
-import type { ILibButtonStyle } from "./subtypes"
-
-const StyledButton = styled.button<ILibButtonStyle>`
-    min-width: 48px;
-    font-family: ${FONT_FAMILIES.BODY};
-    font-weight: ${FONT_WEIGHTS.BLACK};
-    font-size: ${({ $size }) =>
-        $size === "small" ? FONT_SIZES.SMALL : FONT_SIZES.BODY};
-    padding: ${({ $size, $noPadding }) => {
-        if ($noPadding) return "0"
-        if ($size == "small") return `${SPACERS.XXS} ${SPACERS.XS}`
-        return `${SPACERS.XS} ${SPACERS.S}`
-    }};
-    gap: ${({ $gap }) => Mixins.Spacer($gap)};
-    ${ButtonMixin}
-`
-
-setDefaultTheme([StyledButton])
-
-export { StyledButton }

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

@@ -1,10 +0,0 @@
-import type { LibButtonSize, LibSpacers } from "../../types"
-import type { ILibButtonMixin } from "../ComponentsMixins"
-
-// ! DO NOT EXPORT THOSE TYPES, ONLY USE THEM IN BUTTON COMPONENTS
-
-export interface ILibButtonStyle extends ILibButtonMixin {
-    $size?: LibButtonSize
-    $gap?: LibSpacers
-    $noPadding?: boolean
-}

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

@@ -1,70 +0,0 @@
-import type { ButtonHTMLAttributes } from "react"
-import type {
-    LibComponentBase,
-    LibButtonVariant,
-    LibButtonLinkBlank,
-    LibColorsHover,
-    ILibBoxShadow,
-    ILibRadius,
-    LibIcon,
-    LibSpacers,
-    LibButtonSize,
-    LibLoaderVariant,
-} from "../../types"
-
-type ILibButtonBase = LibComponentBase<HTMLButtonElement & HTMLAnchorElement> &
-    ButtonHTMLAttributes<HTMLButtonElement & HTMLAnchorElement> &
-    LibButtonLinkBlank & {
-        color?: LibColorsHover
-        shadow?: ILibBoxShadow
-        borderRadius?: ILibRadius
-        size?: LibButtonSize
-    }
-
-type ButtonWithoutIcon = ILibButtonBase & {
-    icons?: undefined
-    iconSizes?: never
-    iconBaseUrl?: never
-    isLoading?: undefined | null
-    gap?: never
-}
-
-type ButtonWithIcon = ILibButtonBase & {
-    icons?: {
-        left?: LibIcon
-        right?: LibIcon
-    }
-    iconSizes?: {
-        left?: number
-        right?: number
-    }
-    iconBaseUrl?: string
-    isLoading?: boolean
-    gap?: LibSpacers
-}
-
-type ButtonIcon = ButtonWithoutIcon | ButtonWithIcon
-
-type ButtonVariantWithBackground = ButtonIcon & {
-    variant?: Extract<LibButtonVariant, "plain" | "outline" | "ghost">
-    noPadding?: never
-}
-
-type ButtonVariantTransparent = ButtonIcon & {
-    variant?: Extract<LibButtonVariant, "transparent">
-    noPadding?: boolean
-}
-
-type ButtonVariant = ButtonVariantWithBackground | ButtonVariantTransparent
-
-type ButtonLoading = ButtonVariant & {
-    isLoading?: boolean
-    loaderVariant?: LibLoaderVariant
-}
-
-type ButtonNotLoading = ButtonVariant & {
-    isLoading?: undefined | null
-    loaderVariant?: never
-}
-
-export type ILibButton = ButtonLoading | ButtonNotLoading

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

@@ -1,136 +0,0 @@
-import { useState, Fragment, type FC } 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"
-
-/**
- * ButtonGroup component for grouping buttons or toggles with shared styles and optional separators.
- *
- * @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.
- *
- * @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: 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 [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,76 +0,0 @@
-import type { FC } 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: 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,
-    }
-
-    // @ts-ignore
-    const filteredButtonRest = filterObject(button, ([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,88 +0,0 @@
-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: 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
-            })
-        }
-    }
-
-    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/styles.tsx

@@ -1,89 +0,0 @@
-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,43 +0,0 @@
-import type { Ref } from "react"
-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"
-        | "ref"
-    > {
-    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
-    ref?: Ref<HTMLLabelElement>
-}