@julseb-lib/react 0.0.85 → 0.0.87

package/dist/lib/components/ProgressCircle/ProgressCircle.tsx

@@ -1,6 +1,4 @@
-/*=============================================== ProgressCircle component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { LibIcon } from "../LibIcon"
 import { ProgressCircleFn } from "./ProgressCircleFn"
 import { Value } from "./Value"
@@ -12,82 +10,87 @@ import {
 import type { ILibProgressCircle } from "./types"
 
 /**
- * @description Returns a ProgressCircle component
- * @link https://documentation-components-react.vercel.app/components/progress-circle
+ * ProgressCircle component for displaying a circular progress indicator with optional value, icon, color, and animation.
+ *
+ * @component
  * @extends SVGElement
- * @prop data-testid?: string
- * @prop ref?: ForwardedRef<SVGElement>
- * @prop value: number
- * @prop noAnimation?: boolean
- * @prop color?: Any color from the library
- * @prop containerStyle?: CSSProperties
- * @prop showValue?: boolean => only if icon is not defined
- * @prop icon?: string | JSX.Element => only if showValue is not set to true
- * @prop iconSize?: number => only if icon is defined
- * @prop iconBaseUrl?: string => only if icon is defined
+ * @param {Object} props - ProgressCircle props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {Ref<SVGElement>} [props.ref] - Ref forwarded to the SVG element.
+ * @param {number} props.value - Current value of the progress circle.
+ * @param {boolean} [props.noAnimation] - Disable animation.
+ * @param {string} [props.color="primary"] - Any color from the library.
+ * @param {CSSProperties} [props.containerStyle] - Style for the container element.
+ * @param {boolean} [props.showValue] - Show the value in the center (only if icon is not defined).
+ * @param {string | JSX.Element} [props.icon] - Icon to display in the center (only if showValue is not set to true).
+ * @param {number} [props.iconSize] - Size of the icon (only if icon is defined).
+ * @param {string} [props.iconBaseUrl] - Base URL for the icon (only if icon is defined).
+ * @param {string} [props.className] - Additional class names.
+ * @param {any} [props.rest] - Additional props passed to the SVG element.
+ * @returns {JSX.Element} The rendered ProgressCircle component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/progress-circle
+ * @example
+ * <ProgressCircle value={75} showValue color="success" />
+ * <ProgressCircle value={50} icon="check" iconSize={32} color="primary" />
  */
-export const ProgressCircle = forwardRef<SVGElement, ILibProgressCircle>(
-    (
-        {
-            "data-testid": testid,
-            value,
-            noAnimation,
-            showValue,
-            icon,
-            iconSize,
-            iconBaseUrl,
-            color = "primary",
-            className,
-            containerStyle,
-            ...rest
-        },
-        ref
-    ) => {
-        const progressFnProps = {
-            "data-testid":
-                testid &&
-                (showValue || icon ? `${testid}.ProgressCircle` : testid),
-            ref,
-            noAnimation,
-            value,
-            color,
-            className: showValue || icon ? "ProgressCircle" : className,
-            ...rest,
-        }
-
-        return showValue || icon ? (
-            <ProgressCircleContainer
-                data-testid={testid}
-                className={className}
-                style={containerStyle}
-            >
-                <ProgressCircleFn {...progressFnProps} />
+export const ProgressCircle: FC<ILibProgressCircle> = ({
+    "data-testid": testid,
+    ref,
+    value,
+    noAnimation,
+    showValue,
+    icon,
+    iconSize,
+    iconBaseUrl,
+    color = "primary",
+    className,
+    containerStyle,
+    ...rest
+}) => {
+    const progressFnProps = {
+        "data-testid":
+            testid && (showValue || icon ? `${testid}.ProgressCircle` : testid),
+        ref,
+        noAnimation,
+        value,
+        color,
+        className: showValue || icon ? "ProgressCircle" : className,
+        ...rest,
+    }
 
-                <Content
-                    data-testid={testid && `${testid}.Content`}
-                    className={className && "Content"}
-                >
-                    {icon && (
-                        <LibIcon
-                            data-testid={testid && `${testid}.Icon`}
-                            className={className && "ProgressIcon"}
-                            icon={icon}
-                            size={iconSize ?? PROGRESS_CIRCLE_SIZE * 0.4}
-                            color="gray"
-                            baseUrl={iconBaseUrl}
-                        />
-                    )}
+    return showValue || icon ? (
+        <ProgressCircleContainer
+            data-testid={testid}
+            className={className}
+            style={containerStyle}
+        >
+            <ProgressCircleFn {...progressFnProps} />
 
-                    <Value
-                        data-testid={testid}
-                        className={className}
-                        value={value}
-                        showValue={showValue}
+            <Content
+                data-testid={testid && `${testid}.Content`}
+                className={className && "Content"}
+            >
+                {icon && (
+                    <LibIcon
+                        data-testid={testid && `${testid}.Icon`}
+                        className={className && "ProgressIcon"}
+                        icon={icon}
+                        size={iconSize ?? PROGRESS_CIRCLE_SIZE * 0.4}
+                        color="gray"
+                        baseUrl={iconBaseUrl}
                     />
-                </Content>
-            </ProgressCircleContainer>
-        ) : (
-            <ProgressCircleFn {...progressFnProps} />
-        )
-    }
-)
+                )}
+
+                <Value
+                    data-testid={testid}
+                    className={className}
+                    value={value}
+                    showValue={showValue}
+                />
+            </Content>
+        </ProgressCircleContainer>
+    ) : (
+        <ProgressCircleFn {...progressFnProps} />
+    )
+}

package/dist/lib/components/ProgressCircle/ProgressCircleFn.tsx

@@ -1,48 +1,42 @@
-/*=============================================== ProgressFn ===============================================*/
-
-import { forwardRef, useEffect, useState } from "react"
+import { useEffect, useState, type FC } from "react"
 import { cleanPercentage } from "./clean-percentage"
 import { Circle } from "./Circle"
 import { StyledProgressCircle, PROGRESS_CIRCLE_SIZE } from "./styles"
 import type { ILibProgressCircle } from "./types"
 
-export const ProgressCircleFn = forwardRef(
-    (
-        {
-            "data-testid": testid,
-            noAnimation,
-            value,
-            color = "primary",
-            ...rest
-        }: ILibProgressCircle,
-        ref
-    ) => {
-        const pct = cleanPercentage(value)
+export const ProgressCircleFn: FC<ILibProgressCircle> = ({
+    "data-testid": testid,
+    ref,
+    noAnimation,
+    value,
+    color = "primary",
+    ...rest
+}) => {
+    const pct = cleanPercentage(value)
 
-        const [animatedValue, setAnimatedValue] = useState(0)
+    const [animatedValue, setAnimatedValue] = useState(0)
 
-        useEffect(() => {
-            setAnimatedValue(pct)
-        }, [pct])
+    useEffect(() => {
+        setAnimatedValue(pct)
+    }, [pct])
 
-        return (
-            <StyledProgressCircle
-                data-testid={testid}
-                width={PROGRESS_CIRCLE_SIZE}
-                height={PROGRESS_CIRCLE_SIZE}
-                viewBox="0 0 200 200"
-                ref={ref}
-                {...rest}
-            >
-                <g transform={`rotate(-90 ${"100 100"})`}>
-                    <Circle value={100} color="gray-200" />
-                    <Circle
-                        value={!noAnimation ? animatedValue : pct}
-                        noAnimation={noAnimation}
-                        color={color}
-                    />
-                </g>
-            </StyledProgressCircle>
-        )
-    }
-)
+    return (
+        <StyledProgressCircle
+            data-testid={testid}
+            width={PROGRESS_CIRCLE_SIZE}
+            height={PROGRESS_CIRCLE_SIZE}
+            viewBox="0 0 200 200"
+            ref={ref}
+            {...rest}
+        >
+            <g transform={`rotate(-90 ${"100 100"})`}>
+                <Circle value={100} color="gray-200" />
+                <Circle
+                    value={!noAnimation ? animatedValue : pct}
+                    noAnimation={noAnimation}
+                    color={color}
+                />
+            </g>
+        </StyledProgressCircle>
+    )
+}

package/dist/lib/components/ProgressCircle/Value.tsx

@@ -1,15 +1,14 @@
-/*=============================================== Value ===============================================*/
-
+import type { FC } from "react"
 import { SrOnly } from "../../"
 import { Value as StyledValue } from "./styles"
 import type { ILibProgressCircleValue } from "./subtypes"
 
-export const Value = ({
+export const Value: FC<ILibProgressCircleValue> = ({
     "data-testid": testid,
     className,
     showValue,
     value,
-}: ILibProgressCircleValue) => {
+}) => {
     if (!showValue)
         return (
             <SrOnly

package/dist/lib/components/ProgressCircle/clean-percentage.ts

@@ -1,5 +1,3 @@
-/*=============================================== Clean percentage ===============================================*/
-
 export function cleanPercentage(value: number) {
     const isNegativeOrNaN = !Number.isFinite(+value)
     const isTooHigh = value > 100

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== ProgressCircle styles ===============================================*/
-
 import styled from "styled-components"
 import { setDefaultTheme, Mixins, Text, TRANSITIONS } from "../../"
 import type { LibAllColors } from "../../types"

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

@@ -1,5 +1,3 @@
-/*=============================================== ProgressCircle sub components types ===============================================*/
-
 import type { ILibProgressCircle } from "./types"
 
 // ! DO NOT EXPORT THOSE TYPES, ONLY USE THEM IN PROGRESS_CIRCLE COMPONENTS

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

@@ -1,5 +1,3 @@
-/*=============================================== ProgressCircle types ===============================================*/
-
 import type { CSSProperties } from "react"
 import type { LibComponentBase, LibAllColors, LibIcon } from "../../types"
 

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

@@ -1,6 +1,4 @@
-/*=============================================== Rating component ===============================================*/
-
-import { forwardRef, useCallback } from "react"
+import { useCallback, type FC } from "react"
 import { generateNumbers } from "@julseb-lib/utils"
 import { Flexbox } from "../../"
 import { roundIconSize } from "../../lib-utils"
@@ -11,167 +9,170 @@ import { RatingButton, BUTTON_SIZE } from "./styles"
 import type { ILibRating } from "./types"
 
 /**
- * @description Returns a Rating component
- * @link https://documentation-components-react.vercel.app/components/rating
+ * Rating component for displaying a star-based rating input or read-only indicator with customizable icons, sizes, and labels.
+ *
+ * @component
  * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop rating: number
- * @prop setRating: Dispatch<SetStateAction<number>> => only if readOnly is not defined
- * @prop readOnly: boolean => only if setRating is not defined
- * @prop icons?: { default?: string | JSX.Element; checked?: string | JSX.Element }
- * @prop iconSizes?: { default?: number; checked?: 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 containerStyle?: CSSProperties
+ * @param {Object} props - Rating props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {Ref<HTMLDivElement>} [props.ref] - Ref forwarded to the root element.
+ * @param {string} [props.className] - Additional class names.
+ * @param {number} props.rating - Current rating value.
+ * @param {Dispatch<React.SetStateAction<number>>} [props.setRating] - Setter for the rating value (only if readOnly is not defined).
+ * @param {boolean} [props.readOnly] - If true, disables interaction (only if setRating is not defined).
+ * @param {{ default?: string | JSX.Element; checked?: string | JSX.Element }} [props.icons] - Custom icons for default and checked states.
+ * @param {{ default?: number; checked?: number }} [props.iconSizes] - Icon sizes for default and checked states.
+ * @param {string} [props.iconBaseUrl] - Base URL for icons.
+ * @param {string} [props.label] - Label for the rating input.
+ * @param {string} [props.labelComment] - Additional comment for the label.
+ * @param {string} [props.helper] - Helper text above the rating input.
+ * @param {string|Object} [props.helperBottom] - Helper text or element below the rating input.
+ * @param {Object} [props.validation] - Validation status and message.
+ * @param {string} [props.id] - ID for the rating input.
+ * @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 Rating component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/rating
+ * @example
+ * <Rating rating={3} setRating={setRating} label="Rate this" />
+ * <Rating rating={4} readOnly />
  */
-export const Rating = forwardRef<HTMLDivElement, ILibRating>(
-    (
-        {
-            "data-testid": testid,
-            className,
-            rating,
-            setRating,
-            readOnly,
-            iconSizes,
-            icons,
-            iconBaseUrl,
-            label,
-            labelComment,
-            helper,
-            helperBottom,
-            id,
-            validation,
-            containerStyle,
-            ...rest
-        },
-        ref
-    ) => {
-        const hasContainer = !!(
-            label ||
-            labelComment ||
-            helper ||
-            helperBottom ||
-            validation
-        )
+export const Rating: FC<ILibRating> = ({
+    "data-testid": testid,
+    ref,
+    className,
+    rating,
+    setRating,
+    readOnly,
+    iconSizes,
+    icons,
+    iconBaseUrl,
+    label,
+    labelComment,
+    helper,
+    helperBottom,
+    id,
+    validation,
+    containerStyle,
+    ...rest
+}) => {
+    const hasContainer = !!(
+        label ||
+        labelComment ||
+        helper ||
+        helperBottom ||
+        validation
+    )
 
-        const defaultIconSizes = {
-            default: roundIconSize(BUTTON_SIZE),
-            checked: roundIconSize(BUTTON_SIZE),
-        }
+    const defaultIconSizes = {
+        default: roundIconSize(BUTTON_SIZE),
+        checked: roundIconSize(BUTTON_SIZE),
+    }
 
-        const defaultIcons = {
-            default: (
-                <Star
-                    data-testid={
-                        testid &&
-                        `${testid}.RatingContainer.Button.Icon.Default`
-                    }
-                    className={className && "IconRatingDefault"}
-                    size={iconSizes?.default || defaultIconSizes.default}
-                />
-            ),
-            checked: (
-                <StarFull
-                    data-testid={
-                        testid &&
-                        `${testid}.RatingContainer.Button.Icon.Checked`
-                    }
-                    className={className && "IconRatingChecked"}
-                    size={iconSizes?.checked || defaultIconSizes.checked}
-                />
-            ),
-        }
+    const defaultIcons = {
+        default: (
+            <Star
+                data-testid={
+                    testid && `${testid}.RatingContainer.Button.Icon.Default`
+                }
+                className={className && "IconRatingDefault"}
+                size={iconSizes?.default || defaultIconSizes.default}
+            />
+        ),
+        checked: (
+            <StarFull
+                data-testid={
+                    testid && `${testid}.RatingContainer.Button.Icon.Checked`
+                }
+                className={className && "IconRatingChecked"}
+                size={iconSizes?.checked || defaultIconSizes.checked}
+            />
+        ),
+    }
 
-        const handleClick = useCallback(
-            (n: number) => {
-                setRating!(n + 1)
-            },
-            [setRating]
-        )
+    const handleClick = useCallback(
+        (n: number) => {
+            setRating!(n + 1)
+        },
+        [setRating]
+    )
 
-        return (
-            <InputContainer
-                data-testid={testid}
-                className={className}
-                id={id}
-                label={label}
-                labelComment={labelComment}
-                helper={helper}
-                helperBottom={helperBottom}
-                validation={validation}
-                value={rating}
-                counter={false}
-                maxLength={undefined}
-                iconBaseUrl={iconBaseUrl}
-                style={containerStyle}
-                hasListOpen={undefined}
+    return (
+        <InputContainer
+            data-testid={testid}
+            className={className}
+            id={id}
+            label={label}
+            labelComment={labelComment}
+            helper={helper}
+            helperBottom={helperBottom}
+            validation={validation}
+            value={rating}
+            counter={false}
+            maxLength={undefined}
+            iconBaseUrl={iconBaseUrl}
+            style={containerStyle}
+            hasListOpen={undefined}
+        >
+            <Flexbox
+                data-testid={
+                    hasContainer ? `${testid}.RatingContainer` : testid
+                }
+                className={hasContainer ? "RatingContainer" : className}
+                alignItems="center"
+                justifyContent="flex-start"
+                gap="xs"
+                ref={ref}
+                {...rest}
             >
-                <Flexbox
-                    data-testid={
-                        hasContainer ? `${testid}.RatingContainer` : testid
-                    }
-                    className={hasContainer ? "RatingContainer" : className}
-                    alignItems="center"
-                    justifyContent="flex-start"
-                    gap="xs"
-                    ref={ref}
-                    {...rest}
-                >
-                    {generateNumbers(0, 4).map(n => (
-                        <RatingButton
+                {generateNumbers(0, 4).map(n => (
+                    <RatingButton
+                        data-testid={
+                            testid && `${testid}.RatingContainer.Button`
+                        }
+                        className={
+                            className && n >= rating
+                                ? "ButtonRatingDefault"
+                                : "ButtonRatingChecked"
+                        }
+                        as={readOnly ? "span" : "button"}
+                        onClick={!readOnly ? () => handleClick(n) : undefined}
+                        type="button"
+                        $isReadOnly={readOnly || false}
+                        $validationStatus={validation?.status}
+                        key={n}
+                    >
+                        <LibIcon
                             data-testid={
-                                testid && `${testid}.RatingContainer.Button`
+                                testid &&
+                                (n >= rating
+                                    ? `${testid}.RatingContainer.Button.Icon.Default`
+                                    : `${testid}.RatingContainer.Button.Icon.Checked`)
                             }
                             className={
-                                className && n >= rating
-                                    ? "ButtonRatingDefault"
-                                    : "ButtonRatingChecked"
+                                className &&
+                                (n >= rating
+                                    ? "IconRatingDefault"
+                                    : "IconRatingChecked")
                             }
-                            as={readOnly ? "span" : "button"}
-                            onClick={
-                                !readOnly ? () => handleClick(n) : undefined
+                            icon={
+                                n >= rating
+                                    ? icons?.default || defaultIcons.default
+                                    : icons?.checked || defaultIcons.checked
                             }
-                            type="button"
-                            $isReadOnly={readOnly || false}
-                            $validationStatus={validation?.status}
-                            key={n}
-                        >
-                            <LibIcon
-                                data-testid={
-                                    testid &&
-                                    (n >= rating
-                                        ? `${testid}.RatingContainer.Button.Icon.Default`
-                                        : `${testid}.RatingContainer.Button.Icon.Checked`)
-                                }
-                                className={
-                                    className &&
-                                    (n >= rating
-                                        ? "IconRatingDefault"
-                                        : "IconRatingChecked")
-                                }
-                                icon={
-                                    n >= rating
-                                        ? icons?.default || defaultIcons.default
-                                        : icons?.checked || defaultIcons.checked
-                                }
-                                size={
-                                    n >= rating
-                                        ? iconSizes?.default ||
-                                          defaultIconSizes.default
-                                        : iconSizes?.checked ||
-                                          defaultIconSizes?.checked
-                                }
-                                baseUrl={iconBaseUrl}
-                            />
-                        </RatingButton>
-                    ))}
-                </Flexbox>
-            </InputContainer>
-        )
-    }
-)
+                            size={
+                                n >= rating
+                                    ? iconSizes?.default ||
+                                      defaultIconSizes.default
+                                    : iconSizes?.checked ||
+                                      defaultIconSizes?.checked
+                            }
+                            baseUrl={iconBaseUrl}
+                        />
+                    </RatingButton>
+                ))}
+            </Flexbox>
+        </InputContainer>
+    )
+}

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

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