@julseb-lib/react 0.0.84 → 0.0.86

package/dist/lib/components/Cover/Cover.tsx

@@ -1,72 +1,79 @@
-/*=============================================== Cover component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { StyledCover, CoverImg, CoverContent } from "./styles"
 import type { ILibCover } from "./types"
 
 /**
- * @description Returns a Cover component
- * @link https://documentation-components-react.vercel.app/components/cover
- * @extends ILibFlexbox
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop img: string
- * @prop alt?: string
- * @prop overlay?: "black-50" | "black-80" | "white-50" | "white-80" | "gradient-black" | "gradient-white"
- * @prop height?: number | string
- * @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" }
+ * Cover component for displaying a full-width background image with overlay and flexible content.
+ *
+ * @component
+ * @param {Object} props - Cover 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.img - Image source for the cover background.
+ * @param {string} [props.alt] - Alt text for the background image.
+ * @param {"black-50" | "black-80" | "white-50" | "white-80" | "gradient-black" | "gradient-white"} [props.overlay] - Overlay style for the cover.
+ * @param {number|string} [props.height="100vh"] - Height of the cover.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" | Object} [props.padding="xxl"] - Padding for the content.
+ * @param {"column" | "row"} [props.flexDirection="column"] - Flex direction for the content.
+ * @param {"center" | "start" | "end" | "flex-start" | "flex-end" | "baseline" | "stretch"} [props.justifyContent="center"] - Justify content for the content.
+ * @param {"center" | "start" | "end" | "flex-start" | "flex-end" | "baseline" | "stretch"} [props.alignItems="center"] - Align items for the content.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.gap="s"] - Gap between children.
+ * @param {string} [props.className] - Additional class names.
+ * @param {ReactNode} [props.children] - Content to display inside the cover.
+ * @returns {JSX.Element} The rendered Cover component.
+ *
+ * @example
+ * <Cover img="/cover.jpg" overlay="black-50" height="60vh">
+ *   <h1>Welcome</h1>
+ * </Cover>
  */
-export const Cover = forwardRef<HTMLDivElement, ILibCover>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            children,
-            img,
-            alt,
-            overlay,
-            height = "100vh",
-            gap = "s",
-            flexDirection = "column",
-            justifyContent = "center",
-            alignItems = "center",
-            padding = "xxl",
-            className,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledCover
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                className={className}
-                $height={height}
+export const Cover: FC<ILibCover> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    img,
+    alt,
+    overlay,
+    height = "100vh",
+    gap = "s",
+    flexDirection = "column",
+    justifyContent = "center",
+    alignItems = "center",
+    padding = "xxl",
+    className,
+    ...rest
+}) => {
+    return (
+        <StyledCover
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            className={className}
+            $height={height}
+            $overlay={overlay}
+            {...rest}
+        >
+            <CoverImg
+                data-testid={testid && `${testid}.CoverImage`}
+                className={className && "CoverImage"}
+                src={img}
+                alt={alt}
+            />
+
+            <CoverContent
+                data-testid={testid && `${testid}.CoverContent`}
+                className={className && "CoverContent"}
+                flexDirection={flexDirection}
+                gap={gap}
+                justifyContent={justifyContent}
+                alignItems={alignItems}
                 $overlay={overlay}
-                {...rest}
+                $padding={padding}
             >
-                <CoverImg
-                    data-testid={testid && `${testid}.CoverImage`}
-                    className={className && "CoverImage"}
-                    src={img}
-                    alt={alt}
-                />
-
-                <CoverContent
-                    data-testid={testid && `${testid}.CoverContent`}
-                    className={className && "CoverContent"}
-                    flexDirection={flexDirection}
-                    gap={gap}
-                    justifyContent={justifyContent}
-                    alignItems={alignItems}
-                    $overlay={overlay}
-                    $padding={padding}
-                >
-                    {children}
-                </CoverContent>
-            </StyledCover>
-        )
-    }
-)
+                {children}
+            </CoverContent>
+        </StyledCover>
+    )
+}

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== Cover styles ===============================================*/
-
 import styled, { css } from "styled-components"
 import { stringifyPx } from "@julseb-lib/utils"
 import { setDefaultTheme, Image, Flexbox, Mixins } from "../../"

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

@@ -1,5 +1,3 @@
-/*=============================================== Cover types ===============================================*/
-
 import type { LibComponentBase, LibOverlays, ILibPadding } from "../../types"
 import type { ILibFlexbox } from "../Flexbox/types"
 

package/dist/lib/components/Datepicker/Calendar.tsx

@@ -1,5 +1,3 @@
-/*=============================================== Calendar component ===============================================*/
-
 import { useState, type MouseEvent } from "react"
 import { uuid, formatDate as formatDateUtil } from "@julseb-lib/utils"
 import classNames from "classnames"
@@ -72,6 +70,7 @@ export const Calendar = ({
     const range = (start: number, end: number) => {
         const length = Math.abs((end - start) / 1)
 
+        // @ts-ignore
         const { result } = Array.from({ length }).reduce(
             ({ result, current }) => ({
                 result: [...result, current],

package/dist/lib/components/Datepicker/Datepicker.tsx

@@ -1,6 +1,4 @@
-/*=============================================== Datepicker component ===============================================*/
-
-import { forwardRef, useRef, useState, type ChangeEvent } from "react"
+import { useRef, useState, type ChangeEvent, type FC } from "react"
 import { convertDateShort } from "@julseb-lib/utils"
 import { useClickOutside } from "../../"
 import { Calendar as CalendarIcon } from "../../icons"
@@ -20,235 +18,238 @@ import { InputDate } from "./styles"
 import type { ILibDatepicker } from "./types"
 
 /**
- * @description Returns a Datepicker component
- * @link https://documentation-components-react.vercel.app/components/datepicker
- * @extends HTMLInputElement
- * @prop data-testid?: string
- * @prop ref?: ForwardedRef<HTMLInputElement>
- * @prop value: string
- * @prop setValue: Dispatch<SetStateAction<string>>
- * @prop minDate?: string
- * @prop maxDate?: string
- * @prop texts?: { weekDays?: { mon?: string; tue?: string; wed?: string; etc. }; months?: { jan?: string; feb?: string; mar?: string; etc. } }
- * @prop icons?: { prev?: string | JSX.Element; next?: string | JSX.Element; calendar?: string | JSX.Element; left?: string | JSX.Element }
- * @prop iconsSizes?: { prev?: number; next?: number; calendar?: number; left?: number }
- * @prop iconsBaseUrl?: string
- * @prop calendarDirection?: "up" | "down"
- * @prop inputVariant?: "rounded" | "pill"
- * @prop disabled?: boolean
- * @prop tabIndex?: number
- * @prop prefix?: string | JSX.Element
- * @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
- * @prop inputAndListContainerStyle?: CSSProperties
- * @prop id?: string
+ * Datepicker component for selecting dates with optional min/max, localization, and custom icons.
+ *
+ * @component
+ * @param {Object} props - Datepicker props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {Ref<HTMLInputElement>} [props.ref] - Ref forwarded to the input element.
+ * @param {string} props.value - Current value of the date input.
+ * @param {Dispatch<SetStateAction<string>>} props.setValue - Setter for the date value.
+ * @param {string} [props.minDate] - Minimum selectable date (YYYY-MM-DD).
+ * @param {string} [props.maxDate] - Maximum selectable date (YYYY-MM-DD).
+ * @param {Object} [props.texts] - Localization texts for week days and months.
+ * @param {Object} [props.icons] - Custom icons for navigation and calendar.
+ * @param {Object} [props.iconsSizes] - Sizes for the icons.
+ * @param {string} [props.iconBaseUrl] - Base URL for icons.
+ * @param {"up" | "down"} [props.calendarDirection="down"] - Direction in which the calendar appears.
+ * @param {"rounded" | "pill"} [props.inputVariant] - Input variant style.
+ * @param {"light" | "dark"} [props.inputBackground] - Input background style.
+ * @param {boolean} [props.disabled] - Disable the input.
+ * @param {number} [props.tabIndex] - Tab index for the input.
+ * @param {string|JSX.Element} [props.prefix] - Prefix element or string.
+ * @param {string} [props.label] - Label for the input.
+ * @param {string} [props.labelComment] - Comment for the label.
+ * @param {string} [props.helper] - Helper text above the input.
+ * @param {string|Object} [props.helperBottom] - Helper text or element below the input.
+ * @param {Object} [props.validation] - Validation status and message.
+ * @param {CSSProperties} [props.containerStyle] - Style for the outer container.
+ * @param {CSSProperties} [props.inputAndListContainerStyle] - Style for the input and list container.
+ * @param {string} [props.id] - HTML id attribute.
+ * @returns {JSX.Element} The rendered Datepicker component.
+ *
+ * @example
+ * <Datepicker
+ *   value={date}
+ *   setValue={setDate}
+ *   minDate="2024-01-01"
+ *   maxDate="2024-12-31"
+ *   label="Select a date"
+ * />
  */
-export const Datepicker = forwardRef<HTMLInputElement, ILibDatepicker>(
-    (
-        {
-            "data-testid": testid,
-            className,
-            minDate,
-            maxDate,
-            texts,
-            value,
-            setValue,
-            icons,
-            iconsSizes,
-            iconBaseUrl,
-            calendarDirection = "down",
-            inputVariant,
-            inputBackground,
-            disabled,
-            tabIndex,
-            id,
-            label,
-            labelComment,
-            helper,
-            helperBottom,
-            validation,
-            containerStyle,
-            inputAndListContainerStyle,
-            prefix,
-            ...rest
-        },
-        ref
-    ) => {
-        const [isOpen, setIsOpen] = useState(false)
-        const el = useRef<HTMLDivElement>(null)
-        const handleClickOutside = () => setIsOpen(false)
-        useClickOutside(el, handleClickOutside)
+export const Datepicker: FC<ILibDatepicker> = ({
+    "data-testid": testid,
+    ref,
+    className,
+    minDate,
+    maxDate,
+    texts,
+    value,
+    setValue,
+    icons,
+    iconsSizes,
+    iconBaseUrl,
+    calendarDirection = "down",
+    inputVariant,
+    inputBackground,
+    disabled,
+    tabIndex,
+    id,
+    label,
+    labelComment,
+    helper,
+    helperBottom,
+    validation,
+    containerStyle,
+    inputAndListContainerStyle,
+    prefix,
+    ...rest
+}) => {
+    const [isOpen, setIsOpen] = useState(false)
+    const el = useRef<HTMLDivElement>(null as any)
+    const handleClickOutside = () => setIsOpen(false)
+    useClickOutside(el, handleClickOutside)
 
-        const hasContainer: boolean = !!(
-            label ||
-            labelComment ||
-            helper ||
-            helperBottom ||
-            validation
-        )
+    const hasContainer: boolean = !!(
+        label ||
+        labelComment ||
+        helper ||
+        helperBottom ||
+        validation
+    )
 
-        const handleOpen = () => {
-            if (!disabled) setIsOpen(true)
-            else return
-        }
+    const handleOpen = () => {
+        if (!disabled) setIsOpen(true)
+        else return
+    }
 
-        const handleChange = (e: ChangeEvent<HTMLInputElement>) =>
-            setValue(e.target.value)
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) =>
+        setValue(e.target.value)
 
-        return (
-            <InputContainer
+    return (
+        <InputContainer
+            data-testid={testid}
+            id={id}
+            label={label}
+            labelComment={labelComment}
+            helper={helper}
+            helperBottom={helperBottom}
+            validation={validation}
+            value={value}
+            className={className}
+            iconBaseUrl={iconBaseUrl}
+            style={containerStyle}
+            hasListOpen={isOpen}
+            counter={undefined}
+            maxLength={undefined}
+        >
+            <InputAndListContainer
                 data-testid={testid}
-                id={id}
-                label={label}
-                labelComment={labelComment}
-                helper={helper}
-                helperBottom={helperBottom}
-                validation={validation}
-                value={value}
                 className={className}
-                iconBaseUrl={iconBaseUrl}
-                style={containerStyle}
                 hasListOpen={isOpen}
-                counter={undefined}
-                maxLength={undefined}
+                isParent={!hasContainer}
+                ref={el}
+                inputAndListContainerStyle={inputAndListContainerStyle}
             >
-                <InputAndListContainer
+                <InputWrapper
                     data-testid={testid}
                     className={className}
+                    isTextArea={false}
+                    inputBackground={inputBackground}
+                    inputVariant={inputVariant}
+                    validationStatus={validation?.status}
                     hasListOpen={isOpen}
-                    isParent={!hasContainer}
-                    ref={el}
-                    inputAndListContainerStyle={inputAndListContainerStyle}
+                    hasContainer
                 >
-                    <InputWrapper
+                    {(icons?.left || prefix) && (
+                        <InputLeftContainer
+                            data-testid={testid}
+                            className={className}
+                            disabled={disabled}
+                        >
+                            {prefix && (
+                                <InputPrefix
+                                    data-testid={testid}
+                                    className={className}
+                                    prefix={prefix}
+                                    inputBackground={inputBackground}
+                                />
+                            )}
+
+                            {icons?.left && (
+                                <InputIcon
+                                    data-testid={testid}
+                                    className={className}
+                                    icon={icons.left}
+                                    iconSize={iconsSizes?.left}
+                                    validationStatus={validation?.status}
+                                    disabled={disabled}
+                                    inputBackground={inputBackground}
+                                    inputVariant={inputVariant}
+                                    iconBaseUrl={iconBaseUrl}
+                                />
+                            )}
+                        </InputLeftContainer>
+                    )}
+
+                    <InputDate
+                        data-testid={
+                            testid && `${testid}.InputWrapper.InputDate`
+                        }
+                        className={className && "InputDate"}
+                        ref={ref}
+                        onClick={handleOpen}
+                        onFocus={handleOpen}
+                        tabIndex={tabIndex}
+                        value={convertDateShort(value)}
+                        onChange={handleChange}
+                        disabled={disabled}
+                        $inputVariant={inputVariant}
+                        $validationStatus={validation?.status}
+                        $inputBackground={inputBackground}
+                        $disabled={disabled}
+                        {...rest}
+                    />
+
+                    <InputRightContainer
                         data-testid={testid}
                         className={className}
-                        isTextArea={false}
-                        inputBackground={inputBackground}
-                        inputVariant={inputVariant}
-                        validationStatus={validation?.status}
-                        hasListOpen={isOpen}
-                        hasContainer
+                        disabled={disabled}
+                        withBorder={false}
+                        withPadding
                     >
-                        {(icons?.left || prefix) && (
-                            <InputLeftContainer
-                                data-testid={testid}
-                                className={className}
-                                disabled={disabled}
-                            >
-                                {prefix && (
-                                    <InputPrefix
-                                        data-testid={testid}
-                                        className={className}
-                                        prefix={prefix}
-                                        inputBackground={inputBackground}
-                                    />
-                                )}
-
-                                {icons?.left && (
-                                    <InputIcon
-                                        data-testid={testid}
-                                        className={className}
-                                        icon={icons.left}
-                                        iconSize={iconsSizes?.left}
-                                        validationStatus={validation?.status}
-                                        disabled={disabled}
-                                        inputBackground={inputBackground}
-                                        inputVariant={inputVariant}
-                                        iconBaseUrl={iconBaseUrl}
+                        <InputButton
+                            data-testid={testid}
+                            className={className}
+                            icon={
+                                icons?.calendar ?? (
+                                    <CalendarIcon
+                                        data-testid={
+                                            testid &&
+                                            `${testid}.InputWrapper.InputRightContainer.Button.CalendarIcon`
+                                        }
+                                        className={className && "CalendarIcon"}
+                                        size={iconsSizes?.calendar ?? 16}
                                     />
-                                )}
-                            </InputLeftContainer>
-                        )}
-
-                        <InputDate
-                            data-testid={
-                                testid && `${testid}.InputWrapper.InputDate`
+                                )
                             }
-                            className={className && "InputDate"}
-                            ref={ref}
+                            iconSize={iconsSizes?.calendar}
                             onClick={handleOpen}
-                            onFocus={handleOpen}
-                            tabIndex={tabIndex}
-                            value={convertDateShort(value)}
-                            onChange={handleChange}
+                            aria-label="Calendar"
                             disabled={disabled}
-                            $inputVariant={inputVariant}
-                            $validationStatus={validation?.status}
-                            $inputBackground={inputBackground}
-                            $disabled={disabled}
-                            {...rest}
+                            inputBackground={inputBackground}
+                            validationStatus={validation?.status}
                         />
 
-                        <InputRightContainer
-                            data-testid={testid}
-                            className={className}
-                            disabled={disabled}
-                            withBorder={false}
-                            withPadding
-                        >
-                            <InputButton
+                        {validation && (
+                            <InputValidationIcon
                                 data-testid={testid}
                                 className={className}
-                                icon={
-                                    icons?.calendar ?? (
-                                        <CalendarIcon
-                                            data-testid={
-                                                testid &&
-                                                `${testid}.InputWrapper.InputRightContainer.Button.CalendarIcon`
-                                            }
-                                            className={
-                                                className && "CalendarIcon"
-                                            }
-                                            size={iconsSizes?.calendar ?? 16}
-                                        />
-                                    )
-                                }
-                                iconSize={iconsSizes?.calendar}
-                                onClick={handleOpen}
-                                aria-label="Calendar"
-                                disabled={disabled}
+                                validation={validation}
                                 inputBackground={inputBackground}
-                                validationStatus={validation?.status}
                             />
+                        )}
+                    </InputRightContainer>
+                </InputWrapper>
 
-                            {validation && (
-                                <InputValidationIcon
-                                    data-testid={testid}
-                                    className={className}
-                                    validation={validation}
-                                    inputBackground={inputBackground}
-                                />
-                            )}
-                        </InputRightContainer>
-                    </InputWrapper>
-
-                    <Calendar
-                        data-testid={testid}
-                        className={className}
-                        value={value}
-                        setValue={setValue}
-                        minDate={minDate}
-                        maxDate={maxDate}
-                        texts={texts}
-                        icons={icons}
-                        iconsSizes={iconsSizes}
-                        iconBaseUrl={iconBaseUrl}
-                        calendarDirection={calendarDirection}
-                        validation={validation}
-                        inputBackground={inputBackground}
-                        isOpen={isOpen}
-                        setIsOpen={setIsOpen}
-                    />
-                </InputAndListContainer>
-            </InputContainer>
-        )
-    }
-)
+                <Calendar
+                    data-testid={testid}
+                    className={className}
+                    value={value}
+                    setValue={setValue}
+                    minDate={minDate}
+                    maxDate={maxDate}
+                    texts={texts}
+                    icons={icons}
+                    iconsSizes={iconsSizes}
+                    iconBaseUrl={iconBaseUrl}
+                    calendarDirection={calendarDirection}
+                    validation={validation}
+                    inputBackground={inputBackground}
+                    isOpen={isOpen}
+                    setIsOpen={setIsOpen}
+                />
+            </InputAndListContainer>
+        </InputContainer>
+    )
+}

package/dist/lib/components/Datepicker/data.ts

@@ -1,5 +1,3 @@
-/*=============================================== Calendar data ===============================================*/
-
 export const allDays: Array<number> = [
     31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31,
 ]

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== Datepicker styles ===============================================*/
-
 import styled, { css } from "styled-components"
 import {
     setDefaultTheme,