@codeleap/web 3.24.3 → 4.0.0

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/CropPicker/utils.ts

@@ -1,51 +0,0 @@
-import { Crop } from 'react-image-crop'
-import { ImageReading } from './types'
-
-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')
-  })
-}

package/src/components/FileInput.tsx

@@ -1,91 +0,0 @@
-/** @jsx jsx */
-import { jsx, CSSObject } from '@emotion/react'
-import React, {
-  useImperativeHandle,
-  useRef,
-} from 'react'
-import { WebInputFile, useCallback } from '@codeleap/common'
-import { HTMLProps } from '../types'
-
-export type FileInputRef = {
-  openFilePicker: () => Promise<WebInputFile[]>
-  clear: () => void
-}
-
-export type FileInputProps = Omit<HTMLProps<'input'>, 'type' | 'ref'> & {
-  onFileSelect?: (files: WebInputFile[]) => void
-  autoClear?: boolean
-}
-
-export const _FileInput = (inputProps: FileInputProps, ref: React.Ref<FileInputRef>) => {
-  const inputRef = useRef<HTMLInputElement>(null)
-
-  const { onFileSelect, autoClear = true, ...props } = inputProps
-
-  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
-    inputProps.onChange && inputProps.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'}
-      css={{ visibility: 'hidden', width: 0, height: 0, opacity: 0, display: 'none' }}
-      {...props}
-      ref={inputRef}
-      onChange={handleChange}
-    />
-  )
-}
-
-export const FileInput = React.forwardRef<FileInputRef, FileInputProps>(_FileInput) as unknown as (
-  (props: FileInputProps & { ref?: React.MutableRefObject<FileInputRef> | React.Ref<FileInputRef> }) => JSX.Element
-)
-
-export const useFileInput = () => {
-  const inputRef = useRef<FileInputRef | null>(null)
-
-  const openFilePicker = () => {
-    return inputRef.current?.openFilePicker()
-  }
-
-  return {
-    openFilePicker,
-    ref: inputRef,
-  }
-}

package/src/components/List/PaginationIndicator.tsx

@@ -1,102 +0,0 @@
-import React from 'react'
-import {
-  assignTextStyle,
-  ComponentVariants,
-  createDefaultVariantFactory,
-  getNestedStylesByKey,
-  includePresets,
-  StylesOf,
-  TypeGuards,
-  useDefaultComponentStyle,
-} from '@codeleap/common'
-import { ActivityIndicator, ActivityIndicatorComposition, ActivityIndicatorProps } from '../ActivityIndicator'
-import { Text, TextProps } from '../Text'
-import { View } from '../View'
-import { ComponentCommonProps } from '../../types'
-
-export type PaginationIndicatorComposition = 'text' | `loader${Capitalize<ActivityIndicatorComposition>}` | 'wrapper'
-
-const createPaginationIndicatorStyle = createDefaultVariantFactory<PaginationIndicatorComposition>()
-
-const presets = includePresets((style) => createPaginationIndicatorStyle(() => ({ loaderWrapper: style, text: style })))
-
-export const PaginationIndicatorStyles = {
-  ...presets,
-  default: createPaginationIndicatorStyle((theme) => {
-    return {
-      wrapper: {
-        ...theme.presets.fullWidth,
-        ...theme.presets.center,
-      },
-      loaderWrapper: {
-        ...theme.presets.center,
-        ...theme.spacing.marginVertical(3),
-      },
-      text: {
-        ...assignTextStyle('h4')(theme).text,
-        ...theme.presets.textCenter,
-        ...theme.spacing.marginVertical(3),
-        ...theme.presets.fullWidth,
-      },
-    }
-  }),
-}
-
-export type PaginationIndicatorProps = {
-  isFetching?: boolean
-  noMoreItemsText: React.ReactChild
-  hasMore?: boolean
-  activityIndicator?: JSX.Element
-  styles?: StylesOf<PaginationIndicatorComposition>
-  style?: React.CSSProperties
-  indicatorProps?: Partial<ActivityIndicatorProps>
-  textProps?: Partial<TextProps<'p'>>
-} & ComponentVariants<typeof PaginationIndicatorStyles> & ComponentCommonProps
-
-const defaultProps: Partial<PaginationIndicatorProps> = {}
-
-export const PaginationIndicator = (props: PaginationIndicatorProps) => {
-  const allProps = {
-    ...PaginationIndicator.defaultProps,
-    ...props,
-  }
-
-  const { 
-    hasMore, 
-    isFetching, 
-    noMoreItemsText, 
-    style, 
-    activityIndicator, 
-    styles = {}, 
-    responsiveVariants = {},
-    variants = [],
-    indicatorProps = {},
-    debugName,
-  } = allProps
-
-  const variantStyles = useDefaultComponentStyle<
-    'u:PaginationIndicator',
-    typeof PaginationIndicatorStyles
-    >('u:PaginationIndicator', {
-      variants,
-      responsiveVariants,
-      styles,
-    })
-
-  const loaderStyles = getNestedStylesByKey('loader', variantStyles)
-
-  if (isFetching) {
-    return activityIndicator || <View css={[variantStyles.wrapper, style]}><ActivityIndicator debugName={debugName} {...indicatorProps} styles={loaderStyles}/></View>
-  }
-  
-  if (!hasMore) {
-    if (TypeGuards.isString(noMoreItemsText) || TypeGuards.isNumber(noMoreItemsText)) {
-      return <Text debugName={debugName} css={[variantStyles.text, style]} text={noMoreItemsText.toString()}/>
-    }
-    return noMoreItemsText
-  }
-
-  return null
-}
-
-PaginationIndicator.defaultProps = defaultProps

package/src/components/List/useInfiniteScroll.ts

@@ -1,159 +0,0 @@
-import React from 'react'
-import { AnyFunction, TypeGuards, useEffect } from '@codeleap/common'
-import { ListProps } from '.'
-import { GridProps } from '../Grid'
-import { useInfiniteLoader, LoadMoreItemsCallback, UseInfiniteLoaderOptions } from 'masonic'
-
-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
-}
-
-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,
-  }
-}
-
-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/components/Progress/Bar/styles.tsx

@@ -1,7 +0,0 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
-
-export type ProgressBarComposition = 'wrapper' | 'progress' | 'indicator' | 'text' | 'icon' | 'leftIcon' | 'leftText' | 'rightIcon' | 'rightText'
-
-const createProgressBarStyle = createDefaultVariantFactory<ProgressBarComposition>()
-
-export const ProgressBarPresets = includePresets((styles) => createProgressBarStyle(() => ({ wrapper: styles })))

package/src/components/Progress/Bar/types.tsx

@@ -1,30 +0,0 @@
-import { ComponentVariants, IconPlaceholder, PropsOf, StylesOf } from '@codeleap/common'
-import { ProgressBarComposition, ProgressBarPresets } from './styles'
-import {
-  ProgressProps,
-  ProgressIndicatorProps,
-} from '@radix-ui/react-progress'
-import { IconProps, View, TextProps as _TextProps } from '../../components'
-import { ProgressPropsRoot } from '..'
-import { ElementType } from 'react'
-
-type TextProps = _TextProps<ElementType>
-
-export type ProgressBarProps = ComponentVariants<typeof ProgressBarPresets> &
-  Omit<PropsOf<typeof View>, 'variants' | 'responsiveVariants' | 'styles'> &
-  ProgressPropsRoot & {
-    styles?: StylesOf<ProgressBarComposition>
-    progressIndicatorProps?: ProgressIndicatorProps
-    progressRootProps?: ProgressProps
-
-    leftIcon?: IconPlaceholder
-    leftIconProps?: Partial<IconProps>
-    rightIcon?: IconPlaceholder
-    rightIconProps?: Partial<IconProps>
-    text?: string
-    textProps?: Partial<TextProps>
-    leftText?: TextProps['text'] | JSX.Element
-    leftTextProps?: Partial<TextProps>
-    rightText?: TextProps['text'] | JSX.Element
-    rightTextProps?: Partial<TextProps>
-  }

package/src/components/Scroll/index.tsx

@@ -1,32 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react'
-import {
-  ElementType,
-  forwardRef,
-  ReactElement,
-  Ref,
-} from 'react'
-import { NativeHTMLElement } from '../../types'
-import { View, ViewProps } from '../View'
-
-export const ScrollCP = <T extends NativeHTMLElement = 'div'>(
-  props: ViewProps<T>,
-  ref: Ref<any>,
-) => {
-
-  return (
-    // @ts-ignore
-    <View
-      {...props}
-      ref={ref}
-      scroll
-    />
-
-  )
-}
-
-export * from './styles'
-
-export const Scroll = forwardRef(ScrollCP) as <T extends NativeHTMLElement = 'div'>(
-  props: ViewProps<T>
-) => JSX.Element

package/src/components/Scroll/styles.ts

@@ -1,8 +0,0 @@
-import { createDefaultVariantFactory, includePresets } from "@codeleap/common";
-import { ViewComposition } from "../View";
-
-export type ScrollCompostion = ViewComposition
-
-const createScrollStyle = createDefaultVariantFactory<ScrollCompostion>()
-
-export const ScrollPresets = includePresets((styles) => createScrollStyle(() => ({ wrapper: styles })))

package/src/components/SegmentedControl/SegmentedControlOption.tsx

@@ -1,84 +0,0 @@
-/** @jsx jsx */
-import { CSSObject, jsx } from '@emotion/react'
-
-import React, { forwardRef } from 'react'
-import { PropsOf, IconPlaceholder } from '@codeleap/common'
-import { StylesOf } from '../../types'
-import { Text } from '../Text'
-import { Touchable } from '../Touchable'
-import { SegmentedControlComposition } from './styles'
-import { Icon, IconProps } from '../Icon'
-
-type OptionRef = PropsOf<typeof Touchable>['ref']
-
-export type SegmentedControlOptionProps = PropsOf<typeof Touchable> & {
-  selected?: boolean
-  label: string
-  variantStyles?: StylesOf<SegmentedControlComposition>
-  value?: any
-  textProps?: Omit<PropsOf<typeof Text>, 'key'>
-  iconProps?: Partial<IconProps>
-  icon?: IconPlaceholder
-  ref?: OptionRef
-}
-
-const SegmentedControlOptionCP = (props: SegmentedControlOptionProps, ref: OptionRef) => {
-  const {
-    selected,
-    onPress,
-    style,
-    variantStyles = {},
-    iconProps = {},
-    label,
-    icon,
-    textProps,
-    disabled,
-    ...touchableProps
-  } = props
-
-
-  const iconStyles = {
-    ...variantStyles.icon as object,
-    ...(selected ? variantStyles['icon:selected'] as object : {}),
-    ...(disabled ? variantStyles['icon:disabled'] as object : {}),
-  }
-
-  return (
-    <Touchable
-      key={touchableProps.key}
-      ref={ref}
-      css={[
-        variantStyles.button,
-        selected && variantStyles['button:selected'],
-        disabled && variantStyles['button:disabled'],
-        style as any,
-      ]}
-      onPress={onPress}
-      disabled={disabled}
-      {...touchableProps}
-    >
-      {
-        !!icon && (
-          <Icon
-            debugName={touchableProps?.debugName}
-            name={icon}
-            style={iconStyles}
-            {...iconProps}
-          />
-        )
-      }
-      <Text
-        text={label}
-        debugName={touchableProps?.debugName}
-        css={[
-          variantStyles.text,
-          selected && variantStyles['text:selected'],
-          disabled && variantStyles['text:disabled'],
-        ]}
-        {...textProps}
-      />
-    </Touchable>
-  )
-}
-
-export const SegmentedControlOption = forwardRef(SegmentedControlOptionCP) as ((props: SegmentedControlOptionProps) => JSX.Element)

package/src/components/defaultStyles.ts

@@ -1,79 +0,0 @@
-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()