@julseb-lib/react 0.0.84 → 0.0.86

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

@@ -1,5 +1,3 @@
-/*=============================================== Rating styles ===============================================*/
-
 import styled, { css } from "styled-components"
 import { MEDIA, Mixins, setDefaultTheme } from "../../"
 import type { LibValidationStatus } from "../../types"

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

@@ -1,5 +1,3 @@
-/*=============================================== Rating types ===============================================*/
-
 import type { LibComponentBase, LibIcon, DispatchState } from "../../types"
 import type { ILibInputBase } from "../InputComponents/types"
 

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

@@ -1,11 +1,16 @@
-/*=============================================== 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
+ * ResetScroll component for automatically scrolling to the top of the page whenever the route path or search changes.
+ *
+ * @component
+ * @description Scrolls to the top of the page every time the path changes. Add it in your PageLayout.
+ * @see https://documentation-components-react.vercel.app/helpers/reset-scroll
+ * @returns {null} This component does not render anything.
+ *
+ * @example
+ * <ResetScroll />
  */
 export const ResetScroll = () => {
     const { pathname, search } = useLocation()

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

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

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

@@ -1,30 +1,45 @@
-/*=============================================== Section component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } 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
+ * Section component for rendering a layout section with customizable gap and element type.
+ *
+ * @component
  * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop gap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
+ * @param {Object} props - Section props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {ElementType} [props.as] - Custom element type to render as.
+ * @param {Ref<HTMLDivElement>} [props.ref] - Ref forwarded to the root element.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.gap="m"] - Gap between elements in the section.
+ * @param {ReactNode} [props.children] - Section content.
+ * @param {any} [props.rest] - Additional props passed to the root element.
+ * @returns {JSX.Element} The rendered Section component.
+ *
+ * @see https://documentation-components-react.vercel.app/layouts/section
+ * @example
+ * <Section gap="l">
+ *   <h2>Section Title</h2>
+ *   <p>Section content goes here.</p>
+ * </Section>
  */
-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>
-        )
-    }
-)
+export const Section: FC<ILibSection> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    gap = "m",
+    ...rest
+}) => {
+    return (
+        <StyledSection
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            $gap={gap}
+            {...rest}
+        >
+            {children}
+        </StyledSection>
+    )
+}

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== Section styles ===============================================*/
-
 import styled from "styled-components"
 import { setDefaultTheme, Mixins } from "../../"
 import type { LibSpacers } from "../../types"

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

@@ -1,5 +1,3 @@
-/*=============================================== Section types ===============================================*/
-
 import type { LibComponentBase, LibSpacers } from "../../types"
 
 export interface ILibSection extends LibComponentBase<HTMLDivElement> {

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

@@ -1,6 +1,4 @@
-/*=============================================== Select component ===============================================*/
-
-import { forwardRef, useEffect, type MouseEvent } from "react"
+import { useEffect, type FC, type MouseEvent } from "react"
 import { useClickOutside } from "../../"
 import {
     InputContainer,
@@ -22,263 +20,271 @@ import type { ILibSelect } from "./types"
 import type { ILibSelectButton } from "./subtypes"
 
 /**
- * @description Returns a Select component
- * @link https://documentation-components-react.vercel.app/components/select
+ * Select component for rendering a dropdown select input with customizable options, icons, validation, and styling.
+ *
+ * @component
  * @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
+ * @param {Object} props - Select props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {ElementType} [props.as] - Custom element type to render as.
+ * @param {Ref<HTMLDivElement>} [props.ref] - Ref forwarded to the root element.
+ * @param {string} props.value - Current selected value.
+ * @param {Dispatch<React.SetStateAction<string>>} props.setValue - Setter for the selected value.
+ * @param {Array<string>} [props.options] - Array of selectable options.
+ * @param {boolean} [props.disabled] - Disable the select input.
+ * @param {"up" | "down"} [props.listDirection] - Direction of the dropdown list.
+ * @param {number} [props.tabIndex] - Tab index for accessibility.
+ * @param {string | JSX.Element} [props.prefix] - Prefix element or string.
+ * @param {{ left?: string | JSX.Element; caret?: string | JSX.Element }} [props.icons] - Custom icons for left and caret.
+ * @param {{ left?: number; caret?: number }} [props.iconSizes] - Icon sizes for left and caret icons.
+ * @param {string} [props.label] - Label for the select input.
+ * @param {string} [props.labelComment] - Additional comment for the label.
+ * @param {string} [props.helper] - Helper text above the select input.
+ * @param {string | { text?: string; element?: React.ReactNode; textColor?: string; fontStyle?: CssFontStyle; icon?: string | JSX.Element; iconColor?: string; iconSize?: number }} [props.helperBottom] - Helper text or element below the select input.
+ * @param {{ status: LibValidationStatus; message?: string; iconNotPassed?: LibIcon; iconNotPassedSize?: number; iconPassed?: LibIcon; iconPassedSize?: number; iconBaseUrl?: string }} [props.validation] - Validation status and message.
+ * @param {string} [props.iconBaseUrl] - Base URL for icons.
+ * @param {"light" | "dark"} [props.inputBackground] - Input background style.
+ * @param {"rounded" | "pill"} [props.inputVariant="rounded"] - Input variant style.
+ * @param {CSSProperties} [props.containerStyle] - Style for the input container.
+ * @param {any} [props.rest] - Additional props passed to the root element.
+ * @returns {JSX.Element} The rendered Select component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/select
+ * @example
+ * <Select
+ *   value={selected}
+ *   setValue={setSelected}
+ *   options={["Option 1", "Option 2"]}
+ *   label="Choose an option"
+ * />
  */
-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)
+export const Select: FC<ILibSelect> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    className,
+    id,
+    label,
+    labelComment,
+    helper,
+    helperBottom,
+    validation,
+    inputVariant = "rounded",
+    inputBackground,
+    disabled,
+    value,
+    setValue,
+    options,
+    listDirection,
+    icons,
+    iconSizes,
+    iconBaseUrl,
+    tabIndex,
+    prefix,
+    containerStyle,
+    ...rest
+}) => {
+    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 defaultIconSizes = {
+        left: 16,
+        caret: 16,
+    }
 
-        const { isOpen, setIsOpen, cursor, listRef } = useKeyboardNavigation({
-            data: options || [],
-            value: value,
-            setValue: setValue,
-        })
+    const { isOpen, setIsOpen, cursor, listRef } = useKeyboardNavigation({
+        data: options || [],
+        value: value,
+        setValue: setValue,
+    })
 
-        useClickOutside(listRef, () => setIsOpen(false))
+    useClickOutside(listRef, () => setIsOpen(false))
 
-        const handleClick = (e: MouseEvent<HTMLDivElement>) => {
-            e.stopPropagation()
-            if (!isOpen && options && options.length > 1) setIsOpen(true)
-        }
+    const handleClick = (e: MouseEvent<HTMLDivElement>) => {
+        e.stopPropagation()
+        if (!isOpen && options && options.length > 1) setIsOpen(true)
+    }
 
-        useEffect(() => {
-            setIsOpen(false)
-        }, [value])
+    useEffect(() => {
+        setIsOpen(false)
+    }, [value])
 
-        const buttonProps: ILibSelectButton = {
-            "data-testid": testid,
-            className,
-            value,
-            id,
-            tabIndex,
-            disabled,
-            icons,
-            inputBackground,
-            inputVariant,
-            validation,
-            options,
-            isOpen,
-            hasContainer,
-            hasWrapper,
-        }
+    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} />
+    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}
+    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}
             >
-                <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}
                 >
-                    <InputWrapper
-                        data-testid={testid}
-                        className={className}
-                        hasContainer={hasContainer}
-                        hasListOpen={isOpen}
-                        isTextArea={false}
-                        inputVariant={inputVariant}
-                        inputBackground={inputBackground}
-                        validationStatus={validation?.status}
-                    >
-                        {(prefix || icons?.left) && (
-                            <InputLeftContainer
+                    {(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}
-                            >
-                                <InputPrefix
+                                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}
-                                    prefix={prefix}
+                                    validation={validation}
                                     inputBackground={inputBackground}
                                 />
+                            )}
 
-                                <InputIcon
+                            {hasOptions && (
+                                <InputButton
                                     data-testid={testid}
                                     className={className}
-                                    icon={icons?.left}
+                                    inputBackground={inputBackground}
+                                    icon={
+                                        icons?.caret || (
+                                            <CaretDown
+                                                data-testid={
+                                                    testid &&
+                                                    `${testid}.Button.Caret`
+                                                }
+                                                className={className && "Caret"}
+                                                size={
+                                                    iconSizes?.caret ||
+                                                    defaultIconSizes.caret
+                                                }
+                                            />
+                                        )
+                                    }
                                     iconSize={
-                                        iconSizes?.left || defaultIconSizes.left
+                                        iconSizes?.caret ||
+                                        defaultIconSizes.caret
                                     }
-                                    validationStatus={validation?.status}
                                     disabled={disabled}
-                                    inputBackground={inputBackground}
-                                    inputVariant={inputVariant}
+                                    aria-label="Caret down"
+                                    validationStatus={validation?.status}
                                     iconBaseUrl={iconBaseUrl}
                                 />
-                            </InputLeftContainer>
-                        )}
-
-                        <SelectButton {...buttonProps} />
+                            )}
+                        </InputRightContainer>
+                    )}
+                </InputWrapper>
 
-                        {(hasOptions || validation) && (
-                            <InputRightContainer
+                {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}
-                                disabled={disabled}
-                                withBorder={false}
-                                withPadding
+                                inputBackground={inputBackground}
+                                validationStatus={validation?.status}
+                                onClick={() => setValue(option)}
+                                isActive={value === option}
+                                isHovered={cursor === i && value !== option}
+                                key={`${option}-${i}`}
                             >
-                                {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>
-        )
-    }
-)
+                                {option}
+                            </ListInputItem>
+                        ))}
+                    </ListInput>
+                )}
+            </SelectContainer>
+        </InputContainer>
+    )
+}