@codeleap/web 3.4.0 → 3.6.0

package/src/components/Drawer/index.tsx

@@ -1,23 +1,20 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react'
-
 import {
   AnyFunction,
   ComponentVariants,
   IconPlaceholder,
-  onUpdate,
   TypeGuards,
   useDefaultComponentStyle,
+  useNestedStylesByKey,
 } from '@codeleap/common'
 import { CSSObject } from '@emotion/react'
-import React, { ReactNode } from 'react'
+import React from 'react'
 import { Overlay } from '../Overlay'
 import { View } from '../View'
 import { Text } from '../Text'
-import { Button } from '../Button'
-import { StylesOf } from '../../types/utility'
+import { ComponentCommonProps, StylesOf } from '../../types/utility'
 import { DrawerComposition, DrawerPresets } from './styles'
-import { ActionIcon } from '../ActionIcon'
+import { ActionIcon, ActionIconProps } from '../ActionIcon'
+import { usePopState } from '../../lib'
 
 const axisMap = {
   top: [-1, 'Y'],
@@ -26,19 +23,23 @@ const axisMap = {
   right: [1, 'X'],
 } as const
 
-export type DrawerProps = React.PropsWithChildren<{
+export type DrawerProps = {
   open: boolean
   toggle: AnyFunction
   darkenBackground?: boolean
-  size: string | number
+  size?: string | number
   showCloseButton?: boolean
-  title?: ReactNode
-  footer?: ReactNode
+  title?: React.ReactNode | string
+  footer?: React.ReactNode
   position?: keyof typeof axisMap
   styles?: StylesOf<DrawerComposition>
+  style?: React.CSSProperties
   animationDuration?: string
-} & ComponentVariants<typeof DrawerPresets>
->
+  closeButtonProps?: Partial<ActionIconProps>
+  scrollLocked?: boolean
+  children?: React.ReactNode
+} & ComponentVariants<typeof DrawerPresets> & ComponentCommonProps
+
 const resolveHiddenDrawerPosition = (
   position: DrawerProps['position'],
 ): [string, string, CSSObject] => {
@@ -59,7 +60,22 @@ const resolveHiddenDrawerPosition = (
   return [css, translateAxis, positioning]
 }
 
-export const Drawer = ({ ...rawProps }:DrawerProps) => {
+const defaultProps: Partial<DrawerProps> = {
+  animationDuration: '0.3s',
+  position: 'bottom',
+  showCloseButton: false,
+  darkenBackground: true,
+  size: '75vw',
+  title: null,
+  scrollLocked: true,
+}
+
+export const Drawer = (props: DrawerProps) => {
+  const allProps = {
+    ...Drawer.defaultProps,
+    ...props,
+  }
+
   const {
     open,
     toggle,
@@ -67,51 +83,58 @@ export const Drawer = ({ ...rawProps }:DrawerProps) => {
     size,
     title,
     footer,
-    darkenBackground = true,
+    darkenBackground,
     showCloseButton,
-    position = 'bottom',
+    closeButtonProps = {},
+    position,
     variants = [],
     responsiveVariants = {},
     styles,
-    animationDuration = '0.3s',
-  } = rawProps
+    style,
+    animationDuration,
+    debugName,
+    scrollLocked,
+  } = allProps as DrawerProps
 
-  onUpdate(() => {
-    if (open) {
-      document.body.style.overflow = 'hidden'
-    } else {
-      document.body.style.overflow = 'auto'
-    }
-  }, [open])
+  usePopState(open, toggle, scrollLocked)
 
-  const [hiddenStyle, axis, positioning] =
-    resolveHiddenDrawerPosition(position)
+  const [hiddenStyle, axis, positioning] = resolveHiddenDrawerPosition(position)
 
   const sizeProperty = axis === 'X' ? 'width' : 'height'
   const fullProperty = sizeProperty === 'height' ? 'width' : 'height'
 
-  const variantStyles = useDefaultComponentStyle('Drawer', {
+  const variantStyles = useDefaultComponentStyle<'u:Drawer', typeof DrawerPresets>('u:Drawer', {
     styles,
     variants,
     responsiveVariants,
   })
 
+  const closeButtonStyles = useNestedStylesByKey('closeButton', variantStyles)
+
+  const showHeader = (!TypeGuards.isNil(title) || showCloseButton)
+
+  const wrapperStyles = React.useMemo(() => ([
+    variantStyles.wrapper,
+    {
+      transition: 'visibility 0.01s ease',
+      transitionDelay: open ? '0' : animationDuration,
+      visibility: open ? 'visible' : 'hidden'
+    },
+    style,
+  ]), [open, variantStyles])
+
   return (
-    <View
-      css={{
-        ...variantStyles.wrapper,
-        transition: 'visibility 0.01s ease',
-        transitionDelay: open ? '0' : animationDuration,
-        visibility: open ? 'visible' : 'hidden',
-      }}
-    >
+    <View debugName={debugName} css={wrapperStyles}>
       {darkenBackground && (
         <Overlay
+          debugName={debugName}
           visible={open}
           css={variantStyles.overlay}
-          onPress={() => toggle()}
+          onPress={toggle}
+          scrollLocked={scrollLocked}
         />
       )}
+
       <View
         variants={['fixed']}
         css={{
@@ -125,24 +148,27 @@ export const Drawer = ({ ...rawProps }:DrawerProps) => {
         }}
       >
         {
-          !TypeGuards.isNil(title) || showCloseButton && (
+          showHeader ? (
             <View
               component='header'
-              variants={['justifySpaceBetween']}
-              css={variantStyles.header}
+              css={[variantStyles.header]}
             >
-              {typeof title === 'string' ? <Text text={title} /> : title}
+              {TypeGuards.isString(title) ? <Text css={variantStyles.title} text={title} /> : title}
               {showCloseButton && (
                 <ActionIcon
+                  debugName={debugName}
                   onPress={toggle}
                   icon={'close' as IconPlaceholder}
-                  css={variantStyles.headerCloseButton}
+                  {...closeButtonProps}
+                  styles={closeButtonStyles}
                 />
               )}
             </View>
-          )
+          ) : null
         }
+        
         <View css={variantStyles.body}>{children}</View>
+        
         {footer && (
           <View component='footer' css={variantStyles.footer}>
             {footer}
@@ -153,4 +179,6 @@ export const Drawer = ({ ...rawProps }:DrawerProps) => {
   )
 }
 
+Drawer.defaultProps = defaultProps
+
 export * from './styles'

package/src/components/Drawer/styles.ts

@@ -1,7 +1,15 @@
-import { createDefaultVariantFactory, includePresets } from "@codeleap/common";
-import { ModalComposition } from "../Modal";
+import { createDefaultVariantFactory, includePresets } from "@codeleap/common"
+import { ActionIconComposition } from '../ActionIcon'
 
-export type DrawerComposition = ModalComposition
+export type DrawerComposition =
+  | 'wrapper'
+  | 'overlay'
+  | 'header'
+  | 'footer'
+  | `closeButton${Capitalize<ActionIconComposition>}`
+  | 'body'
+  | 'box'
+  | 'title'
 
 const createDrawerStyle = createDefaultVariantFactory<DrawerComposition>()
 

package/src/components/EmptyPlaceholder/index.tsx

@@ -0,0 +1,135 @@
+import React from 'react'
+import { Icon } from '../Icon'
+import { View, ViewProps } 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'
+
+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) => React.ReactElement
+  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,
+    variants = [],
+    responsiveVariants = {},
+    icon: IconEmpty = null,
+    renderEmpty: RenderEmpty = null,
+    wrapperProps = {},
+    imageWrapperProps = {},
+    indicatorProps = {},
+    debugName,
+  } = allProps
+  
+  const emptyText = title || (itemName && `No ${itemName} found.`) || 'No items.'
+
+  const variantStyles = useDefaultComponentStyle<'u:EmptyPlaceholder', typeof EmptyPlaceholderPresets>('u:EmptyPlaceholder', {
+    variants,
+    responsiveVariants,
+    styles,
+  })
+
+  const activityIndicatorStyles = React.useMemo(() => {
+    return getNestedStylesByKey('loader', variantStyles)
+  }, [variantStyles])
+
+  if (loading) {
+    return (
+      <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} css={[variantStyles.wrapper, style]}>
+        <RenderEmpty {..._emptyProps}/>
+      </View>
+    )
+  }
+
+  const _Image = React.useMemo(() => {
+    if (TypeGuards.isNil(IconEmpty)) return null
+
+    if (TypeGuards.isString(IconEmpty)) {
+      return <Icon debugName={debugName} name={IconEmpty as IconPlaceholder} forceStyle={variantStyles.icon} />
+    } else if (React.isValidElement(IconEmpty)) {
+      // @ts-ignore
+      return <IconEmpty {...props} />
+    } else {
+      return <IconEmpty {...props} />
+    }
+  }, [])
+
+  return (
+    <View {...wrapperProps} css={[variantStyles.wrapper, style]}>
+      <View {...imageWrapperProps} css={variantStyles.imageWrapper}>
+        {_Image}
+      </View>
+
+      {React.isValidElement(emptyText) 
+        ? emptyText 
+        : <Text debugName={debugName} text={emptyText} css={variantStyles.title}/>
+      }
+      
+      {React.isValidElement(description) 
+        ? description 
+        : TypeGuards.isString(description) && <Text debugName={debugName} text={description} css={variantStyles.description}/>
+      }
+    </View>
+  )
+}
+
+EmptyPlaceholder.defaultProps = defaultProps

package/src/components/EmptyPlaceholder/styles.ts

@@ -0,0 +1,16 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { ActivityIndicatorComposition } from '../ActivityIndicator'
+
+export type EmptyPlaceholderComposition =
+  | 'wrapper:loading'
+  | `loader${Capitalize<ActivityIndicatorComposition>}`
+  | 'wrapper'
+  | 'title'
+  | 'description'
+  | 'image'
+  | 'imageWrapper'
+  | 'icon'
+
+const createEmptyPlaceholderStyle = createDefaultVariantFactory<EmptyPlaceholderComposition>()
+
+export const EmptyPlaceholderPresets = includePresets((styles) => createEmptyPlaceholderStyle(() => ({ wrapper: styles })))

package/src/components/Grid/index.tsx

@@ -0,0 +1,169 @@
+import React from 'react'
+import { useDefaultComponentStyle, useCallback } from '@codeleap/common'
+import { View, ViewProps } from '../View'
+import { EmptyPlaceholder } from '../EmptyPlaceholder'
+import { GridPresets } from './styles'
+import { useVirtualizer, VirtualItem } from '@tanstack/react-virtual'
+import { GridProps } from './types'
+import { ListLayout, useInfiniteScroll } from '../List'
+
+export * from './styles'
+export * from './types'
+
+const generateColumns = (count: number) => {
+  return new Array(count).fill(0).map((_, i) => {
+    const key: string = i.toString()
+    return {
+      key,
+    }
+  })
+}
+
+const RenderSeparator = (props: { separatorStyles: ViewProps<'div'>['css'] }) => {
+  return (
+    <View css={[props?.separatorStyles]}></View>
+  )
+}
+
+const defaultProps: Partial<GridProps> = {
+  ListFooterComponent: null,
+  ListHeaderComponent: null,
+  ListLoadingIndicatorComponent: null,
+  ListRefreshControlComponent: null,
+  ListEmptyComponent: EmptyPlaceholder,
+  ListSeparatorComponent: RenderSeparator,
+  refreshDebounce: 3000,
+  refreshSize: 40,
+  refreshThreshold: 1,
+  refreshPosition: 2,
+  refresh: true,
+  numColumns: 2,
+}
+
+const GridCP = React.forwardRef<'div', GridProps>((flatGridProps, ref) => {
+  const allProps = {
+    ...defaultProps,
+    ...flatGridProps,
+  }
+
+  const {
+    variants = [],
+    responsiveVariants = {},
+    styles = {},
+    renderItem: RenderItem,
+    data,
+    ListLoadingIndicatorComponent,
+    ListSeparatorComponent,
+    virtualizerOptions = {},
+    numColumns,
+    separators,
+  } = allProps
+
+  const variantStyles = useDefaultComponentStyle<'u:Grid', typeof GridPresets>('u:Grid', {
+    variants,
+    responsiveVariants,
+    styles,
+  })
+
+  const separator = separators && <ListSeparatorComponent separatorStyles={variantStyles.separator} />
+
+  const {
+    dataVirtualizer,
+    parentRef,
+    items,
+    layoutProps,
+  } = useInfiniteScroll({
+    ...allProps,
+    overscan: 5,
+  })
+
+  const columns = React.useMemo(() => {
+    return generateColumns(numColumns)
+  }, [numColumns])
+
+  const columnVirtualizer = useVirtualizer({
+    horizontal: true,
+    count: columns?.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => null,
+    overscan: 5,
+    ...virtualizerOptions,
+  })
+
+  const columnItems = columnVirtualizer.getVirtualItems()
+
+  const renderItem = useCallback((_item: VirtualItem) => {
+    if (!RenderItem) return null
+
+    const showIndicator = (_item?.index === (data?.length / numColumns)) && !!ListLoadingIndicatorComponent
+
+    const gridLength = data?.length || 0
+
+    return <>
+      {/* Necessary for correct list render */}
+      <div
+        css={[
+          variantStyles.itemWrapper,
+          { transform: `translateY(${_item?.start - dataVirtualizer?.options?.scrollMargin}px)` }
+        ]}
+        key={_item?.key}
+        data-index={_item?.index}
+        ref={dataVirtualizer?.measureElement}
+      >
+        {_item?.index !== 0 ? separator : null}
+
+        <View css={[variantStyles.column]}>
+          {columnItems.map(column => {
+            const rowIndex = _item?.index
+            const columnIndex = column?.index
+            const itemIndex = (rowIndex * numColumns) + columnIndex
+            
+            const isFirst = itemIndex === 0
+            const isLast = itemIndex === gridLength - 1
+            const isOnly = isFirst && isLast
+        
+            const isLastInRow = columnIndex === numColumns
+            const isFirstInRow = columnIndex === 0
+            const isOnlyInRow = isFirstInRow && isLastInRow
+
+            const _itemProps = {
+              ..._item,
+              key: itemIndex,
+              index: itemIndex,
+              isOnly,
+              isLast,
+              isFirst,
+              column,
+              isFirstInRow,
+              isLastInRow,
+              isOnlyInRow,
+              rowIndex,
+              item: data?.[itemIndex]
+            }
+
+            if (!_itemProps?.item) return null
+
+            return <RenderItem {..._itemProps} />
+          })}
+        </View>
+
+        {showIndicator && <ListLoadingIndicatorComponent />}
+      </div>
+    </>
+  }, [RenderItem, data?.length, dataVirtualizer?.measureElement])
+
+  return (
+    <ListLayout
+      {...allProps}
+      {...layoutProps}
+      variantStyles={variantStyles} // @ts-ignore
+      ref={ref}
+    >
+      {items?.map((item) => renderItem(item))}
+    </ListLayout>
+  )
+})
+
+export type GridComponentType = <T extends any[] = any[]>(props: GridProps<T>) => React.ReactElement
+
+export const Grid = GridCP as unknown as GridComponentType

package/src/components/Grid/styles.ts

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

package/src/components/Grid/types.ts

@@ -0,0 +1,24 @@
+import { ComponentVariants, StylesOf } from '@codeleap/common'
+import { VirtualItem } from '@tanstack/react-virtual'
+import { ComponentCommonProps } from '../../types'
+import { AugmentedRenderItemInfo, ListProps } from '../List'
+import { GridComposition, GridPresets } from './styles'
+
+type GridAugmentedRenderItemInfo<T> = AugmentedRenderItemInfo<T> & {
+  column: VirtualItem
+  isLastInRow: boolean
+  isOnlyInRow: boolean
+  isFirstInRow: boolean
+  rowIndex: number
+}
+
+export type GridProps<
+  T = any[],
+  Data = T extends Array<infer D> ? D : never
+> = 
+  Omit<ListProps<T, Data>, 'variants' | 'styles' | 'renderItem'> &
+  ComponentVariants<typeof GridPresets> &  {
+    styles?: StylesOf<GridComposition>
+    numColumns?: number
+    renderItem: (data: GridAugmentedRenderItemInfo<T>) => React.ReactElement
+  } & ComponentCommonProps

package/src/components/Icon/index.tsx

@@ -9,15 +9,18 @@ import {
   useCodeleapContext,
 } from '@codeleap/common'
 import { View } from '../View'
+import { ComponentCommonProps } from '../../types'
 
 export * from './styles'
 
-export type IconProps = {
+export type IconProps = ComponentCommonProps & {
   name: IconPlaceholder
-  style?: any
+  style?: React.CSSProperties
+  size?: string | number
+  color?: string
   renderEmptySpace?: boolean
   forceStyle?: CSSObject | CSSInterpolation | React.CSSProperties
-  css?: any
+  css?: CSSInterpolation | CSSInterpolation[]
 } & ComponentVariants<typeof IconStyles>
 
 const IconCP = ({ name, style, variants, renderEmptySpace, ...otherProps }:IconProps) => {
@@ -48,7 +51,7 @@ const IconCP = ({ name, style, variants, renderEmptySpace, ...otherProps }:IconP
     )
     return null
   }
-  return <Component css={variantStyles.icon} {...otherProps}/>
+  return <Component style={variantStyles.icon} {...otherProps}/>
 }
 
 export const Icon = IconCP as ((props: IconProps) => jsx.JSX.Element)