@julseb-lib/react 0.0.51 → 0.0.52

package/src/lib/hooks/useKeyPress.tsx

@@ -1,95 +0,0 @@
-/*=============================================== useKeyPress ===============================================*/
-
-import { useEffect } from "react"
-
-/**
- * @description Hook to trigger functions on key press
- * @link https://documentation-components-react.vercel.app/helpers/hooks#useKeyPress
- * @argument keyCodes: string | Array<string>
- * @argument callback: () => void
- */
-export const useKeyPress = (
-    keyCodes: string | Array<string>,
-    callback: () => void,
-    excludeKeys?: Array<string>
-): void => {
-    useEffect(() => {
-        const singleHandler = ({ code }: KeyboardEvent) => {
-            if (keyCodes.includes(code)) {
-                callback()
-            }
-        }
-
-        const multiHandler = (e: KeyboardEvent) => {
-            if (typeof keyCodes !== "string") {
-                const metaKey =
-                    keyCodes[0] === "Command" ? e.metaKey : undefined
-                const ctrlKey =
-                    keyCodes[0] === "Control" ? e.ctrlKey : undefined
-                const shiftKey =
-                    keyCodes[0] === "Shift" ? e.shiftKey : undefined
-                const altKey = keyCodes[0] === "Alt" ? e.altKey : undefined
-
-                const excludedMetaKey =
-                    excludeKeys && excludeKeys[0] === "Command"
-                        ? e.metaKey
-                        : undefined
-                const excludedCtrlKey =
-                    excludeKeys && excludeKeys[0] === "Control"
-                        ? e.ctrlKey
-                        : undefined
-                const excludedShiftKey =
-                    excludeKeys && excludeKeys[0] === "Shift"
-                        ? e.shiftKey
-                        : undefined
-                const excludedAltKey =
-                    excludeKeys && excludeKeys[0] === "Alt"
-                        ? e.altKey
-                        : undefined
-
-                if (
-                    keyCodes.length === 1 &&
-                    !(
-                        excludedMetaKey ||
-                        excludedCtrlKey ||
-                        excludedShiftKey ||
-                        excludedAltKey
-                    )
-                ) {
-                    singleHandler(e)
-                }
-
-                if (
-                    excludedMetaKey ||
-                    excludedCtrlKey ||
-                    excludedShiftKey ||
-                    excludedAltKey
-                ) {
-                    return
-                }
-
-                if (
-                    (metaKey || ctrlKey || shiftKey || altKey) &&
-                    e.code === keyCodes[1]
-                ) {
-                    callback()
-                }
-            }
-        }
-
-        window.addEventListener(
-            "keydown",
-            typeof keyCodes !== "string" || (keyCodes && excludeKeys)
-                ? multiHandler
-                : singleHandler
-        )
-
-        return () =>
-            window.removeEventListener(
-                "keydown",
-                typeof keyCodes !== "string" && keyCodes.length > 1
-                    ? multiHandler
-                    : singleHandler
-            )
-    }, [callback, keyCodes])
-}

package/src/lib/hooks/useMaxWidth.tsx

@@ -1,28 +0,0 @@
-/*=============================================== useMaxWidth ===============================================*/
-
-import { useState, useEffect } from "react"
-
-/**
- * @description Hook to detect if an element is smaller than a set width
- * @link https://documentation-components-react.vercel.app/helpers/hooks#useMaxWidth
- * @argument width: number
- */
-export const useMaxWidth = (width: number): boolean => {
-    const [isMax, setIsMax] = useState<boolean>(false)
-
-    useEffect(() => {
-        const detectSize = () => {
-            if (window.innerWidth <= width) {
-                setIsMax(true)
-            } else {
-                setIsMax(false)
-            }
-        }
-
-        detectSize()
-
-        window.addEventListener("resize", () => detectSize())
-    }, [width])
-
-    return isMax
-}

package/src/lib/hooks/useMergeRefs.ts

@@ -1,33 +0,0 @@
-/*=============================================== 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/src/lib/hooks/useMinWidth.tsx

@@ -1,28 +0,0 @@
-/*=============================================== 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/src/lib/hooks/usePaginatedData.tsx

@@ -1,37 +0,0 @@
-/*=============================================== 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/src/lib/hooks/usePagination.tsx

@@ -1,112 +0,0 @@
-/*=============================================== 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/src/lib/hooks/useTouchScreen.tsx

@@ -1,21 +0,0 @@
-/*=============================================== 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/src/lib/hooks/useTranslation.tsx

@@ -1,30 +0,0 @@
-/*=============================================== 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/src/lib/icons/ArrowUp.tsx

@@ -1,32 +0,0 @@
-/*=============================================== 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/src/lib/icons/Bold.tsx

@@ -1,32 +0,0 @@
-/*=============================================== 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/src/lib/icons/Calendar.tsx

@@ -1,40 +0,0 @@
-/*=============================================== 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/src/lib/icons/CaretDown.tsx

@@ -1,32 +0,0 @@
-/*=============================================== 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/src/lib/icons/Check.tsx

@@ -1,32 +0,0 @@
-/*=============================================== 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/src/lib/icons/CheckCircle.tsx

@@ -1,38 +0,0 @@
-/*=============================================== 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/src/lib/icons/ChevronDown.tsx

@@ -1,32 +0,0 @@
-/*=============================================== 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/src/lib/icons/ChevronLeft.tsx

@@ -1,32 +0,0 @@
-/*=============================================== 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>
-    )
-}