@julseb-lib/react 0.0.84 → 0.0.86

package/dist/lib/hooks/useMergeRefs.ts

@@ -1,16 +1,19 @@
-/*=============================================== useMergeRefs ===============================================*/
-
-import {
-    useMemo,
-    type Ref,
-    type RefCallback,
-    type MutableRefObject,
-} from "react"
+import { useMemo, type Ref, type RefCallback, type RefObject } from "react"
 
 /**
- * @description Hook to add possibility to add multiple refs to an element
- * @link https://documentation-components-react.vercel.app/helpers/hooks#useMergeRefs
- * @argument refs: Array<Ref<Instance> | undefined>
+ * useMergeRefs is a hook to merge multiple refs into a single ref callback.
+ *
+ * @function
+ * @template Instance
+ * @param {Array<Ref<Instance> | undefined>} refs - Array of refs to merge.
+ * @returns {RefCallback<Instance> | null} A ref callback that assigns the value to all provided refs, or null if all refs are undefined.
+ * @see https://documentation-components-react.vercel.app/helpers/hooks#useMergeRefs
+ *
+ * @example
+ * const ref1 = useRef(null)
+ * const ref2 = useRef(null)
+ * const mergedRef = useMergeRefs([ref1, ref2])
+ * <div ref={mergedRef} />
  */
 export const useMergeRefs = <Instance>(
     refs: Array<Ref<Instance> | undefined>
@@ -25,7 +28,7 @@ export const useMergeRefs = <Instance>(
                 if (typeof ref === "function") {
                     ref(value)
                 } else if (ref != null) {
-                    ;(ref as MutableRefObject<Instance | null>).current = value
+                    ;(ref as RefObject<Instance | null>).current = value
                 }
             })
         }

package/dist/lib/hooks/useMinWidth.tsx

@@ -1,11 +1,15 @@
-/*=============================================== useMinWidth ===============================================*/
-
 import { useState, useEffect } from "react"
 
 /**
- * @description Hook to detect if an element is larger than a set width
- * @link https://documentation-components-react.vercel.app/helpers/hooks#useMinWidth
- * @argument width: number
+ * useMinWidth is a hook to detect if the window width is greater than or equal to a specified value.
+ *
+ * @function
+ * @param {number} width - The minimum width to check against (in pixels).
+ * @returns {boolean} Returns true if the window width is greater than or equal to the specified width, otherwise false.
+ * @see https://documentation-components-react.vercel.app/helpers/hooks#useMinWidth
+ *
+ * @example
+ * const isDesktop = useMinWidth(1024)
  */
 export const useMinWidth = (width: number): boolean => {
     const [isMin, setIsMin] = useState<boolean>(false)

package/dist/lib/hooks/usePaginatedData.tsx

@@ -1,5 +1,3 @@
-/*=============================================== usePaginatedData ===============================================*/
-
 import { useSearchParams } from "react-router-dom"
 
 interface IUsePaginatedData<T> {
@@ -8,10 +6,17 @@ interface IUsePaginatedData<T> {
 }
 
 /**
- * @description Hook to use with Pagination or Paginator components
- * @link https://documentation-components-react.vercel.app/helpers/hooks#usePaginatedData
- * @argument data: Array<T> => to define
- * @argument defaultLimit?: number
+ * usePaginatedData is a hook to paginate an array of data, returning the current page's data and total number of pages.
+ *
+ * @function
+ * @template T
+ * @param {Array<T>} data - The array of data to paginate.
+ * @param {number} [defaultLimit=20] - The number of items per page.
+ * @returns {{ paginatedData: Array<T>, totalPages: number }} An object containing the paginated data and total number of pages.
+ * @see https://documentation-components-react.vercel.app/helpers/hooks#usePaginatedData
+ *
+ * @example
+ * const { paginatedData, totalPages } = usePaginatedData(dataArray, 10)
  */
 export const usePaginatedData = <T,>(
     data: Array<T>,

package/dist/lib/hooks/usePagination.tsx

@@ -1,5 +1,3 @@
-/*=============================================== usePaginationNavigation ===============================================*/
-
 import { useCallback } from "react"
 import { useSearchParams } from "react-router-dom"
 import { scrollToTop } from "@julseb-lib/utils"
@@ -13,12 +11,24 @@ interface ILibUsePaginationNavigation {
 }
 
 /**
- * @description Hook to use for building Pagination or Paginator buttons
- * @link https://documentation-components-react.vercel.app/helpers/hooks#usePagination
- * @prop currentPage: number
- * @prop setCurrentPage: Dispatch<SetStateAction<number>>
- * @prop queries?: Array<Array<string>>
- * @prop totalPages?: number
+ * usePagination is a hook to handle pagination logic and URL query updates for paginated components.
+ *
+ * @function
+ * @param {Object} params - Pagination parameters.
+ * @param {number} params.currentPage - The current page number.
+ * @param {DispatchState<number>} params.setCurrentPage - State setter for the current page.
+ * @param {Array<Array<string>>} [params.queries] - Additional query parameters to include in the URL.
+ * @param {number} [params.totalPages] - Total number of pages (used for bounds checking).
+ * @returns {{ handlePrev: () => void, handleNext: () => void, handlePage: (n: number) => void }} Pagination handlers for previous, next, and specific page navigation.
+ * @see https://documentation-components-react.vercel.app/helpers/hooks#usePagination
+ *
+ * @example
+ * const { handlePrev, handleNext, handlePage } = usePagination({
+ *   currentPage,
+ *   setCurrentPage,
+ *   queries,
+ *   totalPages
+ * })
  */
 export const usePagination = ({
     currentPage,

package/dist/lib/hooks/useTouchScreen.tsx

@@ -1,10 +1,14 @@
-/*=============================================== useTouchScreen ===============================================*/
-
 import { useState, useLayoutEffect } from "react"
 
 /**
- * @description Hook to detect if the device is a touch screen
- * @link https://documentation-components-react.vercel.app/helpers/hooks#useTouchScreen
+ * useTouchScreen is a hook to detect if the device is a touch screen.
+ *
+ * @function
+ * @returns {boolean} Returns true if the device supports touch events, otherwise false.
+ * @see https://documentation-components-react.vercel.app/helpers/hooks#useTouchScreen
+ *
+ * @example
+ * const isTouch = useTouchScreen()
  */
 export const useTouchScreen = (): boolean => {
     const [isTouchScreen, setIsTouchScreen] = useState<boolean>(false)

package/dist/lib/hooks/useTranslation.tsx

@@ -1,5 +1,3 @@
-/*=============================================== useTranslation ===============================================*/
-
 import { useState, useEffect } from "react"
 import { detectLanguage } from "@julseb-lib/utils"
 import type { TranslateLang } from "../types"
@@ -7,9 +5,24 @@ import type { TranslateLang } from "../types"
 let currentLanguage = detectLanguage() || "en"
 
 /**
- * @description Hook to detect the language, and return translated content
- * @link https://documentation-components-react.vercel.app/helpers/hooks#useTranslation
- * @argument translations: [language: string]: { [key: string]: string }
+ * useTranslation is a hook to detect the language and return translated content.
+ *
+ * @function
+ * @param {TranslateLang} translations - An object containing translations for each language, structured as { [language: string]: { [key: string]: string } }.
+ * @returns {{
+ *   translate: (key: string) => string | undefined,
+ *   setLanguage: (lang: string) => void,
+ *   language: string,
+ *   languages: string[]
+ * }} An object with a translate function, language setter, current language, and available languages.
+ * @see https://documentation-components-react.vercel.app/helpers/hooks#useTranslation
+ *
+ * @example
+ * const { translate, setLanguage, language, languages } = useTranslation({
+ *   en: { hello: "Hello" },
+ *   fr: { hello: "Bonjour" }
+ * })
+ * translate("hello") // "Hello" or "Bonjour" depending on language
  */
 export const useTranslation = (translations: TranslateLang) => {
     const [language, setLanguage] = useState<string>(currentLanguage)

package/dist/lib/icons/ArrowUp.tsx

@@ -1,15 +1,14 @@
-/*=============================================== ArrowUp ===============================================*/
-
+import type { FC } from "react"
 import { StyledIcon } from "./styles"
 import type { ILibIcon } from "./types"
 
-export const ArrowUp = ({
+export const ArrowUp: FC<ILibIcon> = ({
     "data-testid": testid,
     className,
     size = 64,
     color = "currentColor",
     ...rest
-}: ILibIcon) => {
+}) => {
     return (
         <StyledIcon
             data-testid={testid}

package/dist/lib/icons/Bold.tsx

@@ -1,15 +1,14 @@
-/*=============================================== Bold ===============================================*/
-
+import type { FC } from "react"
 import { StyledIcon } from "./styles"
 import type { ILibIcon } from "./types"
 
-export const Bold = ({
+export const Bold: FC<ILibIcon> = ({
     "data-testid": testid,
     className,
     size = 64,
     color = "currentColor",
     ...rest
-}: ILibIcon) => {
+}) => {
     return (
         <StyledIcon
             data-testid={testid}

package/dist/lib/icons/Calendar.tsx

@@ -1,15 +1,14 @@
-/*=============================================== Calendar ===============================================*/
-
+import type { FC } from "react"
 import { StyledIcon } from "./styles"
 import type { ILibIcon } from "./types"
 
-export const Calendar = ({
+export const Calendar: FC<ILibIcon> = ({
     "data-testid": testid,
     className,
     size = 64,
     color = "currentColor",
     ...rest
-}: ILibIcon) => {
+}) => {
     return (
         <StyledIcon
             data-testid={testid}

package/dist/lib/icons/CaretDown.tsx

@@ -1,15 +1,14 @@
-/*=============================================== CaretDown ===============================================*/
-
+import type { FC } from "react"
 import { StyledIcon } from "./styles"
 import type { ILibIcon } from "./types"
 
-export const CaretDown = ({
+export const CaretDown: FC<ILibIcon> = ({
     "data-testid": testid,
     className,
     size = 64,
     color = "currentColor",
     ...rest
-}: ILibIcon) => {
+}) => {
     return (
         <StyledIcon
             data-testid={testid}

package/dist/lib/icons/Check.tsx

@@ -1,15 +1,14 @@
-/*=============================================== Check ===============================================*/
-
+import type { FC } from "react"
 import { StyledIcon } from "./styles"
 import type { ILibIcon } from "./types"
 
-export const Check = ({
+export const Check: FC<ILibIcon> = ({
     "data-testid": testid,
     className,
     size = 64,
     color = "currentColor",
     ...rest
-}: ILibIcon) => {
+}) => {
     return (
         <StyledIcon
             data-testid={testid}

package/dist/lib/icons/CheckCircle.tsx

@@ -1,15 +1,14 @@
-/*=============================================== CheckCircle ===============================================*/
-
+import type { FC } from "react"
 import { StyledIcon } from "./styles"
 import type { ILibIcon } from "./types"
 
-export const CheckCircle = ({
+export const CheckCircle: FC<ILibIcon> = ({
     "data-testid": testid,
     className,
     size = 64,
     color = "currentColor",
     ...rest
-}: ILibIcon) => {
+}) => {
     return (
         <StyledIcon
             data-testid={testid}

package/dist/lib/icons/ChevronDown.tsx

@@ -1,15 +1,14 @@
-/*=============================================== ChevronDown ===============================================*/
-
+import type { FC } from "react"
 import { StyledIcon } from "./styles"
 import type { ILibIcon } from "./types"
 
-export const ChevronDown = ({
+export const ChevronDown: FC<ILibIcon> = ({
     "data-testid": testid,
     className,
     size = 64,
     color = "currentColor",
     ...rest
-}: ILibIcon) => {
+}) => {
     return (
         <StyledIcon
             data-testid={testid}

package/dist/lib/icons/ChevronLeft.tsx

@@ -1,15 +1,14 @@
-/*=============================================== ChevronLeft ===============================================*/
-
+import type { FC } from "react"
 import { StyledIcon } from "./styles"
 import type { ILibIcon } from "./types"
 
-export const ChevronLeft = ({
+export const ChevronLeft: FC<ILibIcon> = ({
     "data-testid": testid,
     className,
     size = 64,
     color = "currentColor",
     ...rest
-}: ILibIcon) => {
+}) => {
     return (
         <StyledIcon
             data-testid={testid}

package/dist/lib/icons/ChevronRight.tsx

@@ -1,15 +1,14 @@
-/*=============================================== ChevronRight ===============================================*/
-
+import type { FC } from "react"
 import { StyledIcon } from "./styles"
 import type { ILibIcon } from "./types"
 
-export const ChevronRight = ({
+export const ChevronRight: FC<ILibIcon> = ({
     "data-testid": testid,
     className,
     size = 64,
     color = "currentColor",
     ...rest
-}: ILibIcon) => {
+}) => {
     return (
         <StyledIcon
             data-testid={testid}

package/dist/lib/icons/ChevronUp.tsx

@@ -1,15 +1,14 @@
-/*=============================================== ChevronUp ===============================================*/
-
+import type { FC } from "react"
 import { StyledIcon } from "./styles"
 import type { ILibIcon } from "./types"
 
-export const ChevronUp = ({
+export const ChevronUp: FC<ILibIcon> = ({
     "data-testid": testid,
     className,
     size = 64,
     color = "currentColor",
     ...rest
-}: ILibIcon) => {
+}) => {
     return (
         <StyledIcon
             data-testid={testid}

package/dist/lib/icons/Clipboard.tsx

@@ -1,15 +1,14 @@
-/*=============================================== Clipboard ===============================================*/
-
+import type { FC } from "react"
 import { StyledIcon } from "./styles"
 import type { ILibIcon } from "./types"
 
-export const Clipboard = ({
+export const Clipboard: FC<ILibIcon> = ({
     "data-testid": testid,
     className,
     size = 64,
     color = "currentColor",
     ...rest
-}: ILibIcon) => {
+}) => {
     return (
         <StyledIcon
             data-testid={testid}

package/dist/lib/icons/Clock.tsx

@@ -1,15 +1,14 @@
-/*=============================================== Clock ===============================================*/
-
+import type { FC } from "react"
 import { StyledIcon } from "./styles"
 import type { ILibIcon } from "./types"
 
-export const Clock = ({
+export const Clock: FC<ILibIcon> = ({
     "data-testid": testid,
     className,
     size = 64,
     color = "currentColor",
     ...rest
-}: ILibIcon) => {
+}) => {
     return (
         <StyledIcon
             data-testid={testid}

package/dist/lib/icons/Close.tsx

@@ -1,15 +1,14 @@
-/*=============================================== Close ===============================================*/
-
+import type { FC } from "react"
 import { StyledIcon } from "./styles"
 import type { ILibIcon } from "./types"
 
-export const Close = ({
+export const Close: FC<ILibIcon> = ({
     "data-testid": testid,
     className,
     size = 64,
     color = "currentColor",
     ...rest
-}: ILibIcon) => {
+}) => {
     return (
         <StyledIcon
             data-testid={testid}

package/dist/lib/icons/CloseCircle.tsx

@@ -1,15 +1,14 @@
-/*=============================================== CloseCircle ===============================================*/
-
+import type { FC } from "react"
 import { StyledIcon } from "./styles"
 import type { ILibIcon } from "./types"
 
-export const CloseCircle = ({
+export const CloseCircle: FC<ILibIcon> = ({
     "data-testid": testid,
     className,
     size = 64,
     color = "currentColor",
     ...rest
-}: ILibIcon) => {
+}) => {
     return (
         <StyledIcon
             data-testid={testid}

package/dist/lib/icons/Code.tsx

@@ -1,15 +1,14 @@
-/*=============================================== Code ===============================================*/
-
+import type { FC } from "react"
 import { StyledIcon } from "./styles"
 import type { ILibIcon } from "./types"
 
-export const Code = ({
+export const Code: FC<ILibIcon> = ({
     "data-testid": testid,
     className,
     size = 64,
     color = "currentColor",
     ...rest
-}: ILibIcon) => {
+}) => {
     return (
         <StyledIcon
             data-testid={testid}

package/dist/lib/icons/CodeBlock.tsx

@@ -1,15 +1,14 @@
-/*=============================================== CodeBlock ===============================================*/
-
+import type { FC } from "react"
 import { StyledIcon } from "./styles"
 import type { ILibIcon } from "./types"
 
-export const CodeBlock = ({
+export const CodeBlock: FC<ILibIcon> = ({
     "data-testid": testid,
     className,
     size = 64,
     color = "currentColor",
     ...rest
-}: ILibIcon) => {
+}) => {
     return (
         <StyledIcon
             data-testid={testid}

package/dist/lib/icons/Comment.tsx

@@ -1,15 +1,14 @@
-/*=============================================== Comment ===============================================*/
-
+import type { FC } from "react"
 import { StyledIcon } from "./styles"
 import type { ILibIcon } from "./types"
 
-export const Comment = ({
+export const Comment: FC<ILibIcon> = ({
     "data-testid": testid,
     className,
     size = 64,
     color = "currentColor",
     ...rest
-}: ILibIcon) => {
+}) => {
     return (
         <StyledIcon
             data-testid={testid}

package/dist/lib/icons/Drag.tsx

@@ -1,15 +1,14 @@
-/*=============================================== Drag ===============================================*/
-
+import type { FC } from "react"
 import { StyledIcon } from "./styles"
 import type { ILibIcon } from "./types"
 
-export const Drag = ({
+export const Drag: FC<ILibIcon> = ({
     "data-testid": testid,
     className,
     size = 64,
     color = "currentColor",
     ...rest
-}: ILibIcon) => {
+}) => {
     return (
         <StyledIcon
             data-testid={testid}

package/dist/lib/icons/Edit.tsx

@@ -1,15 +1,14 @@
-/*=============================================== Edit ===============================================*/
-
+import type { FC } from "react"
 import { StyledIcon } from "./styles"
 import type { ILibIcon } from "./types"
 
-export const Edit = ({
+export const Edit: FC<ILibIcon> = ({
     "data-testid": testid,
     className,
     size = 64,
     color = "currentColor",
     ...rest
-}: ILibIcon) => {
+}) => {
     return (
         <StyledIcon
             data-testid={testid}

package/dist/lib/icons/EditorCode.tsx

@@ -1,15 +1,14 @@
-/*=============================================== EditorCode ===============================================*/
-
+import type { FC } from "react"
 import { StyledIcon } from "./styles"
 import type { ILibIcon } from "./types"
 
-export const EditorCode = ({
+export const EditorCode: FC<ILibIcon> = ({
     "data-testid": testid,
     className,
     size = 64,
     color = "currentColor",
     ...rest
-}: ILibIcon) => {
+}) => {
     return (
         <StyledIcon
             data-testid={testid}

package/dist/lib/icons/EditorLive.tsx

@@ -1,15 +1,14 @@
-/*=============================================== EditorLive ===============================================*/
-
+import type { FC } from "react"
 import { StyledIcon } from "./styles"
 import type { ILibIcon } from "./types"
 
-export const EditorLive = ({
+export const EditorLive: FC<ILibIcon> = ({
     "data-testid": testid,
     className,
     size = 64,
     color = "currentColor",
     ...rest
-}: ILibIcon) => {
+}) => {
     return (
         <StyledIcon
             data-testid={testid}

package/dist/lib/icons/EditorPreview.tsx

@@ -1,15 +1,14 @@
-/*=============================================== EditorPreview ===============================================*/
-
+import type { FC } from "react"
 import { StyledIcon } from "./styles"
 import type { ILibIcon } from "./types"
 
-export const EditorPreview = ({
+export const EditorPreview: FC<ILibIcon> = ({
     "data-testid": testid,
     className,
     size = 64,
     color = "currentColor",
     ...rest
-}: ILibIcon) => {
+}) => {
     return (
         <StyledIcon
             data-testid={testid}

package/dist/lib/icons/Hide.tsx

@@ -1,15 +1,14 @@
-/*=============================================== Hide ===============================================*/
-
+import type { FC } from "react"
 import { StyledIcon } from "./styles"
 import type { ILibIcon } from "./types"
 
-export const Hide = ({
+export const Hide: FC<ILibIcon> = ({
     "data-testid": testid,
     className,
     size = 64,
     color = "currentColor",
     ...rest
-}: ILibIcon) => {
+}) => {
     return (
         <StyledIcon
             data-testid={testid}