@codeleap/web 3.25.0 → 3.25.2

package/src/components/InputBase/index.tsx

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react'
 import React from 'react'
 import { TypeGuards, getRenderedComponent } from '@codeleap/common'
 import { ActionIcon, ActionIconProps } from '../ActionIcon'
@@ -5,103 +7,95 @@ import { View } from '../View'
 import { useInputBaseStyles } from './styles'
 import { InputBaseProps } from './types'
 import { Text } from '../Text'
-import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
-import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
 
 export * from './styles'
 export * from './utils'
 export * from './types'
 
-export const InputBaseDefaultOrder: InputBaseProps['order'] = [
+export const InputBaseDefaultOrder:InputBaseProps['order'] = [
   'label',
   'description',
   'innerWrapper',
   'error',
 ]
-
 const KeyPassthrough = (props: React.PropsWithChildren<any>) => {
   return <React.Fragment>{props.children}</React.Fragment>
 }
 
-export const InputBase = (props: InputBaseProps) => {
-  const allProps = {
-    ...InputBase.defaultProps,
-    ...props,
-  }
-
+export const InputBase = React.forwardRef<unknown, InputBaseProps>((props, ref) => {
   const {
     children,
-    error,
+    error = null,
     label,
-    description,
-    leftIcon,
-    rightIcon,
+    description = null,
+    leftIcon = null,
+    rightIcon = null,
+    styles,
     wrapper,
     debugName,
     innerWrapper,
     focused,
-    innerWrapperProps,
-    wrapperProps,
-    disabled,
-    order,
+    innerWrapperProps = {},
+    wrapperProps = {},
+    disabled = false,
+    order = InputBaseDefaultOrder,
     style,
-    noError,
-    labelAsRow,
+    noError = false,
+    labelAsRow = false,
     innerWrapperRef,
     ...otherProps
-  } = allProps
+  } = props
 
   const WrapperComponent = wrapper || View
   const InnerWrapperComponent = innerWrapper || View
 
-  const styles = useInputBaseStyles(allProps)
+  const _styles = useInputBaseStyles(props)
 
   const _leftIcon = getRenderedComponent<Partial<ActionIconProps>>(leftIcon, ActionIcon, {
-    style: styles.leftIconStyles,
+    // @ts-ignore
+    styles: _styles.leftIconStyles,
     disabled,
     debugName: `${debugName} left icon`,
   })
 
   const _rightIcon = getRenderedComponent<Partial<ActionIconProps>>(rightIcon, ActionIcon, {
-    style: styles.rightIconStyles,
+    // @ts-ignore
+    styles: _styles.rightIconStyles,
     disabled,
     debugName: `${debugName} right icon`,
   })
 
-  const _label = TypeGuards.isString(label) ? <Text text={label} style={styles.labelStyle} /> : label
+  const _label = TypeGuards.isString(label) ? <Text text={label} css={_styles.labelStyle}/> : label
 
-  const _error = TypeGuards.isString(error) ? <Text text={error} style={styles.errorStyle} /> : error
+  const _error = TypeGuards.isString(error) ? <Text text={error} css={_styles.errorStyle}/> : error
 
-  const _description = TypeGuards.isString(description) ? <Text text={description} style={styles.descriptionStyle} /> : description
+  const _description = TypeGuards.isString(description) ? <Text text={description} css={_styles.descriptionStyle}/> : description
 
   const parts = {
-    label: labelAsRow ? (
-      <View style={styles.labelRowStyle}>
-        {_label}
-        {_description}
-      </View>
-    ) : (
-      _label
-    ),
+    label: labelAsRow ? <View css={_styles.labelRowStyle}>
+      {_label}
+      {_description}
+    </View> : _label,
     description: labelAsRow ? null : _description,
-    innerWrapper:
-      <InnerWrapperComponent
-        ref={innerWrapperRef}
-        style={styles.innerWrapperStyle}
-        {...innerWrapperProps}
-      >
-        {_leftIcon}
-        {children}
-        {_rightIcon}
-      </InnerWrapperComponent>,
-    error: noError ? null : (_error || <Text children={<React.Fragment> &nbsp; </React.Fragment>} style={styles.errorStyle} />),
+    innerWrapper: <InnerWrapperComponent ref={innerWrapperRef} css={[
+      _styles.innerWrapperStyle,
+    ]} {...innerWrapperProps}>
+      {_leftIcon}
+      {children}
+      {_rightIcon}
+    </InnerWrapperComponent>,
+    error: noError ? null : (
+      _error || <Text children={<React.Fragment>
+        &nbsp;
+      </React.Fragment>} css={_styles.errorStyle}/>
+    ),
   }
 
   return (
     <WrapperComponent
+      css={[_styles.wrapperStyle, style]}
       {...otherProps}
       {...wrapperProps}
-      style={styles.wrapperStyle}
     >
       {
         order.map((key) => (
@@ -112,27 +106,4 @@ export const InputBase = (props: InputBaseProps) => {
       }
     </WrapperComponent>
   )
-}
-
-InputBase.elements = [
-  'wrapper',
-  'innerWrapper',
-  'label',
-  'errorMessage',
-  'description',
-  'labelRow',
-  'icon',
-  'leftIcon',
-  'rightIcon',
-]
-
-InputBase.defaultProps = {
-  noError: false,
-  labelAsRow: false,
-  disabled: false,
-  order: InputBaseDefaultOrder,
-  rightIcon: null,
-  leftIcon: null,
-  description: null,
-  error: null,
-} as Partial<InputBaseProps>
+})

package/src/components/InputBase/styles.ts

@@ -1,6 +1,5 @@
-import { TypeGuards } from '@codeleap/common'
-import { useCompositionStyles } from '@codeleap/styles'
-import { ActionIconParts } from '../ActionIcon'
+import { TypeGuards, createDefaultVariantFactory, includePresets, useDefaultComponentStyle, useNestedStylesByKey } from '@codeleap/common'
+import { ActionIconComposition, ActionIconParts } from '../ActionIcon'
 import { InputBaseProps } from './types'
 import { concatStyles, getIconStyles, iconStylesOf } from './utils'
 
@@ -25,75 +24,86 @@ export type IconLessInputBaseParts = Exclude<InputBaseParts, InputIconCompositio
 
 export type InputBaseComposition = `${InputBaseParts}:${InputBaseStates}` | InputBaseParts
 
+const createTextInputBaseComposition = createDefaultVariantFactory<InputBaseComposition>()
+
+export const InputBasePresets = includePresets((styles) => createTextInputBaseComposition(() => ({ wrapper: styles })))
+
 export const useInputBaseStyles = (props: InputBaseProps) => {
   const {
     focused,
     disabled,
     error,
-    style: styles,
+    styles,
   } = props
 
   const hasError = !TypeGuards.isNil(error)
 
-  const compositionStyles = useCompositionStyles(['leftIcon', 'rightIcon', 'icon'], styles)
+  const variantStyles = useDefaultComponentStyle<'u:InputBase', typeof InputBasePresets>('u:InputBase', {
+    rootElement: 'wrapper',
+    styles,
+  })
+
+  const _leftIconStyles = useNestedStylesByKey<ActionIconComposition>('leftIcon', variantStyles)
+  const _rightIconStyles = useNestedStylesByKey<ActionIconComposition>('rightIcon', variantStyles)
+  const _baseIconStyles = useNestedStylesByKey<ActionIconComposition>('icon', variantStyles)
 
-  const baseIconStyles = getIconStyles(compositionStyles.icon, { hasError, disabled, focused })
+  const baseIconStyles = getIconStyles(_baseIconStyles, { hasError, disabled, focused })
 
-  const leftIconStylesCompose = getIconStyles(compositionStyles.leftIcon, {
-    hasError,
-    disabled: disabled || props?.leftIcon?.disabled,
-    focused,
+  const leftIconStylesCompose = getIconStyles(_leftIconStyles, { 
+    hasError, 
+    disabled: disabled || props?.leftIcon?.disabled, 
+    focused 
   })
 
-  const rightIconStylesCompose = getIconStyles(compositionStyles.rightIcon, {
-    hasError,
+  const rightIconStylesCompose = getIconStyles(_rightIconStyles, { 
+    hasError, 
     disabled: disabled || props?.rightIcon?.disabled,
-    focused,
+    focused 
   })
 
   const leftIconStyles = iconStylesOf(baseIconStyles, leftIconStylesCompose)
   const rightIconStyles = iconStylesOf(baseIconStyles, rightIconStylesCompose)
 
   const labelStyle = [
-    styles.label,
-    focused && styles['label:focus'],
-    hasError && styles['label:error'],
-    disabled && styles['label:disabled'],
+    variantStyles.label,
+    focused && variantStyles['label:focus'],
+    hasError && variantStyles['label:error'],
+    disabled && variantStyles['label:disabled'],
   ]
 
   const errorStyle = [
-    styles.errorMessage,
-    focused && styles['errorMessage:focus'],
-    hasError && styles['errorMessage:error'],
-    disabled && styles['errorMessage:disabled'],
+    variantStyles.errorMessage,
+    focused && variantStyles['errorMessage:focus'],
+    hasError && variantStyles['errorMessage:error'],
+    disabled && variantStyles['errorMessage:disabled'],
   ]
 
   const descriptionStyle = [
-    styles.description,
-    focused && styles['description:focus'],
-    hasError && styles['description:error'],
-    disabled && styles['description:disabled'],
+    variantStyles.description,
+    focused && variantStyles['description:focus'],
+    hasError && variantStyles['description:error'],
+    disabled && variantStyles['description:disabled'],
   ]
 
   const wrapperStyle = [
-    styles.wrapper,
-    focused && styles['wrapper:focus'],
-    error && styles['wrapper:error'],
-    disabled && styles['wrapper:disabled'],
+    variantStyles.wrapper,
+    focused && variantStyles['wrapper:focus'],
+    error && variantStyles['wrapper:error'],
+    disabled && variantStyles['wrapper:disabled'],
   ]
 
   const innerWrapperStyle = [
-    concatStyles(Array.isArray(styles.innerWrapper) ? styles.innerWrapper : [styles.innerWrapper]),
-    focused && styles['innerWrapper:focus'],
-    hasError && styles['innerWrapper:error'],
-    disabled && styles['innerWrapper:disabled'],
+    concatStyles(variantStyles.innerWrapper),
+    focused && variantStyles['innerWrapper:focus'],
+    hasError && variantStyles['innerWrapper:error'],
+    disabled && variantStyles['innerWrapper:disabled'],
   ]
 
   const labelRowStyle = [
-    styles.labelRow,
-    focused && styles['labelRow:focus'],
-    hasError && styles['labelRow:error'],
-    disabled && styles['labelRow:disabled'],
+    variantStyles.labelRow,
+    focused && variantStyles['labelRow:focus'],
+    hasError && variantStyles['labelRow:error'],
+    disabled && variantStyles['labelRow:disabled'],
   ]
 
   return {

package/src/components/InputBase/types.ts

@@ -1,6 +1,9 @@
-import { StylesOf } from '@codeleap/common'
+import { PropsOf } from '@codeleap/common'
+import { StylesOf } from '../../types'
 import { InputBaseComposition } from './styles'
-import { ActionIconComposition, ActionIconProps } from '../ActionIcon'
+import { ActionIcon } from '../ActionIcon'
+
+type ActionIconProps = PropsOf<typeof ActionIcon>
 
 type OrderedParts = 'label' | 'description' | 'innerWrapper' | 'error'
 
@@ -13,29 +16,14 @@ export type InputBaseProps = React.PropsWithChildren<{
   wrapperProps?: any
   innerWrapper?: React.FC<any>
   innerWrapperProps?: any
-  style?: StylesOf<InputBaseComposition>
+  styles?: StylesOf<InputBaseComposition>
   description?: React.ReactNode
   debugName: string
   focused?: boolean
   disabled?: boolean
   order?: OrderedParts[]
+  style?: any
   labelAsRow?: boolean
   noError?: boolean
   innerWrapperRef?: React.MutableRefObject<HTMLDivElement | null>
 }>
-
-export type OmitDiff<T1, T2> = {
-  [K in Exclude<keyof T1, keyof T2>]: T1[K]
-} & {
-  [K in keyof T2]: T2[K]
-}
-
-export type InputBaseKey = keyof InputBaseProps
-
-export type IconStyles = StylesOf<ActionIconComposition>
-
-export type IconState = {
-  focused: boolean
-  hasError: boolean
-  disabled: boolean
-}

package/src/components/InputBase/utils.ts

@@ -1,15 +1,27 @@
-import { IconState, IconStyles, InputBaseKey, InputBaseProps, OmitDiff } from './types'
+import { StylesOf } from '@codeleap/common'
+import { ActionIconComposition } from '../ActionIcon'
+import { InputBaseProps } from './types'
 
-export function selectInputBaseProps<T extends Omit<InputBaseProps, 'style'>>(props: T): {
+type OmitDiff<T1, T2> = {
+  [K in Exclude<keyof T1, keyof T2>]: T1[K]
+} & {
+  [K in keyof T2]: T2[K]
+}
+
+type InputBaseKey = keyof InputBaseProps
+
+export function selectInputBaseProps<T extends InputBaseProps>(props: T): {
   inputBaseProps: InputBaseProps
   others: OmitDiff<T, T>
 } {
   const varList:InputBaseKey[] = [
     'label',
+
     'error',
     'innerWrapper',
     'leftIcon',
     'rightIcon',
+    // 'styles',
     'description',
     'wrapper',
     'children',
@@ -30,6 +42,14 @@ export function selectInputBaseProps<T extends Omit<InputBaseProps, 'style'>>(pr
   return { inputBaseProps: result, others: copy as OmitDiff<T, T> }
 }
 
+type IconStyles = StylesOf<ActionIconComposition>
+
+type IconState = {
+  focused: boolean
+  hasError: boolean
+  disabled: boolean
+}
+
 export const getIconStyles = (obj: IconStyles, state: IconState) => ({
   icon: {
     ...obj.icon,
@@ -80,5 +100,5 @@ export const iconStylesOf = (baseStyles: IconStyles, styles: IconStyles) => ({
   'touchableWrapper:disabled': {
     ...baseStyles['touchableWrapper:disabled'],
     ...styles['touchableWrapper:disabled'],
-  },
+  }
 })

package/src/components/List/ListLayout.tsx

@@ -1,16 +1,26 @@
 import React from 'react'
+import { StylesOf, TypeGuards } from '@codeleap/common'
+import { ListComposition, ListParts } from './styles'
+import { ListProps } from './types'
 import { View } from '../View'
-import { ListLayoutProps, ListRefreshControlComponent } from './types'
-import { mergeStyles } from '@codeleap/styles'
+import { UseInfiniteScrollReturn } from './useInfiniteScroll'
 import { ActivityIndicator } from '../ActivityIndicator'
-import { ListParts } from './styles'
-import { TypeGuards } from '@codeleap/common'
 import { motion } from 'framer-motion'
 
+export type ListLayoutProps = Omit<ListProps, 'renderItem'> & UseInfiniteScrollReturn['layoutProps'] & {
+  variantStyles: StylesOf<ListComposition>
+  children?: React.ReactNode
+  showFooter?: boolean
+}
+
+type ListRefreshControlComponent = Partial<ListLayoutProps> & {
+  variantStyles: StylesOf<ListComposition>
+}
+
 const DefaultRefreshIndicator = (props: ListRefreshControlComponent) => {
   const {
     refreshing,
-    styles,
+    variantStyles,
     refreshPosition,
     refreshControlProps,
     debugName,
@@ -20,19 +30,19 @@ const DefaultRefreshIndicator = (props: ListRefreshControlComponent) => {
 
   return (
     <motion.div
+      css={[variantStyles?.refreshControl]}
       initial={false}
       animate={{
         opacity: refreshing ? 1 : 0,
-        top: refreshing ? refreshPosition : 0,
+        top: refreshing ? refreshPosition : 0
       }}
       {...refreshControlProps}
-      style={styles?.refreshControl}
     >
       <ActivityIndicator
         debugName={debugName + 'refresh-indicator'}
         size={refreshSize}
+        style={variantStyles.refreshControlIndicator}
         {...refreshControlIndicatorProps}
-        style={styles.refreshControlIndicator}
       />
     </motion.div>
   )
@@ -45,10 +55,11 @@ export const ListLayout = (props: ListLayoutProps) => {
     ListHeaderComponent,
     refresh,
     ListRefreshControlComponent = DefaultRefreshIndicator,
-    styles,
+    variantStyles,
     isEmpty,
     isLoading,
     placeholder = {},
+    style,
     children,
     debugName,
     isFetching,
@@ -58,27 +69,33 @@ export const ListLayout = (props: ListLayoutProps) => {
     showFooter = true,
   } = 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)
+  const getKeyStyle = React.useCallback((key: ListParts) => ([
+    variantStyles[key],
+    isLoading && variantStyles[`${key}:loading`],
+    isEmpty && variantStyles[`${key}:empty`],
+  ]), [isLoading, isEmpty])
 
   return (
-    <View style={getKeyStyle('wrapper')} ref={scrollableRef}>
+    // @ts-ignore
+    <View css={[getKeyStyle('wrapper'), style]} ref={scrollableRef}>
       {!!ListHeaderComponent ? <ListHeaderComponent /> : null}
 
       {isEmpty ? <ListEmptyComponent debugName={debugName} {...placeholder} /> : null}
 
-      <View style={[getKeyStyle('innerWrapper'), isEmpty && { display: 'none' }]}>
-        {(!ListRefreshControlComponent || !refresh) ? null : <ListRefreshControlComponent {...props} styles={styles} />}
+      <View css={[getKeyStyle('innerWrapper'), isEmpty && { display: 'none' }]}>
+        {(!ListRefreshControlComponent || !refresh) ? null : (
+          <ListRefreshControlComponent
+            {...props}
+            variantStyles={variantStyles}
+          />
+        )}
 
         {children}
       </View>
 
-      {showIndicator ? <ListLoadingIndicatorComponent /> : null}
+      {((isFetching || isFetchingNextPage) && !TypeGuards.isNil(ListLoadingIndicatorComponent))
+        ? <ListLoadingIndicatorComponent />
+        : null}
 
       {(!!ListFooterComponent && showFooter) ? <ListFooterComponent {...props} /> : null}
     </View>

package/src/components/List/PaginationIndicator.tsx

@@ -0,0 +1,102 @@
+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