@codeleap/web 3.24.3 → 4.0.0

package/src/components/List/index.tsx

@@ -1,68 +1,41 @@
 import React from 'react'
-import { useDefaultComponentStyle } from '@codeleap/common'
 import { View, ViewProps } from '../View'
 import { EmptyPlaceholder } from '../EmptyPlaceholder'
-import { ListPresets } from './styles'
-import { useInfiniteScroll } from './useInfiniteScroll'
-import { ListProps } from './types'
+import { ListItem, ListProps } from './types'
+import { ItemMasonryProps, ListMasonry, useInfiniteScroll, useMasonryReload } from '../../lib'
+import { useStylesFor } from '../../lib/hooks/useStylesFor'
+import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
+import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
 import { ListLayout } from './ListLayout'
-import { ItemMasonryProps, ListMasonry, useMasonryReload } from '../../lib'
 
 export * from './styles'
-export * from './PaginationIndicator'
-export * from './useInfiniteScroll'
 export * from './types'
 export * from './ListLayout'
 
-const RenderSeparator = (props: { separatorStyles: ViewProps<'div'>['css'] }) => {
-  return (
-    <View css={[props?.separatorStyles]}></View>
-  )
-}
-
-const defaultProps: Partial<ListProps> = {
-  ListFooterComponent: null,
-  ListHeaderComponent: null,
-  ListLoadingIndicatorComponent: null,
-  ListEmptyComponent: EmptyPlaceholder,
-  ListSeparatorComponent: RenderSeparator,
-  refreshDebounce: 1500,
-  refreshSize: 40,
-  refreshThreshold: 0.1,
-  refreshPosition: 16,
-  refresh: true,
-  rowItemsSpacing: 8,
-  overscan: 2,
-  reloadTimeout: 350,
-  showFooter: true,
+const RenderSeparator = (props: { separatorStyles: ViewProps['style'] }) => {
+  return <View style={props?.separatorStyles} />
 }
 
-export function List<T = any>(props: ListProps<T>) {
+export function List(props: ListProps) {
   const allProps = {
     ...List.defaultProps,
     ...props,
   } as ListProps
 
   const {
-    variants = [],
-    responsiveVariants = {},
-    styles = {},
     renderItem: RenderItem,
     rowItemsSpacing,
     ListSeparatorComponent,
     data,
     overscan,
     separators,
-    masonryProps = {},
+    masonryProps,
     reloadTimeout,
     showFooter,
+    style,
   } = allProps
 
-  const variantStyles = useDefaultComponentStyle<'u:List', typeof ListPresets>('u:List', {
-    variants,
-    responsiveVariants,
-    styles,
-  })
+  const styles = useStylesFor(List.styleRegistryName, style)
 
   const { layoutProps, onLoadMore } = useInfiniteScroll(allProps)
 
@@ -72,7 +45,7 @@ export function List<T = any>(props: ListProps<T>) {
   })
 
   const separator = React.useMemo(() => {
-    return separators ? <ListSeparatorComponent separatorStyles={variantStyles.separator} /> : null
+    return separators ? <ListSeparatorComponent separatorStyles={styles.separator} /> : null
   }, [])
 
   const renderItem = React.useCallback((_item: ItemMasonryProps<any>) => {
@@ -102,7 +75,7 @@ export function List<T = any>(props: ListProps<T>) {
     <ListLayout
       {...allProps}
       {...layoutProps}
-      variantStyles={variantStyles}
+      styles={styles}
       showFooter={reloadingLayout ? false : showFooter}
     >
       <ListMasonry
@@ -121,4 +94,26 @@ export function List<T = any>(props: ListProps<T>) {
   )
 }
 
-List.defaultProps = defaultProps
+List.styleRegistryName = 'List'
+List.elements = ['wrapper', 'innerWrapper', 'separator', 'refreshControl', 'refreshControlIndicator']
+List.rootElement = 'wrapper'
+
+List.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return List as <T extends ListItem>(props: StyledComponentProps<ListProps<T>, typeof styles>) => IJSX
+}
+
+List.defaultProps = {
+  ListEmptyComponent: EmptyPlaceholder,
+  ListSeparatorComponent: RenderSeparator,
+  refreshDebounce: 1500,
+  refreshSize: 40,
+  refreshThreshold: 0.1,
+  refreshPosition: 16,
+  refresh: true,
+  rowItemsSpacing: 8,
+  overscan: 2,
+  reloadTimeout: 350,
+  showFooter: true,
+} as Partial<ListProps>
+
+WebStyleRegistry.registerComponent(List)

package/src/components/List/styles.ts

@@ -1,17 +1,11 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
-import { ViewComposition } from '../View'
 
-type ListStates = 'empty' | 'loading' 
+type ListStates = 'empty' | 'loading'
 
-export type ListParts = 
-  ViewComposition | 
-  'innerWrapper' | 
-  'separator' | 
+export type ListParts =
+  'wrapper' |
+  'innerWrapper' |
+  'separator' |
   'refreshControl' |
   'refreshControlIndicator'
 
 export type ListComposition = `${ListParts}:${ListStates}` | ListParts
-
-const createListStyle = createDefaultVariantFactory<ListComposition>()
-
-export const ListPresets = includePresets(style => createListStyle(() => ({ wrapper: style })))

package/src/components/List/types.ts

@@ -1,13 +1,22 @@
-import { ComponentVariants, PropsOf, StylesOf } from '@codeleap/common'
+import { StylesOf } from '@codeleap/common'
 import { EmptyPlaceholderProps } from '../EmptyPlaceholder'
-import { View, ViewProps } from '../View'
-import { ListComposition, ListPresets } from './styles'
-import { motion } from 'framer-motion'
+import { ViewProps } from '../View'
+import { MotionProps } from 'framer-motion'
 import { ActivityIndicatorProps } from '../ActivityIndicator'
 import { ComponentCommonProps } from '../../types'
-import { UseInfiniteScrollArgs } from './useInfiniteScroll'
-import { ItemMasonryProps, ListMasonryProps } from '../../lib'
-import { ListLayoutProps } from './ListLayout'
+import { ItemMasonryProps, ListMasonryProps, UseInfiniteScrollArgs, UseInfiniteScrollReturn } from '../../lib'
+import { ListComposition } from './styles'
+import { StyledProp } from '@codeleap/styles'
+
+export type ListLayoutProps = Omit<ListProps, 'renderItem'> & UseInfiniteScrollReturn['layoutProps'] & {
+  styles: StylesOf<ListComposition>
+  children?: React.ReactNode
+  showFooter?: boolean
+}
+
+export type ListRefreshControlComponent = Partial<ListLayoutProps> & {
+  styles: StylesOf<ListComposition>
+}
 
 export type AugmentedRenderItemInfo<T> = ItemMasonryProps<T> & {
   item: T
@@ -16,26 +25,27 @@ export type AugmentedRenderItemInfo<T> = ItemMasonryProps<T> & {
   isOnly: boolean
 }
 
-export type ListProps<
-T = any[],
-Data = T extends Array<infer D> ? D : never
-> = 
-  ComponentVariants<typeof ListPresets> &
-  Omit<typeof View, 'variants' | 'styles'> & {
-    data: Data[]
+export type ListItem = {
+  id: string | number
+}
+
+export type ListProps<T extends ListItem = ListItem> =
+  ComponentCommonProps &
+  UseInfiniteScrollArgs &
+  {
+    data: T[]
     isFetching?: boolean
     hasNextPage?: boolean
     separators?: boolean
     onRefresh?: () => void
-    placeholder?: EmptyPlaceholderProps
-    styles?: StylesOf<ListComposition>
+    placeholder?: Omit<EmptyPlaceholderProps, 'debugName'>
     keyExtractor?: (item: T, index: number) => string
     renderItem: (data: AugmentedRenderItemInfo<T>) => React.ReactElement
     ListFooterComponent?: (props: ListLayoutProps) => React.ReactElement
     ListLoadingIndicatorComponent?: () => React.ReactElement
     ListRefreshControlComponent?: () => React.ReactElement
     ListEmptyComponent?: React.FC | ((props: EmptyPlaceholderProps) => React.ReactElement)
-    ListSeparatorComponent?: React.FC | ((props: { separatorStyles: ViewProps<'div'>['css'] }) => React.ReactElement)
+    ListSeparatorComponent?: React.FC | ((props: { separatorStyles: ViewProps['style'] }) => React.ReactElement)
     isLoading?: boolean
     isFetchingNextPage?: boolean
     fetchNextPage?: () => void
@@ -45,13 +55,13 @@ Data = T extends Array<infer D> ? D : never
     refreshThreshold?: number
     refreshPosition?: number
     refresh?: boolean
-    refreshControlProps?: PropsOf<typeof motion.div>
+    refreshControlProps?: Partial<MotionProps>
     refreshControlIndicatorProps?: Partial<ActivityIndicatorProps>
-    style?: React.CSSProperties
+    style?: StyledProp<ListComposition>
     ref?: React.MutableRefObject<undefined>
     rowItemsSpacing?: number
     overscan?: number
     masonryProps?: Partial<ListMasonryProps<T>>
     reloadTimeout?: number
     showFooter?: boolean
-} & ComponentCommonProps & UseInfiniteScrollArgs
+  }

package/src/components/LoadingOverlay/index.tsx

@@ -1,49 +1,47 @@
-import { ComponentVariants, getNestedStylesByKey, useDefaultComponentStyle } from '@codeleap/common'
 import React from 'react'
-import { StylesOf } from '../..'
-import { LoadingOverlayComposition, LoadingOverlayPresets } from './styles'
-import { View, ViewProps } from '../View'
-import { ActivityIndicator, ActivityIndicatorProps } from '../ActivityIndicator'
-import { ComponentCommonProps } from '../../types/utility'
-
-export type LoadingOverlayProps = Partial<ViewProps<'div'>> & {
-  visible?: boolean
-  styles?: StylesOf<LoadingOverlayComposition>
-  style?: React.CSSProperties
-  indicatorProps?: ActivityIndicatorProps
-  children?: React.ReactNode
-} & ComponentVariants<typeof LoadingOverlayPresets> & ComponentCommonProps
+import { View } from '../View'
+import { ActivityIndicator } from '../ActivityIndicator'
+import { LoadingOverlayProps } from './types'
+import { useStylesFor } from '../../lib/hooks/useStylesFor'
+import { AnyRecord, IJSX, StyledComponentProps, useNestedStylesByKey } from '@codeleap/styles'
+import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
+
+export * from './styles'
+export * from './types'
 
 export const LoadingOverlay = (props: LoadingOverlayProps) => {
-  const { 
+  const {
     visible,
     children,
-    styles = {},
-    variants = [],
-    responsiveVariants = {},
-    style = {},
+    style,
     indicatorProps,
     debugName,
-    ...rest 
-  } = props
+    ...rest
+  } = {
+    ...LoadingOverlay.defaultProps,
+    ...props,
+  }
 
-  const variantStyles = useDefaultComponentStyle<'u:LoadingOverlay', typeof LoadingOverlayPresets>('u:LoadingOverlay', {
-    variants, 
-    styles, 
-    responsiveVariants, 
-    rootElement: 'wrapper',
-  })
+  const styles = useStylesFor(LoadingOverlay.styleRegistryName, style)
 
-  const indicatorStyles = React.useMemo(() => {
-    return getNestedStylesByKey('indicator', variantStyles)
-  }, [variantStyles])
+  const indicatorStyles = useNestedStylesByKey('indicator', styles)
 
   return (
-    <View css={[variantStyles.wrapper, visible && variantStyles['wrapper:visible'], style]} {...rest}>
-      <ActivityIndicator debugName={debugName} {...indicatorProps} styles={indicatorStyles} />
+    <View {...rest} style={[styles.wrapper, visible && styles['wrapper:visible']]}>
+      <ActivityIndicator debugName={debugName} {...indicatorProps} style={indicatorStyles} />
       {children}
     </View>
   )
 }
 
-export * from './styles'
+LoadingOverlay.styleRegistryName = 'LoadingOverlay'
+LoadingOverlay.elements = ['wrapper', 'indicator']
+LoadingOverlay.rootElement = 'wrapper'
+
+LoadingOverlay.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return LoadingOverlay as (props: StyledComponentProps<LoadingOverlayProps, typeof styles>) => IJSX
+}
+
+LoadingOverlay.defaultProps = {} as Partial<LoadingOverlayProps>
+
+WebStyleRegistry.registerComponent(LoadingOverlay)

package/src/components/LoadingOverlay/styles.ts

@@ -1,12 +1,7 @@
-import { createDefaultVariantFactory, includePresets } from "@codeleap/common";
-import { ActivityIndicatorComposition } from "../ActivityIndicator";
+import { ActivityIndicatorComposition } from '../ActivityIndicator'
+
+type LoadingOverlayStates = 'visible'
 
-type LoadingOverlayStates = 'visible' 
- 
 export type LoadingOverlayParts = 'wrapper' | `indicator${Capitalize<ActivityIndicatorComposition>}`
 
 export type LoadingOverlayComposition = `${LoadingOverlayParts}:${LoadingOverlayStates}` | LoadingOverlayParts
-
-export const createLoadingOverlayStyle = createDefaultVariantFactory<LoadingOverlayComposition>()
-
-export const LoadingOverlayPresets = includePresets(s => createLoadingOverlayStyle(() => ({wrapper: s})))

package/src/components/LoadingOverlay/types.ts

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