@northlight/ui 2.41.0 → 2.41.1

package/lib/components/file-picker/file-picker.tsx

@@ -0,0 +1,365 @@
+import React, { DragEvent, useEffect, useRef, useState } from 'react'
+import { Fade, SlideFade, useMultiStyleConfig } from '@chakra-ui/react'
+import {
+  DownloadDuo,
+  EditBoxDuo,
+  FileBlankDuo,
+  Image03Solid,
+  TrashFullDuo,
+  UploadCloudSolid,
+} from '@northlight/icons'
+import { identity } from 'ramda'
+import AvatarEditor from 'react-avatar-editor'
+import { FileEditorModal } from './file-editor-modal'
+import { ConfirmDeleteModal } from './confirm-delete-modal'
+import { Icon } from '../icon'
+import { Lead, P } from '../typography'
+import { HStack, Stack } from '../stack'
+import { FilePickerProps } from './types'
+import { Input } from '../input'
+import { Box } from '../box'
+import { LoadingBar } from '../progress'
+import { Spinner } from '../spinner'
+import { Image } from '../image'
+import { Clickable } from '../clickable'
+import { useDisclosure } from '../../hooks'
+import {
+  compressImage,
+  convertBlobToFile,
+  handleDownload,
+  isFile,
+  isFileImage,
+  isValidFile,
+  onlyAcceptsImages,
+  readableFileSize,
+} from './utils'
+import { FileIconButton } from './file-icon-button'
+import { defaultEditOptions, fiveHundredMB } from './constants'
+import { useCurrentTheme } from '../../utils'
+
+/**
+ * Lets user import file of any type as Javascript File Object
+ * @see MultiFilePicker
+ * @see {@link https://northlight.dev/reference/file-picker}
+ *
+ * @example (Example)
+ * (?
+ * <FilePicker />
+ * ?)
+ *
+ *
+ */
+export const FilePicker = ({
+  acceptFormat = '*',
+  onChange = identity,
+  compression,
+  uploaded: uploadedInitial = 0,
+  maxFileSize = fiveHundredMB,
+  showProgress = false,
+  value = '',
+  loadWithSpinner = false,
+  confirmDelete = false,
+  editFileOptions = defaultEditOptions,
+  sx = {},
+  ...rest
+}: FilePickerProps) => {
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const imageEditorRef = useRef<AvatarEditor>(null)
+  const [ file, setFile ] = useState<File | null | string>(value)
+
+  const [ isInvalid, setIsInvalid ] = useState(false)
+  const [ name, setName ] = useState('')
+  const editModal = useDisclosure()
+  const deleteModal = useDisclosure()
+  const [ editable, setEditable ] = useState(false)
+  const [ hasLoaded, setHasLoaded ] = useState(false)
+  const [ isLoading, setIsLoading ] = useState(false)
+  const [ isImage, setIsImage ] = useState(true)
+  const [ uploaded, setUploaded ] = useState(uploadedInitial)
+
+  const onlyImageAccepted = onlyAcceptsImages(acceptFormat)
+
+  const isUploading = uploaded < 1
+
+  useEffect(() => {
+    setUploaded(uploadedInitial)
+  }, [ uploadedInitial ])
+
+  useEffect(() => {
+    if (!isUploading) {
+      setIsLoading(false)
+      setHasLoaded(true)
+    }
+  }, [ isUploading ])
+
+  const currentTheme = useCurrentTheme()
+
+  const { filePicker } = useMultiStyleConfig('FilePicker', {
+    isImage,
+    hasLoaded,
+    isInvalid,
+    currentTheme,
+    sx,
+    ...rest,
+  })
+
+  useEffect(() => {
+    if (isInvalid) {
+      setTimeout(() => {
+        setIsInvalid(false)
+      }, 1500)
+    }
+  }, [ isInvalid ])
+
+  const handleOnClick = () => {
+    if (fileInputRef.current && !file) {
+      fileInputRef.current.click()
+    }
+  }
+
+  const handleCrop = () => {
+    if (imageEditorRef.current) {
+      const canvas = imageEditorRef.current.getImageScaledToCanvas()
+      canvas.toBlob((blob) => {
+        if (file && blob) {
+          const fileName = name
+          || isFile(file)
+            ? (file as File).name
+            : 'downloaded-file'
+
+          const fileType = isFile(file)
+            ? (file as File).type
+            : '.jpg'
+
+          const newFile = convertBlobToFile(blob, fileName, fileType)
+          setFile(newFile)
+          setHasLoaded(true)
+          onChange(newFile)
+        }
+      })
+      editModal.onClose()
+    }
+  }
+
+  const clearImage = () => {
+    if (fileInputRef.current) {
+      setIsInvalid(false)
+      setName('')
+      setFile(null)
+      setIsImage(true)
+      setHasLoaded(false)
+      if (!showProgress) {
+        setUploaded(0)
+      }
+      onChange(null)
+      fileInputRef.current.value = ''
+    }
+  }
+
+  const handleImageUpload = async (newImage: File | null) => {
+    if (newImage) {
+      setIsInvalid(false)
+      const isFileTypeImage = isFileImage(newImage)
+      setIsImage(isFileTypeImage)
+      const compressedImage = isFileTypeImage
+        ? ((await compressImage(
+          newImage,
+          compression?.width,
+          compression?.height,
+          compression?.quality
+        )) as File)
+        : newImage
+      setFile(compressedImage)
+      if (!showProgress) {
+        setUploaded(1)
+      }
+      onChange(compressedImage)
+      setIsLoading(isUploading)
+    }
+  }
+
+  const handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) {
+      setIsInvalid(false)
+      const newImage = e.target.files[0]
+      handleImageUpload(newImage)
+    }
+  }
+
+  const handleDrop = (e: DragEvent) => {
+    e.preventDefault()
+    if (e.dataTransfer.files) {
+      const newFile = e.dataTransfer.files[0]
+      if (isValidFile(newFile, acceptFormat, maxFileSize).isValid) {
+        handleImageUpload(newFile)
+      } else {
+        setIsInvalid(true)
+      }
+    }
+  }
+
+  return (
+    <Stack maxW={ filePicker.width as number } { ...rest }>
+      <Clickable
+        onClick={ handleOnClick }
+        onDrop={ handleDrop }
+        onDragOver={ (e: DragEvent) => e.preventDefault() }
+        onMouseEnter={ () => setEditable(true) }
+        onMouseLeave={ () => setEditable(false) }
+      >
+        <Box sx={ filePicker }>
+          <SlideFade
+            in={ hasLoaded }
+            style={ {
+              width: '100%',
+              height: '100%',
+              display: hasLoaded && isImage ? 'initial' : 'none',
+            } }
+          >
+            <Image
+              src={ file
+                ? isFile(file)
+                  ? URL.createObjectURL(file as File)
+                  : file as string
+                : '' }
+              alt="preview-image"
+              objectFit="cover"
+              borderRadius={ 8 }
+              display={ hasLoaded && isImage ? 'inherit' : 'none' }
+              h="full"
+              w="full"
+            />
+          </SlideFade>
+          <Input
+            type="file"
+            display="none"
+            accept={ acceptFormat }
+            ref={ fileInputRef }
+            onChange={ handleChange }
+          />
+          <Stack
+            display={ hasLoaded && isImage ? 'none' : 'default' }
+            alignItems="center"
+            w="85%"
+            spacing="0a"
+          >
+            <Icon
+              as={ onlyImageAccepted ? Image03Solid : UploadCloudSolid }
+              boxSize="32px"
+              color={
+              isInvalid
+                ? 'destructive'
+                : editable
+                  ? 'brand'
+                  : 'text.subdued'
+            }
+              display={ isImage && !hasLoaded ? 'inline-block' : 'none' }
+              aria-label="file-icon-upload"
+            />
+            <Icon
+              as={ FileBlankDuo }
+              boxSize="32px"
+              color="gray.300"
+              display={ hasLoaded && !isImage ? 'inline-block' : 'none' }
+            />
+            <P
+              variant={ isInvalid ? '16' : '14' }
+              whiteSpace="nowrap"
+              textOverflow="ellipsis"
+              overflow="hidden"
+              maxWidth={ filePicker.width as number }
+              textAlign="center"
+              alignSelf="center"
+            >
+              { isInvalid
+                ? 'File not supported'
+                : file && isFile(file)
+                  ? (file as File).name
+                  : `Drag & drop ${onlyImageAccepted ? 'image' : 'file'} or` }
+            </P>
+            <Lead
+              sx={ {
+                textDecoration: 'underline',
+                color: isInvalid ? 'destructive' : 'brand',
+              } }
+              display={ isLoading || hasLoaded ? 'none' : 'default' }
+            >
+              Click to upload
+            </Lead>
+            <Box display={ isLoading ? 'block' : 'none' } pt={ 1 }>
+              { loadWithSpinner
+                ? <Spinner />
+                : <LoadingBar loaded={ uploaded } />
+          }
+            </Box>
+          </Stack>
+          <Fade
+            in={ hasLoaded && editable }
+            style={ {
+              display: hasLoaded && editable ? 'flex' : 'none',
+              justifyContent: 'center',
+            } }
+          >
+            <HStack
+              spacing={ 2 }
+              position="absolute"
+              bottom="3"
+              justifyContent="center"
+              bgColor="bg.layer"
+              borderRadius={ 6 }
+              width="44"
+              py={ 2 }
+            >
+              { editFileOptions.canEdit && (
+              <FileIconButton
+                aria-label="edit-file"
+                onClick={ editModal.onOpen }
+                icon={ EditBoxDuo }
+              />
+              ) }
+              <FileIconButton
+                aria-label="download-file"
+                onClick={ handleDownload(file) }
+                icon={ DownloadDuo }
+              />
+              <FileIconButton
+                aria-label="delete-file"
+                onClick={ confirmDelete ? deleteModal.onOpen : clearImage }
+                icon={ TrashFullDuo }
+                color="destructive"
+              />
+            </HStack>
+          </Fade>
+          <P
+            variant="14"
+            sx={ { color: 'gray.400' } }
+            display={
+            hasLoaded && !isImage && !isLoading
+              ? 'inline-block'
+              : 'none'
+          }
+          >
+            { isFile(file) && readableFileSize((file as File)?.size as number) }
+          </P>
+
+        </Box>
+      </Clickable>
+      <FileEditorModal
+        { ...editModal }
+        fileName={ name }
+        setFileName={ setName }
+        image={ file }
+        handleCrop={ handleCrop }
+        isImage={ isImage }
+        ref={ imageEditorRef }
+        canEditFileName={ editFileOptions.canEditName }
+        canCropImage={ editFileOptions.canEditImage }
+      />
+      <ConfirmDeleteModal
+        { ...deleteModal }
+        confirmDelete={ clearImage }
+        fileName={ name || 'file' }
+      />
+    </Stack>
+  )
+}

package/lib/components/file-picker/index.ts

@@ -0,0 +1,7 @@
+export * from './file-picker'
+export * from './file-picker-field'
+export * from './multi-file-uploader'
+export * from './multi-file-picker'
+export * from './multi-file-list'
+export * from './multi-file-picker-field'
+export * from './types'

package/lib/components/file-picker/multi-file-list.tsx

@@ -0,0 +1,88 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { any, identity, map } from 'ramda'
+import { FileItem } from './file-item'
+import { Stack } from '../stack'
+import { createPreviewFileObject, getNewUploadingFiles, isFile, isOverflowing } from './utils'
+import { FileFormat, MultiFileListProps } from './types'
+import { defaultEditOptions } from './constants'
+
+/**
+ * Show list of files, their uploading progress as well as options to edit/delete them
+ * @see MultiFileUploader
+ * @see MultiFilePicker
+ * @see {@link https://northlight.dev/multi-file-list}
+ *
+ */
+export function MultiFileList<T extends FileFormat> ({
+  files,
+  uploadingFiles,
+  onChange = identity,
+  deleteFile = identity,
+  addFile = identity,
+  confirmDelete,
+  editFileOptions = defaultEditOptions,
+  enableSmartLoad = true,
+  ...rest
+}: MultiFileListProps<T>) {
+  const [ uploadingFilesReference, setUploadingFilesReference ] = useState(uploadingFiles)
+  const [ overflowing, setOverflowing ] = useState(false)
+
+  const formattedFiles = files?.map((file) => (
+    isFile(file)
+      ? createPreviewFileObject(file as unknown as File)
+      : file
+  ))
+
+  const listRef = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    if (uploadingFiles && uploadingFilesReference && files) {
+      if (enableSmartLoad) {
+        const newVal = getNewUploadingFiles<T>(uploadingFilesReference, uploadingFiles, files)
+        setUploadingFilesReference(newVal)
+      } else {
+        setUploadingFilesReference(uploadingFiles)
+      }
+    }
+    if (listRef.current) {
+      setOverflowing(isOverflowing(listRef.current))
+    }
+  }, [ uploadingFiles, files ])
+
+  const isLazy = uploadingFilesReference
+    ? any((file: T) => file.isLazy || false, uploadingFilesReference as T[])
+    : false
+
+  return (
+    <Stack
+      ref={ listRef }
+      spacing={ 2 }
+      maxH="sm"
+      pr={ overflowing ? 2 : 0 }
+      overflowY="auto"
+      { ...rest }
+    >
+      { uploadingFilesReference && map((file) => (
+        <FileItem
+          onChangeCallback={ onChange }
+          file={ file }
+          key={ file._id }
+          deleteFile={ deleteFile }
+          confirmDelete={ confirmDelete }
+          isLazy={ isLazy }
+          editFileOptions={ editFileOptions }
+        />
+      ), uploadingFilesReference) }
+      { formattedFiles && map((file) => (
+        <FileItem
+          onChangeCallback={ onChange }
+          addFile={ addFile }
+          file={ file }
+          key={ file._id }
+          deleteFile={ deleteFile }
+          confirmDelete={ confirmDelete }
+          editFileOptions={ editFileOptions }
+        />
+      ), formattedFiles) }
+    </Stack>
+  )
+}

package/lib/components/file-picker/multi-file-picker-field.tsx

@@ -0,0 +1,95 @@
+import React from 'react'
+import { concat, findIndex, identity, isEmpty, map, remove } from 'ramda'
+import { Field } from '../form'
+import { MultiFilePicker } from './multi-file-picker'
+import { createFileObjectFromSrc, isFile, toBase64 } from './utils'
+import { FileFormat, MultiFilePickerFieldProps } from './types'
+
+/**
+ * The multi file picker component wrapped in a <Field />
+ * meant to be used only inside <Form />
+ * @see MultiFilePicker
+ * @see Field
+ * @see {@link https://northlight.dev/reference/multi-file-picker-field}
+ *
+ * @example (Example)
+ * ## Meant for uploading images in a form
+ * Where they handled as base64 strings
+ * (?
+ * <Form initialValues={{images: []}}>
+ * {({watch}) => (
+ * <Stack>
+ * <MultiFilePickerField name="images" />
+ * <Code maxH="xs" overflowY="scroll">{JSON.stringify(watch(), null, 2)}</Code>
+ * </Stack>
+ * )}
+ * </Form>
+ *
+ * ?)
+ *
+ */
+export const MultiFilePickerField = ({
+  name,
+  label,
+  direction,
+  isRequired,
+  validate,
+  onChange: onChangeCallback = identity,
+  ...rest
+}: MultiFilePickerFieldProps) => {
+  const getFiles = (sources: string[]) => {
+    const buffer = map((source) => ({
+      type: 'jpg',
+      src: source,
+      name: '',
+    }), sources)
+    const formattedFiles = map((file) => (isFile(file)
+      ? file : createFileObjectFromSrc(file)), buffer)
+    return formattedFiles as FileFormat[]
+  }
+
+  return (
+    <Field
+      name={ name }
+      label={ label }
+      direction={ direction }
+      isRequired={ isRequired }
+      validate={ validate }
+    >
+      { ({ onChange, value }) => {
+        const handleDelete = (file: FileFormat) => {
+          const removedIndex = findIndex((src) => src === file.src, value)
+          const newValues = remove(removedIndex, 1, value)
+          onChange(newValues)
+        }
+
+        return (
+          <MultiFilePicker
+            onChange={ async (files: File[] | null) => {
+              if (!isEmpty(files)) {
+                const newFiles = files?.map(async (file) => toBase64(file))
+                if (newFiles) {
+                  Promise.all(newFiles).then((values) => {
+                    onChange(concat(value, values))
+                    onChangeCallback(values)
+                  })
+                }
+              } else {
+                onChange([])
+                onChangeCallback([])
+              }
+            } }
+            enablePreLoad={ false }
+            enableSmartLoad={ false }
+            deleteFile={ handleDelete }
+            acceptFormat="image/*"
+            editFileOptions={ { canEdit: true, canEditImage: true, canEditName: false } }
+            confirmDelete={ false }
+            files={ getFiles(value) }
+            { ...rest }
+          />
+        )
+      } }
+    </Field>
+  )
+}

package/lib/components/file-picker/multi-file-picker.tsx

@@ -0,0 +1,95 @@
+import React, { useState } from 'react'
+import { findIndex, identity, insert, isEmpty, isNil, remove } from 'ramda'
+import { MultiFileList } from './multi-file-list'
+import { createPreviewFileObject } from './utils'
+import { MultiFileUploader } from './multi-file-uploader'
+import { Stack } from '../stack'
+import { defaultEditOptions, fiveHundredMB } from './constants'
+import { FileFormat, MultiFilePickerProps } from './types'
+
+/**
+ * Lets user import file of any type as Javascript File Object
+ * @see FilePicker
+ * @see {@link https://northlight.dev/reference/multi-file-picker}
+ *
+ * @example (Example)
+ * (?
+ * <MultiFilePicker />
+ * ?)
+ * ## For more information, view: <a href="https://northlight.dev/components/file%20picker">guide</a>
+ *
+ *
+ */
+export function MultiFilePicker<T extends FileFormat> ({
+  acceptFormat = '*',
+  compression,
+  onChange = identity,
+  files = null,
+  uploadingFiles,
+  deleteFile = null,
+  confirmDelete = true,
+  maxFileSize = fiveHundredMB,
+  enablePreLoad = true,
+  enableSmartLoad = true,
+  editFileOptions = defaultEditOptions,
+  variant,
+  ...rest
+}: MultiFilePickerProps<T>) {
+  const [ bufferFiles, setBufferFiles ] = useState<T[]>([])
+  const [ previewFiles, setPreviewFiles ] = useState<T[]>([])
+
+  const getIndexById = (id: string) => findIndex((file) => file._id === id, previewFiles)
+
+  const addFile = (file: File, id: string) => {
+    const addedFile = createPreviewFileObject(file)
+    const indexOfChanged = getIndexById(id)
+    const newPreviewFiles = remove(indexOfChanged, 1, previewFiles)
+    const newFiles = insert(indexOfChanged, addedFile, newPreviewFiles)
+    setPreviewFiles(newFiles as T[])
+  }
+
+  const handleDelete = (file: T | FileFormat) => {
+    const indexOfRemoved = getIndexById(file._id)
+    const newPreviewFiles = remove(indexOfRemoved, 1, previewFiles)
+    setPreviewFiles(newPreviewFiles)
+  }
+
+  const updateQueuedFiles = (queuedFiles: T[]) => {
+    if (enablePreLoad) {
+      setBufferFiles(queuedFiles)
+    }
+  }
+
+  return (
+    <Stack
+      spacing={ 4 }
+      maxW="inherit"
+      maxH="inherit"
+      { ...rest }
+    >
+      <MultiFileUploader
+        acceptFormat={ acceptFormat }
+        compression={ compression }
+        onChange={ onChange }
+        addFilesToQueue={ updateQueuedFiles }
+        updatePreviewFiles={ setPreviewFiles }
+        maxFileSize={ maxFileSize }
+        variant={ variant }
+      />
+      <MultiFileList
+        files={ files || previewFiles }
+        onChange={ onChange }
+        uploadingFiles={
+          isEmpty(files) && (uploadingFiles?.length === 0 || isNil(uploadingFiles))
+            ? bufferFiles
+            : uploadingFiles
+        }
+        deleteFile={ deleteFile || handleDelete }
+        confirmDelete={ confirmDelete }
+        enableSmartLoad={ enableSmartLoad }
+        editFileOptions={ editFileOptions }
+        addFile={ addFile }
+      />
+    </Stack>
+  )
+}