Use CSS modules (#188)

* move Welcome CSS to a CSS module + allow overriding

* remove redundant declaration

* fix type

* extract SideBar to its component + CSS module

* reverse the config keys to group all class names under customClass

* style

* move TextView styles to CSS module

* move MarkdownView styles to CSS module

* fix import paths

* move ImageView styles to CSS module

* move ContentHeader styles to CSS module

* rename ContentHeader as ContentWrapper

* move Spinner styles to CSS module + move to a new component file

* move ErrorBar styles to CSS module + new component

* split Layout.test.tsx in three files

* fix the tests + use VisuallyHidden component to insert accessible text

* extract SlideCloseButton to its own component + CSS module

* fix ErrorBar: don't take space when hidden

* fix class name

* Move styles for SlidePanel to a CSS module

* Fix SlidePanel tests, and change panel from article to aside

* Move the progress bar to its component + CSS module

* fix bug in the computation of path parts

* fix again the source parts

* Move breadcrumb styles to CSS module + move tests their own file

* extract Layout styles to CSS Module

* extract Center as a new component, and move the loading spinner to ContentWrapper

* memoize the list of files

* refactor the conditionals for safety

* fix the conditionals: we work on filtered, not files

* use CSS module for Folder styles

* move search styles to Folder CSS module

* remove useless intermediate top-actions div

* export global CSS in the package

Author: severo

package.json

@@ -16,6 +16,7 @@
       "import": "./lib/index.es.min.js",
       "require": "./lib/index.umd.min.js"
     },
+    "./global.css": "./lib/global.css",
     "./hyperparam.css": "./lib/hyperparam.css"
   },
   "bin": {
@@ -29,7 +30,7 @@
   ],
   "scripts": {
     "build:types": "tsc -b",
-    "build:lib": "vite build -c vite.lib.config.ts",
+    "build:lib": "vite build -c vite.lib.config.ts && cp src/styles/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,8 +1,7 @@
-import 'hightable/src/HighTable.css'
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './components/App.js'
-import './styles/app.css'
+import './styles/global.css'
 
 const root = document.getElementById('app')
 if (!root) throw new Error('missing root element')

src/components/Breadcrumb.tsx

@@ -1,6 +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'
 
 interface BreadcrumbProps {
   source: Source,
@@ -11,10 +13,10 @@ interface BreadcrumbProps {
  * Breadcrumb navigation
  */
 export default function Breadcrumb({ source, children }: BreadcrumbProps) {
-  const { routes } = useConfig()
+  const { routes, customClass } = useConfig()
 
-  return <nav className='top-header top-header-divided'>
-    <div className='path'>
+  return <nav className={cn(styles.breadcrumb, customClass?.breadcrumb)}>
+    <div className={cn(styles.path, customClass?.path)}>
       {source.sourceParts.map((part, depth) =>
         <a href={routes?.getSourceRouteUrl?.({ sourceId: part.sourceId }) ?? ''} key={depth}>{part.text}</a>
       )}

src/components/Center.tsx

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react'
+import { useConfig } from '../hooks/useConfig.js'
+import { cn } from '../lib/utils.js'
+import styles from '../styles/Center.module.css'
+
+export default function Center({ children }: {children?: ReactNode}) {
+  const { customClass } = useConfig()
+  return <div className={cn(styles.center, customClass?.center)}>{children}</div>
+}

src/components/ErrorBar.tsx

@@ -0,0 +1,35 @@
+import { useState } from 'react'
+import { useConfig } from '../hooks/useConfig.js'
+import { cn } from '../lib/utils.js'
+import styles from '../styles/ErrorBar.module.css'
+
+interface ErrorBarProps {
+  error?: Error
+}
+
+export default function ErrorBar({ error }: ErrorBarProps) {
+  const [showError, setShowError] = useState(error !== undefined)
+  const [prevError, setPrevError] = useState(error)
+  const { customClass } = useConfig()
+
+  if (error) console.error(error)
+  /// Reset error visibility when error prop changes
+  if (error !== prevError) {
+    setPrevError(error)
+    setShowError(error !== undefined)
+  }
+
+  return <div
+    className={cn(styles.errorBar, customClass?.errorBar)}
+    data-visible={showError}
+  >
+    <div>
+      <span>{error?.toString()}</span>
+      <button
+        aria-label='Close error message'
+        onClick={() => { setShowError(false) }}>
+        &times;
+      </button>
+    </div>
+  </div>
+}

src/components/Folder.tsx

@@ -1,9 +1,12 @@
-import { useEffect, useRef, useState } from 'react'
+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 Layout, { Spinner } from './Layout.js'
+import Center from './Center.js'
+import Layout from './Layout.js'
+import Spinner from './Spinner.js'
 
 interface FolderProps {
   source: DirSource
@@ -19,8 +22,7 @@ export default function Folder({ source }: FolderProps) {
   const [searchQuery, setSearchQuery] = useState('')
   const searchRef = useRef<HTMLInputElement>(null)
   const listRef = useRef<HTMLUListElement>(null)
-
-  const { routes } = useConfig()
+  const { routes, customClass } = useConfig()
 
   // Fetch files on component mount
   useEffect(() => {
@@ -33,7 +35,10 @@ export default function Folder({ source }: FolderProps) {
   }, [source])
 
   // File search
-  const filtered = files?.filter(file => file.name.toLowerCase().includes(searchQuery.toLowerCase()))
+  const filtered = useMemo(() => {
+    return files?.filter(file => file.name.toLowerCase().includes(searchQuery.toLowerCase()))
+  }, [files, searchQuery])
+
   useEffect(() => {
     const searchElement = searchRef.current
     function handleKeyup(e: KeyboardEvent) {
@@ -84,32 +89,33 @@ export default function Folder({ source }: FolderProps) {
 
   return <Layout error={error} title={source.prefix}>
     <Breadcrumb source={source}>
-      <div className='top-actions'>
-        <input autoFocus className='search' placeholder='Search...' ref={searchRef} />
-      </div>
+      <input autoFocus className={cn(styles.search, customClass?.search)} placeholder='Search...' ref={searchRef} />
     </Breadcrumb>
 
-    {files && files.length > 0 && <ul className='file-list' ref={listRef}>
-      {filtered?.map((file, index) =>
-        <li key={index}>
-          <a href={routes?.getSourceRouteUrl?.({ sourceId: file.sourceId }) ?? location.href}>
-            <span className={cn('file-name', 'file', file.kind === 'directory' && 'folder')}>
-              {file.name}
-            </span>
-            {file.kind === 'file' && <>
-              {file.size !== undefined && <span className='file-size' title={file.size.toLocaleString() + ' bytes'}>
-                {formatFileSize(file.size)}
-              </span>}
-              <span className='file-date' title={getFileDate(file)}>
-                {getFileDateShort(file)}
-              </span>
-            </>}
-          </a>
-        </li>
-      )}
-    </ul>}
-    {files?.length === 0 && <div className='center'>No files</div>}
-    {files === undefined && <div className='center'><Spinner /></div>}
+    {filtered === undefined ?
+      <Center><Spinner /></Center> :
+      filtered.length === 0 ?
+        <Center>No files</Center> :
+        <ul className={cn(styles.fileList, customClass?.fileList)} ref={listRef}>
+          {filtered.map((file, index) =>
+            <li key={index}>
+              <a href={routes?.getSourceRouteUrl?.({ sourceId: file.sourceId }) ?? location.href}>
+                <span data-file-kind={file.kind}>
+                  {file.name}
+                </span>
+                {file.kind === 'file' && <>
+                  {file.size !== undefined && <span data-file-size title={file.size.toLocaleString() + ' bytes'}>
+                    {formatFileSize(file.size)}
+                  </span>}
+                  <span data-file-date title={getFileDate(file)}>
+                    {getFileDateShort(file)}
+                  </span>
+                </>}
+              </a>
+            </li>
+          )}
+        </ul>
+    }
   </Layout>
 }
 

src/components/Layout.tsx

@@ -1,10 +1,14 @@
 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'
 
 interface LayoutProps {
   children: ReactNode
-  className?: string
   progress?: number
   error?: Error
   title?: string
@@ -16,13 +20,13 @@ interface LayoutProps {
  *
  * @param props
  * @param props.children - content to display inside the layout
- * @param props.className - additional class names to apply to the content container
  * @param props.progress - progress bar value
  * @param props.error - error message to display
  * @param props.title - page title
  */
-export default function Layout({ children, className, progress, error, title }: LayoutProps) {
+export default function Layout({ children, progress, error, title }: LayoutProps) {
   const [showWelcome, setShowWelcome] = useState(false)
+  const { customClass } = useConfig()
 
   // Check localStorage on mount to see if the user has seen the welcome popup
   useEffect(() => {
@@ -41,55 +45,15 @@ export default function Layout({ children, className, progress, error, title }:
     document.title = title ? `${title} - hyperparam` : 'hyperparam'
   }, [title])
 
-  return <main className='main'>
-    <Sidebar />
-    <div className='content-container'>
-      <div className={cn('content', className)}>
+  return <div className={cn(styles.layout, customClass?.layout)}>
+    <SideBar />
+    <main>
+      <div>
         {children}
       </div>
       <ErrorBar error={error}></ErrorBar>
-    </div>
-    {progress !== undefined && progress < 1 &&
-      <div className={'progress-bar'} role='progressbar'>
-        <div style={{ width: `${100 * progress}%` }} />
-      </div>
-    }
+    </main>
+    {progress !== undefined && progress < 1 && <ProgressBar value={progress} />}
     {showWelcome && <Welcome onClose={handleCloseWelcome} />}
-  </main>
-}
-
-function Sidebar() {
-  return <nav className='nav'>
-    <div>
-      <a className="brand" href='/'>hyperparam</a>
-    </div>
-  </nav>
-}
-
-export function Spinner({ className }: { className?: string }) {
-  return <div className={cn('spinner', className)}></div>
-}
-
-export function ErrorBar({ error }: { error?: Error }) {
-  const [showError, setShowError] = useState(error !== undefined)
-  const [prevError, setPrevError] = useState(error)
-
-  if (error) console.error(error)
-  /// Reset error visibility when error prop changes
-  if (error !== prevError) {
-    setPrevError(error)
-    setShowError(error !== undefined)
-  }
-
-  return <div className={cn('error-bar', showError && 'show-error')}>
-    <div className='error-content'>
-      <span>{error?.toString()}</span>
-      <button
-        aria-label='Close error message'
-        className='close-button'
-        onClick={() => { setShowError(false) }}>
-      &times;
-      </button>
-    </div>
   </div>
 }

src/components/ProgressBar.tsx

@@ -0,0 +1,25 @@
+import { useConfig } from '../hooks/useConfig'
+import { cn } from '../lib/utils.js'
+import styles from '../styles/ProgressBar.module.css'
+import VisuallyHidden from './VisuallyHidden.js'
+
+export default function ProgressBar({ value }: {value: number}) {
+  const { customClass } = useConfig()
+  if (value < 0 || value > 1) {
+    throw new Error('ProgressBar value must be between 0 and 1')
+  }
+  const roundedValue = Math.round(value * 100) / 100
+  const percentage = roundedValue.toLocaleString('en-US', { style: 'percent' })
+  return (
+    <div
+      className={cn(styles.progressBar, customClass?.progressBar)}
+      role='progressbar'
+      aria-valuenow={roundedValue}
+      aria-valuemin={0}
+      aria-valuemax={1}
+    >
+      <VisuallyHidden>{percentage}</VisuallyHidden>
+      <div style={{ width: percentage }} role="presentation" />
+    </div>
+  )
+}

src/components/SideBar.tsx

@@ -0,0 +1,12 @@
+import { useConfig } from '../hooks/useConfig.js'
+import { cn } from '../lib/utils.js'
+import styles from '../styles/SideBar.module.css'
+
+export default function SideBar() {
+  const { customClass } = useConfig()
+  return <nav className={cn(styles.sideBar, customClass?.sideBar)}>
+    <div>
+      <a className={cn(styles.brand, customClass?.brand)} href='/'>hyperparam</a>
+    </div>
+  </nav>
+}

src/components/SlideCloseButton.tsx

@@ -0,0 +1,11 @@
+import { MouseEventHandler } from 'react'
+import { useConfig } from '../hooks/useConfig.js'
+import { cn } from '../lib/utils.js'
+import styles from '../styles/SlideCloseButton.module.css'
+
+export default function SlideCloseButton({ onClick }: { onClick: MouseEventHandler<HTMLButtonElement> | undefined }) {
+  const { customClass } = useConfig()
+  return (
+    <button className={ cn( styles.slideClose, customClass?.slideCloseButton ) } onClick={onClick}>&nbsp;</button>
+  )
+}