Merge pull request #93 from chuanqisun/wasm-demo-improvements

Wasm demo improvements

cozo-lib-wasm/wasm-react-demo/src/App.js

@@ -6,11 +6,11 @@
  * You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import './App.css';
 import {
     Button,
     Checkbox,
     Classes,
+    Colors,
     Dialog,
     FileInput,
     InputGroup,
@@ -20,10 +20,12 @@ import {
     Toaster
 } from "@blueprintjs/core";
 import { Cell, Column, Table2 } from "@blueprintjs/table";
-import React, {useEffect, useState} from "react";
-import init, {CozoDb} from "cozo-lib-wasm";
 import { parse } from "ansicolor";
+import init, { CozoDb } from "cozo-lib-wasm";
 import { saveAs } from 'file-saver';
+import React, { useEffect, useState } from "react";
+import './App.css';
+import { useBlueprintThemeClassName, usePreferredColorScheme } from './hooks/use-color-scheme';
 
 
 function App() {
@@ -44,6 +46,9 @@ function App() {
         })
     }, []);
 
+    const colorScheme = usePreferredColorScheme();
+    useBlueprintThemeClassName(colorScheme);
+
     const renderCell = (colIdx) => (rowIdx) => <Cell>
         {displayValue(queryResults.rows[rowIdx][colIdx])}
     </Cell>
@@ -70,7 +75,7 @@ function App() {
         if (typeof v === 'string') {
             return v
         } else {
-            return <span style={{color: "#184A90"}}>{JSON.stringify(v)}</span>
+            return <span style={{color: colorScheme === "light" ? Colors.BLUE2 : Colors.BLUE5}}>{JSON.stringify(v)}</span>
         }
     }
 
@@ -142,6 +147,7 @@ function App() {
                         intent={Intent.PRIMARY}
                         onChange={e => setQueryText(e.target.value)}
                         onKeyDown={handleKeyDown}
+                        spellCheck="false"
                         value={queryText}
                     />
                     {showParams && <TextArea
@@ -151,6 +157,7 @@ function App() {
                         large={true}
                         onChange={e => setParams(e.target.value)}
                         onKeyDown={handleKeyDown}
+                        spellCheck="false"
                         value={params}
                     />}
                 </div>
@@ -203,7 +210,7 @@ function App() {
             </pre> : null}
             {queryResults ? (queryResults.rows && queryResults.headers ?
                 <Table2
-                    cellRendererDependencies={queryResults.rows}
+                    cellRendererDependencies={[renderCell, ...queryResults.rows]}
                     numRows={queryResults.rows.length}
                 >
                     {queryResults.headers.map((n, idx) => <Column

cozo-lib-wasm/wasm-react-demo/src/hooks/use-color-scheme.js

@@ -0,0 +1,35 @@
+import { useEffect, useState } from "react";
+
+/**
+ * Detect user preferred color scheme based on OS/browser settings
+ * @returns {'light' | 'dark'}
+ */
+export function usePreferredColorScheme() {
+  const [colorScheme, setColorScheme] = useState("light");
+
+  useEffect(() => {
+    // reference: https://blueprintjs.com/docs/#core/typography.dark-theme
+    const updateColorScheme = (mediaQueryOrEvent) => setColorScheme(mediaQueryOrEvent.matches ? "dark" : "light");
+
+    const mediaQuery = window.matchMedia?.("(prefers-color-scheme: dark)");
+    if (!mediaQuery) return;
+
+    updateColorScheme(mediaQuery);
+
+    mediaQuery.addEventListener("change", updateColorScheme);
+    return () => mediaQuery.removeEventListener("change", updateColorScheme);
+  }, []);
+
+  return colorScheme;
+}
+
+/**
+ * Apply Blueprint design system's recommended theme class name to the body element
+ * @param {'light' | 'dark'} colorScheme
+ */
+export function useBlueprintThemeClassName(colorScheme) {
+  useEffect(() => {
+    // reference: https://blueprintjs.com/docs/#core/typography.dark-theme
+    document.body.classList[colorScheme === "dark" ? "add" : "remove"]("bp4-dark");
+  }, [colorScheme]);
+}

cozo-lib-wasm/wasm-react-demo/src/index.css

@@ -6,6 +6,10 @@
  * You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
+:root {
+  color-scheme: dark light;
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',