@codeleap/web 3.25.0 → 3.25.3

package/src/components/EmptyPlaceholder/index.tsx

@@ -2,111 +2,131 @@ import React from 'react'
 import { Icon } from '../Icon'
 import { View } from '../View'
 import { Text } from '../Text'
-import { ActivityIndicator } from '../ActivityIndicator'
-import { TypeGuards } from '@codeleap/common'
-import { EmptyPlaceholderProps } from './types'
-import { useStylesFor } from '../../lib/hooks/useStylesFor'
-import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { AnyRecord, AppIcon, IJSX, StyledComponentProps, useNestedStylesByKey } from '@codeleap/styles'
+import { ActivityIndicator, ActivityIndicatorComposition, ActivityIndicatorProps } from '../ActivityIndicator'
+import { EmptyPlaceholderComposition, EmptyPlaceholderPresets } from './styles'
+import {
+  ComponentVariants,
+  getNestedStylesByKey,
+  IconPlaceholder,
+  StylesOf,
+  TypeGuards,
+  useDefaultComponentStyle,
+} from '@codeleap/common'
+import { ComponentCommonProps } from '../../types'
 
 export * from './styles'
-export * from './types'
+
+type RenderEmptyProps = {
+  emptyText: string | React.ReactElement
+  emptyIconName?: IconPlaceholder
+  styles: StylesOf<EmptyPlaceholderComposition> & {
+    activityIndicatorStyles: StylesOf<ActivityIndicatorComposition>
+  }
+}
+
+export type EmptyPlaceholderProps = ComponentVariants<typeof EmptyPlaceholderPresets> & {
+  itemName?: string
+  title?: React.ReactElement | string
+  description?: React.ReactElement | string
+  icon?: IconPlaceholder | ((props: EmptyPlaceholderProps) => JSX.Element) | null
+  loading?: boolean
+  styles?: StylesOf<EmptyPlaceholderComposition>
+  style?: React.CSSProperties
+  renderEmpty?: (props: RenderEmptyProps) => JSX.Element
+  wrapperProps?: Partial<typeof View>
+  imageWrapperProps?: Partial<typeof View>
+  indicatorProps?: Partial<ActivityIndicatorProps>
+} & ComponentCommonProps
+
+const defaultProps: Partial<EmptyPlaceholderProps> = {}
 
 export const EmptyPlaceholder = (props: EmptyPlaceholderProps) => {
+  const allProps = {
+    ...EmptyPlaceholder.defaultProps,
+    ...props,
+  }
+
   const {
     itemName,
     title,
     loading,
     description,
+    styles = {},
     style,
-    icon: IconEmpty,
-    renderEmpty: RenderEmpty,
-    image,
-    imageProps,
-    wrapperProps,
-    imageWrapperProps,
-    indicatorProps,
+    variants = [],
+    responsiveVariants = {},
+    icon: IconEmpty = null,
+    renderEmpty: RenderEmpty = null,
+    wrapperProps = {},
+    imageWrapperProps = {},
+    indicatorProps = {},
     debugName,
-  } = {
-    ...EmptyPlaceholder.defaultProps,
-    ...props,
-  }
-
-  const styles = useStylesFor(EmptyPlaceholder.styleRegistryName, style)
-
+  } = allProps
+  
   const emptyText = title || (itemName && `No ${itemName} found.`) || 'No items.'
 
-  const activityIndicatorStyles = useNestedStylesByKey('loader', styles)
+  const variantStyles = useDefaultComponentStyle<'u:EmptyPlaceholder', typeof EmptyPlaceholderPresets>('u:EmptyPlaceholder', {
+    variants,
+    responsiveVariants,
+    styles,
+  })
 
-  const _Image = React.useMemo(() => {
-    if (TypeGuards.isString(image)) {
-      return <img
-        {...imageProps}
-        src={image as HTMLImageElement['src']}
-        // @ts-expect-error
-        css={styles.image}
-      />
-    }
+  const activityIndicatorStyles = React.useMemo(() => {
+    return getNestedStylesByKey('loader', variantStyles)
+  }, [variantStyles])
 
+  const _Image = React.useMemo(() => {
     if (TypeGuards.isNil(IconEmpty)) return null
 
     if (TypeGuards.isString(IconEmpty)) {
-      return <Icon debugName={debugName} name={IconEmpty as AppIcon} forceStyle={styles.icon} />
+      return <Icon debugName={debugName} name={IconEmpty as IconPlaceholder} forceStyle={variantStyles.icon} />
     } else if (React.isValidElement(IconEmpty)) {
       return <IconEmpty {...props} />
     }
-  }, [IconEmpty, image])
+  }, [IconEmpty])
 
   if (loading) {
     return (
-      <View style={[styles.wrapper, styles['wrapper:loading']]}>
-        <ActivityIndicator debugName={debugName} {...indicatorProps} style={activityIndicatorStyles} />
+      <View css={[variantStyles.wrapper, variantStyles['wrapper:loading']]}>
+        <ActivityIndicator debugName={debugName} {...indicatorProps} styles={activityIndicatorStyles}/>
       </View>
     )
   }
 
   if (!TypeGuards.isNil(RenderEmpty)) {
+    const _emptyProps = {
+      emptyText,
+      emptyIconName: IconEmpty as IconPlaceholder,
+      styles: {
+        ...variantStyles,
+        activityIndicatorStyles,
+      },
+    }
+
     return (
-      <View {...wrapperProps} style={styles.wrapper}>
-        <RenderEmpty
-          emptyText={emptyText}
-          emptyIconName={IconEmpty as AppIcon}
-          styles={{
-            ...styles,
-            activityIndicatorStyles,
-          }}
-        />
+      <View {...wrapperProps} css={[variantStyles.wrapper, style]}>
+        <RenderEmpty {..._emptyProps}/>
       </View>
     )
   }
-
+  
   return (
-    <View {...wrapperProps} style={styles.wrapper}>
-      <View {...imageWrapperProps} style={styles.imageWrapper}>
+    <View {...wrapperProps} css={[variantStyles.wrapper, style]}>
+      <View {...imageWrapperProps} css={variantStyles.imageWrapper}>
         {_Image}
       </View>
 
-      {TypeGuards.isString(emptyText)
-        ? <Text debugName={debugName} text={emptyText} style={styles.title} />
+      {TypeGuards.isString(emptyText) 
+        ? <Text debugName={debugName} text={emptyText} css={variantStyles.title}/>
         : React.isValidElement(emptyText) ? emptyText : null
       }
-
-      {TypeGuards.isString(description)
-        ? <Text debugName={debugName} text={description} style={styles.description} />
+      
+      {TypeGuards.isString(description) 
+        ? <Text debugName={debugName} text={description} css={variantStyles.description}/>
         : React.isValidElement(description) ? description : null
       }
     </View>
   )
 }
 
-EmptyPlaceholder.styleRegistryName = 'EmptyPlaceholder'
-EmptyPlaceholder.elements = ['wrapper', 'loader', 'title', 'description', 'image', 'imageWrapper', 'icon']
-EmptyPlaceholder.rootElement = 'wrapper'
-
-EmptyPlaceholder.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return EmptyPlaceholder as (props: StyledComponentProps<EmptyPlaceholderProps, typeof styles>) => IJSX
-}
-
-EmptyPlaceholder.defaultProps = {} as Partial<EmptyPlaceholderProps>
-
-WebStyleRegistry.registerComponent(EmptyPlaceholder)
+EmptyPlaceholder.defaultProps = defaultProps

package/src/components/EmptyPlaceholder/styles.ts

@@ -1,3 +1,4 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { ActivityIndicatorComposition } from '../ActivityIndicator'
 
 export type EmptyPlaceholderComposition =
@@ -9,3 +10,7 @@ export type EmptyPlaceholderComposition =
   | 'image'
   | 'imageWrapper'
   | 'icon'
+
+const createEmptyPlaceholderStyle = createDefaultVariantFactory<EmptyPlaceholderComposition>()
+
+export const EmptyPlaceholderPresets = includePresets((styles) => createEmptyPlaceholderStyle(() => ({ wrapper: styles })))

package/src/components/FileInput.tsx

@@ -0,0 +1,91 @@
+/** @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/Grid/index.tsx

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

package/src/components/Grid/styles.ts

@@ -1,3 +1,10 @@
-import { ListComposition } from '../List'
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { ListComposition, ListParts } from '../List'
 
-export type GridComposition = ListComposition
+export type GridParts = ListParts
+
+export type GridComposition = ListComposition | GridParts
+
+const createGridStyle = createDefaultVariantFactory<GridComposition>()
+
+export const GridPresets = includePresets(style => createGridStyle(() => ({ wrapper: style })))

package/src/components/Grid/types.ts

@@ -1,13 +1,15 @@
-import { StyledProp } from '@codeleap/styles'
-import { GridComposition } from './styles'
+import { ComponentVariants, StylesOf } from '@codeleap/common'
 import { ComponentCommonProps } from '../../types'
-import { ListItem, ListProps } from '../List'
+import { ListProps } from '../List'
+import { GridComposition, GridPresets } from './styles'
 
-export type GridProps<T extends ListItem = ListItem> =
-  Omit<ListProps<T>, 'style'> &
-  ComponentCommonProps &
-  {
-    style?: StyledProp<GridComposition>
+export type GridProps<
+  T = any[],
+  Data = T extends Array<infer D> ? D : never
+> = 
+  Omit<ListProps<T, Data>, 'variants' | 'styles'> &
+  ComponentVariants<typeof GridPresets> &  {
+    styles?: StylesOf<GridComposition>
     columnItemsSpacing?: number
-    numColumns?: number
-  }
+    numColumns: number
+  } & ComponentCommonProps

package/src/components/Icon/index.tsx

@@ -1,55 +1,57 @@
+/** @jsx jsx */
+import { CSSObject, jsx } from '@emotion/react'
+import { CSSInterpolation } from '@emotion/css'
+import {
+  ComponentVariants,
+  IconPlaceholder,
+  IconStyles,
+  useDefaultComponentStyle,
+  useCodeleapContext,
+} from '@codeleap/common'
 import { View } from '../View'
-import { useStylesFor } from '../../lib/hooks/useStylesFor'
-import { AnyRecord, AppTheme, IJSX, StyledComponentProps, Theme, useTheme } from '@codeleap/styles'
-import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { IconProps } from './types'
+import { ComponentCommonProps } from '../../types'
 
 export * from './styles'
-export * from './types'
 
-export const Icon = (props:IconProps) => {
-  const {
-    name,
-    style,
-    renderEmptySpace,
-    ...otherProps
-  } = {
-    ...Icon.defaultProps,
-    ...props,
-  }
-
-  const theme = useTheme(store => store.current) as AppTheme<Theme>
-
-  const styles = useStylesFor(Icon.styleRegistryName, style)
-
-  const Component = theme?.icons?.[name]
+export type IconProps = ComponentCommonProps & {
+  name: IconPlaceholder
+  style?: React.CSSProperties
+  size?: string | number
+  color?: string
+  renderEmptySpace?: boolean
+  forceStyle?: CSSObject | CSSInterpolation | React.CSSProperties
+  css?: CSSInterpolation | CSSInterpolation[]
+} & ComponentVariants<typeof IconStyles>
+
+const IconCP = ({ name, style, variants, renderEmptySpace, ...otherProps }:IconProps) => {
+  const { Theme, logger } = useCodeleapContext()
+  const Component = Theme?.icons?.[name]
+
+  const variantStyles = useDefaultComponentStyle('Icon', {
+    variants,
+    styles: {
+      icon: style,
+    },
+    rootElement: 'icon',
+  })
 
   if (!name) {
-    const iconStyle = styles.icon as React.CSSProperties & { size: number }
-
-    return renderEmptySpace ? (
-      <View
-        style={{
-          height: iconStyle.size ?? iconStyle.height,
-          width: iconStyle.size ?? iconStyle.width,
-        }}
-      />
-    ) : null
+    const iconStyle = variantStyles.icon
+    return renderEmptySpace ? <View css={{
+      height: iconStyle.size ?? iconStyle.height,
+      width: iconStyle.size ?? iconStyle.width,
+    }}/> : null
   }
 
-  if (!Component) return null
-
-  return <Component {...otherProps} style={styles.icon} />
-}
-
-Icon.styleRegistryName = 'Icon'
-Icon.elements = ['icon']
-Icon.rootElement = 'icon'
-
-Icon.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Icon as (props: StyledComponentProps<IconProps, typeof styles>) => IJSX
+  if (!Component) {
+    logger.warn(
+      `Icon: No icon found in theme for name "${name}".`,
+      { props: { style, name, variants, variantStyles }},
+      'Component',
+    )
+    return null
+  }
+  return <Component style={variantStyles.icon} {...otherProps}/>
 }
 
-Icon.defaultProps = {} as Partial<IconProps>
-
-WebStyleRegistry.registerComponent(Icon)
+export const Icon = IconCP as ((props: IconProps) => jsx.JSX.Element)

package/src/components/Icon/styles.ts

@@ -1 +1,9 @@
+import { createDefaultVariantFactory, includePresets } from "@codeleap/common"
+
 export type IconComposition = 'icon'
+
+const createIconStyle = createDefaultVariantFactory<IconComposition>()
+
+export const IconPresets = includePresets((styles) =>
+  createIconStyle(() => ({ icon: styles }))
+)