@julseb-lib/react 0.0.51 → 0.0.52

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

@@ -1,72 +0,0 @@
-/*=============================================== Button types ===============================================*/
-
-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/src/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/src/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/src/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/src/lib/components/ButtonGroup/__preview__/ButtonGroup.preview.tsx

@@ -1,129 +0,0 @@
-/*=============================================== ButtonGroupPreview ===============================================*/
-
-import { capitalize } from "@julseb-lib/utils"
-import { ButtonGroup } from "../../../"
-import type {
-    LibButtonGroupButtonItem,
-    LibButtonGroupToggle,
-} from "../../../types"
-import type { ILibButtonGroup } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-const buttons: Array<LibButtonGroupButtonItem> = [
-    {
-        icons: { only: "arrow-left" },
-        disabled: true,
-    },
-    {
-        text: "Button",
-        onClick: () => alert("Clicked"),
-    },
-    {
-        text: "Button",
-        onClick: () => console.log("Clicked"),
-    },
-    {
-        text: "Link",
-        href: "http://google.com",
-        blank: true,
-    },
-    {
-        text: "Router Link",
-        to: "/",
-    },
-    {
-        icons: { only: "arrow-right" },
-        to: "/",
-    },
-]
-
-const toggles: Array<LibButtonGroupToggle> = [
-    { id: "bold", icon: "bold", value: false },
-    { id: "italic", icon: "italic", value: false },
-    { id: "strikethrough", icon: "strikethrough", value: false },
-    { id: "underline", icon: "underline", value: false },
-]
-
-const textToggles: Array<LibButtonGroupToggle> = toggles.map(t => ({
-    id: `text-${t.id}`,
-    text: capitalize(t.icon?.toString() ?? ""),
-    value: t.value,
-}))
-
-export const buttonGroupPreview: ComponentPreview<ILibButtonGroup> = {
-    name: "ButtonGroup",
-    component: ButtonGroup,
-    category: "components",
-    import: "ButtonGroup",
-    additionalImports: null,
-    optionalImports: null,
-    propsImport: "ILibButtonGroup",
-    additionalTypeImports: ["LibButtonGroupItem"],
-    extends: ["HTMLDivElement"],
-    previews: [
-        {
-            previewTitle: "Default",
-            props: { buttons, "data-testid": "testid", className: "className" },
-        },
-        {
-            previewTitle: "Color",
-            props: {
-                "data-testid": "testid",
-                className: "className",
-                buttons,
-                color: "secondary",
-            },
-        },
-        {
-            previewTitle: "Variant",
-            props: {
-                "data-testid": "testid",
-                className: "className",
-                buttons,
-                variant: "ghost",
-            },
-        },
-        {
-            previewTitle: "Size",
-            props: {
-                "data-testid": "testid",
-                className: "className",
-                buttons,
-                variant: "transparent",
-                size: "small",
-            },
-        },
-        {
-            previewTitle: "With toggles",
-            props: {
-                "data-testid": "testid",
-                className: "className",
-                toggles,
-                name: "toggles",
-            },
-        },
-        {
-            previewTitle: "With multi toggles",
-            props: {
-                "data-testid": "testid",
-                className: "className",
-                toggles: toggles.map(t => ({ ...t, id: `multi-${t.id}` })),
-                name: "multi-toggles",
-                toggleType: "multi",
-                variant: "ghost",
-                color: "secondary",
-            },
-        },
-        {
-            previewTitle: "With text toggles",
-            props: {
-                "data-testid": "testid",
-                className: "className",
-                toggles: textToggles,
-                name: "text-toggles",
-                variant: "transparent",
-                size: "small",
-            },
-        },
-    ],
-}