@codeleap/web 5.8.21 → 6.0.1

package/src/components/List/ListLayout.tsx

@@ -1,87 +0,0 @@
-import React from 'react'
-import { View } from '../View'
-import { ListLayoutProps, ListRefreshControlComponent } from './types'
-import { mergeStyles } from '@codeleap/styles'
-import { ActivityIndicator } from '../ActivityIndicator'
-import { ListParts } from './styles'
-import { TypeGuards } from '@codeleap/types'
-import { motion } from 'framer-motion'
-
-const DefaultRefreshIndicator = (props: ListRefreshControlComponent) => {
-  const {
-    refreshing,
-    styles,
-    refreshPosition,
-    refreshControlProps,
-    debugName,
-    refreshSize,
-    refreshControlIndicatorProps,
-  } = props
-
-  return (
-    <motion.div
-      initial={false}
-      animate={{
-        opacity: refreshing ? 1 : 0,
-        top: refreshing ? refreshPosition : 0,
-      }}
-      {...refreshControlProps}
-      style={styles?.refreshControl}
-    >
-      <ActivityIndicator
-        debugName={debugName + 'refresh-indicator'}
-        size={refreshSize}
-        {...refreshControlIndicatorProps}
-        style={styles.refreshControlIndicator}
-      />
-    </motion.div>
-  )
-}
-
-export const ListLayout = (props: ListLayoutProps) => {
-  const {
-    ListEmptyComponent,
-    ListFooterComponent,
-    ListHeaderComponent,
-    refresh,
-    ListRefreshControlComponent = DefaultRefreshIndicator,
-    styles,
-    isEmpty,
-    isLoading,
-    placeholder = {},
-    children,
-    debugName,
-    isFetching,
-    isFetchingNextPage,
-    ListLoadingIndicatorComponent,
-    scrollableRef,
-    showFooter = true,
-    wrapperProps,
-  } = props
-
-  const getKeyStyle = (key: ListParts) => mergeStyles([
-    styles[key],
-    isLoading ? styles[`${key}:loading`] : null,
-    isEmpty ? styles[`${key}:empty`] : null,
-  ])
-
-  const showIndicator = (isFetching || isFetchingNextPage) && !TypeGuards.isNil(ListLoadingIndicatorComponent)
-
-  return (
-    <View style={getKeyStyle('wrapper')} ref={scrollableRef} {...wrapperProps}>
-      {!!ListHeaderComponent ? <ListHeaderComponent /> : null}
-
-      {isEmpty ? <ListEmptyComponent debugName={debugName} {...placeholder} /> : null}
-
-      <View style={[getKeyStyle('innerWrapper'), isEmpty && { display: 'none' }]}>
-        {(!ListRefreshControlComponent || !refresh) ? null : <ListRefreshControlComponent {...props} styles={styles} />}
-
-        {children}
-      </View>
-
-      {showIndicator ? <ListLoadingIndicatorComponent /> : null}
-
-      {(!!ListFooterComponent && showFooter) ? <ListFooterComponent {...props} /> : null}
-    </View>
-  )
-}

package/src/components/Pager/index.tsx

@@ -1,156 +0,0 @@
-import { onUpdate } from '@codeleap/hooks'
-import Slider from 'react-slick'
-import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react'
-import { View } from '../View'
-import { Touchable } from '../Touchable'
-import { DotsProps, PagerProps, PagerRef } from './types'
-import { AnyRecord, IJSX, StyledComponentProps, StyledComponentWithProps } from '@codeleap/styles'
-import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { useStylesFor } from '../../lib/hooks/useStylesFor'
-
-import 'slick-carousel/slick/slick.css'
-import 'slick-carousel/slick/slick-theme.css'
-
-export * from './styles'
-export * from './types'
-
-const Dots = (params: DotsProps) => {
-  const { page, childArray, onPress, styles, dotsDisabled } = params
-
-  return (
-    <View style={styles.dots}>
-      {childArray.map((_, index) => {
-        const isSelected = index === page
-
-        const style = [
-          styles.dot,
-          isSelected && styles['dot:selected'],
-          dotsDisabled && styles['dot:disabled'],
-        ]
-
-        return (
-          <Touchable
-            key={index}
-            onPress={() => onPress?.(index)}
-            style={style}
-            disabled={dotsDisabled}
-            debugName='dots'
-          />
-        )
-      })}
-    </View>
-  )
-}
-
-export const Pager = forwardRef<PagerRef, PagerProps>((props, ref) => {
-  const sliderRef = useRef<Slider>()
-
-  const {
-    style,
-    children,
-    renderPageWrapper: PageWrapper,
-    page,
-    dots,
-    dotsDisabled,
-    infinite,
-    disableSwipe,
-    onChange,
-    footer,
-    dotsProps,
-    pageWrapperProps,
-    ...rest
-  } = {
-    ...Pager.defaultProps,
-    ...props,
-  }
-
-  const styles = useStylesFor(Pager.styleRegistryName, style)
-
-  const childArray = React.Children.toArray(children)
-
-  const goTo = useCallback(
-    (page: number) => {
-      if (sliderRef.current) sliderRef.current.slickGoTo(page)
-    },
-    [sliderRef?.current],
-  )
-
-  useImperativeHandle(ref, () => ({
-    goTo,
-    ...sliderRef.current,
-  }), [!!sliderRef?.current])
-
-  onUpdate(() => {
-    goTo(page)
-  }, [page])
-
-  return (
-    <View style={styles.wrapper}>
-      <Slider
-        adaptiveHeight={true}
-        {...rest}
-        arrows={false}
-        ref={sliderRef}
-        dots={false}
-        swipe={!disableSwipe}
-        infinite={infinite}
-        accessibility={false}
-        afterChange={onChange}
-      >
-        {childArray.map((child, index) => {
-          return (
-            // @ts-expect-error @verify
-            <PageWrapper
-              key={index}
-              style={styles.pageWrapper}
-              {...pageWrapperProps}
-            >
-              {child}
-            </PageWrapper>
-          )
-        })}
-      </Slider>
-
-      <View style={styles.footerWrapper}>
-        {footer}
-
-        {dots ? (
-          <Dots
-            page={page}
-            onPress={onChange}
-            childArray={childArray}
-            styles={styles}
-            dotsDisabled={dotsDisabled}
-            {...dotsProps}
-          />
-        ) : null}
-      </View>
-    </View>
-  )
-}) as StyledComponentWithProps<PagerProps>
-
-Pager.styleRegistryName = 'Pager'
-
-Pager.elements = [
-  'wrapper',
-  'dot',
-  'dots',
-  'pageWrapper',
-  'footerWrapper',
-]
-
-Pager.rootElement = 'wrapper'
-
-Pager.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Pager as (props: StyledComponentProps<PagerProps, typeof styles>) => IJSX
-}
-
-Pager.defaultProps = {
-  dots: false,
-  dotsDisabled: false,
-  infinite: false,
-  disableSwipe: false,
-  renderPageWrapper: View,
-} as Partial<PagerProps>
-
-WebStyleRegistry.registerComponent(Pager)

package/src/components/Pager/types.ts

@@ -1,35 +0,0 @@
-import { StylesOf } from '@codeleap/types'
-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/TextInput/mask.tsx

@@ -1,117 +0,0 @@
-import { TypeGuards } from '@codeleap/types'
-import { FormatChar, InputMaskProps, MaskProps, TextInputMaskTypeProp } from './types'
-
-export const getMaskInputProps = ({ masking }: InputMaskProps): MaskProps & { notSaveFormatted: boolean } => {
-  const {
-    type = 'custom',
-    options = {},
-  } = masking
-
-  const maskType = masking?.options?.maskType ?? 'INTERNATIONAL'
-  const phoneType = maskType === 'INTERNATIONAL' ? 'cel-phone' : 'cel-phone-brl'
-
-  const presetProps = masking?.type === 'cel-phone' ? maskPreset[phoneType] : maskPreset[type]
-
-  const isObfuscated = options?.obfuscated === true && {
-    type: 'password',
-  }
-
-  const notSaveFormatted = (TypeGuards.isBoolean(masking?.saveFormatted) && masking?.saveFormatted === false)
-
-  const props = {
-    ...presetProps,
-    ...options,
-    ...isObfuscated,
-    notSaveFormatted,
-    beforeMaskedValueChange: masking?.onChangeMask,
-  }
-
-  const defaultGetRawValue = (value: string) => {
-    return String(value)?.replace(/\D/g, '')
-  }
-
-  return {
-    ...props,
-    validator: notSaveFormatted ? null : props?.validator,
-    getRawValue: props?.getRawValue ?? defaultGetRawValue,
-  }
-}
-
-const format: Record<string, FormatChar> = {
-  number: "['0123456789']",
-}
-
-const validatorRegExp = (value: string | number, regex: RegExp, error: string) => {
-  const isValid = regex.test(String(value))
-
-  return {
-    valid: isValid,
-    message: error,
-  }
-}
-
-export const maskPreset: Record<TextInputMaskTypeProp | 'cel-phone-brl', MaskProps> = {
-  'credit-card': {
-    mask: '9999 9999 9999 9999',
-    placeholder: 'xxxx xxxx xxxx xxxx',
-    formatChars: {
-      '9': format.number,
-    },
-    validator: (value: string) => {
-      return validatorRegExp(value, /^\d{4}\s?\d{4}\s?\d{4}\s?\d{4}$/, 'Invalid information')
-    },
-  },
-  'cpf': {
-    mask: '999.999.999-99',
-    placeholder: 'xxx.xxx.xxx-xx',
-    formatChars: {
-      '9': format.number,
-    },
-    validator: (value: string) => {
-      return validatorRegExp(value, /^\d{3}\.\d{3}\.\d{3}-\d{2}$/, 'Invalid CPF')
-    },
-  },
-  'cnpj': {
-    mask: '99.999.999/9999-99',
-    placeholder: 'xx.xxx.xxx/xxxx-xx',
-    formatChars: {
-      '9': format.number,
-    },
-    validator: (value: string) => {
-      return validatorRegExp(value, /^\d{2}\.\d{3}\.\d{3}\/\d{4}-\d{2}$/, 'Invalid CNPJ')
-    },
-  },
-  'zip-code': {
-    mask: '99999-999',
-    placeholder: 'xxxxx-xxx',
-    formatChars: {
-      '9': format.number,
-    },
-    validator: (value: string) => {
-      return validatorRegExp(value, /^\d{5}-\d{3}$/, 'Invalid zip code')
-    },
-  },
-  'cel-phone': {
-    mask: '+999 999 999 999',
-    placeholder: '+xxx xxx xxx xxx',
-    maskType: 'INTERNATIONAL',
-    formatChars: {
-      '9': format.number,
-    },
-    validator: (value: string) => {
-      return validatorRegExp(value, /^\+\d{3}\s\d{3}\s\d{3}\s\d{3}$/, 'Invalid phone')
-    },
-  },
-  'cel-phone-brl': {
-    mask: '(99) 99999-9999',
-    placeholder: '(xx) xxxxx-xxxx',
-    maskType: 'BRL',
-    formatChars: {
-      '9': format.number,
-    },
-    validator: (value: string) => {
-      return validatorRegExp(value, /^\(?\d{2}\)?\s?9?\d{4}-\d{4}$/, 'Invalid phone')
-    },
-  },
-  'custom': {},
-}

package/src/lib/deprecated/OSAlert.tsx

@@ -1,200 +0,0 @@
-import React from 'react'
-import { onMount, onUpdate, useBooleanToggle, usePrevious } from '@codeleap/hooks'
-import { AnyFunction } from '@codeleap/types'
-import ReactDOM from 'react-dom'
-import { v4 as uuid } from 'uuid'
-
-type AlertButton = {
-  text: string
-  onPress: AnyFunction
-  variants?: any[]
-}
-
-type OSAlertArgs = {
-  title: string
-  body?: string
-  options?: AlertButton[]
-  onDismiss?: AnyFunction
-  onAction?: AnyFunction
-  type?: Exclude<GlobalAlertType, 'custom'> | string
-}
-type AlertEvent = AlertButton['onPress']
-
-type NamedEvents<E extends string> = Partial<Record<E, AlertEvent>>
-
-export type GlobalAlertType = 'info' | 'error' | 'warn' | 'ask' | 'custom'
-
-export type GlobalAlertComponentProps = {
-  args: OSAlertArgs
-  removeSelf: AnyFunction
-  type: GlobalAlertType
-  id: string
-}
-
-export function useGlobalAlertComponent(props: GlobalAlertComponentProps) {
-  const [visible, toggle] = useBooleanToggle(false)
-
-  const previousVisible = usePrevious(visible)
-
-  onMount(() => {
-    toggle()
-  })
-
-  onUpdate(() => {
-    if (!visible && previousVisible) {
-      setTimeout(props.removeSelf, 1000)
-    }
-  }, [visible])
-
-  return {
-    visible,
-    toggle,
-  }
-}
-
-function RenderModal(props: GlobalAlertComponentProps) {
-
-  return null
-}
-
-const MODAL_ID = '__CODELEAP_MODAL__'
-
-function OSAlert(props: OSAlertArgs & { type: GlobalAlertType }) {
-  if (!document) return
-
-  const modalId = MODAL_ID + '_' + uuid()
-
-  const modalsRootDiv = document.getElementById(MODAL_ID)
-
-  let modalDiv = document.getElementById(modalId)
-
-  const remove = () => {
-    ReactDOM.unmountComponentAtNode(modalDiv)
-  }
-
-  if (!modalDiv) {
-    modalDiv = document.createElement('div')
-
-    modalDiv.setAttribute('id', MODAL_ID)
-
-    modalsRootDiv.appendChild(modalDiv)
-
-  }
-
-  ReactDOM.render(<>
-
-    <OSAlert.Component
-      removeSelf={remove}
-      args={props}
-      type={props.type}
-      id={modalId}
-    />
-
-  </>, modalDiv)
-
-}
-OSAlert.Component = RenderModal
-
-export function CreateOSAlert(Component) {
-
-  OSAlert.Component = Component
-
-  function ask({ title, body, options }: OSAlertArgs) {
-    if (!title) {
-      title = 'Quick quetion'
-    }
-    OSAlert({
-      title,
-      body,
-      options,
-      type: 'ask',
-      onAction: null,
-      onDismiss: null,
-    })
-  }
-
-  function OSError(args: OSAlertArgs & NamedEvents<'onDismiss'>) {
-    let {
-      title,
-      body,
-    } = args
-
-    if (!title) {
-      title = 'Whoops!'
-    }
-    if (!body) {
-      body = 'Something went wrong'
-    }
-    OSAlert({
-      title,
-
-      body,
-      type: 'error',
-      onAction: args.onDismiss,
-      onDismiss: args.onDismiss,
-    })
-  }
-
-  function warn(args: OSAlertArgs & NamedEvents<'onReject' | 'onAccept'>) {
-    const {
-      title = 'Hang on',
-      body = 'Are you sure?',
-      onAccept,
-      onReject = () => null,
-    } = args
-
-    OSAlert({
-
-      title,
-      body,
-      type: 'warn',
-      onAction: onAccept,
-      onDismiss: onReject,
-
-    })
-  }
-
-  function info(args: OSAlertArgs & NamedEvents<'onDismiss'>) {
-
-    const {
-      title = 'FYI',
-      body,
-      onDismiss = () => null,
-    } = args
-
-    OSAlert({
-      title,
-      body,
-      type: 'info',
-      onDismiss,
-    })
-  }
-
-  function custom(args: OSAlertArgs & {type: string}) {
-    const {
-      title = 'Hang on',
-      body = 'Are you sure?',
-      type,
-      ...rest
-    } = args
-
-    OSAlert({
-      title,
-      body,
-      type: type as GlobalAlertType,
-      ...rest,
-    })
-  }
-
-  return {
-    ask,
-    warn,
-    info,
-    error: OSError,
-    custom,
-  }
-}
-
-export const AlertOutlet = () => {
-  return <div id={MODAL_ID} />
-}

package/src/lib/deprecated/index.ts

@@ -1,6 +0,0 @@
-// @Deprecated module
-// All things here are discontinued and will be removed over time. 
-// They are no longer updated and are only here because other projects 
-// still use them and it is important not to affect their functioning.
-
-export * from './OSAlert'

package/src/lib/hooks/useInfiniteScroll.ts

@@ -1,77 +0,0 @@
-import React from 'react'
-import { AnyFunction, TypeGuards } from '@codeleap/types'
-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,
-  }
-}