@julseb-lib/react 0.0.50 → 0.0.52

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

@@ -1,52 +0,0 @@
-/*=============================================== Rating styles ===============================================*/
-
-import styled, { css } from "styled-components"
-import { MEDIA, Mixins, setDefaultTheme } from "../../"
-import type { LibValidationStatus } from "../../types"
-
-export const BUTTON_SIZE = 32
-
-const RatingButton = styled.button<{
-    $isReadOnly: boolean
-    $validationStatus: LibValidationStatus
-}>`
-    width: ${BUTTON_SIZE}px;
-    height: ${BUTTON_SIZE}px;
-    border: none;
-    padding: 0;
-    background-color: transparent;
-    color: ${({ theme, $validationStatus }) =>
-        Mixins.ColorsHoverDefault(
-            $validationStatus === false ? "danger" : "primary",
-            theme
-        )};
-    ${Mixins.Flexbox({
-        $inline: true,
-        $alignItems: "center",
-        $justifyContent: "center",
-    })}
-
-    ${({ $isReadOnly, theme, $validationStatus }) =>
-        !$isReadOnly &&
-        css`
-            @media ${MEDIA.HOVER} {
-                &:hover {
-                    color: ${Mixins.ColorsHoverHover(
-                        $validationStatus === false ? "danger" : "primary",
-                        theme
-                    )};
-                }
-
-                &:active {
-                    color: ${Mixins.ColorsHoverActive(
-                        $validationStatus === false ? "danger" : "primary",
-                        theme
-                    )};
-                }
-            }
-        `}
-`
-
-setDefaultTheme([RatingButton])
-
-export { RatingButton }

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

@@ -1,24 +0,0 @@
-/*=============================================== Rating types ===============================================*/
-
-import type { LibComponentBase, LibIcon, DispatchState } from "../../types"
-import type { ILibInputBase } from "../InputComponents/types"
-
-type ILibRatingBase = Exclude<LibComponentBase<HTMLDivElement>, "as"> &
-    Omit<ILibInputBase, "inputVariant" | "inputBackground"> & {
-        rating: number
-        icons?: { default?: LibIcon; checked?: LibIcon }
-        iconSizes?: { default?: number; checked?: number }
-        iconBaseUrl?: string
-    }
-
-interface RatingInput extends ILibRatingBase {
-    setRating: DispatchState<number>
-    readOnly?: undefined | false
-}
-
-interface RatingReadOnly extends ILibRatingBase {
-    setRating?: never | undefined | null
-    readOnly: true
-}
-
-export type ILibRating = RatingInput | RatingReadOnly

package/dist/lib/components/ResetScroll/ResetScroll.tsx

@@ -1,22 +0,0 @@
-/*=============================================== ResetScroll component ===============================================*/
-
-import { useEffect } from "react"
-import { useLocation } from "react-router-dom"
-
-/**
- * @description Scrolls to the top of the page every time the path changes, add it in your PageLayout
- * @link https://documentation-components-react.vercel.app/helpers/reset-scroll
- */
-export const ResetScroll = () => {
-    const { pathname, search } = useLocation()
-
-    useEffect(() => {
-        document.documentElement.scrollTo({
-            top: 0,
-            left: 0,
-            behavior: "instant",
-        })
-    }, [pathname, search])
-
-    return null
-}

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

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

package/dist/lib/components/Section/Section.tsx

@@ -1,30 +0,0 @@
-/*=============================================== Section component ===============================================*/
-
-import { forwardRef } from "react"
-import { StyledSection } from "./styles"
-import type { ILibSection } from "./types"
-
-/**
- * @description Returns a Section component
- * @link https://documentation-components-react.vercel.app/layouts/section
- * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop gap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
- */
-export const Section = forwardRef<HTMLDivElement, ILibSection>(
-    ({ "data-testid": testid, as, children, gap = "m", ...rest }, ref) => {
-        return (
-            <StyledSection
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                $gap={gap}
-                {...rest}
-            >
-                {children}
-            </StyledSection>
-        )
-    }
-)

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

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

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

@@ -1,24 +0,0 @@
-/*=============================================== Section styles ===============================================*/
-
-import styled from "styled-components"
-import { setDefaultTheme, Mixins } from "../../"
-import type { LibSpacers } from "../../types"
-
-const StyledSection = styled.section<{ $gap?: LibSpacers }>`
-    ${({ $gap }) =>
-        Mixins.Flexbox({
-            $flexDirection: "column",
-            $alignItems: "flex-start",
-            $gap,
-        })}
-
-    ${Mixins.StretchTags}
-    
-    & > * {
-        flex-shrink: 0;
-    }
-`
-
-setDefaultTheme([StyledSection])
-
-export { StyledSection }

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

@@ -1,7 +0,0 @@
-/*=============================================== Section types ===============================================*/
-
-import type { LibComponentBase, LibSpacers } from "../../types"
-
-export interface ILibSection extends LibComponentBase<HTMLDivElement> {
-    gap?: LibSpacers
-}

package/dist/lib/components/Select/Select.tsx

@@ -1,284 +0,0 @@
-/*=============================================== Select component ===============================================*/
-
-import { forwardRef, useEffect, type MouseEvent } from "react"
-import { useClickOutside } from "../../"
-import {
-    InputContainer,
-    InputValidationIcon,
-    InputRightContainer,
-    InputButton,
-    ListInput,
-    ListInputItem,
-    InputIcon,
-    InputLeftContainer,
-    InputPrefix,
-    InputWrapper,
-} from "../InputComponents"
-import { CaretDown } from "../../icons"
-import { SelectButton } from "./SelectButton"
-import { useKeyboardNavigation } from "../ComponentsMixins"
-import { SelectContainer } from "./styles"
-import type { ILibSelect } from "./types"
-import type { ILibSelectButton } from "./subtypes"
-
-/**
- * @description Returns a Select component
- * @link https://documentation-components-react.vercel.app/components/select
- * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop value: string
- * @prop setValue: Dispatch<SetStateAction< string>>
- * @prop options?: Array<string>
- * @prop disabled?: boolean
- * @prop listDirection?: "up" | "down"
- * @prop tabIndex?: number
- * @prop prefix?: string | JSX.Element
- * @prop icons?: { left?: string | JSX.Element; caret?: string | JSX.Element }
- * @prop iconSizes?: { left?: number; caret?: number }
- * @prop label?: string
- * @prop labelComment?: string
- * @prop helper?: string
- * @prop helperBottom?: string | { text: string => only if element is not defined; element: ReactChildren => only if text is not defined; textColor?: Any color from the library; fontStyle?: CssFontStyle; icon?: string | JSX.Element; iconColor?: Any color from the library; iconSize?: number }
- * @prop validation?: { status: LibValidationStatus; message?: string; iconNotPassed?: LibIcon; iconNotPassedSize?: number; iconPassed?: LibIcon; iconPassedSize?: number; iconBaseUrl?: string }
- * @prop iconBaseUrl?: string
- * @prop inputBackground?: "light" | "dark"
- * @prop inputVariant?: "rounded" | "pill"
- * @prop containerStyle?: CSSProperties
- */
-export const Select = forwardRef<HTMLDivElement, ILibSelect>(
-    (
-        {
-            "data-testid": testid,
-            className,
-            as,
-            id,
-            label,
-            labelComment,
-            helper,
-            helperBottom,
-            validation,
-            inputVariant = "rounded",
-            inputBackground,
-            disabled,
-            value,
-            setValue,
-            options,
-            listDirection,
-            icons,
-            iconSizes,
-            iconBaseUrl,
-            tabIndex,
-            prefix,
-            containerStyle,
-            ...rest
-        },
-        ref
-    ) => {
-        const hasContainer: boolean = !!(
-            label ||
-            labelComment ||
-            helper ||
-            helperBottom ||
-            validation
-        )
-        const hasOptions: boolean = !!(options && options.length > 1)
-        const hasWrapper = !!(hasOptions || validation || icons?.left)
-
-        const defaultIconSizes = {
-            left: 16,
-            caret: 16,
-        }
-
-        const { isOpen, setIsOpen, cursor, listRef } = useKeyboardNavigation({
-            data: options || [],
-            value: value,
-            setValue: setValue,
-        })
-
-        useClickOutside(listRef, () => setIsOpen(false))
-
-        const handleClick = (e: MouseEvent<HTMLDivElement>) => {
-            e.stopPropagation()
-            if (!isOpen && options && options.length > 1) setIsOpen(true)
-        }
-
-        useEffect(() => {
-            setIsOpen(false)
-        }, [value])
-
-        const buttonProps: ILibSelectButton = {
-            "data-testid": testid,
-            className,
-            value,
-            id,
-            tabIndex,
-            disabled,
-            icons,
-            inputBackground,
-            inputVariant,
-            validation,
-            options,
-            isOpen,
-            hasContainer,
-            hasWrapper,
-        }
-
-        if (!hasContainer && !hasWrapper && !hasOptions)
-            return <SelectButton {...buttonProps} />
-
-        return (
-            <InputContainer
-                data-testid={testid}
-                className={className}
-                id={id}
-                label={label}
-                labelComment={labelComment}
-                helper={helper}
-                helperBottom={helperBottom}
-                validation={validation}
-                value={undefined}
-                counter={false}
-                maxLength={undefined}
-                style={containerStyle}
-                hasListOpen={isOpen}
-                iconBaseUrl={iconBaseUrl}
-            >
-                <SelectContainer
-                    data-testid={
-                        hasContainer ? `${testid}.SelectContainer` : testid
-                    }
-                    className={hasContainer ? "SelectContainer" : className}
-                    ref={ref}
-                    as={as}
-                    onClick={handleClick}
-                    onFocus={() => setIsOpen(true)}
-                    onBlur={() => setIsOpen(false)}
-                    {...rest}
-                >
-                    <InputWrapper
-                        data-testid={testid}
-                        className={className}
-                        hasContainer={hasContainer}
-                        hasListOpen={isOpen}
-                        isTextArea={false}
-                        inputVariant={inputVariant}
-                        inputBackground={inputBackground}
-                        validationStatus={validation?.status}
-                    >
-                        {(prefix || icons?.left) && (
-                            <InputLeftContainer
-                                data-testid={testid}
-                                className={className}
-                                disabled={disabled}
-                            >
-                                <InputPrefix
-                                    data-testid={testid}
-                                    className={className}
-                                    prefix={prefix}
-                                    inputBackground={inputBackground}
-                                />
-
-                                <InputIcon
-                                    data-testid={testid}
-                                    className={className}
-                                    icon={icons?.left}
-                                    iconSize={
-                                        iconSizes?.left || defaultIconSizes.left
-                                    }
-                                    validationStatus={validation?.status}
-                                    disabled={disabled}
-                                    inputBackground={inputBackground}
-                                    inputVariant={inputVariant}
-                                    iconBaseUrl={iconBaseUrl}
-                                />
-                            </InputLeftContainer>
-                        )}
-
-                        <SelectButton {...buttonProps} />
-
-                        {(hasOptions || validation) && (
-                            <InputRightContainer
-                                data-testid={testid}
-                                className={className}
-                                disabled={disabled}
-                                withBorder={false}
-                                withPadding
-                            >
-                                {validation && (
-                                    <InputValidationIcon
-                                        data-testid={testid}
-                                        className={className}
-                                        validation={validation}
-                                        inputBackground={inputBackground}
-                                    />
-                                )}
-
-                                {hasOptions && (
-                                    <InputButton
-                                        data-testid={testid}
-                                        className={className}
-                                        inputBackground={inputBackground}
-                                        icon={
-                                            icons?.caret || (
-                                                <CaretDown
-                                                    data-testid={
-                                                        testid &&
-                                                        `${testid}.Button.Caret`
-                                                    }
-                                                    className={
-                                                        className && "Caret"
-                                                    }
-                                                    size={
-                                                        iconSizes?.caret ||
-                                                        defaultIconSizes.caret
-                                                    }
-                                                />
-                                            )
-                                        }
-                                        iconSize={
-                                            iconSizes?.caret ||
-                                            defaultIconSizes.caret
-                                        }
-                                        disabled={disabled}
-                                        aria-label="Caret down"
-                                        validationStatus={validation?.status}
-                                        iconBaseUrl={iconBaseUrl}
-                                    />
-                                )}
-                            </InputRightContainer>
-                        )}
-                    </InputWrapper>
-
-                    {options && options?.length > 1 && (
-                        <ListInput
-                            data-testid={testid}
-                            className={className}
-                            ref={listRef}
-                            direction={listDirection}
-                            inputBackground={inputBackground}
-                            inputVariant={inputVariant}
-                            validationStatus={validation?.status}
-                            isOpen={isOpen}
-                        >
-                            {options.map((option, i) => (
-                                <ListInputItem
-                                    data-testid={testid}
-                                    className={className}
-                                    inputBackground={inputBackground}
-                                    validationStatus={validation?.status}
-                                    onClick={() => setValue(option)}
-                                    isActive={value === option}
-                                    isHovered={cursor === i && value !== option}
-                                    key={`${option}-${i}`}
-                                >
-                                    {option}
-                                </ListInputItem>
-                            ))}
-                        </ListInput>
-                    )}
-                </SelectContainer>
-            </InputContainer>
-        )
-    }
-)

package/dist/lib/components/Select/SelectButton.tsx

@@ -1,58 +0,0 @@
-/*=============================================== Select Button component ===============================================*/
-
-import { forwardRef } from "react"
-import classNames from "classnames"
-import { StyledSelectButton } from "./styles"
-import type { ILibSelectButton } from "./subtypes"
-
-export const SelectButton = forwardRef<HTMLButtonElement, ILibSelectButton>(
-    (
-        {
-            "data-testid": testid,
-            className,
-            options,
-            isOpen,
-            id,
-            tabIndex,
-            disabled,
-            icons,
-            inputBackground,
-            inputVariant,
-            validation,
-            value,
-            hasWrapper,
-            hasContainer,
-            onClick,
-        },
-        ref
-    ) => {
-        return (
-            <StyledSelectButton
-                data-testid={
-                    (hasContainer || hasWrapper || icons?.left) && testid
-                        ? `${testid}.SelectContainer.SelectButton`
-                        : testid
-                }
-                ref={ref}
-                className={classNames(
-                    (hasContainer || hasWrapper || icons?.left) && className
-                        ? "SelectButton"
-                        : className,
-                    { WithListOpen: isOpen }
-                )}
-                onClick={onClick}
-                id={id}
-                tabIndex={tabIndex}
-                disabled={disabled}
-                aria-disabled={disabled && "true"}
-                $disabled={disabled}
-                $inputBackground={inputBackground}
-                $inputVariant={inputVariant}
-                $validationStatus={validation?.status}
-                $hasOptions={!!options}
-            >
-                {value}
-            </StyledSelectButton>
-        )
-    }
-)

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

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

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

@@ -1,22 +0,0 @@
-/*=============================================== Select styles ===============================================*/
-
-import styled from "styled-components"
-import { FONT_WEIGHTS, setDefaultTheme } from "../../"
-import { InputBaseMixin } from "../ComponentsMixins"
-import type { ILibSelectButtonStyles } from "./subtypes"
-
-const SelectContainer = styled.div`
-    position: relative;
-    width: 100%;
-`
-
-const StyledSelectButton = styled.button<ILibSelectButtonStyles>`
-    ${InputBaseMixin}
-    text-align: left;
-    font-weight: ${FONT_WEIGHTS.REGULAR};
-    cursor: ${({ $hasOptions }) => ($hasOptions ? "pointer" : "default")};
-`
-
-setDefaultTheme([SelectContainer, StyledSelectButton])
-
-export { SelectContainer, StyledSelectButton }

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

@@ -1,32 +0,0 @@
-/*=============================================== Select sub components types ===============================================*/
-
-import type { MouseEventHandler } from "react"
-import type { ILibSelect } from "./types"
-import type { ILibInputBaseMixin } from "../ComponentsMixins"
-
-// ! DO NOT EXPORT THOSE TYPES, ONLY USE THEM IN SELECT COMPONENTS
-
-export interface ILibSelectButton
-    extends Pick<
-        ILibSelect,
-        | "data-testid"
-        | "className"
-        | "value"
-        | "id"
-        | "tabIndex"
-        | "disabled"
-        | "icons"
-        | "inputVariant"
-        | "inputBackground"
-        | "validation"
-        | "options"
-    > {
-    onClick?: MouseEventHandler<HTMLButtonElement>
-    isOpen: boolean
-    hasContainer: boolean
-    hasWrapper: boolean
-}
-
-export interface ILibSelectButtonStyles extends ILibInputBaseMixin {
-    $hasOptions: boolean
-}

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

@@ -1,33 +0,0 @@
-/*=============================================== Select types ===============================================*/
-
-import type {
-    LibComponentBase,
-    LibIcon,
-    LibInputListDirection,
-    DispatchState,
-    LibInputPrefixAndSuffix,
-} from "../../types"
-import type {
-    ILibInputBase,
-    LibInputWithValidation,
-} from "../InputComponents/types"
-
-export type ILibSelect = Omit<LibComponentBase<HTMLDivElement>, "prefix"> &
-    ILibInputBase &
-    LibInputWithValidation & {
-        value: string
-        setValue: DispatchState<string>
-        options?: Array<string>
-        disabled?: boolean
-        listDirection?: LibInputListDirection
-        tabIndex?: number
-        prefix?: LibInputPrefixAndSuffix
-        icons?: {
-            left?: LibIcon
-            caret?: LibIcon
-        }
-        iconSizes?: {
-            left?: number
-            caret?: number
-        }
-    }

package/dist/lib/components/Skeleton/Skeleton.tsx

@@ -1,60 +0,0 @@
-/*=============================================== Skeleton component ===============================================*/
-
-import { forwardRef } from "react"
-import { StyledSkeleton } from "./styles"
-import type { ILibSkeleton } from "./types"
-
-/**
- * @description Returns a Skeleton component
- * @link https://documentation-components-react.vercel.app/components/skeleton
- * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop width?: string | number
- * @prop maxWidth?: string | number
- * @prop height?: string | number
- * @prop backgroundColor?: Any color from the library
- * @prop aspectRatio?: string
- * @prop borderRadius?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | { topLeft?: LibRadiuses; topRight?: LibRadiuses; bottomLeft?: LibRadiuses; bottomRight?: LibRadiuses }
- * @prop flex?: string | number
- * @prop flexGrow?: string | number
- * @prop animation?: "pulse" | "shine"
- */
-export const Skeleton = forwardRef<HTMLDivElement, ILibSkeleton>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            width = 100,
-            maxWidth = "100%",
-            height = 100,
-            backgroundColor = "gray-100",
-            aspectRatio,
-            borderRadius,
-            flex,
-            flexGrow,
-            animation,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledSkeleton
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                $width={width}
-                $maxWidth={maxWidth}
-                $height={height}
-                $backgroundColor={backgroundColor}
-                $aspectRatio={aspectRatio}
-                $borderRadius={borderRadius}
-                $flex={flex}
-                $flexGrow={flexGrow}
-                $animation={animation}
-                {...rest}
-            />
-        )
-    }
-)