Add upload component

package.json

@@ -113,7 +113,8 @@
     "typescript": "^5.4.3",
     "vite": "^4.4.3",
     "vitest": "^0.33.0",
-    "zod": "^3.22.4"
+    "zod": "^3.22.4",
+    "axios-mock-adapter": "^1.22.0"
   },
   "peerDependencies": {
     "@aboutbits/react-pagination": "^3.0.3",

src/components/button/ResponsiveButtonIcon.tsx

@@ -0,0 +1,52 @@
+import classNames from 'classnames'
+import { ComponentType, ReactNode } from 'react'
+import { useTheme } from '../../framework'
+import { IconProps } from '../types'
+import { Button, ButtonProps } from './Button'
+import { ButtonIcon, ButtonIconProps } from './ButtonIcon'
+
+export type ResponsiveButtonIconProps = Omit<
+  ButtonProps & ButtonIconProps,
+  'ref' | 'children' | 'icon' | 'iconStart' | 'iconEnd' | 'label'
+> & {
+  label: ReactNode
+} & (
+    | {
+        icon: ComponentType<IconProps>
+        iconEnd?: never
+      }
+    | {
+        icon?: never
+        iconEnd: ComponentType<IconProps>
+      }
+  )
+
+export function ResponsiveButtonIcon({
+  label,
+  className,
+  icon,
+  iconEnd,
+  ...props
+}: ResponsiveButtonIconProps) {
+  const { button } = useTheme()
+  return (
+    <>
+      <Button
+        {...props}
+        iconStart={icon}
+        iconEnd={iconEnd}
+        className={classNames(button.buttonIconResponsive.button, className)}
+      >
+        {label}
+      </Button>
+      <ButtonIcon
+        {...props}
+        icon={icon ?? iconEnd}
+        className={classNames(
+          button.buttonIconResponsive.buttonIcon,
+          className,
+        )}
+      />
+    </>
+  )
+}

src/components/button/theme.ts

@@ -77,6 +77,10 @@ export default {
       },
     },
   },
+  buttonIconResponsive: {
+    button: 'hidden md:flex',
+    buttonIcon: 'md:hidden',
+  },
   modeVariantTone: {
     [Mode.Light]: {
       [ButtonVariant.Solid]: {

src/components/files/DeleteFileAction.tsx

@@ -0,0 +1,44 @@
+import IconDelete from '@aboutbits/react-material-icons/dist/IconDelete'
+import { useState } from 'react'
+import { useInternationalization } from '../../framework'
+import { ButtonVariant } from '../button'
+import { ResponsiveButtonIcon } from '../button/ResponsiveButtonIcon'
+import { IconSpinner } from '../loading/IconSpinner'
+import { Tone } from '../types'
+import { FileUploadObject } from './FileUploadState'
+
+type DeleteFileActionProps<TRemoteFile> = {
+  fileUploadObject: FileUploadObject<TRemoteFile>
+  onDelete: (
+    fileUploadObject: FileUploadObject<TRemoteFile>,
+  ) => void | Promise<void>
+}
+
+export function DeleteFileAction<TRemoteFile>({
+  fileUploadObject,
+  onDelete,
+}: DeleteFileActionProps<TRemoteFile>) {
+  const [isDeleting, setIsDeleting] = useState(false)
+  const { messages } = useInternationalization()
+  return (
+    <>
+      <ResponsiveButtonIcon
+        variant={ButtonVariant.Transparent}
+        tone={Tone.Neutral}
+        disabled={isDeleting}
+        onClick={() => {
+          setIsDeleting(true)
+          Promise.resolve(onDelete(fileUploadObject))
+            .then(() => {
+              setIsDeleting(false)
+            })
+            .catch(() => {
+              setIsDeleting(false)
+            })
+        }}
+        icon={isDeleting ? IconSpinner : IconDelete}
+        label={messages['files.action.delete']}
+      />
+    </>
+  )
+}

src/components/files/DownloadFileAction.tsx

@@ -0,0 +1,23 @@
+import IconDownload from '@aboutbits/react-material-icons/dist/IconDownload'
+import { useInternationalization } from '../../framework'
+import { ButtonVariant } from '../button'
+import {
+  ResponsiveButtonIcon,
+  ResponsiveButtonIconProps,
+} from '../button/ResponsiveButtonIcon'
+import { Tone } from '../types'
+
+export function DownloadFileAction({
+  onClick,
+}: Pick<ResponsiveButtonIconProps, 'onClick'>) {
+  const { messages } = useInternationalization()
+  return (
+    <ResponsiveButtonIcon
+      variant={ButtonVariant.Transparent}
+      tone={Tone.Neutral}
+      icon={IconDownload}
+      onClick={onClick}
+      label={messages['files.action.download']}
+    />
+  )
+}

src/components/files/FileDropZone.stories.tsx

@@ -0,0 +1,44 @@
+import {
+  Controls,
+  Description,
+  Primary,
+  Subheading,
+  Title,
+} from '@storybook/blocks'
+import { Meta, StoryObj } from '@storybook/react'
+import { FileDropZone } from './FileDropZone'
+
+const meta = {
+  component: FileDropZone,
+  argTypes: {
+    fileTypes: {
+      options: ['None', 'pdf', 'jpg, png, gif'],
+      control: {
+        type: 'select',
+      },
+      mapping: {
+        None: undefined,
+        pdf: ['pdf'],
+        'jpg, png, gif': ['jpg', 'png', 'gif'],
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <Subheading>Props</Subheading>
+          <Controls />
+        </>
+      ),
+    },
+  },
+} satisfies Meta<typeof FileDropZone>
+
+export default meta
+type Story = StoryObj<typeof FileDropZone>
+
+export const Default: Story = {}

src/components/files/FileDropZone.tsx

@@ -0,0 +1,115 @@
+import IconUploadFile from '@aboutbits/react-material-icons/dist/IconUploadFile'
+import classNames from 'classnames'
+import { ChangeEventHandler, useRef } from 'react'
+import { useInternationalization, useTheme } from '../../framework'
+import { ClassNameProps } from '../types'
+import { useFileDropZone } from './useFileDropZone'
+import { useHumanReadableFileSize } from './utils'
+
+export type FileDropZoneProps = {
+  fileTypes?: string[]
+  disabled?: boolean
+  maxFileSize?: number
+  className?: string
+} & (
+  | { multipleFiles?: false; onSelect?: (file: File) => void }
+  | { multipleFiles: true; onSelect?: (files: File[]) => void }
+) &
+  ClassNameProps
+
+export function FileDropZone({
+  fileTypes,
+  multipleFiles,
+  disabled = false,
+  onSelect,
+  maxFileSize,
+  className,
+}: FileDropZoneProps) {
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const handleFilesChange: ChangeEventHandler<HTMLInputElement> = ({
+    target,
+  }) => {
+    if (!inputRef.current) {
+      throw new Error('FileUpload: No input element specified!')
+    }
+
+    const files = Array.from(target.files ?? [])
+
+    if (multipleFiles) {
+      onSelect?.(files)
+    } else if (files[0]) {
+      onSelect?.(files[0])
+    }
+
+    target.value = ''
+  }
+
+  const { files } = useTheme()
+
+  const { messages } = useInternationalization()
+
+  const formatFileSize = useHumanReadableFileSize()
+
+  const { dropZoneRef, isFileHovering } = useFileDropZone<HTMLButtonElement>({
+    disabled,
+    inputRef,
+  })
+
+  return (
+    <div className={files.fileDropzone.container.base}>
+      <input
+        type="file"
+        ref={inputRef}
+        multiple={multipleFiles}
+        accept={fileTypes?.map((fileType) => `.${fileType}`).join(',')}
+        onChange={handleFilesChange}
+        disabled={disabled}
+        hidden
+      />
+      <button
+        ref={dropZoneRef}
+        type="button"
+        onClick={() => inputRef.current?.click()}
+        className={classNames(
+          files.fileDropzone.uploadButton.base,
+          isFileHovering && files.fileDropzone.uploadButton.fileHovering,
+          className,
+        )}
+      >
+        <div
+          className={classNames(
+            files.icon.container.base,
+            files.icon.container.default,
+          )}
+        >
+          <IconUploadFile
+            className={classNames(files.icon.size, files.icon.default)}
+          />
+        </div>
+        <div className={files.text.base}>
+          <div>
+            <span className={files.text.underline}>
+              {messages['files.dropzone.description.part1.text']}
+            </span>
+            {messages['files.dropzone.description.part2.text']}
+          </div>
+          <div className={files.text.info}>
+            {fileTypes && fileTypes.length > 0 && (
+              <>
+                {messages['files.dropzone.allowedFileTypes.text']}{' '}
+                {fileTypes.join(', ')}{' '}
+              </>
+            )}
+            {maxFileSize && (
+              <>
+                ({messages['files.dropzone.maxFileSize.text']}{' '}
+                {formatFileSize(maxFileSize)})
+              </>
+            )}
+          </div>
+        </div>
+      </button>
+    </div>
+  )
+}

src/components/files/FileList.tsx

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react'
+import { useTheme } from '../../framework'
+
+export type FileListProps = PropsWithChildren
+
+export function FileList({ children }: FileListProps) {
+  const { files } = useTheme()
+  return <div className={files.fileList.container}>{children}</div>
+}