Reusable movable modal

[srallen]

Please request review from @zooniverse/frontend team. If PR is related to design, please request review from @beckyrother in addition.

Package: lib-react-components

Describe your changes:
The heart of this was already approved in #1661, but it was reverted because it was breaking the next.js app builds with a window is not defined error when building for SSR. After nearly two days of debugging, I found that the issue was with react-draggable, a dependency of react-rnd. It seems the likely culprit is what was described in react-grid-layout/react-draggable#472. It appears this has been patched, but I can't 100% confirm this because I couldn't figure out how to successfully get react-rnd to use an updated version of react-draggable using yarn resolutions in the workspace. I can get the builds to work again by locking react-rnd to version 10.1.0, which is not a longterm solution, but works for now.

Please do check that the builds are working for you either using yarn build or docker-compose -f docker-compose-prod.yml build --pull

Review Checklist

General

• Are the tests passing locally and on Travis?
• Is the documentation up to date?

Components

• Has a storybook story been created or updated?
• Is the component accessible?
  • Can it be used with a screen reader? BBC guide to testing with VoiceOver
  • Can it be used from the keyboard? WebAIM guide to keyboard testing
  • Is it passing accessibility checks in the storybook?

Apps

• Does it work in all major browsers: Firefox, Chrome, Edge, Safari?
• Does it work on mobile?
• Can you yarn panic && yarn bootstrap or docker-compose up --build and app works as expected?

Publishing

• Is the changelog updated?
• Are the dependencies updated for apps and libraries that are using the newly published library?

Post-merging

• Did the app deploy to https://frontend.preview.zooniverse.org/projects/:project-name/:owner or https://frontend.preview.zooniverse.org/about?
• Is the new feature working or bug now fixed?
  • Is there a Talk or blog post written to announce the new feature(s)?
• Is the design working across browsers (Firefox, Chrome, Edge, Safari) and mobile?
  • Is this approved by our designer?
• Is this ready for production deployment?

[wgranger]

Unfortunately I could not get this to build. To test it out I removed node_modules and did a fresh yarn install, followed by a yarn build at the root level. The build works fine until getting to the @zooniverse/fe-content-pages where I see the window is not defined error.

Does this match the original error, or is there something I could be doing incorrectly in preparing the build?

[srallen]

@wgranger that's annoying. I thought it was working w/ 10.1.0. I locked it to 10.0.0 which locks react-draggable to v3.x instead of 4.0.3 (which I had thought worked). Try it again and also double check the react-draggable version is v.3.x by using yarn why react-draggable. Thanks!

[eatyourgreens]

I've tried

yarn panic-button
yarn bootstrap

on this branch, then yarn build for each of the Next apps, and they built without errors.

@wgranger the packages have to be built in a certain order, so make sure to run the bootstrap script first, to build the app dependencies, before building the apps.

[eatyourgreens]

Here's my local setup.

yarn why v1.22.4
[1/4] 🤔  Why do we have the module "react-draggable"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "react-draggable@4.2.0"
info Has been hoisted to "react-draggable"
info Reasons this module exists
   - "workspace-aggregator-085ab373-3112-404c-9b3b-f7a74c02fa21" depends on it
   - Hoisted from "_project_#@zooniverse#classifier#react-rnd#react-draggable"
   - Hoisted from "_project_#@zooniverse#fe-content-pages#@storybook#react#@storybook#core#@storybook#ui#react-draggable"
info Disk size without dependencies: "504KB"
info Disk size with unique dependencies: "732KB"
info Disk size with transitive dependencies: "860KB"
info Number of shared dependencies: 6
=> Found "react-rnd#react-draggable@3.3.0"
info This module exists because "_project_#@zooniverse#react-components#react-rnd" depends on it.
info Disk size without dependencies: "428KB"
info Disk size with unique dependencies: "656KB"
info Disk size with transitive dependencies: "784KB"
info Number of shared dependencies: 6
✨  Done in 2.31s.

So react components uses version 3 but content pages uses 4, via the storybook?

[srallen]

@eatyourgreens yeah, storybook uses it, but client side, so it doesn't error like the next.js apps did with >4.x for react-draggable. I think the latest version might work, but react-rnd hasn't updated yet. Could issue a PR for that at another time.

[srallen]

I merged #1676 into this which is approved by @shaunanoordin

[wgranger]

All good. Running yarn panic-button and yarn bootstrap first put things in order. This is building fine and still functions as expected on Storybook