@codeleap/web 3.24.3 → 4.0.0

package/src/components/Dropzone/types.ts

@@ -1,27 +1,18 @@
-import {
-  ComponentVariants,
-  IconPlaceholder,
-  PropsOf,
-  StylesOf,
-} from '@codeleap/common'
-import { DropzoneComposition, DropzonePresets } from './styles'
-import { View } from '../View'
-import {
-  DropzoneOptions,
-  FileRejection,
-  DropzoneRef as ReactDropzoneRef,
-} from 'react-dropzone'
+import { StylesOf } from '@codeleap/common'
+import { DropzoneComposition } from './styles'
+import { DropzoneOptions, FileRejection, DropzoneRef as ReactDropzoneRef } from 'react-dropzone'
 import { ActionIconComposition } from '../ActionIcon'
+import { AppIcon, StyledProp } from '@codeleap/styles'
 
 export type DropzoneFile = File
 
 export type DropzoneFileRejection = FileRejection
 
-export type DropzoneProps = ComponentVariants<typeof DropzonePresets> &
-  DropzoneOptions & {
-    styles?: StylesOf<DropzoneComposition>
-    style?: PropsOf<typeof View>['style']
-    icon?: IconPlaceholder
+export type DropzoneProps =
+  Omit<DropzoneOptions, 'style'> &
+  {
+    style?: StyledProp<DropzoneComposition>
+    icon?: AppIcon
     placeholder?: string
     acceptedFiles: File[]
     rejectedFiles?: DropzoneFileRejection[]
@@ -29,30 +20,31 @@ export type DropzoneProps = ComponentVariants<typeof DropzonePresets> &
     setRejectedFiles?: React.Dispatch<React.SetStateAction<DropzoneFileRejection[]>>
     onRemove?: (file: DropzoneFile) => void
     children?: React.ReactNode
-    fileRightIcon?: IconPlaceholder
-    fileLeftIcon?: IconPlaceholder
+    fileRightIcon?: AppIcon
+    fileLeftIcon?: AppIcon
     withImagePreview?: boolean
     FilePreviewComponent?: (props: DropzoneInnerFilePreviewProps) => JSX.Element
   }
 
-export type DropzoneFilePreviewProps = Pick<
-  DropzoneProps,
-  'fileRightIcon' | 'fileLeftIcon' | 'withImagePreview' | 'FilePreviewComponent'
-> & {
-  file: DropzoneFile
-  errors?: DropzoneFileRejection['errors']
-  variantStyles: StylesOf<DropzoneComposition>
-  onRemove?: () => void
-  fileRightIconStyles?: StylesOf<ActionIconComposition>
-  index?: number
-}
+export type DropzoneFilePreviewProps =
+  Pick<DropzoneProps, 'fileRightIcon' | 'fileLeftIcon' | 'withImagePreview' | 'FilePreviewComponent'> &
+  {
+    file: DropzoneFile
+    errors?: DropzoneFileRejection['errors']
+    styles: StylesOf<DropzoneComposition>
+    onRemove?: () => void
+    fileRightIconStyles?: StylesOf<ActionIconComposition>
+    index?: number
+  }
 
-export type DropzoneInnerFilePreviewProps = DropzoneFilePreviewProps & {
-  hasErrors: boolean
-  revokeImageUrl: () => void
-  imageUrl: string
-  isPreview: boolean
-}
+export type DropzoneInnerFilePreviewProps =
+  DropzoneFilePreviewProps &
+  {
+    hasErrors: boolean
+    revokeImageUrl: () => void
+    imageUrl: string
+    isPreview: boolean
+  }
 
 export type DropzoneRef = ReactDropzoneRef & {
   clear: () => void

package/src/components/EmptyPlaceholder/index.tsx

@@ -2,131 +2,111 @@ import React from 'react'
 import { Icon } from '../Icon'
 import { View } from '../View'
 import { Text } from '../Text'
-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'
+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'
 
 export * from './styles'
-
-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 * from './types'
 
 export const EmptyPlaceholder = (props: EmptyPlaceholderProps) => {
-  const allProps = {
-    ...EmptyPlaceholder.defaultProps,
-    ...props,
-  }
-
   const {
     itemName,
     title,
     loading,
     description,
-    styles = {},
     style,
-    variants = [],
-    responsiveVariants = {},
-    icon: IconEmpty = null,
-    renderEmpty: RenderEmpty = null,
-    wrapperProps = {},
-    imageWrapperProps = {},
-    indicatorProps = {},
+    icon: IconEmpty,
+    renderEmpty: RenderEmpty,
+    image,
+    imageProps,
+    wrapperProps,
+    imageWrapperProps,
+    indicatorProps,
     debugName,
-  } = allProps
-  
-  const emptyText = title || (itemName && `No ${itemName} found.`) || 'No items.'
+  } = {
+    ...EmptyPlaceholder.defaultProps,
+    ...props,
+  }
 
-  const variantStyles = useDefaultComponentStyle<'u:EmptyPlaceholder', typeof EmptyPlaceholderPresets>('u:EmptyPlaceholder', {
-    variants,
-    responsiveVariants,
-    styles,
-  })
+  const styles = useStylesFor(EmptyPlaceholder.styleRegistryName, style)
 
-  const activityIndicatorStyles = React.useMemo(() => {
-    return getNestedStylesByKey('loader', variantStyles)
-  }, [variantStyles])
+  const emptyText = title || (itemName && `No ${itemName} found.`) || 'No items.'
+
+  const activityIndicatorStyles = useNestedStylesByKey('loader', styles)
 
   const _Image = React.useMemo(() => {
+    if (TypeGuards.isString(image)) {
+      return <img
+        {...imageProps}
+        src={image as HTMLImageElement['src']}
+        // @ts-expect-error
+        css={styles.image}
+      />
+    }
+
     if (TypeGuards.isNil(IconEmpty)) return null
 
     if (TypeGuards.isString(IconEmpty)) {
-      return <Icon debugName={debugName} name={IconEmpty as IconPlaceholder} forceStyle={variantStyles.icon} />
+      return <Icon debugName={debugName} name={IconEmpty as AppIcon} forceStyle={styles.icon} />
     } else if (React.isValidElement(IconEmpty)) {
       return <IconEmpty {...props} />
     }
-  }, [IconEmpty])
+  }, [IconEmpty, image])
 
   if (loading) {
     return (
-      <View css={[variantStyles.wrapper, variantStyles['wrapper:loading']]}>
-        <ActivityIndicator debugName={debugName} {...indicatorProps} styles={activityIndicatorStyles}/>
+      <View style={[styles.wrapper, styles['wrapper:loading']]}>
+        <ActivityIndicator debugName={debugName} {...indicatorProps} style={activityIndicatorStyles} />
       </View>
     )
   }
 
   if (!TypeGuards.isNil(RenderEmpty)) {
-    const _emptyProps = {
-      emptyText,
-      emptyIconName: IconEmpty as IconPlaceholder,
-      styles: {
-        ...variantStyles,
-        activityIndicatorStyles,
-      },
-    }
-
     return (
-      <View {...wrapperProps} css={[variantStyles.wrapper, style]}>
-        <RenderEmpty {..._emptyProps}/>
+      <View {...wrapperProps} style={styles.wrapper}>
+        <RenderEmpty
+          emptyText={emptyText}
+          emptyIconName={IconEmpty as AppIcon}
+          styles={{
+            ...styles,
+            activityIndicatorStyles,
+          }}
+        />
       </View>
     )
   }
-  
+
   return (
-    <View {...wrapperProps} css={[variantStyles.wrapper, style]}>
-      <View {...imageWrapperProps} css={variantStyles.imageWrapper}>
+    <View {...wrapperProps} style={styles.wrapper}>
+      <View {...imageWrapperProps} style={styles.imageWrapper}>
         {_Image}
       </View>
 
-      {TypeGuards.isString(emptyText) 
-        ? <Text debugName={debugName} text={emptyText} css={variantStyles.title}/>
+      {TypeGuards.isString(emptyText)
+        ? <Text debugName={debugName} text={emptyText} style={styles.title} />
         : React.isValidElement(emptyText) ? emptyText : null
       }
-      
-      {TypeGuards.isString(description) 
-        ? <Text debugName={debugName} text={description} css={variantStyles.description}/>
+
+      {TypeGuards.isString(description)
+        ? <Text debugName={debugName} text={description} style={styles.description} />
         : React.isValidElement(description) ? description : null
       }
     </View>
   )
 }
 
-EmptyPlaceholder.defaultProps = defaultProps
+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)

package/src/components/EmptyPlaceholder/styles.ts

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

package/src/components/EmptyPlaceholder/types.ts

@@ -0,0 +1,32 @@
+import React, { ImgHTMLAttributes } from 'react'
+import { ViewProps } from '../View'
+import { ActivityIndicatorComposition, ActivityIndicatorProps } from '../ActivityIndicator'
+import { EmptyPlaceholderComposition } from './styles'
+import { StylesOf } from '@codeleap/common'
+import { ComponentCommonProps } from '../../types'
+import { AppIcon, StyledProp } from '@codeleap/styles'
+
+type RenderEmptyProps = {
+  emptyText: string | React.ReactElement
+  emptyIconName?: AppIcon
+  styles: StylesOf<EmptyPlaceholderComposition> & {
+    activityIndicatorStyles: StylesOf<ActivityIndicatorComposition>
+  }
+}
+
+export type EmptyPlaceholderProps =
+  ComponentCommonProps &
+  {
+    itemName?: string
+    title?: React.ReactElement | string
+    description?: React.ReactElement | string
+    icon?: AppIcon | ((props: EmptyPlaceholderProps) => JSX.Element)
+    image?: string
+    imageProps?: ImgHTMLAttributes<HTMLImageElement>
+    loading?: boolean
+    style?: StyledProp<EmptyPlaceholderComposition>
+    renderEmpty?: (props: RenderEmptyProps) => JSX.Element
+    wrapperProps?: ViewProps
+    imageWrapperProps?: ViewProps
+    indicatorProps?: Partial<ActivityIndicatorProps>
+  }

package/src/components/FileInput/index.tsx

@@ -0,0 +1,72 @@
+import React, { forwardRef, useImperativeHandle, useRef } from 'react'
+import { WebInputFile, useCallback, TypeGuards } from '@codeleap/common'
+import { FileInputProps, FileInputRef } from './types'
+
+export * from './types'
+
+export const FileInput = forwardRef<FileInputRef, FileInputProps>((props, ref) => {
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const {
+    onFileSelect,
+    autoClear,
+    onChange,
+    ...inputProps
+  } = {
+    ...FileInput.defaultProps,
+    ...props,
+  }
+
+  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
+    if (TypeGuards.isFunction(onChange)) 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'}
+      style={{ visibility: 'hidden', width: 0, height: 0, opacity: 0, display: 'none' }}
+      {...inputProps}
+      ref={inputRef}
+      onChange={handleChange}
+    />
+  )
+})
+
+FileInput.defaultProps = {
+  autoClear: true,
+} as Partial<FileInputProps>

package/src/components/FileInput/types.ts

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

@@ -1,49 +1,28 @@
 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 { ListLayout, useInfiniteScroll } from '../List'
-import { ItemMasonryProps, ListMasonry, useMasonryReload } from '../../lib'
+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'
 
 export * from './styles'
 export * from './types'
 
-const RenderSeparator = (props: { separatorStyles: ViewProps<'div'>['css'] }) => {
-  return (
-    <View css={[props?.separatorStyles]}></View>
-  )
+const RenderSeparator = (props: { separatorStyles: ViewProps['style'] }) => {
+  return <View style={props?.separatorStyles} />
 }
 
-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>) {
+export const Grid = (props: GridProps) => {
   const allProps = {
     ...Grid.defaultProps,
     ...props,
-  } as GridProps
+  }
 
   const {
-    variants = [],
-    responsiveVariants = {},
-    styles = {},
+    style,
     renderItem: RenderItem,
     columnItemsSpacing,
     rowItemsSpacing,
@@ -51,17 +30,13 @@ export function Grid<T = any>(props: GridProps<T>) {
     data,
     overscan,
     separators,
-    masonryProps = {},
+    masonryProps,
     numColumns,
     reloadTimeout,
     showFooter,
   } = allProps
 
-  const variantStyles = useDefaultComponentStyle<'u:Grid', typeof GridPresets>('u:Grid', {
-    variants,
-    responsiveVariants,
-    styles,
-  })
+  const styles = useStylesFor(Grid.styleRegistryName, style)
 
   const { layoutProps, onLoadMore } = useInfiniteScroll(allProps)
 
@@ -71,7 +46,7 @@ export function Grid<T = any>(props: GridProps<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>) => {
@@ -97,13 +72,13 @@ export function Grid<T = any>(props: GridProps<T>) {
       {_item?.index <= numColumns ? null : separator}
       <RenderItem {..._itemProps} />
     </>
-  }, [RenderItem])
+  }, [])
 
   return (
     <ListLayout
       {...allProps}
       {...layoutProps}
-      variantStyles={variantStyles}
+      styles={styles}
       showFooter={reloadingLayout ? false : showFooter}
     >
       <ListMasonry
@@ -124,4 +99,28 @@ export function Grid<T = any>(props: GridProps<T>) {
   )
 }
 
-Grid.defaultProps = defaultProps
+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)

package/src/components/Grid/styles.ts

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

package/src/components/Grid/types.ts

@@ -1,15 +1,13 @@
-import { ComponentVariants, StylesOf } from '@codeleap/common'
+import { StyledProp } from '@codeleap/styles'
+import { GridComposition } from './styles'
 import { ComponentCommonProps } from '../../types'
-import { ListProps } from '../List'
-import { GridComposition, GridPresets } from './styles'
+import { ListItem, ListProps } from '../List'
 
-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>
+export type GridProps<T extends ListItem = ListItem> =
+  Omit<ListProps<T>, 'style'> &
+  ComponentCommonProps &
+  {
+    style?: StyledProp<GridComposition>
     columnItemsSpacing?: number
-    numColumns: number
-  } & ComponentCommonProps
+    numColumns?: number
+  }