Move to peer dependencies

[nathanfranklin]

Overview

@wesleyboar , this works but i don't think we should merge in to tup-ui's main but instead move your target branch (and this) to the stand-alone repo.

This main goal of this PR is PR moves react-related libraries to peerDependencies in libs/core-components:

• react and react-dom are included in peerDependencies to avoid bundling a second instance of React and ensures compatibility with the React version used by the consuming project.
• react-router-dom, formik, react-table, react-dropzone, etc., are also part of the React ecosystem. These libraries are placed in peerDependencies because the consuming application is expected to provide them. This avoids potential version conflicts with the versions already used by the consuming application. (Although, for some of these, we could consider moving them depending on specific use cases 🤔).

Main issue

Moving s many libraries to be peer-dependencie is the main fix for error useLocation() in the context of a <Router> issue seen in TACC-Cloud/hazmapper#264.

But it is also tricky, as it's easy to get duplicate react-router-dom code showing up in the package due to the mono repo and the global nature of node_modules and package-lock.json. I kept hitting that, and then I thought the peer dependency wasn't the correct or complete fix. But it works with the following

rm -rf node_modules package-lock.json
npm install --include=optional --workspace=libs/core-components --force
npx nx build core-components --skip-nx-cache
npm pack --workspace=libs/core-components --pack-destination=.

and then built a beta release for 0.0.3

npm version prerelease --preid=beta --workspace=libs/core-components
npm publish --dry-run --tag beta --workspace=libs/core-components

Notes

Todo

• fix failing ci
• ensure TUP runs with updated dependencies; package-lock.json needs to be updated. NOTE i had to tweak the dockerfile for the cms image to be built; I haven't pushed that change as not certain if its due to be being on a mac.

[wesleyboar]

I do not fully grasp the details of the changes, but high-level — i.e. "fix dependencies, tweak build process" — this looks like an acceptable way to solve the router bug.

I commented on one dependency that I think is duplicated. After that is explained/resolved, I don't mind merging this in.

The sooner we collapse this stack of PRs (main 🛑 #463 ⬅️ #465 ⬅️ #484), the sooner we can move this to its own repo, at which point the nx/monorepo-complexity could be stripped, which I think will make the codebase more approachable.

[nathanfranklin]

@wesleyboar and @sophia-massie

good to review. note the following; i:

NOTE i had to tweak the dockerfile for the cms image to be built; I haven't pushed that change as not certain if its due to be being on a mac.

i had to do so curious if just me or something needs to be fixed there:

-FROM node:20 as node_build
+FROM --platform=linux/amd64 node:20 as node_build

[wesleyboar]

@nathanfranklin,

I resolved the merge conflicts locally. I am testing. It's a chore you needn't do. I think I got it. I'll commit when I'm sure.

Regarding FROM node:20 as node_build causing error, I got it too; I am also on a Mac. Please commit that change.

• We will not merge this to main.
• Committing it gives tup-ui a record of and context for the solution.

[wesleyboar]

Changes

• merged in target branch (which has latest from main)
• resolved merge conflicts (8065676)

Testing & UI

TUP-UI

1. Run npx nx serve tup-ui and npx nx serve tup-cms
2. Open http://localhost:8000/.
3. Log in to Portal.
4. Poke around,.
5. Verify everything looks like dev server.

UI skipped.¹

Core-Components Demo

1. Run npx nx serve core-components
2. Open http://localhost:4400/.
3. See Button.
4. Verify it shows four button types that respond to state change.

Video

core-components.demo.mov

UI-Patterns (Manual Demo)

1. Run npx nx serve tup-ui.
2. Open http://localhost:4200/.
3. Scroll & Test.
4. Verify stuff looks and works like before.

UI skipped.²

Footnotes

1. Because it would include data maybe inappropriate for public. ↩

2. Because video was too big and this demo is outdated anyway. ↩