@julseb-lib/react 0.0.10 → 0.0.11

package/dist/lib/Mixins.tsx

@@ -51,10 +51,10 @@ type ILibIconMixin = {
     $isLibIcon?: boolean
 }
 
-function getColorMixinFromTheme(
+const getColorMixinFromTheme = (
     theme: DefaultTheme | null = COLORS_LIGHT,
     themeName?: LibThemeNames
-) {
+) => {
     let THEME: DefaultTheme
 
     if (themeName) {

package/dist/lib/components/Header/Header.tsx

@@ -52,6 +52,7 @@ export const Header = forwardRef<HTMLDivElement, ILibHeader>(
             position = "relative",
             hideOnScroll,
             links,
+            nav,
             enableScrollingOpen,
             ...rest
         },
@@ -171,7 +172,11 @@ export const Header = forwardRef<HTMLDivElement, ILibHeader>(
                     {typeof logo === "object" ? logo.text : logo}
                 </HeaderLogo>
 
-                {navDesktopVariant === "left" && <HeaderNav {...navProps} />}
+                {navDesktopVariant === "left" && nav ? (
+                    nav
+                ) : (
+                    <HeaderNav {...navProps} />
+                )}
 
                 {!isMobile && navDesktopVariant === "right" && (
                     <HeaderSearch {...searchProps} />
@@ -181,7 +186,11 @@ export const Header = forwardRef<HTMLDivElement, ILibHeader>(
                     <HeaderBurger {...burgerProps} />
                 )}
 
-                {navDesktopVariant === "right" && <HeaderNav {...navProps} />}
+                {navDesktopVariant === "right" && nav ? (
+                    nav
+                ) : (
+                    <HeaderNav {...navProps} />
+                )}
 
                 {isMobile && navMobileVariant === "drawer" && (
                     <Overlay

package/dist/lib/components/Header/HeaderNav.tsx

@@ -1,6 +1,6 @@
 /*=============================================== HeaderNav ===============================================*/
 
-import { useRef, type ReactNode } from "react"
+import { useRef, isValidElement, type ReactNode, Fragment } from "react"
 import classNames from "classnames"
 import { uuid } from "ts-utils-julseb"
 import { useMaxWidth, useClickOutside } from "../../"
@@ -8,6 +8,7 @@ import { HeaderNavLink } from "./HeaderNavLink"
 import { HeaderSearch } from "./HeaderSearch"
 import { Nav } from "./styles"
 import type { ILibHeaderNav } from "./subtypes"
+import { LibHeaderLink } from "../../types"
 
 export function HeaderNav({
     "data-testid": testid,
@@ -16,7 +17,6 @@ export function HeaderNav({
     isOpen,
     children,
     links,
-    nav,
     headerHeight,
     variant,
     navMobileVariant,
@@ -64,18 +64,20 @@ export function HeaderNav({
             )}
 
             {links
-                ? links.map(link => (
-                      <HeaderNavLink
-                          data-testid={testid}
-                          className={className}
-                          link={link}
-                          key={uuid()}
-                      />
-                  ))
+                ? links.map(link =>
+                      isValidElement(link) ? (
+                          <Fragment>{link}</Fragment>
+                      ) : (
+                          <HeaderNavLink
+                              data-testid={testid}
+                              className={className}
+                              link={link as LibHeaderLink | JSX.Element}
+                              key={uuid()}
+                          />
+                      )
+                  )
                 : null}
 
-            {nav && (nav as any)}
-
             {children && children}
         </Nav>
     )

package/dist/lib/components/Header/subtypes.ts

@@ -1,6 +1,6 @@
 /*=============================================== Header sub components types ===============================================*/
 
-import type { RefObject } from "react"
+import type { FC, RefObject } from "react"
 import type { LibHeaderLink, LibLink } from "../../types"
 import type { ILibHeader } from "./types"
 
@@ -15,7 +15,6 @@ export interface ILibHeaderNav
         | "search"
         | "children"
         | "links"
-        | "nav"
         | "variant"
         | "navMobileVariant"
         | "burgerPosition"
@@ -54,7 +53,7 @@ export interface ILibHeaderLogo
 export interface ILibHeaderNavLink {
     "data-testid": string | undefined
     className: string | undefined
-    link: LibHeaderLink
+    link: LibHeaderLink | JSX.Element | FC
 }
 
 /*====================== HeaderSearch ======================*/

package/dist/lib/components/Header/types.ts

@@ -56,14 +56,14 @@ interface HeaderFixed extends ILibHeaderBase {
 type HeaderPosition = HeaderNotFixed | HeaderFixed
 
 type HeaderWithLinks = HeaderPosition & {
-    links: Array<LibHeaderLink>
+    links: Array<LibHeaderLink | JSX.Element>
     nav?: never
     children?: never
 }
 
 type HeaderWithNav = HeaderPosition & {
-    links?: never
-    nav: JSX.Element | FC | ReactChildren
+    links: Array<LibHeaderLink | JSX.Element>
+    nav?: JSX.Element | FC
     children?: never
 }
 

package/dist/lib/components/PageLayout/PageLayout.tsx

@@ -57,7 +57,9 @@ export function PageLayout({
             ) : (
                 <>
                     {header && (
-                        <Header {...(header as any)} />
+                        <Header {...(header as any)}>
+                            {header?.nav && header?.nav}
+                        </Header>
                     )}
 
                     {!noWrapper ? (

package/dist/lib/components/PageLayout/types.ts

@@ -14,7 +14,7 @@ interface ILibPageLayoutBase {
     pageLoading?: ILibPageLoading
     titleLoading?: string
     helmet?: Omit<ILibHelmet, "children">
-    header?: Omit<ILibHeader, "children">
+    header?: Omit<ILibHeader, "children"> & { nav?: JSX.Element }
     footer?: Omit<ILibFooter, "children">
 }
 

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

@@ -19,10 +19,10 @@ interface ILibThemeProvider {
  * @prop stylesheetManager?: boolean | IStyleSheetManager => import IStyleSheetManager from "styled-components"
  * @prop children?: ReactChildren
  */
-export function ThemeProviderWrapper({
+export const ThemeProviderWrapper = ({
     children,
     stylesheetManager,
-}: ILibThemeProvider) {
+}: ILibThemeProvider) => {
     const [selectedTheme, setSelectedTheme] = useState<
         LibThemeNames | undefined
     >(undefined)
@@ -91,6 +91,4 @@ export function ThemeProviderWrapper({
  * @prop selectedTheme: "light" | "dark" | undefined
  * @prop toggleTheme: () => void
  */
-export function useLibTheme() {
-    return useContext(ThemeContext) as ILibThemeContext
-}
+export const useLibTheme = () => useContext(ThemeContext) as ILibThemeContext

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

@@ -1,7 +1,7 @@
 /*=============================================== Toaster context ===============================================*/
 
 import { createContext, useReducer, useContext } from "react"
-import { uuid } from "ts-utils-julseb"
+import { uuid } from "@julseb-lib/utils"
 import { Toaster } from "../../components/Toast/Toaster"
 import { toastReducer } from "./toast.reducer"
 import type {
@@ -47,13 +47,13 @@ const initialState = {
  * @prop toastOptions?: { duration?: number; labelClose?: string; withTimer?: boolean }
  * @prop position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
  */
-export function ToasterProviderWrapper({
+export const ToasterProviderWrapper = ({
     "data-testid": testid,
     className,
     children,
     toastOptions,
     position,
-}: ILibToasterProvider) {
+}: ILibToasterProvider) => {
     const [state, dispatch] = useReducer(toastReducer, initialState)
 
     const addToast = (
@@ -127,6 +127,4 @@ export function ToasterProviderWrapper({
  * @function loading
  * @function remove
  */
-export function useToast() {
-    return useContext(ToastContext) as ILibToasterContext
-}
+export const useToast = () => useContext(ToastContext) as ILibToasterContext

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

@@ -4,13 +4,13 @@ import type { LibToast } from "../../types"
 
 type ToastAction = "ADD_TOAST" | "DELETE_TOAST"
 
-export function toastReducer(
+export const toastReducer = (
     state: { toasts: Array<LibToast> },
     action: {
         type: ToastAction
         payload: any
     }
-) {
+) => {
     switch (action.type) {
         case "ADD_TOAST":
             return {

package/dist/lib/hooks/useClickOutside.tsx

@@ -10,10 +10,10 @@ type Event = MouseEvent | TouchEvent
  * @argument ref: RefObject<T>,
  * @argument handler: (event: Event) => void
  */
-export function useClickOutside<T extends HTMLElement = HTMLElement>(
+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

package/dist/lib/hooks/useCopyToClipboard.tsx

@@ -9,7 +9,7 @@ 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 function useCopyToClipboard(): [CopiedValue, CopyFn] {
+export const useCopyToClipboard = (): [CopiedValue, CopyFn] => {
     const [copiedText, setCopiedText] = useState<CopiedValue>(null)
 
     const copy: CopyFn = async text => {

package/dist/lib/hooks/useDebounce.tsx

@@ -8,7 +8,7 @@ import { useState, useEffect } from "react"
  * @argument value: <T> => type to define
  * @argument delay?: number
  */
-export function useDebounce<T>(value: T, delay: number = 1000) {
+export const useDebounce = <T,>(value: T, delay: number = 1000) => {
     const [debouncedValue, setDebouncedValue] = useState<T>(value)
 
     useEffect(() => {

package/dist/lib/hooks/useExportData.tsx

@@ -1,6 +1,11 @@
 /*=============================================== useTableSorting ===============================================*/
 
-function downloadFile({ blob, fileName }: { blob: Blob; fileName: string }) {
+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)
@@ -17,7 +22,7 @@ function downloadFile({ blob, fileName }: { blob: Blob; fileName: string }) {
  * @description Hook to export data to JSON or CSV
  * @link https://documentation-components-react.vercel.app/helpers/hooks#useExportData
  */
-export function useExportData<T>() {
+export const useExportData = <T,>() => {
     const exportToJson = (data: Array<T>, fileName: string) =>
         downloadFile({
             blob: new Blob([JSON.stringify(data)], {

package/dist/lib/hooks/useFetch.tsx

@@ -8,7 +8,7 @@ import { useEffect, useState } from "react"
  * @argument fetchFunction: Promise<T> => to define
  * @argument dependencies?: any
  */
-export function useFetch<T>(fetchFunction: Promise<T>, 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)

package/dist/lib/hooks/useForm.tsx

@@ -8,10 +8,10 @@ import { useState, type ChangeEvent } from "react"
  * @argument initialState = {} as T => type to define
  * @argument onSubmit?: (formData: T) => void
  */
-export function useForm<T>(
+export const useForm = <T,>(
     initialState = {} as T,
     onSubmit?: (formData: T) => void
-) {
+) => {
     const [formData, setFormData] = useState(initialState)
 
     const handleInputs = (e: ChangeEvent<HTMLInputElement>) =>

package/dist/lib/hooks/useKeyPress.tsx

@@ -8,11 +8,11 @@ import { useEffect } from "react"
  * @argument keyCodes: string | Array<string>
  * @argument callback: () => void
  */
-export function useKeyPress(
+export const useKeyPress = (
     keyCodes: string | Array<string>,
     callback: () => void,
     excludeKeys?: Array<string>
-): void {
+): void => {
     useEffect(() => {
         const singleHandler = ({ code }: KeyboardEvent) => {
             if (keyCodes.includes(code)) {

package/dist/lib/hooks/useMaxWidth.tsx

@@ -7,7 +7,7 @@ import { useState, useEffect } from "react"
  * @link https://documentation-components-react.vercel.app/helpers/hooks#useMaxWidth
  * @argument width: number
  */
-export function useMaxWidth(width: number): boolean {
+export const useMaxWidth = (width: number): boolean => {
     const [isMax, setIsMax] = useState<boolean>(false)
 
     useEffect(() => {

package/dist/lib/hooks/useMergeRefs.ts

@@ -12,9 +12,9 @@ import {
  * @link https://documentation-components-react.vercel.app/helpers/hooks#useMergeRefs
  * @argument refs: Array<Ref<Instance> | undefined>
  */
-export function useMergeRefs<Instance>(
+export const useMergeRefs = <Instance>(
     refs: Array<Ref<Instance> | undefined>
-): RefCallback<Instance> | null {
+): RefCallback<Instance> | null => {
     return useMemo(() => {
         if (refs.every(ref => ref == null)) {
             return null

package/dist/lib/hooks/useMinWidth.tsx

@@ -7,7 +7,7 @@ import { useState, useEffect } from "react"
  * @link https://documentation-components-react.vercel.app/helpers/hooks#useMinWidth
  * @argument width: number
  */
-export function useMinWidth(width: number): boolean {
+export const useMinWidth = (width: number): boolean => {
     const [isMin, setIsMin] = useState<boolean>(false)
 
     useEffect(() => {

package/dist/lib/hooks/usePaginatedData.tsx

@@ -2,16 +2,21 @@
 
 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 function usePaginatedData<T>(
+export const usePaginatedData = <T,>(
     data: Array<T>,
     defaultLimit = 20
-): { paginatedData: Array<T>; totalPages: number } {
+): IUsePaginatedData<T> => {
     const [query] = useSearchParams()
     const page = query.get("page") || 1
     const currentPage: number =

package/dist/lib/hooks/usePagination.tsx

@@ -20,12 +20,12 @@ interface ILibUsePaginationNavigation {
  * @prop queries?: Array<Array<string>>
  * @prop totalPages?: number
  */
-export function usePagination({
+export const usePagination = ({
     currentPage,
     setCurrentPage,
     queries,
     totalPages,
-}: ILibUsePaginationNavigation) {
+}: ILibUsePaginationNavigation) => {
     const [_, setSearchParams] = useSearchParams()
 
     const handlePrev = useCallback(() => {

package/dist/lib/hooks/useTouchScreen.tsx

@@ -6,7 +6,7 @@ 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 function useTouchScreen(): boolean {
+export const useTouchScreen = (): boolean => {
     const [isTouchScreen, setIsTouchScreen] = useState<boolean>(false)
 
     useLayoutEffect(() => {

package/dist/lib/hooks/useTranslation.tsx

@@ -11,7 +11,7 @@ let currentLanguage = detectLanguage() || "en"
  * @link https://documentation-components-react.vercel.app/helpers/hooks#useTranslation
  * @argument translations: [language: string]: { [key: string]: string }
  */
-export function useTranslation(translations: TranslateLang) {
+export const useTranslation = (translations: TranslateLang) => {
     const [language, setLanguage] = useState<string>(currentLanguage)
     const languages = Object.keys(translations)
 

package/dist/lib/icons/ArrowUp.tsx

@@ -3,13 +3,13 @@
 import { StyledIcon } from "./styles"
 import type { ILibIcon } from "./types"
 
-export function ArrowUp({
+export const ArrowUp = ({
     "data-testid": testid,
     className,
     size = 64,
     color = "currentColor",
     ...rest
-}: ILibIcon) {
+}: ILibIcon) => {
     return (
         <StyledIcon
             data-testid={testid}

package/dist/lib/icons/Bold.tsx

@@ -3,13 +3,13 @@
 import { StyledIcon } from "./styles"
 import type { ILibIcon } from "./types"
 
-export function Bold({
+export const Bold = ({
     "data-testid": testid,
     className,
     size = 64,
     color = "currentColor",
     ...rest
-}: ILibIcon) {
+}: ILibIcon) => {
     return (
         <StyledIcon
             data-testid={testid}

package/dist/lib/icons/Calendar.tsx

@@ -3,13 +3,13 @@
 import { StyledIcon } from "./styles"
 import type { ILibIcon } from "./types"
 
-export function Calendar({
+export const Calendar = ({
     "data-testid": testid,
     className,
     size = 64,
     color = "currentColor",
     ...rest
-}: ILibIcon) {
+}: ILibIcon) => {
     return (
         <StyledIcon
             data-testid={testid}

package/dist/lib/icons/CaretDown.tsx

@@ -3,13 +3,13 @@
 import { StyledIcon } from "./styles"
 import type { ILibIcon } from "./types"
 
-export function CaretDown({
+export const CaretDown = ({
     "data-testid": testid,
     className,
     size = 64,
     color = "currentColor",
     ...rest
-}: ILibIcon) {
+}: ILibIcon) => {
     return (
         <StyledIcon
             data-testid={testid}

package/dist/lib/icons/Check.tsx

@@ -3,13 +3,13 @@
 import { StyledIcon } from "./styles"
 import type { ILibIcon } from "./types"
 
-export function Check({
+export const Check = ({
     "data-testid": testid,
     className,
     size = 64,
     color = "currentColor",
     ...rest
-}: ILibIcon) {
+}: ILibIcon) => {
     return (
         <StyledIcon
             data-testid={testid}

package/dist/lib/icons/CheckCircle.tsx

@@ -3,13 +3,13 @@
 import { StyledIcon } from "./styles"
 import type { ILibIcon } from "./types"
 
-export function CheckCircle({
+export const CheckCircle = ({
     "data-testid": testid,
     className,
     size = 64,
     color = "currentColor",
     ...rest
-}: ILibIcon) {
+}: ILibIcon) => {
     return (
         <StyledIcon
             data-testid={testid}

package/dist/lib/icons/ChevronDown.tsx

@@ -3,13 +3,13 @@
 import { StyledIcon } from "./styles"
 import type { ILibIcon } from "./types"
 
-export function ChevronDown({
+export const ChevronDown = ({
     "data-testid": testid,
     className,
     size = 64,
     color = "currentColor",
     ...rest
-}: ILibIcon) {
+}: ILibIcon) => {
     return (
         <StyledIcon
             data-testid={testid}

package/dist/lib/icons/ChevronLeft.tsx

@@ -3,13 +3,13 @@
 import { StyledIcon } from "./styles"
 import type { ILibIcon } from "./types"
 
-export function ChevronLeft({
+export const ChevronLeft = ({
     "data-testid": testid,
     className,
     size = 64,
     color = "currentColor",
     ...rest
-}: ILibIcon) {
+}: ILibIcon) => {
     return (
         <StyledIcon
             data-testid={testid}

package/dist/lib/icons/ChevronRight.tsx

@@ -3,13 +3,13 @@
 import { StyledIcon } from "./styles"
 import type { ILibIcon } from "./types"
 
-export function ChevronRight({
+export const ChevronRight = ({
     "data-testid": testid,
     className,
     size = 64,
     color = "currentColor",
     ...rest
-}: ILibIcon) {
+}: ILibIcon) => {
     return (
         <StyledIcon
             data-testid={testid}

package/dist/lib/icons/ChevronUp.tsx

@@ -3,13 +3,13 @@
 import { StyledIcon } from "./styles"
 import type { ILibIcon } from "./types"
 
-export function ChevronUp({
+export const ChevronUp = ({
     "data-testid": testid,
     className,
     size = 64,
     color = "currentColor",
     ...rest
-}: ILibIcon) {
+}: ILibIcon) => {
     return (
         <StyledIcon
             data-testid={testid}

package/dist/lib/icons/Clipboard.tsx

@@ -3,13 +3,13 @@
 import { StyledIcon } from "./styles"
 import type { ILibIcon } from "./types"
 
-export function Clipboard({
+export const Clipboard = ({
     "data-testid": testid,
     className,
     size = 64,
     color = "currentColor",
     ...rest
-}: ILibIcon) {
+}: ILibIcon) => {
     return (
         <StyledIcon
             data-testid={testid}

package/dist/lib/icons/Clock.tsx

@@ -3,13 +3,13 @@
 import { StyledIcon } from "./styles"
 import type { ILibIcon } from "./types"
 
-export function Clock({
+export const Clock = ({
     "data-testid": testid,
     className,
     size = 64,
     color = "currentColor",
     ...rest
-}: ILibIcon) {
+}: ILibIcon) => {
     return (
         <StyledIcon
             data-testid={testid}

package/dist/lib/icons/Close.tsx

@@ -3,13 +3,13 @@
 import { StyledIcon } from "./styles"
 import type { ILibIcon } from "./types"
 
-export function Close({
+export const Close = ({
     "data-testid": testid,
     className,
     size = 64,
     color = "currentColor",
     ...rest
-}: ILibIcon) {
+}: ILibIcon) => {
     return (
         <StyledIcon
             data-testid={testid}