@julseb-lib/react 0.0.56 → 0.0.57

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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