@codeleap/web 3.25.0 → 3.25.2

package/src/components/View/types.ts

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

package/src/components/components.ts

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

package/src/components/defaultStyles.ts

@@ -0,0 +1,79 @@
+import { ViewPresets } from './View/styles'
+import { IconPresets } from './Icon/styles'
+import { TouchablePresets } from './Touchable/styles'
+import { TextPresets } from './Text/styles'
+import { ScrollPresets } from './Scroll/styles'
+import { ActivityIndicatorPresets } from './ActivityIndicator/styles'
+import { ButtonPresets } from './Button/styles'
+import { ActionIconPresets } from './ActionIcon/styles'
+import { ModalPresets } from './Modal/styles'
+import { CheckboxPresets } from './Checkbox/styles'
+import { CollapsePresets } from './Collapse/styles'
+import { DrawerPresets } from './Drawer/styles'
+import { OverlayPresets } from './Overlay/styles'
+import { TextInputPresets } from './TextInput/styles'
+import { RadioInputPresets } from './RadioInput/styles'
+import { SelectPresets } from './Select/styles'
+import { ListPresets, PaginationIndicatorStyles } from './List'
+import { SliderPresets } from './Slider/styles'
+import { LoadingOverlayPresets } from './LoadingOverlay/styles'
+import { InputBasePresets } from './InputBase'
+import { SwitchPresets } from './Switch/styles'
+import { NumberIncrementPresets } from './NumberIncrement/styles'
+import { TooltipPresets } from './Tooltip/styles'
+import { SegmentedControlPresets } from './SegmentedControl/styles'
+import { PagerPresets } from './Pager/styles'
+import { EmptyPlaceholderPresets } from './EmptyPlaceholder/styles'
+import { GridPresets } from './Grid/styles'
+import { BadgePresets } from './Badge/styles'
+import { CropPickerPresets } from './CropPicker'
+import { TagPresets } from './Tag/styles'
+import { SectionFilterPresets } from './SectionFilters/styles'
+
+export const defaultStyles = {
+  View: ViewPresets,
+  Icon: IconPresets,
+  Touchable: TouchablePresets,
+  Text: TextPresets,
+  ActivityIndicator: ActivityIndicatorPresets,
+  ActionIcon: ActionIconPresets,
+  Scroll: ScrollPresets,
+
+  Button: ButtonPresets,
+  Modal: ModalPresets,
+  Checkbox: CheckboxPresets,
+  Collapse: CollapsePresets,
+  Drawer: DrawerPresets,
+  Overlay: OverlayPresets,
+  TextInput: TextInputPresets,
+  RadioInput: RadioInputPresets,
+  Select: SelectPresets,
+  List: ListPresets,
+  Slider: SliderPresets,
+  LoadingOverlay: LoadingOverlayPresets,
+  InputBase: InputBasePresets,
+  Switch: SwitchPresets,
+  NumberIncrement: NumberIncrementPresets,
+  Tooltip: TooltipPresets,
+  SegmentedControlPresets: SegmentedControlPresets,
+  Pager: PagerPresets,
+  EmptyPlaceholder: EmptyPlaceholderPresets,
+  PaginationIndicator: PaginationIndicatorStyles,
+  Grid: GridPresets,
+  Badge: BadgePresets,
+  Dropzone: DropzonePresets,
+  CropPicker: CropPickerPresets,
+  Tag: TagPresets,
+  SectionFilters: SectionFilterPresets,
+}
+
+import createCache from '@emotion/cache'
+import { DropzonePresets } from './Dropzone/styles'
+
+export const createCodeleapWebCache = () => {
+  return createCache({
+    key: 'codeleap-web',
+  })
+}
+
+export const codeleapWebCache = createCodeleapWebCache()

package/src/index.ts

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

package/src/lib/hooks/index.ts

@@ -14,8 +14,3 @@ 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,19 +1,18 @@
 import { useMemo } from 'react'
-import { TypeGuards } from '@codeleap/common'
-import { AppTheme, Theme, useTheme } from '@codeleap/styles'
+import { TypeGuards, useCodeleapContext } from '@codeleap/common'
 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 = useTheme(store => store.current) as AppTheme<Theme>
+  const { Theme } = useCodeleapContext()
 
-  const themeBreakpoints: Record<string, number> = theme?.breakpoints ?? {}
+  const themeBreakpoints: Record<string, number> = Theme?.breakpoints
 
   const breakpoints: Record<string, number> = useMemo(() => {
-    let breaks = Object.entries(themeBreakpoints)
+    const breaks = Object.entries(themeBreakpoints)
 
-    breaks = breaks?.sort((a, b) => a?.[1] - b?.[1])
+    breaks?.sort((a, b) => a?.[1] - b?.[1])
 
     const sortBreakpoints = Object.fromEntries(breaks)
 
@@ -29,8 +28,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 as never), { getInitialValueInEffect: false })
-    const matchesUp = useMediaQuery(theme?.media?.up(breakpoint as never), { getInitialValueInEffect: false })
+    const matchesDown = useMediaQuery(Theme.media.down(breakpoint), { getInitialValueInEffect: false })
+    const matchesUp = useMediaQuery(Theme.media.up(breakpoint), { getInitialValueInEffect: false })
 
     breakpointMatches[breakpoint] = !matchesUp && matchesDown
   }

package/src/lib/hooks/useMediaQuery.ts

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

package/src/lib/hooks/usePagination.ts

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

package/src/lib/index.ts

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

package/src/lib/utils/index.ts

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

package/src/lib/utils/test.ts

@@ -1,10 +1,10 @@
 import { TypeGuards } from '@codeleap/common'
 
 export const getTestId = (props: Record<string, any>) => {
-  let id = props?.testId || props?.['data-testid'] || props?.id || props?.debugName
+  let id = props.testId || props['data-testid'] || props.id || props.debugName
 
   if (TypeGuards.isString(id)) {
-    id = id?.replace(/\s/g, '_').toLowerCase()
+    id = id.replace(/\s/g, '_').toLowerCase()
   }
 
   return id

package/src/components/ActionIcon/types.ts

@@ -1,15 +0,0 @@
-import { ComponentCommonProps } from '../../types'
-import { TouchableProps } from '../Touchable'
-import { ActionIconComposition } from './styles'
-import { IconProps } from '../Icon'
-import { AppIcon, StyledProp } from '@codeleap/styles'
-
-export type ActionIconProps =
-  Omit<TouchableProps, 'style'> &
-  ComponentCommonProps &
-  {
-    iconProps?: Partial<IconProps>
-    icon?: AppIcon
-    name?: AppIcon
-    style?: StyledProp<ActionIconComposition>
-  }

package/src/components/ActivityIndicator/types.ts

@@ -1,12 +0,0 @@
-import React from 'react'
-import { StyledProp } from '@codeleap/styles'
-import { ComponentCommonProps } from '../../types'
-import { ActivityIndicatorComposition } from './styles'
-
-export type ActivityIndicatorProps =
-  ComponentCommonProps &
-  {
-    style?: StyledProp<ActivityIndicatorComposition>
-    component?: React.ComponentType<Omit<ActivityIndicatorProps & { ref?: React.Ref<HTMLDivElement> }, 'component'>>
-    size?: number
-  }

package/src/components/Badge/types.ts

@@ -1,28 +0,0 @@
-import { TextProps } from '../Text'
-import { ViewProps } from '../View'
-import { BadgeComposition } from './styles'
-import { ComponentCommonProps } from '../../types'
-import { StyledProp } from '@codeleap/styles'
-
-export type BadgeProps =
-  Omit<ViewProps, 'style'> &
-  ComponentCommonProps &
-  {
-    style?: StyledProp<BadgeComposition>
-    maxCount?: number
-    minCount?: number
-    debugName?: string
-    innerWrapperProps?: Partial<ViewProps>
-    textProps?: Partial<TextProps>
-    getBadgeContent?: (props: BadgeContent) => string
-    renderBadgeContent?: (props: BadgeContent & { content: string }) => JSX.Element
-    disabled?: boolean
-    badge?: number | boolean
-  }
-
-export type BadgeContent = BadgeProps & { count: number }
-
-export type BadgeComponentProps = {
-  badge?: BadgeProps['badge']
-  badgeProps?: Partial<BadgeProps>
-}

package/src/components/Button/types.ts

@@ -1,25 +0,0 @@
-import React from 'react'
-import { AnyFunction } from '@codeleap/common'
-import { AppIcon, StyledProp } from '@codeleap/styles'
-import { TouchableProps } from '../Touchable'
-import { ActivityIndicatorProps } from '../ActivityIndicator'
-import { ButtonComposition } from './styles'
-import { ComponentCommonProps } from '../../types'
-
-export type ButtonProps =
-  Omit<TouchableProps, 'style'> &
-  ComponentCommonProps &
-  {
-    text?: string
-    rightIcon?: AppIcon
-    icon?: AppIcon
-    onPress?: AnyFunction
-    style?: StyledProp<ButtonComposition>
-    loading?: boolean
-    loadingShowText?: boolean
-    debugName: string
-    debounce?: number
-    selected?: boolean
-    children?: React.ReactNode
-    loaderProps?: Partial<ActivityIndicatorProps>
-  }

package/src/components/Checkbox/types.ts

@@ -1,15 +0,0 @@
-import { CheckboxComposition } from './styles'
-import { InputBaseProps } from '../InputBase'
-import { ComponentCommonProps } from '../../types'
-import { AppIcon, StyledProp } from '@codeleap/styles'
-
-export type CheckboxProps =
-  Pick<InputBaseProps, 'disabled' | 'label'> &
-  ComponentCommonProps &
-  {
-    style?: StyledProp<CheckboxComposition>
-    value: boolean
-    onValueChange: (value: boolean) => void
-    checkboxOnLeft?: boolean
-    checkIcon?: AppIcon
-  }

package/src/components/Collapse/types.ts

@@ -1,11 +0,0 @@
-import { StyledProp } from '@codeleap/styles'
-import { MotionProps } from 'framer-motion'
-import { CollapseComposition } from './styles'
-
-export type CollapseProps =
-  Omit<MotionProps, 'style'> &
-  {
-    open: boolean
-    style?: StyledProp<CollapseComposition>
-    children?: React.ReactNode
-  }

package/src/components/Drawer/types.ts

@@ -1,23 +0,0 @@
-import { AnyFunction } from '@codeleap/common'
-import React from 'react'
-import { ComponentCommonProps } from '../../types/utility'
-import { DrawerComposition } from './styles'
-import { ActionIconProps } from '../ActionIcon'
-import { AppIcon, StyledProp } from '@codeleap/styles'
-
-export type DrawerProps =
-  ComponentCommonProps &
-  {
-    open: boolean
-    toggle: AnyFunction
-    darkenBackground?: boolean
-    size?: number
-    showCloseButton?: boolean
-    title?: React.ReactNode | string
-    footer?: React.ReactNode
-    position?: 'left' | 'right' | 'top' | 'bottom'
-    style?: StyledProp<DrawerComposition>
-    closeButtonProps?: Partial<ActionIconProps>
-    closeIcon?: AppIcon
-    children?: React.ReactNode
-  }

package/src/components/EmptyPlaceholder/types.ts

@@ -1,32 +0,0 @@
-import React, { ImgHTMLAttributes } from 'react'
-import { ViewProps } from '../View'
-import { ActivityIndicatorComposition, ActivityIndicatorProps } from '../ActivityIndicator'
-import { EmptyPlaceholderComposition } from './styles'
-import { StylesOf } from '@codeleap/common'
-import { ComponentCommonProps } from '../../types'
-import { AppIcon, StyledProp } from '@codeleap/styles'
-
-type RenderEmptyProps = {
-  emptyText: string | React.ReactElement
-  emptyIconName?: AppIcon
-  styles: StylesOf<EmptyPlaceholderComposition> & {
-    activityIndicatorStyles: StylesOf<ActivityIndicatorComposition>
-  }
-}
-
-export type EmptyPlaceholderProps =
-  ComponentCommonProps &
-  {
-    itemName?: string
-    title?: React.ReactElement | string
-    description?: React.ReactElement | string
-    icon?: AppIcon | ((props: EmptyPlaceholderProps) => JSX.Element)
-    image?: string
-    imageProps?: ImgHTMLAttributes<HTMLImageElement>
-    loading?: boolean
-    style?: StyledProp<EmptyPlaceholderComposition>
-    renderEmpty?: (props: RenderEmptyProps) => JSX.Element
-    wrapperProps?: ViewProps
-    imageWrapperProps?: ViewProps
-    indicatorProps?: Partial<ActivityIndicatorProps>
-  }

package/src/components/FileInput/index.tsx

@@ -1,72 +0,0 @@
-import React, { forwardRef, useImperativeHandle, useRef } from 'react'
-import { WebInputFile, useCallback, TypeGuards } from '@codeleap/common'
-import { FileInputProps, FileInputRef } from './types'
-
-export * from './types'
-
-export const FileInput = forwardRef<FileInputRef, FileInputProps>((props, ref) => {
-  const inputRef = useRef<HTMLInputElement>(null)
-
-  const {
-    onFileSelect,
-    autoClear,
-    onChange,
-    ...inputProps
-  } = {
-    ...FileInput.defaultProps,
-    ...props,
-  }
-
-  const resolveWithFile = useRef<(file: WebInputFile[]) => any>()
-
-  const clearInput = useCallback(() => {
-    if (!inputRef.current) return
-    inputRef.current.value = null
-  }, [])
-
-  useImperativeHandle(ref, () => ({
-    openFilePicker: () => {
-      inputRef.current.click()
-
-      return new Promise<WebInputFile[]>((resolve) => {
-        resolveWithFile.current = resolve
-      })
-    },
-    clear: clearInput,
-  }))
-
-  async function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
-    if (!e.target.files.length) return
-    if (TypeGuards.isFunction(onChange)) onChange(e)
-
-    const fileArray = Array.from(e.target?.files || []) as File[]
-
-    const files: WebInputFile[] = fileArray.map((obj) => ({
-      file: obj,
-      preview: URL.createObjectURL(obj),
-    }))
-
-    onFileSelect && onFileSelect(files)
-
-    if (resolveWithFile.current) {
-      await resolveWithFile.current(files)
-      resolveWithFile.current = undefined
-    }
-
-    if (autoClear) clearInput()
-  }
-
-  return (
-    <input
-      type={'file'}
-      style={{ visibility: 'hidden', width: 0, height: 0, opacity: 0, display: 'none' }}
-      {...inputProps}
-      ref={inputRef}
-      onChange={handleChange}
-    />
-  )
-})
-
-FileInput.defaultProps = {
-  autoClear: true,
-} as Partial<FileInputProps>