@northlight/ui 2.41.0 → 2.41.1

package/lib/components/fast-grid/index.ts

@@ -0,0 +1,2 @@
+export * from './fast-grid'
+export * from './types'

package/lib/components/fast-grid/types.ts

@@ -0,0 +1,26 @@
+import { VariableSizeGridProps } from 'react-window'
+
+export interface FastGridProps
+  extends Omit<
+  VariableSizeGridProps,
+  | 'children'
+  | 'height'
+  | 'width'
+  | 'columnWidth'
+  | 'rowHeight'
+  | 'columnCount'
+  | 'rowCount'
+  > {
+  columnSize: number | ((index: number) => number)
+  rowSize: number | ((index: number) => number)
+  columns: number
+  rows: number
+  children:
+  | JSX.Element
+  | ((rowIndex: number, columnIndex: number) => JSX.Element | string | null)
+  | string
+  width?: number
+  height?: number
+  overscanRowCount?: number
+  overscanColumnCount?: number
+}

package/lib/components/fast-list/fast-list.tsx

@@ -0,0 +1,53 @@
+import React, { LegacyRef, forwardRef } from 'react'
+import { VariableSizeList } from 'react-window'
+import AutoSizer from 'react-virtualized-auto-sizer'
+import { FastListProps } from './types'
+
+/**
+ * Wrapper that renders children in a virtualized stacked layout
+ * @see FastGrid
+ * @see {@link https://northlight.dev/reference/fast-list}
+ *
+ * @example (Example)
+ * (?
+ * <Box h="500px" w="300p" border="1px solid gray" p={ 4 } borderRadius={ 4 }>
+    <FastList itemCount={ 10000 } itemSize={ 30 } overscanCount={ 100 }>
+        { (index) => `item-${index}` }
+    </FastList>
+</Box>
+ * ?)
+ *
+ */
+export const FastList = forwardRef(({
+  itemCount,
+  itemSize,
+  direction = 'column',
+  children,
+  width,
+  height,
+  overscanCount = 0,
+  initialScrollOffset,
+  ...rest
+}: FastListProps, ref: LegacyRef<VariableSizeList<any>>) => (
+  <AutoSizer>
+    { ({ width: autoWidth, height: autoHeight }) => (
+      <VariableSizeList
+        itemCount={ itemCount }
+        itemSize={ typeof itemSize === 'number' ? (_index) => itemSize : itemSize }
+        height={ height ?? autoHeight }
+        width={ width ?? autoWidth }
+        layout={ direction === 'column' ? 'vertical' : 'horizontal' }
+        initialScrollOffset={ initialScrollOffset }
+        overscanCount={ overscanCount }
+        ref={ ref }
+        { ...rest }
+      >
+        { ({ style, index }) => (
+          <div style={ style }>
+            { typeof children === 'function' ? children(index) : children }
+          </div>
+        ) }
+      </VariableSizeList>
+    ) }
+  </AutoSizer>
+))

package/lib/components/fast-list/index.ts

@@ -0,0 +1,2 @@
+export * from './fast-list'
+export * from './types'

package/lib/components/fast-list/types.ts

@@ -0,0 +1,17 @@
+import { StackDirection } from '@chakra-ui/react'
+import { VariableSizeListProps } from 'react-window'
+
+export interface FastListProps
+  extends Omit<
+  VariableSizeListProps,
+  'itemSize' | 'children' | 'height' | 'width' | 'direction'
+  > {
+  itemSize: number | ((index: number) => number)
+  itemCount: number
+  direction?: StackDirection
+  children: JSX.Element | ((index: number) => JSX.Element | string) | string
+  width?: number
+  height?: number
+  initialScrollOffset?: number
+  overscanCount?: number
+}

package/lib/components/file-picker/confirm-delete-modal.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import {
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+} from '../modal'
+import { Button } from '../button'
+import { ConfirmDeleteModalProps } from './types'
+
+export const ConfirmDeleteModal = ({
+  isOpen,
+  onClose,
+  confirmDelete,
+  fileName,
+  ...rest
+}: ConfirmDeleteModalProps) => {
+  const handleDelete = () => {
+    confirmDelete()
+    onClose()
+  }
+
+  return (
+    <Modal isOpen={ isOpen } onClose={ onClose } { ...rest }>
+      <ModalHeader
+        sx={ { fontSize: 'lg' } }
+        overflow="hidden"
+        whiteSpace="nowrap"
+        textOverflow="ellipsis"
+        pr={ 16 }
+      >
+        Delete { fileName }
+      </ModalHeader>
+      <ModalBody>
+        Deleting this file is a permanent action. You will not be able to
+        recover this file at a later time.
+      </ModalBody>
+      <ModalFooter>
+        <Button variant="danger" onClick={ handleDelete }>
+          Delete
+        </Button>
+      </ModalFooter>
+    </Modal>
+  )
+}

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

@@ -0,0 +1,7 @@
+export const fiveHundredMB = 5.24288E8
+export const imageLazyThreshold = 1.572854E7
+export const defaultEditOptions = {
+  canEdit: true,
+  canEditImage: true,
+  canEditName: true,
+}

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

@@ -0,0 +1,105 @@
+import React, { forwardRef, useState } from 'react'
+import AvatarEditor from 'react-avatar-editor'
+import { ZoomInDuo } from '@northlight/icons'
+import { EditableText } from '../editable-text'
+import { Icon } from '../icon'
+import { HStack, Stack } from '../stack'
+import { Box } from '../box'
+import { Button } from '../button'
+import { Slider, SliderFilledTrack, SliderThumb, SliderTrack } from '../slider'
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '../modal'
+import { FormLabel } from '../form-control'
+import { FileEditorModalProps } from './types'
+
+export const FileEditorModal = forwardRef(({
+  fileName,
+  setFileName,
+  isOpen,
+  onClose,
+  image = '',
+  handleCrop,
+  isImage,
+  canEditFileName = true,
+  canCropImage = false,
+  ...rest
+}: FileEditorModalProps, ref: any) => {
+  const [ zoomLevel, setZoomLevel ] = useState(1)
+  const [ position, setPosition ] = useState({ x: 0.5, y: 0.5 })
+
+  const handleClose = () => {
+    setZoomLevel(1)
+    onClose()
+  }
+
+  return (
+    <Modal
+      isOpen={ isOpen }
+      onClose={ onClose }
+      closeOnOverlayClick={ false }
+      { ...rest }
+    >
+      <ModalHeader>Edit { isImage ? 'image' : 'file' }</ModalHeader>
+      <ModalBody
+        display="flex"
+        justifyContent="start"
+        flexDirection="column"
+        alignItems="center"
+        gap={ 4 }
+        minH="300px"
+      >
+        <Stack display={ isImage && canCropImage ? 'inherit' : 'none' }>
+          <AvatarEditor
+            ref={ ref }
+            image={ image || '' }
+            onPositionChange={ (pos) => setPosition(pos) }
+            position={ position }
+            width={ 250 }
+            height={ 250 }
+            border={ 50 }
+            color={ [ 255, 255, 255, 0.7 ] }
+            scale={ zoomLevel }
+            rotate={ 0 }
+          />
+          <HStack w="90%">
+            <FormLabel>Zoom</FormLabel>
+            <Slider
+              aria-label="zoom"
+              defaultValue={ zoomLevel }
+              maxW="50%"
+              min={ 0.1 }
+              step={ 0.05 }
+              max={ 10 }
+              onChange={ (value) => setZoomLevel(value) }
+            >
+              <SliderTrack>
+                <SliderFilledTrack />
+              </SliderTrack>
+              <SliderThumb boxSize={ 6 }>
+                <Icon as={ ZoomInDuo } />
+              </SliderThumb>
+            </Slider>
+          </HStack>
+
+        </Stack>
+        { canEditFileName && (
+        <Stack w="90%" direction={ isImage ? 'row' : 'column' } pt={ 2 }>
+          <FormLabel>Name the file:</FormLabel>
+          <Box maxW="50%">
+            <EditableText onSubmit={ (v) => setFileName(v) } value={ fileName } size="sm" />
+          </Box>
+        </Stack>
+        ) }
+      </ModalBody>
+      <ModalFooter>
+        <HStack>
+          <Button variant="danger" onClick={ handleClose }>
+            Cancel
+          </Button>
+          <Button variant="success" onClick={ handleCrop }>
+            Save
+          </Button>
+        </HStack>
+      </ModalFooter>
+    </Modal>
+  )
+})

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

@@ -0,0 +1,14 @@
+import React from 'react'
+import { IconButton } from '../icon-button'
+import { Icon } from '../icon'
+import { FileIconButtonProps } from './types'
+
+export const FileIconButton = ({
+  icon,
+  color = 'unset',
+  ...rest
+}: FileIconButtonProps) => (
+  <IconButton variant="ghost" size="sm" { ...rest }>
+    <Icon as={ icon } boxSize="24px" color={ color } />
+  </IconButton>
+)

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

@@ -0,0 +1,207 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { identity } from 'ramda'
+import { useMultiStyleConfig } from '@chakra-ui/react'
+import { DownloadDuo, EditBoxDuo, FileBlankDuo, Image03Duo } from '@northlight/icons'
+import AvatarEditor from 'react-avatar-editor'
+import { Icon } from '../icon'
+import { SlideFade } from '../transitions'
+import { P } from '../typography'
+import { HStack, Stack } from '../stack'
+import { convertBlobToFile, getImageAsFile, handleDownload, isFileImage, readableFileSize } from './utils'
+import { Box } from '../box'
+import { Image as ChakraImage } from '../image'
+import { useDisclosure } from '../../hooks'
+import { CloseButton } from '../close-button'
+import { LoadingBar } from '../progress'
+import { ConfirmDeleteModal } from './confirm-delete-modal'
+import { FileEditorModal } from './file-editor-modal'
+import { FileIconButton } from './file-icon-button'
+import { FileFormat, FileItemProps } from './types'
+import { defaultEditOptions } from './constants'
+
+export function FileItem<T extends FileFormat> ({
+  onChangeCallback,
+  addFile = identity,
+  deleteFile,
+  file,
+  confirmDelete = true,
+  isLazy = false,
+  editFileOptions = defaultEditOptions,
+}: FileItemProps<T>) {
+  const { canEdit, canEditImage, canEditName } = editFileOptions
+  const { fileItem } = useMultiStyleConfig('FilePicker')
+  const editModalDisclosure = useDisclosure()
+  const deleteModalDisclosure = useDisclosure()
+  const imageEditorRef = useRef<AvatarEditor>(null)
+  const [ fileName, setFileName ] = useState('')
+  const [ show, setShow ] = useState(true)
+  const [ hasLoaded, setHasLoaded ] = useState(false)
+  const [ loadingImage, setLoadingImage ] = useState(true)
+
+  useEffect(() => {
+    if (file.src) {
+      const buffer = new Image()
+      buffer.src = file.src
+      buffer.onload = () => {
+        setLoadingImage(false)
+      }
+    }
+  }, [ file.isUploading ])
+
+  const handleCrop = async () => {
+    if (imageEditorRef.current && isFileImage(file)) {
+      const canvas = imageEditorRef.current.getImageScaledToCanvas()
+      canvas.toBlob(async (blob) => {
+        if (file && blob) {
+          const newFile = convertBlobToFile(blob, fileName || file.name, file.type)
+          deleteFile(file)
+          addFile(newFile, file._id)
+          onChangeCallback([ newFile ])
+        }
+      })
+      editModalDisclosure.onClose()
+    } else if (file.src) {
+      const newFile = await getImageAsFile(file, fileName)
+      deleteFile(file)
+      addFile(newFile, file._id)
+      onChangeCallback([ newFile ])
+    }
+  }
+
+  const clearImage = () => {
+    setShow(false)
+    setTimeout(() => {
+      deleteFile(file)
+    }, 500)
+  }
+
+  return (
+    <SlideFade
+      in={ show }
+      direction="left"
+      offset={ 30 }
+      enterDuration={ !isLazy ? 300 : 1 }
+      exitDuration={ 300 }
+    >
+      <Box sx={ fileItem }>
+        <HStack
+          w="full"
+          h="full"
+          borderRadius={ 6 }
+          alignItems="center"
+          justifyContent="space-between"
+          px={ 2 }
+          pt={ file.isUploading && !hasLoaded ? 2 : 0 }
+        >
+          <HStack spacing={ 4 } alignItems="start" maxW="50%">
+            { isFileImage(file)
+              ? file.isUploading || loadingImage
+                ? (
+                  <Icon
+                    as={ Image03Duo }
+                    bgColor="gray.100"
+                    color="gray.400"
+                    boxSize="10"
+                    borderRadius="8"
+                    p="2"
+                  />
+                )
+                : (
+                  <ChakraImage
+                    src={ file.src || '' }
+                    alt="preview-image"
+                    objectFit="cover"
+                    display={ file.src ? 'inherit' : 'none' }
+                    borderRadius="8"
+                    boxSize="10"
+                  />
+                )
+              : (
+                <Icon
+                  as={ FileBlankDuo }
+                  boxSize="10"
+                  p="1"
+                  color="gray.300"
+                />
+              )
+          }
+            <Stack
+              alignItems="start"
+              justifyContent="start"
+              spacing="0"
+              maxW="100%"
+            >
+              <P
+                variant="14"
+                whiteSpace="nowrap"
+                textOverflow="ellipsis"
+                overflow="hidden"
+                maxW="100%"
+              >
+                { file?.name }
+              </P>
+              <P variant="14" sx={ { color: 'gray.400' } }>
+                { file?.size && readableFileSize(file.size) }
+              </P>
+            </Stack>
+          </HStack>
+          <HStack
+            spacing="3"
+            justifyContent="center"
+            borderRadius="6"
+            bgColor="bg.filled"
+            display={ file.isUploading ? 'none' : 'flex' }
+            p="1"
+          >
+            { canEdit && (
+            <FileIconButton
+              aria-label="Edit-image"
+              onClick={ editModalDisclosure.onOpen }
+              icon={ EditBoxDuo }
+            />
+            ) }
+            <FileIconButton
+              aria-label="download-image"
+              onClick={ handleDownload(file) }
+              icon={ DownloadDuo }
+            />
+            <CloseButton
+              onClick={ confirmDelete ? deleteModalDisclosure.onOpen : clearImage }
+            />
+          </HStack>
+        </HStack>
+        <Box
+          w="full"
+          pl="16"
+          pr="4"
+          pb="2"
+          mt="-2"
+          display={ file.isUploading ? 'block' : 'none' }
+        >
+          <LoadingBar
+            loaded={ file.size ? (file?.uploaded || 0) / file.size : 0 }
+            onLoadEnd={ () => setHasLoaded(true) }
+          />
+        </Box>
+        { canEdit && (
+        <FileEditorModal
+          { ...editModalDisclosure }
+          fileName={ fileName || file.name }
+          setFileName={ setFileName }
+          image={ file.src }
+          canCropImage={ canEditImage }
+          canEditFileName={ canEditName }
+          handleCrop={ handleCrop }
+          isImage={ isFileImage(file) }
+          ref={ imageEditorRef }
+        />
+        ) }
+        <ConfirmDeleteModal
+          { ...deleteModalDisclosure }
+          confirmDelete={ clearImage }
+          fileName={ fileName || file.name }
+        />
+      </Box>
+    </SlideFade>
+  )
+}

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

@@ -0,0 +1,73 @@
+import React, { useState } from 'react'
+import { identity } from 'ramda'
+import { Field } from '../form'
+import { FilePicker } from './file-picker'
+import { toBase64 } from './utils'
+import { FilePickerFieldProps } from './types'
+
+/**
+ * The file picker component wrapped in a <Field />
+ * meant to be used only inside <Form />
+ * @see FilePicker
+ * @see Field
+ * @see {@link https://northlight.dev/reference/file-picker-field}
+ *
+ * @example (Example)
+ * ## Meant for uploading images in a form
+ * Where they handled as base64 string
+ * (?
+ * <Form initialValues={{image: ''}}>
+ * {({watch}) => (
+ * <Stack>
+ * <FilePickerField name="image" />
+ * <Code maxH="xs" overflowY="scroll">{JSON.stringify(watch(), null, 2)}</Code>
+ * </Stack>
+ * )}
+ * </Form>
+ *
+ * ?)
+ *
+ */
+export const FilePickerField = ({
+  name,
+  label,
+  direction,
+  isRequired,
+  validate,
+  onChange: onChangeCallback = identity,
+  ...rest
+}: FilePickerFieldProps) => {
+  const [ uploaded, setUploaded ] = useState(0)
+
+  return (
+    <Field
+      name={ name }
+      label={ label }
+      direction={ direction }
+      isRequired={ isRequired }
+      validate={ validate }
+    >
+      { ({ onChange, value }) => (
+        <FilePicker
+          onChange={ async (file: File | null) => {
+            if (file) {
+              const formattedFile = await toBase64(file)
+              setUploaded(1)
+              onChange(formattedFile)
+              onChangeCallback(formattedFile)
+            } else {
+              setUploaded(0)
+              onChange(null)
+              onChangeCallback(null)
+            }
+          } }
+          value={ value }
+          uploaded={ value ? 1 : uploaded }
+          loadWithSpinner={ true }
+          acceptFormat="image/*"
+          { ...rest }
+        />
+      ) }
+    </Field>
+  )
+}