findr

findr is a set of utility libraries for building find and replace UIs in Javascript.

---

Documentation

Local Package	NPM Package	Tutorial	Description
fnr-text	@findr/text	@findr/text tutorial	all the logic behind a find-and-replace feature
fnr-react	@findr/react		state management needed to build your own find-and-replace components
fnr-mui	@findr/mui		library of GUI components for find-and-replace based on @mui/material
fnr-perf	@findr/perf		Pipeline and Actions needed for find-and-replace scripture using proskomma-json-tools

API reference documentation

---

Contributing

Support

Join the Open Components Ecosystem Discord for help.

Getting Started

All commands (and package.json scripts) should be executed from root and not from the packages directories.

Install dependencies and launch the playground:

pnpm install
pnpm nx preview fnr-pg

Monorepo Tools

This repo is organized as a monorepo and uses the following Javascript tools:

• Nx, a build system
• pnpm, package manager - like npm

For those new to the Nx and/or pnpm ecosystem here are common commands used in this project:

• Creating a new react or javascript library, i.e:

  pnpm nx g[enerate] lib[rary] --publishable --importPath=@findr/new --name=fnr-new

• Creating a component in an existing react package, i.e:

  pnpm nx g[enerate] c[omponent] --project=fnr-mui

• Building a library, i.e:

  pnpm nx build fnr-mui

• Running a script from package's package.json, say start, i.e:

  pnpm nx preview fnr-pg

• Adding a package dependency should also be done from root, i.e:

  pnpm add [package-name]

• See a diagram of the dependencies of the projects:

  nx graph