@codeleap/web 3.25.0 → 3.25.2

package/src/components/Drawer/index.tsx

@@ -1,47 +1,81 @@
-import { TypeGuards, useMemo } from '@codeleap/common'
+import {
+  AnyFunction,
+  ComponentVariants,
+  IconPlaceholder,
+  TypeGuards,
+  useDefaultComponentStyle,
+  useNestedStylesByKey,
+} from '@codeleap/common'
+import { CSSObject } from '@emotion/react'
+import React from 'react'
 import { Overlay } from '../Overlay'
 import { View } from '../View'
 import { Text } from '../Text'
-import { ActionIcon } from '../ActionIcon'
-import ReactDOM from 'react-dom'
-import { useAnimatedStyle, usePopState } from '../../lib'
-import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { DrawerProps } from './types'
-import { AnyRecord, AppIcon, IJSX, StyledComponentProps, useNestedStylesByKey } from '@codeleap/styles'
-import { useStylesFor } from '../../lib/hooks/useStylesFor'
-
-export * from './styles'
-export * from './types'
+import { ComponentCommonProps, StylesOf } from '../../types/utility'
+import { DrawerComposition, DrawerPresets } from './styles'
+import { ActionIcon, ActionIconProps } from '../ActionIcon'
+import { usePopState } from '../../lib'
 
 const axisMap = {
-  'left': ['top', 'left'],
-  'right': ['top', 'right'],
-  'top': ['top', 'right', 'left'],
-  'bottom': ['bottom', 'right', 'left']
-}
-
-const getInsetPath = (position: DrawerProps['position'], value: number) => {
-  let inset = ''
-
-  switch (position) {
-    case 'left':
-      inset = `inset(0 ${value}% 0 0)`
-      break
-    case 'right':
-      inset = `inset(0 0 0 ${value}%)`
-      break
-    case 'top':
-      inset = `inset(0 0 ${value}% 0)`
-      break
-    case 'bottom':
-      inset = `inset(${value}% 0 0 0)`
-      break
+  top: [-1, 'Y'],
+  bottom: [1, 'Y'],
+  left: [-1, 'X'],
+  right: [1, 'X'],
+} as const
+
+export type DrawerProps = {
+  open: boolean
+  toggle: AnyFunction
+  darkenBackground?: boolean
+  size?: string | number
+  showCloseButton?: boolean
+  title?: React.ReactNode | string
+  footer?: React.ReactNode
+  position?: keyof typeof axisMap
+  styles?: StylesOf<DrawerComposition>
+  style?: React.CSSProperties
+  animationDuration?: string
+  closeButtonProps?: Partial<ActionIconProps>
+  closeIcon?: IconPlaceholder
+  children?: React.ReactNode
+} & ComponentVariants<typeof DrawerPresets> & ComponentCommonProps
+
+const resolveHiddenDrawerPosition = (
+  position: DrawerProps['position'],
+): [string, string, CSSObject] => {
+  const [translateOrient, translateAxis] = axisMap[position]
+
+  const translateValues = {
+    X: 0,
+    Y: 0,
   }
 
-  return inset
+  translateValues[translateAxis] = 100 * translateOrient
+
+  const css = `translate(${translateValues.X}%, ${translateValues.Y}%)`
+  const positioningKeys =
+    translateAxis === 'X' ? ['top', 'bottom'] : ['left', 'right']
+
+  const positioning = Object.fromEntries(positioningKeys.map((k) => [k, 0]))
+  return [css, translateAxis, positioning]
+}
+
+const defaultProps: Partial<DrawerProps> = {
+  animationDuration: '0.3s',
+  position: 'bottom',
+  showCloseButton: false,
+  darkenBackground: true,
+  size: '75vw',
+  title: null,
+  closeIcon: 'x' as IconPlaceholder,
 }
 
 export const Drawer = (props: DrawerProps) => {
+  const allProps = {
+    ...Drawer.defaultProps,
+    ...props,
+  }
+
   const {
     open,
     toggle,
@@ -51,141 +85,99 @@ export const Drawer = (props: DrawerProps) => {
     footer,
     darkenBackground,
     showCloseButton,
-    closeButtonProps,
+    closeButtonProps = {},
     position,
+    variants = [],
+    responsiveVariants = {},
+    styles,
     style,
+    animationDuration,
     debugName,
     closeIcon,
-  } = {
-    ...Drawer.defaultProps,
-    ...props,
-  }
+  } = allProps as DrawerProps
 
   usePopState(open, toggle)
 
-  const styles = useStylesFor(Drawer.styleRegistryName, style)
-
-  const closeButtonStyles = useNestedStylesByKey('closeButton', styles)
+  const [hiddenStyle, axis, positioning] = resolveHiddenDrawerPosition(position)
 
-  const pose = useMemo(() => {
-    const pose = {}
+  const sizeProperty = axis === 'X' ? 'width' : 'height'
+  const fullProperty = sizeProperty === 'height' ? 'width' : 'height'
 
-    for (const p of axisMap[position]) {
-      pose[p] = 0
-    }
+  const variantStyles = useDefaultComponentStyle<'u:Drawer', typeof DrawerPresets>('u:Drawer', {
+    styles,
+    variants,
+    responsiveVariants,
+  })
 
-    return pose
-  }, [])
+  const closeButtonStyles = useNestedStylesByKey('closeButton', variantStyles)
 
-  const expansionProperty = ['left', 'right'].includes(position) ? 'width': 'height'
-  const fixedProperty = expansionProperty == 'width' ? 'height' : 'width'
-  const fixedValue = fixedProperty == 'width' ? '100vw' : '100vh'
-  const measureProperty = expansionProperty == 'width' ? 'svw' : 'svh'
-
-  const animatedStyle = useAnimatedStyle(() => {
-    const value = open ? 0 : 100
-
-    return {
-      clipPath: getInsetPath(position, value),
-      transition: {
-        duration: 0.25,
-      }
-    }
-  }, [open])
-
-  const wrapperAnimatedStyle = useAnimatedStyle(() => ({
-    opacity: open ? 1 : 0,
-    pointerEvents: open ? 'auto' : 'none',
-    transition: {
-      duration: open ? 0.2 : 1.5,
-    }
-  }), [open])
+  const showHeader = (!TypeGuards.isNil(title) || showCloseButton)
 
-  const boxStyles = [
-    styles.box,
-    pose,
+  const wrapperStyles = React.useMemo(() => ([
+    variantStyles.wrapper,
     {
-      zIndex: 999,
-      position: 'fixed',
-      [fixedProperty]: fixedValue,
-      [expansionProperty]: `${size}${measureProperty}`
-    }
-  ]
-
-  const showHeader = (!TypeGuards.isNil(title) || showCloseButton)
+      transition: 'visibility 0.01s ease',
+      transitionDelay: open ? '0' : animationDuration,
+      visibility: open ? 'visible' : 'hidden',
+    },
+    style,
+  ]), [open, variantStyles])
 
-  const content = (
-    <View 
-      debugName={debugName} 
-      animated
-      animatedProps={wrapperAnimatedStyle}
-      style={styles.wrapper}
-    >
-      {darkenBackground ? (
+  return (
+    <View debugName={debugName} css={wrapperStyles}>
+      {darkenBackground && (
         <Overlay
           debugName={debugName}
           visible={open}
-          style={[
-            styles.overlay,
-            open ? styles['overlay:visible'] : styles['overlay:hidden'],
-          ]}
+          css={variantStyles.overlay}
           onPress={toggle}
         />
-      ) : null}
-
-      <View animated animatedProps={animatedStyle} style={boxStyles}>
+      )}
+
+      <View
+        variants={['fixed']}
+        css={{
+          transform: open ? `translate(0%, 0%)` : hiddenStyle,
+          transition: `transform ${animationDuration} ease`,
+          [sizeProperty]: size,
+          [fullProperty]: '100%',
+          ...positioning,
+          [position]: 0,
+          ...variantStyles.box,
+        }}
+      >
         {
           showHeader ? (
-            <View component='header' style={styles.header}>
-              {TypeGuards.isString(title) ? <Text style={styles.title} text={title} /> : title}
-              
-              {showCloseButton ? (
+            <View
+              component='header'
+              css={[variantStyles.header]}
+            >
+              {TypeGuards.isString(title) ? <Text css={variantStyles.title} text={title} /> : title}
+              {showCloseButton && (
                 <ActionIcon
                   debugName={debugName}
-                  icon={closeIcon as AppIcon}
                   onPress={toggle}
-                  propagate={false}
+                  icon={closeIcon as IconPlaceholder}
                   {...closeButtonProps}
-                  style={closeButtonStyles}
+                  styles={closeButtonStyles}
                 />
-              ) : null}
+              )}
             </View>
           ) : null
         }
 
-        <View style={styles.body}>{children}</View>
+        <View css={variantStyles.body}>{children}</View>
 
-        {footer ? (
-          <View component='footer' style={styles.footer}>
+        {footer && (
+          <View component='footer' css={variantStyles.footer}>
             {footer}
           </View>
-        ) : null}
+        )}
       </View>
     </View>
   )
-
-  if (typeof window === 'undefined') return content
-
-  return ReactDOM.createPortal(
-    content,
-    document.body,
-  )
-}
-
-Drawer.styleRegistryName = 'Drawer'
-Drawer.elements = ['wrapper', 'overlay', 'header', 'footer', 'closeButton', 'body', 'box', 'title']
-Drawer.rootElement = 'wrapper'
-
-Drawer.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Drawer as (props: StyledComponentProps<DrawerProps, typeof styles>) => IJSX
 }
 
-Drawer.defaultProps = {
-  position: 'left',
-  showCloseButton: false,
-  darkenBackground: true,
-  size: 75,
-  closeIcon: 'x' as AppIcon,
-} as Partial<DrawerProps>
+Drawer.defaultProps = defaultProps
 
-WebStyleRegistry.registerComponent(Drawer)
+export * from './styles'

package/src/components/Drawer/styles.ts

@@ -1,3 +1,4 @@
+import { createDefaultVariantFactory, includePresets } from "@codeleap/common"
 import { ActionIconComposition } from '../ActionIcon'
 
 export type DrawerComposition =
@@ -9,3 +10,7 @@ export type DrawerComposition =
   | 'body'
   | 'box'
   | 'title'
+
+const createDrawerStyle = createDefaultVariantFactory<DrawerComposition>()
+
+export const DrawerPresets = includePresets((styles) => createDrawerStyle(() => ({ wrapper: styles })))

package/src/components/Dropzone/index.tsx

@@ -1,17 +1,21 @@
 import { DropzoneFilePreviewProps, DropzoneInnerFilePreviewProps, DropzoneProps, DropzoneRef } from './types'
-import { PropsOf, TypeGuards, onUpdate, useCallback } from '@codeleap/common'
+import { DropzonePresets } from './styles'
+import { IconPlaceholder, PropsOf, TypeGuards, onUpdate, useCallback, useDefaultComponentStyle, useNestedStylesByKey, useRef } from '@codeleap/common'
 import { FileRejection, useDropzone } from 'react-dropzone'
 import { View, ViewProps } from '../View'
 import { Text } from '../Text'
 import { Icon } from '../Icon'
 import { forwardRef, useImperativeHandle, useState, HTMLProps } from 'react'
 import { ActionIcon } from '../ActionIcon'
-import { useStylesFor } from '../../lib/hooks/useStylesFor'
-import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { AnyRecord, AppIcon, IJSX, StyledComponentProps, StyledComponentWithProps, useNestedStylesByKey } from '@codeleap/styles'
 
-export * from './styles'
-export * from './types'
+const defaultProps: Partial<DropzoneProps> = {
+  icon: 'file-plus' as IconPlaceholder,
+  multiple: false,
+  acceptedFiles: [],
+  fileLeftIcon: 'file' as IconPlaceholder,
+  fileRightIcon: 'x' as IconPlaceholder,
+  withImagePreview: true,
+}
 
 function isImage(file) {
   return file?.type?.startsWith('image/')
@@ -20,7 +24,7 @@ function isImage(file) {
 const DefaultFilePreview = (props: DropzoneInnerFilePreviewProps) => {
   const {
     file,
-    styles,
+    variantStyles,
     errors = [],
     onRemove,
     fileLeftIcon,
@@ -32,38 +36,34 @@ const DefaultFilePreview = (props: DropzoneInnerFilePreviewProps) => {
     isPreview,
   } = props
 
-  const handleRemove = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e?.stopPropagation?.()
-    onRemove?.()
-  }
-
   return (
-    <View style={[styles.fileWrapper, hasErrors && styles['fileWrapper:error']]}>
-      {isPreview ? (
+    <View css={[variantStyles.fileWrapper, hasErrors && variantStyles['fileWrapper:error']]}>
+      {isPreview ?
         <img
           onLoad={revokeImageUrl}
           src={imageUrl}
-          css={styles.fileImage}
+          css={variantStyles.fileImage}
         />
-      ) : (
+        :
         <Icon
           debugName='DropzoneFilePreview:LeftIcon'
           name={fileLeftIcon}
-          style={styles.fileLeftIcon}
-        />)
+          css={variantStyles.fileLeftIcon}
+        />
       }
 
-      <View style={styles.fileNameWrapper}>
-        <Text text={file.name} style={styles.fileName} />
-        {hasErrors && errors?.map(error => <Text text={error.message} style={styles.fileError} />)}
+      <View css={variantStyles.fileNameWrapper}>
+        <Text text={file.name} css={variantStyles.fileName} />
+        {hasErrors && errors?.map(error => <Text text={error.message} css={variantStyles.fileError} />)}
       </View>
 
       <ActionIcon
-        onPress={handleRemove}
-        propagate={false}
-        debugName='DropzoneFilePreview:RightIcon'
+        onClick={e => {
+          e.stopPropagation()
+          onRemove?.()
+        }} debugName='DropzoneFilePreview:RightIcon'
         name={fileRightIcon}
-        style={fileRightIconStyles}
+        styles={fileRightIconStyles}
       />
     </View>
   )
@@ -77,9 +77,9 @@ const FilePreview = (props: DropzoneFilePreviewProps) => {
     FilePreviewComponent,
     ...rest
   } = props
-
   const hasErrors = errors?.length > 0
-  const isPreview = withImagePreview && isImage(file)
+  const _isImage = isImage(file)
+  const isPreview = withImagePreview && _isImage
 
   const [imageUrl, setImageUrl] = useState<string>()
 
@@ -88,10 +88,8 @@ const FilePreview = (props: DropzoneFilePreviewProps) => {
   }
 
   onUpdate(() => {
-    if (isImage(file)) {
-      setImageUrl(URL.createObjectURL(file))
-    }
-  }, [file])
+    if (_isImage) setImageUrl(URL.createObjectURL(file))
+  }, [file, _isImage])
 
   const _FilePreview = !TypeGuards.isNil(FilePreviewComponent) ? FilePreviewComponent : DefaultFilePreview
 
@@ -108,8 +106,15 @@ const FilePreview = (props: DropzoneFilePreviewProps) => {
   )
 }
 
-export const Dropzone = forwardRef<DropzoneRef, DropzoneProps>((props, ref) => {
+const DropzoneComponent = (props: DropzoneProps, ref: React.ForwardedRef<DropzoneRef>) => {
+  const allProps = {
+    ...DropzoneComponent.defaultProps,
+    ...props,
+  }
   const {
+    responsiveVariants,
+    styles,
+    variants,
     icon,
     placeholder,
     multiple,
@@ -124,19 +129,19 @@ export const Dropzone = forwardRef<DropzoneRef, DropzoneProps>((props, ref) => {
     onRemove,
     children,
     FilePreviewComponent,
-    style,
-    ...rest
-  } = {
-    ...Dropzone.defaultProps,
-    ...props,
-  }
-
-  const styles = useStylesFor(Dropzone.styleRegistryName, style)
+    ...rest } = allProps
 
   const [rejectedFilesState, setRejectedFilesState] = useState<DropzoneProps['rejectedFiles']>([])
   const [rejectedFiles, setRejectedFiles] = [rejectedFilesProps || rejectedFilesState, setRejectedFilesProps || setRejectedFilesState]
 
-  const fileRightIconStyles = useNestedStylesByKey('fileRightIcon', styles)
+  const variantStyles = useDefaultComponentStyle<'u:Dropzone', typeof DropzonePresets>('u:Dropzone', {
+    responsiveVariants,
+    variants,
+    styles,
+    rootElement: 'wrapper',
+  })
+
+  const fileRightIconStyles = useNestedStylesByKey('fileRightIcon', variantStyles)
 
   const handleDrop = useCallback((newAcceptedFiles: File[], newRejectedFiles: FileRejection[], event) => {
     setRejectedFiles(newRejectedFiles)
@@ -173,23 +178,23 @@ export const Dropzone = forwardRef<DropzoneRef, DropzoneProps>((props, ref) => {
   const fileProps = {
     fileLeftIcon,
     fileRightIcon,
-    styles,
+    variantStyles,
     withImagePreview,
     fileRightIconStyles,
   }
 
   return (
-    <View style={styles.wrapper}>
-      <View {...getRootProps() as PropsOf<ViewProps>} style={styles.dropzone}>
+    <View css={variantStyles.wrapper}>
+      <View {...getRootProps() as PropsOf<ViewProps<'div'>>} css={variantStyles.dropzone}>
 
-        {icon && !hasFiles ? (
-          <View style={styles.iconWrapper}>
-            <Icon debugName='Dropzone:Icon' name={icon} style={styles.icon} />
+        {icon && !hasFiles &&
+          <View css={variantStyles.iconWrapper}>
+            <Icon debugName='Dropzone:Icon' name={icon} css={variantStyles.icon} />
           </View>
-        ) : null}
+        }
 
-        {hasFiles ? (
-          <View style={styles.filesWrapper}>
+        {hasFiles && (
+          <View css={variantStyles.filesWrapper}>
             {acceptedFiles?.map?.((file, index) => (
               <FilePreview
                 {...fileProps}
@@ -211,49 +216,20 @@ export const Dropzone = forwardRef<DropzoneRef, DropzoneProps>((props, ref) => {
                 FilePreviewComponent={FilePreviewComponent}
               />))}
           </View>
-        ) : null}
+        )}
 
         {children}
-
-        {!!placeholder ? <Text text={placeholder} style={styles.placeholder} /> : null}
+        {!!placeholder && <Text text={placeholder} css={variantStyles.placeholder} />}
 
         <input {...getInputProps() as HTMLProps<HTMLInputElement>} />
       </View>
     </View>)
-}) as StyledComponentWithProps<DropzoneProps>
-
-Dropzone.styleRegistryName = 'Dropzone'
-
-Dropzone.elements = [
-  'wrapper',
-  'dropzone',
-  'icon',
-  'placeholder',
-  'filesWrapper',
-  'fileWrapper',
-  'fileLeftIcon',
-  'fileName',
-  'fileError',
-  'fileErrors',
-  'fileNameWrapper',
-  'fileImage',
-  'iconWrapper',
-  `fileRightIcon`,
-]
-
-Dropzone.rootElement = 'wrapper'
-
-Dropzone.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Dropzone as (props: StyledComponentProps<DropzoneProps, typeof styles>) => IJSX
 }
 
-Dropzone.defaultProps = {
-  icon: 'file-plus' as AppIcon,
-  multiple: false,
-  acceptedFiles: [],
-  fileLeftIcon: 'file' as AppIcon,
-  fileRightIcon: 'x' as AppIcon,
-  withImagePreview: true,
-} as Partial<DropzoneProps>
+export * from './styles'
+export * from './types'
+
+DropzoneComponent.defaultProps = defaultProps
 
-WebStyleRegistry.registerComponent(Dropzone)
+// @ts-ignore
+export const Dropzone = forwardRef(DropzoneComponent)

package/src/components/Dropzone/styles.ts

@@ -1,3 +1,4 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { ActionIconComposition } from '../ActionIcon'
 
 export type DropzoneComposition =
@@ -15,3 +16,8 @@ export type DropzoneComposition =
   | 'fileImage'
   | 'iconWrapper'
   | `fileRightIcon${Capitalize<ActionIconComposition>}`
+
+const createDropzoneStyle = createDefaultVariantFactory<DropzoneComposition>()
+
+export const DropzonePresets = includePresets((styles) => createDropzoneStyle(() => ({ wrapper: styles })),
+)

package/src/components/Dropzone/types.ts

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