reverse the config keys to group all class names under customClass

Author: severo

src/components/Layout.tsx

@@ -1,17 +1,14 @@
 import { ReactNode, useEffect, useState } from 'react'
 import { cn } from '../lib/utils.js'
-import SideBar, { SideBarConfig } from './SideBar.js'
-import Welcome, { WelcomeConfig } from './Welcome.js'
-
-export type LayoutConfig = WelcomeConfig & SideBarConfig
+import SideBar from './SideBar.js'
+import Welcome from './Welcome.js'
 
 interface LayoutProps {
   children: ReactNode
   className?: string
   progress?: number
   error?: Error
   title?: string
-  config?: LayoutConfig
 }
 
 /**
@@ -24,9 +21,8 @@ interface LayoutProps {
  * @param props.progress - progress bar value
  * @param props.error - error message to display
  * @param props.title - page title
- * @param props.config - configuration for the layout
  */
-export default function Layout({ children, className, progress, error, title, config }: LayoutProps) {
+export default function Layout({ children, className, progress, error, title }: LayoutProps) {
   const [showWelcome, setShowWelcome] = useState(false)
 
   // Check localStorage on mount to see if the user has seen the welcome popup
@@ -47,7 +43,7 @@ export default function Layout({ children, className, progress, error, title, co
   }, [title])
 
   return <main className='main'>
-    <SideBar config={config} />
+    <SideBar />
     <div className='content-container'>
       <div className={cn('content', className)}>
         {children}
@@ -59,7 +55,7 @@ export default function Layout({ children, className, progress, error, title, co
         <div style={{ width: `${100 * progress}%` }} />
       </div>
     }
-    {showWelcome && <Welcome onClose={handleCloseWelcome} config={config}/>}
+    {showWelcome && <Welcome onClose={handleCloseWelcome} />}
   </main>
 }
 

src/components/SideBar.tsx

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

src/components/Welcome.tsx

@@ -1,23 +1,18 @@
 import { MouseEvent, useEffect } from 'react'
+import { useConfig } from '../hooks/useConfig.js'
 import { cn } from '../lib/utils.js'
 import styles from '../styles/Welcome.module.css'
 
-export interface WelcomeConfig {
-  welcome?: {
-    className?: string
-  }
-}
-
 interface WelcomePopupProps {
   onClose: () => void,
-  config?: WelcomeConfig
 }
 
 /**
  * Welcome popup component shown to first-time users.
  * Clicking outside the popup or pressing Escape will dismiss it.
  */
-export default function Welcome({ onClose, config }: WelcomePopupProps) {
+export default function Welcome({ onClose }: WelcomePopupProps) {
+  const { customClass } = useConfig()
   // Close popup when clicking outside
   function handleBackdropClick(e: MouseEvent) {
     if (e.target === e.currentTarget) {
@@ -38,7 +33,7 @@ export default function Welcome({ onClose, config }: WelcomePopupProps) {
   }, [onClose])
 
   return (
-    <div className={cn(styles.welcome, config?.welcome?.className)} onClick={handleBackdropClick}>
+    <div className={cn(styles.welcome, customClass?.welcome)} onClick={handleBackdropClick}>
       <div>
         <h2>npx hyperparam</h2>
         <p>

src/components/viewers/ParquetView.tsx

@@ -29,7 +29,7 @@ export default function ParquetView({ source, setProgress, setError }: ViewerPro
   const [isLoading, setIsLoading] = useState<boolean>(true)
   const [content, setContent] = useState<Content>()
   const [cell, setCell] = useState<{ row: number, col: number } | undefined>()
-  const { highTable, routes } = useConfig()
+  const { customClass, routes } = useConfig()
 
   useEffect(() => {
     async function loadParquetDataFrame() {
@@ -102,7 +102,7 @@ export default function ParquetView({ source, setProgress, setError }: ViewerPro
       onDoubleClickCell={onDoubleClickCell}
       onMouseDownCell={onMouseDownCell}
       onError={setError}
-      className={cn(styles.hightable, highTable?.className)}
+      className={cn(styles.hightable, customClass?.highTable)}
     />}
 
     {isLoading && <div className='center'><Spinner /></div>}

src/hooks/useConfig.ts

@@ -8,8 +8,11 @@ import { createContext, useContext } from 'react'
  * It gives a way to pass additional values to the components, for example custom CSS classes.
  */
 export interface Config {
-  highTable?: {
-    className?: string;
+  customClass?: {
+    brand?: string
+    highTable?: string
+    sideBar?: string
+    welcome?: string
   }
   routes?: {
     getSourceRouteUrl?: (params: { sourceId: string }) => string
@@ -18,7 +21,7 @@ export interface Config {
   slidePanel?: {
     minWidth?: number
     defaultWidth?: number
-  }
+  },
 }
 
 const ConfigContext = createContext<Config>({})