@julseb-lib/react 0.0.56 → 0.0.57

package/dist/lib/components/Dropdown/Dropdown.tsx

@@ -1,89 +0,0 @@
-/*=============================================== Dropdown component ===============================================*/
-
-import { forwardRef, useRef, useCallback } from "react"
-import classNames from "classnames"
-import { uuid } from "@julseb-lib/utils"
-import { useMergeRefs, useClickOutside } from "../../"
-import { DropdownItem } from "./DropdownItem"
-import { StyledDropdown } from "./styles"
-import type { ILibDropdown } from "./types"
-
-/**
- * @description Returns a Dropdown component
- * @link https://documentation-components-react.vercel.app/components/dropdown
- * @extends HTMLDivElement
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop data-testid?: string
- * @prop isOpen: boolean
- * @prop setIsOpen: Dispatch<SetStateAction<boolean>>
- * @prop items: Array<LibDropdownItem> => only if children is not defined
- * @prop children?: ReactChildren => only if items is not defined
- * @prop accentColor?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"
- * @prop direction?: "up" | "down"
- * @prop maxHeightOpen?: number
- * @prop positionFromButton?: number
- * @prop shadow?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | null
- */
-export const Dropdown = forwardRef<HTMLDivElement, ILibDropdown>(
-    (
-        {
-            "data-testid": testid,
-            className,
-            as,
-            children,
-            isOpen,
-            setIsOpen,
-            accentColor = "primary",
-            direction = "down",
-            items,
-            maxHeightOpen = items ? items.length * 40 : 300,
-            positionFromButton = 34,
-            shadow = "m",
-            ...rest
-        },
-        ref
-    ) => {
-        const el = useRef<HTMLDivElement>(null)
-
-        useClickOutside(
-            el,
-            useCallback(() => setIsOpen(false), [setIsOpen])
-        )
-
-        return (
-            <StyledDropdown
-                data-testid={testid}
-                ref={useMergeRefs([ref, el])}
-                as={as}
-                className={classNames(className, { Open: isOpen })}
-                $direction={direction}
-                $maxHeight={maxHeightOpen}
-                $buttonOpenHeight={positionFromButton}
-                $shadow={shadow}
-                {...rest}
-            >
-                {items
-                    ? items.map(item => (
-                          <DropdownItem
-                              data-testid={
-                                  item["data-testid"] ||
-                                  (testid && `${testid}.DropdownItem`)
-                              }
-                              className={
-                                  item.className ||
-                                  (className && "DropdownItem")
-                              }
-                              id={item.id}
-                              ref={item.ref}
-                              accentColor={accentColor}
-                              {...item}
-                              key={uuid()}
-                          >
-                              {item.text}
-                          </DropdownItem>
-                      ))
-                    : children}
-            </StyledDropdown>
-        )
-    }
-)

package/dist/lib/components/Dropdown/DropdownContainer.tsx

@@ -1,39 +0,0 @@
-/*=============================================== DropdownContainer component ===============================================*/
-
-import { forwardRef } from "react"
-import classNames from "classnames"
-import { StyledDropdownContainer } from "./styles"
-import type { ILibDropdownContainer } from "./types"
-
-/**
- * @description Returns a DropdownContainer component
- * @link https://documentation-components-react.vercel.app/components/dropdown
- * @extends ILibFlexbox
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop isOpen: boolean
- * @prop inline?: boolean
- * @prop flexDirection?: CssFlexDirection
- * @prop flexWrap?: CssFlexWrap
- * @prop justifyContent?: CssJustifyContent
- * @prop alignItems?: CssAlignItems
- * @prop justifyItems?: CssJustifyItems
- * @prop alignContent?: CssAlignContent
- * @prop gap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
- * @prop columnGap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
- * @prop rowGap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
- * @prop padding?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" | { left?: LibSpacers | "auto"; top?: LibSpacers | "auto"; right?: LibSpacers | "auto"; bottom?: LibSpacers | "auto"; leftRight?: LibSpacers | "auto"; topBottom?: LibSpacers | "auto" }
- */
-export const DropdownContainer = forwardRef<
-    HTMLDivElement,
-    ILibDropdownContainer
->(({ isOpen, className, ...rest }, ref) => {
-    return (
-        <StyledDropdownContainer
-            ref={ref}
-            className={classNames(className, { Open: isOpen })}
-            {...rest}
-        />
-    )
-})

package/dist/lib/components/Dropdown/DropdownItem.tsx

@@ -1,97 +0,0 @@
-/*=============================================== DropdownItem component ===============================================*/
-
-import { forwardRef } from "react"
-import { Link } from "react-router-dom"
-import { LibIcon } from "../LibIcon"
-import { StyledDropdownItem, IconContainer, TextContent } from "./styles"
-import type { ILibDropdownItem } from "./types"
-
-/**
- * @description Returns a DropdownItem component
- * @link https://documentation-components-react.vercel.app/components/dropdown
- * @extends HTMLButtonElement & HTMLAnchorElement & LibButtonLinkBlankRequired
- * @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 accentColor?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"
- * @prop gap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
- * @prop icon?: string | JSX.Element
- * @prop iconSize?: number => only if icon is defined
- * @prop iconBaseUrl?: string => only if icon is defined
- */
-export const DropdownItem = forwardRef<
-    HTMLButtonElement & HTMLAnchorElement,
-    ILibDropdownItem
->(
-    (
-        {
-            "data-testid": testid,
-            as,
-            className,
-            onClick,
-            to,
-            href,
-            blank,
-            accentColor = "primary",
-            children,
-            disabled,
-            icon,
-            iconSize = 16,
-            iconBaseUrl,
-            gap = "xxs",
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledDropdownItem
-                data-testid={testid}
-                className={className}
-                ref={ref}
-                as={as ? as : to ? Link : href ? "a" : "button"}
-                onClick={onClick}
-                to={to}
-                href={href}
-                disabled={!to && !href ? disabled : undefined}
-                target={blank && "_blank"}
-                rel={blank && "noreferrer noopener"}
-                $accentColor={accentColor}
-                $gap={gap}
-                {...rest}
-            >
-                {icon ? (
-                    <>
-                        <IconContainer
-                            data-testid={testid && `${testid}.IconContainer`}
-                            className={className && "DropdownItemIconContainer"}
-                        >
-                            <LibIcon
-                                data-testid={
-                                    testid && `${testid}.IconContainer.Icon`
-                                }
-                                className={className && "DropdownItemIcon"}
-                                icon={icon}
-                                size={iconSize}
-                                baseUrl={iconBaseUrl}
-                            />
-                        </IconContainer>
-
-                        <TextContent
-                            data-testid={testid && `${testid}.TextContent`}
-                            className={className && "DropdownItemTextContent"}
-                        >
-                            {children}
-                        </TextContent>
-                    </>
-                ) : (
-                    children
-                )}
-            </StyledDropdownItem>
-        )
-    }
-)

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

@@ -1,5 +0,0 @@
-/*=============================================== Dropdown exports ===============================================*/
-
-export * from "./Dropdown"
-export * from "./DropdownContainer"
-export * from "./DropdownItem"

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

@@ -1,156 +0,0 @@
-/*=============================================== Dropdown styles ===============================================*/
-
-import styled, { css } from "styled-components"
-import { stringifyPx } from "@julseb-lib/utils"
-import {
-    MEDIA,
-    FONT_FAMILIES,
-    FONT_SIZES,
-    FONT_WEIGHTS,
-    Flexbox,
-    LINE_HEIGHTS,
-    Mixins,
-    RADIUSES,
-    SPACERS,
-    TRANSITIONS,
-    setDefaultTheme,
-} from "../../"
-import type {
-    LibShadows,
-    LibColorsHover,
-    LibInputListDirection,
-    LibSpacers,
-} from "../../types"
-
-const StyledDropdown = styled.div<{
-    $direction: LibInputListDirection
-    $maxHeight: number
-    $buttonOpenHeight: number
-    $shadow?: LibShadows
-}>`
-    position: absolute;
-    min-width: 200px;
-    max-width: 100%;
-    border-radius: ${RADIUSES.M};
-    overflow: hidden;
-    overflow-y: scroll;
-    max-height: 0;
-    transition: ${TRANSITIONS.SHORT};
-    background-color: ${({ theme }) => theme.BACKGROUND};
-    ${Mixins.Flexbox({
-        $flexDirection: "column",
-        $alignItems: "stretch",
-    })}
-
-    ${({ $direction, $buttonOpenHeight }) => {
-        switch ($direction) {
-            case "up":
-                return css`
-                    bottom: ${stringifyPx($buttonOpenHeight)};
-                `
-            case "down":
-                return css`
-                    top: ${stringifyPx($buttonOpenHeight)};
-                `
-            default:
-                return css``
-        }
-    }}
-
-&.Open {
-        box-shadow: ${({ $shadow }) => Mixins.Shadow($shadow)};
-        max-height: ${({ $maxHeight }) => stringifyPx($maxHeight)};
-    }
-`
-
-const StyledDropdownContainer = styled(Flexbox)`
-    position: relative;
-    z-index: 0;
-
-    & > ${StyledDropdown} {
-        ${({ justifyContent }) => {
-            switch (justifyContent) {
-                case "flex-end":
-                    return css`
-                        right: 0;
-                    `
-                case "flex-start":
-                    return css`
-                        left: 0;
-                    `
-            }
-        }}
-    }
-
-    &.Open {
-        z-index: 20;
-    }
-`
-
-const StyledDropdownItem = styled.button<{
-    $accentColor: LibColorsHover
-    $gap: LibSpacers
-}>`
-    text-decoration: none;
-    text-align: left;
-    padding: ${SPACERS.XS} ${SPACERS.S};
-    font-size: ${FONT_SIZES.BODY};
-    font-family: ${FONT_FAMILIES.BODY};
-    font-weight: ${FONT_WEIGHTS.BLACK};
-    line-height: ${LINE_HEIGHTS.BODY};
-    background-color: transparent;
-    border: none;
-    color: ${({ theme, $accentColor }) =>
-        Mixins.ColorsHoverDefault($accentColor, theme)};
-    ${({ $gap }) =>
-        Mixins.Flexbox({
-            $gap,
-        })}
-
-    &:disabled {
-        color: ${({ theme }) => theme.GRAY_500};
-    }
-
-    @media ${MEDIA.HOVER} {
-        &:not(:disabled) {
-            &:hover {
-                background-color: ${({ theme, $accentColor }) =>
-                    Mixins.ColorsHoverHover($accentColor, theme)};
-                color: ${({ theme }) => theme.BACKGROUND};
-            }
-
-            &:active {
-                background-color: ${({ theme, $accentColor }) =>
-                    Mixins.ColorsHoverActive($accentColor, theme)};
-            }
-        }
-    }
-`
-
-const IconContainer = styled.span`
-    height: calc(${FONT_SIZES.BODY} * ${LINE_HEIGHTS.BODY});
-    ${Mixins.Flexbox({
-        $inline: true,
-        $alignItems: "center",
-    })}
-`
-
-const TextContent = styled.span`
-    width: 100%;
-`
-
-setDefaultTheme([
-    StyledDropdownContainer,
-    StyledDropdown,
-    StyledDropdownItem,
-    IconContainer,
-    TextContent,
-])
-
-export {
-    StyledDropdownContainer,
-    StyledDropdown,
-    StyledDropdownItem,
-    IconContainer,
-    TextContent,
-}

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

@@ -1,71 +0,0 @@
-/*=============================================== Dropdown types ===============================================*/
-
-import type { ButtonHTMLAttributes } from "react"
-import type {
-    LibDropdownItem,
-    LibColorsHover,
-    LibComponentBase,
-    LibInputListDirection,
-    ReactChildren,
-    DispatchState,
-    LibShadows,
-    LibButtonLinkBlankRequired,
-    LibIcon,
-    LibSpacers,
-} from "../../types"
-import type { ILibFlexbox } from "../Flexbox/types"
-
-/*====================== Dropdown ======================*/
-
-interface ILibDropdownBase extends LibComponentBase<HTMLDivElement> {
-    isOpen: boolean
-    setIsOpen: DispatchState<boolean>
-    accentColor?: LibColorsHover
-    direction?: LibInputListDirection
-    maxHeightOpen?: number
-    positionFromButton?: number
-    shadow?: LibShadows | null
-}
-
-interface DropdownWithItems extends ILibDropdownBase {
-    items: Array<LibDropdownItem>
-    children?: never
-}
-
-interface DropdownWithChildren extends ILibDropdownBase {
-    items?: never
-    children?: ReactChildren
-}
-
-export type ILibDropdown = DropdownWithItems | DropdownWithChildren
-
-/*====================== DropdownContainer ======================*/
-
-export interface ILibDropdownContainer extends ILibFlexbox {
-    isOpen: boolean
-}
-
-/*====================== DropdownItem ======================*/
-
-type ILibDropdownItemBase = LibComponentBase<
-    HTMLButtonElement & HTMLAnchorElement
-> &
-    ButtonHTMLAttributes<HTMLButtonElement & HTMLAnchorElement> &
-    LibButtonLinkBlankRequired & {
-        accentColor?: LibColorsHover
-        gap?: LibSpacers
-    }
-
-type DropdownItemWithIcon = ILibDropdownItemBase & {
-    icon?: LibIcon
-    iconSize?: number
-    iconBaseUrl?: string
-}
-
-type DropdownItemWithoutIcon = ILibDropdownItemBase & {
-    icon?: undefined | null
-    iconSize?: never
-    iconBaseUrl?: never
-}
-
-export type ILibDropdownItem = DropdownItemWithIcon | DropdownItemWithoutIcon

package/dist/lib/components/Fade/Fade.tsx

@@ -1,42 +0,0 @@
-/*=============================================== Fade component ===============================================*/
-
-import { forwardRef, useEffect, useRef, useState } from "react"
-import classNames from "classnames"
-import { useMergeRefs } from "../../"
-import { StyledFade } from "./styles"
-import type { ILibFade } from "./types"
-
-/**
- * @description Returns a Fade component
- * @link https://documentation-components-react.vercel.app/components/fade
- * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- */
-export const Fade = forwardRef<HTMLDivElement, ILibFade>(
-    ({ "data-testid": testid, as, children, className, ...rest }, ref) => {
-        const [isVisible, setVisible] = useState(true)
-        const fadeRef = useRef<Element>(null)
-
-        useEffect(() => {
-            const observer = new IntersectionObserver(entries => {
-                entries.forEach(entry => setVisible(entry.isIntersecting))
-            })
-
-            observer.observe((fadeRef as any).current)
-        }, [])
-
-        return (
-            <StyledFade
-                data-testid={testid}
-                ref={useMergeRefs([ref, fadeRef])}
-                as={as}
-                className={classNames(className, { Visible: isVisible })}
-                {...rest}
-            >
-                {children}
-            </StyledFade>
-        )
-    }
-)

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

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

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

@@ -1,19 +0,0 @@
-/*=============================================== Fade styles ===============================================*/
-
-import styled from "styled-components"
-import { setDefaultTheme, SPACERS } from "../../"
-
-const StyledFade = styled.div`
-    opacity: 0;
-    transform: translateX(calc(${SPACERS.S} * -1));
-    transition: opacity 0.4s ease-out, transform 0.8s ease-out;
-
-    &.Visible {
-        transform: translateX(0);
-        opacity: 1;
-    }
-`
-
-setDefaultTheme([StyledFade])
-
-export { StyledFade }

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

@@ -1,5 +0,0 @@
-/*=============================================== Fade types ===============================================*/
-
-import type { LibComponentBase } from "../../types"
-
-export interface ILibFade extends LibComponentBase<HTMLDivElement> {}

package/dist/lib/components/Fallback/Fallback.tsx

@@ -1,37 +0,0 @@
-/*=============================================== Fallback ===============================================*/
-
-import styled from "styled-components"
-import { stringifyPx } from "@julseb-lib/utils"
-import { setDefaultTheme, Mixins } from "../../"
-import type { ILibRadius } from "../../types"
-
-/**
- * @description Returns a Fallback component. Use it for lazy loading in Image or Video components
- * @extends HTMLDivElement
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop $width: string | number
- * @prop $height: string | number
- * @prop $borderRadius?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | { topLeft?: LibRadiuses; topRight?: LibRadiuses; bottomLeft?: LibRadiuses; bottomRight?: LibRadiuses }
- * @prop $aspectRatio?: string
- */
-
-const Fallback = styled.div<{
-    $width: string | number
-    $height: string | number
-    $borderRadius?: ILibRadius
-    $aspectRatio?: string
-}>`
-    position: relative;
-    z-index: 0;
-    background-color: ${({ theme }) => theme.GRAY_500};
-    display: block;
-    width: ${({ $width }) => stringifyPx($width)};
-    height: ${({ $height }) => stringifyPx($height)};
-    aspect-ratio: ${({ $aspectRatio }) => $aspectRatio};
-    ${({ $borderRadius }) => Mixins.BorderRadius($borderRadius)}
-`
-
-setDefaultTheme([Fallback])
-
-export { Fallback }

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

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

package/dist/lib/components/Fieldset/Fieldset.tsx

@@ -1,107 +0,0 @@
-/*=============================================== Fieldset component ===============================================*/
-
-import { forwardRef } from "react"
-import { InputContainer } from "../InputComponents"
-import { StyledFieldset, Legend } from "./styles"
-import type { ILibFieldset } from "./types"
-
-/**
- * @description Returns a Fieldset component
- * @link https://documentation-components-react.vercel.app/components/fieldset
- * @extends HTMLFieldSetElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLFieldSetElement>
- * @prop legend: string
- * @prop flexDirection?: CssFlexDirection
- * @prop flexWrap?: CssFlexWrap
- * @prop justifyContent?: CssJustifyContent
- * @prop alignItems?: CssAlignItems
- * @prop justifyItems?: CssJustifyItems
- * @prop alignContent?: CssAlignContent
- * @prop gap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
- * @prop columnGap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
- * @prop rowGap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
- * @prop padding?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" | { left?: LibSpacers | "auto"; top?: LibSpacers | "auto"; right?: LibSpacers | "auto"; bottom?: LibSpacers | "auto"; leftRight?: LibSpacers | "auto"; topBottom?: LibSpacers | "auto" }
- * @prop border?: { style?: CssBorderStyle; width?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"; color?: Any color from the library }
- * @prop borderRadius?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | { topLeft?: LibRadiuses; topRight?: LibRadiuses; bottomLeft?: LibRadiuses; bottomRight?: LibRadiuses }
- * @prop containerStyle?: CSSProperties
- * @prop validation?: { status: boolean | undefined; message?: string; iconNotPassed?: string | JSX.Element; iconNotPassedSize?: number; iconPassed?: string | JSX.Element; iconPassedSize?: number; iconBaseUrl?: string }
- */
-export const Fieldset = forwardRef<HTMLFieldSetElement, ILibFieldset>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            children,
-            className,
-            legend,
-            flexDirection = "row",
-            flexWrap = "wrap",
-            justifyContent = "flex-start",
-            justifyItems,
-            alignContent,
-            alignItems = "flex-start",
-            gap = "m",
-            columnGap,
-            rowGap,
-            padding = "s",
-            border = { color: "gray-200" },
-            borderRadius = "m",
-            containerStyle,
-            validation,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <InputContainer
-                validation={validation}
-                id={undefined}
-                label={undefined}
-                labelComment={undefined}
-                helper={undefined}
-                helperBottom={undefined}
-                counter={undefined}
-                maxLength={undefined}
-                value={undefined}
-                className={className}
-                hasListOpen={undefined}
-                iconBaseUrl={undefined}
-                style={containerStyle}
-            >
-                <StyledFieldset
-                    data-testid={
-                        validation && testid ? `${testid}.Fieldset` : testid
-                    }
-                    ref={ref}
-                    as={as}
-                    className={validation && className ? "Fieldset" : className}
-                    $alignContent={alignContent}
-                    $alignItems={alignItems}
-                    $columnGap={columnGap}
-                    $flexDirection={flexDirection}
-                    $flexWrap={flexWrap}
-                    $gap={gap}
-                    $justifyContent={justifyContent}
-                    $justifyItems={justifyItems}
-                    $padding={padding}
-                    $rowGap={rowGap}
-                    $border={border}
-                    $borderRadius={borderRadius}
-                    $validationStatus={validation?.status}
-                    {...rest}
-                >
-                    <Legend
-                        data-testid={testid && `${testid}.Legend`}
-                        className={className && "Legend"}
-                    >
-                        {legend}
-                    </Legend>
-
-                    {children}
-                </StyledFieldset>
-            </InputContainer>
-        )
-    }
-)