@codeleap/web 3.24.3 → 4.0.0

package/src/components/View/types.ts

@@ -1,22 +1,21 @@
-import { BaseViewProps, BreakpointPlaceholder, ComponentVariants } from '@codeleap/common'
-import { HTMLProps, NativeHTMLElement } from '../../types'
 import { AnimationProps, MotionProps } from 'framer-motion'
-import { ViewPresets } from './styles'
+import { AnyRecord, StyledProp } from '@codeleap/styles'
+import { ViewComposition } from './styles'
+import { ComponentPropsWithRef, ElementType } from 'react'
 
-export type ViewProps<T extends NativeHTMLElement> =
-  HTMLProps<T> &
-  ComponentVariants<typeof ViewPresets> &
-  Omit<AnimationProps, 'variants'> &
+export type ViewProps<T extends ElementType = 'div'> =
+  Omit<ComponentPropsWithRef<T>, 'style'> &
+  Omit<AnimationProps, 'style'> &
   {
-    component?: T
-    scroll?: boolean
+    component?: ElementType<AnyRecord>
     debugName?: string
-    debug?: boolean
-    is?: BreakpointPlaceholder
-    not?: BreakpointPlaceholder
-    up?: BreakpointPlaceholder
-    down?: BreakpointPlaceholder
+    is?: any
+    not?: any
+    up?: any
+    down?: any
     onHover?: (isMouseOverElement: boolean) => void
     animated?: boolean
     animatedProps?: Partial<MotionProps>
-  } & BaseViewProps
+    style?: StyledProp<ViewComposition>
+    children?: React.ReactNode
+  }

package/src/components/components.ts

@@ -3,7 +3,6 @@ export * from './Icon'
 export * from './Touchable'
 export * from './Text'
 export * from './Slider'
-export * from './Scroll'
 export * from './List'
 export * from './ActivityIndicator'
 export * from './Button'
@@ -37,6 +36,6 @@ export * from './Progress'
 export * from './Tag'
 export * from './TextEditor'
 export * from './ColorPicker'
+export * from './PaginationButtons'
 export * from './SectionFilters'
-
-export * from './defaultStyles'
+export * from './PaginationIndicator'

package/src/index.ts

@@ -1,3 +1,4 @@
 export * from './components/components'
 export * from './types'
 export * from './lib'
+export * from './lib/WebStyleRegistry'

package/src/lib/WebStyleRegistry.ts

@@ -0,0 +1,51 @@
+import { AnyStyledComponent, CodeleapStyleRegistry, ICSS, StylePersistor } from '@codeleap/styles'
+
+const persistor = new StylePersistor({
+  set(key, value) {
+    if (typeof window === 'undefined') return null
+    return localStorage?.setItem(key, value)
+  },
+  get(key) {
+    if (typeof window === 'undefined') return null
+    return localStorage?.getItem(key)
+  },
+  del(key) {
+    if (typeof window === 'undefined') return null
+    return localStorage?.removeItem(key)
+  },
+})
+
+let instance: WebStyleRegistry
+
+const components: CodeleapStyleRegistry['components'][string][] = []
+
+export class WebStyleRegistry extends CodeleapStyleRegistry {
+  constructor() {
+    super(persistor)
+
+    components.forEach((component) => {
+      this.registerComponent(component)
+    })
+
+    if (!instance) {
+      instance = this
+    }
+
+    return instance
+  }
+
+  createStyle(css: ICSS): ICSS {
+    return css
+  }
+
+  static get current() {
+    return instance
+  }
+
+  static registerComponent(component: AnyStyledComponent) {
+    components.push(component)
+    if (instance) {
+      instance.registerComponent(component)
+    }
+  }
+}

package/src/lib/hooks/index.ts

@@ -14,3 +14,8 @@ export * from './useStaticAnimationStyles'
 export * from './useWindowFocus'
 export * from './useWindowSize'
 export * from './useKeydown'
+export * from './useInfiniteScroll'
+export * from './useRefresh'
+export * from './useCropPicker'
+export * from './useFileInput'
+export * from './useStylesFor'

package/src/lib/hooks/useBreakpointMatch.ts

@@ -1,18 +1,19 @@
 import { useMemo } from 'react'
-import { TypeGuards, useCodeleapContext } from '@codeleap/common'
+import { TypeGuards } from '@codeleap/common'
+import { AppTheme, Theme, useTheme } from '@codeleap/styles'
 import { useMediaQuery } from './useMediaQuery'
 
 export type BreakpointsMatch<T extends string = string> = Record<T, any>
 
 export function useBreakpointMatch<T extends string = string>(values: Partial<BreakpointsMatch<T>>) {
-  const { Theme } = useCodeleapContext()
+  const theme = useTheme(store => store.current) as AppTheme<Theme>
 
-  const themeBreakpoints: Record<string, number> = Theme?.breakpoints
+  const themeBreakpoints: Record<string, number> = theme?.breakpoints ?? {}
 
   const breakpoints: Record<string, number> = useMemo(() => {
-    const breaks = Object.entries(themeBreakpoints)
+    let breaks = Object.entries(themeBreakpoints)
 
-    breaks?.sort((a, b) => a?.[1] - b?.[1])
+    breaks = breaks?.sort((a, b) => a?.[1] - b?.[1])
 
     const sortBreakpoints = Object.fromEntries(breaks)
 
@@ -28,8 +29,8 @@ export function useBreakpointMatch<T extends string = string>(values: Partial<Br
   const breakpointMatches = {}
 
   for (const breakpoint in breakpoints) {
-    const matchesDown = useMediaQuery(Theme.media.down(breakpoint), { getInitialValueInEffect: false })
-    const matchesUp = useMediaQuery(Theme.media.up(breakpoint), { getInitialValueInEffect: false })
+    const matchesDown = useMediaQuery(theme?.media?.down(breakpoint as never), { getInitialValueInEffect: false })
+    const matchesUp = useMediaQuery(theme?.media?.up(breakpoint as never), { getInitialValueInEffect: false })
 
     breakpointMatches[breakpoint] = !matchesUp && matchesDown
   }

package/src/{components/CropPicker/useCropPicker.tsx → lib/hooks/useCropPicker.ts}

@@ -7,10 +7,63 @@ import {
   useRef,
   useState,
 } from '@codeleap/common'
-import { ImageReading, UseCropPickerProps } from './types'
-import { Crop } from 'react-image-crop'
-import { cropImage, readImage } from './utils'
-import { FileInputRef } from '../FileInput'
+import { ImageReading } from '../../components/CropPicker'
+import { FileInputProps, FileInputRef } from '../../components/FileInput'
+import { Crop, ReactCropProps } from 'react-image-crop'
+
+export type UseCropPickerProps = Partial<ReactCropProps> & {
+  onFileSelect: FileInputProps['onFileSelect']
+  ref: React.MutableRefObject<FileInputRef> | React.Ref<FileInputRef>
+}
+
+export function readImage(file: File | Blob): Promise<ImageReading> {
+  const reader = new FileReader()
+  return new Promise<ImageReading>((resolve) => {
+    reader.onload = () => {
+      const image = new Image()
+      image.onload = () => resolve(image)
+      image.src = reader.result as string
+    }
+    reader.readAsDataURL(file)
+  })
+}
+
+export function cropImage(image: ImageReading, crop: Crop): Promise<[string, Blob]> {
+  const canvas = document.createElement('canvas')
+  const ctx = canvas.getContext('2d', { alpha: true })
+
+  if (!ctx) throw new Error('No 2d context')
+
+  canvas.width = image.naturalWidth * (crop.width / 100)
+  canvas.height = image.naturalHeight * (crop.height / 100)
+
+  const x = image.naturalWidth * (crop.x / 100)
+  const y = image.naturalHeight * (crop.y / 100)
+
+  ctx.drawImage(
+    image,
+    x,
+    y,
+    canvas.width,
+    canvas.height,
+    0,
+    0,
+    canvas.width,
+    canvas.height,
+  )
+
+  return new Promise<[string, Blob]>((resolve, reject) => {
+    canvas.toBlob(blob => {
+      if (!blob) {
+        reject(new Error('Canvas is empty'))
+        return
+      }
+      readImage(blob).then(cropped => {
+        resolve([cropped.src, blob])
+      }).catch(reject)
+    }, 'image/png')
+  })
+}
 
 export function useCropPicker({
   onFileSelect,
@@ -61,15 +114,15 @@ export function useCropPicker({
     const { naturalWidth, naturalHeight } = imageData
     const imageAspect = naturalWidth / naturalHeight
     const v =
-      imageAspect >= aspect
-        ? {
-          width: ((naturalHeight * aspect) / naturalWidth) * 100,
-          height: 100,
-        }
-        : {
-          width: 100,
-          height: (naturalWidth / aspect / naturalHeight) * 100,
-        }
+        imageAspect >= aspect
+          ? {
+            width: ((naturalHeight * aspect) / naturalWidth) * 100,
+            height: 100,
+          }
+          : {
+            width: 100,
+            height: (naturalWidth / aspect / naturalHeight) * 100,
+          }
     const initialCrop: Crop = {
       ...v,
       x: (100 - v.width) / 2,

package/src/lib/hooks/useFileInput.ts

@@ -0,0 +1,15 @@
+import { useRef } from 'react'
+import { FileInputRef } from '../../components/FileInput/types'
+
+export const useFileInput = () => {
+  const inputRef = useRef<FileInputRef | null>(null)
+
+  const openFilePicker = () => {
+    return inputRef.current?.openFilePicker()
+  }
+
+  return {
+    openFilePicker,
+    ref: inputRef,
+  }
+}

package/src/lib/hooks/useInfiniteScroll.ts

@@ -0,0 +1,77 @@
+import React from 'react'
+import { AnyFunction, TypeGuards } from '@codeleap/common'
+import { LoadMoreItemsCallback, UseInfiniteLoaderOptions, useInfiniteLoader } from 'masonic'
+import { ListProps } from '../../components/List'
+import { GridProps } from '../../components/Grid'
+import { useRefresh } from './useRefresh'
+
+export type UseInfiniteScrollArgs<Item extends Element = any> = {
+    threshold?: number
+    onLoadMore?: AnyFunction
+    loadMoreOptions?: Partial<UseInfiniteLoaderOptions<Item>>
+  }
+
+export type UseInfiniteScrollProps<Item extends Element = any> =
+    Partial<ListProps> &
+    Partial<GridProps> &
+    UseInfiniteScrollArgs<Item>
+
+export type UseInfiniteScrollReturn<Item extends Element = any> = {
+    onLoadMore: LoadMoreItemsCallback<Item>
+    isRefresh: boolean
+    layoutProps: {
+      isEmpty: boolean
+      refreshing: boolean
+      scrollableRef: React.MutableRefObject<undefined>
+    }
+    onRefreshItems: AnyFunction
+  }
+
+export function useInfiniteScroll<Item extends Element = any>(props: UseInfiniteScrollProps<Item>): UseInfiniteScrollReturn<Item> {
+  const {
+    onRefresh,
+    data,
+    hasNextPage,
+    refresh: refreshEnabled,
+    fetchNextPage,
+    refreshThreshold,
+    refreshDebounce,
+    loadMoreOptions = {},
+    onLoadMore,
+    threshold = 16,
+  } = props
+
+  const infiniteLoader = useInfiniteLoader(
+    async (args) => {
+      if (hasNextPage) await fetchNextPage?.()
+      if (TypeGuards.isFunction(onLoadMore)) await onLoadMore?.(args)
+    },
+    {
+      isItemLoaded: (index, items) => !!items?.[index],
+      threshold: threshold,
+      ...loadMoreOptions,
+    },
+  )
+
+  const refreshHookReturn = useRefresh(
+    onRefresh,
+    {
+      threshold: refreshThreshold,
+      debounce: refreshDebounce,
+      enabled: refreshEnabled,
+    },
+  )
+
+  const isEmpty = React.useMemo(() => (!data || !data?.length), [data?.length])
+
+  return {
+    onLoadMore: infiniteLoader,
+    isRefresh: refreshHookReturn.refresh,
+    layoutProps: {
+      scrollableRef: refreshHookReturn.scrollableRef,
+      refreshing: refreshHookReturn.refresh,
+      isEmpty,
+    },
+    onRefreshItems: refreshHookReturn.refresher,
+  }
+}

package/src/lib/hooks/useMediaQuery.ts

@@ -16,17 +16,18 @@ export function useMediaQuery(
   } = queryOptions
 
   const _query = useMemo(() => {
-    return query.trim().replace('@media screen and ', '')
+    if (!query) return ''
+    return query?.trim()?.replace('@media screen and ', '')
   }, [query])
 
   const [matches, setMatches] = useState(
-    getInitialValueInEffect ? initialValue : isMediaQuery(query, initialValue),
+    (getInitialValueInEffect || !query) ? initialValue : isMediaQuery(query, initialValue),
   )
 
   const queryRef = useRef<MediaQueryList>()
 
   useEffect(() => {
-    if (query.trim() === '') return
+    if (query?.trim() === '' || !query) return
 
     if ('matchMedia' in window) {
       queryRef.current = window.matchMedia(_query)

package/src/lib/hooks/usePagination.ts

@@ -1,49 +1,65 @@
 import { range, useMemo, useUncontrolled } from '@codeleap/common'
 
-export interface PaginationParams {
-  /** Page selected on initial render, defaults to 1 */
+export type PaginationParams = {
   initialPage?: number
-
-  /** Controlled active page number */
   page?: number
-
-  /** Total amount of pages */
   total: number
+  boundaries?: number
+  onChangePage?: (page: number) => void
+  shouldAbbreviate?: boolean
+  abbreviationMinimumAmount?: number
+  displayLeftArrow?: boolean
+  displayRightArrow?: boolean
+  isMobile?: boolean
+  abbreviationSymbol?: any
+}
 
-  /** Siblings amount on left/right side of selected page, defaults to 1 */
-  siblings?: number
+export function usePagination(props: PaginationParams) {
 
-  /** Amount of elements visible on left/right edges, defaults to 1  */
-  boundaries?: number
+  const { isMobile } = props
 
-  /** Callback fired after change of each page */
-  onChange?: (page: number) => void
-}
+  const {
+    total,
+    boundaries = 2,
+    initialPage = 1,
+    page,
+    onChangePage,
+    shouldAbbreviate = true,
+    abbreviationMinimumAmount = isMobile ? 5 : 10,
+    displayLeftArrow = true,
+    displayRightArrow = true,
+    abbreviationSymbol,
+  } = props
 
-export function usePagination({
-  total,
-  siblings = 1,
-  boundaries = 1,
-  page,
-  initialPage = 1,
-  onChange,
-}: PaginationParams) {
   const [activePage, setActivePage] = useUncontrolled({
     value: page,
-    onChange,
+    onChange: onChangePage,
     defaultValue: initialPage,
     finalValue: initialPage,
     rule: (_page) => typeof _page === 'number' && _page <= total,
   })
 
+  const _boundaries = isMobile ? 2 : boundaries
+
+  const canAbreviateItems = (shouldAbbreviate || isMobile) && total > abbreviationMinimumAmount
+  const displayLastNumbers = activePage + _boundaries + (isMobile ? 0 : 2) >= total
+  const isCenterSelected = canAbreviateItems && activePage > _boundaries && !displayLastNumbers
+
+  const dotsDisplay = isCenterSelected ? abbreviationSymbol : null
+
   const setPage = (pageNumber: number) => {
-    if (pageNumber <= 0) {
-      setActivePage(1)
-    } else if (pageNumber > total) {
-      setActivePage(total)
-    } else {
-      setActivePage(pageNumber)
-    }
+
+    const isPreviousArrow = pageNumber === 0
+    const isNextArrow = pageNumber === total + 1
+
+    const nonSelectableItems = [
+      displayLeftArrow && isPreviousArrow,
+      displayRightArrow && isNextArrow,
+    ].some(x => x)
+
+    if (nonSelectableItems) return activePage
+
+    setActivePage(pageNumber)
   }
 
   const next = () => setPage(activePage + 1)
@@ -51,54 +67,54 @@ export function usePagination({
   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
+  const status = useMemo(() => {
+    if (isCenterSelected) {
+      return 'abreviated'
+    }
 
-    /*
-       * 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)
+    if (displayLastNumbers) {
+      return 'end'
     }
 
-    const leftSiblingIndex = Math.max(activePage - siblings, boundaries)
-    const rightSiblingIndex = Math.min(activePage + siblings, total - boundaries)
+    return 'initial'
+  }, [isCenterSelected, displayLastNumbers])
 
-    /*
-       * 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)
+  const paginationRange = useMemo((): (number | string | '...')[] => {
 
-    if (!shouldShowLeftDots && shouldShowRightDots) {
-      const leftItemCount = siblings * 2 + boundaries + 2
-      return [...range(1, leftItemCount), DOTS, ...range(total - (boundaries - 1), total)]
+    if (!canAbreviateItems) {
+      return [
+        ...range(1, total),
+      ].filter(Boolean)
     }
 
-    if (shouldShowLeftDots && !shouldShowRightDots) {
-      const rightItemCount = boundaries + 1 + 2 * siblings
-      return [...range(1, boundaries), DOTS, ...range(total - rightItemCount, total)]
+    if (displayLastNumbers) {
+
+      const extraItems = [
+        1,
+        abbreviationSymbol,
+      ]
+
+      return [
+        ...extraItems,
+        ...range(total - (_boundaries + extraItems?.length - (isMobile ? 2 : 0)), total),
+      ].filter(Boolean)
     }
 
     return [
-      ...range(1, boundaries),
-      DOTS,
-      ...range(leftSiblingIndex, rightSiblingIndex),
-      DOTS,
-      ...range(total - boundaries + 1, total),
-    ]
-  }, [total, siblings, activePage])
+      ...range(1, isCenterSelected ? _boundaries - 1 : _boundaries),
+      dotsDisplay,
+      isCenterSelected ? activePage : abbreviationSymbol,
+      dotsDisplay,
+      ...range(total - _boundaries + (isCenterSelected ? 2 : 1), total),
+    ].filter(Boolean)
+
+  }, [total, activePage, displayLastNumbers, isCenterSelected, canAbreviateItems])
 
   return {
     range: paginationRange,
-    active: activePage,
+    page: Number(activePage),
     setPage,
+    status,
     next,
     previous,
     first,

package/src/lib/hooks/useRefresh.ts

@@ -0,0 +1,87 @@
+import React from 'react'
+import { AnyFunction, useEffect } from '@codeleap/common'
+
+type UseRefreshOptions = {
+    threshold: number
+    debounce: number
+    enabled: boolean
+  }
+
+const scrollDebounce = (func, delay) => {
+  const timerRef = React.useRef(null)
+
+  const scrollDebounce = (...args) => {
+    clearTimeout(timerRef.current)
+    timerRef.current = setTimeout(() => {
+      func(...args)
+    }, delay)
+  }
+
+  return scrollDebounce
+}
+
+export const useRefresh = (onRefresh = () => null, options: UseRefreshOptions) => {
+
+  const {
+    threshold,
+    debounce,
+    enabled,
+  } = options
+
+  const [refresh, setRefresh] = React.useState(false)
+
+  const pushToTopRef = React.useRef(0)
+
+  const refresher = React.useCallback(async (_onRefresh: AnyFunction) => {
+    setRefresh(true)
+    await _onRefresh?.()
+
+    setTimeout(() => {
+      setRefresh(false)
+      pushToTopRef.current = 0
+    }, 2500)
+  }, [])
+
+  const containerRef = React.useRef(null)
+
+  const onScroll = scrollDebounce(() => {
+    if (containerRef.current) {
+      const rect = containerRef.current?.getBoundingClientRect()
+      const scrollTop = window?.pageYOffset || document?.documentElement?.scrollTop
+
+      const containerTop = rect.top + scrollTop
+      const containerHeight = rect.height
+
+      const distanceFromTop = Math.max(0, scrollTop - containerTop)
+      const distanceFromBottom = Math.max(0, containerTop + containerHeight - scrollTop)
+
+      const totalDistance = containerHeight + distanceFromTop + distanceFromBottom
+      const percentage = (distanceFromTop / totalDistance) * 100
+
+      if (percentage < threshold) {
+        if (pushToTopRef.current === 2) {
+          refresher(onRefresh)
+        }
+
+        pushToTopRef.current = pushToTopRef.current + 1
+      }
+    }
+  }, debounce)
+
+  useEffect(() => {
+    if (enabled) {
+      window.addEventListener('scroll', onScroll)
+
+      return () => {
+        window.removeEventListener('scroll', onScroll)
+      }
+    }
+  }, [enabled])
+
+  return {
+    refresh,
+    scrollableRef: containerRef,
+    refresher,
+  }
+}
+

package/src/lib/hooks/useStylesFor.ts

@@ -0,0 +1,13 @@
+import { StyleProp, useStyleObserver } from '@codeleap/styles'
+import { useMemo } from 'react'
+import { WebStyleRegistry } from '../WebStyleRegistry'
+
+export const useStylesFor = <T = unknown>(componentName: string, style: StyleProp<T, string>): T => {
+  const styleObserver = useStyleObserver(style)
+
+  const styles = useMemo(() => {
+    return WebStyleRegistry.current.styleFor(componentName, style)
+  }, [styleObserver])
+
+  return styles
+}

package/src/lib/index.ts

@@ -2,3 +2,4 @@ export * from './hooks'
 export * from './tools'
 export * from './utils'
 export * from './ListMasonry'
+export * from './WebStyleRegistry'

package/src/lib/utils/cache.ts

@@ -0,0 +1,9 @@
+import createCache from '@emotion/cache'
+
+export const createCodeleapWebCache = () => {
+  return createCache({
+    key: 'codeleap-web',
+  })
+}
+
+export const codeleapWebCache = createCodeleapWebCache()

package/src/lib/utils/index.ts

@@ -1,3 +1,4 @@
 export * from './pollyfils/scroll'
 export * from './stopPropagation'
 export * from './test'
+export * from './cache'