@julseb-lib/react 0.0.61 → 0.0.64

package/dist/lib/hooks/useMergeRefs.ts

@@ -0,0 +1,33 @@
+/*=============================================== useMergeRefs ===============================================*/
+
+import {
+    useMemo,
+    type Ref,
+    type RefCallback,
+    type MutableRefObject,
+} 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>
+ */
+export const useMergeRefs = <Instance>(
+    refs: Array<Ref<Instance> | undefined>
+): RefCallback<Instance> | null => {
+    return useMemo(() => {
+        if (refs.every(ref => ref == null)) {
+            return null
+        }
+
+        return value => {
+            refs.forEach(ref => {
+                if (typeof ref === "function") {
+                    ref(value)
+                } else if (ref != null) {
+                    ;(ref as MutableRefObject<Instance | null>).current = value
+                }
+            })
+        }
+    }, refs)
+}

package/dist/lib/hooks/useMinWidth.tsx

@@ -0,0 +1,28 @@
+/*=============================================== 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
+ */
+export const useMinWidth = (width: number): boolean => {
+    const [isMin, setIsMin] = useState<boolean>(false)
+
+    useEffect(() => {
+        const detectSize = () => {
+            if (window.innerWidth >= width) {
+                setIsMin(true)
+            } else {
+                setIsMin(false)
+            }
+        }
+
+        detectSize()
+
+        window.addEventListener("resize", () => detectSize())
+    }, [width])
+
+    return isMin
+}

package/dist/lib/hooks/usePaginatedData.tsx

@@ -0,0 +1,37 @@
+/*=============================================== usePaginatedData ===============================================*/
+
+import { useSearchParams } from "react-router-dom"
+
+interface IUsePaginatedData<T> {
+    paginatedData: Array<T>
+    totalPages: number
+}
+
+/**
+ * @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
+ */
+export const usePaginatedData = <T,>(
+    data: Array<T>,
+    defaultLimit = 20
+): IUsePaginatedData<T> => {
+    const [query] = useSearchParams()
+    const page = query.get("page") || 1
+    const currentPage: number =
+        typeof page === "string" ? parseInt(page) : page || 1
+
+    const getPaginatedData = () => {
+        const startIndex = currentPage * defaultLimit - defaultLimit
+        const endIndex = startIndex + defaultLimit
+        return data?.slice(startIndex, endIndex)
+    }
+
+    const getNumberOfPages = () => Math.ceil((data?.length || 0) / defaultLimit)
+
+    return {
+        paginatedData: getPaginatedData(),
+        totalPages: getNumberOfPages(),
+    }
+}

package/dist/lib/hooks/usePagination.tsx

@@ -0,0 +1,112 @@
+/*=============================================== usePaginationNavigation ===============================================*/
+
+import { useCallback } from "react"
+import { useSearchParams } from "react-router-dom"
+import { scrollToTop } from "@julseb-lib/utils"
+import type { DispatchState } from "../types"
+
+interface ILibUsePaginationNavigation {
+    currentPage: number
+    setCurrentPage: DispatchState<number>
+    queries?: Array<Array<string>>
+    totalPages?: number
+}
+
+/**
+ * @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
+ */
+export const usePagination = ({
+    currentPage,
+    setCurrentPage,
+    queries,
+    totalPages,
+}: ILibUsePaginationNavigation) => {
+    const [_, setSearchParams] = useSearchParams()
+
+    const handlePrev = useCallback(() => {
+        const newPage = currentPage - 1
+
+        setCurrentPage(newPage)
+
+        setSearchParams(
+            queries
+                ? {
+                      page: newPage.toString(),
+                      ...Object.fromEntries(queries),
+                  }
+                : { page: newPage.toString() },
+            { replace: true }
+        )
+
+        scrollToTop()
+    }, [currentPage, queries, setCurrentPage, setSearchParams])
+
+    const handleNext = useCallback(() => {
+        const newPage = currentPage + 1
+
+        setCurrentPage(newPage)
+
+        setSearchParams(
+            queries
+                ? {
+                      page: newPage.toString(),
+                      ...Object.fromEntries(queries),
+                  }
+                : { page: newPage.toString() },
+            { replace: true }
+        )
+
+        scrollToTop()
+    }, [currentPage, queries, setCurrentPage, setSearchParams])
+
+    const handlePage = (n: number) => {
+        if (n < 1) {
+            setCurrentPage(1)
+            setSearchParams(
+                queries
+                    ? {
+                          page: "1",
+                          ...Object.fromEntries(queries),
+                      }
+                    : { page: "1" },
+                { replace: true }
+            )
+            return
+        }
+
+        if (totalPages && n > totalPages) {
+            setCurrentPage(totalPages)
+            setSearchParams(
+                queries
+                    ? {
+                          page: totalPages.toString(),
+                          ...Object.fromEntries(queries),
+                      }
+                    : { page: totalPages.toString() },
+                { replace: true }
+            )
+            return
+        }
+
+        setCurrentPage(n)
+
+        setSearchParams(
+            queries
+                ? {
+                      page: n.toString(),
+                      ...Object.fromEntries(queries),
+                  }
+                : { page: n.toString() },
+            { replace: true }
+        )
+
+        scrollToTop()
+    }
+
+    return { handlePrev, handleNext, handlePage }
+}

package/dist/lib/hooks/useTouchScreen.tsx

@@ -0,0 +1,21 @@
+/*=============================================== 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
+ */
+export const useTouchScreen = (): boolean => {
+    const [isTouchScreen, setIsTouchScreen] = useState<boolean>(false)
+
+    useLayoutEffect(() => {
+        const isTouchDevice = () => {
+            return "ontouchstart" in window || navigator.maxTouchPoints > 0
+        }
+
+        setIsTouchScreen(isTouchDevice())
+    }, [])
+
+    return isTouchScreen
+}

package/dist/lib/hooks/useTranslation.tsx

@@ -0,0 +1,30 @@
+/*=============================================== useTranslation ===============================================*/
+
+import { useState, useEffect } from "react"
+import { detectLanguage } from "@julseb-lib/utils"
+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 }
+ */
+export const useTranslation = (translations: TranslateLang) => {
+    const [language, setLanguage] = useState<string>(currentLanguage)
+    const languages = Object.keys(translations)
+
+    useEffect(() => {
+        currentLanguage = language || "en"
+    }, [language])
+
+    const translate = (key: string) => translations?.[language]?.[key]
+
+    return {
+        translate,
+        setLanguage,
+        language,
+        languages,
+    }
+}

package/dist/lib/icons/ArrowUp.tsx

@@ -0,0 +1,32 @@
+/*=============================================== ArrowUp ===============================================*/
+
+import { StyledIcon } from "./styles"
+import type { ILibIcon } from "./types"
+
+export const ArrowUp = ({
+    "data-testid": testid,
+    className,
+    size = 64,
+    color = "currentColor",
+    ...rest
+}: ILibIcon) => {
+    return (
+        <StyledIcon
+            data-testid={testid}
+            className={className}
+            width={size}
+            height={size}
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            $size={size}
+            $color={color}
+            {...rest}
+        >
+            <path
+                d="M11 8.414V18H13V8.414L17.293 12.707L18.707 11.293L12 4.586L5.29303 11.293L6.70703 12.707L11 8.414Z"
+                fill="currentColor"
+            />
+        </StyledIcon>
+    )
+}

package/dist/lib/icons/Bold.tsx

@@ -0,0 +1,32 @@
+/*=============================================== Bold ===============================================*/
+
+import { StyledIcon } from "./styles"
+import type { ILibIcon } from "./types"
+
+export const Bold = ({
+    "data-testid": testid,
+    className,
+    size = 64,
+    color = "currentColor",
+    ...rest
+}: ILibIcon) => {
+    return (
+        <StyledIcon
+            data-testid={testid}
+            className={className}
+            width={size}
+            height={size}
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            $color={color}
+            $size={size}
+            {...rest}
+        >
+            <path
+                d="M17.061 11.22C17.6659 10.442 17.9961 9.48551 18 8.5C18 6.019 15.981 4 13.5 4H6V19H14C16.481 19 18.5 16.981 18.5 14.5C18.4987 13.8837 18.3702 13.2743 18.1226 12.7099C17.875 12.1456 17.5136 11.6383 17.061 11.22ZM13.5 7C14.327 7 15 7.673 15 8.5C15 9.327 14.327 10 13.5 10H9V7H13.5ZM14 16H9V13H14C14.827 13 15.5 13.673 15.5 14.5C15.5 15.327 14.827 16 14 16Z"
+                fill={color}
+            />
+        </StyledIcon>
+    )
+}

package/dist/lib/icons/Calendar.tsx

@@ -0,0 +1,40 @@
+/*=============================================== Calendar ===============================================*/
+
+import { StyledIcon } from "./styles"
+import type { ILibIcon } from "./types"
+
+export const Calendar = ({
+    "data-testid": testid,
+    className,
+    size = 64,
+    color = "currentColor",
+    ...rest
+}: ILibIcon) => {
+    return (
+        <StyledIcon
+            data-testid={testid}
+            className={className}
+            width={size}
+            height={size}
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            $size={size}
+            $color={color}
+            {...rest}
+        >
+            <path d="M9 11H7V13H9V11Z" fill="currentColor" />
+            <path d="M9 15H7V17H9V15Z" fill="currentColor" />
+            <path d="M13 11H11V13H13V11Z" fill="currentColor" />
+            <path d="M13 15H11V17H13V15Z" fill="currentColor" />
+            <path d="M17 11H15V13H17V11Z" fill="currentColor" />
+            <path d="M17 15H15V17H17V15Z" fill="currentColor" />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M19 22H5C3.897 22 3 21.103 3 20V6C3 4.897 3.897 4 5 4H7V2H9V4H15V2H17V4H19C20.103 4 21 4.897 21 6V20C21 21.103 20.103 22 19 22ZM19.001 20L19 8H5V20H19.001Z"
+                fill="currentColor"
+            />
+        </StyledIcon>
+    )
+}

package/dist/lib/icons/CaretDown.tsx

@@ -0,0 +1,32 @@
+/*=============================================== CaretDown ===============================================*/
+
+import { StyledIcon } from "./styles"
+import type { ILibIcon } from "./types"
+
+export const CaretDown = ({
+    "data-testid": testid,
+    className,
+    size = 64,
+    color = "currentColor",
+    ...rest
+}: ILibIcon) => {
+    return (
+        <StyledIcon
+            data-testid={testid}
+            className={className}
+            width={size}
+            height={size}
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            $size={size}
+            $color={color}
+            {...rest}
+        >
+            <path
+                d="M11.998 17L18.998 9H4.99799L11.998 17Z"
+                fill="currentColor"
+            />
+        </StyledIcon>
+    )
+}

package/dist/lib/icons/Check.tsx

@@ -0,0 +1,32 @@
+/*=============================================== Check ===============================================*/
+
+import { StyledIcon } from "./styles"
+import type { ILibIcon } from "./types"
+
+export const Check = ({
+    "data-testid": testid,
+    className,
+    size = 64,
+    color = "currentColor",
+    ...rest
+}: ILibIcon) => {
+    return (
+        <StyledIcon
+            data-testid={testid}
+            className={className}
+            width={size}
+            height={size}
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            $size={size}
+            $color={color}
+            {...rest}
+        >
+            <path
+                d="M10 15.586L6.707 12.293L5.293 13.707L10 18.414L19.707 8.707L18.293 7.293L10 15.586Z"
+                fill="currentColor"
+            />
+        </StyledIcon>
+    )
+}

package/dist/lib/icons/CheckCircle.tsx

@@ -0,0 +1,38 @@
+/*=============================================== CheckCircle ===============================================*/
+
+import { StyledIcon } from "./styles"
+import type { ILibIcon } from "./types"
+
+export const CheckCircle = ({
+    "data-testid": testid,
+    className,
+    size = 64,
+    color = "currentColor",
+    ...rest
+}: ILibIcon) => {
+    return (
+        <StyledIcon
+            data-testid={testid}
+            className={className}
+            width={size}
+            height={size}
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            $size={size}
+            $color={color}
+            {...rest}
+        >
+            <path
+                d="M7.69999 11.292L9.99899 13.587L15.293 8.293L16.707 9.707L10.001 16.413L6.28799 12.708L7.69999 11.292Z"
+                fill="currentColor"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M2 12C2 6.486 6.486 2 12 2C17.514 2 22 6.486 22 12C22 17.514 17.514 22 12 22C6.486 22 2 17.514 2 12ZM4 12C4 16.411 7.589 20 12 20C16.411 20 20 16.411 20 12C20 7.589 16.411 4 12 4C7.589 4 4 7.589 4 12Z"
+                fill="currentColor"
+            />
+        </StyledIcon>
+    )
+}

package/dist/lib/icons/ChevronDown.tsx

@@ -0,0 +1,32 @@
+/*=============================================== ChevronDown ===============================================*/
+
+import { StyledIcon } from "./styles"
+import type { ILibIcon } from "./types"
+
+export const ChevronDown = ({
+    "data-testid": testid,
+    className,
+    size = 64,
+    color = "currentColor",
+    ...rest
+}: ILibIcon) => {
+    return (
+        <StyledIcon
+            data-testid={testid}
+            className={className}
+            width={size}
+            height={size}
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            $size={size}
+            $color={color}
+            {...rest}
+        >
+            <path
+                d="M16.293 8.4395L12 12.7325L7.707 8.4395L6.293 9.8535L12 15.5605L17.707 9.8535L16.293 8.4395Z"
+                fill="currentColor"
+            />
+        </StyledIcon>
+    )
+}

package/dist/lib/icons/ChevronLeft.tsx

@@ -0,0 +1,32 @@
+/*=============================================== ChevronLeft ===============================================*/
+
+import { StyledIcon } from "./styles"
+import type { ILibIcon } from "./types"
+
+export const ChevronLeft = ({
+    "data-testid": testid,
+    className,
+    size = 64,
+    color = "currentColor",
+    ...rest
+}: ILibIcon) => {
+    return (
+        <StyledIcon
+            data-testid={testid}
+            className={className}
+            width={size}
+            height={size}
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            $size={size}
+            $color={color}
+            {...rest}
+        >
+            <path
+                d="M14.1465 6.293L8.4395 12L14.1465 17.707L15.5605 16.293L11.2675 12L15.5605 7.707L14.1465 6.293Z"
+                fill="currentColor"
+            />
+        </StyledIcon>
+    )
+}

package/dist/lib/icons/ChevronRight.tsx

@@ -0,0 +1,32 @@
+/*=============================================== ChevronRight ===============================================*/
+
+import { StyledIcon } from "./styles"
+import type { ILibIcon } from "./types"
+
+export const ChevronRight = ({
+    "data-testid": testid,
+    className,
+    size = 64,
+    color = "currentColor",
+    ...rest
+}: ILibIcon) => {
+    return (
+        <StyledIcon
+            data-testid={testid}
+            className={className}
+            width={size}
+            height={size}
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            $size={size}
+            $color={color}
+            {...rest}
+        >
+            <path
+                d="M9.8535 17.707L15.5605 12L9.8535 6.293L8.4395 7.707L12.7325 12L8.4395 16.293L9.8535 17.707Z"
+                fill="currentColor"
+            />
+        </StyledIcon>
+    )
+}

package/dist/lib/icons/ChevronUp.tsx

@@ -0,0 +1,32 @@
+/*=============================================== ChevronUp ===============================================*/
+
+import { StyledIcon } from "./styles"
+import type { ILibIcon } from "./types"
+
+export const ChevronUp = ({
+    "data-testid": testid,
+    className,
+    size = 64,
+    color = "currentColor",
+    ...rest
+}: ILibIcon) => {
+    return (
+        <StyledIcon
+            data-testid={testid}
+            className={className}
+            width={size}
+            height={size}
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            $size={size}
+            $color={color}
+            {...rest}
+        >
+            <path
+                d="M6.293 14.1465L7.707 15.5605L12 11.2675L16.293 15.5605L17.707 14.1465L12 8.4395L6.293 14.1465Z"
+                fill="currentColor"
+            />
+        </StyledIcon>
+    )
+}

package/dist/lib/icons/Clipboard.tsx

@@ -0,0 +1,32 @@
+/*=============================================== Clipboard ===============================================*/
+
+import { StyledIcon } from "./styles"
+import type { ILibIcon } from "./types"
+
+export const Clipboard = ({
+    "data-testid": testid,
+    className,
+    size = 64,
+    color = "currentColor",
+    ...rest
+}: ILibIcon) => {
+    return (
+        <StyledIcon
+            data-testid={testid}
+            className={className}
+            width={size}
+            height={size}
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            $size={size}
+            $color={color}
+            {...rest}
+        >
+            <path
+                d="M19 3H16.75C16.75 2.73478 16.6446 2.48043 16.4571 2.29289C16.2696 2.10536 16.0152 2 15.75 2H8.25C7.98478 2 7.73043 2.10536 7.54289 2.29289C7.35536 2.48043 7.25 2.73478 7.25 3H5C3.897 3 3 3.897 3 5V20C3 21.103 3.897 22 5 22H19C20.103 22 21 21.103 21 20V5C21 3.897 20.103 3 19 3ZM19 20H5V5H7V7H17V5H19V20Z"
+                fill="currentColor"
+            />
+        </StyledIcon>
+    )
+}

package/dist/lib/icons/Clock.tsx

@@ -0,0 +1,35 @@
+/*=============================================== Clock ===============================================*/
+
+import { StyledIcon } from "./styles"
+import type { ILibIcon } from "./types"
+
+export const Clock = ({
+    "data-testid": testid,
+    className,
+    size = 64,
+    color = "currentColor",
+    ...rest
+}: ILibIcon) => {
+    return (
+        <StyledIcon
+            data-testid={testid}
+            className={className}
+            width={size}
+            height={size}
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            $size={size}
+            $color={color}
+            {...rest}
+        >
+            <path d="M11 13V7H13V11H17V13H11Z" fill="currentColor" />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M2 12C2 6.486 6.486 2 12 2C17.514 2 22 6.486 22 12C22 17.514 17.514 22 12 22C6.486 22 2 17.514 2 12ZM4 12C4 16.411 7.589 20 12 20C16.411 20 20 16.411 20 12C20 7.589 16.411 4 12 4C7.589 4 4 7.589 4 12Z"
+                fill="currentColor"
+            />
+        </StyledIcon>
+    )
+}