Utils and input with list (work in progress)

packages/react/src/common/formatFileSize.test.tsx

@@ -0,0 +1,27 @@
+import { formatFileSize } from './formatFileSize'
+
+describe('formatFileSize', () => {
+  it('formats bytes correctly', () => {
+    expect(formatFileSize(500)).toBe('500B')
+  })
+
+  it('formats kilobytes correctly', () => {
+    expect(formatFileSize(1024, 1)).toBe('1KB')
+    expect(formatFileSize(2048, 1)).toBe('2KB')
+  })
+
+  it('formats megabytes correctly', () => {
+    expect(formatFileSize(1048576, 1)).toBe('1MB')
+    expect(formatFileSize(2097152, 1)).toBe('2MB')
+  })
+
+  it('formats gigabytes correctly', () => {
+    expect(formatFileSize(1073741824, 1)).toBe('1GB')
+    expect(formatFileSize(2147483648, 1)).toBe('2GB')
+  })
+
+  it('formats terabytes correctly', () => {
+    expect(formatFileSize(1099511627776, 1)).toBe('1TB')
+    expect(formatFileSize(2199023255552, 1)).toBe('2TB')
+  })
+})

packages/react/src/common/formatFileType.test.tsx

@@ -0,0 +1,29 @@
+import { formatFileType } from './formatFileType'
+
+describe('formatFileType', () => {
+  it('formats image types correctly', () => {
+    expect(formatFileType('image/gif')).toBe('gif')
+    expect(formatFileType('image/jpeg')).toBe('jpg')
+    expect(formatFileType('image/png')).toBe('png')
+  })
+
+  it('formats text types correctly', () => {
+    expect(formatFileType('text/plain')).toBe('txt')
+  })
+
+  it('formats application types correctly', () => {
+    expect(formatFileType('application/pdf')).toBe('pdf')
+    expect(formatFileType('application/msword')).toBe('Word')
+    expect(formatFileType('application/vnd.openxmlformats-officedocument.wordprocessingml.document')).toBe('Word')
+    expect(formatFileType('application/vnd.ms-excel')).toBe('Excel')
+    expect(formatFileType('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')).toBe('Excel')
+    expect(formatFileType('application/vnd.ms-powerpoint')).toBe('PowerPoint')
+    expect(formatFileType('application/vnd.openxmlformats-officedocument.presentationml.presentation')).toBe(
+      'PowerPoint',
+    )
+  })
+
+  it('returns the original file type for unknown types', () => {
+    expect(formatFileType('unknown/type')).toBe('unknown/type')
+  })
+})

storybook/src/components/FileList/FileInputWithFileList.tsx

@@ -0,0 +1,20 @@
+import { FileInput, FileList } from '@amsterdam/design-system-react'
+import { useRef, useState } from 'react'
+
+export const FileInputWithFileList = () => {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [files, setFiles] = useState<FileList | null>(null)
+
+  const handleFilesChange = () => {
+    if (inputRef.current) {
+      setFiles(inputRef.current.files)
+    }
+  }
+
+  return (
+    <>
+      <FileInput multiple ref={inputRef} onChange={handleFilesChange} />
+      {files && <FileList files={files} />}
+    </>
+  )
+}

storybook/src/components/FileList/FileList.stories.tsx

@@ -5,6 +5,7 @@
 
 import { FileList } from '@amsterdam/design-system-react/src'
 import { Meta, StoryObj } from '@storybook/react'
+import { FileInputWithFileList } from './FileInputWithFileList'
 
 const sampleDataTransfer = new DataTransfer()
 sampleDataTransfer.items.add(new File(['sample1'], 'sample1.txt', { type: 'text/plain', lastModified: Date.now() }))
@@ -31,3 +32,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {}
+
+export const WithInput: Story = {
+  render: () => <FileInputWithFileList />,
+}