@julseb-lib/react 0.0.61 → 0.0.64

package/dist/lib/components/Breadcrumbs/BreadcrumbsFn.tsx

@@ -0,0 +1,76 @@
+/*=============================================== BreadcrumbsFn ===============================================*/
+
+import { forwardRef, Fragment } from "react"
+import { uuid } from "@julseb-lib/utils"
+import { LibIcon } from "../LibIcon"
+import { ChevronRight } from "../../icons"
+import { StyledBreadcrumbs, SeparatorContainer } from "./styles"
+import type { ILibBreadcrumbs } from "./types"
+
+export const BreadcrumbsFn = forwardRef<
+    HTMLDivElement,
+    Omit<ILibBreadcrumbs, "items">
+>(
+    (
+        {
+            "data-testid": testid,
+            className,
+            as,
+            children,
+            linksColor = "primary",
+            activeColor = "currentColor",
+            gap = "xs",
+            separator = "slash",
+            separatorColor = "currentColor",
+            ...rest
+        },
+        ref
+    ) => {
+        return (
+            <StyledBreadcrumbs
+                data-testid={testid}
+                ref={ref}
+                as={as}
+                className={className}
+                $gap={gap}
+                $linkColor={linksColor}
+                $activeColor={activeColor}
+                {...rest}
+            >
+                {children?.map((child, i) => (
+                    <Fragment key={uuid()}>
+                        {child}
+
+                        {i !== children.length - 1 && (
+                            <SeparatorContainer
+                                data-testid={
+                                    testid && `${testid}.SeparatorContainer`
+                                }
+                                className={className && "SeparatorContainer"}
+                                $color={separatorColor}
+                            >
+                                {separator === "chevron" ? (
+                                    <ChevronRight
+                                        size={16}
+                                        data-testid={
+                                            testid &&
+                                            `${testid}.SeparatorContainer.Icon`
+                                        }
+                                        className={className && "Icon"}
+                                    />
+                                ) : separator === "slash" ? (
+                                    "/"
+                                ) : (
+                                    <LibIcon
+                                        icon={separator}
+                                        baseUrl={undefined}
+                                    />
+                                )}
+                            </SeparatorContainer>
+                        )}
+                    </Fragment>
+                ))}
+            </StyledBreadcrumbs>
+        )
+    }
+)

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

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

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

@@ -0,0 +1,64 @@
+/*=============================================== Breadcrumbs styles ===============================================*/
+
+import styled from "styled-components"
+import {
+    MEDIA,
+    FONT_SIZES,
+    FONT_WEIGHTS,
+    LINE_HEIGHTS,
+    Mixins,
+    TRANSITIONS,
+    setDefaultTheme,
+} from "../../"
+import type { LibAllColors, LibColorsHover, LibSpacers } from "../../types"
+
+const StyledBreadcrumbs = styled.nav<{
+    $linkColor: LibColorsHover
+    $activeColor: LibAllColors
+    $gap: LibSpacers
+}>`
+    color: ${({ theme, $activeColor }) =>
+        Mixins.AllColors($activeColor, theme)};
+    font-size: ${FONT_SIZES.BODY};
+    font-weight: ${FONT_WEIGHTS.REGULAR};
+    line-height: ${LINE_HEIGHTS.BODY};
+    ${({ $gap }) =>
+        Mixins.Flexbox({
+            $flexWrap: "wrap",
+            $gap,
+        })}
+
+    & > a {
+        text-decoration: none;
+        color: ${({ theme, $linkColor }) =>
+            Mixins.ColorsHoverDefault($linkColor, theme)};
+        transition: ${TRANSITIONS.SHORT};
+        font-weight: ${FONT_WEIGHTS.BLACK};
+
+        @media ${MEDIA.HOVER} {
+            &:hover {
+                color: ${({ theme, $linkColor }) =>
+                    Mixins.ColorsHoverHover($linkColor, theme)};
+            }
+
+            &:active {
+                color: ${({ theme, $linkColor }) =>
+                    Mixins.ColorsHoverActive($linkColor, theme)};
+            }
+        }
+    }
+`
+
+const SeparatorContainer = styled.span<{ $color: LibAllColors }>`
+    height: calc(${FONT_SIZES.BODY} * ${LINE_HEIGHTS.BODY});
+    line-height: ${LINE_HEIGHTS.BODY};
+    color: ${({ $color, theme }) => Mixins.AllColors($color, theme)};
+    ${Mixins.Flexbox({
+        $inline: true,
+        $alignItems: "center",
+    })};
+`
+
+setDefaultTheme([StyledBreadcrumbs, SeparatorContainer])
+
+export { StyledBreadcrumbs, SeparatorContainer }

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

@@ -0,0 +1,12 @@
+/*=============================================== Breadcrumbs sub components types ===============================================*/
+
+import type { LibBreadcrumbItem } from "../../types"
+import type { ILibBreadcrumbs } from "./types"
+
+// ! DO NOT EXPORT THOSE TYPES, ONLY USE THEM IN BREADCRUMBS COMPONENTS
+
+export interface ILibBreadcrumbItem
+    extends Pick<ILibBreadcrumbs, "data-testid" | "className"> {
+    item: LibBreadcrumbItem
+    index: number
+}

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

@@ -0,0 +1,31 @@
+/*=============================================== Breadcrumbs types ===============================================*/
+
+import type { ReactNode } from "react"
+import type {
+    LibAllColors,
+    LibColorsHover,
+    LibComponentBase,
+    LibSpacers,
+    LibBreadcrumbSeparator,
+    LibBreadcrumbItem,
+} from "../../types"
+
+interface ILibBreadcrumbsBase extends LibComponentBase<HTMLDivElement> {
+    linksColor?: LibColorsHover
+    activeColor?: LibAllColors
+    separatorColor?: LibAllColors
+    gap?: LibSpacers
+    separator?: LibBreadcrumbSeparator
+}
+
+interface BreadcrumbsWithItems extends ILibBreadcrumbsBase {
+    items: Array<LibBreadcrumbItem>
+    children?: never
+}
+
+interface BreadcrumbsWithChildren extends ILibBreadcrumbsBase {
+    items?: never
+    children?: Array<ReactNode>
+}
+
+export type ILibBreadcrumbs = BreadcrumbsWithItems | BreadcrumbsWithChildren

package/dist/lib/components/Burger/Burger.tsx

@@ -0,0 +1,59 @@
+/*=============================================== Burger component ===============================================*/
+
+import { forwardRef } from "react"
+import classNames from "classnames"
+import { StyledBurger } from "./styles"
+import type { ILibBurger } from "./types"
+
+/**
+ * @description Returns a Burger component
+ * @link https://documentation-components-react.vercel.app/components/burger
+ * @extends HTMLButtonElement
+ * @prop data-testid?: string
+ * @prop as?: ElementType
+ * @prop ref?: ForwardedRef<HTMLButtonElement>
+ * @prop isOpen: boolean
+ * @prop color?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background" | "currentColor"
+ * @prop width?: number
+ * @prop height?: number
+ * @prop noHover?: boolean
+ * @prop borderWidth?: number
+ */
+export const Burger = forwardRef<HTMLButtonElement, ILibBurger>(
+    (
+        {
+            "data-testid": testid,
+            as,
+            className,
+            isOpen,
+            color = "primary",
+            width = 32,
+            height = 24,
+            noHover,
+            borderWidth = 2,
+            "aria-label": ariaLabel = `${isOpen ? "Close" : "Open"} burger`,
+            ...rest
+        },
+        ref
+    ) => {
+        return (
+            <StyledBurger
+                data-testid={testid}
+                ref={ref}
+                as={as ? as : noHover ? "span" : "button"}
+                className={classNames(className, { Open: isOpen })}
+                aria-label={ariaLabel}
+                $noHover={noHover}
+                $borderWidth={borderWidth}
+                $color={color}
+                $height={height}
+                $width={width}
+                {...rest}
+            >
+                <span />
+                <span />
+                <span />
+            </StyledBurger>
+        )
+    }
+)

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

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

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

@@ -0,0 +1,93 @@
+/*=============================================== Burger styles ===============================================*/
+
+import styled, { css } from "styled-components"
+import { stringifyPx } from "@julseb-lib/utils"
+import { MEDIA, RADIUSES, TRANSITIONS, setDefaultTheme, Mixins } from "../../"
+import type { LibColorsHoverAndCurrent } from "../../types"
+
+const StyledBurger = styled.button<{
+    $color: LibColorsHoverAndCurrent
+    $width: number
+    $height: number
+    $noHover?: boolean
+    $borderWidth: number
+}>`
+    border: none;
+    background-color: transparent;
+    position: relative;
+    width: ${({ $width }) => stringifyPx($width)};
+    height: ${({ $height }) => stringifyPx($height)};
+    color: ${({ theme, $color }) => Mixins.ColorsHoverDefault($color, theme)};
+
+    ${({ $noHover, $color, theme }) => {
+        switch ($noHover) {
+            case true:
+                return css`
+                    cursor: inherit;
+                `
+            case false:
+            case undefined:
+                return css`
+                    @media ${MEDIA.HOVER} {
+                        &:hover {
+                            color: ${Mixins.ColorsHoverHover($color, theme)};
+                        }
+
+                        &:active {
+                            color: ${Mixins.ColorsHoverActive($color, theme)};
+                        }
+                    }
+                `
+            default:
+                return null
+        }
+    }}
+
+    span {
+        display: block;
+        background-color: currentColor;
+        width: 100%;
+        height: ${({ $borderWidth }) => stringifyPx($borderWidth)};
+        border-radius: ${RADIUSES.ROUND};
+        position: absolute;
+        left: 0;
+        transition: ${TRANSITIONS.SHORT};
+
+        &:first-child {
+            top: 0;
+        }
+
+        &:nth-child(2) {
+            top: calc(
+                50% - ${({ $borderWidth }) => stringifyPx($borderWidth)} / 2
+            );
+        }
+
+        &:last-child {
+            bottom: 0;
+        }
+    }
+
+    &.Open span {
+        &:first-child {
+            top: 45%;
+            transform: rotate(45deg);
+        }
+
+        &:nth-child(2) {
+            top: calc(
+                50% - ${({ $borderWidth }) => stringifyPx($borderWidth)} / 2
+            );
+            width: 0;
+        }
+
+        &:last-child {
+            bottom: 45%;
+            transform: rotate(-45deg);
+        }
+    }
+`
+
+setDefaultTheme([StyledBurger])
+
+export { StyledBurger }

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

@@ -0,0 +1,13 @@
+/*=============================================== Burger types ===============================================*/
+
+import type { LibComponentBase, LibColorsHoverAndCurrent } from "../../types"
+
+export interface ILibBurger extends LibComponentBase<HTMLButtonElement> {
+    isOpen: boolean
+    color?: LibColorsHoverAndCurrent
+    width?: number
+    height?: number
+    noHover?: boolean
+    borderWidth?: number
+    children?: never
+}

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

@@ -0,0 +1,134 @@
+/*=============================================== Button component ===============================================*/
+
+import { forwardRef } 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"
+
+/**
+ * @description Returns a Button component
+ * @link https://documentation-components-react.vercel.app/components/button
+ * @extends HTMLButtonElement & HTMLAnchorElement & LibButtonLinkBlank
+ * @prop data-testid?: string
+ * @prop as?: ElementType
+ * @prop ref?: ForwardedRef<HTMLButtonElement & HTMLAnchorElement>
+ * @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 color?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"
+ * @prop shadow?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | { default: "xxl" | "xl" | "l" | "m" | "s" | "xs"; hover: "xxl" | "xl" | "l" | "m" | "s" | "xs"; active: "xxl" | "xl" | "l" | "m" | "s" | "xs" }
+ * @prop borderRadius?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | { topLeft?: LibRadiuses; topRight?: LibRadiuses; bottomLeft?: LibRadiuses; bottomRight?: LibRadiuses }
+ * @prop size?: "default" | "small"
+ * @prop icons?: { left?: string | JSX.Element; right?: string | JSX.Element }
+ * @prop iconSizes?: { left?: number; right?: number }
+ * @prop iconBaseUrl?: string
+ * @prop isLoading?: boolean
+ * @prop gap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" => only if icons or isLoading are defined
+ * @prop variant?: "plain" | "outline" | "ghost" | "transparent"
+ * @prop noPadding?: boolean => only if variant is set to transparent
+ * @prop loaderVariant?: 1 | 2 | 3 | 4 => only if isLoading is defined
+ */
+export const Button = forwardRef<
+    HTMLButtonElement & HTMLAnchorElement,
+    ILibButton
+>(
+    (
+        {
+            "data-testid": testid,
+            "aria-label": ariaLabel = "Button",
+            disabled,
+            "aria-disabled": ariaDisabled = disabled,
+            as,
+            className,
+            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
+        },
+        ref
+    ) => {
+        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}
+                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} {...loaderProps} />
+                    ) : (
+                        <Loader
+                            variant={loaderVariant}
+                            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/index.ts

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

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

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

@@ -0,0 +1,12 @@
+/*=============================================== Button sub components types ===============================================*/
+
+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

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