From 479031af4cbed3bb01b082cf826683430f2cffe6 Mon Sep 17 00:00:00 2001
From: Sylvain Lesage <severo@rednegra.net>
Date: Mon, 14 Apr 2025 23:53:13 +0200
Subject: [PATCH] use CSS modules + overriding class names

follows https://github.com/hyparam/hyperparam-cli/pull/215
---
 src/components/Cell/Cell.tsx           | 6 +++++-
 src/components/CellPanel/CellPanel.tsx | 5 ++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/Cell/Cell.tsx b/src/components/Cell/Cell.tsx
index 0b7bf0a8..0f31285e 100644
--- a/src/components/Cell/Cell.tsx
+++ b/src/components/Cell/Cell.tsx
@@ -1,10 +1,13 @@
 import { stringify } from 'hightable'
 import { asyncBufferFromUrl, parquetMetadataAsync } from 'hyparquet'
 import { useEffect, useState } from 'react'
+import { useConfig } from '../../hooks/useConfig.js'
 import type { FileSource } from '../../lib/sources/types.js'
 import { parquetDataFrame } from '../../lib/tableProvider.js'
+import { cn } from '../../lib/utils.js'
 import Breadcrumb from '../Breadcrumb/Breadcrumb.js'
 import Layout from '../Layout/Layout.js'
+import styles from '../TextView/TextView.module.css'
 
 interface CellProps {
   source: FileSource
@@ -19,6 +22,7 @@ export default function CellView({ source, row, col }: CellProps) {
   const [text, setText] = useState<string | undefined>()
   const [progress, setProgress] = useState<number>()
   const [error, setError] = useState<Error>()
+  const { customClass } = useConfig()
 
   // File path from url
   const { resolveUrl, requestInit, fileName } = source
@@ -69,7 +73,7 @@ export default function CellView({ source, row, col }: CellProps) {
       <Breadcrumb source={source} />
 
       {/* <Highlight text={text || ''} /> */}
-      <pre className="viewer text">{text}</pre>
+      <pre className={cn(styles.textView, customClass?.textView)}>{text}</pre>
     </Layout>
   )
 }
diff --git a/src/components/CellPanel/CellPanel.tsx b/src/components/CellPanel/CellPanel.tsx
index f6faf814..471a086c 100644
--- a/src/components/CellPanel/CellPanel.tsx
+++ b/src/components/CellPanel/CellPanel.tsx
@@ -1,5 +1,7 @@
 import { DataFrame, stringify } from 'hightable'
 import { useEffect, useState } from 'react'
+import { useConfig } from '../../hooks/useConfig.js'
+import { cn } from '../../lib/utils.js'
 import ContentWrapper from '../ContentWrapper/ContentWrapper.js'
 import SlideCloseButton from '../SlideCloseButton/SlideCloseButton.js'
 import styles from '../TextView/TextView.module.css'
@@ -18,6 +20,7 @@ interface ViewerProps {
  */
 export default function CellPanel({ df, row, col, setProgress, setError, onClose }: ViewerProps) {
   const [text, setText] = useState<string | undefined>()
+  const { customClass } = useConfig()
 
   // Load cell data
   useEffect(() => {
@@ -57,6 +60,6 @@ export default function CellPanel({ df, row, col, setProgress, setError, onClose
   </>
 
   return <ContentWrapper headers={headers}>
-    <code className={styles.textView}>{text}</code>
+    <code className={cn(styles.textView, customClass?.textView)}>{text}</code>
   </ContentWrapper>
 }