@julseb-lib/react 0.1.3 → 0.1.4

package/dist/lib/components/Hr/Hr.tsx

@@ -1,52 +0,0 @@
-import type { FC } from "react"
-import classNames from "classnames"
-import { StyledHr } from "./styles"
-import type { ILibHr } from "./types"
-
-/**
- * Hr component for rendering a horizontal rule with customizable color, width, margin, and rounded corners.
- *
- * @component
- * @extends HTMLHRElement
- * @param {Object} props - Hr props.
- * @param {string} [props.data-testid] - Test id for testing purposes.
- * @param {ElementType} [props.as] - Custom element type to render as.
- * @param {ForwardedRef<HTMLHRElement>} [props.ref] - Ref forwarded to the root element.
- * @param {number} [props.height=1] - Height of the horizontal rule.
- * @param {string|number} [props.maxWidth="100%"] - Maximum width of the horizontal rule.
- * @param {string} [props.color="gray-200"] - Any color from the library.
- * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" | "auto" | "0 auto" | { left?: LibSpacers | "auto"; top?: LibSpacers | "auto"; right?: LibSpacers | "auto"; bottom?: LibSpacers | "auto"; leftRight?: LibSpacers | "auto"; topBottom?: LibSpacers | "auto" }} [props.margin="0 auto"] - Margin for the horizontal rule.
- * @param {boolean} [props.isRounded] - Whether the horizontal rule has rounded corners.
- * @param {string} [props.className] - Additional class names.
- * @returns {JSX.Element} The rendered Hr component.
- *
- * @see https://documentation-components-react.vercel.app/components/hr
- * @example
- * <Hr color="primary" height={2} maxWidth={200} margin="l" isRounded />
- */
-export const Hr: FC<ILibHr> = ({
-    "data-testid": testid,
-    as,
-    ref,
-    className,
-    height = 1,
-    maxWidth = "100%",
-    color = "gray-200",
-    margin = "0 auto",
-    isRounded,
-    ...rest
-}) => {
-    return (
-        <StyledHr
-            data-testid={testid}
-            ref={ref}
-            as={as}
-            className={classNames(className, { Rounded: isRounded })}
-            $height={height}
-            $maxWidth={maxWidth}
-            $color={color}
-            $margin={margin}
-            {...rest}
-        />
-    )
-}

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

@@ -1,27 +0,0 @@
-import styled from "styled-components"
-import { stringifyPx } from "@julseb-lib/utils"
-import { setDefaultTheme, Mixins, RADIUSES } from "../../"
-import type { LibAllColors, ILibMargin } from "../../types"
-
-const StyledHr = styled.hr<{
-    $color: LibAllColors
-    $height: number
-    $maxWidth: string | number
-    $margin?: ILibMargin
-}>`
-    display: block;
-    width: 100%;
-    max-width: ${({ $maxWidth }) => stringifyPx($maxWidth)};
-    border: none;
-    background-color: ${({ theme, $color }) => Mixins.AllColors($color, theme)};
-    height: ${({ $height }) => stringifyPx($height)};
-    ${({ $margin }) => Mixins.Margin($margin)}
-
-    &.Rounded {
-        border-radius: ${RADIUSES.ROUND};
-    }
-`
-
-setDefaultTheme([StyledHr])
-
-export { StyledHr }

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

@@ -1,10 +0,0 @@
-import type { LibAllColors, LibComponentBase, ILibMargin } from "../../types"
-
-export interface ILibHr extends LibComponentBase<HTMLHRElement> {
-    height?: number
-    maxWidth?: string | number
-    color?: LibAllColors
-    margin?: ILibMargin
-    isRounded?: boolean
-    children?: never
-}

package/dist/lib/components/Icon/Icon.tsx

@@ -1,42 +0,0 @@
-import type { FC } from "react"
-import { StyledIcon } from "./styles"
-import type { ILibIcon } from "./types"
-
-/**
- * Icon component for rendering SVG icons from the `/public/icons` folder.
- *
- * @component
- * @extends Props from react-inlinesvg
- * @param {Object} props - Icon props.
- * @param {string} [props.data-testid] - Test id for testing purposes.
- * @param {ForwardedRef<SVGElement>} [props.ref] - Ref forwarded to the SVG element.
- * @param {string} props.src - Icon name (SVG file name without extension).
- * @param {number} [props.size=32] - Size of the icon.
- * @param {string} [props.color="currentColor"] - Any color from the library.
- * @param {string} [props.baseURL="/icons"] - Base URL for the icon files.
- * @returns {JSX.Element} The rendered Icon component.
- *
- * @see https://documentation-components-react.vercel.app/components/icon
- * @example
- * <Icon src="star" size={24} color="primary" />
- */
-export const Icon: FC<ILibIcon> = ({
-    "data-testid": testid,
-    ref,
-    src,
-    size = 32,
-    color = "currentColor",
-    baseURL = "/icons",
-    ...rest
-}) => {
-    return (
-        <StyledIcon
-            data-testid={testid}
-            innerRef={ref}
-            src={`${baseURL}/${src}.svg`}
-            $size={size}
-            $color={color}
-            {...rest}
-        />
-    )
-}

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

@@ -1 +0,0 @@
-export * from "./Icon"

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

@@ -1,19 +0,0 @@
-import styled from "styled-components"
-import SVG from "react-inlinesvg"
-import { stringifyPx } from "@julseb-lib/utils"
-import { setDefaultTheme, Mixins } from "../../"
-import type { LibAllColors } from "../../types"
-
-const StyledIcon = styled(SVG)<{ $size: number; $color: LibAllColors }>`
-    width: ${({ $size }) => stringifyPx($size)};
-    height: ${({ $size }) => stringifyPx($size)};
-    fill: ${({ theme, $color }) => Mixins.AllColors($color, theme)};
-
-    path {
-        fill: ${({ theme, $color }) => Mixins.AllColors($color, theme)};
-    }
-`
-
-setDefaultTheme([StyledIcon])
-
-export { StyledIcon }

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

@@ -1,13 +0,0 @@
-import type { Props as SVGProps } from "react-inlinesvg"
-import type { LibAllColors } from "../../types"
-import type { Ref } from "react"
-
-export interface ILibIcon extends SVGProps {
-    "data-testid"?: string
-    ref?: Ref<SVGElement>
-    src: string
-    size?: number
-    color?: LibAllColors
-    baseUrl?: string
-    children?: never
-}

package/dist/lib/components/IconMenu/IconMenu.tsx

@@ -1,148 +0,0 @@
-import { useState, useRef, type FC } from "react"
-import classNames from "classnames"
-import { Burger, useClickOutside, useMergeRefs } from "../../"
-import { IconMenuItem } from "./IconMenuItem"
-import {
-    StyledIconMenu,
-    OpenButton,
-    OpenIcon,
-    DEFAULT_BUTTON_SIZE,
-} from "./styles"
-import type { ILibIconMenu } from "./types"
-
-/**
- * IconMenu component for displaying a menu of icon buttons with flexible direction, positioning, and tooltips.
- *
- * @component
- * @extends HTMLDivElement
- * @param {Object} props - IconMenu props.
- * @param {string} [props.data-testid] - Test id for testing purposes.
- * @param {ElementType} [props.as] - Custom element type to render as.
- * @param {ForwardedRef<HTMLDivElement>} [props.ref] - Ref forwarded to the root element.
- * @param {Array<LibIconMenuItem>} [props.items] - Array of menu items (used if children is not provided).
- * @param {ReactNode} [props.children] - Custom menu content (used if items is not provided).
- * @param {"left" | "up" | "right" | "down"} [props.direction="right"] - Direction in which the menu appears.
- * @param {"primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"} [props.color="primary"] - Color for the menu and icons.
- * @param {"relative" | "absolute" | "fixed" | Object} [props.position] - Positioning for the menu container.
- * @param {boolean} [props.hideTooltips] - Hide tooltips for menu items.
- * @param {"plain" | "transparent" | "ghost"} [props.buttonsVariant] - Button variant for menu items.
- * @param {string} [props.iconBaseUrl] - Base URL for icon files.
- * @param {"plus" | "burger" | { open: string | JSX.Element; close: string | JSX.Element; openSize?: number; closeSize?: number }} [props.icon="plus"] - Icon for the open/close button.
- * @returns {JSX.Element} The rendered IconMenu component.
- *
- * @see https://documentation-components-react.vercel.app/components/icon-menu
- * @example
- * <IconMenu
- *   items={[
- *     { label: "Edit", icon: "edit", onClick: handleEdit },
- *     { label: "Delete", icon: "delete", onClick: handleDelete }
- *   ]}
- *   direction="down"
- *   color="secondary"
- * />
- */
-export const IconMenu: FC<ILibIconMenu> = ({
-    "data-testid": testid,
-    as,
-    ref,
-    children,
-    className,
-    icon = "plus",
-    position,
-    direction = "right",
-    color = "primary",
-    items,
-    hideTooltips,
-    buttonsVariant,
-    iconBaseUrl,
-    ...rest
-}) => {
-    const [isOpen, setIsOpen] = useState(false)
-
-    const el = useRef<HTMLDivElement>(null as any)
-
-    useClickOutside(el, () => {
-        if (isOpen) setIsOpen(false)
-    })
-
-    return (
-        <StyledIconMenu
-            data-testid={testid}
-            ref={useMergeRefs([ref, el])}
-            className={className}
-            $position={position?.position || "relative"}
-            $left={position?.left}
-            $top={position?.top}
-            $right={position?.right}
-            $bottom={position?.bottom}
-            $zIndex={position?.zIndex || 999}
-            as={as}
-            {...rest}
-        >
-            <OpenButton
-                data-testid={testid && `${testid}.OpenButton`}
-                className={className && "OpenButton"}
-                icon={
-                    typeof icon === "object" ? (
-                        isOpen ? (
-                            icon.open
-                        ) : (
-                            icon.close
-                        )
-                    ) : icon === "burger" ? (
-                        <Burger
-                            data-testid={
-                                testid && `${testid}.OpenButton.Burger`
-                            }
-                            className={className && "OpenBurger"}
-                            isOpen={isOpen}
-                            color={color === "white" ? "primary" : "white"}
-                            as="span"
-                            width={DEFAULT_BUTTON_SIZE * 0.5}
-                            height={DEFAULT_BUTTON_SIZE * 0.4}
-                            noHover
-                        />
-                    ) : (
-                        <OpenIcon
-                            data-testid={testid && `${testid}.OpenButton.Icon`}
-                            className={classNames(
-                                { OpenIcon: className },
-                                { Open: isOpen }
-                            )}
-                        />
-                    )
-                }
-                color={color}
-                onClick={() => setIsOpen(!isOpen)}
-            />
-
-            {items
-                ? items?.map((item, i) => (
-                      <IconMenuItem
-                          key={i}
-                          data-testid={
-                              item["data-testid"] ||
-                              (testid && `${testid}.Item`)
-                          }
-                          className={classNames(
-                              item.className,
-                              { IconMenuItem: className },
-                              { Open: isOpen }
-                          )}
-                          id={item.id}
-                          ref={item.ref}
-                          {...(item as any)}
-                          direction={direction}
-                          indexPosition={i + 1}
-                          isOpen={isOpen}
-                          size={DEFAULT_BUTTON_SIZE}
-                          tooltip={item?.label}
-                          showTooltip={!hideTooltips && { offset: -12 }}
-                          variant={buttonsVariant}
-                          iconBaseUrl={iconBaseUrl}
-                      />
-                  ))
-                : children}
-        </StyledIconMenu>
-    )
-}

package/dist/lib/components/IconMenu/IconMenuItem.tsx

@@ -1,75 +0,0 @@
-import type { FC } from "react"
-import { StyledButtonIcon } from "./styles"
-import type { ILibIconMenuItem } from "./types"
-
-/**
- * IconMenuItem component for rendering an icon button inside an IconMenu, supporting links, tooltips, loading states, and custom styles.
- *
- * @component
- * @extends HTMLButtonElement & HTMLAnchorElement & ILibButtonIcon
- * @param {Object} props - IconMenuItem props.
- * @param {string} [props.data-testid] - Test id for testing purposes.
- * @param {ElementType} [props.as] - Custom element type to render as.
- * @param {ForwardedRef<HTMLButtonElement & HTMLAnchorElement>} [props.ref] - Ref forwarded to the root element.
- * @param {string} props.label - Accessible label for the menu item.
- * @param {number} props.indexPosition - Position index of the item in the menu.
- * @param {boolean} props.isOpen - Whether the menu is open.
- * @param {string|JSX.Element} props.icon - Icon to display in the item.
- * @param {number} [props.iconSize] - Size of the icon.
- * @param {"left" | "up" | "right" | "down"} [props.direction] - Direction in which the menu appears.
- * @param {"plain" | "ghost" | "transparent"} [props.variant="ghost"] - Button variant.
- * @param {string} [props.iconBaseUrl] - Base URL for the icon.
- * @param {() => void} [props.onClick] - Click handler (only if `to` or `href` are not defined).
- * @param {boolean} [props.disabled] - Disables the item (only if `onClick` is defined).
- * @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).
- * @param {number} [props.size] - Size of the button.
- * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | Object} [props.shadow] - Shadow style for the button.
- * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | Object} [props.borderRadius] - Border radius for the button.
- * @param {"primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"} [props.color] - Color for the button and icon.
- * @param {boolean} [props.showBackgroundHover] - Show background on hover (only if variant is transparent).
- * @param {boolean} [props.isLoading] - Show loading indicator.
- * @param {1 | 2 | 3 | 4} [props.loaderVariant] - Loader variant (only if isLoading is defined).
- * @param {number} [props.loaderBorderWidth] - Loader border width (only if loaderVariant is 1, 2, or 3).
- * @param {string} [props.tooltip] - Tooltip text.
- * @param {boolean|Object} [props.showTooltip] - Show tooltip or tooltip options (only if tooltip is defined).
- * @param {CSSProperties} [props.containerStyle] - Custom style for the button container (only if tooltip is defined).
- * @returns {JSX.Element} The rendered IconMenuItem component.
- *
- * @see https://documentation-components-react.vercel.app/components/icon-menu
- * @example
- * <IconMenuItem
- *   label="Edit"
- *   icon="edit"
- *   indexPosition={0}
- *   isOpen={true}
- *   onClick={handleEdit}
- *   tooltip="Edit item"
- * />
- */
-export const IconMenuItem: FC<ILibIconMenuItem> = ({
-    ref,
-    indexPosition,
-    direction,
-    isOpen,
-    variant = "ghost",
-    style,
-    iconBaseUrl,
-    ...rest
-}) => {
-    return (
-        <StyledButtonIcon
-            ref={ref}
-            type="button"
-            variant={variant}
-            iconBaseUrl={iconBaseUrl}
-            $direction={direction}
-            containerStyle={{
-                ["--button-position" as any]: indexPosition,
-                ...style,
-            }}
-            {...rest}
-        />
-    )
-}

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

@@ -1,2 +0,0 @@
-export * from "./IconMenu"
-export * from "./IconMenuItem"

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

@@ -1,114 +0,0 @@
-import styled, { css } from "styled-components"
-import {
-    setDefaultTheme,
-    TRANSITIONS,
-    ButtonIcon,
-    Mixins,
-    SPACERS,
-} from "../../"
-import { Plus } from "../../icons"
-import type {
-    LibIconMenuDirection,
-    LibPositionExtract,
-    LibSpacers,
-} from "../../types"
-
-const DEFAULT_BUTTON_SIZE = 48
-
-const StyledIconMenu = styled.nav<{
-    $position?: LibPositionExtract
-    $left?: LibSpacers
-    $top?: LibSpacers
-    $right?: LibSpacers
-    $bottom?: LibSpacers
-    $zIndex?: number
-}>`
-    ${Mixins.Position};
-    width: ${DEFAULT_BUTTON_SIZE}px;
-    height: ${DEFAULT_BUTTON_SIZE}px;
-`
-
-const OpenButton = styled(ButtonIcon).attrs({ size: DEFAULT_BUTTON_SIZE })`
-    position: relative;
-    z-index: 100;
-`
-
-const OpenIcon = styled(Plus).attrs({ size: DEFAULT_BUTTON_SIZE })`
-    transition: ${TRANSITIONS.SHORT};
-    transform: rotate(0deg);
-
-    &.Open {
-        transform: rotate(45deg);
-    }
-`
-
-const StyledButtonIcon = styled(ButtonIcon)<{
-    $direction?: LibIconMenuDirection
-}>`
-    position: absolute;
-    transition: left 200ms ease, top 200ms ease, right 200ms ease,
-        bottom 200ms ease;
-    display: block;
-    overflow: hidden;
-    width: ${DEFAULT_BUTTON_SIZE}px;
-    height: ${DEFAULT_BUTTON_SIZE}px;
-    z-index: 0;
-
-    &.Open {
-        z-index: calc(var(--button-position) + 1);
-        overflow: visible;
-    }
-
-    ${({ $direction }) => {
-        const POSITION = `calc(var(--button-position) * ${DEFAULT_BUTTON_SIZE}px + ${SPACERS.XS} * var(--button-position))`
-
-        switch ($direction) {
-            case "left":
-                return css`
-                    top: 0;
-                    right: 0;
-
-                    &.Open {
-                        right: ${POSITION};
-                    }
-                `
-            case "up":
-                return css`
-                    left: 0;
-                    bottom: 0;
-
-                    &.Open {
-                        bottom: ${POSITION};
-                    }
-                `
-            case "right":
-                return css`
-                    top: 0;
-                    left: 0;
-
-                    &.Open {
-                        left: ${POSITION};
-                    }
-                `
-            case "down":
-                return css`
-                    left: 0;
-                    top: 0;
-
-                    &.Open {
-                        top: ${POSITION};
-                    }
-                `
-        }
-    }}
-` as any
-
-setDefaultTheme([StyledIconMenu, OpenButton, OpenIcon, StyledButtonIcon])
-
-export {
-    StyledIconMenu,
-    OpenButton,
-    OpenIcon,
-    StyledButtonIcon,
-    DEFAULT_BUTTON_SIZE,
-}

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

@@ -1,50 +0,0 @@
-import type {
-    LibComponentBase,
-    LibIconMenuItem,
-    LibIconMenuDirection,
-    LibColorsHover,
-    ReactChildren,
-    LibIcon,
-    LibIconMenuIcon,
-    ILibPosition,
-    LibButtonIconVariant,
-} from "../../types"
-import type { ILibButtonIcon } from "../ButtonIcon/types"
-
-interface ILibIconMenuBase extends LibComponentBase<HTMLDivElement> {
-    direction?: LibIconMenuDirection
-    color?: LibColorsHover
-    position?: ILibPosition
-    hideTooltips?: boolean
-    buttonsVariant?: LibButtonIconVariant
-    iconBaseUrl?: string
-    icon?:
-        | LibIconMenuIcon
-        | {
-              open: LibIcon
-              close: LibIcon
-              openSize?: number
-              closeSize?: number
-          }
-}
-
-interface IconMenuWithItems extends ILibIconMenuBase {
-    items: Array<LibIconMenuItem>
-    children?: never
-}
-
-interface IconMenuWithChildren extends ILibIconMenuBase {
-    items?: never
-    children?: ReactChildren
-}
-
-export type ILibIconMenu = IconMenuWithItems | IconMenuWithChildren
-
-export type ILibIconMenuItem = ILibButtonIcon &
-    Omit<LibIconMenuItem, "ref"> & {
-        indexPosition: number
-        isOpen: boolean
-        direction?: LibIconMenuDirection
-        variant?: LibButtonIconVariant
-        iconBaseUrl?: string
-    }

package/dist/lib/components/Image/Image.tsx

@@ -1,124 +0,0 @@
-import type { FC } from "react"
-import { Fallback } from "../../"
-import { ImageFunction } from "./ImageFunction"
-import { ImgContainer, Caption } from "./styles"
-import type { ILibImage } from "./types"
-
-/**
- * Image component for rendering images with optional caption, aspect ratio, border radius, and fallback.
- *
- * @component
- * @extends HTMLImageElement
- * @param {Object} props - Image props.
- * @param {string} [props.data-testid] - Test id for testing purposes.
- * @param {ElementType} [props.as] - Custom element type to render as.
- * @param {ForwardedRef<HTMLImageElement>} [props.ref] - Ref forwarded to the image element.
- * @param {string} props.src - Image source URL.
- * @param {string} props.alt - Alternative text for the image.
- * @param {string|Object} [props.caption] - Caption for the image. String for text, or object with { text, textColor, background, as }.
- * @param {string|number} [props.width="100%"] - Width of the image.
- * @param {string|number} [props.height="auto"] - Height of the image.
- * @param {string} [props.aspectRatio] - Aspect ratio for the image (e.g., "16/9").
- * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | Object} [props.borderRadius] - Border radius for the image.
- * @param {CssObjectFit} [props.fit] - Object-fit property for the image.
- * @param {JSX.Element} [props.fallback] - Fallback element to display while loading.
- * @param {CSSProperties} [props.containerStyle] - Style for the image container (only if caption is defined).
- * @param {ElementType} [props.containerAs] - Custom element type for the container (only if caption is defined).
- * @param {string} [props.className] - Additional class names.
- * @returns {JSX.Element} The rendered Image component.
- *
- * @see https://documentation-components-react.vercel.app/components/image
- * @example
- * <Image
- *   src="/banner.jpg"
- *   alt="Banner"
- *   caption={{ text: "Banner image", textColor: "white", background: "black-50" }}
- *   width={400}
- *   height={200}
- *   aspectRatio="16/9"
- *   borderRadius="m"
- * />
- */
-export const Image: FC<ILibImage> = ({
-	"data-testid": testid,
-	ref,
-	role = "img",
-	className,
-	src,
-	alt,
-	caption,
-	width = "100%",
-	height = "auto",
-	aspectRatio,
-	borderRadius,
-	fit,
-	fallback = (
-		<Fallback
-			$aspectRatio={aspectRatio}
-			$width={width}
-			$height={height}
-			$borderRadius={borderRadius}
-		/>
-	),
-	containerStyle,
-	containerAs,
-	...rest
-}) => {
-	const imageProps = {
-		"data-testid": testid,
-		ref,
-		role,
-		fallback,
-		caption,
-		className,
-		src,
-		alt,
-		aspectRatio,
-		width,
-		height,
-		borderRadius,
-		fit,
-		...rest,
-	}
-
-	if (caption)
-		return (
-			<ImgContainer
-				data-testid={testid}
-				className={className}
-				style={containerStyle}
-				as={containerAs}
-				role="figure"
-				$width={width}
-				$height={height}
-				$borderRadius={borderRadius}
-			>
-				<ImageFunction {...imageProps} />
-
-				<Caption
-					data-testid={testid && `${testid}.Caption`}
-					className={className && "Caption"}
-					role="contentinfo"
-					as={
-						typeof caption === "object" && caption.as
-							? caption.as
-							: "figcaption"
-					}
-					$backgroundColor={
-						typeof caption === "object" && caption.background
-							? caption?.background
-							: "black-50"
-					}
-					$textColor={
-						typeof caption === "object" && caption.textColor
-							? caption.textColor
-							: "white"
-					}
-				>
-					{typeof caption === "object" ? caption.text : caption}
-				</Caption>
-			</ImgContainer>
-		)
-
-	return <ImageFunction {...imageProps} />
-}