move to a flat components structure, where each component owns its CSS module

Author: severo

src/components/App.tsx renamed to src/components/App/App.tsx

@@ -2,9 +2,9 @@
 import { OAuthResult } from '@huggingface/hub'
 import { Config, ConfigProvider, Page, getHttpSource } from 'hyperparam'
 import { useEffect, useMemo, useState } from 'react'
-import { fetchOAuth, getLocalOAuth } from '../lib/auth.js'
-import { getHuggingFaceSource } from '../lib/huggingfaceSource.js'
-import Home from './Home.js'
+import { fetchOAuth, getLocalOAuth } from '../../lib/auth.js'
+import { getHuggingFaceSource } from '../../lib/huggingfaceSource.js'
+import Home from '../Home/Home.js'
 
 function getRequestInit(accessToken: string | undefined): RequestInit | undefined {
   if (!accessToken) return undefined

src/styles/Home.module.css renamed to src/components/Home/Home.module.css

@@ -1,10 +1,10 @@
 import { OAuthResult } from '@huggingface/hub'
 import { FormEvent } from 'react'
-import HFLoginIcon from '../assets/sign-in-with-huggingface-lg.svg'
-import { login, logout } from '../lib/auth.js'
-import { changeQueryString } from '../lib/huggingfaceSource.js'
-import styles from '../styles/Home.module.css'
-import Search from './Search.js'
+import HFLoginIcon from '../../assets/sign-in-with-huggingface-lg.svg'
+import { login, logout } from '../../lib/auth.js'
+import { changeQueryString } from '../../lib/huggingfaceSource.js'
+import Search from '../Search/Search.js'
+import styles from './Home.module.css'
 
 /**
  * Home page

src/components/Home.tsx renamed to src/components/Home/Home.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react'
-import { changeQueryString } from '../lib/huggingfaceSource.js'
+import { changeQueryString } from '../../lib/huggingfaceSource.js'
 
 // workaround for Hugging Face spaces
 export default function Link({ url, children, className }: { url?: string; children?: ReactNode; className?: string }) {

src/components/Link.tsx renamed to src/components/Link/Link.tsx

@@ -1,8 +1,8 @@
 import { DatasetEntry, listDatasets } from '@huggingface/hub'
 import { ChangeEvent, useEffect, useState } from 'react'
-import { baseUrl } from '../lib/huggingfaceSource.js'
-import styles from '../styles/Search.module.css'
-import Link from './Link.js'
+import { baseUrl } from '../../lib/huggingfaceSource.js'
+import Link from '../Link/Link.js'
+import styles from './Search.module.css'
 
 export default function Search({ accessToken } : { accessToken?: string }) {
   const [query, setQuery] = useState<string>()

src/styles/Search.module.css renamed to src/components/Search/Search.module.css

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