@julseb-lib/react 0.1.3 → 0.1.4

package/dist/lib/components/Badge/Badge.tsx

@@ -1,99 +0,0 @@
-import type { FC } from "react"
-import classNames from "classnames"
-import { getRandomString } from "@julseb-lib/utils"
-import { roundIconSize, appendStyles } from "../../lib-utils"
-import { LibIcon } from "../LibIcon"
-import { StyledBadge } from "./styles"
-import type { ILibBadge } from "./types"
-
-/**
- * Badge component for displaying a small count, icon, or status indicator.
- *
- * @component
- * @param {Object} props - Badge props.
- * @param {string} [props.data-testid] - Test id for testing purposes.
- * @param {ElementType} [props.as] - Custom element type to render as.
- * @param {Ref<HTMLSpanElement>} [props.ref] - Ref forwarded to the root element.
- * @param {string} [props.id] - HTML id attribute.
- * @param {number} [props.size=16] - Size of the badge.
- * @param {string|JSX.Element} [props.icon] - Icon to display in the badge.
- * @param {number} [props.iconSize] - Size of the icon (if icon is defined).
- * @param {string} [props.iconBaseUrl] - Base URL for the icon (if icon is defined).
- * @param {number} [props.number] - Number to display (if icon is not defined).
- * @param {string} [props.backgroundColor="primary"] - Background color of the badge.
- * @param {string} [props.contentColor] - Content color of the badge.
- * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | Object} [props.borderRadius="round"] - Border radius for the badge.
- * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" | Object} [props.padding] - Padding for the badge.
- * @param {string} [props.className] - Additional class names.
- * @returns {JSX.Element} The rendered Badge component.
- *
- * @example
- * <Badge number={5} />
- * <Badge icon="star" backgroundColor="warning" />
- * <Badge icon={<CustomIcon />} size={24} />
- */
-export const Badge: FC<ILibBadge> = ({
-	"data-testid": testid,
-	className,
-	ref,
-	id,
-	as,
-	size = 16,
-	icon,
-	iconSize = roundIconSize(size),
-	iconBaseUrl,
-	number,
-	backgroundColor = "primary",
-	contentColor = backgroundColor === "white"
-		? "primary"
-		: backgroundColor === "black"
-		? "white"
-		: backgroundColor === "background"
-		? "font"
-		: "background",
-	borderRadius = "round",
-	padding = {
-		leftRight: "xs",
-	},
-	...rest
-}) => {
-	const randomClass = getRandomString(10, true)
-	const withClass = className?.split(" ")[0] || randomClass
-
-	appendStyles(`
-            ${id ? `#${id}` : `.${withClass}`} {
-                --badge-size: ${size}px;
-                --badge-font-size: ${roundIconSize(size)}px;
-            }
-        `)
-
-	return (
-		<StyledBadge
-			data-testid={testid}
-			ref={ref}
-			as={as}
-			className={classNames(className, randomClass)}
-			id={id}
-			$backgroundColor={backgroundColor}
-			$contentColor={contentColor}
-			$borderRadius={borderRadius}
-			$padding={padding}
-			$hasChildren={!!(icon || number)}
-			$childrenLength={number?.toString().length}
-			{...rest}
-		>
-			{icon && (
-				<LibIcon
-					data-testid={testid && `${testid}.Icon`}
-					className={className && "Icon"}
-					icon={icon}
-					color={contentColor}
-					size={iconSize}
-					baseUrl={iconBaseUrl}
-				/>
-			)}
-
-			{number}
-		</StyledBadge>
-	)
-}

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

@@ -1,39 +0,0 @@
-import styled, { css } from "styled-components"
-import { FONT_WEIGHTS, Mixins, setDefaultTheme } from "../../"
-import type { LibAllColors, ILibPadding, ILibRadius } from "../../types"
-
-const StyledBadge = styled.span<{
-    $backgroundColor: LibAllColors
-    $contentColor: LibAllColors
-    $borderRadius?: ILibRadius
-    $padding?: ILibPadding
-    $hasChildren?: boolean
-    $childrenLength?: number
-}>`
-    min-width: var(--badge-size);
-    height: var(--badge-size);
-    background-color: ${({ $backgroundColor, theme }) =>
-        Mixins.AllColors($backgroundColor, theme)};
-    color: ${({ $contentColor, theme }) =>
-        Mixins.AllColors($contentColor, theme)};
-    font-size: var(--badge-font-size);
-    font-weight: ${FONT_WEIGHTS.BLACK};
-    ${Mixins.Flexbox({
-        $inline: true,
-        $alignItems: "center",
-        $justifyContent: "center",
-    })}
-    ${({ $borderRadius }) => Mixins.BorderRadius($borderRadius)};
-
-    ${({ $hasChildren, $childrenLength, $padding }) =>
-        $hasChildren &&
-        $childrenLength &&
-        $childrenLength > 2 &&
-        css`
-            ${Mixins.Padding($padding)}
-        `}
-`
-
-setDefaultTheme([StyledBadge])
-
-export { StyledBadge }

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

@@ -1,32 +0,0 @@
-import type {
-    LibAllColors,
-    LibComponentBase,
-    ILibPadding,
-    ILibRadius,
-    LibIcon,
-} from "../../types"
-
-interface ILibBadgeBase extends LibComponentBase<HTMLSpanElement> {
-    size?: number
-    backgroundColor?: LibAllColors
-    contentColor?: LibAllColors
-    borderRadius?: ILibRadius
-    padding?: ILibPadding
-    children?: never
-}
-
-interface BadgeWithIcon extends ILibBadgeBase {
-    icon?: LibIcon
-    iconSize?: number
-    iconBaseUrl?: string
-    number?: never
-}
-
-interface BadgeWithNumber extends ILibBadgeBase {
-    icon?: never
-    iconSize?: never
-    iconBaseUrl?: never
-    number?: number
-}
-
-export type ILibBadge = BadgeWithIcon | BadgeWithNumber

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

@@ -1,41 +0,0 @@
-import type { FC } from "react"
-import { Link } from "react-router-dom"
-import { uuid } from "@julseb-lib/utils"
-import type { ILibBreadcrumbItem } from "./subtypes"
-
-export const BreadcrumbItem: FC<ILibBreadcrumbItem> = ({
-    "data-testid": testid,
-    className,
-    item,
-    index,
-}) => {
-    if (item.to)
-        return (
-            <Link
-                to={item.to}
-                data-testid={
-                    item["data-testid"] || (testid && `${testid}.Link.${index}`)
-                }
-                className={item.className || (className && "Link")}
-                id={item.id}
-                ref={item.ref}
-                key={uuid()}
-            >
-                {item.text}
-            </Link>
-        )
-
-    return (
-        <span
-            key={uuid()}
-            data-testid={
-                item["data-testid"] || (testid && `${testid}.Text.${index}`)
-            }
-            className={item.className || (className && "Text")}
-            id={item.id}
-            ref={item.ref}
-        >
-            {item.text}
-        </span>
-    )
-}

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

@@ -1,62 +0,0 @@
-import type { FC } from "react"
-import { uuid } from "@julseb-lib/utils"
-import { BreadcrumbsFn } from "./BreadcrumbsFn"
-import { BreadcrumbItem } from "./BreadcrumbItem"
-import type { ILibBreadcrumbs } from "./types"
-
-/**
- * Breadcrumbs component for displaying navigation hierarchy.
- *
- * @component
- * @param {Object} props - Breadcrumbs 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<LibBreadcrumbItem>} [props.items] - Array of breadcrumb items (used if children is not provided).
- * @param {ReactNode} [props.children] - Breadcrumb items as children (used if items is not provided).
- * @param {"primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"} [props.linksColor] - Color for breadcrumb links.
- * @param {string} [props.activeColor] - Color for the active breadcrumb.
- * @param {string} [props.separatorColor] - Color for the separator.
- * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.gap] - Gap between breadcrumb items.
- * @param {"slash" | "chevron" | JSX.Element} [props.separator] - Separator between breadcrumb items.
- * @returns {JSX.Element} The rendered Breadcrumbs component.
- *
- * @example
- * <Breadcrumbs
- *   items={[
- *     { text: "Home", to: "/" },
- *     { text: "Library", to: "/library" },
- *     { text: "Data" }
- *   ]}
- *   linksColor="primary"
- *   separator="chevron"
- * />
- */
-export const Breadcrumbs: FC<ILibBreadcrumbs> = ({
-    "data-testid": testid,
-    ref,
-    className,
-    children,
-    items,
-    ...rest
-}) => {
-    return (
-        <BreadcrumbsFn
-            data-testid={testid}
-            ref={ref}
-            className={className}
-            {...rest}
-        >
-            {items?.map((item, i) => (
-                <BreadcrumbItem
-                    key={uuid()}
-                    data-testid={testid}
-                    className={className}
-                    item={item}
-                    index={i}
-                />
-            )) ?? children}
-        </BreadcrumbsFn>
-    )
-}

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

@@ -1,64 +0,0 @@
-import { Fragment, type FC } 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: FC<Omit<ILibBreadcrumbs, "items">> = ({
-    "data-testid": testid,
-    className,
-    as,
-    ref,
-    children,
-    linksColor = "primary",
-    activeColor = "currentColor",
-    gap = "xs",
-    separator = "slash",
-    separatorColor = "currentColor",
-    ...rest
-}) => {
-    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/styles.tsx

@@ -1,62 +0,0 @@
-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,10 +0,0 @@
-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,29 +0,0 @@
-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,62 +0,0 @@
-import type { FC } from "react"
-import classNames from "classnames"
-import { StyledBurger } from "./styles"
-import type { ILibBurger } from "./types"
-
-/**
- * Burger component for toggling menus, typically used in navigation headers.
- *
- * @component
- * @param {Object} props - Burger props.
- * @param {string} [props.data-testid] - Test id for testing purposes.
- * @param {ElementType} [props.as] - Custom element type to render as.
- * @param {Ref<HTMLButtonElement>} [props.ref] - Ref forwarded to the button element.
- * @param {string} [props.className] - Additional class names.
- * @param {boolean} props.isOpen - Whether the burger is open (active) or closed.
- * @param {"primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background" | "currentColor"} [props.color="primary"] - Color of the burger lines.
- * @param {number} [props.width=32] - Width of the burger icon.
- * @param {number} [props.height=24] - Height of the burger icon.
- * @param {boolean} [props.noHover] - If true, disables hover effect.
- * @param {number} [props.borderWidth=2] - Width of the burger lines.
- * @param {string} [props.aria-label] - Accessible label for the button.
- * @returns {JSX.Element} The rendered Burger component.
- *
- * @example
- * <Burger isOpen={menuOpen} onClick={toggleMenu} />
- */
-export const Burger: FC<ILibBurger> = ({
-	"data-testid": testid,
-	as,
-	ref,
-	className,
-	isOpen,
-	color = "primary",
-	width = 32,
-	height = 24,
-	noHover,
-	borderWidth = 2,
-	"aria-label": ariaLabel = `${isOpen ? "Close" : "Open"} burger`,
-	role = "button",
-	...rest
-}) => {
-	return (
-		<StyledBurger
-			data-testid={testid}
-			ref={ref}
-			as={as ? as : noHover ? "span" : "button"}
-			className={classNames(className, { Open: isOpen })}
-			aria-label={ariaLabel}
-			role={role}
-			$noHover={noHover}
-			$borderWidth={borderWidth}
-			$color={color}
-			$height={height}
-			$width={width}
-			{...rest}
-		>
-			<span />
-			<span />
-			<span />
-		</StyledBurger>
-	)
-}

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

@@ -1,91 +0,0 @@
-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,11 +0,0 @@
-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
-}