diff --git a/lib/platform-bible-react/.vscode/launch.json b/lib/platform-bible-react/.vscode/launch.json new file mode 100644 index 0000000000..348cdb3e72 --- /dev/null +++ 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": ["/**"] + } + ] +} diff --git a/lib/platform-bible-react/README.md b/lib/platform-bible-react/README.md index 3fc353997e..4c0a822d5c 100644 --- 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 new file mode 100644 index 0000000000..06dc4ac051 --- /dev/null +++ b/lib/platform-bible-react/index.html @@ -0,0 +1,12 @@ + + + + + + platform-bible-react Preview + + +
+ + + diff --git a/lib/platform-bible-react/src/preview/README.md b/lib/platform-bible-react/src/preview/README.md new file mode 100644 index 0000000000..5c4873edf3 --- /dev/null +++ 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 new file mode 100644 index 0000000000..e69de29bb2 diff --git a/lib/platform-bible-react/src/preview/app.component.tsx b/lib/platform-bible-react/src/preview/app.component.tsx new file mode 100644 index 0000000000..6e5c680704 --- /dev/null +++ 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 ( + <> +

platform-bible-react Preview

+

+ Edit lib\platform-bible-react\src\preview\app.component.tsx and save to see + updates +

+

+ +

+ + ); +} + +export default App; diff --git a/lib/platform-bible-react/src/preview/index.tsx b/lib/platform-bible-react/src/preview/index.tsx new file mode 100644 index 0000000000..c0d4e6df5e --- /dev/null +++ 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( + + + , +); diff --git a/lib/platform-bible-utils/README.md b/lib/platform-bible-utils/README.md index 5b8207137a..e980078020 100644 --- 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`