Add configuration options to tweak the welcome popop (#217)

see hyparam/space#21

Author: severo

src/components/Welcome/Welcome.test.tsx

@@ -1,5 +1,6 @@
 import { fireEvent, render } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
+import { ConfigProvider } from '../../hooks/useConfig.js'
 import Welcome from './Welcome.js'
 
 describe('Welcome Component', () => {
@@ -64,4 +65,18 @@ describe('Welcome Component', () => {
     fireEvent.keyDown(window, { key: 'Enter' })
     expect(onClose).not.toHaveBeenCalled()
   })
+
+  it('renders custom content and button text', () => {
+    const onClose = vi.fn()
+    const customContent = <p>Custom welcome message</p>
+    const customButtonText = 'Custom Got it'
+    const { getByText } = render(
+      <ConfigProvider value={{ welcome: { content: customContent, buttonText: customButtonText } }}>
+        <Welcome onClose={onClose} />
+      </ConfigProvider>
+    )
+
+    expect(getByText('Custom welcome message')).toBeDefined()
+    expect(getByText('Custom Got it')).toBeDefined()
+  })
 })

src/components/Welcome/Welcome.tsx

@@ -12,7 +12,7 @@ interface WelcomePopupProps {
  * Clicking outside the popup or pressing Escape will dismiss it.
  */
 export default function Welcome({ onClose }: WelcomePopupProps) {
-  const { customClass } = useConfig()
+  const { customClass, welcome } = useConfig()
   // Close popup when clicking outside
   function handleBackdropClick(e: MouseEvent) {
     if (e.target === e.currentTarget) {
@@ -35,18 +35,20 @@ export default function Welcome({ onClose }: WelcomePopupProps) {
   return (
     <div className={cn(styles.welcome, customClass?.welcome)} onClick={handleBackdropClick}>
       <div>
-        <h2>npx hyperparam</h2>
-        <p>
+        {welcome?.content ?? <>
+          <h2>npx hyperparam</h2>
+          <p>
           This is the <a href="https://hyperparam.app">Hyperparam</a> cli for local data viewing.
-        </p>
-        <p>
+          </p>
+          <p>
           This tool lets you browse and explore large datasets particularly in parquet format.
-        </p>
-        <p>
+          </p>
+          <p>
           Supported file types include Parquet, CSV, JSON, Markdown, and Text.
-        </p>
+          </p>
+        </>}
         <button onClick={onClose}>
-          Got it
+          {welcome?.buttonText ?? 'Got it'}
         </button>
       </div>
     </div>

src/hooks/useConfig.ts

@@ -1,4 +1,4 @@
-import { createContext, useContext } from 'react'
+import { ReactNode, createContext, useContext } from 'react'
 
 /**
  * Config is a flat object of key-value pairs.
@@ -37,6 +37,10 @@ export interface Config {
     minWidth?: number
     defaultWidth?: number
   }
+  welcome?: {
+    content?: ReactNode
+    buttonText?: string
+  }
 }
 
 const ConfigContext = createContext<Config>({})