Publish components/v0.1.1 - pass ApiBaseUrl as config

see #60

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyparam/components",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "React components for hyparam apps",
   "keywords": [
     "component",
@@ -38,7 +38,7 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@hyparam/utils": "0.1.0",
+    "@hyparam/utils": "0.1.1",
     "hightable": "0.6.3",
     "hyparquet": "1.5.0",
     "hyparquet-compressors": "0.1.4"

packages/components/src/App.tsx

@@ -1,7 +1,11 @@
 import Page from './Page.js'
 
-export default function App() {
+interface AppProps {
+  apiBaseUrl: string
+}
+
+export default function App(props: AppProps) {
   return (
-    <Page />
+    <Page {...props} />
   )
 }

packages/components/src/Folder.tsx

@@ -1,5 +1,5 @@
 import { FileMetadata, FolderKey, cn, getFileDate, getFileDateShort, getFileSize, listFiles } from '@hyparam/utils'
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import Layout, { Spinner } from './Layout.js'
 
 interface FolderProps {
@@ -13,21 +13,20 @@ export default function Folder({ folderKey }: FolderProps) {
   // State to hold file listing
   const [files, setFiles] = useState<FileMetadata[]>()
   const [error, setError] = useState<Error>()
-  const listRef = useRef<HTMLUListElement>(null)
 
   // Folder path from url
-  const { prefix } = folderKey
+  const { prefix, listFilesUrl } = folderKey
   const path = prefix.split('/')
 
   // Fetch files on component mount
   useEffect(() => {
-    listFiles(prefix)
+    listFiles(listFilesUrl)
       .then(setFiles)
       .catch((error: unknown) => {
         setFiles([])
         setError(error instanceof Error ? error : new Error(`Failed to fetch files - ${error}`))
       })
-  }, [prefix])
+  }, [listFilesUrl])
 
   const fileUrl = useCallback((file: FileMetadata) => {
     return prefix ? `/files?key=${prefix}/${file.key}` : `/files?key=${file.key}`
@@ -43,7 +42,7 @@ export default function Folder({ folderKey }: FolderProps) {
       </div>
     </nav>
 
-    {files && files.length > 0 && <ul className='file-list' ref={listRef}>
+    {files && files.length > 0 && <ul className='file-list'>
       {files.map((file, index) =>
         <li key={index}>
           <a href={fileUrl(file)}>

packages/components/src/Page.tsx

@@ -3,12 +3,16 @@ import Cell from './Cell.js'
 import File from './File.js'
 import Folder from './Folder.js'
 
-export default function Page() {
+interface PageProps {
+  apiBaseUrl: string
+}
+
+export default function Page({ apiBaseUrl }: PageProps) {
   const search = new URLSearchParams(location.search)
   const key = search.get('key')
   if (Array.isArray(key)) throw new Error('key must be a string')
 
-  const parsedKey = parseKey(key)
+  const parsedKey = parseKey(key, { apiBaseUrl } )
 
   // row, col from url
   const row = search.get('row')

packages/components/test/File.test.tsx

@@ -10,7 +10,7 @@ global.fetch = vi.fn(() => Promise.resolve({ text: vi.fn() } as unknown as Respo
 
 describe('File Component', () => {
   it('renders a local file path', async () => {
-    const parsedKey = parseKey('folder/subfolder/test.txt')
+    const parsedKey = parseKey('folder/subfolder/test.txt', { apiBaseUrl: 'http://localhost:3000' })
     assert(parsedKey.kind === 'file')
 
     const { getByText } = await act(() => render(
@@ -34,7 +34,7 @@ describe('File Component', () => {
   })
 
   it('renders correct breadcrumbs for nested folders', async () => {
-    const parsedKey = parseKey('folder1/folder2/folder3/test.txt')
+    const parsedKey = parseKey('folder1/folder2/folder3/test.txt', { apiBaseUrl: 'http://localhost:3000' })
     assert(parsedKey.kind === 'file')
     const { getAllByRole } = await act(() => render(
       <File parsedKey={parsedKey} />,

packages/components/test/Folder.test.tsx

@@ -27,11 +27,11 @@ const mockFiles: FileMetadata[] = [
 describe('Folder Component', () => {
   it('fetches file data and displays files on mount', async () => {
     vi.mocked(listFiles).mockResolvedValueOnce(mockFiles)
-    const folderKey = parseKey('')
+    const folderKey = parseKey('', { apiBaseUrl: 'http://localhost:3000' })
     assert(folderKey.kind === 'folder')
     const { findByText, getByText } = render(<Folder folderKey={folderKey} />)
 
-    await waitFor(() => {expect(listFiles).toHaveBeenCalledWith('')})
+    await waitFor(() => {expect(listFiles).toHaveBeenCalledWith('http://localhost:3000/api/store/list?prefix=')})
 
     const folderLink = await findByText('folder1/')
     expect(folderLink.closest('a')?.getAttribute('href')).toBe('/files?key=folder1/')
@@ -46,7 +46,7 @@ describe('Folder Component', () => {
 
   it('displays the spinner while loading', () => {
     vi.mocked(listFiles).mockReturnValue(new Promise(() => []))
-    const folderKey = parseKey('test-prefix/')
+    const folderKey = parseKey('test-prefix/', { apiBaseUrl: 'http://localhost:3000' })
     assert(folderKey.kind === 'folder')
     const { container } = render(<Folder folderKey={folderKey} />)
     expect(container.querySelector('.spinner')).toBeDefined()
@@ -55,7 +55,7 @@ describe('Folder Component', () => {
   it('handles file listing errors', async () => {
     const errorMessage = 'Failed to fetch'
     vi.mocked(listFiles).mockRejectedValue(new Error(errorMessage))
-    const folderKey = parseKey('test-prefix/')
+    const folderKey = parseKey('test-prefix/', { apiBaseUrl: 'http://localhost:3000' })
     assert(folderKey.kind === 'folder')
     const { findByText, queryByText } = render(<Folder folderKey={folderKey} />)
 
@@ -68,7 +68,7 @@ describe('Folder Component', () => {
 
   it('renders breadcrumbs correctly', async () => {
     vi.mocked(listFiles).mockResolvedValue(mockFiles)
-    const folderKey = parseKey('subdir1/subdir2/')
+    const folderKey = parseKey('subdir1/subdir2/', { apiBaseUrl: 'http://localhost:3000' })
     assert(folderKey.kind === 'folder')
     const { findByText, getByText } = render(<Folder folderKey={folderKey} />)
     await waitFor(() => { expect(listFiles).toHaveBeenCalled() })

packages/components/test/viewers/ImageView.test.tsx

@@ -1,5 +1,6 @@
-import { FileKey, parseKey } from '@hyparam/utils'
+import { parseKey } from '@hyparam/utils'
 import { render } from '@testing-library/react'
+import { strict as assert } from 'assert'
 import React from 'react'
 import { describe, expect, it, vi } from 'vitest'
 import ImageView from '../../src/viewers/ImageView.js'
@@ -13,7 +14,8 @@ describe('ImageView Component', () => {
       arrayBuffer: () => Promise.resolve(body),
       headers: new Map([['content-length', body.byteLength]]),
     } as unknown as Response)
-    const parsedKey = parseKey('test.png') as FileKey
+    const parsedKey = parseKey('test.png', { apiBaseUrl: 'http://localhost:3000' })
+    assert(parsedKey.kind === 'file')
 
     const { findByRole, findByText } = render(
       <ImageView parsedKey={parsedKey} setError={console.error} />,

packages/components/test/viewers/MarkdownView.test.tsx

@@ -1,5 +1,6 @@
-import { FileKey, parseKey } from '@hyparam/utils'
+import { parseKey } from '@hyparam/utils'
 import { render } from '@testing-library/react'
+import { strict as assert } from 'assert'
 import React from 'react'
 import { describe, expect, it, vi } from 'vitest'
 import MarkdownView from '../../src/viewers/MarkdownView.js'
@@ -13,7 +14,8 @@ describe('MarkdownView Component', () => {
       text: () => Promise.resolve(text),
       headers: new Map([['content-length', text.length]]),
     } as unknown as Response)
-    const parsedKey = parseKey('test.md') as FileKey
+    const parsedKey = parseKey('test.md', { apiBaseUrl: 'http://localhost:3000' })
+    assert(parsedKey.kind === 'file')
 
     const { findByText } = render(
       <MarkdownView parsedKey={parsedKey} setError={console.error} />,