@julseb-lib/react 0.0.63 → 0.0.64

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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