From 842cf0c028ee81318d3eb1858c1e7b0fd7e56db3 Mon Sep 17 00:00:00 2001 From: Rolf Heij Date: Tue, 17 Sep 2024 14:34:18 -0400 Subject: [PATCH 1/6] Update word list styling --- .../src/word-content-viewer.component.tsx | 4 +-- .../src/word-list.web-view.scss | 30 +++++++++++----- .../src/word-list.web-view.tsx | 34 ++++++++++++------- .../src/word-table.component.tsx | 3 +- 4 files changed, 47 insertions(+), 24 deletions(-) diff --git a/src/paratext-bible-word-list/src/word-content-viewer.component.tsx b/src/paratext-bible-word-list/src/word-content-viewer.component.tsx index 41db223..85b41ce 100644 --- a/src/paratext-bible-word-list/src/word-content-viewer.component.tsx +++ b/src/paratext-bible-word-list/src/word-content-viewer.component.tsx @@ -41,8 +41,8 @@ export default function WordContentViewer({ selectedWord }: { selectedWord: Word }, [selectedWord]); return ( - - +
+ Reference Text diff --git a/src/paratext-bible-word-list/src/word-list.web-view.scss b/src/paratext-bible-word-list/src/word-list.web-view.scss index 300bdc9..c71eb2f 100644 --- a/src/paratext-bible-word-list/src/word-list.web-view.scss +++ b/src/paratext-bible-word-list/src/word-list.web-view.scss @@ -1,17 +1,31 @@ +html { + height: 100%; +} + +body { + height: 100%; + margin: 0; +} + +#root { + height: 100%; +} + .word-list { - overflow: auto; - padding: 10px; + height: 100%; + display: flex; + flex-direction: column; .filters { display: flex; align-items: center; } - - .filters > * { - margin-right: 10px; - } } -.word-list > * { - margin-top: 10px; +.word-component { + flex: 1 1 0%; + overflow: auto; + border-radius: calc(var(--radius) - 2px); + border-width: 1px; + margin: 0.25rem /* 4px */; } diff --git a/src/paratext-bible-word-list/src/word-list.web-view.tsx b/src/paratext-bible-word-list/src/word-list.web-view.tsx index 7c67067..38ade65 100644 --- a/src/paratext-bible-word-list/src/word-list.web-view.tsx +++ b/src/paratext-bible-word-list/src/word-list.web-view.tsx @@ -1,7 +1,7 @@ import { useData } from '@papi/frontend/react'; import { WebViewProps } from '@papi/core'; import { ChangeEvent, useEffect, useMemo, useState } from 'react'; -import { ComboBox, Input, ScriptureReference, Switch } from 'platform-bible-react'; +import { ComboBox, Input, Label, ScriptureReference, ShadCnSwitch } from 'platform-bible-react'; import type { WordListEntry } from 'paratext-bible-word-list'; import WordContentViewer from './word-content-viewer.component'; import WordTable from './word-table.component'; @@ -128,28 +128,38 @@ globalThis.webViewComponent = function WordListWebView({ value={wordFilter} onChange={(event) => onChangeWordFilter(event)} /> - { + { setShowWordCloud(!showWordCloud); setSelectedWord(undefined); }} /> -

{showWordCloud ? 'Cloud' : 'Table'} view

+ + {loading &&

Generating word list

} {!loading && wordList && (showWordCloud ? ( - +
+ +
) : ( - findSelectedWordEntry(word)} - /> +
+ findSelectedWordEntry(word)} + /> +
))} - {selectedWord && } + {selectedWord && ( +
+ +
+ )} ); }; diff --git a/src/paratext-bible-word-list/src/word-table.component.tsx b/src/paratext-bible-word-list/src/word-table.component.tsx index 57bb3da..19c97c6 100644 --- a/src/paratext-bible-word-list/src/word-table.component.tsx +++ b/src/paratext-bible-word-list/src/word-table.component.tsx @@ -67,8 +67,7 @@ export default function WordTable({ wordList, fullWordCount, onWordClick }: Word return ( Date: Tue, 17 Sep 2024 15:32:01 -0400 Subject: [PATCH 2/6] Add margin to filters --- package-lock.json | 3 +++ src/paratext-bible-word-list/src/word-list.web-view.scss | 4 ++++ 2 files changed, 7 insertions(+) diff --git a/package-lock.json b/package-lock.json index cf3dc99..a844b44 100644 --- a/package-lock.json +++ b/package-lock.json @@ -122,14 +122,17 @@ "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-switch": "^1.1.0", "@radix-ui/react-tabs": "^1.0.4", + "@radix-ui/react-toast": "^1.2.1", "@tanstack/react-table": "^8.19.2", "autoprefixer": "^10.4.19", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", "cmdk": "^1.0.0", "lucide-react": "^0.367.0", + "next-themes": "^0.3.0", "platform-bible-utils": "file:../platform-bible-utils", "react-data-grid": ">=7.0.0-beta.34", + "sonner": "^1.5.0", "tailwind-merge": "^2.2.2", "tailwindcss-animate": "^1.0.7" }, diff --git a/src/paratext-bible-word-list/src/word-list.web-view.scss b/src/paratext-bible-word-list/src/word-list.web-view.scss index c71eb2f..e8fda54 100644 --- a/src/paratext-bible-word-list/src/word-list.web-view.scss +++ b/src/paratext-bible-word-list/src/word-list.web-view.scss @@ -20,6 +20,10 @@ body { display: flex; align-items: center; } + + .filters > * { + margin: 0.25rem /* 4px */; + } } .word-component { From 0a2cebe605d1d504b1e364d1ac7ad5b00904ed3d Mon Sep 17 00:00:00 2001 From: Rolf Heij Date: Wed, 18 Sep 2024 11:25:01 -0400 Subject: [PATCH 3/6] Add nicer loading spinner --- package-lock.json | 11 +++++ package.json | 1 + .../src/word-cloud.component.tsx | 6 +-- .../src/word-list.web-view.scss | 45 ++++++++++++++++--- .../src/word-list.web-view.tsx | 17 ++++--- 5 files changed, 65 insertions(+), 15 deletions(-) diff --git a/package-lock.json b/package-lock.json index a844b44..2f14f4f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -52,6 +52,7 @@ "eslint-plugin-react": "^7.34.1", "eslint-plugin-react-hooks": "^4.6.0", "glob": "^10.3.12", + "lucide-react": "^0.441.0", "papi-dts": "file:../paranext-core/lib/papi-dts", "platform-bible-react": "file:../paranext-core/lib/platform-bible-react", "prettier": "^3.2.5", @@ -8677,6 +8678,16 @@ "yallist": "^3.0.2" } }, + "node_modules/lucide-react": { + "version": "0.441.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.441.0.tgz", + "integrity": "sha512-0vfExYtvSDhkC2lqg0zYVW1Uu9GsI4knuV9GP9by5z0Xhc4Zi5RejTxfz9LsjRmCyWVzHCJvxGKZWcRyvQCWVg==", + "dev": true, + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc" + } + }, "node_modules/make-dir": { "version": "4.0.0", "dev": true, diff --git a/package.json b/package.json index f2449a5..0b35f9e 100644 --- a/package.json +++ b/package.json @@ -72,6 +72,7 @@ "eslint-plugin-react": "^7.34.1", "eslint-plugin-react-hooks": "^4.6.0", "glob": "^10.3.12", + "lucide-react": "^0.441.0", "papi-dts": "file:../paranext-core/lib/papi-dts", "platform-bible-react": "file:../paranext-core/lib/platform-bible-react", "prettier": "^3.2.5", diff --git a/src/paratext-bible-word-list/src/word-cloud.component.tsx b/src/paratext-bible-word-list/src/word-cloud.component.tsx index b79f75a..0c458b6 100644 --- a/src/paratext-bible-word-list/src/word-cloud.component.tsx +++ b/src/paratext-bible-word-list/src/word-cloud.component.tsx @@ -38,10 +38,10 @@ export default function WordCloud({ wordList }: WordCloudProps) { const fontSizeSetter = (data: CloudData) => fontScale(data.value); return ( - - {({ width }) => ( + + {({ width, height }) => ( * { margin: 0.25rem /* 4px */; } -} -.word-component { - flex: 1 1 0%; - overflow: auto; - border-radius: calc(var(--radius) - 2px); - border-width: 1px; - margin: 0.25rem /* 4px */; + .input { + margin: 0.25rem; + border-radius: 0.375rem; + border-width: 1px; + } + + .loader { + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + .spin { + margin: 1rem; + width: 1rem; + height: 1rem; + + animation: spin 1s linear infinite; + + @keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } + } + } + } + + .word-component { + flex: 1 1 0%; + overflow: auto; + margin: 0.25rem; + border-radius: 0.375rem; + border-width: 1px; + } } diff --git a/src/paratext-bible-word-list/src/word-list.web-view.tsx b/src/paratext-bible-word-list/src/word-list.web-view.tsx index 38ade65..11e456c 100644 --- a/src/paratext-bible-word-list/src/word-list.web-view.tsx +++ b/src/paratext-bible-word-list/src/word-list.web-view.tsx @@ -1,11 +1,12 @@ -import { useData } from '@papi/frontend/react'; import { WebViewProps } from '@papi/core'; -import { ChangeEvent, useEffect, useMemo, useState } from 'react'; -import { ComboBox, Input, Label, ScriptureReference, ShadCnSwitch } from 'platform-bible-react'; +import { useData } from '@papi/frontend/react'; +import { Loader2 } from 'lucide-react'; import type { WordListEntry } from 'paratext-bible-word-list'; +import { ComboBox, Input, Label, ScriptureReference, ShadCnSwitch } from 'platform-bible-react'; +import { ChangeEvent, useEffect, useMemo, useState } from 'react'; +import WordCloud from './word-cloud.component'; import WordContentViewer from './word-content-viewer.component'; import WordTable from './word-table.component'; -import WordCloud from './word-cloud.component'; const defaultScrRef: ScriptureReference = { bookNum: 1, @@ -124,6 +125,7 @@ globalThis.webViewComponent = function WordListWebView({ options={Object.values(Scope)} /> onChangeWordFilter(event)} @@ -139,7 +141,12 @@ globalThis.webViewComponent = function WordListWebView({ - {loading &&

Generating word list

} + {loading && ( +
+ + +
+ )} {!loading && wordList && (showWordCloud ? ( From d8c4924575eecab5bfcf33797287c84e928a679e Mon Sep 17 00:00:00 2001 From: Rolf Heij Date: Wed, 18 Sep 2024 13:30:02 -0400 Subject: [PATCH 4/6] Update Spinner to component from pbr --- package-lock.json | 11 ----------- package.json | 1 - .../src/word-list.web-view.scss | 17 ----------------- .../src/word-list.web-view.tsx | 12 +++++++++--- 4 files changed, 9 insertions(+), 32 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2f14f4f..a844b44 100644 --- a/package-lock.json +++ b/package-lock.json @@ -52,7 +52,6 @@ "eslint-plugin-react": "^7.34.1", "eslint-plugin-react-hooks": "^4.6.0", "glob": "^10.3.12", - "lucide-react": "^0.441.0", "papi-dts": "file:../paranext-core/lib/papi-dts", "platform-bible-react": "file:../paranext-core/lib/platform-bible-react", "prettier": "^3.2.5", @@ -8678,16 +8677,6 @@ "yallist": "^3.0.2" } }, - "node_modules/lucide-react": { - "version": "0.441.0", - "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.441.0.tgz", - "integrity": "sha512-0vfExYtvSDhkC2lqg0zYVW1Uu9GsI4knuV9GP9by5z0Xhc4Zi5RejTxfz9LsjRmCyWVzHCJvxGKZWcRyvQCWVg==", - "dev": true, - "license": "ISC", - "peerDependencies": { - "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc" - } - }, "node_modules/make-dir": { "version": "4.0.0", "dev": true, diff --git a/package.json b/package.json index 0b35f9e..f2449a5 100644 --- a/package.json +++ b/package.json @@ -72,7 +72,6 @@ "eslint-plugin-react": "^7.34.1", "eslint-plugin-react-hooks": "^4.6.0", "glob": "^10.3.12", - "lucide-react": "^0.441.0", "papi-dts": "file:../paranext-core/lib/papi-dts", "platform-bible-react": "file:../paranext-core/lib/platform-bible-react", "prettier": "^3.2.5", diff --git a/src/paratext-bible-word-list/src/word-list.web-view.scss b/src/paratext-bible-word-list/src/word-list.web-view.scss index 7375cb0..f0bb1d4 100644 --- a/src/paratext-bible-word-list/src/word-list.web-view.scss +++ b/src/paratext-bible-word-list/src/word-list.web-view.scss @@ -37,23 +37,6 @@ body { flex-direction: column; justify-content: center; align-items: center; - - .spin { - margin: 1rem; - width: 1rem; - height: 1rem; - - animation: spin 1s linear infinite; - - @keyframes spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } - } - } } .word-component { diff --git a/src/paratext-bible-word-list/src/word-list.web-view.tsx b/src/paratext-bible-word-list/src/word-list.web-view.tsx index 11e456c..2008aa8 100644 --- a/src/paratext-bible-word-list/src/word-list.web-view.tsx +++ b/src/paratext-bible-word-list/src/word-list.web-view.tsx @@ -1,8 +1,14 @@ import { WebViewProps } from '@papi/core'; import { useData } from '@papi/frontend/react'; -import { Loader2 } from 'lucide-react'; import type { WordListEntry } from 'paratext-bible-word-list'; -import { ComboBox, Input, Label, ScriptureReference, ShadCnSwitch } from 'platform-bible-react'; +import { + ComboBox, + Input, + Label, + ScriptureReference, + ShadCnSwitch, + Spinner, +} from 'platform-bible-react'; import { ChangeEvent, useEffect, useMemo, useState } from 'react'; import WordCloud from './word-cloud.component'; import WordContentViewer from './word-content-viewer.component'; @@ -143,7 +149,7 @@ globalThis.webViewComponent = function WordListWebView({ {loading && (
- +
)} From 101446adcecd2df1d5a875ef32970604a40b599d Mon Sep 17 00:00:00 2001 From: Rolf Heij Date: Mon, 23 Sep 2024 16:34:03 -0400 Subject: [PATCH 5/6] Change word cloud color scheme --- src/paratext-bible-word-list/src/word-cloud.component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/paratext-bible-word-list/src/word-cloud.component.tsx b/src/paratext-bible-word-list/src/word-cloud.component.tsx index 0c458b6..a137e7c 100644 --- a/src/paratext-bible-word-list/src/word-cloud.component.tsx +++ b/src/paratext-bible-word-list/src/word-cloud.component.tsx @@ -14,7 +14,7 @@ export interface CloudData { value: number; } -const colors = ['#d1160f', '#a8120d', '#7a0f0b', '#440705', '#3d0604', '#000000']; +const colors = ['#858585', '#919191', '#6b6b6b', '#4e4e4e', '#222222', '#000000']; export default function WordCloud({ wordList }: WordCloudProps) { const cloudData = useMemo((): CloudData[] => { From 686743bf42448f596b18e188f8e9f0e7729b62b4 Mon Sep 17 00:00:00 2001 From: Rolf Heij Date: Tue, 24 Sep 2024 11:39:44 -0400 Subject: [PATCH 6/6] Make header buttons ghost variant --- src/paratext-bible-word-list/src/word-table.component.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/paratext-bible-word-list/src/word-table.component.tsx b/src/paratext-bible-word-list/src/word-table.component.tsx index 19c97c6..cdeb416 100644 --- a/src/paratext-bible-word-list/src/word-table.component.tsx +++ b/src/paratext-bible-word-list/src/word-table.component.tsx @@ -28,7 +28,7 @@ const columns = (wordColumnTitle: string): ColumnDef[] => [ accessorKey: 'word', header: ({ column }) => { return ( - ); @@ -38,7 +38,7 @@ const columns = (wordColumnTitle: string): ColumnDef[] => [ accessorKey: 'count', header: ({ column }) => { return ( - );