@codeleap/web 3.14.1 → 3.14.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/web",
-  "version": "3.14.1",
+  "version": "3.14.2",
   "main": "src/index.ts",
   "repository": {
     "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",
@@ -27,6 +27,8 @@
     "masonic": "^3.7.0",
     "rc-slider": "^9.7.5",
     "react-autosize-textarea": "^7.1.0",
+    "react-dropzone": "^14.2.3",
+    "react-image-crop": "^10.1.8",
     "react-input-mask": "^2.0.4",
     "react-number-format": "^5.2.1",
     "react-select": "^5.7.3",

package/src/components/Button/index.tsx

@@ -68,6 +68,7 @@ export const Button = (buttonProps: ButtonProps) => {
     selected,
     loaderProps = {},
     debugName,
+    style = {},
     ...props
   } = allProps
 
@@ -114,7 +115,7 @@ export const Button = (buttonProps: ButtonProps) => {
 
   return (
     <Touchable
-      css={_styles.wrapper}
+      css={[_styles.wrapper, style]}
       component='button'
       debugComponent='Button'
       disabled={disabled}

package/src/components/CropPicker/index.tsx

@@ -0,0 +1,101 @@
+import React, { forwardRef } from 'react'
+import {
+  getNestedStylesByKey,
+  useDefaultComponentStyle,
+} from '@codeleap/common'
+import { CropPickerPresets } from './styles'
+import { CropPickerProps } from './types'
+import { useCropPicker } from './useCropPicker'
+import { Modal, Button, FileInput, FileInputRef } from '../components'
+
+const ReactCrop: React.Component = require('react-image-crop').Component
+import 'react-image-crop/dist/ReactCrop.css'
+
+export * from './styles'
+export * from './types'
+export * from './utils'
+export * from './useCropPicker'
+
+export const _CropPicker = forwardRef<FileInputRef, CropPickerProps>(
+  (props: CropPickerProps, ref) => {
+    const {
+      onFileSelect,
+      targetCrop,
+      variants = [],
+      responsiveVariants = {},
+      styles = {},
+      modalProps = {},
+      title = 'Crop Image',
+      confirmButton = 'Confirm Crop',
+      debugName,
+      handle,
+      ...fileInputProps
+    } = props
+
+    const {
+      onConfirmCrop,
+      onFilesReturned,
+      onClose,
+      fileInputRef,
+      visible,
+      image,
+      crop,
+      setRelativeCrop,
+      handleCropChange,
+    } = handle || useCropPicker({ onFileSelect, ref, ...targetCrop })
+
+    const variantStyles = useDefaultComponentStyle<
+      'u:CropPicker',
+      typeof CropPickerPresets
+    >('u:CropPicker', {
+      variants,
+      responsiveVariants,
+      styles,
+    })
+
+    const buttonStyles = getNestedStylesByKey('confirmButton', variantStyles)
+    const modalStyles = getNestedStylesByKey('modal', variantStyles)
+
+    return (
+      <>
+        <FileInput
+          ref={fileInputRef}
+          onChange={(files) => onFilesReturned(files)}
+          {...fileInputProps}
+        />
+        <Modal
+          visible={visible}
+          toggle={onClose}
+          title={title}
+          styles={modalStyles}
+          footer={
+            <Button
+              text={confirmButton}
+              styles={buttonStyles}
+              onPress={onConfirmCrop}
+              debugName={debugName}
+            />
+          }
+          {...modalProps}
+        >
+          {!!image?.src && (
+            <ReactCrop
+              crop={crop}
+              onChange={handleCropChange}
+              onComplete={(_, relCrop) => setRelativeCrop(relCrop)}
+              style={variantStyles.previewSize}
+              {...targetCrop}
+            >
+              <img
+                src={image?.src}
+                css={[variantStyles.cropPreview, variantStyles.previewSize]}
+              />
+            </ReactCrop>
+          )}
+        </Modal>
+      </>
+    )
+  },
+)
+
+export const CropPicker = React.memo(_CropPicker) as (props: CropPickerProps) => JSX.Element

package/src/components/CropPicker/styles.ts

@@ -0,0 +1,15 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { ButtonComposition } from '../Button'
+import { ModalComposition } from '../Modal'
+
+export type CropPickerComposition =
+  | 'cropPreview'
+  | 'previewSize'
+  | `confirmButton${Capitalize<ButtonComposition>}`
+  | `modal${Capitalize<ModalComposition>}`
+
+const createCropPickerStyle =
+  createDefaultVariantFactory<CropPickerComposition>()
+
+export const CropPickerPresets = includePresets((style) => createCropPickerStyle(() => ({ modalWrapper: style })),
+)

package/src/components/CropPicker/types.ts

@@ -0,0 +1,29 @@
+import { AnyRef, ComponentVariants } from '@codeleap/common'
+import { FileInputProps, FileInputRef } from '../FileInput'
+import { CropPickerComposition, CropPickerPresets } from './styles'
+import { StylesOf } from '../../types'
+import { ReactCropProps } from 'react-image-crop'
+import { ModalProps } from '../Modal'
+import { useCropPicker } from './useCropPicker'
+
+export type BaseCropProps = Partial<ReactCropProps>
+
+export type CropPickerProps = Partial<FileInputProps> &
+  ComponentVariants<typeof CropPickerPresets> & {
+    styles?: StylesOf<CropPickerComposition>
+    style?: React.CSSProperties
+    targetCrop?: BaseCropProps
+    modalProps?: Partial<ModalProps>
+    title?: string
+    confirmButton?: string
+    debugName: string
+    handle?: ReturnType<typeof useCropPicker>
+    ref: AnyRef<HTMLElement>
+  }
+
+export type ImageReading = HTMLImageElement
+
+export type UseCropPickerProps = Partial<ReactCropProps> & {
+  onFileSelect: FileInputProps['onFileSelect']
+  ref: React.MutableRefObject<FileInputRef> | React.Ref<FileInputRef>
+}

package/src/components/CropPicker/useCropPicker.tsx

@@ -0,0 +1,134 @@
+import {
+  WebInputFile,
+  useBooleanToggle,
+  useCallback,
+  useImperativeHandle,
+  usePromise,
+  useRef,
+  useState,
+} from '@codeleap/common'
+import { ImageReading, UseCropPickerProps } from './types'
+import { Crop } from 'react-image-crop'
+import { cropImage, readImage } from './utils'
+import { FileInputRef } from '../FileInput'
+
+export function useCropPicker({
+  onFileSelect,
+  ref,
+  aspect,
+  minWidth: minW,
+  minHeight: minH,
+}: UseCropPickerProps) {
+  const [visible, toggle] = useBooleanToggle(false)
+  const [image, setImage] = useState<ImageReading>(null)
+  const [crop, setCrop] = useState<Crop>()
+  const [relativeCrop, setRelativeCrop] = useState<Crop>()
+  const croppedPromise = usePromise<WebInputFile[]>({})
+
+  const onCancel = () => croppedPromise.resolve([])
+
+  const onResolved = (files: WebInputFile[]) => {
+    croppedPromise.resolve?.(files)
+    onFileSelect?.(files)
+  }
+
+  const cleanup = () => {
+    setImage(null)
+    setRelativeCrop(null)
+    setCrop(undefined)
+  }
+
+  const onConfirmCrop = async () => {
+    const [preview, croppedFile] = await cropImage(image, relativeCrop)
+    onResolved([
+      {
+        file: new File([croppedFile], 'cropped.jpg'),
+        preview,
+      },
+    ])
+    toggle()
+    setTimeout(() => cleanup())
+  }
+
+  const onFilesReturned = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const file = event?.target?.files?.[0]
+    const imageData = await readImage(file)
+    const { naturalWidth, naturalHeight } = imageData
+    const imageAspect = naturalWidth / naturalHeight
+    const v =
+      imageAspect >= aspect
+        ? {
+          width: ((naturalHeight * aspect) / naturalWidth) * 100,
+          height: 100,
+        }
+        : {
+          width: 100,
+          height: (naturalWidth / aspect / naturalHeight) * 100,
+        }
+    const initialCrop = {
+      ...v,
+      x: (100 - v.width) / 2,
+      y: (100 - v.height) / 2,
+      unit: '%',
+    }
+    setCrop(initialCrop)
+    setRelativeCrop(initialCrop)
+    setImage(imageData)
+    setTimeout(() => toggle())
+  }
+
+  const onClose = () => {
+    toggle()
+    onCancel()
+    setTimeout(() => cleanup())
+  }
+
+  const fileInputRef = useRef<FileInputRef>(null)
+
+  useImperativeHandle(ref, () => ({
+    openFilePicker: () => {
+      fileInputRef.current.openFilePicker()
+      return croppedPromise._await()
+    },
+    clear: () => {
+      fileInputRef.current.clear()
+      return croppedPromise._await()
+    },
+  }))
+
+  const minWidth = (minW ?? 100) * aspect
+  const minHeight = minH ?? 100
+
+  const handleCropChange = useCallback(
+    (newCrop: Crop) => {
+      setCrop({
+        ...newCrop,
+        width: newCrop.width < minWidth ? minWidth : newCrop.width,
+        height: newCrop.height < minHeight ? minHeight : newCrop.height,
+      })
+    },
+    [crop],
+  )
+
+  return {
+    onCancel,
+    onResolved,
+    cleanup,
+    onConfirmCrop,
+    onFilesReturned,
+    onClose,
+    fileInputRef,
+    visible,
+    toggle,
+    image,
+    setImage,
+    crop,
+    setCrop,
+    relativeCrop,
+    setRelativeCrop,
+    croppedPromise,
+    handleCropChange,
+  }
+}

package/src/components/CropPicker/utils.ts

@@ -0,0 +1,51 @@
+import { Crop } from 'react-image-crop'
+import { ImageReading } from './types'
+
+export function readImage(file: File | Blob): Promise<ImageReading> {
+  const reader = new FileReader()
+  return new Promise<ImageReading>((resolve) => {
+    reader.onload = () => {
+      const image = new Image()
+      image.onload = () => resolve(image)
+      image.src = reader.result as string
+    }
+    reader.readAsDataURL(file)
+  })
+}
+
+export function cropImage(image: ImageReading, crop: Crop): Promise<[string, Blob]> {
+  const canvas = document.createElement('canvas')
+  const ctx = canvas.getContext('2d', { alpha: true })
+
+  if (!ctx) throw new Error('No 2d context')
+
+  canvas.width = image.naturalWidth * (crop.width / 100)
+  canvas.height = image.naturalHeight * (crop.height / 100)
+
+  const x = image.naturalWidth * (crop.x / 100)
+  const y = image.naturalHeight * (crop.y / 100)
+
+  ctx.drawImage(
+    image,
+    x,
+    y,
+    canvas.width,
+    canvas.height,
+    0,
+    0,
+    canvas.width,
+    canvas.height,
+  )
+
+  return new Promise<[string, Blob]>((resolve, reject) => {
+    canvas.toBlob(blob => {
+      if (!blob) {
+        reject(new Error('Canvas is empty'))
+        return
+      }
+      readImage(blob).then(cropped => {
+        resolve([cropped.src, blob])
+      }).catch(reject)
+    }, 'image/png')
+  })
+}

package/src/components/Dropzone/index.tsx

@@ -0,0 +1,204 @@
+import { DropzoneFilePreviewProps, DropzoneProps, DropzoneRef } from './types'
+import { DropzonePresets } from './styles'
+import { IconPlaceholder, PropsOf, 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'
+
+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/')
+}
+
+const FilePreview = ({
+  file,
+  variantStyles,
+  withImagePreview,
+  errors = [],
+  onRemove,
+  fileLeftIcon,
+  fileRightIcon,
+  fileRightIconStyles,
+}: DropzoneFilePreviewProps) => {
+  const hasErrors = errors?.length > 0
+  const _isImage = isImage(file)
+  const isPreview = withImagePreview && _isImage
+
+  const [imageUrl, setImageUrl] = useState()
+
+  const revokeImageUrl = () => {
+    URL.revokeObjectURL(imageUrl)
+  }
+
+  onUpdate(() => {
+    if (_isImage) setImageUrl(URL.createObjectURL(file))
+  }, [file, _isImage])
+
+  return (
+    <View css={[variantStyles.fileWrapper, hasErrors && variantStyles['fileWrapper:error']]}>
+      {isPreview ?
+        <img
+          onLoad={revokeImageUrl}
+          src={imageUrl}
+          css={variantStyles.fileImage}
+        />
+        :
+        <Icon
+          debugName='DropzoneFilePreview:LeftIcon'
+          name={fileLeftIcon}
+          css={variantStyles.fileLeftIcon}
+        />
+      }
+
+      <View css={variantStyles.fileNameWrapper}>
+        <Text text={file.name} css={variantStyles.fileName} />
+        {hasErrors && errors?.map(error => <Text text={error.message} css={variantStyles.fileError} />)}
+      </View>
+
+      <ActionIcon
+        onClick={e => {
+          e.stopPropagation()
+          onRemove?.()
+        }} debugName='DropzoneFilePreview:RightIcon'
+        name={fileRightIcon}
+        styles={fileRightIconStyles}
+      />
+    </View>)
+}
+
+const DropzoneComponent = (props: DropzoneProps, ref: React.ForwardedRef<DropzoneRef>) => {
+  const allProps = {
+    ...defaultProps,
+    ...props,
+  }
+  const {
+    responsiveVariants,
+    styles,
+    variants,
+    icon,
+    placeholder,
+    multiple,
+    acceptedFiles,
+    setAcceptedFiles,
+    rejectedFiles: rejectedFilesProps,
+    setRejectedFiles: setRejectedFilesProps,
+    fileLeftIcon,
+    fileRightIcon,
+    withImagePreview,
+    onDrop,
+    onRemove,
+    children,
+    ...rest } = allProps
+
+  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 handleDrop = useCallback((newAcceptedFiles: File[], newRejectedFiles: FileRejection[], event) => {
+    setRejectedFiles(newRejectedFiles)
+    setAcceptedFiles?.(state => multiple ? [...state, ...newAcceptedFiles] : newAcceptedFiles)
+    onDrop?.(newAcceptedFiles, newRejectedFiles, event)
+  }, [onDrop, setAcceptedFiles])
+
+  const handleRemoveFile = useCallback((file: File, isRejected = false) => {
+    if (!isRejected) {
+      setAcceptedFiles?.(state => state.filter(f => f.name !== file.name))
+    } else {
+      setRejectedFiles(state => state.filter(f => f.file.name !== file.name))
+    }
+  }, [setAcceptedFiles])
+
+  const { getRootProps, getInputProps, open } = useDropzone({
+    ...rest,
+    multiple,
+    onDrop: handleDrop,
+  })
+
+  const clear = useCallback(() => {
+    setAcceptedFiles?.([])
+    setRejectedFiles([])
+  }, [setAcceptedFiles])
+
+  useImperativeHandle(ref, () => ({
+    clear,
+    open,
+  }))
+
+  const hasFiles = acceptedFiles.length > 0 || rejectedFiles.length > 0
+
+  const fileProps = {
+    fileLeftIcon,
+    fileRightIcon,
+    variantStyles,
+    withImagePreview,
+    fileRightIconStyles,
+  }
+
+  return (
+    <View css={variantStyles.wrapper}>
+      <View {...getRootProps() as PropsOf<ViewProps<'div'>>} css={variantStyles.dropzone}>
+
+        {icon && !hasFiles &&
+          <View css={variantStyles.iconWrapper}>
+            <Icon debugName='Dropzone:Icon' name={icon} css={variantStyles.icon} />
+          </View>
+        }
+
+        {hasFiles && (
+          <View css={variantStyles.filesWrapper}>
+            {acceptedFiles.map(file => (
+              <FilePreview
+                {...fileProps}
+                file={file}
+                key={file.name}
+                onRemove={() => handleRemoveFile(file)}
+              />))}
+
+            {rejectedFiles.map(({ file, errors }) => (
+              <FilePreview
+                {...fileProps}
+                key={file.name}
+                file={file}
+                errors={errors}
+                onRemove={() => handleRemoveFile(file, true)}
+              />))}
+          </View>
+        )}
+
+        {children}
+        {!!placeholder && <Text text={placeholder} css={variantStyles.placeholder} />}
+
+        <input {...getInputProps() as HTMLProps<HTMLInputElement>} />
+      </View>
+    </View>)
+}
+
+export * from './styles'
+export * from './types'
+
+DropzoneComponent.defaultProps = defaultProps
+
+export const Dropzone = forwardRef(DropzoneComponent)

package/src/components/Dropzone/styles.ts

@@ -0,0 +1,23 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { ActionIconComposition } from '../ActionIcon'
+
+export type DropzoneComposition =
+  | 'wrapper'
+  | 'dropzone'
+  | 'icon'
+  | 'placeholder'
+  | 'filesWrapper'
+  | 'fileWrapper'
+  | 'fileLeftIcon'
+  | 'fileName'
+  | 'fileError'
+  | 'fileErrors'
+  | 'fileNameWrapper'
+  | 'fileImage'
+  | 'iconWrapper'
+  | `fileRightIcon${Capitalize<ActionIconComposition>}`
+
+const createDropzoneStyle = createDefaultVariantFactory<DropzoneComposition>()
+
+export const DropzonePresets = includePresets((styles) => createDropzoneStyle(() => ({ wrapper: styles })),
+)

package/src/components/Dropzone/types.ts

@@ -0,0 +1,53 @@
+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 { ReactDispatch } from 'react'
+import { ActionIconComposition } from '../ActionIcon'
+
+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
+    placeholder?: string
+    acceptedFiles: File[]
+    rejectedFiles?: DropzoneFileRejection[]
+    setAcceptedFiles: ReactDispatch<React.SetStateAction<DropzoneFile[]>>
+    setRejectedFiles?: ReactDispatch<
+      React.SetStateAction<DropzoneFileRejection[]>
+    >
+    onRemove?: (file: DropzoneFile) => void
+    children?: React.ReactNode
+    fileRightIcon?: IconPlaceholder
+    fileLeftIcon?: IconPlaceholder
+    withImagePreview?: boolean
+  }
+
+export type DropzoneFilePreviewProps = Pick<
+  DropzoneProps,
+  'fileRightIcon' | 'fileLeftIcon' | 'withImagePreview'
+> & {
+  file: DropzoneFile
+  errors?: DropzoneFileRejection['errors']
+  variantStyles: StylesOf<DropzoneComposition>
+  onRemove?: () => void
+  fileRightIconStyles?: StylesOf<ActionIconComposition>
+}
+
+export type DropzoneRef = ReactDropzoneRef & {
+  clear: () => void
+}

package/src/components/components.ts

@@ -30,4 +30,6 @@ export * from './Pager'
 export * from './EmptyPlaceholder'
 export * from './Grid'
 export * from './Badge'
+export * from './CropPicker'
 export * from './defaultStyles'
+export * from './Dropzone'

package/src/components/defaultStyles.ts

@@ -26,6 +26,7 @@ import { PagerPresets } from './Pager/styles'
 import { EmptyPlaceholderPresets } from './EmptyPlaceholder/styles'
 import { GridPresets } from './Grid/styles'
 import { BadgePresets } from './Badge/styles'
+import { CropPickerPresets } from './CropPicker'
 
 export const defaultStyles = {
   View: ViewPresets,
@@ -58,9 +59,12 @@ export const defaultStyles = {
   PaginationIndicator: PaginationIndicatorStyles,
   Grid: GridPresets,
   Badge: BadgePresets,
+  Dropzone: DropzonePresets,
+  CropPicker: CropPickerPresets,
 }
 
 import createCache from '@emotion/cache'
+import { DropzonePresets } from './Dropzone/styles'
 
 export const createCodeleapWebCache = () => {
   return createCache({