@codeleap/web 3.25.0 → 3.25.2

package/src/components/FileInput/types.ts

@@ -1,14 +0,0 @@
-import { WebInputFile } 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
-  }

package/src/components/Icon/types.ts

@@ -1,15 +0,0 @@
-import { ComponentCommonProps } from '../../types'
-import { IconComposition } from './styles'
-import { AppIcon, StyledProp } from '@codeleap/styles'
-import { CSSProperties } from 'react'
-
-export type IconProps = 
-  ComponentCommonProps & 
-  {
-    name: AppIcon
-    style?: StyledProp<IconComposition>
-    size?: string | number
-    color?: string
-    renderEmptySpace?: boolean
-    forceStyle?: CSSProperties
-  }

package/src/components/LoadingOverlay/types.ts

@@ -1,16 +0,0 @@
-import React from 'react'
-import { LoadingOverlayComposition } from './styles'
-import { ViewProps } from '../View'
-import { ActivityIndicatorProps } from '../ActivityIndicator'
-import { ComponentCommonProps } from '../../types/utility'
-import { StyledProp } from '@codeleap/styles'
-
-export type LoadingOverlayProps =
-  Omit<ViewProps, 'style'> &
-  ComponentCommonProps &
-  {
-    visible?: boolean
-    style?: StyledProp<LoadingOverlayComposition>
-    indicatorProps?: ActivityIndicatorProps
-    children?: React.ReactNode
-  }

package/src/components/Modal/types.ts

@@ -1,55 +0,0 @@
-import { AnyFunction, PropsOf } from '@codeleap/common'
-import React from 'react'
-import { OverlayProps } from '../Overlay'
-import { ModalComposition } from './styles'
-import { ActionIconProps } from '../ActionIcon'
-import { TouchableProps } from '../Touchable'
-import { AppIcon, ICSS, StyledProp } from '@codeleap/styles'
-
-export type ModalProps =
-  {
-    visible?: boolean
-    children?: React.ReactNode
-    title?: React.ReactNode | string
-    description?: React.ReactNode | string
-    renderModalBody?: (props: ModalBodyProps) => React.ReactElement
-    toggle?: AnyFunction
-    style?: StyledProp<ModalComposition>
-    accessible?: boolean
-    showClose?: boolean
-    closable?: boolean
-    dismissOnBackdrop?: boolean
-    scroll?: boolean
-    header?: React.ReactElement
-    footer?: React.ReactNode
-    withOverlay?: boolean
-    closeIconName?: AppIcon
-    keepMounted?: boolean
-    renderHeader?: (props: ModalHeaderProps) => React.ReactElement
-    debugName?: string
-    closeButtonProps?: Partial<ActionIconProps>
-    closeOnEscape?: boolean
-    onClose?: () => void
-    overlayProps?: Partial<OverlayProps>
-    zIndex?: number
-    withScrollContainer?: boolean
-    scrollLock?: boolean
-    backdropProps?: Partial<TouchableProps>
-    alterHistory?: boolean
-    modalId?: string
-    autoIndex?: boolean
-  }
-
-export type ModalBodyProps = {
-  id: string
-  style: ICSS
-  children?: React.ReactNode
-}
-
-export type ModalHeaderProps =
-  Partial<Omit<ModalProps, 'children'>> &
-  {
-    id: string
-    styles: PropsOf<ModalComposition>
-    onPressClose: () => void
-  }

package/src/components/NumberIncrement/types.ts

@@ -1,29 +0,0 @@
-import { yup, FormTypes } from '@codeleap/common'
-import { NumberIncrementComposition } from './styles'
-import { InputBaseProps } from '../InputBase'
-import { PatternFormatProps as PFProps, NumericFormatProps as NFProps } from 'react-number-format'
-import { FormatInputValueFunction } from 'react-number-format/types/types'
-import { StyledProp } from '@codeleap/styles'
-
-export type NumberIncrementProps =
-  Pick<InputBaseProps, 'debugName' | 'disabled' | 'label'> &
-  {
-    value: number
-    onValueChange: (value: number) => void
-    onChangeText?: (value: number) => void
-    validate?: FormTypes.ValidatorWithoutForm<string> | yup.SchemaOf<string>
-    style?: StyledProp<NumberIncrementComposition>
-    max?: number
-    min?: number
-    step?: number
-    editable?: boolean
-    prefix?: NFProps['prefix']
-    suffix?: NFProps['suffix']
-    separator?: NFProps['thousandSeparator']
-    format?: PFProps['format']
-    mask?: PFProps['mask']
-    hasSeparator?: boolean
-    _error?: string
-    formatter?: FormatInputValueFunction
-    placeholder?: string
-  }

package/src/components/Overlay/types.ts

@@ -1,13 +0,0 @@
-import { StyledProp } from '@codeleap/styles'
-import { ViewProps } from '../View'
-import { OverlayComposition } from './styles'
-import { AnyFunction } from '@codeleap/common'
-
-export type OverlayProps =
-  Omit<ViewProps, 'style'> &
-  {
-    debugName: string
-    visible?: boolean
-    style?: StyledProp<OverlayComposition>
-    onPress?: AnyFunction
-  }

package/src/components/Pager/types.ts

@@ -1,35 +0,0 @@
-import { StylesOf } from '@codeleap/common'
-import { Settings } from 'react-slick'
-import { PagerComposition } from './styles'
-import React, { ReactNode, ReactElement } from 'react'
-import { ViewProps } from '../View'
-import { ComponentCommonProps } from '../../types'
-import { StyledProp } from '@codeleap/styles'
-
-export type PagerRef = {
-  goTo: (page: number) => void
-}
-
-export type PagerProps =
-  Omit<Settings, 'style'> &
-  ComponentCommonProps &
-  {
-    style?: StyledProp<PagerComposition>
-    page?: number
-    children: ReactNode
-    onChange?: (page: number) => void
-    renderPageWrapper?: React.FC
-    footer?: ReactElement
-    dotsProps?: DotsProps
-    pageWrapperProps?: ViewProps
-    dotsDisabled?: boolean
-    disableSwipe?: boolean
-  }
-
-export type DotsProps =
-  Pick<PagerProps, 'page' | 'dotsDisabled'> &
-  {
-    childArray: ReactNode[]
-    onPress?: (index: number) => void
-    styles: StylesOf<PagerComposition>
-  }

package/src/components/PaginationButtons/index.tsx

@@ -1,173 +0,0 @@
-import { TypeGuards } from '@codeleap/common'
-import { View } from '../View'
-import { Button } from '../Button'
-import { useMediaQuery, usePagination, useStylesFor, WebStyleRegistry } from '../../lib'
-import { PaginationButtonsProps } from './types'
-import { AnyRecord, AppIcon, AppTheme, IJSX, StyledComponentProps, Theme, useCompositionStyles, useTheme } from '@codeleap/styles'
-
-export * from './styles'
-export * from './types'
-
-export const PaginationButtons = (props: PaginationButtonsProps) => {
-  const allProps = {
-    ...PaginationButtons.defaultProps,
-    ...props,
-  }
-
-  const {
-    shouldAbbreviate,
-    displayLeftArrow,
-    displayRightArrow,
-    disabled,
-    style,
-    itemProps,
-    controlLeftIconName,
-    controlRightIconName,
-    leftArrowButtonProps,
-    rightArrowButtonProps,
-    abbreviationSymbol,
-    isMobile,
-    ...paginationProps
-  } = allProps
-
-  const theme = useTheme(store => store?.current) as AppTheme<Theme>
-
-  const { boundaries = 2 } = paginationProps
-
-  const query = theme?.media?.down('tabletSmall' as never)
-
-  const _isMobile = useMediaQuery(query, { getInitialValueInEffect: false })
-  const isMobileQuery = TypeGuards.isBoolean(isMobile) ? isMobile : _isMobile
-
-  const centeredElementIndex = isMobileQuery ? 3 : boundaries + 1
-
-  const {
-    range,
-    first,
-    next,
-    previous,
-    setPage,
-    page,
-    status,
-  } = usePagination({
-    abbreviationSymbol,
-    isMobile: isMobileQuery,
-    displayLeftArrow,
-    displayRightArrow,
-    shouldAbbreviate,
-    ...paginationProps,
-  })
-
-  const styles = useStylesFor(PaginationButtons.styleRegistryName, style)
-
-  const compositionStyles = useCompositionStyles(['button', 'arrowLeftButton', 'arrowRightButton'], styles)
-
-  const fetchPreviousPage = () => {
-    props?.onFetchPreviousPage?.()
-    previous?.()
-  }
-
-  const fetchNextPage = () => {
-    props?.onFetchNextPage?.()
-    next?.()
-  }
-
-  const fetchPage = (page: number) => {
-    setPage?.(page)
-  }
-
-  const onPressItem = ({ item, isArrowLeft, isArrowRight }: { item: string | number; isArrowLeft: boolean; isArrowRight: boolean }) => {
-    if (item === abbreviationSymbol) {
-      return null
-    }
-
-    if (isArrowLeft) {
-      if (displayLeftArrow) {
-        return fetchPreviousPage()
-      } else {
-        return first()
-      }
-    }
-
-    if (displayRightArrow && isArrowRight) {
-      return fetchNextPage()
-    }
-
-    props?.onPressItem?.(item)
-    fetchPage(Number(item))
-  }
-
-  return (
-    <View style={styles.wrapper}>
-      {displayLeftArrow ? (
-        <Button
-          icon={controlLeftIconName}
-          onPress={() => onPressItem({ item: null, isArrowLeft: true, isArrowRight: false })}
-          {...leftArrowButtonProps}
-          style={compositionStyles.arrowLeftButton}
-        />
-      ) : null}
-
-      {range?.map?.((item, index) => {
-        if (props?.renderItem) {
-          return props?.renderItem?.(item, index)
-        }
-
-        let selected = null
-
-        switch (status) {
-          case 'initial':
-            selected = page === index + 1
-            break
-          case 'abreviated':
-            selected = index === centeredElementIndex - 1
-            break
-          case 'end':
-            selected = page - (Number(item) - index) === index
-        }
-
-        return (
-          <Button
-            text={String(item)}
-            selected={selected}
-            onPress={() => onPressItem({ item, isArrowLeft: false, isArrowRight: false })}
-            disabled={disabled}
-            {...itemProps}
-            style={compositionStyles.button}
-          />
-        )
-
-      })}
-
-      {displayRightArrow ? (
-        <Button
-          icon={controlRightIconName}
-          onPress={() => onPressItem({ item: null, isArrowLeft: false, isArrowRight: true })}
-          {...rightArrowButtonProps}
-          style={compositionStyles.arrowRightButton}
-        />
-      ) : null}
-    </View>
-  )
-}
-
-PaginationButtons.styleRegistryName = 'PaginationButtons'
-PaginationButtons.elements = ['wrapper', 'button', 'arrowLeftButton', 'arrowRightButton']
-PaginationButtons.rootElement = 'wrapper'
-
-PaginationButtons.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return PaginationButtons as (props: StyledComponentProps<PaginationButtonsProps, typeof styles>) => IJSX
-}
-
-PaginationButtons.defaultProps = {
-  shouldAbbreviate: true,
-  displayLeftArrow: true,
-  displayRightArrow: true,
-  disabled: false,
-  isMobile: null,
-  abbreviationSymbol: '...',
-  controlLeftIconName: 'chevron-left' as AppIcon,
-  controlRightIconName: 'chevron-right' as AppIcon,
-} as Partial<PaginationButtonsProps>
-
-WebStyleRegistry.registerComponent(PaginationButtons)

package/src/components/PaginationButtons/styles.ts

@@ -1,7 +0,0 @@
-import { ButtonComposition } from '../Button'
-
-export type PaginationButtonsComposition =
-    'wrapper' |
-    `button${Capitalize<ButtonComposition>}` |
-    `arrowLeftButton${Capitalize<ButtonComposition>}` |
-    `arrowRightButton${Capitalize<ButtonComposition>}`

package/src/components/PaginationButtons/types.ts

@@ -1,26 +0,0 @@
-import { AnyFunction } from '@codeleap/common'
-import { PaginationButtonsComposition } from './styles'
-import { ButtonProps } from '../Button'
-import { PaginationParams } from '../../lib'
-import { AppIcon, StyledProp } from '@codeleap/styles'
-
-export type PaginationButtonsProps =
-  PaginationParams &
-  {
-    onFetchNextPage?: AnyFunction
-    onFetchPreviousPage?: AnyFunction
-    renderItem?: (item: string | number, index: number) => JSX.Element
-    onPressItem?: (item: string | number) => void
-    shouldAbbreviate?: boolean
-    abbreviationSymbol?: string
-    disabled?: boolean
-    displayLeftArrow?: boolean
-    displayRightArrow?: boolean
-    isMobile?: boolean
-    itemProps?: Partial<ButtonProps>
-    controlLeftIconName?: AppIcon
-    controlRightIconName?: AppIcon
-    leftArrowButtonProps?: Partial<ButtonProps>
-    rightArrowButtonProps?: Partial<ButtonProps>
-    style?: StyledProp<PaginationButtonsComposition>
-  }

package/src/components/PaginationIndicator/index.tsx

@@ -1,69 +0,0 @@
-import React from 'react'
-import { TypeGuards } from '@codeleap/common'
-import { ActivityIndicator } from '../ActivityIndicator'
-import { Text } from '../Text'
-import { View } from '../View'
-import { useStylesFor } from '../../lib/hooks/useStylesFor'
-import { PaginationIndicatorProps } from './types'
-import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { AnyRecord, IJSX, StyledComponentProps, useNestedStylesByKey } from '@codeleap/styles'
-
-export * from './styles'
-export * from './types'
-
-export const PaginationIndicator = (props: PaginationIndicatorProps) => {
-  const {
-    hasMore,
-    isFetching,
-    noMoreItemsText,
-    activityIndicator,
-    style,
-    indicatorProps,
-    debugName,
-  } = {
-    ...PaginationIndicator.defaultProps,
-    ...props,
-  }
-
-  const styles = useStylesFor(PaginationIndicator.styleRegistryName, style)
-
-  const loaderStyles = useNestedStylesByKey('loader', styles)
-
-  if (isFetching) {
-    return activityIndicator || (
-      <View style={styles.wrapper}>
-        <ActivityIndicator debugName={debugName} {...indicatorProps} style={loaderStyles} />
-      </View>
-    )
-  }
-
-  if (!hasMore) {
-    if (TypeGuards.isString(noMoreItemsText) || TypeGuards.isNumber(noMoreItemsText)) {
-      return (
-        <View style={styles.wrapper}>
-          <Text
-            debugName={debugName}
-            style={styles.text}
-            text={String(noMoreItemsText)}
-          />
-        </View>
-      )
-    }
-
-    return noMoreItemsText
-  }
-
-  return null
-}
-
-PaginationIndicator.styleRegistryName = 'PaginationIndicator'
-PaginationIndicator.elements = ['wrapper', 'text', 'loader']
-PaginationIndicator.rootElement = 'wrapper'
-
-PaginationIndicator.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return PaginationIndicator as (props: StyledComponentProps<PaginationIndicatorProps, typeof styles>) => IJSX
-}
-
-PaginationIndicator.defaultProps = {} as Partial<PaginationIndicatorProps>
-
-WebStyleRegistry.registerComponent(PaginationIndicator)

package/src/components/PaginationIndicator/styles.ts

@@ -1,3 +0,0 @@
-import { ActivityIndicatorComposition } from '../ActivityIndicator'
-
-export type PaginationIndicatorComposition = 'text' | `loader${Capitalize<ActivityIndicatorComposition>}` | 'wrapper'

package/src/components/PaginationIndicator/types.ts

@@ -1,18 +0,0 @@
-import React from 'react'
-import { ActivityIndicatorProps } from '../ActivityIndicator'
-import { TextProps } from '../Text'
-import { ComponentCommonProps } from '../../types'
-import { PaginationIndicatorComposition } from './styles'
-import { StyledProp } from '@codeleap/styles'
-
-export type PaginationIndicatorProps =
-  ComponentCommonProps & 
-  {
-    isFetching?: boolean
-    noMoreItemsText: JSX.Element | string | number
-    hasMore?: boolean
-    activityIndicator?: JSX.Element
-    style?: StyledProp<PaginationIndicatorComposition>
-    indicatorProps?: Partial<ActivityIndicatorProps>
-    textProps?: Partial<TextProps<'p'>>
-  }

package/src/components/Progress/Bar/styles.ts

@@ -1,10 +0,0 @@
-export type ProgressBarComposition =
-  'wrapper' |
-  'progress' |
-  'indicator' |
-  'text' |
-  'icon' |
-  'leftIcon' |
-  'leftText' |
-  'rightIcon' |
-  'rightText'

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

@@ -1,26 +0,0 @@
-import { ProgressBarComposition } from './styles'
-import { ProgressProps, ProgressIndicatorProps } from '@radix-ui/react-progress'
-import { ProgressPropsRoot } from '..'
-import { AppIcon, StyledProp } from '@codeleap/styles'
-import { TextProps } from '../../Text/types'
-import { IconProps } from '../../Icon/types'
-import { ViewProps } from '../../View'
-
-export type ProgressBarProps =
-  Omit<ViewProps, 'style'> &
-  Omit<ProgressPropsRoot, 'style'> & 
-  {
-    style?: StyledProp<ProgressBarComposition>
-    progressIndicatorProps?: ProgressIndicatorProps
-    progressRootProps?: ProgressProps
-    leftIcon?: AppIcon
-    leftIconProps?: Partial<IconProps>
-    rightIcon?: AppIcon
-    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/RadioInput/types.ts

@@ -1,29 +0,0 @@
-import { FormTypes, StylesOf } from '@codeleap/common'
-import { InputBaseProps } from '../InputBase'
-import { ReactNode } from 'react'
-import { StyledProp } from '@codeleap/styles'
-import { RadioInputComposition } from './styles'
-
-type WrapperProps = InputBaseProps
-
-type RadioOption<T> = FormTypes.Options<T>[number] & {
-  disabled?: boolean
-}
-
-export type RadioInputProps<T extends string|number> = Omit<WrapperProps, 'style'> & {
-  options: RadioOption<T>[]
-  value: T
-  onValueChange(value: T): void
-  label: ReactNode
-  style?: StyledProp<RadioInputComposition>
-}
-
-export type RadioOptionProps<T extends string|number> = {
-  item: RadioOption<T>
-  selected: boolean
-  onSelect(): void
-  styles?: StylesOf<RadioInputComposition>
-  debugName?: string
-  disabled?: boolean
-  separator?: boolean
-}

package/src/components/SegmentedControl/types.ts

@@ -1,44 +0,0 @@
-import React from 'react'
-import { StylesOf } from '@codeleap/common'
-import { TextProps } from '../Text'
-import { TouchableProps } from '../Touchable'
-import { SegmentedControlComposition } from './styles'
-import { MotionProps, AnimationProps, ForwardRefComponent } from 'framer-motion'
-import { IconProps } from '../Icon'
-import { AppIcon, StyledProp } from '@codeleap/styles'
-
-export type SegmentedControlProps<T = string> = {
-  options: SegmentedControlOptionProps[]
-  value?: T
-  style?: StyledProp<SegmentedControlComposition>
-  onValueChange?: (v: any) => void
-  bubbleProps?: React.HTMLAttributes<HTMLDivElement> & MotionProps
-  label?: string
-  touchableProps?: Partial<TouchableProps>
-  debugName?: string
-  disabled?: boolean
-  animationProps?: AnimationProps
-  transitionDuration?: number
-  RenderAnimatedView?: ForwardRefComponent<HTMLDivElement, any>
-  textProps?: TextProps
-  iconProps?: Partial<IconProps>
-  debounce?: number
-  debounceEnabled?: boolean
-}
-
-export type OptionRef = TouchableProps['ref']
-
-export type SegmentedControlOptionProps =
-  TouchableProps &
-  {
-    selected?: boolean
-    label: string
-    styles?: StylesOf<SegmentedControlComposition>
-    value?: any
-    textProps?: TextProps
-    iconProps?: Partial<IconProps>
-    icon?: AppIcon
-    largestWidth?: {
-      width: number
-    }
-  }

package/src/components/Slider/types.ts

@@ -1,29 +0,0 @@
-import { StyledProp } from '@codeleap/styles'
-import { InputBaseProps } from '../InputBase'
-import { SliderComposition } from './styles'
-import { SliderProps as PrimitiveSliderProps } from '@radix-ui/react-slider'
-import { CSSProperties } from 'react'
-
-export type SliderProps = 
-  Partial<Omit<PrimitiveSliderProps, 'value' | 'onValueChange' | 'style'>> &
-  Pick<InputBaseProps, 'disabled' | 'debugName' | 'description' | 'label'> & 
-  {
-    indicatorLabel?: {
-      order?: number[]
-      separator?: string
-      transformer?: (value: number[], defaultValue: PrimitiveSliderProps['defaultValue']) => string
-    }
-    value: number | number[]
-    onValueChange: (val: number | number[]) => void
-    style?: StyledProp<SliderComposition>
-    trackMarks?: Record<number, string>
-    trackMarkComponent?: React.ComponentType<TrackMarkProps>
-    onPressThumbSetValue?: boolean
-    onPressThumb?: (value: number | number[], thumbIndex: number) => void
-  }
-
-export type TrackMarkProps = {
-  index: number
-  content?: string | React.ReactNode
-  style?: CSSProperties
-}

package/src/components/Switch/types.ts

@@ -1,13 +0,0 @@
-import { StyledProp } from '@codeleap/styles'
-import { InputBaseProps } from '../InputBase'
-import { SwitchComposition } from './styles'
-
-export type SwitchProps = 
-  Pick<InputBaseProps, 'debugName' | 'disabled' | 'label'> & 
-  {
-    style?: StyledProp<SwitchComposition>
-    value: boolean
-    onValueChange: (value: boolean) => void
-    onChange?: (value: boolean) => void
-    switchOnLeft?: boolean
-  }