overview

https://github.com/davidtheclark/react-aria-modal

flow

/**
 * ModalOrganism  <- inner domain content
 * - ModalMolecule |
 * - Overlay       v passed down from organism
 * - ModalBox     <| rendered into box
 *
 * - CloseIcon.   - passed in as element in box or module or overlay
 * - OverlayStore + ModalStore
 *   + provide lifecycle hooks through context (after/beforeOpen, after/beforeClose)
 *   + provide actions & selectors without refs (close, open, isVisible, .steps.list, .steps.index, .steps.current, steps.goto)
 * -
 */

details

And then to use ModalMolecule, ModalMoleculeWithOverlay, or another Molecule like ModalPopUp for swappable usage from quick view to share to steps to nested to mini pop-up (like after .addToFavorites)

And then the overlay store likely will connect to the event store for observable events that are usable for window sizing, scroll, resize, click, keydowns, and dragging to do [escape] to close and [drag] to close navigation and minicart + drag & drop for comparison

external

https://github.com/reactjs/react-modal

React modal has inline js styles, it's a modal that has an overlay that we can't use the overlay on its own, and it has config > atomic composable UI, and it doesn't have contextually provided actions, and it doesn't have a sharable event store for syncing all of our events to one store

https://github.com/tajo/react-portal http://uxmovement.com/buttons/when-to-use-a-button-or-link/

progress

• I am using this https://reactjs.org/docs/portals.html which I made a Portal React Container for
• the functionality of the overlay rendering with a store + modal is good for first step
• has client usage in product block, examples, and I've went through it with both deus and michael to get a good api - measure 2x cut once
• overlay + modal + stepper (nested) have stores
• critical most powerful lifecycle hooks enabled via context or props with logic for onBeforeOpen, onAfterOpen, onBeforeClose, onAfterClose
• am using https://reactjs.org/docs/context.html#passing-info-automatically-through-a-tree to ensure we can have a button that does the closing and opening passed in, or built into a reusable pre-built organism that has it so we can hot swap them

todo

multistep:

• connect lifecycle events to store
• add example of multi-step/navigation modal
• add example with overlay using the sidebar

popup:

• connect to event store
• add autodismissing logic and example
• add preset molecule for modal-as-popup
• add example of modal-as-popup (which is no-overlay + autodismissing)