@codeleap/web 3.24.2 → 3.25.0

package/src/components/Drawer/index.tsx

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

package/src/components/Drawer/styles.ts

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

package/src/components/Drawer/types.ts

@@ -0,0 +1,23 @@
+import { AnyFunction } from '@codeleap/common'
+import React from 'react'
+import { ComponentCommonProps } from '../../types/utility'
+import { DrawerComposition } from './styles'
+import { ActionIconProps } from '../ActionIcon'
+import { AppIcon, StyledProp } from '@codeleap/styles'
+
+export type DrawerProps =
+  ComponentCommonProps &
+  {
+    open: boolean
+    toggle: AnyFunction
+    darkenBackground?: boolean
+    size?: number
+    showCloseButton?: boolean
+    title?: React.ReactNode | string
+    footer?: React.ReactNode
+    position?: 'left' | 'right' | 'top' | 'bottom'
+    style?: StyledProp<DrawerComposition>
+    closeButtonProps?: Partial<ActionIconProps>
+    closeIcon?: AppIcon
+    children?: React.ReactNode
+  }

package/src/components/Dropzone/index.tsx

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

package/src/components/Dropzone/styles.ts

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