Move to a flat directories structure

package.json

@@ -30,7 +30,7 @@
   ],
   "scripts": {
     "build:types": "tsc -b",
-    "build:lib": "vite build -c vite.lib.config.ts && cp src/styles/global.css lib/global.css",
+    "build:lib": "vite build -c vite.lib.config.ts && cp src/assets/global.css lib/global.css",
     "build:app": "vite build",
     "build": "run-s build:lib build:types build:app",
     "coverage": "vitest run --coverage --coverage.include=src --coverage.include=bin",

src/app.tsx

@@ -1,7 +1,7 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import App from './components/App.js'
-import './styles/global.css'
+import './assets/global.css'
+import App from './components/App/App.js'
 
 const root = document.getElementById('app')
 if (!root) throw new Error('missing root element')

src/components/App.tsx → src/components/App/App.tsx

@@ -1,8 +1,8 @@
 import { useMemo } from 'react'
-import { Config, ConfigProvider } from '../hooks/useConfig.js'
-import { getHttpSource } from '../lib/sources/httpSource.js'
-import { getHyperparamSource } from '../lib/sources/hyperparamSource.js'
-import Page from './Page.js'
+import { Config, ConfigProvider } from '../../hooks/useConfig.js'
+import { getHttpSource } from '../../lib/sources/httpSource.js'
+import { getHyperparamSource } from '../../lib/sources/hyperparamSource.js'
+import Page from '../Page/Page.js'
 
 export default function App() {
   const search = new URLSearchParams(location.search)

src/components/viewers/AvroView.tsx → src/components/AvroView/AvroView.tsx

@@ -2,9 +2,9 @@ import { avroData, avroMetadata } from 'icebird'
 import { useEffect, useState } from 'react'
 import type { FileSource } from '../../lib/sources/types.js'
 import { parseFileSize } from '../../lib/utils.js'
-import styles from '../../styles/Json.module.css'
-import Json from '../Json.js'
-import ContentWrapper, { ContentSize } from './ContentWrapper.js'
+import ContentWrapper, { ContentSize } from '../ContentWrapper/ContentWrapper.js'
+import Json from '../Json/Json.js'
+import styles from '../Json/Json.module.css'
 
 interface ViewerProps {
   source: FileSource

test/components/Breadcrumb.test.tsx → src/components/Breadcrumb/Breadcrumb.test.tsx

@@ -1,9 +1,9 @@
 import { render } from '@testing-library/react'
 import { strict as assert } from 'assert'
-import React from 'react'
 import { describe, expect, it } from 'vitest'
-import { Config, ConfigProvider } from '../../src/hooks/useConfig.js'
-import { Breadcrumb, getHyperparamSource } from '../../src/index.js'
+import { Config, ConfigProvider } from '../../hooks/useConfig.js'
+import { getHyperparamSource } from '../../lib/sources/hyperparamSource.js'
+import Breadcrumb from './Breadcrumb.js'
 
 const endpoint = 'http://localhost:3000'
 

src/components/Breadcrumb.tsx → src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react'
-import { useConfig } from '../hooks/useConfig.js'
-import type { Source } from '../lib/sources/types.js'
-import { cn } from '../lib/utils.js'
-import styles from '../styles/Breadcrumb.module.css'
+import { useConfig } from '../../hooks/useConfig.js'
+import type { Source } from '../../lib/sources/types.js'
+import { cn } from '../../lib/utils.js'
+import styles from './Breadcrumb.module.css'
 
 interface BreadcrumbProps {
   source: Source,

src/components/Cell.tsx → src/components/Cell/Cell.tsx

@@ -1,10 +1,10 @@
 import { stringify } from 'hightable'
 import { asyncBufferFromUrl, parquetMetadataAsync } from 'hyparquet'
 import { useEffect, useState } from 'react'
-import type { FileSource } from '../lib/sources/types.js'
-import { parquetDataFrame } from '../lib/tableProvider.js'
-import Breadcrumb from './Breadcrumb.js'
-import Layout from './Layout.js'
+import type { FileSource } from '../../lib/sources/types.js'
+import { parquetDataFrame } from '../../lib/tableProvider.js'
+import Breadcrumb from '../Breadcrumb/Breadcrumb.js'
+import Layout from '../Layout/Layout.js'
 
 interface CellProps {
   source: FileSource;

src/components/viewers/CellPanel.tsx → src/components/CellPanel/CellPanel.tsx

@@ -1,7 +1,7 @@
 import { DataFrame, stringify } from 'hightable'
 import { useEffect, useState } from 'react'
-import SlideCloseButton from '../SlideCloseButton.js'
-import ContentWrapper from './ContentWrapper.js'
+import ContentWrapper from '../ContentWrapper/ContentWrapper.js'
+import SlideCloseButton from '../SlideCloseButton/SlideCloseButton.js'
 
 interface ViewerProps {
   df: DataFrame

src/components/Center.tsx → src/components/Center/Center.tsx

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react'
-import { useConfig } from '../hooks/useConfig.js'
-import { cn } from '../lib/utils.js'
-import styles from '../styles/Center.module.css'
+import { useConfig } from '../../hooks/useConfig.js'
+import { cn } from '../../lib/utils.js'
+import styles from './Center.module.css'
 
 export default function Center({ children }: {children?: ReactNode}) {
   const { customClass } = useConfig()

src/components/viewers/ContentWrapper.tsx → src/components/ContentWrapper/ContentWrapper.tsx

@@ -1,9 +1,9 @@
 import { ReactNode } from 'react'
 import { useConfig } from '../../hooks/useConfig.js'
 import { cn, formatFileSize } from '../../lib/utils.js'
-import styles from '../../styles/viewers/ContentWrapper.module.css'
-import Center from '../Center.js'
-import Spinner from '../Spinner.js'
+import Center from '../Center/Center.js'
+import Spinner from '../Spinner/Spinner.js'
+import styles from './ContentWrapper.module.css'
 
 export interface ContentSize {
   fileSize?: number

src/components/ErrorBar.tsx → src/components/ErrorBar/ErrorBar.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
-import { useConfig } from '../hooks/useConfig.js'
-import { cn } from '../lib/utils.js'
-import styles from '../styles/ErrorBar.module.css'
+import { useConfig } from '../../hooks/useConfig.js'
+import { cn } from '../../lib/utils.js'
+import styles from './ErrorBar.module.css'
 
 interface ErrorBarProps {
   error?: Error

test/components/File.test.tsx → src/components/File/File.test.tsx

@@ -1,9 +1,10 @@
 import { render } from '@testing-library/react'
 import { strict as assert } from 'assert'
-import React, { act } from 'react'
+import { act } from 'react'
 import { describe, expect, it, vi } from 'vitest'
-import { Config, ConfigProvider } from '../../src/hooks/useConfig.js'
-import { File, getHttpSource, getHyperparamSource } from '../../src/index.js'
+import { Config, ConfigProvider } from '../../hooks/useConfig.js'
+import { getHttpSource, getHyperparamSource } from '../../lib/sources/index.js'
+import File from './File.js'
 
 const endpoint = 'http://localhost:3000'
 
@@ -60,11 +61,11 @@ describe('File Component', () => {
     ))
 
     const links = getAllByRole('link')
-    expect(links[0].getAttribute('href')).toBe('/')
-    expect(links[1].getAttribute('href')).toBe('/files?key=')
-    expect(links[2].getAttribute('href')).toBe('/files?key=folder1/')
-    expect(links[3].getAttribute('href')).toBe('/files?key=folder1/folder2/')
-    expect(links[4].getAttribute('href')).toBe('/files?key=folder1/folder2/folder3/')
-    expect(links[5].getAttribute('href')).toBe('/files?key=folder1/folder2/folder3/test.txt')
+    expect(links[0]?.getAttribute('href')).toBe('/')
+    expect(links[1]?.getAttribute('href')).toBe('/files?key=')
+    expect(links[2]?.getAttribute('href')).toBe('/files?key=folder1/')
+    expect(links[3]?.getAttribute('href')).toBe('/files?key=folder1/folder2/')
+    expect(links[4]?.getAttribute('href')).toBe('/files?key=folder1/folder2/folder3/')
+    expect(links[5]?.getAttribute('href')).toBe('/files?key=folder1/folder2/folder3/test.txt')
   })
 })

src/components/File.tsx → src/components/File/File.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react'
-import type { FileSource } from '../lib/sources/types.js'
-import Breadcrumb from './Breadcrumb.js'
-import Layout from './Layout.js'
-import Viewer from './viewers/Viewer.js'
+import type { FileSource } from '../../lib/sources/types.js'
+import Breadcrumb from '../Breadcrumb/Breadcrumb.js'
+import Layout from '../Layout/Layout.js'
+import Viewer from '../Viewer/Viewer.js'
 
 interface FileProps {
   source: FileSource

src/styles/Folder.module.css → src/components/Folder/Folder.module.css

@@ -41,11 +41,11 @@
           padding-left: 22px;
 
           &[data-file-kind="directory"] {
-            background-image: url("../assets/folder.svg");
+            background-image: url("../../assets/folder.svg");
           }
 
           &[data-file-kind="file"] {
-            background-image: url("../assets/file.svg");
+            background-image: url("../../assets/file.svg");
           }
         }
 
@@ -68,7 +68,7 @@
 
 /* search */
 .search {
-  background: #fff url("../assets/search.svg") no-repeat center right 8px;
+  background: #fff url("../../assets/search.svg") no-repeat center right 8px;
   border: 1px solid transparent;
   border-radius: 8px;
   flex-shrink: 1;

test/components/Folder.test.tsx → src/components/Folder/Folder.test.tsx

@@ -1,9 +1,10 @@
 import { fireEvent, render, waitFor } from '@testing-library/react'
 import { strict as assert } from 'assert'
-import React, { act } from 'react'
+import { act } from 'react'
 import { describe, expect, it, test, vi } from 'vitest'
-import { Config, ConfigProvider } from '../../src/hooks/useConfig.js'
-import { DirSource, FileMetadata, Folder, HyperparamFileMetadata, getHyperparamSource } from '../../src/index.js'
+import { Config, ConfigProvider } from '../../hooks/useConfig.js'
+import { DirSource, FileMetadata, HyperparamFileMetadata, getHyperparamSource } from '../../lib/sources/index.js'
+import Folder from './Folder.js'
 
 const endpoint = 'http://localhost:3000'
 const mockFiles: HyperparamFileMetadata[] = [

src/components/Folder.tsx → src/components/Folder/Folder.tsx

@@ -1,12 +1,12 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { useConfig } from '../hooks/useConfig.js'
-import type { DirSource, FileMetadata } from '../lib/sources/types.js'
-import { cn, formatFileSize, getFileDate, getFileDateShort } from '../lib/utils.js'
-import styles from '../styles/Folder.module.css'
-import Breadcrumb from './Breadcrumb.js'
-import Center from './Center.js'
-import Layout from './Layout.js'
-import Spinner from './Spinner.js'
+import { useConfig } from '../../hooks/useConfig.js'
+import type { DirSource, FileMetadata } from '../../lib/sources/types.js'
+import { cn, formatFileSize, getFileDate, getFileDateShort } from '../../lib/utils.js'
+import Breadcrumb from '../Breadcrumb/Breadcrumb.js'
+import Center from '../Center/Center.js'
+import Layout from '../Layout/Layout.js'
+import Spinner from '../Spinner/Spinner.js'
+import styles from './Folder.module.css'
 
 interface FolderProps {
   source: DirSource

test/components/viewers/ImageView.test.tsx → src/components/ImageView/ImageView.test.tsx

@@ -1,8 +1,8 @@
 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, getHyperparamSource } from '../../../src/index.js'
+import { getHyperparamSource } from '../../lib/sources/index.js'
+import ImageView from './ImageView.js'
 
 globalThis.fetch = vi.fn()
 

src/components/viewers/ImageView.tsx → src/components/ImageView/ImageView.tsx

@@ -2,8 +2,8 @@ import { useEffect, useState } from 'react'
 import { useConfig } from '../../hooks/useConfig.js'
 import { FileSource } from '../../lib/sources/types.js'
 import { cn, contentTypes, parseFileSize } from '../../lib/utils.js'
-import styles from '../../styles/viewers/ImageView.module.css'
-import ContentWrapper from './ContentWrapper.js'
+import ContentWrapper from '../ContentWrapper/ContentWrapper.js'
+import styles from './ImageView.module.css'
 
 interface ViewerProps {
   source: FileSource

test/components/Json.test.tsx → src/components/Json/Json.test.tsx

@@ -1,7 +1,6 @@
 import { fireEvent, render } from '@testing-library/react'
-import React from 'react'
 import { describe, expect, it } from 'vitest'
-import Json from '../../src/components/Json'
+import Json from './Json.js'
 
 describe('Json Component', () => {
   it('renders primitive types correctly', () => {

src/components/Json.tsx → src/components/Json/Json.tsx

@@ -1,5 +1,5 @@
 import { ReactNode, useState } from 'react'
-import styles from '../styles/Json.module.css'
+import styles from './Json.module.css'
 
 interface JsonProps {
   json: unknown

test/components/viewers/JsonView.test.tsx → src/components/JsonView/JsonView.test.tsx

@@ -1,8 +1,7 @@
 import { render, waitFor } from '@testing-library/react'
-import React from 'react'
 import { describe, expect, it, vi } from 'vitest'
-import JsonView from '../../../src/components/viewers/JsonView'
-import { FileSource } from '../../../src/lib/sources/types.js'
+import { FileSource } from '../../lib/sources/types.js'
+import JsonView from './JsonView.js'
 
 vi.mock('../../../src/lib/utils.js', async () => {
   const actual = await vi.importActual('../../../src/lib/utils.js')

src/components/viewers/JsonView.tsx → src/components/JsonView/JsonView.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useState } from 'react'
 import type { FileSource } from '../../lib/sources/types.js'
 import { parseFileSize } from '../../lib/utils.js'
-import styles from '../../styles/Json.module.css'
-import Center from '../Center.js'
-import Json from '../Json.js'
-import ContentWrapper, { TextContent } from './ContentWrapper.js'
+import Center from '../Center/Center.js'
+import ContentWrapper, { TextContent } from '../ContentWrapper/ContentWrapper.js'
+import Json from '../Json/Json.js'
+import styles from '../Json/Json.module.css'
 
 interface ViewerProps {
   source: FileSource

test/components/Layout.test.tsx → src/components/Layout/Layout.test.tsx

@@ -1,7 +1,6 @@
 import { render } from '@testing-library/react'
-import React from 'react'
 import { describe, expect, it } from 'vitest'
-import { Layout } from '../../src/index.js'
+import Layout from './Layout.js'
 
 describe('Layout Component', () => {
   it('renders children', () => {

src/components/Layout.tsx → src/components/Layout/Layout.tsx

@@ -1,11 +1,11 @@
 import { ReactNode, useEffect, useState } from 'react'
-import { useConfig } from '../hooks/useConfig.js'
-import { cn } from '../lib/utils.js'
-import styles from '../styles/Layout.module.css'
-import ErrorBar from './ErrorBar.js'
-import ProgressBar from './ProgressBar.js'
-import SideBar from './SideBar.js'
-import Welcome from './Welcome.js'
+import { useConfig } from '../../hooks/useConfig.js'
+import { cn } from '../../lib/utils.js'
+import ErrorBar from '../ErrorBar/ErrorBar.js'
+import ProgressBar from '../ProgressBar/ProgressBar.js'
+import SideBar from '../SideBar/SideBar.js'
+import Welcome from '../Welcome/Welcome.js'
+import styles from './Layout.module.css'
 
 interface LayoutProps {
   children: ReactNode

test/components/Markdown.test.tsx → src/components/Markdown/Markdown.test.tsx

@@ -1,7 +1,6 @@
 import { render } from '@testing-library/react'
-import React from 'react'
 import { describe, expect, it } from 'vitest'
-import { Markdown } from '../../src/index.js'
+import Markdown from './Markdown.js'
 
 describe('Markdown', () => {
   it('renders plain text as a paragraph', () => {
@@ -57,8 +56,8 @@ describe('Markdown', () => {
     expect(getByText('Hyp')).toBeDefined()
     expect(getByText('GitHub')).toBeDefined()
     const links = getAllByRole('link')
-    expect(links[0].getAttribute('href')).toBe('https://hyperparam.app')
-    expect(links[1].getAttribute('href')).toBe('https://github.com/hyparam')
+    expect(links[0]?.getAttribute('href')).toBe('https://hyperparam.app')
+    expect(links[1]?.getAttribute('href')).toBe('https://github.com/hyparam')
   })
 
   it('renders blockquote', () => {
@@ -247,15 +246,18 @@ describe('Markdown with nested elements', () => {
 
     const images = container.querySelectorAll('img')
     expect(images.length).toBe(2)
+    if (!(0 in images && 1 in images)) {
+      throw new Error('should not occur')
+    }
 
     // First link contains first image
-    expect(links[0].getAttribute('href')).toBe('https://opensource.org/licenses/MIT')
-    expect(links[0].contains(images[0])).toBe(true)
+    expect(links[0]?.getAttribute('href')).toBe('https://opensource.org/licenses/MIT')
+    expect(links[0]?.contains(images[0])).toBe(true)
     expect(images[0].getAttribute('alt')).toBe('license')
 
     // Second link contains second image
-    expect(links[1].getAttribute('href')).toBe('https://www.npmjs.com/package')
-    expect(links[1].contains(images[1])).toBe(true)
+    expect(links[1]?.getAttribute('href')).toBe('https://www.npmjs.com/package')
+    expect(links[1]?.contains(images[1])).toBe(true)
     expect(images[1].getAttribute('alt')).toBe('npm')
   })
 

test/components/viewers/MarkdownView.test.tsx → src/components/MarkdownView/MarkdownView.test.tsx

@@ -1,8 +1,8 @@
 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, getHyperparamSource } from '../../../src/index.js'
+import { getHyperparamSource } from '../../lib/sources/index.js'
+import MarkdownView from './MarkdownView.js'
 
 globalThis.fetch = vi.fn()
 

src/components/viewers/MarkdownView.tsx → src/components/MarkdownView/MarkdownView.tsx

@@ -2,9 +2,9 @@ import { useEffect, useState } from 'react'
 import { useConfig } from '../../hooks/useConfig.js'
 import type { FileSource } from '../../lib/sources/types.js'
 import { cn, parseFileSize } from '../../lib/utils.js'
-import styles from '../../styles/viewers/MarkdownView.module.css'
-import Markdown from '../Markdown.js'
-import ContentWrapper, { TextContent } from './ContentWrapper.js'
+import ContentWrapper, { TextContent } from '../ContentWrapper/ContentWrapper.js'
+import Markdown from '../Markdown/Markdown.js'
+import styles from './MarkdownView.module.css'
 
 interface ViewerProps {
   source: FileSource