@codeleap/web 3.23.2 → 3.23.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/web",
-  "version": "3.23.2",
+  "version": "3.23.4",
   "main": "src/index.ts",
   "repository": {
     "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",
@@ -12,7 +12,6 @@
     "@codeleap/config": "*",
     "@emotion/react": "link:../../apps/web/node_modules/@emotion/react",
     "@types/react-slick": "^0.23.10",
-    "@types/react-window": "1.8.5",
     "react": "link:../../apps/web/node_modules/react"
   },
   "scripts": {
@@ -25,9 +24,7 @@
     "@radix-ui/react-tooltip": "^1.0.6",
     "@tiptap/react": "2.1.16",
     "framer-motion": "^10.10.0",
-    "js-cookie": "^3.0.1",
     "masonic": "^3.7.0",
-    "rc-slider": "^9.7.5",
     "react-autosize-textarea": "^7.1.0",
     "react-colorful": "^5.6.1",
     "react-datepicker": "^4.20.0",
@@ -38,11 +35,7 @@
     "react-number-format": "^5.2.1",
     "react-select": "^5.7.3",
     "react-slick": "^0.29.0",
-    "react-toastify": "^8.2.0",
-    "react-virtualized-auto-sizer": "^1.0.6",
-    "react-window": "1.8.5",
     "slick-carousel": "^1.8.1",
-    "url-parse": "^1.5.10",
     "uuid": "^8.3.2",
     "zustand": "^4.4.1",
     "@fastify/deepmerge": "1.3.0"

package/src/components/Modal/index.tsx

@@ -25,7 +25,7 @@ import { ActionIcon, ActionIconProps } from '../ActionIcon'
 import { Scroll } from '../Scroll'
 import { ComponentCommonProps } from '../../types'
 import { Touchable, TouchableProps } from '../Touchable'
-import { modalScrollLock, ModalStore } from '../../lib/modal'
+import { modalScrollLock, ModalStore } from '../../lib/tools/modal'
 
 export * from './styles'
 

package/src/components/SectionFilters/index.tsx

@@ -22,6 +22,11 @@ const ItemOption = (props: OptionProps) => {
     canSelectMultiple,
   } = props
 
+  let buttonProps = {
+    ...item?.itemProps,
+    ...option?.itemProps,
+  }
+
   const isItemSelected = useMemo(() => {
     if (item?.options && selectedItems) {
       if (canSelectMultiple) {
@@ -34,9 +39,11 @@ const ItemOption = (props: OptionProps) => {
     }
   }, [item?.options, option, selectedItems, item?.id, canSelectMultiple])
 
-  const buttonProps = {
-    ...item?.itemProps,
-    ...option?.itemProps,
+  if (isItemSelected) {
+    buttonProps = {
+      ...buttonProps,
+      ...item?.selectedItemProps,
+    }
   }
 
   return (

package/src/components/SectionFilters/types.ts

@@ -23,6 +23,7 @@ export type ItemProps = {
   showDescriptionLabel?: boolean
   options?: ItemOptionProps[]
   itemProps?: Omit<PropsOf<typeof Button>, 'debugName'>
+  selectedItemProps?: Omit<PropsOf<typeof Button>, 'debugName'>
 }
 
 export type onSelectItemProps = {

package/src/components/TextInput/index.tsx

@@ -25,7 +25,7 @@ import { StylesOf, HTMLProps, ComponentWithDefaultProps } from '../../types/util
 import { InputBase, InputBaseProps, selectInputBaseProps } from '../InputBase'
 import { TextInputPresets } from './styles'
 import { getMaskInputProps, TextInputMaskingProps } from './mask'
-import { getTestId } from '../../lib/test'
+import { getTestId } from '../../lib/utils/test'
 
 export * from './styles'
 export * from './mask'

package/src/components/Touchable/index.tsx

@@ -5,7 +5,7 @@ import { View } from '../View'
 import { TouchableComposition, TouchablePresets } from './styles'
 import { CSSInterpolation } from '@emotion/css'
 import { StylesOf, NativeHTMLElement } from '../../types'
-import { getTestId } from '../../lib/test'
+import { getTestId } from '../../lib/utils/test'
 export * from './styles'
 
 export type TouchableProps<T extends ElementType = 'button'> = ComponentPropsWithRef<T> & {

package/src/components/View/index.tsx

@@ -7,7 +7,7 @@ import { useMediaQuery } from '../../lib/hooks'
 import { NativeHTMLElement } from '../../types'
 import { motion } from 'framer-motion'
 import { ViewProps } from './types'
-import { getTestId } from '../../lib/test'
+import { getTestId } from '../../lib/utils/test'
 
 export * from './styles'
 export * from './types'

package/src/index.ts

@@ -1,5 +1,3 @@
 export * from './components/components'
-export * from './types/utility'
+export * from './types'
 export * from './lib'
-
-export { default as Toast } from './lib/Toast'

package/src/lib/hooks/index.ts

@@ -0,0 +1,16 @@
+export * from './useAnimatedStyle'
+export * from './useAnimatedVariantStyles'
+export * from './useBreakpointMatch'
+export * from './useClick'
+export * from './useClickOutside'
+export * from './useMaxContentWidth'
+export * from './useMediaQuery'
+export * from './usePageExitBlocker'
+export * from './usePagination'
+export * from './usePopState'
+export * from './useScrollEffect'
+export * from './useSearchParams'
+export * from './useStaticAnimationStyles'
+export * from './useWindowFocus'
+export * from './useWindowSize'
+export * from './useKeydown'

package/src/lib/{useAnimatedStyle.ts → hooks/useAnimatedStyle.ts}

@@ -1,5 +1,4 @@
-import React, { useRef } from 'react'
-import { onUpdate, useState } from '@codeleap/common'
+import { useRef, useEffect, useState } from 'react'
 import { AnimationProps } from 'framer-motion'
 
 type UpdaterReturn = Omit<AnimationProps['animate'], 'transition'> & {
@@ -10,11 +9,11 @@ type UseAnimatedStyleReturn = Pick<AnimationProps, 'animate' | 'initial' | 'tran
 
 export const useAnimatedStyle = (updater: () => UpdaterReturn, deps: Array<any>): UseAnimatedStyleReturn => {
   const initialStyle = updater()
-  
+
   const [animatedStyle, setAnimatedStyle] = useState(initialStyle)
   const transition = useRef(initialStyle.transition)
 
-  onUpdate(() => {
+  useEffect(() => {
     const animatedStyleUpdated = updater()
 
     setAnimatedStyle(animatedStyleUpdated)

package/src/lib/hooks/useAnimatedVariantStyles.ts

@@ -0,0 +1,29 @@
+import { AnimationProps } from 'framer-motion'
+import { SelectProperties } from '../../types'
+import { useStaticAnimationStyles } from './useStaticAnimationStyles'
+import { useState, useEffect } from 'react'
+
+type UseAnimatedVariantStylesConfig<T extends Record<string | number | symbol, any>, K extends keyof T> = {
+  variantStyles: T
+  animatedProperties: K[]
+  updater: (states: SelectProperties<T, K>) => AnimationProps
+  dependencies?: any[]
+}
+
+export function useAnimatedVariantStyles<T extends Record<string | number | symbol, any>, K extends keyof T>(config: UseAnimatedVariantStylesConfig<T, K>) {
+  const { animatedProperties, updater, variantStyles, dependencies = [] } = config
+
+  const staticStyles = useStaticAnimationStyles(variantStyles, animatedProperties)
+
+  const initialState = updater(staticStyles)
+
+  const [animated, setAnimated] = useState(initialState)
+
+  useEffect(() => {
+    const nextState = updater(staticStyles)
+
+    setAnimated(nextState)
+  }, dependencies)
+
+  return animated
+}

package/src/lib/{useBreakpointMatch.ts → hooks/useBreakpointMatch.ts}

@@ -1,6 +1,6 @@
-import React from 'react'
+import { useMemo } from 'react'
 import { TypeGuards, useCodeleapContext } from '@codeleap/common'
-import { useMediaQuery } from './hooks'
+import { useMediaQuery } from './useMediaQuery'
 
 export type BreakpointsMatch<T extends string = string> = Record<T, any>
 
@@ -9,7 +9,7 @@ export function useBreakpointMatch<T extends string = string>(values: Partial<Br
 
   const themeBreakpoints: Record<string, number> = Theme?.breakpoints
 
-  const breakpoints: Record<string, number> = React.useMemo(() => {
+  const breakpoints: Record<string, number> = useMemo(() => {
     const breaks = Object.entries(themeBreakpoints)
 
     breaks?.sort((a, b) => a?.[1] - b?.[1])
@@ -19,7 +19,7 @@ export function useBreakpointMatch<T extends string = string>(values: Partial<Br
     return sortBreakpoints
   }, [])
 
-  const breakpointValues: Array<string> = React.useMemo(() => {
+  const breakpointValues: Array<string> = useMemo(() => {
     const _breakpoints = Object.keys(breakpoints)
 
     return _breakpoints.sort((a, b) => breakpoints?.[a] - breakpoints?.[b])
@@ -36,7 +36,7 @@ export function useBreakpointMatch<T extends string = string>(values: Partial<Br
 
   const currentBreakpoint = Object.keys(breakpointMatches)?.find((key) => breakpointMatches?.[key])
 
-  const breakpoint = React.useMemo(() => {
+  const breakpoint = useMemo(() => {
     const validBreakpointIndex = breakpointValues?.findIndex(_breakpoint => _breakpoint === currentBreakpoint)
 
     const validBreakpoints = breakpointValues?.slice(validBreakpointIndex, 100)

package/src/lib/{useClick.ts → hooks/useClick.ts}

@@ -1,5 +1,5 @@
 import { TypeGuards } from '@codeleap/common'
-import React, { useEffect } from 'react'
+import React, { useEffect, useRef, useCallback } from 'react'
 
 type HandlerClickOutside = (clickedOutside: boolean) => void
 
@@ -9,9 +9,9 @@ export function useClickOutsideElement(
   handler: HandlerClickOutside, 
   elements: Array<React.MutableRefObject<any>> = null,
 ): UseClickOutsideElementReturn {
-  const elementRef = React.useRef(null)
+  const elementRef = useRef(null)
 
-  const handleClickOutside = React.useCallback((event: MouseEvent) => {
+  const handleClickOutside = useCallback((event: MouseEvent) => {
     if (!elementRef.current) return
 
     const clickedOutsideElement = !elementRef.current.contains(event?.target)

package/src/lib/hooks/useClickOutside.ts

@@ -0,0 +1,31 @@
+import { useEffect, useRef } from 'react'
+
+const DEFAULT_EVENTS = ['mousedown', 'touchstart']
+
+export function useClickOutside<T extends HTMLElement = any>(
+  handler: () => void,
+  events?: string[] | null,
+  nodes?: HTMLElement[],
+) {
+  const ref = useRef<T>()
+
+  useEffect(() => {
+    const listener = (event: any) => {
+      if (Array.isArray(nodes)) {
+        const shouldIgnore = event?.target?.hasAttribute('data-ignore-outside-clicks')
+        const shouldTrigger = nodes.every((node) => !!node && !node.contains(event.target))
+        shouldTrigger && !shouldIgnore && handler()
+      } else if (ref.current && !ref.current.contains(event.target)) {
+        handler()
+      }
+    };
+
+    (events || DEFAULT_EVENTS).forEach((fn) => document.addEventListener(fn, listener))
+
+    return () => {
+      (events || DEFAULT_EVENTS).forEach((fn) => document.removeEventListener(fn, listener))
+    }
+  }, [ref, handler, nodes])
+
+  return ref
+}

package/src/lib/{keyboard.ts → hooks/useKeydown.ts}

@@ -1,4 +1,5 @@
-import { onUpdate, TypeGuards } from '@codeleap/common'
+import { TypeGuards } from '@codeleap/common'
+import { useEffect } from 'react'
 
 export const keydownDefaultKeyOptions = {
   ArrowLeft: 'ArrowLeft',
@@ -11,11 +12,11 @@ export const keydownDefaultKeyOptions = {
     code: 'Space',
   },
 }
- 
+
 export function useKeydown(
   expectedKey: keyof typeof useKeydown.keys | { key: string; code: string },
-  handler: (event: KeyboardEvent) => void, 
-  deps: Array<any> = [], 
+  handler: (event: KeyboardEvent) => void,
+  deps: Array<any> = [],
   options?: boolean | AddEventListenerOptions
 ) {
   const eventKey = TypeGuards.isString(expectedKey) ? (useKeydown?.keys?.[expectedKey] ?? expectedKey) : expectedKey
@@ -28,7 +29,7 @@ export function useKeydown(
     }
   }
 
-  onUpdate(() => {
+  useEffect(() => {
     document.addEventListener('keydown', handleKeyPress, options)
 
     return () => {

package/src/lib/{utils → hooks}/useMaxContentWidth.ts

@@ -1,8 +1,7 @@
 import { useCodeleapContext } from '@codeleap/common'
-import { useWindowSize } from '../hooks'
+import { useWindowSize } from './useWindowSize'
 
 export const useMaxContentWidth = () => {
-
   const { Theme } = useCodeleapContext()
   const [width, height] = useWindowSize()
 
@@ -45,5 +44,4 @@ export const useMaxContentWidth = () => {
     width: maxContentWidth,
     padding,
   }
-
 }

package/src/lib/hooks/useMediaQuery.ts

@@ -0,0 +1,41 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { attachMediaListener, isMediaQuery } from '../tools'
+
+export interface UseMediaQueryOptions {
+  getInitialValueInEffect?: boolean
+  initialValue?: boolean
+}
+
+export function useMediaQuery(
+  query: string,
+  queryOptions: UseMediaQueryOptions = {},
+) {
+  const {
+    initialValue = false,
+    getInitialValueInEffect = true,
+  } = queryOptions
+
+  const _query = useMemo(() => {
+    return query.trim().replace('@media screen and ', '')
+  }, [query])
+
+  const [matches, setMatches] = useState(
+    getInitialValueInEffect ? initialValue : isMediaQuery(query, initialValue),
+  )
+
+  const queryRef = useRef<MediaQueryList>()
+
+  useEffect(() => {
+    if (query.trim() === '') return
+
+    if ('matchMedia' in window) {
+      queryRef.current = window.matchMedia(_query)
+      setMatches(queryRef.current.matches)
+      return attachMediaListener(queryRef.current, (event) => setMatches(event.matches))
+    }
+
+    return undefined
+  }, [_query])
+
+  return matches
+}

package/src/lib/hooks/usePageExitBlocker.ts

@@ -0,0 +1,44 @@
+import { globalHistory } from '@reach/router'
+import { useEffect } from 'react'
+
+export const usePageExitBlocker = (
+  handler: (willLeavePage: boolean) => void,
+  deps: Array<any> = [],
+  message = 'Are you sure you want to leave?',
+) => {
+  const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+    if (!event) return null
+
+    event?.preventDefault()
+    event.returnValue = ''
+    return
+  }
+
+  useEffect(() => {
+    if (!window) return null
+
+    window.addEventListener('beforeunload', handleBeforeUnload)
+
+    return () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload)
+    }
+  }, deps)
+
+  useEffect(() => {
+    return globalHistory.listen((args) => {
+      if (!window) return null
+
+      const historyPathname = args?.location?.pathname
+      const windowPathname = window?.location?.pathname
+
+      const isPopAction = args?.action === 'POP'
+      const isLeaveAction = args?.action === 'PUSH' && !historyPathname?.includes(windowPathname)
+
+      if (isLeaveAction || isPopAction) {
+        const willLeavePage = window.confirm(message)
+
+        handler?.(willLeavePage)
+      }
+    })
+  }, deps)
+}

package/src/lib/hooks/usePagination.ts

@@ -0,0 +1,107 @@
+import { range, useMemo, useUncontrolled } from '@codeleap/common'
+
+export interface PaginationParams {
+  /** Page selected on initial render, defaults to 1 */
+  initialPage?: number
+
+  /** Controlled active page number */
+  page?: number
+
+  /** Total amount of pages */
+  total: number
+
+  /** Siblings amount on left/right side of selected page, defaults to 1 */
+  siblings?: number
+
+  /** Amount of elements visible on left/right edges, defaults to 1  */
+  boundaries?: number
+
+  /** Callback fired after change of each page */
+  onChange?: (page: number) => void
+}
+
+export function usePagination({
+  total,
+  siblings = 1,
+  boundaries = 1,
+  page,
+  initialPage = 1,
+  onChange,
+}: PaginationParams) {
+  const [activePage, setActivePage] = useUncontrolled({
+    value: page,
+    onChange,
+    defaultValue: initialPage,
+    finalValue: initialPage,
+    rule: (_page) => typeof _page === 'number' && _page <= total,
+  })
+
+  const setPage = (pageNumber: number) => {
+    if (pageNumber <= 0) {
+      setActivePage(1)
+    } else if (pageNumber > total) {
+      setActivePage(total)
+    } else {
+      setActivePage(pageNumber)
+    }
+  }
+
+  const next = () => setPage(activePage + 1)
+  const previous = () => setPage(activePage - 1)
+  const first = () => setPage(1)
+  const last = () => setPage(total)
+
+  const DOTS = 'dots'
+
+  const paginationRange = useMemo((): (number | 'dots')[] => {
+    // Pages count is determined as siblings (left/right) + boundaries(left/right) + currentPage + 2*DOTS
+    const totalPageNumbers = siblings * 2 + 3 + boundaries * 2
+
+    /*
+       * If the number of pages is less than the page numbers we want to show in our
+       * paginationComponent, we return the range [1..total]
+       */
+    if (totalPageNumbers >= total) {
+      return range(1, total)
+    }
+
+    const leftSiblingIndex = Math.max(activePage - siblings, boundaries)
+    const rightSiblingIndex = Math.min(activePage + siblings, total - boundaries)
+
+    /*
+       * We do not want to show dots if there is only one position left
+       * after/before the left/right page count as that would lead to a change if our Pagination
+       * component size which we do not want
+       */
+    const shouldShowLeftDots = leftSiblingIndex > boundaries + 2
+    const shouldShowRightDots = rightSiblingIndex < total - (boundaries + 1)
+
+    if (!shouldShowLeftDots && shouldShowRightDots) {
+      const leftItemCount = siblings * 2 + boundaries + 2
+      return [...range(1, leftItemCount), DOTS, ...range(total - (boundaries - 1), total)]
+    }
+
+    if (shouldShowLeftDots && !shouldShowRightDots) {
+      const rightItemCount = boundaries + 1 + 2 * siblings
+      return [...range(1, boundaries), DOTS, ...range(total - rightItemCount, total)]
+    }
+
+    return [
+      ...range(1, boundaries),
+      DOTS,
+      ...range(leftSiblingIndex, rightSiblingIndex),
+      DOTS,
+      ...range(total - boundaries + 1, total),
+    ]
+  }, [total, siblings, activePage])
+
+  return {
+    range: paginationRange,
+    active: activePage,
+    setPage,
+    next,
+    previous,
+    first,
+    last,
+  }
+}

package/src/lib/{usePopState.ts → hooks/usePopState.ts}

@@ -1,7 +1,6 @@
 import { AnyFunction, useIsomorphicEffect, useUnmount } from '@codeleap/common'
 
 export const usePopState = (dependence: boolean, handler: AnyFunction) => {
-
   useIsomorphicEffect(() => {
     if (dependence) {
       const pathname = location.pathname

package/src/lib/hooks/useScrollEffect.ts

@@ -0,0 +1,19 @@
+import { useEffect } from 'react'
+
+export function useScrollEffect(
+  effect: (passed: boolean, current: number) => any,
+  breakpoint: number,
+  extraDependencies = [],
+) {
+  function handleScroll() {
+    const passed = window.scrollY > breakpoint
+    effect(passed, window.scrollY)
+  }
+
+  useEffect(() => {
+    document.addEventListener('scroll', handleScroll)
+    return () => {
+      document.removeEventListener('scroll', handleScroll)
+    }
+  }, [breakpoint, ...extraDependencies])
+}

package/src/lib/hooks/useStaticAnimationStyles.ts

@@ -0,0 +1,14 @@
+import { useRef } from 'react'
+import { SelectProperties } from '../../types'
+
+export function useStaticAnimationStyles<T extends Record<string | number | symbol, any>, K extends keyof T>(obj: T, keys: K[]) {
+  const styles = useRef({})
+
+  if (Object.keys(styles.current).length === 0) {
+    const mappedStyles = keys.map((k) => [k, { ...obj[k] }])
+
+    styles.current = Object.fromEntries(mappedStyles)
+  }
+
+  return styles.current as SelectProperties<T, K>
+}

package/src/lib/hooks/useWindowFocus.ts

@@ -0,0 +1,33 @@
+import { AnyFunction, TypeGuards } from '@codeleap/common'
+import { useEffect, useState } from 'react'
+
+type UseWindowFocusOptions = {
+  onFocus?: AnyFunction
+  onBlur?: AnyFunction
+}
+
+export const useWindowFocus = (options: UseWindowFocusOptions = {}, deps: Array<any> = []): boolean => {
+  const [focused, setFocused] = useState(true)
+
+  const onFocus = () => {
+    setFocused(true)
+    if (TypeGuards.isFunction(options?.onFocus)) options?.onFocus()
+  }
+
+  const onBlur = () => {
+    setFocused(false)
+    if (TypeGuards.isFunction(options?.onBlur)) options?.onBlur()
+  }
+
+  useEffect(() => {
+    window.addEventListener('focus', onFocus)
+    window.addEventListener('blur', onBlur)
+
+    return () => {
+      window.removeEventListener('focus', onFocus)
+      window.removeEventListener('blur', onBlur)
+    }
+  }, deps)
+
+  return focused
+}

package/src/lib/hooks/useWindowSize.ts

@@ -0,0 +1,21 @@
+import { useState, useEffect } from 'react'
+
+export function useWindowSize() {
+  const [size, setSize] = useState([])
+
+  function handleResize() {
+    setSize([window.innerWidth, window.innerHeight])
+  }
+
+  useEffect(() => {
+    handleResize()
+
+    window.addEventListener('resize', handleResize)
+
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+
+  return size
+}

package/src/lib/index.ts

@@ -1,12 +1,4 @@
-export * from './utils'
 export * from './hooks'
-export * from './useSearchParams'
-export * from './usePopState'
-export * from './useBreakpointMatch'
-export * from './useClick'
+export * from './tools'
+export * from './utils'
 export * from './ListMasonry'
-export * from './localStorage'
-export * from './useAnimatedStyle'
-export * from './navigation'
-export * from './modal'
-export * from './keyboard'

package/src/lib/tools/index.ts

@@ -0,0 +1,4 @@
+export * from './navigation'
+export * from './localStorage'
+export * from './mediaQuery'
+export * from './modal'

package/src/lib/{localStorage.ts → tools/localStorage.ts}

@@ -1,5 +1,5 @@
-import React from 'react'
-import { onMount, TypeGuards, useState } from '@codeleap/common'
+import { useEffect, useState } from 'react'
+import { TypeGuards } from '@codeleap/common'
 
 export type LocalStorageHandler<T> = (key: T, event: StorageEvent, value: any) => void
 export type Key<T> = keyof T
@@ -138,7 +138,7 @@ export class LocalStorage<T extends Record<string, string>> {
       return getItemValueOnMount ? (this.getItem(key, parseValueOnGet) ?? initialValue) : initialValue
     })
     
-    onMount(() => {
+    useEffect(() => {
       const handler = () => {
         let _initialValue = initialValue
         let storedValue = this.getItem(key, parseValueOnGet)
@@ -153,7 +153,7 @@ export class LocalStorage<T extends Record<string, string>> {
       handler()
 
       return disableListen ? null : this.listen(key, handler)
-    })
+    }, [])
 
     const setValue = (to: S | ((prev:S) => S)) => {
       return _setValue((prev) => {

package/src/lib/tools/mediaQuery.ts

@@ -0,0 +1,25 @@
+type MediaQueryCallback = (event: { matches: boolean; media: string }) => void
+
+/**
+ * Older versions of Safari (shipped withCatalina and before) do not support addEventListener on matchMedia
+ * https://stackoverflow.com/questions/56466261/matchmedia-addlistener-marked-as-deprecated-addeventlistener-equivalent
+ * */
+export function attachMediaListener(query: MediaQueryList, callback: MediaQueryCallback) {
+  try {
+    query.addEventListener('change', callback)
+    return () => query.removeEventListener('change', callback)
+  } catch (e) {
+    query.addListener(callback)
+    return () => query.removeListener(callback)
+  }
+}
+
+export function isMediaQuery(query: string, initialValue = false) {
+  const media = query.trim().replace('@media screen and ', '')
+
+  if (typeof window !== 'undefined' && 'matchMedia' in window) {
+    return window.matchMedia(media).matches
+  }
+
+  return initialValue
+}

package/src/lib/utils/index.ts

@@ -1,6 +1,3 @@
 export * from './pollyfils/scroll'
 export * from './stopPropagation'
-export * from './useMaxContentWidth'
-export { default as url } from 'url-parse'
-export { default as Cookies } from './cookies'
-
+export * from './test'

package/src/types/utility.ts

@@ -1,6 +1,5 @@
-import React, { InputHTMLAttributes } from 'react'
+import React from 'react'
 import { CSSInterpolation } from '@emotion/css'
-import { PropsOf } from '@codeleap/common'
 
 export type StylesOf<C extends string> = Partial<Record<C, CSSInterpolation>>
 
@@ -34,3 +33,7 @@ export type ComponentWithDefaultProps<P> = ((props: P) => JSX.Element) & { defau
 export type ComponentCommonProps = {
   debugName: string
 }
+
+export type SelectProperties<T extends Record<string | number | symbol, any>, K extends keyof T> = {
+  [P in K]: T[K]
+}

package/src/lib/Toast.ts

@@ -1,23 +0,0 @@
-import { toast } from 'react-toastify'
-
-type ToastArgs = {
-  title:string
-} &Parameters<typeof toast.info>[1]
-
-function info({ title, ...others }:ToastArgs) {
-  toast.info(title, others)
-}
-
-function success({ title, ...others }:ToastArgs) {
-  toast.success(title, others)
-}
-
-function error({ title, ...others }:ToastArgs) {
-  toast.error(title, others)
-}
-
-export default {
-  info,
-  success,
-  error,
-}

package/src/lib/hooks.ts

@@ -1,428 +0,0 @@
-import { AnyFunction, onMount, onUpdate, range, TypeGuards, useUncontrolled } from '@codeleap/common'
-import React, { useCallback, useMemo, useRef, useState } from 'react'
-import { v4 } from 'uuid'
-import { easeInOut, EasingFunction, AnimationProps, useAnimate, useAnimation, animate } from 'framer-motion'
-import { globalHistory } from '@reach/router'
-
-export function useWindowSize() {
-  const [size, setSize] = useState([])
-
-  onMount(() => {
-    setSize([window.innerWidth, window.innerHeight])
-  })
-
-  function handleResize() {
-    setSize([window.innerWidth, window.innerHeight])
-  }
-
-  onUpdate(() => {
-    window.addEventListener('resize', handleResize)
-    return () => {
-      window.removeEventListener('resize', handleResize)
-    }
-  }, [])
-
-  return size
-}
-
-// type UseClickOutsideOpts = {
-//   customId?: string
-//   deps?: any[]
-// }
-// export function useClickOutside(
-//   callback: AnyFunction,
-//   deps?: UseClickOutsideOpts,
-// ) {
-//   const id = useRef(deps?.customId || v4())
-
-//   const onClick = useCallback((e: Event) => {
-//     const element = document.getElementById(id.current)
-//     if (!element) return
-//     const isInside = element.contains(e.target as Node) || ((e.target as HTMLElement).id === id.current)
-
-//     // const iterNodes = (el:HTMLElement|Element) => {
-//     //   if (isInside) return
-//     //   for (let i = 0; i < el.children.length; i++) {
-//     //     const node = el.children.item(i)
-
-//     //     if (!node) return
-//     //     const _isInside = node.contains(e.target as Node)
-//     //     if (_isInside) {
-//     //       isInside = _isInside
-//     //     }
-//     //     if (isInside) break
-
-//     //     if (node.hasChildNodes()) {
-//     //       iterNodes(node)
-//     //     }
-
-//     //     if (isInside) break
-//     //   }
-//     // }
-
-//     // if (!isInside) {
-//     //   iterNodes(element)
-//     // }
-
-//     if (!isInside) {
-//       callback(e)
-//     }
-//   }, deps?.deps || [])
-//   onUpdate(() => {
-
-//     document.addEventListener('click', onClick)
-//     return () => {
-//       document.removeEventListener('click', onClick)
-//     }
-//   }, [onClick])
-
-//   return id.current
-// }
-
-import { useEffect } from 'react'
-
-const DEFAULT_EVENTS = ['mousedown', 'touchstart']
-
-export function useClickOutside<T extends HTMLElement = any>(
-  handler: () => void,
-  events?: string[] | null,
-  nodes?: HTMLElement[],
-) {
-  const ref = useRef<T>()
-
-  useEffect(() => {
-    const listener = (event: any) => {
-      if (Array.isArray(nodes)) {
-        const shouldIgnore = event?.target?.hasAttribute('data-ignore-outside-clicks')
-        const shouldTrigger = nodes.every((node) => !!node && !node.contains(event.target))
-        shouldTrigger && !shouldIgnore && handler()
-      } else if (ref.current && !ref.current.contains(event.target)) {
-        handler()
-      }
-    };
-
-    (events || DEFAULT_EVENTS).forEach((fn) => document.addEventListener(fn, listener))
-
-    return () => {
-      (events || DEFAULT_EVENTS).forEach((fn) => document.removeEventListener(fn, listener))
-    }
-  }, [ref, handler, nodes])
-
-  return ref
-}
-
-export function useScrollEffect(
-  effect: (passed: boolean, current: number) => any,
-  breakpoint: number,
-  extraDependencies = [],
-) {
-  function handleScroll() {
-    const passed = window.scrollY > breakpoint
-    effect(passed, window.scrollY)
-  }
-
-  onUpdate(() => {
-    document.addEventListener('scroll', handleScroll)
-    return () => {
-      document.removeEventListener('scroll', handleScroll)
-    }
-  }, [breakpoint, ...extraDependencies])
-}
-
-export const DOTS = 'dots'
-
-export interface PaginationParams {
-  /** Page selected on initial render, defaults to 1 */
-  initialPage?: number
-
-  /** Controlled active page number */
-  page?: number
-
-  /** Total amount of pages */
-  total: number
-
-  /** Siblings amount on left/right side of selected page, defaults to 1 */
-  siblings?: number
-
-  /** Amount of elements visible on left/right edges, defaults to 1  */
-  boundaries?: number
-
-  /** Callback fired after change of each page */
-  onChange?: (page: number) => void
-}
-
-export function usePagination({
-  total,
-  siblings = 1,
-  boundaries = 1,
-  page,
-  initialPage = 1,
-  onChange,
-}: PaginationParams) {
-  const [activePage, setActivePage] = useUncontrolled({
-    value: page,
-    onChange,
-    defaultValue: initialPage,
-    finalValue: initialPage,
-    rule: (_page) => typeof _page === 'number' && _page <= total,
-  })
-
-  const setPage = (pageNumber: number) => {
-    if (pageNumber <= 0) {
-      setActivePage(1)
-    } else if (pageNumber > total) {
-      setActivePage(total)
-    } else {
-      setActivePage(pageNumber)
-    }
-  }
-
-  const next = () => setPage(activePage + 1)
-  const previous = () => setPage(activePage - 1)
-  const first = () => setPage(1)
-  const last = () => setPage(total)
-
-  const paginationRange = useMemo((): (number | 'dots')[] => {
-    // Pages count is determined as siblings (left/right) + boundaries(left/right) + currentPage + 2*DOTS
-    const totalPageNumbers = siblings * 2 + 3 + boundaries * 2
-
-    /*
-     * If the number of pages is less than the page numbers we want to show in our
-     * paginationComponent, we return the range [1..total]
-     */
-    if (totalPageNumbers >= total) {
-      return range(1, total)
-    }
-
-    const leftSiblingIndex = Math.max(activePage - siblings, boundaries)
-    const rightSiblingIndex = Math.min(activePage + siblings, total - boundaries)
-
-    /*
-     * We do not want to show dots if there is only one position left
-     * after/before the left/right page count as that would lead to a change if our Pagination
-     * component size which we do not want
-     */
-    const shouldShowLeftDots = leftSiblingIndex > boundaries + 2
-    const shouldShowRightDots = rightSiblingIndex < total - (boundaries + 1)
-
-    if (!shouldShowLeftDots && shouldShowRightDots) {
-      const leftItemCount = siblings * 2 + boundaries + 2
-      return [...range(1, leftItemCount), DOTS, ...range(total - (boundaries - 1), total)]
-    }
-
-    if (shouldShowLeftDots && !shouldShowRightDots) {
-      const rightItemCount = boundaries + 1 + 2 * siblings
-      return [...range(1, boundaries), DOTS, ...range(total - rightItemCount, total)]
-    }
-
-    return [
-      ...range(1, boundaries),
-      DOTS,
-      ...range(leftSiblingIndex, rightSiblingIndex),
-      DOTS,
-      ...range(total - boundaries + 1, total),
-    ]
-  }, [total, siblings, activePage])
-
-  return {
-    range: paginationRange,
-    active: activePage,
-    setPage,
-    next,
-    previous,
-    first,
-    last,
-  }
-}
-
-
-export interface UseMediaQueryOptions {
-  getInitialValueInEffect?: boolean
-  initialValue?: boolean
-}
-
-type MediaQueryCallback = (event: { matches: boolean; media: string }) => void;
-
-/**
- * Older versions of Safari (shipped withCatalina and before) do not support addEventListener on matchMedia
- * https://stackoverflow.com/questions/56466261/matchmedia-addlistener-marked-as-deprecated-addeventlistener-equivalent
- * */
-export function attachMediaListener(query: MediaQueryList, callback: MediaQueryCallback) {
-  try {
-    query.addEventListener('change', callback);
-    return () => query.removeEventListener('change', callback);
-  } catch (e) {
-    query.addListener(callback);
-    return () => query.removeListener(callback);
-  }
-}
-
-function getInitialValue(query: string, initialValue?: boolean) {
-  if (typeof initialValue === 'boolean') {
-    return initialValue;
-  }
-
-  if (typeof window !== 'undefined' && 'matchMedia' in window) {
-    return window.matchMedia(query).matches;
-  }
-
-  return false;
-}
-
-export function isMediaQuery(query: string, initialValue = false) {
-  const media = query.trim().replace('@media screen and ', '')
-
-  if (typeof window !== 'undefined' && 'matchMedia' in window) {
-    return window.matchMedia(media).matches
-  }
-
-  return initialValue
-}
-
-export function useMediaQuery(
-  query: string,
-  queryOptions: UseMediaQueryOptions = {}
-) {
-  const {
-    initialValue = false,
-    getInitialValueInEffect = true,
-  } = queryOptions
-
-  const _query = useMemo(() => {
-    return query.trim().replace('@media screen and ', '')
-  }, [query])
-
-  const [matches, setMatches] = useState(
-    getInitialValueInEffect ? initialValue : isMediaQuery(query, initialValue)
-  )
-
-  const queryRef = useRef<MediaQueryList>()
-
-  useEffect(() => {
-    if(query.trim() === '') return
-
-    if ('matchMedia' in window) {
-      queryRef.current = window.matchMedia(_query);
-      setMatches(queryRef.current.matches);
-      return attachMediaListener(queryRef.current, (event) => setMatches(event.matches));
-    }
-
-    return undefined
-  }, [_query])
-
-  return matches
-}
-
-type SelectProperties<T extends Record<string|number|symbol, any>, K extends keyof T> = {
-  [P in K] : T[K]
-}
-
-export function useStaticAnimationStyles<T extends Record<string|number|symbol, any>, K extends keyof T >(obj: T, keys: K[]) {
-  const styles = useRef({})
-
-  if (Object.keys(styles.current).length === 0) {
-    const mappedStyles = keys.map((k) => [k, { ...obj[k] }])
-
-    styles.current = Object.fromEntries(mappedStyles)
-  }
-
-  return styles.current as SelectProperties<T, K>
-}
-
-type UseAnimatedVariantStylesConfig<T extends Record<string|number|symbol, any>, K extends keyof T > = {
-  variantStyles: T
-  animatedProperties: K[]
-  updater: (states: SelectProperties<T, K>) => AnimationProps
-  dependencies?: any[]
-}
-
-export function useAnimatedVariantStyles<T extends Record<string|number|symbol, any>, K extends keyof T >(config: UseAnimatedVariantStylesConfig<T, K>) {
-  const { animatedProperties, updater, variantStyles, dependencies = [] } = config
-
-  const staticStyles = useStaticAnimationStyles(variantStyles, animatedProperties)
-
-  const initialState = updater(staticStyles)
-
-  const [animated, setAnimated] = useState(initialState)
-
-  onUpdate(() => {
-    const nextState = updater(staticStyles)
-    
-    setAnimated(nextState)
-  }, dependencies)
-
-  return animated
-}
-
-type UseWindowFocusOptions = {
-  onFocus?: AnyFunction
-  onBlur?: AnyFunction
-}
-
-export const useWindowFocus = (options: UseWindowFocusOptions = {}, deps: Array<any> = []): boolean => {
-  const [focused, setFocused] = useState(true)
-
-  const onFocus = () => {
-    setFocused(true)
-    if (TypeGuards.isFunction(options?.onFocus)) options?.onFocus() 
-  }
-  
-  const onBlur = () => {
-    setFocused(false)
-    if (TypeGuards.isFunction(options?.onBlur)) options?.onBlur() 
-  }
-
-  useEffect(() => {
-    window.addEventListener('focus', onFocus)
-    window.addEventListener('blur', onBlur)
-    
-    return () => {
-      window.removeEventListener('focus', onFocus)
-      window.removeEventListener('blur', onBlur)
-    }
-  }, deps)
-
-  return focused
-}
-
-export const usePageExitBlocker = (
-  handler: (willLeavePage: boolean) => void,
-  deps: Array<any> = [],
-  message: string = 'Are you sure you want to leave?'
-) => {
-  const handleBeforeUnload = (event: BeforeUnloadEvent) => {
-    if (!event) return null
-
-    event?.preventDefault()
-    event.returnValue = ''
-    return
-  }
-
-  React.useEffect(() => {
-    if (!window) return null
-
-    window.addEventListener('beforeunload', handleBeforeUnload)
-
-    return () => {
-      window.removeEventListener('beforeunload', handleBeforeUnload)
-    }
-  }, deps)
-
-  React.useEffect(() => {
-    return globalHistory.listen((args) => {
-      if (!window) return null
-
-      const historyPathname = args?.location?.pathname
-      const windowPathname = window?.location?.pathname
-
-      const isPopAction = args?.action === 'POP'
-      const isLeaveAction = args?.action === 'PUSH' && !historyPathname?.includes(windowPathname)
-
-      if (isLeaveAction || isPopAction) {
-        const willLeavePage = window.confirm(message)
-
-        handler?.(willLeavePage)
-      }
-    })
-  }, deps)
-}

package/src/lib/utils/cookies.ts

@@ -1,13 +0,0 @@
-import Cookies from 'js-cookie'
-
-const get = (key) => Cookies.get(key)
-
-const set = (key, value) => Cookies.set(key, value, { expires: 365 })
-
-const remove = (key) => Cookies.remove(key)
-
-export default {
-  get,
-  set,
-  remove,
-}