@julseb-lib/react 0.0.51 → 0.0.52

package/src/lib/components/Youtube/__preview__/Youtube.preview.tsx

@@ -1,28 +0,0 @@
-/*=============================================== YoutubePreview ===============================================*/
-
-import { Youtube } from "../../../"
-import type { ILibYoutube } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-const YOUTUBE_SRC = "https://www.youtube.com/watch?v=33KKr1ZGSzg"
-
-export const youtubePreview: ComponentPreview<ILibYoutube> = {
-    name: "Youtube",
-    component: Youtube,
-    category: "components",
-    import: "Youtube",
-    additionalImports: null,
-    optionalImports: null,
-    propsImport: "ILibYoutube",
-    additionalTypeImports: null,
-    extends: ["HTMLIFrameElement", "IframeHTMLAttributes<HTMLIFrameElement>"],
-    previews: [
-        {
-            props: {
-                src: YOUTUBE_SRC,
-                "data-testid": "testid",
-                className: "className",
-            },
-        },
-    ],
-}

package/src/lib/components/Youtube/__tests__/Youtube.cy.tsx

@@ -1,26 +0,0 @@
-/*=============================================== Youtube tests ===============================================*/
-
-import { Youtube } from "../../.."
-
-describe("<Youtube />", () => {
-    beforeEach(() => {
-        cy.mount(
-            <Youtube
-                src="https://www.youtube.com/watch?v=33KKr1ZGSzg"
-                data-testid="testid"
-                className="className"
-            />
-        )
-    })
-    it("renders <Youtube /> component", () => {
-        cy.dataTest().should("exist").should("have.class", "className")
-    })
-
-    it("converts automatically a Youtube link to an embed URL", () => {
-        cy.dataTest().should(
-            "have.prop",
-            "src",
-            "https://www.youtube.com/embed/33KKr1ZGSzg"
-        )
-    })
-})

package/src/lib/components/Youtube/index.ts

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

package/src/lib/components/Youtube/styles.tsx

@@ -1,20 +0,0 @@
-/*=============================================== Youtube styles ===============================================*/
-
-import styled from "styled-components"
-import { stringifyPx } from "@julseb-lib/utils"
-import { setDefaultTheme } from "../../"
-
-const StyledYoutube = styled.iframe<{
-    $width: string | number
-    $height: string | number
-    $aspectRatio?: string
-}>`
-    display: block;
-    aspect-ratio: ${({ $aspectRatio }) => $aspectRatio};
-    width: ${({ $width }) => stringifyPx($width)};
-    height: ${({ $height }) => stringifyPx($height)};
-`
-
-setDefaultTheme([StyledYoutube])
-
-export { StyledYoutube }

package/src/lib/components/Youtube/types.ts

@@ -1,11 +0,0 @@
-/*=============================================== Youtube types ===============================================*/
-
-import type { IframeHTMLAttributes } from "react"
-import type { LibComponentBase } from "../../types"
-
-export interface ILibYoutube
-    extends Exclude<LibComponentBase<HTMLIFrameElement>, "as">,
-        IframeHTMLAttributes<HTMLIFrameElement> {
-    aspectRatio?: string
-    children?: never
-}

package/src/lib/context/Theme.context.tsx

@@ -1,104 +0,0 @@
-/*=============================================== 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/src/lib/context/Toaster/Toaster.context.tsx

@@ -1,130 +0,0 @@
-/*=============================================== 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/src/lib/context/Toaster/index.ts

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

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

@@ -1,36 +0,0 @@
-/*=============================================== 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/src/lib/hooks/index.ts

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

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

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

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

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

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

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

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