Added platform-bible-react preview page, revised readmes (#870)

paranext · Apr 23, 2024 · 1fba921 · 1fba921
2 parents d719195 + 362a7fb
commit 1fba921
Show file tree

Hide file tree

Showing 8 changed files with 89 additions and 18 deletions.
diff --git a/lib/platform-bible-react/.vscode/launch.json b/lib/platform-bible-react/.vscode/launch.json
@@ -0,0 +1,16 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Preview platform-bible-react",
+      "type": "node",
+      "request": "launch",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run", "start"],
+      "skipFiles": ["<node_internals>/**"]
+    }
+  ]
+}
diff --git a/lib/platform-bible-react/README.md b/lib/platform-bible-react/README.md
@@ -17,17 +17,19 @@ TODO:
 
 #### Setting up
 
-To set up the dev environment to build, you must do a couple of things **in order**:
+To set up the dev environment to build, you must run the following:
 
-1. `npm i` (here)
-2. `npm i --ignore-scripts` (in `paranext-core` root)
+```bash
+npm i
+```
+
+#### Previewing `platform-bible-react`
 
-Note: `--ignore-scripts` is only to prevent unnecessary work. You can leave it out if you want.
+Once you have set up your environment, you can run the following command in this folder to preview `platform-bible-react` components (`src\preview\app.component.tsx`):
 
-Note: any time you run any `npm` commands related to installing or uninstalling packages, you must
-run `npm i --ignore-scripts` in `paranext-core` root again in order to run commands in here
-successfully. This used to be run automatically, but linux developers were experiencing significant
-issues with it.
+```bash
+npm start
+```
 
 #### Building `platform-bible-react`
 

diff --git a/lib/platform-bible-react/index.html b/lib/platform-bible-react/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>platform-bible-react Preview</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/preview/index.tsx"></script>
+  </body>
+</html>
diff --git a/lib/platform-bible-react/src/preview/README.md b/lib/platform-bible-react/src/preview/README.md
@@ -0,0 +1,4 @@
+This folder contains a preview site to play with `platform-bible-react` components in a live,
+hot-reloading environment without having to rebuild and run Platform.Bible every time.
+
+Run the preview with `npm start`.
diff --git a/lib/platform-bible-react/src/preview/app.component.css b/lib/platform-bible-react/src/preview/app.component.css
diff --git a/lib/platform-bible-react/src/preview/app.component.tsx b/lib/platform-bible-react/src/preview/app.component.tsx
@@ -0,0 +1,29 @@
+import { useState } from 'react';
+import './app.component.css';
+import { ScriptureReference } from 'platform-bible-utils';
+import { RefSelector } from '..';
+
+const defaultScrRef: ScriptureReference = {
+  bookNum: 1,
+  chapterNum: 1,
+  verseNum: 1,
+};
+
+function App() {
+  const [scrRef, setScrRef] = useState(defaultScrRef);
+
+  return (
+    <>
+      <h1>platform-bible-react Preview</h1>
+      <p>
+        Edit <code>lib\platform-bible-react\src\preview\app.component.tsx</code> and save to see
+        updates
+      </p>
+      <p>
+        <RefSelector scrRef={scrRef} handleSubmit={setScrRef} />
+      </p>
+    </>
+  );
+}
+
+export default App;
diff --git a/lib/platform-bible-react/src/preview/index.tsx b/lib/platform-bible-react/src/preview/index.tsx
@@ -0,0 +1,14 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app.component';
+
+const container = document.getElementById('root');
+if (!container) {
+  throw new Error('Document root element not found!');
+}
+
+createRoot(container).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
diff --git a/lib/platform-bible-utils/README.md b/lib/platform-bible-utils/README.md
@@ -17,17 +17,11 @@ TODO:
 
 #### Setting up
 
-To set up the dev environment to build, you must do a couple of things **in order**:
+To set up the dev environment to build, you must run the following:
 
-1. `npm i` (here)
-2. `npm i --ignore-scripts` (in `paranext-core` root)
-
-Note: `--ignore-scripts` is only to prevent unnecessary work. You can leave it out if you want.
-
-Note: any time you run any `npm` commands related to installing or uninstalling packages, you must
-run `npm i --ignore-scripts` in `paranext-core` root again in order to run commands in here
-successfully. This used to be run automatically, but linux developers were experiencing significant
-issues with it.
+```bash
+npm i
+```
 
 #### Building `platform-bible-utils`