@julseb-lib/react 0.0.52 → 0.0.53

package/dist/lib/context/Theme.context.tsx

@@ -0,0 +1,104 @@
+/*=============================================== Theme context ===============================================*/
+
+import { useState, useEffect, createContext, useContext } from "react"
+import type { IStyleSheetManager, DefaultTheme } from "styled-components"
+import { StyleSheetManager } from "../utils"
+import { Themes } from "../types/theme"
+import type { ILibThemeContext, LibThemeNames, ReactChildren } from "../types"
+
+const ThemeContext = createContext<ILibThemeContext | null>(null)
+
+interface ILibThemeProvider {
+    stylesheetManager?: boolean | IStyleSheetManager
+    children?: ReactChildren
+}
+
+/**
+ * @description Returns a Wrapper for the theme
+ * @link https://documentation-components-react.vercel.app/styles/theme-provider
+ * @prop stylesheetManager?: boolean | IStyleSheetManager => import IStyleSheetManager from "styled-components"
+ * @prop children?: ReactChildren
+ */
+export const ThemeProviderWrapper = ({
+    children,
+    stylesheetManager,
+}: ILibThemeProvider) => {
+    const [selectedTheme, setSelectedTheme] = useState<
+        LibThemeNames | undefined
+    >(undefined)
+
+    const [theme, setTheme] = useState<DefaultTheme>(
+        selectedTheme === "dark" ? Themes.dark : Themes.light
+    )
+
+    const body = document.body
+
+    const toggleTheme = () => {
+        if (selectedTheme === "light") {
+            setSelectedTheme("dark")
+            setTheme(Themes.dark)
+            localStorage.setItem("theme", "dark")
+            body.classList.add("dark")
+        } else {
+            setSelectedTheme("light")
+            setTheme(Themes.light)
+            localStorage.setItem("theme", "light")
+            body.classList.remove("dark")
+        }
+    }
+
+    useEffect(() => {
+        if (typeof window !== "undefined") {
+            if (
+                window.matchMedia &&
+                window.matchMedia("(prefers-color-scheme: dark)").matches &&
+                !selectedTheme
+            ) {
+                setSelectedTheme("dark")
+                setTheme(Themes.dark)
+                body.classList.add("dark")
+            } else if (
+                !localStorage.getItem("theme") ||
+                localStorage.getItem("theme") === null ||
+                localStorage.getItem("theme") === undefined
+            ) {
+                window.localStorage.setItem("theme", "light")
+                setSelectedTheme("light")
+                setTheme(Themes.light)
+            } else if (localStorage.getItem("theme") === "light") {
+                setSelectedTheme("light")
+                setTheme(Themes.light)
+                body.classList.remove("dark")
+            } else if (localStorage.getItem("theme") === "dark") {
+                setSelectedTheme("dark")
+                setTheme(Themes.dark)
+                body.classList.add("dark")
+            }
+        }
+    }, [selectedTheme, body])
+
+    return (
+        <ThemeContext.Provider
+            value={{ theme: theme ?? Themes.light, selectedTheme, toggleTheme }}
+        >
+            {stylesheetManager ? (
+                <StyleSheetManager
+                    {...(stylesheetManager as IStyleSheetManager)}
+                >
+                    {children}
+                </StyleSheetManager>
+            ) : (
+                children
+            )}
+        </ThemeContext.Provider>
+    )
+}
+
+/**
+ * @description Hook for Theme context
+ * @link https://documentation-components-react.vercel.app/styles/theme-provider
+ * @prop theme: DefaultTheme => import from "styled-components"
+ * @prop selectedTheme: "light" | "dark" | undefined
+ * @prop toggleTheme: () => void
+ */
+export const useLibTheme = () => useContext(ThemeContext) as ILibThemeContext

package/dist/lib/context/Toaster/Toaster.context.tsx

@@ -0,0 +1,130 @@
+/*=============================================== Toaster context ===============================================*/
+
+import { createContext, useReducer, useContext } from "react"
+import { uuid } from "@julseb-lib/utils"
+import { Toaster } from "../../components/Toast/Toaster"
+import { toastReducer } from "./toast.reducer"
+import type {
+    LibToastStatus,
+    LibToast,
+    LibToastOptions,
+    LibToasterPosition,
+    ReactChildren,
+} from "../../types"
+
+interface ILibToasterContext {
+    success: (title: string, options?: LibToastOptions) => void
+    error: (title: string, options?: LibToastOptions) => void
+    warning: (title: string, options?: LibToastOptions) => void
+    info: (title: string, options?: LibToastOptions) => void
+    loading: (title: string, options?: LibToastOptions) => void
+    remove: (id: string) => void
+}
+
+export const ToastContext = createContext<ILibToasterContext>(null as any)
+
+interface ILibToasterProvider {
+    "data-testid"?: string
+    className?: string
+    children: ReactChildren
+    toastOptions?: Pick<
+        LibToastOptions,
+        "duration" | "labelClose" | "withTimer"
+    >
+    position?: LibToasterPosition
+}
+
+const initialState = {
+    toasts: [] as Array<LibToast>,
+}
+
+/**
+ * @description Returns a Context component for Toast
+ * @link https://documentation-components-react.vercel.app/components/toast
+ * @prop data-testid?: string
+ * @prop className?: string
+ * @prop children: ReactChildren
+ * @prop toastOptions?: { duration?: number; labelClose?: string; withTimer?: boolean }
+ * @prop position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
+ */
+export const ToasterProviderWrapper = ({
+    "data-testid": testid,
+    className,
+    children,
+    toastOptions,
+    position,
+}: ILibToasterProvider) => {
+    const [state, dispatch] = useReducer(toastReducer, initialState)
+
+    const addToast = (
+        status: LibToastStatus,
+        title: string,
+        options?: LibToastOptions
+    ) =>
+        dispatch({
+            type: "ADD_TOAST",
+            payload: {
+                id: uuid(),
+                status,
+                title,
+                options: options || toastOptions,
+            },
+        })
+
+    const success = (title: string, options?: LibToastOptions) =>
+        addToast("success", title, options || toastOptions)
+
+    const warning = (title: string, options?: LibToastOptions) =>
+        addToast("warning", title, options || toastOptions)
+
+    const error = (title: string, options?: LibToastOptions) =>
+        addToast("error", title, options || toastOptions)
+
+    const info = (title: string, options?: LibToastOptions) =>
+        addToast("info", title, options || toastOptions)
+
+    const loading = (title: string, options?: LibToastOptions) =>
+        addToast("loading", title, options || toastOptions)
+
+    const remove = (id: string) =>
+        dispatch({
+            type: "DELETE_TOAST",
+            payload: id,
+        })
+
+    return (
+        <ToastContext.Provider
+            value={{
+                success,
+                error,
+                warning,
+                info,
+                loading,
+                remove,
+            }}
+        >
+            {children}
+
+            <Toaster
+                toasts={state.toasts}
+                isOpen={!!state.toasts.length}
+                toastsOptions={toastOptions}
+                data-testid={testid}
+                className={className}
+                position={position}
+            />
+        </ToastContext.Provider>
+    )
+}
+
+/**
+ * @description Hook for Toaster context
+ * @link https://documentation-components-react.vercel.app/components/toast
+ * @function success
+ * @function error
+ * @function warning
+ * @function info
+ * @function loading
+ * @function remove
+ */
+export const useToast = () => useContext(ToastContext) as ILibToasterContext

package/dist/lib/context/Toaster/index.ts

@@ -0,0 +1,3 @@
+/*=============================================== Exports ===============================================*/
+
+export * from "./Toaster.context"

package/dist/lib/context/Toaster/toast.reducer.ts

@@ -0,0 +1,36 @@
+/*=============================================== Toast reducer ===============================================*/
+
+import type { LibToast } from "../../types"
+
+type ToastAction = "ADD_TOAST" | "DELETE_TOAST"
+
+export const toastReducer = (
+    state: { toasts: Array<LibToast> },
+    action: {
+        type: ToastAction
+        payload: any
+    }
+) => {
+    switch (action.type) {
+        case "ADD_TOAST":
+            return {
+                ...state,
+                toasts: [...state.toasts, action.payload],
+            }
+        case "DELETE_TOAST":
+            const updatedToasts = state.toasts.filter(
+                t =>
+                    t.id !==
+                    (typeof action.payload === "string" ||
+                    typeof action.payload === "number"
+                        ? action.payload
+                        : action.payload.id)
+            )
+            return {
+                ...state,
+                toasts: updatedToasts,
+            }
+        default:
+            throw new Error(`Unhandled action type: ${action.type}`)
+    }
+}

package/dist/lib/hooks/index.ts

@@ -0,0 +1,17 @@
+/*=============================================== Export hooks ===============================================*/
+
+export * from "./useClickOutside"
+export * from "./useCopyToClipboard"
+export * from "./useDebounce"
+export * from "./useExportData"
+export * from "./useFetch"
+export * from "./useForm"
+export * from "./useIsOverflow"
+export * from "./useKeyPress"
+export * from "./useMaxWidth"
+export * from "./useMergeRefs"
+export * from "./useMinWidth"
+export * from "./usePaginatedData"
+export * from "./usePagination"
+export * from "./useTouchScreen"
+export * from "./useTranslation"

package/dist/lib/hooks/useClickOutside.tsx

@@ -0,0 +1,37 @@
+/*=============================================== useClickOutside ===============================================*/
+
+import { useEffect, type RefObject } from "react"
+
+type Event = MouseEvent | TouchEvent
+
+/**
+ * @description Hook to trigger a function on click outside an element
+ * @link https://documentation-components-react.vercel.app/helpers/hooks#useClickOutside
+ * @argument ref: RefObject<T>,
+ * @argument handler: (event: Event) => void
+ */
+export const useClickOutside = <T extends HTMLElement = HTMLElement>(
+    ref: RefObject<T>,
+    handler: (event: Event) => void
+) => {
+    useEffect(() => {
+        const listener = (e: Event) => {
+            const target = e.target as HTMLElement
+
+            if (target.getAttribute("href")) return false
+
+            const el = ref?.current
+            if (!el || el.contains((e?.target as Node) || null)) {
+                return
+            }
+
+            handler(e)
+        }
+
+        document.addEventListener("mousedown", listener)
+
+        return () => {
+            document.removeEventListener("mousedown", listener)
+        }
+    }, [ref, handler])
+}

package/dist/lib/hooks/useCopyToClipboard.tsx

@@ -0,0 +1,33 @@
+/*=============================================== useCopyToClipboard ===============================================*/
+
+import { useState } from "react"
+
+type CopiedValue = string | null
+type CopyFn = (text: string) => Promise<boolean>
+
+/**
+ * @description Hook to trigger a function to copy content
+ * @link https://documentation-components-react.vercel.app/helpers/hooks#useCopyToClipboard
+ */
+export const useCopyToClipboard = (): [CopiedValue, CopyFn] => {
+    const [copiedText, setCopiedText] = useState<CopiedValue>(null)
+
+    const copy: CopyFn = async text => {
+        if (!navigator?.clipboard) {
+            console.warn("Clipboard not supported")
+            return false
+        }
+
+        try {
+            await navigator.clipboard.writeText(text)
+            setCopiedText(text)
+            return true
+        } catch (error) {
+            console.warn("Copy failed", error)
+            setCopiedText(null)
+            return false
+        }
+    }
+
+    return [copiedText, copy]
+}

package/dist/lib/hooks/useDebounce.tsx

@@ -0,0 +1,21 @@
+/*=============================================== useDebounce ===============================================*/
+
+import { useState, useEffect } from "react"
+
+/**
+ * @description Hook to delay a function
+ * @link https://documentation-components-react.vercel.app/helpers/hooks#useDebounce
+ * @argument value: <T> => type to define
+ * @argument delay?: number
+ */
+export const useDebounce = <T,>(value: T, delay: number = 1000) => {
+    const [debouncedValue, setDebouncedValue] = useState<T>(value)
+
+    useEffect(() => {
+        const timedValue = setTimeout(() => setDebouncedValue(value), delay)
+
+        return () => clearTimeout(timedValue)
+    }, [value, delay])
+
+    return debouncedValue
+}

package/dist/lib/hooks/useExportData.tsx

@@ -0,0 +1,55 @@
+/*=============================================== useTableSorting ===============================================*/
+
+interface IDownloadFile {
+    blob: Blob
+    fileName: string
+}
+
+const downloadFile = ({ blob, fileName }: IDownloadFile) => {
+    const a = document.createElement("a")
+    a.download = fileName
+    a.href = window.URL.createObjectURL(blob)
+    const clickEvt = new MouseEvent("click", {
+        view: window,
+        bubbles: true,
+        cancelable: true,
+    })
+    a.dispatchEvent(clickEvt)
+    a.remove()
+}
+
+/**
+ * @description Hook to export data to JSON or CSV
+ * @link https://documentation-components-react.vercel.app/helpers/hooks#useExportData
+ */
+export const useExportData = <T,>() => {
+    const exportToJson = (data: Array<T>, fileName: string) =>
+        downloadFile({
+            blob: new Blob([JSON.stringify(data)], {
+                type: "application/json",
+            }),
+            fileName: `${fileName}.json`,
+        })
+
+    const exportToCsv = (
+        data: Array<T>,
+        fileName: string,
+        headers: Array<string>
+    ) => {
+        const rows = [headers.join(","), ...data].join("\n")
+
+        const blob = new Blob([rows], {
+            type: "text/csv",
+        })
+
+        return downloadFile({
+            blob,
+            fileName: `${fileName}.csv`,
+        })
+    }
+
+    return {
+        exportToCsv,
+        exportToJson,
+    }
+}

package/dist/lib/hooks/useFetch.tsx

@@ -0,0 +1,25 @@
+/*=============================================== useFetch ===============================================*/
+
+import { useEffect, useState } from "react"
+
+/**
+ * @description Hook to fetch data
+ * @link https://documentation-components-react.vercel.app/helpers/hooks#useFetch
+ * @argument fetchFunction: Promise<T> => to define
+ * @argument dependencies?: any
+ */
+export const useFetch = <T,>(fetchFunction: Promise<T>, dependencies?: any) => {
+    const [response, setResponse] = useState<T | null>(null)
+    const [loading, setLoading] = useState(true)
+    const [error, setError] = useState<any>(undefined)
+
+    useEffect(() => {
+        fetchFunction
+            .then((res: T) => setResponse(res))
+            .catch((err: any) => setError(err))
+
+        setLoading(false)
+    }, [dependencies])
+
+    return { response, error, loading } as const
+}

package/dist/lib/hooks/useForm.tsx

@@ -0,0 +1,28 @@
+/*=============================================== useForm ===============================================*/
+
+import { useState, type ChangeEvent } from "react"
+
+/**
+ * @description Hook to use in forms
+ * @link https://documentation-components-react.vercel.app/helpers/hooks#useForm
+ * @argument initialState = {} as T => type to define
+ * @argument onSubmit?: (formData: T) => void
+ */
+export const useForm = <T,>(
+    initialState = {} as T,
+    onSubmit?: (formData: T) => void
+) => {
+    const [formData, setFormData] = useState(initialState)
+
+    const handleInputs = (e: ChangeEvent<HTMLInputElement>) =>
+        setFormData({ ...formData, [e.target.id]: e.target.value })
+
+    const resetForm = () => setFormData(initialState)
+
+    const handleSubmit = (e: ChangeEvent<HTMLFormElement>) => {
+        e.preventDefault()
+        onSubmit?.(formData)
+    }
+
+    return { formData, handleInputs, resetForm, handleSubmit }
+}

package/dist/lib/hooks/useIsOverflow.ts

@@ -0,0 +1,44 @@
+/*=============================================== useIsOverflow ===============================================*/
+
+import {
+    useState,
+    useLayoutEffect,
+    type RefCallback,
+    type RefObject,
+} from "react"
+
+/**
+ * @description Hook to detect if an element is overflowing
+ * @link https://documentation-components-react.vercel.app/helpers/hooks#useIsOverflow
+ * @argument ref: RefObject<HTMLElement>,
+ * @argument options?: { callback: RefCallback<boolean>; check?: "width" | "height" }
+ */
+export const useIsOverflow = (
+    ref: RefObject<HTMLElement>,
+    options?: {
+        callback: RefCallback<boolean>
+        check?: "width" | "height"
+    }
+) => {
+    const [isOverflow, setIsOverflow] = useState<undefined | boolean>(undefined)
+
+    useLayoutEffect(() => {
+        const { current } = ref
+
+        const trigger = () => {
+            if (current) {
+                const hasOverflow =
+                    options?.check === "height"
+                        ? current.scrollHeight > current.clientHeight
+                        : current.scrollWidth > current.clientWidth
+                setIsOverflow(hasOverflow)
+
+                if (options?.callback) options.callback(hasOverflow)
+            }
+        }
+
+        trigger()
+    }, [ref, options])
+
+    return isOverflow
+}

package/dist/lib/hooks/useKeyPress.tsx

@@ -0,0 +1,95 @@
+/*=============================================== 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/dist/lib/hooks/useMaxWidth.tsx

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