feat: add much more customisable FileUpload component

[karrui]

This PR adds a new FileUpload component that is designed to supersede the Attachment component. This component is much more customisable if needed, and contains a few prop changes as compared to Attachment.

Closes #586 (above and beyond?)

Example usages can be seen in the stories, but replicated here for convenience:

Default usage (with rhf)

const DefaultUsage = () => {
  const { control } = useForm<{ files: File[] }>()

  return (
    <Controller
      control={control}
      name="files"
      render={({ field: { value, onChange, ...field } }) => (
        <FileUpload
          maxFiles={1} // Or more if you want multiple upload. Defaults to 1
          maxFileSize={1 * 1024} // In bytes
          accept="image/*" // Or use mime type and array, see https://zagjs.com/components/react/file-upload
          value={value}
          // Note use of onFileAccept instead of onChange
          // Also has `onFileReject` props for handling rejected files,
          // `onError` props for easy handling of error messages from the rejected files
          onFileAccept={({ files }) => onChange(files)}
          {...field}
        />
      )}
    />
  )
}

With parts ownself modify

export const WithParts = (args: FileUploadRootProps) => {
  return (
    <FileUpload.Root {...args}>
      <FileUpload.Dropzone>
        <FileUpload.DropzoneIcon />
        <FileUpload.Label />
        <FileUpload.DraggingLabel />
      </FileUpload.Dropzone>
      <FileUpload.Context>
        {({ acceptedFiles }) =>
          acceptedFiles.length !== 0 && (
            <FileUpload.ItemGroup>
              {acceptedFiles.map((file, index) => (
                <FileUpload.Item key={`${file.name}-${index}`} file={file}>
                  <FileUpload.ItemPreview type="image/*">
                    <FileUpload.ItemPreviewImage />
                  </FileUpload.ItemPreview>
                  <FileUpload.ItemName />
                  <FileUpload.ItemSizeText />
                  <FileUpload.ItemDeleteTrigger />
                </FileUpload.Item>
              ))}
            </FileUpload.ItemGroup>
          )
        }
      </FileUpload.Context>
      <FileUpload.ErrorText />
      <FileUpload.MaxSizeHelperText />
      {/* MUST be included or the upload dialog will not work */}
      <FileUpload.HiddenInput />
    </FileUpload.Root>
  )
}

[jia1]

Does this mean next time, folks who only want the default options got to use all those FileInput.* elements?

[jia1]

Suggested change

	* @deprecated Use `FileInput` component instead, as that is much more customisable.
	* @deprecated Use `FileUpload` component instead, as that is much more customisable.

[jia1]

Should all Icon have aria-hidden? Saw you had it for FileUploadDropzoneIcon

[jia1]

How does apiRef get utilised / referred to if it isn't returned here?

[jia1]

When does this scenario happen...?

[jia1]

getReadableFileSize(0) returns NaN undefined, but Idk how far you want to go w.r.t. error handling cus setting maxFileSize as 0 is obv the OGP dev fault...

[jia1]

And I suppose technology is not that advanced yet - 1000 TB gives 1 undefined

[jia1]

The component (in storybook) silently rejects files when there are more number of files than allowed. Is this expected?