@northlight/ui 2.41.0 → 2.41.1

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

@@ -0,0 +1,189 @@
+import React, { DragEvent, useEffect, useRef, useState } from 'react'
+import { useMultiStyleConfig } from '@chakra-ui/react'
+import { filter, identity } from 'ramda'
+import { Image03Solid, UploadCloudSolid } from '@northlight/icons'
+import { Box } from '../box'
+import { Icon } from '../icon'
+import { Input } from '../input'
+import {
+  compressImage,
+  createFileObject,
+  createPreviewFileObject,
+  isFileImage,
+  isValidFile,
+  onlyAcceptsImages,
+  readableFileSize,
+} from './utils'
+import { Clickable } from '../clickable'
+import { HStack, Stack } from '../stack'
+import { Lead, P } from '../typography'
+import { fiveHundredMB } from './constants'
+import { FileFormat, MultiFileUploaderProps } from './types'
+import { useCurrentTheme } from '../../utils'
+
+/**
+ * Input to upload multiple files without ui to render files
+ * @see MultiFilePicker
+ * @see {@link https://northlight.dev/reference/multi-file-uploader}
+ * @example
+ * (?
+ * () => {
+ * const [ images, setImages ] = useState([])
+ * return (
+ * <Stack>
+    <Box h="sm">
+      <Carousel>
+        { images.map((imageSrc) => (
+          <Image src={imageSrc} borderRadius="md" />
+        )) }
+      </Carousel>
+    </Box>
+    <MultiFileUploader
+      acceptFormat="image/*"
+      onChange={ (newFiles) =>
+        setImages(
+          newFiles.map((file) => URL.createObjectURL(file))
+        )
+      }
+    />
+    </Stack>
+ * )
+ * }
+ * ?)
+ *
+ */
+export function MultiFileUploader<T extends FileFormat> ({
+  acceptFormat = '*',
+  compression,
+  onChange = identity,
+  addFilesToQueue = identity,
+  updatePreviewFiles = identity,
+  maxFileSize = fiveHundredMB,
+  ...rest
+}: MultiFileUploaderProps<T>) {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [ isInvalid, setIsInvalid ] = useState(false)
+  const currentTheme = useCurrentTheme()
+  const { multiFilePicker } = useMultiStyleConfig('FilePicker', { isInvalid, currentTheme, ...rest })
+  const [ active, setActive ] = useState(false)
+  const [ errorMessage, setErrorMessage ] = useState('')
+
+  const onlyImageAccepted = onlyAcceptsImages(acceptFormat)
+
+  useEffect(() => {
+    if (isInvalid) {
+      setTimeout(() => {
+        setIsInvalid(false)
+      }, 1500)
+    }
+  }, [ isInvalid ])
+
+  const toggleHover = () => {
+    setActive((prev) => !prev)
+  }
+
+  const handleClick = () => {
+    if (inputRef.current) {
+      inputRef.current.click()
+    }
+  }
+
+  const updateMultipleFiles = async (newFiles: FileList) => {
+    const filesArr: File[] = Array.prototype.slice.call(newFiles)
+    const validFiles = filter((file) => {
+      const fileCheck = isValidFile(file, acceptFormat, maxFileSize)
+      if (!fileCheck.isValid) {
+        setErrorMessage(fileCheck.errorMessage || '')
+      }
+      return fileCheck.isValid
+    }, filesArr)
+    if (filesArr.length > 0 && validFiles.length === 0) {
+      setIsInvalid(true)
+    }
+
+    addFilesToQueue(validFiles.map((file) => createFileObject(file)))
+    updatePreviewFiles(validFiles.map((file) => createPreviewFileObject(file)))
+    const compressedFiles = validFiles.map(
+      async (file) => (isFileImage(file)
+        ? compressImage(
+          file,
+          compression?.width,
+          compression?.height,
+          compression?.quality
+        ) as File
+        : file)
+    )
+    Promise.all(compressedFiles).then((values) => {
+      onChange(values)
+      if (inputRef.current) {
+        inputRef.current.value = ''
+      }
+    })
+  }
+
+  const handleDrop = (e: DragEvent) => {
+    e.preventDefault()
+    updateMultipleFiles(e.dataTransfer.files)
+  }
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) {
+      updateMultipleFiles(e.target.files)
+    }
+  }
+  return (
+    <Clickable
+      onClick={ handleClick }
+      onDragOver={ (e: DragEvent) => e.preventDefault() }
+      onDrop={ handleDrop }
+      onMouseEnter={ toggleHover }
+      onMouseLeave={ toggleHover }
+    >
+      <Box sx={ multiFilePicker } { ...rest }>
+        <Stack
+          alignItems="center"
+          justifyContent="center"
+          h="full"
+          w="full"
+          spacing={ 0 }
+        >
+          <Icon
+            as={ onlyImageAccepted ? Image03Solid : UploadCloudSolid }
+            boxSize="32px"
+            color={
+            isInvalid
+              ? 'destructive'
+              : active
+                ? 'brand'
+                : 'text.subdued'
+            }
+            aria-label="image-icon-upload"
+            mb={ onlyImageAccepted ? '0a' : 0 }
+          />
+          <HStack spacing={ 1 } display={ isInvalid ? 'none' : 'flex' }>
+            <P variant="14" textAlign="center" alignSelf="center">
+              Drag & drop { onlyImageAccepted ? 'images' : 'files' } here or
+            </P>
+            <Lead sx={ { textDecoration: 'underline', color: 'brand' } }>
+              choose { onlyImageAccepted ? 'image' : 'file' }
+            </Lead>
+          </HStack>
+          <P variant="14" textAlign="center" alignSelf="center" display={ isInvalid ? 'initial' : 'none' }>
+            { errorMessage }
+          </P>
+          <P variant="14" sx={ { color: 'gray.400' } }>
+            Max file size is { readableFileSize(maxFileSize) }
+          </P>
+        </Stack>
+        <Input
+          type="file"
+          display="none"
+          accept={ acceptFormat }
+          onChange={ handleChange }
+          multiple={ true }
+          ref={ inputRef }
+        />
+      </Box>
+    </Clickable>
+  )
+}

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

@@ -0,0 +1,132 @@
+import { ComponentType } from 'react'
+import { BoxProps, IconButtonProps, StackDirection, StackProps } from '@chakra-ui/react'
+import { RegisterOptions } from 'react-hook-form'
+import { ModalProps } from '../modal/types'
+import { ButtonVariants } from '../button/types'
+
+interface CompressionType {
+  width: number
+  height: number
+  quality: number
+}
+
+interface EditFileOptionsType {
+  canEdit: boolean
+  canEditImage: boolean
+  canEditName: boolean
+}
+
+export interface FileFormat {
+  src: string | null
+  name: string
+  type: string
+  _id: string
+  isLazy?: boolean
+  size: number | null
+  isUploading?: boolean
+  uploaded?: number
+  lastModified?: number
+}
+
+export type FileWithType = Pick<FileFormat, 'type'>
+
+export type FileWithSrcNameType = Pick<FileFormat, 'src' | 'name' | 'type'>
+
+export type FileWithSizeAndType = Pick<FileFormat, 'type' | 'size'>
+
+export type ModalBooleans = {
+  canCropImage?: boolean
+  canEditFile?: boolean
+  confirmDelete?: boolean
+  canEditFileName?: boolean
+}
+export interface FilePickerProps extends Omit<StackProps, 'onChange'> {
+  /** Ex: acceptFormat="'acceptFormat="video/*, .jpg" */
+  acceptFormat?: string
+  onChange?: (image: File | null) => void
+  compression?: CompressionType
+  isUploading?: boolean
+  uploaded?: number
+  maxFileSize?: number
+  value?: string | null
+  loadWithSpinner?: boolean
+  variant?: 'ai'
+  /** Will upon a popup modal for the user to click another button to triggr delte callback */
+  confirmDelete?: boolean
+  editFileOptions?: EditFileOptionsType
+  showProgress?: boolean
+}
+
+export interface FilePickerFieldProps extends Omit<FilePickerProps, 'onChange'> {
+  name: string
+  label: string
+  validate?: RegisterOptions
+  isRequired?: boolean
+  direction?: StackDirection
+  onChange?: (File: string | null) => void
+}
+export interface MultiFilePickerFieldProps extends Omit<FilePickerFieldProps, 'onChange'> {
+  onChange?: (File: string[]) => void
+}
+export interface MultiFilePickerProps<T extends FileFormat> extends Omit<FilePickerProps, 'onChange'>, Omit<StackProps, 'onChange'> {
+  onChange?: (files: File[]) => void
+  compression?: CompressionType
+  files?: T[] | null
+  uploadingFiles?: T[]
+  deleteFile?: ((file: T | FileFormat) => void) | null
+  enablePreLoad?: boolean
+  enableSmartLoad?: boolean
+  confirmDelete?: boolean
+  variant?: 'ai'
+}
+
+export interface MultiFileUploaderProps<T extends FileFormat> extends Omit<BoxProps, 'onChange'> {
+  /** Ex: acceptFormat="'acceptFormat="video/*, .jpg" */
+  variant?: 'ai'
+  acceptFormat?: string
+  compression?: CompressionType
+  maxFileSize?: number
+  /** Callback Will immediately return file objects before compressed */
+  addFilesToQueue?: (files: T[]) => void
+  updatePreviewFiles?: (files: any[]) => void
+  onChange?: (files: File[]) => void
+}
+export interface MultiFileListProps<T extends FileFormat> extends Omit<StackProps, 'onChange'> {
+  files?: T[]
+  uploadingFiles?: T[]
+  deleteFile?: (file: T | FileFormat) => void
+  onChange?: (files: File[]) => void
+  addFile?: (file: File, id: string) => void
+  enableSmartLoad?: boolean
+  editFileOptions?: EditFileOptionsType
+  confirmDelete?: boolean
+}
+
+export interface FileItemProps<T> {
+  file: T | FileFormat
+  deleteFile: (file: T | FileFormat) => void
+  onChangeCallback: (files: File[]) => void
+  addFile?: (file: File, id: string) => void
+  isLazy?: boolean
+  editFileOptions?: EditFileOptionsType
+  confirmDelete?: boolean
+}
+export interface ConfirmDeleteModalProps extends Omit<ModalProps, 'children'> {
+  confirmDelete: () => void
+  fileName: string
+}
+
+export interface FileEditorModalProps extends Omit<ModalProps, 'children'> {
+  fileName: string
+  canEditFileName?: boolean
+  canCropImage?: boolean
+  isImage: boolean
+  handleCrop: () => void
+  image: File | string | null
+  setFileName: (value: string) => void
+}
+
+export interface FileIconButtonProps extends Omit<IconButtonProps, 'icon' | 'ButtonVariants'> {
+  icon: ComponentType<any>
+  variant?: ButtonVariants
+}

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

@@ -0,0 +1,283 @@
+import {
+  all,
+  difference,
+  has,
+  intersection,
+  isEmpty,
+  last,
+  split,
+  test,
+  trim,
+} from 'ramda'
+import { imageLazyThreshold } from './constants'
+import {
+  FileFormat,
+  FileWithSizeAndType,
+  FileWithSrcNameType,
+  FileWithType,
+} from './types'
+
+export const getResizingFactor = (
+  imgWidth: number,
+  imgHeight: number,
+  maxWidth: number,
+  maxHeight: number
+) => Math.min(1, Math.min(maxWidth / imgWidth, maxHeight / imgHeight))
+
+export const convertBlobToFile = (
+  blob: Blob,
+  name: string,
+  type: string
+) => new File([ blob ], name, { type })
+
+export const compressImage = (
+  file: File,
+  maxWidth = 3000,
+  maxHeight = 3000,
+  quality = 0.75
+) => {
+  const canvas = document.createElement('canvas')
+  const context = canvas.getContext('2d')
+  if (!context) return file
+
+  const imageBuffer = new Image()
+  imageBuffer.src = URL.createObjectURL(file as File)
+
+  return new Promise((resolve) => {
+    imageBuffer.onload = () => {
+      const resizingFactor = getResizingFactor(
+        imageBuffer.width,
+        imageBuffer.height,
+        maxWidth,
+        maxHeight
+      )
+      const scaledWidth = imageBuffer.width * resizingFactor
+      const scaledHeight = imageBuffer.height * resizingFactor
+      canvas.width = scaledWidth
+      canvas.height = scaledHeight
+      context.drawImage(imageBuffer, 0, 0, scaledWidth, scaledHeight)
+      canvas.toBlob(
+        (blob) => {
+          if (file && blob) {
+            const newImage = convertBlobToFile(blob, file.name, file.type)
+            resolve(newImage)
+          } else {
+            resolve(file)
+          }
+        },
+        'image/jpeg',
+        quality
+      )
+    }
+  })
+}
+
+export const readableFileSize = (size: number) => {
+  if (size <= 0) return 0
+  const i = Math.floor(Math.log(size) / Math.log(1024))
+  return `${(size / 1024 ** i).toFixed(1)} ${
+    [ 'B', 'kB', 'MB', 'GB', 'TB' ][i]
+  }`
+}
+
+export const getImageAsFile = async <T extends FileWithSrcNameType>(
+  image: T,
+  name?: string
+): Promise<File> =>
+  fetch(image.src as string)
+    .then((res) => res.blob())
+    .then(
+      (blob) =>
+        new Promise((resolve) => {
+          const newImage = convertBlobToFile(blob, name || image.name, image.type)
+          resolve(newImage)
+        })
+    )
+
+const getFormatsAsArray = (acceptFormat: string) =>
+  split(',', acceptFormat)
+    .map((format) => trim(format))
+
+export const getAcceptedExtensions = (acceptFormat: string) =>
+  getFormatsAsArray(acceptFormat)
+    .filter((format) => test(/^\./, format))
+    .map((format) => format.substring(1))
+
+export const getAcceptedFormats = (acceptFormat: string) =>
+  getFormatsAsArray(acceptFormat)
+    .filter((format) => test(/\//, format))
+    .map((format) => split('/', format)[0])
+
+const getFileExtension = <T extends FileWithType> (file: T) => last(split('/', file.type)) as string
+
+const getFileFormat = <T extends FileWithType> (file: T) => split('/', file.type)[0]
+
+export const validFileFormat = <T extends FileWithType> (
+  file: T,
+  acceptFormat: string
+) => (
+    acceptFormat === '*'
+|| getAcceptedFormats(acceptFormat).includes(getFileFormat(file))
+|| getAcceptedExtensions(acceptFormat).includes(getFileExtension(file))
+  )
+
+export const isValidFile = <T extends FileWithSizeAndType> (
+  file:T,
+  acceptFormat: string,
+  maxFileSize: number
+) => {
+  const isValid =
+    file.size as number < maxFileSize
+    && validFileFormat(file, acceptFormat)
+
+  return {
+    isValid,
+    errorMessage: file.size as number > maxFileSize
+      ? 'File size is too big'
+      : isValid
+        ? ''
+        : 'File format not supported',
+  }
+}
+
+export function getNewUploadingFiles<T extends FileFormat> (
+  prev: T[],
+  curr: T[],
+  files: T[]
+) {
+  let buffer = prev
+  const prevIDs = prev ? prev.map((file) => file.name) : null
+  const currentIDs = curr ? curr.map((file) => file.name) : null
+  const removedItemsIDs =
+    prevIDs && currentIDs && difference(prevIDs, currentIDs)
+  const filesIDs = files.map((file) => file.name)
+
+  if (removedItemsIDs) {
+    if (
+      removedItemsIDs.length === 0 ||
+      intersection(removedItemsIDs, filesIDs).length > 0
+    ) {
+      buffer = curr
+    } else {
+      buffer.forEach((value, index) => {
+        if (removedItemsIDs.includes(value.name)) {
+          const updatedData = { ...value,
+            uploaded: has('size', value) ? value.size : 0 }
+          buffer[index] = updatedData
+        }
+      }
+      )
+    }
+  } else {
+    buffer = curr
+  }
+  return buffer
+}
+
+export const generateId = () => Math.random().toString().substring(3)
+
+export const isFile = (file: any) => 'File' in window && file instanceof File
+
+export const isFileImage = <T extends FileWithType>(file: T) => {
+  if (isFile(file)) {
+    return getFileFormat(file) === 'image'
+  }
+  switch (getFileFormat(file)) {
+    case 'image':
+    case 'jpeg':
+    case 'jpg':
+    case 'png':
+    case 'gif':
+    case 'tiff':
+    case 'jfif':
+      return true
+    default:
+      return false
+  }
+}
+
+export const onlyAcceptsImages = (acceptFormat: string) => {
+  if (acceptFormat === '*' || acceptFormat === '') {
+    return false
+  }
+  const formats = getAcceptedFormats(acceptFormat)
+  const extensions = getAcceptedExtensions(acceptFormat)
+
+  const premiseOne = isEmpty(formats) || all((type: string) => type === 'image', formats)
+
+  const premiseTwo = isEmpty(extensions)
+  || all((type: string) => isFileImage({ type }), extensions)
+
+  return premiseOne && premiseTwo
+}
+
+export const createFileObject = <T extends FileFormat>(file: File): T => {
+  const fileId = generateId()
+  const fileObject = {
+    _id: fileId,
+    size: null,
+    src: null,
+    type: file.type,
+    name: file.name,
+    isUploading: true,
+    isLazy: file.size > imageLazyThreshold && isFileImage(file),
+  }
+  return fileObject as T
+}
+
+export const createPreviewFileObject = <T extends FileFormat>(file: File): T => {
+  const fileId = generateId()
+  const fileObject = {
+    _id: fileId,
+    size: file.size,
+    src: URL.createObjectURL(file),
+    type: file.type,
+    name: file.name,
+    isUploading: false,
+    isLazy: false,
+  }
+  return fileObject as T
+}
+
+export const createFileObjectFromSrc = <T extends FileWithSrcNameType>(file: T) => {
+  const fileId = generateId()
+  const fileObject = {
+    _id: fileId,
+    size: null,
+    src: file.src,
+    type: file.type,
+    name: file.name,
+    isUploading: false,
+    isLazy: false,
+  }
+  return fileObject
+}
+
+export const isOverflowing = (element: Element) => (element
+  ? element.scrollHeight > element.clientHeight
+  : false
+)
+
+export const toBase64 = (file: File): Promise<string> => new Promise((resolve, reject) => {
+  const reader = new FileReader()
+  reader.readAsDataURL(file)
+  reader.onload = () => resolve(reader.result as string)
+  reader.onerror = (error) => reject(error)
+})
+
+const correctFileExtension = (str: string) => test(/./g, str)
+
+const getFileFormattedName = (file: File | FileFormat) => (correctFileExtension(file.name)
+  ? file.name
+  : `${file.name}.${getFileExtension(file)}`)
+export const handleDownload = (file:
+File | FileFormat | null | string | FileFormat
+) => () => {
+  if (!file) return
+  const anchor = document.createElement('a')
+  anchor.href = isFile(file) ? URL.createObjectURL(file as File) : (file as FileFormat).src || ''
+  anchor.download = isFile(file)
+    ? 'downloaded-file.jpg'
+    : getFileFormattedName(file as File)
+  anchor.click()
+}

package/lib/components/flex/index.ts

@@ -0,0 +1,4 @@
+export {
+  Flex,
+  Spacer,
+} from '@chakra-ui/react'

package/lib/components/flip-button/flip-button-group-field.tsx

@@ -0,0 +1,58 @@
+import React, { forwardRef } from 'react'
+import { identity } from 'ramda'
+import { Field } from '../form'
+import { FlipButtonGroup } from './flip-button-group'
+import { FlipButtonGroupFieldProps } from './types'
+
+/**
+ * The FlipButtonGroup component wrapped in a <Field />
+ * meant to be used only inside <Form />
+ * @see FlipButton
+ * @see {@link https://northlight.dev/reference/flip-button-group-field}
+ *
+ * @example (Example)
+ * (?
+ * <Form intitialValues={{foods: 'pizza'}}>
+          <FlipButtonGroupField name="foods" label="Select the food you enjoy most" variant="brand">
+            <FlipButton value="pizza">Pizza</FlipButton>
+            <FlipButton value="hamburger">Button</FlipButton>
+            <FlipButton value="steak">Steak</FlipButton>
+          </FlipButtonGroupField>
+ * </Form>
+ *
+ * ?)
+ *
+ */
+export const FlipButtonGroupField = forwardRef<HTMLDivElement, FlipButtonGroupFieldProps>(({
+  name,
+  label,
+  children,
+  direction,
+  isRequired,
+  iconPlacement = 'left',
+  onChange: onChangeCallback = identity,
+  validate,
+  ...rest
+}, ref) => (
+  <Field
+    name={ name }
+    label={ label }
+    direction={ direction }
+    isRequired={ isRequired }
+    validate={ validate }
+    ref={ ref }
+  >
+    { ({ onChange, value }) => (
+      <FlipButtonGroup
+        name={ name }
+        onChange={ (e) => { onChange(e); onChangeCallback(e) } }
+        direction={ direction }
+        value={ value }
+        iconPlacement={ iconPlacement }
+        { ...rest }
+      >
+        { children }
+      </FlipButtonGroup>
+    ) }
+  </Field>
+))