Upgrade React tech stack and remove deprecated packages

[ampelectrecuted]

This issue tracks a major tech stack upgrade for the OmniBlocks front end. The goal is to update essential React ecosystem dependencies and remove unused or deprecated packages.

Upgrade the following core dependencies:

• react
• react-dom
• redux
• react-redux
• (audit for others commonly used, e.g., prop-types if present)

Remove the following unused/deprecated libraries:

• react-popover
• react-contextmenu
• (audit and clean up other legacy or unnecessary packages if found)

Acceptance Criteria:

• All upgrades are backward-compatible and pass CI
• Remove all direct and transitive usage of deprecated dependencies
• Codebase updated to use any new APIs/migration patterns required by library upgrades
• Project builds and runs as expected without runtime errors
• Update documentation or README with any breaking or notable changes

Tips:

• Review release notes for each upgraded package for any breaking changes.
• Use npm outdated/npm uninstall and code search to audit dependencies.

[ampelectrecuted]

made an issue with copilot

[ampelectrecuted]

@coderabbitai

[traycerai]

Plan

Observations

The project currently uses react@^16, react-dom@^16, redux@3.7.2, react-redux@5.0.7, react-popover@0.5.10, and react-contextmenu@2.9.4. Deprecated lifecycle methods (componentWillMount, componentWillReceiveProps) exist across 9 files. The app bootstraps with the old ReactDOM.render API in src/playground/app-target.js. The Redux store is created via createStore in src/lib/app-state-hoc.jsx. Dev tooling (enzyme-adapter-react-16, react-test-renderer@16) is also tied to React 16.

Approach

Upgrades are applied in dependency order: React 18 first (as it is the most impactful), then react-redux 9 and redux 5, then removal of react-popover and react-contextmenu with in-place replacements using existing CSS and event patterns already in the codebase. Deprecated lifecycle methods are migrated after, as some are unblocked only once React 18 is in place.

---

Implementation Plan

Step 1 — Upgrade react and react-dom to v18

In file:package.json:

• Bump react and react-dom in both dependencies and peerDependencies to ^18.0.0.
• Bump react-test-renderer in devDependencies to ^18.0.0 (must match React version exactly).
• Remove enzyme and enzyme-adapter-react-16 from devDependencies (Enzyme has no React 18 adapter; the existing test files that use shallow/mount from enzyme will need to be rewritten — flag this as a follow-up if unit tests are not in scope, but the packages must be removed to avoid peer-dep conflicts).
• In jest.setupFiles, remove the <rootDir>/test/helpers/enzyme-setup.js entry if enzyme is removed.

---

Step 2 — Migrate from ReactDOM.render to createRoot

In file:src/playground/app-target.js:

• Import createRoot from react-dom/client instead of the default ReactDOM import.
• Create the root once with createRoot(appTarget) and store it.
• Change the render function to call root.render(children) instead of ReactDOM.render(children, appTarget).
• The SplashEnd callback after render still works — keep it as-is after root.render(...).

---

Step 3 — Upgrade redux to v5 and react-redux to v9

In file:package.json:

• Bump redux to ^5.0.0.
• Bump react-redux to ^9.0.0.
• Bump redux-mock-store (devDependency) — verify v9 compatibility; if incompatible, replace with a simple manual store stub.

Key migration notes:

• createStore in file:src/lib/app-state-hoc.jsx will show a deprecation warning in Redux 5 but still works. Replace it with configureStore from @reduxjs/toolkit only if @reduxjs/toolkit is added as a dependency; otherwise, suppress the warning by using the legacy_createStore export from redux 5: import { legacy_createStore as createStore } from 'redux' — this is the lower-friction path since RTK is not currently in the codebase.
• The connect() API from react-redux remains fully supported in v9 — no forced migration to hooks is required for existing HOC components.
• combineReducers and compose APIs are unchanged.

---

Step 4 — Replace deprecated lifecycle methods

The following files use componentWillReceiveProps or componentWillMount and must migrate to UNSAFE_ prefixes (a safe mechanical rename that works in React 18) or to componentDidUpdate / componentDidMount as appropriate:

File	Method	Migration
file:src/containers/audio-selector.jsx	componentWillReceiveProps	Rename to UNSAFE_componentWillReceiveProps
file:src/containers/costume-tab.jsx	componentWillReceiveProps	Rename to UNSAFE_componentWillReceiveProps
file:src/containers/monitor-list.jsx	componentWillReceiveProps	Rename to UNSAFE_componentWillReceiveProps
file:src/containers/slider-monitor.jsx	componentWillReceiveProps	Rename to UNSAFE_componentWillReceiveProps
file:src/containers/sound-editor.jsx	componentWillReceiveProps	Rename to UNSAFE_componentWillReceiveProps
file:src/containers/sound-tab.jsx	componentWillReceiveProps	Rename to UNSAFE_componentWillReceiveProps
file:src/containers/tw-restore-point-manager.jsx	componentWillReceiveProps	Rename to UNSAFE_componentWillReceiveProps
file:src/lib/cloud-manager-hoc.jsx	componentWillReceiveProps	Rename to UNSAFE_componentWillReceiveProps
file:src/lib/drop-area-hoc.jsx	componentWillReceiveProps	Rename to UNSAFE_componentWillReceiveProps
file:src/lib/sortable-hoc.jsx	componentWillReceiveProps	Rename to UNSAFE_componentWillReceiveProps
file:src/lib/project-saver-hoc.jsx	componentWillMount	Move body into componentDidMount (safe — it only sets window.onbeforeunload and calls prop callbacks)

Using UNSAFE_ prefix for componentWillReceiveProps is the correct approach for React 18 — these will not throw, only the non-prefixed variants are removed from strict mode warnings escalation.

---

Step 5 — Remove react-popover and replace in direction-picker

react-popover is used only in file:src/components/direction-picker/direction-picker.jsx.

Replacement strategy: Build a lightweight controlled popover using a CSS-positioned <div> with position: absolute already in the project's existing CSS patterns (no new library needed).

In file:src/components/direction-picker/direction-picker.jsx:

• Remove the import Popover from 'react-popover' line.
• Replace the <Popover body={...} isOpen={props.popoverOpen} preferPlace="above" onOuterAction={props.onClosePopover}> wrapper with a wrapping <div style={{position: 'relative'}}>.
• Render the popover body content inside a conditionally rendered <div> that is absolutely positioned above the input (using a CSS module class in file:src/components/direction-picker/direction-picker.css).
• Add a transparent overlay <div> behind the popover (or use a document click listener in the parent container file:src/containers/direction-picker.jsx) to trigger onClosePopover on outside clicks, replicating onOuterAction.
• Remove react-popover from dependencies in file:package.json.

---

Step 6 — Remove react-contextmenu and replace with a custom implementation

react-contextmenu is used in three places:

1. file:src/components/context-menu/context-menu.jsx — thin wrapper that re-exports styled ContextMenu, MenuItem, BorderedMenuItem, DangerousMenuItem.
2. file:src/components/monitor/monitor.jsx — uses ContextMenuTrigger + ContextMenu with a ReactDOM.createPortal.
3. file:src/components/sprite-selector-item/sprite-selector-item.jsx — uses ContextMenuTrigger + ContextMenu per sprite item.

Replacement strategy: Custom implementation using native browser contextmenu events and a portal-rendered menu div.

sequenceDiagram
    participant User
    participant ContextMenuTrigger (new)
    participant ContextMenuPortal
    participant document

    User->>ContextMenuTrigger (new): right-click (contextmenu event)
    ContextMenuTrigger (new)->>ContextMenuPortal: setState({open: true, x, y})
    ContextMenuPortal->>document.body: portal render <nav> at {x,y}
    User->>document: click elsewhere
    document->>ContextMenuPortal: mousedown listener → close

Steps:

• In file:src/components/context-menu/context-menu.jsx: Rewrite to export a custom ContextMenu component (receives id, renders a portal <nav> at viewport coords when visible), a ContextMenuTrigger component (wraps children, listens to onContextMenu, emits open event by ID via a simple pub/sub or shared module-level registry), MenuItem, BorderedMenuItem, and DangerousMenuItem as styled <div role="menuitem"> elements.
• Keep the same exported API (ContextMenu, ContextMenuTrigger, MenuItem, BorderedMenuItem, DangerousMenuItem) so that file:src/components/monitor/monitor.jsx and file:src/components/sprite-selector-item/sprite-selector-item.jsx require minimal changes — only the import path needs to shift from react-contextmenu to ../context-menu/context-menu.jsx (already done for ContextMenu/MenuItem; only ContextMenuTrigger still imports from react-contextmenu directly in those two files).
• Update the direct import {ContextMenuTrigger} from 'react-contextmenu' lines in:
  • file:src/components/monitor/monitor.jsx → import from ../context-menu/context-menu.jsx
  • file:src/components/sprite-selector-item/sprite-selector-item.jsx → import from ../context-menu/context-menu.jsx
• The addon files (file:src/addons/contextmenu.js, file:src/addons/addons/drag-drop/userscript.js) reference .react-contextmenu CSS class names by DOM query selectors — update the CSS class names in the new custom component to preserve .react-contextmenu and .react-contextmenu--visible class names, or update those addon selectors to match the new class names.
• Update file:test/helpers/selenium-helper.js selector for contextMenu and spriteTile to match the new CSS class names if they change.
• Remove react-contextmenu from dependencies in file:package.json.

---

Step 7 — Audit and clean up remaining legacy packages

Review and update these additional packages flagged during the audit:

Package	Current	Action
prop-types	^15.5.10	Keep — still valid in React 18; no removal needed
react-intl	2.9.0	Flag for separate upgrade (v2 → v6 is a major effort with API changes; out of scope for this ticket)
intl	1.2.5	Can be removed — native Intl is supported in all target browsers
core-js	2.5.7	Upgrade to ^3.x — v2 is EOL
react-draggable	3.0.5	Upgrade to ^4.x — v3 has known React 17/18 issues
react-modal	3.9.1	Compatible with React 18 — keep
react-tooltip	3.8.0	Upgrade to ^5.x — v3 is unmaintained
webpack	4.47.0	Flag for separate upgrade to v5 (large scope)

---

Step 8 — Update peerDependencies and documentation

In file:package.json:

• Update peerDependencies to "react": "^18.0.0" and "react-dom": "^18.0.0".

In file:README.md:

• Add a section noting the upgrade to React 18, Redux 5, react-redux 9 and the removal of react-popover and react-contextmenu.
• Note the UNSAFE_ lifecycle method prefixes as an intermediate step pending full hook-based refactor.

Import In IDE

🤖 Prompt for AI Agents

## Observations

The project currently uses `react@^16`, `react-dom@^16`, `redux@3.7.2`, `react-redux@5.0.7`, `react-popover@0.5.10`, and `react-contextmenu@2.9.4`. Deprecated lifecycle methods (`componentWillMount`, `componentWillReceiveProps`) exist across 9 files. The app bootstraps with the old `ReactDOM.render` API in `src/playground/app-target.js`. The Redux store is created via `createStore` in `src/lib/app-state-hoc.jsx`. Dev tooling (`enzyme-adapter-react-16`, `react-test-renderer@16`) is also tied to React 16.

## Approach

Upgrades are applied in dependency order: React 18 first (as it is the most impactful), then react-redux 9 and redux 5, then removal of `react-popover` and `react-contextmenu` with in-place replacements using existing CSS and event patterns already in the codebase. Deprecated lifecycle methods are migrated after, as some are unblocked only once React 18 is in place.

---

## Implementation Plan

### Step 1 — Upgrade `react` and `react-dom` to v18

In `file:package.json`:
- Bump `react` and `react-dom` in both `dependencies` and `peerDependencies` to `^18.0.0`.
- Bump `react-test-renderer` in `devDependencies` to `^18.0.0` (must match React version exactly).
- Remove `enzyme` and `enzyme-adapter-react-16` from `devDependencies` (Enzyme has no React 18 adapter; the existing test files that use `shallow`/`mount` from enzyme will need to be rewritten — flag this as a follow-up if unit tests are not in scope, but the packages must be removed to avoid peer-dep conflicts).
- In `jest.setupFiles`, remove the `<rootDir>/test/helpers/enzyme-setup.js` entry if enzyme is removed.

---

### Step 2 — Migrate from `ReactDOM.render` to `createRoot`

In `file:src/playground/app-target.js`:
- Import `createRoot` from `react-dom/client` instead of the default `ReactDOM` import.
- Create the root once with `createRoot(appTarget)` and store it.
- Change the `render` function to call `root.render(children)` instead of `ReactDOM.render(children, appTarget)`.
- The `SplashEnd` callback after render still works — keep it as-is after `root.render(...)`.

---

### Step 3 — Upgrade `redux` to v5 and `react-redux` to v9

In `file:package.json`:
- Bump `redux` to `^5.0.0`.
- Bump `react-redux` to `^9.0.0`.
- Bump `redux-mock-store` (devDependency) — verify v9 compatibility; if incompatible, replace with a simple manual store stub.

Key migration notes:
- `createStore` in `file:src/lib/app-state-hoc.jsx` will show a deprecation warning in Redux 5 but still works. Replace it with `configureStore` from `@reduxjs/toolkit` **only if** `@reduxjs/toolkit` is added as a dependency; otherwise, suppress the warning by using the `legacy_createStore` export from redux 5: `import { legacy_createStore as createStore } from 'redux'` — this is the lower-friction path since RTK is not currently in the codebase.
- The `connect()` API from `react-redux` remains fully supported in v9 — no forced migration to hooks is required for existing HOC components.
- `combineReducers` and `compose` APIs are unchanged.

---

### Step 4 — Replace deprecated lifecycle methods

The following files use `componentWillReceiveProps` or `componentWillMount` and must migrate to `UNSAFE_` prefixes (a safe mechanical rename that works in React 18) or to `componentDidUpdate` / `componentDidMount` as appropriate:

| File | Method | Migration |
|---|---|---|
| `file:src/containers/audio-selector.jsx` | `componentWillReceiveProps` | Rename to `UNSAFE_componentWillReceiveProps` |
| `file:src/containers/costume-tab.jsx` | `componentWillReceiveProps` | Rename to `UNSAFE_componentWillReceiveProps` |
| `file:src/containers/monitor-list.jsx` | `componentWillReceiveProps` | Rename to `UNSAFE_componentWillReceiveProps` |
| `file:src/containers/slider-monitor.jsx` | `componentWillReceiveProps` | Rename to `UNSAFE_componentWillReceiveProps` |
| `file:src/containers/sound-editor.jsx` | `componentWillReceiveProps` | Rename to `UNSAFE_componentWillReceiveProps` |
| `file:src/containers/sound-tab.jsx` | `componentWillReceiveProps` | Rename to `UNSAFE_componentWillReceiveProps` |
| `file:src/containers/tw-restore-point-manager.jsx` | `componentWillReceiveProps` | Rename to `UNSAFE_componentWillReceiveProps` |
| `file:src/lib/cloud-manager-hoc.jsx` | `componentWillReceiveProps` | Rename to `UNSAFE_componentWillReceiveProps` |
| `file:src/lib/drop-area-hoc.jsx` | `componentWillReceiveProps` | Rename to `UNSAFE_componentWillReceiveProps` |
| `file:src/lib/sortable-hoc.jsx` | `componentWillReceiveProps` | Rename to `UNSAFE_componentWillReceiveProps` |
| `file:src/lib/project-saver-hoc.jsx` | `componentWillMount` | Move body into `componentDidMount` (safe — it only sets `window.onbeforeunload` and calls prop callbacks) |

> Using `UNSAFE_` prefix for `componentWillReceiveProps` is the correct approach for React 18 — these will not throw, only the non-prefixed variants are removed from strict mode warnings escalation.

---

### Step 5 — Remove `react-popover` and replace in `direction-picker`

`react-popover` is used **only** in `file:src/components/direction-picker/direction-picker.jsx`.

**Replacement strategy:** Build a lightweight controlled popover using a CSS-positioned `<div>` with `position: absolute` already in the project's existing CSS patterns (no new library needed).

In `file:src/components/direction-picker/direction-picker.jsx`:
- Remove the `import Popover from 'react-popover'` line.
- Replace the `<Popover body={...} isOpen={props.popoverOpen} preferPlace="above" onOuterAction={props.onClosePopover}>` wrapper with a wrapping `<div style={{position: 'relative'}}>`.
- Render the popover body content inside a conditionally rendered `<div>` that is absolutely positioned above the input (using a CSS module class in `file:src/components/direction-picker/direction-picker.css`).
- Add a transparent overlay `<div>` behind the popover (or use a `document` click listener in the parent container `file:src/containers/direction-picker.jsx`) to trigger `onClosePopover` on outside clicks, replicating `onOuterAction`.
- Remove `react-popover` from `dependencies` in `file:package.json`.

---

### Step 6 — Remove `react-contextmenu` and replace with a custom implementation

`react-contextmenu` is used in three places:

1. **`file:src/components/context-menu/context-menu.jsx`** — thin wrapper that re-exports styled `ContextMenu`, `MenuItem`, `BorderedMenuItem`, `DangerousMenuItem`.
2. **`file:src/components/monitor/monitor.jsx`** — uses `ContextMenuTrigger` + `ContextMenu` with a `ReactDOM.createPortal`.
3. **`file:src/components/sprite-selector-item/sprite-selector-item.jsx`** — uses `ContextMenuTrigger` + `ContextMenu` per sprite item.

**Replacement strategy:** Custom implementation using native browser `contextmenu` events and a portal-rendered menu div.

```
sequenceDiagram
    participant User
    participant ContextMenuTrigger (new)
    participant ContextMenuPortal
    participant document

    User->>ContextMenuTrigger (new): right-click (contextmenu event)
    ContextMenuTrigger (new)->>ContextMenuPortal: setState({open: true, x, y})
    ContextMenuPortal->>document.body: portal render <nav> at {x,y}
    User->>document: click elsewhere
    document->>ContextMenuPortal: mousedown listener → close
```

Steps:
- In `file:src/components/context-menu/context-menu.jsx`: Rewrite to export a custom `ContextMenu` component (receives `id`, renders a portal `<nav>` at viewport coords when visible), a `ContextMenuTrigger` component (wraps children, listens to `onContextMenu`, emits open event by ID via a simple pub/sub or shared module-level registry), `MenuItem`, `BorderedMenuItem`, and `DangerousMenuItem` as styled `<div role="menuitem">` elements.
- Keep the same exported API (`ContextMenu`, `ContextMenuTrigger`, `MenuItem`, `BorderedMenuItem`, `DangerousMenuItem`) so that `file:src/components/monitor/monitor.jsx` and `file:src/components/sprite-selector-item/sprite-selector-item.jsx` require **minimal changes** — only the import path needs to shift from `react-contextmenu` to `../context-menu/context-menu.jsx` (already done for `ContextMenu`/`MenuItem`; only `ContextMenuTrigger` still imports from `react-contextmenu` directly in those two files).
- Update the direct `import {ContextMenuTrigger} from 'react-contextmenu'` lines in:
  - `file:src/components/monitor/monitor.jsx` → import from `../context-menu/context-menu.jsx`
  - `file:src/components/sprite-selector-item/sprite-selector-item.jsx` → import from `../context-menu/context-menu.jsx`
- The addon files (`file:src/addons/contextmenu.js`, `file:src/addons/addons/drag-drop/userscript.js`) reference `.react-contextmenu` CSS class names by DOM query selectors — update the CSS class names in the new custom component to preserve `.react-contextmenu` and `.react-contextmenu--visible` class names, **or** update those addon selectors to match the new class names.
- Update `file:test/helpers/selenium-helper.js` selector for `contextMenu` and `spriteTile` to match the new CSS class names if they change.
- Remove `react-contextmenu` from `dependencies` in `file:package.json`.

---

### Step 7 — Audit and clean up remaining legacy packages

Review and update these additional packages flagged during the audit:

| Package | Current | Action |
|---|---|---|
| `prop-types` | `^15.5.10` | Keep — still valid in React 18; no removal needed |
| `react-intl` | `2.9.0` | Flag for separate upgrade (v2 → v6 is a major effort with API changes; out of scope for this ticket) |
| `intl` | `1.2.5` | Can be removed — native `Intl` is supported in all target browsers |
| `core-js` | `2.5.7` | Upgrade to `^3.x` — v2 is EOL |
| `react-draggable` | `3.0.5` | Upgrade to `^4.x` — v3 has known React 17/18 issues |
| `react-modal` | `3.9.1` | Compatible with React 18 — keep |
| `react-tooltip` | `3.8.0` | Upgrade to `^5.x` — v3 is unmaintained |
| `webpack` | `4.47.0` | Flag for separate upgrade to v5 (large scope) |

---

### Step 8 — Update `peerDependencies` and documentation

In `file:package.json`:
- Update `peerDependencies` to `"react": "^18.0.0"` and `"react-dom": "^18.0.0"`.

In `file:README.md`:
- Add a section noting the upgrade to React 18, Redux 5, react-redux 9 and the removal of `react-popover` and `react-contextmenu`.
- Note the `UNSAFE_` lifecycle method prefixes as an intermediate step pending full hook-based refactor.

---

Execution Information

Branch: main
Commit: 04424c4

---

💡 Tips

Supported Commands (Inside Comments)

• Use @traycerai generate to iterate on the previous version of the implementation plan.

Supported Commands (Inside Description)

• Add @traycerai ignore anywhere in the ticket description to prevent this ticket from being processed.
• Add @traycerai branch:<branch-name> anywhere in the ticket description to specify the target branch for the implementation plan.

Community

• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Coding Plan

Summary

• Replace unmaintained libraries using Radix UI primitives (react-popover → @radix-ui/react-popover, react-contextmenu → @radix-ui/react-context-menu) before the React upgrade to unblock compatibility
• Update 11 files with deprecated lifecycle methods (componentWillReceiveProps/componentWillMount) to use componentDidUpdate pattern for React 18 StrictMode compatibility
• Upgrade core stack (React 18, Redux 4.2, React-Redux 8) while maintaining existing class-based component and connect() patterns
• Migrate test infrastructure from enzyme to @testing-library/react with custom intl helpers to maintain test coverage

Design Choices

Design Choice 1: Which library to replace react-popover?

Options Considered:

1. @radix-ui/react-popover - High-level component primitive with Root/Trigger/Content pattern
2. @floating-ui/react - Low-level positioning hooks that allow custom API composition

Chosen Option: 1

Rationale: The codebase uses react-popover in only one component (direction-picker) with a simple API: body, isOpen, preferPlace, and onOuterAction props. @radix-ui/react-popover provides a clean component-based API (Root/Trigger/Content) that maps directly to the existing controlled pattern. The open, onOpenChange, and side props align well with the current isOpen, onOuterAction, and preferPlace usage. Being part of Radix UI ensures long-term maintenance and React 18 compatibility.

Design Choice 2: Which library to replace react-contextmenu?

Options Considered:

1. @radix-ui/react-context-menu - Unstyled primitive with Root/Trigger/Content/Item pattern and data attributes for styling
2. react-contexify - Purpose-built context menu library with hook-based API

Chosen Option: 1

Rationale: The codebase has a wrapper component (context-menu.jsx) that provides styled variants (MenuItem, BorderedMenuItem, DangerousMenuItem), used by sprite-selector-item and monitor components. @radix-ui/react-context-menu provides a composable component API that integrates well with the existing wrapper pattern. Its unstyled approach with data attributes (data-highlighted, data-state) allows preserving the existing CSS module styling. Using the same Radix UI family as the popover replacement ensures consistency.

Design Choice 3: Target Redux version?

Options Considered:

1. Redux 4.x - Stable release with minor middleware API changes
2. Redux 5.x - Latest with TypeScript-first design and stricter action.type enforcement

Chosen Option: 1

Rationale: Provides stability and backward compatibility; the codebase is JavaScript and doesn't benefit from Redux 5.x TypeScript improvements, while avoiding potential edge cases with stricter runtime checks.

💡 User Tips

Regenerate the plan with different choices with @coderabbitai <feedback>.

Implementation Steps

Phase 1: Replace Deprecated External Libraries

This phase removes the two unmaintained libraries (react-popover, react-contextmenu) that block the React 18 upgrade. These must be replaced before upgrading React since they have no React 18 support.

Task 1: Replace react-popover with @radix-ui/react-popover

Migrate the single popover usage in the direction picker component to use Radix UI's popover primitive with its Root/Trigger/Content composition pattern.

• Install @radix-ui/react-popover as a dependency in package.json
• Update src/components/direction-picker/direction-picker.jsx:
  • Import * as Popover from '@radix-ui/react-popover'
  • Wrap component with Popover.Root using controlled props: open={props.popoverOpen} and onOpenChange calling props.onClosePopover when false
  • Wrap BufferedInput with Popover.Trigger asChild to use it as the trigger element
  • Move popover body content (Dial + ToggleButtons) inside Popover.Portal > Popover.Content
  • Set Popover.Content props: side="top" (replaces preferPlace="above"), onInteractOutside for outside click handling
  • Preserve styles.buttonRow class on the ToggleButtons wrapper inside Content
• Verify src/containers/direction-picker.jsx state management still works (popoverOpen state, handleOpenPopover, handleClosePopover should require no changes)
• Update src/addons/addons/sprite-properties/userscript.js:
  • Change DOM selector from body > div.Popover to query Radix's portal structure (e.g., [data-radix-popper-content-wrapper] containing direction-picker content)
• Remove react-popover from package.json dependencies

Task 2: Create new context menu wrapper using @radix-ui/react-context-menu

Build a replacement wrapper component that provides the same styled menu items (MenuItem, BorderedMenuItem, DangerousMenuItem) using Radix UI's context menu primitive.

• Install @radix-ui/react-context-menu as a dependency in package.json
• Update src/components/context-menu/context-menu.jsx:
  • Import * as ContextMenuPrimitive from '@radix-ui/react-context-menu'
  • Export ContextMenuRoot wrapping ContextMenuPrimitive.Root
  • Export ContextMenuTrigger wrapping ContextMenuPrimitive.Trigger (with asChild support)
  • Export ContextMenuPortal wrapping ContextMenuPrimitive.Portal
  • Export ContextMenuContent wrapping ContextMenuPrimitive.Content with className={styles.contextMenu}
  • Export MenuItem wrapping ContextMenuPrimitive.Item with className={styles.menuItem} and mapping onClick to onSelect
  • Export BorderedMenuItem with combined styles.menuItem and styles.menuItemBordered classes
  • Export DangerousMenuItem with combined styles.menuItem, styles.menuItemBordered, and styles.menuItemDanger classes
• Update src/components/context-menu/context-menu.css:
  • Add opacity: 0 to base .context-menu class (Radix doesn't provide this)
  • Add .context-menu[data-state="open"] selector with opacity: 1 and pointer-events: auto
  • Add .menu-item[data-highlighted] selector for focus/hover state (supplements existing :hover)
• Ensure backward compatibility by maintaining similar export names and prop patterns

Task 3: Migrate sprite-selector-item context menu

Update the sprite selector to use the new Radix-based context menu wrapper while preserving all existing functionality.

• Update src/components/sprite-selector-item/sprite-selector-item.jsx:
  • Import the new wrapper components from context-menu.jsx
  • Replace ContextMenuTrigger with ContextMenuRoot > ContextMenuTrigger composition
  • Move the existing trigger content (the sprite item div) inside ContextMenuTrigger asChild
  • Wrap menu with ContextMenuPortal > ContextMenuContent
  • Replace id prop linking with Radix's compositional structure (no ID needed)
  • Map disable={props.preventContextMenu} to ContextMenuTrigger disabled prop
  • Update MenuItem onClick handlers to use onSelect pattern (handlers should not call e.stopPropagation() as Radix handles menu closing)
  • Remove the contextMenuId counter logic (no longer needed)
• Update src/containers/sprite-selector-item.jsx:
  • Update setRef to get DOM node directly from the trigger element (Radix Trigger with asChild passes ref to child)
  • Remove .elem access pattern since Radix doesn't use this internal property
  • Update menu item handlers to remove e.stopPropagation() calls (use onSelect callback without event parameter)

Task 4: Migrate monitor context menu

Update the monitor component's context menu, handling the portal rendering and implementing a workaround for the hold-to-display behavior that Radix doesn't natively support.

• Update src/components/monitor/monitor.jsx:
  • Import the new wrapper components from context-menu.jsx
  • Replace ContextMenuTrigger with ContextMenuRoot > ContextMenuTrigger composition
  • Use ContextMenuPortal > ContextMenuContent for menu (replaces ReactDOM.createPortal)
  • Keep all conditional menu items (mode switching, import/export, hide) using the wrapper MenuItem/BorderedMenuItem
  • For slider mode holdToDisplay={-1} behavior: set ContextMenuTrigger disabled={props.mode === 'slider'} to prevent context menu on sliders, or implement touch event interception
  • Note: The 1000ms hold-to-display for non-sliders cannot be directly replicated; Radix uses native long-press timing on touch devices
• Update src/containers/monitor.jsx handlers to use onSelect pattern without event arguments (no changes needed as handlers already don't use event)
• Update src/addons/addons/drag-drop/userscript.js:
  • Change DOM selector from .react-contextmenu.react-contextmenu--visible to query Radix's visible menu (e.g., [data-radix-menu-content][data-state="open"])
  • Update the menu item click simulation to target [role="menuitem"] elements
• Update src/addons/contextmenu.js (addon context menu injection system):
  • Update DOM queries from .react-contextmenu-wrapper to Radix trigger selectors
  • Update nav.react-contextmenu queries to [data-radix-menu-content]
  • Replace REACT_CONTEXTMENU_HIDE event dispatch with alternative approach (may need to expose close function via React context or global)
  • Update injected item class from react-contextmenu-item to match Radix item styling
• Remove react-contextmenu from package.json dependencies after all migrations complete

🤖 Prompt for AI agents

Replace the two unmaintained libraries (react-popover and react-contextmenu)
with Radix UI React 18-compatible alternatives to unblock the upgrade.

**Replace react-popover with @radix-ui/react-popover:**
- Install @radix-ui/react-popover as a dependency
- Update `src/components/direction-picker/direction-picker.jsx`:
  - Import `* as Popover from '@radix-ui/react-popover'`
- Wrap component with `Popover.Root` using controlled props:
`open={props.popoverOpen}` and `onOpenChange` calling `props.onClosePopover`
when false
  - Wrap `BufferedInput` with `Popover.Trigger asChild`
- Move popover body content (Dial + ToggleButtons) inside `Popover.Portal` >
`Popover.Content`
- Set `Popover.Content` props: `side="top"` (replaces `preferPlace="above"`),
`onInteractOutside` for outside click handling
- Preserve `styles.buttonRow` class on the ToggleButtons wrapper inside Content
- Verify `src/containers/direction-picker.jsx` still works without changes
(popoverOpen state, handleOpenPopover, handleClosePopover)
- Update `src/addons/addons/sprite-properties/userscript.js`: change DOM
selector from `body > div.Popover` to `[data-radix-popper-content-wrapper]` for
Radix's portal structure
- Remove react-popover from package.json

**Replace react-contextmenu with @radix-ui/react-context-menu:**
- Install @radix-ui/react-context-menu as a dependency
- Update `src/components/context-menu/context-menu.jsx`:
  - Import `* as ContextMenuPrimitive from '@radix-ui/react-context-menu'`
- Export `ContextMenuRoot`, `ContextMenuTrigger` (with `asChild` support),
`ContextMenuPortal`, and `ContextMenuContent` (with
`className={styles.contextMenu}`) wrapping their respective Radix primitives
- Export `MenuItem` wrapping `ContextMenuPrimitive.Item` with
`className={styles.menuItem}` and mapping `onClick` to `onSelect`
- Export `BorderedMenuItem` with combined `styles.menuItem` +
`styles.menuItemBordered` classes
- Export `DangerousMenuItem` with combined `styles.menuItem` +
`styles.menuItemBordered` + `styles.menuItemDanger` classes
- Update `src/components/context-menu/context-menu.css`: add `opacity: 0` to
base `.context-menu`, `.context-menu[data-state="open"]` with `opacity: 1` and
`pointer-events: auto`, and `.menu-item[data-highlighted]` for focus/hover state
- Update `src/components/sprite-selector-item/sprite-selector-item.jsx`:
- Replace `ContextMenuTrigger` with `ContextMenuRoot` > `ContextMenuTrigger`
composition; place trigger content inside `ContextMenuTrigger asChild`
  - Wrap menu with `ContextMenuPortal` > `ContextMenuContent`
  - Remove ID-based linking and `contextMenuId` counter logic
- Map `disable={props.preventContextMenu}` to `ContextMenuTrigger disabled` prop
- Update MenuItem handlers to use `onSelect` pattern without
`e.stopPropagation()`
- Update `src/containers/sprite-selector-item.jsx`: update `setRef` for Radix's
`asChild` ref passthrough, remove `.elem` access pattern, remove
`e.stopPropagation()` from handlers
- Update `src/components/monitor/monitor.jsx`:
- Replace `ContextMenuTrigger` with `ContextMenuRoot` > `ContextMenuTrigger`
composition
- Use `ContextMenuPortal` > `ContextMenuContent` instead of
ReactDOM.createPortal
  - Keep all conditional menu items (mode switching, import/export, hide)
- Set `ContextMenuTrigger disabled={props.mode === 'slider'}` for slider
behavior (note: 1000ms hold-to-display for non-sliders cannot be directly
replicated with Radix)
- Update `src/addons/addons/drag-drop/userscript.js`: change selector from
`.react-contextmenu.react-contextmenu--visible` to
`[data-radix-menu-content][data-state="open"]`, update menu item click
simulation to target `[role="menuitem"]`
- Update `src/addons/contextmenu.js`: update DOM queries from
`.react-contextmenu-wrapper` to Radix trigger selectors and
`nav.react-contextmenu` to `[data-radix-menu-content]`; replace
`REACT_CONTEXTMENU_HIDE` event dispatch with an alternative (expose close
function via React context or global); update injected item class to match Radix
item styling
- Remove react-contextmenu from package.json after all migrations complete

Phase 2: React 18 Compatibility and Core Dependency Upgrades

This phase updates deprecated lifecycle methods, fixes legacy patterns, and upgrades core dependencies to their React 18-compatible versions.

Task 1: Replace componentWillMount usage

Migrate the single file using componentWillMount to use componentDidMount.

• Update src/lib/project-saver-hoc.jsx:
  • Move window.onbeforeunload setup from componentWillMount to componentDidMount
  • Move onSetProjectThumbnailer call to componentDidMount
  • Verify save functionality still works correctly on page unload

Task 2: Replace componentWillReceiveProps in HOCs

Update the HOC files in src/lib/ to use componentDidUpdate with proper prop comparison.

• Update src/lib/project-saver-hoc.jsx: Convert to componentDidUpdate comparing prevProps
• Update src/lib/sortable-hoc.jsx: Move bounding box snapshot logic to componentDidUpdate
• Update src/lib/drop-area-hoc.jsx: Convert drop area handling to componentDidUpdate
• Update src/lib/cloud-manager-hoc.jsx: Convert cloud host sync to componentDidUpdate
• For each file, compare this.props with prevProps parameter instead of nextProps

Task 3: Replace componentWillReceiveProps in containers

Update container components to use componentDidUpdate pattern.

• Update src/containers/tw-restore-point-manager.jsx: Convert modal visibility handling
• Update src/containers/sound-tab.jsx: Convert target change handling
• Update src/containers/sound-editor.jsx: Convert undo/redo stack reset logic
• Update src/containers/slider-monitor.jsx: Convert state sync logic (consider getDerivedStateFromProps if syncing state from props)
• Update src/containers/monitor-list.jsx: Convert monitor re-render trigger
• Update src/containers/costume-tab.jsx: Convert target change handling
• Update src/containers/audio-selector.jsx: Convert trim state update logic

Task 4: Fix legacy Context API usage

Update the legacy contextTypes pattern to use modern context or React-Redux hooks.

• Update src/playground/render-interface.jsx:
  • Remove contextTypes declaration
  • If store access is needed, use React-Redux's connect() or wrap with Provider properly
  • Alternatively, use useSelector/useDispatch if converting to functional component makes sense

Task 5: Upgrade core dependencies

Update React, Redux, and React-Redux to their modern versions.

• Update package.json dependencies:
  • react: ^16.0.0 → ^18.2.0
  • react-dom: ^16.0.0 → ^18.2.0
  • redux: 3.7.2 → ^4.2.1
  • react-redux: 5.0.7 → ^8.1.0
  • react-test-renderer: 16.14.0 → ^18.2.0
• Update peer dependencies in package.json to reflect React 18
• Update the React DOM render call in entry points (src/playground/) to use createRoot API:
  • Replace ReactDOM.render(<App />, container) with createRoot(container).render(<App />)
• Run npm install and resolve any peer dependency conflicts

🤖 Prompt for AI agents

Update deprecated lifecycle methods and legacy patterns across multiple files,
then upgrade core dependencies to React 18-compatible versions.

**Replace componentWillMount:**
- In `src/lib/project-saver-hoc.jsx`, move window.onbeforeunload setup and
onSetProjectThumbnailer call from componentWillMount to componentDidMount

**Replace componentWillReceiveProps in HOCs:**
- Update `src/lib/project-saver-hoc.jsx`, `src/lib/sortable-hoc.jsx`,
`src/lib/drop-area-hoc.jsx`, and `src/lib/cloud-manager-hoc.jsx` to replace
componentWillReceiveProps with componentDidUpdate
- In each file, compare `this.props` with the `prevProps` parameter instead of
using `nextProps`

**Replace componentWillReceiveProps in containers:**
- Update the following container files to use componentDidUpdate pattern:
`src/containers/tw-restore-point-manager.jsx`, `src/containers/sound-tab.jsx`,
`src/containers/sound-editor.jsx`, `src/containers/monitor-list.jsx`,
`src/containers/costume-tab.jsx`, `src/containers/audio-selector.jsx`
- For `src/containers/slider-monitor.jsx`, consider getDerivedStateFromProps if
syncing state from props

**Fix legacy Context API:**
- In `src/playground/render-interface.jsx`, remove the contextTypes declaration
- Use React-Redux's connect() or wrap with Provider properly for store access,
or consider useSelector/useDispatch if converting to a functional component

**Upgrade core dependencies:**
- Update package.json: react ^16.0.0 → ^18.2.0, react-dom ^16.0.0 → ^18.2.0,
redux 3.7.2 → ^4.2.1, react-redux 5.0.7 → ^8.1.0, react-test-renderer 16.14.0 →
^18.2.0
- Update peer dependencies in package.json to reflect React 18
- Update React DOM render calls in src/playground/ entry points: replace
`ReactDOM.render(<App />, container)` with `createRoot(container).render(<App
/>)`
- Run npm install and resolve any peer dependency conflicts

Phase 3: Test Infrastructure Migration and Verification

This phase replaces enzyme with @testing-library/react and ensures all tests pass with the upgraded dependencies.

Task 1: Set up @testing-library/react infrastructure

Install and configure the new testing library alongside existing Jest setup.

• Install testing dependencies in package.json devDependencies:
  • @testing-library/react
  • @testing-library/jest-dom
  • @testing-library/user-event
• Update test/helpers/enzyme-setup.js or create new test/helpers/rtl-setup.js:
  • Configure @testing-library/jest-dom matchers
  • Remove enzyme adapter configuration
• Update Jest configuration in package.json:
  • Change setupFiles to reference RTL setup instead of enzyme setup

Task 2: Create RTL helper for react-intl integration

Build a custom render function that provides react-intl context, replacing the enzyme intl helpers used by 13+ test files.

• Create test/helpers/rtl-intl-helpers.jsx:
  • Export a custom render() function that wraps components with IntlProvider
  • Export a custom renderWithStore() function that wraps with both IntlProvider and Redux Provider
  • Maintain similar API to existing intl helpers for easier migration
• This helper is critical and must be completed before migrating individual tests

Task 3: Migrate simple component tests

Convert the straightforward component tests that use shallow rendering and basic event simulation.

• Migrate tests in test/unit/components/:
  • button.test.jsx: Replace shallow() with render(), simulate('click') with fireEvent.click()
  • icon-button.test.jsx: Same pattern
  • toggle-buttons.test.jsx: Same pattern
  • monitor.test.jsx: Replace find() with screen queries (getByRole, getByText, etc.)
  • slider-prompt.test.jsx: Same pattern
• Use @testing-library queries (getByRole, getByText, queryBy*) instead of enzyme's find()

Task 4: Migrate component tests using mountWithIntl

Convert tests that require full mounting with internationalization context.

• Migrate tests using the new RTL intl helper:
  • controls.test.jsx, cards.test.jsx, menu-bar.test.jsx
  • monitor-list.test.jsx, sprite-selector-item.test.jsx
  • sound-editor.test.jsx, error-boundary-hoc.test.jsx
• Replace .find() chains with RTL queries
• Replace .exists() checks with queryBy* assertions
• Replace .simulate() with fireEvent or userEvent

Task 5: Migrate HOC tests with prop update patterns

Convert the complex HOC tests that use setProps() to test prop changes - these require restructuring.

• Migrate HOC tests in test/unit/util/:
  • vm-manager-hoc.test.jsx, vm-listener-hoc.test.jsx
  • throttled-property-hoc.test.jsx, project-saver-hoc.test.jsx
  • hash-project-loader-hoc.test.jsx, cloud-manager-hoc.test.jsx
  • sb-file-uploader-hoc.test.jsx, project-fetcher-hoc.test.jsx
• Replace setProps() pattern with RTL's rerender() function
• For setState() tests, consider testing observable behavior instead of internal state

Task 6: Remove enzyme and verify full test suite

Clean up enzyme dependencies and run comprehensive verification.

• Remove from package.json devDependencies:
  • enzyme
  • enzyme-adapter-react-16
• Delete test/helpers/enzyme-setup.js
• Delete or update test/helpers/intl-helpers.jsx (enzyme-based)
• Run full test suite: npm test (lint, unit, build, integration)
• Run smoke tests: npm run test:smoke
• Verify development server: npm start
• Verify production build: npm run build

Task 7: Update documentation

Document the upgrade changes and any migration notes for contributors.

• Update README.md with:
  • New minimum Node.js version if applicable
  • Note about React 18 upgrade
  • Updated testing instructions (RTL instead of enzyme)
• Add CHANGELOG or MIGRATION.md entry documenting:
  • Upgraded dependency versions
  • Removed deprecated libraries
  • Test infrastructure changes
  • Any API changes for consumers of the library

🤖 Prompt for AI agents

Migrate the test infrastructure from enzyme to @testing-library/react and verify
all tests pass with the upgraded dependencies.

**Set up testing infrastructure:**
- Install @testing-library/react, @testing-library/jest-dom, and
@testing-library/user-event as devDependencies in package.json
- Update or create `test/helpers/rtl-setup.js` to configure
@testing-library/jest-dom matchers and remove enzyme adapter configuration
- Update Jest configuration in package.json to reference RTL setup instead of
enzyme setup
- Create `test/helpers/rtl-intl-helpers.jsx` with a custom `render()` (wraps
with IntlProvider) and `renderWithStore()` (wraps with IntlProvider and Redux
Provider). This helper is critical and must be completed before migrating
individual tests.

**Migrate simple component tests:**
- Migrate tests in `test/unit/components/` (button.test.jsx,
icon-button.test.jsx, toggle-buttons.test.jsx, monitor.test.jsx,
slider-prompt.test.jsx): replace shallow() with render(), simulate() with
fireEvent, and find() with screen queries (getByRole, getByText, queryBy*)

**Migrate component tests using mountWithIntl:**
- Migrate controls.test.jsx, cards.test.jsx, menu-bar.test.jsx,
monitor-list.test.jsx, sprite-selector-item.test.jsx, sound-editor.test.jsx, and
error-boundary-hoc.test.jsx using the new RTL intl helper
- Replace .find() chains with RTL queries, .exists() with queryBy* assertions,
and .simulate() with fireEvent or userEvent

**Migrate HOC tests:**
- Migrate HOC tests in `test/unit/util/` (vm-manager-hoc.test.jsx,
vm-listener-hoc.test.jsx, throttled-property-hoc.test.jsx,
project-saver-hoc.test.jsx, hash-project-loader-hoc.test.jsx,
cloud-manager-hoc.test.jsx, sb-file-uploader-hoc.test.jsx,
project-fetcher-hoc.test.jsx)
- Replace setProps() with RTL's rerender() function; consider testing observable
behavior instead of internal state for setState() tests

**Clean up and verify:**
- Remove enzyme and enzyme-adapter-react-16 from package.json devDependencies
- Delete `test/helpers/enzyme-setup.js` and enzyme-based
`test/helpers/intl-helpers.jsx`
- Run full test suite (`npm test`), smoke tests (`npm run test:smoke`),
development server (`npm start`), and production build (`npm run build`)
- Update README.md with React 18 upgrade note, new minimum Node.js version if
applicable, and updated testing instructions
- Add CHANGELOG or MIGRATION.md entry documenting upgraded dependency versions,
removed deprecated libraries, test infrastructure changes, and any API changes
for consumers

Research

OmniBlocks is a React 16.14.0 application following classic container/presentational patterns with 108+ class-based components. State management uses Redux 3.7.2 with React-Redux 5.0.7's connect() pattern. The codebase has two critical blockers for React 18: unmaintained libraries (react-popover used in 1 component, react-contextmenu used in 3 components via a wrapper), and enzyme-based tests (24 files) that lack a React 18 adapter. Additionally, 11 files contain deprecated lifecycle methods (componentWillReceiveProps, componentWillMount) that need updates for React 18 StrictMode compatibility.

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

Replace the two unmaintained libraries (react-popover and react-contextmenu)
with Radix UI React 18-compatible alternatives to unblock the upgrade.

**Replace react-popover with @radix-ui/react-popover:**
- Install @radix-ui/react-popover as a dependency
- Update `src/components/direction-picker/direction-picker.jsx`:
  - Import `* as Popover from '@radix-ui/react-popover'`
- Wrap component with `Popover.Root` using controlled props:
`open={props.popoverOpen}` and `onOpenChange` calling `props.onClosePopover`
when false
  - Wrap `BufferedInput` with `Popover.Trigger asChild`
- Move popover body content (Dial + ToggleButtons) inside `Popover.Portal` >
`Popover.Content`
- Set `Popover.Content` props: `side="top"` (replaces `preferPlace="above"`),
`onInteractOutside` for outside click handling
- Preserve `styles.buttonRow` class on the ToggleButtons wrapper inside Content
- Verify `src/containers/direction-picker.jsx` still works without changes
(popoverOpen state, handleOpenPopover, handleClosePopover)
- Update `src/addons/addons/sprite-properties/userscript.js`: change DOM
selector from `body > div.Popover` to `[data-radix-popper-content-wrapper]` for
Radix's portal structure
- Remove react-popover from package.json

**Replace react-contextmenu with @radix-ui/react-context-menu:**
- Install @radix-ui/react-context-menu as a dependency
- Update `src/components/context-menu/context-menu.jsx`:
  - Import `* as ContextMenuPrimitive from '@radix-ui/react-context-menu'`
- Export `ContextMenuRoot`, `ContextMenuTrigger` (with `asChild` support),
`ContextMenuPortal`, and `ContextMenuContent` (with
`className={styles.contextMenu}`) wrapping their respective Radix primitives
- Export `MenuItem` wrapping `ContextMenuPrimitive.Item` with
`className={styles.menuItem}` and mapping `onClick` to `onSelect`
- Export `BorderedMenuItem` with combined `styles.menuItem` +
`styles.menuItemBordered` classes
- Export `DangerousMenuItem` with combined `styles.menuItem` +
`styles.menuItemBordered` + `styles.menuItemDanger` classes
- Update `src/components/context-menu/context-menu.css`: add `opacity: 0` to
base `.context-menu`, `.context-menu[data-state="open"]` with `opacity: 1` and
`pointer-events: auto`, and `.menu-item[data-highlighted]` for focus/hover state
- Update `src/components/sprite-selector-item/sprite-selector-item.jsx`:
- Replace `ContextMenuTrigger` with `ContextMenuRoot` > `ContextMenuTrigger`
composition; place trigger content inside `ContextMenuTrigger asChild`
  - Wrap menu with `ContextMenuPortal` > `ContextMenuContent`
  - Remove ID-based linking and `contextMenuId` counter logic
- Map `disable={props.preventContextMenu}` to `ContextMenuTrigger disabled` prop
- Update MenuItem handlers to use `onSelect` pattern without
`e.stopPropagation()`
- Update `src/containers/sprite-selector-item.jsx`: update `setRef` for Radix's
`asChild` ref passthrough, remove `.elem` access pattern, remove
`e.stopPropagation()` from handlers
- Update `src/components/monitor/monitor.jsx`:
- Replace `ContextMenuTrigger` with `ContextMenuRoot` > `ContextMenuTrigger`
composition
- Use `ContextMenuPortal` > `ContextMenuContent` instead of
ReactDOM.createPortal
  - Keep all conditional menu items (mode switching, import/export, hide)
- Set `ContextMenuTrigger disabled={props.mode === 'slider'}` for slider
behavior (note: 1000ms hold-to-display for non-sliders cannot be directly
replicated with Radix)
- Update `src/addons/addons/drag-drop/userscript.js`: change selector from
`.react-contextmenu.react-contextmenu--visible` to
`[data-radix-menu-content][data-state="open"]`, update menu item click
simulation to target `[role="menuitem"]`
- Update `src/addons/contextmenu.js`: update DOM queries from
`.react-contextmenu-wrapper` to Radix trigger selectors and
`nav.react-contextmenu` to `[data-radix-menu-content]`; replace
`REACT_CONTEXTMENU_HIDE` event dispatch with an alternative (expose close
function via React context or global); update injected item class to match Radix
item styling
- Remove react-contextmenu from package.json after all migrations complete
===============================================================================

Task: 2

Update deprecated lifecycle methods and legacy patterns across multiple files,
then upgrade core dependencies to React 18-compatible versions.

**Replace componentWillMount:**
- In `src/lib/project-saver-hoc.jsx`, move window.onbeforeunload setup and
onSetProjectThumbnailer call from componentWillMount to componentDidMount

**Replace componentWillReceiveProps in HOCs:**
- Update `src/lib/project-saver-hoc.jsx`, `src/lib/sortable-hoc.jsx`,
`src/lib/drop-area-hoc.jsx`, and `src/lib/cloud-manager-hoc.jsx` to replace
componentWillReceiveProps with componentDidUpdate
- In each file, compare `this.props` with the `prevProps` parameter instead of
using `nextProps`

**Replace componentWillReceiveProps in containers:**
- Update the following container files to use componentDidUpdate pattern:
`src/containers/tw-restore-point-manager.jsx`, `src/containers/sound-tab.jsx`,
`src/containers/sound-editor.jsx`, `src/containers/monitor-list.jsx`,
`src/containers/costume-tab.jsx`, `src/containers/audio-selector.jsx`
- For `src/containers/slider-monitor.jsx`, consider getDerivedStateFromProps if
syncing state from props

**Fix legacy Context API:**
- In `src/playground/render-interface.jsx`, remove the contextTypes declaration
- Use React-Redux's connect() or wrap with Provider properly for store access,
or consider useSelector/useDispatch if converting to a functional component

**Upgrade core dependencies:**
- Update package.json: react ^16.0.0 → ^18.2.0, react-dom ^16.0.0 → ^18.2.0,
redux 3.7.2 → ^4.2.1, react-redux 5.0.7 → ^8.1.0, react-test-renderer 16.14.0 →
^18.2.0
- Update peer dependencies in package.json to reflect React 18
- Update React DOM render calls in src/playground/ entry points: replace
`ReactDOM.render(<App />, container)` with `createRoot(container).render(<App
/>)`
- Run npm install and resolve any peer dependency conflicts
===============================================================================

Task: 3

Migrate the test infrastructure from enzyme to @testing-library/react and verify
all tests pass with the upgraded dependencies.

**Set up testing infrastructure:**
- Install @testing-library/react, @testing-library/jest-dom, and
@testing-library/user-event as devDependencies in package.json
- Update or create `test/helpers/rtl-setup.js` to configure
@testing-library/jest-dom matchers and remove enzyme adapter configuration
- Update Jest configuration in package.json to reference RTL setup instead of
enzyme setup
- Create `test/helpers/rtl-intl-helpers.jsx` with a custom `render()` (wraps
with IntlProvider) and `renderWithStore()` (wraps with IntlProvider and Redux
Provider). This helper is critical and must be completed before migrating
individual tests.

**Migrate simple component tests:**
- Migrate tests in `test/unit/components/` (button.test.jsx,
icon-button.test.jsx, toggle-buttons.test.jsx, monitor.test.jsx,
slider-prompt.test.jsx): replace shallow() with render(), simulate() with
fireEvent, and find() with screen queries (getByRole, getByText, queryBy*)

**Migrate component tests using mountWithIntl:**
- Migrate controls.test.jsx, cards.test.jsx, menu-bar.test.jsx,
monitor-list.test.jsx, sprite-selector-item.test.jsx, sound-editor.test.jsx, and
error-boundary-hoc.test.jsx using the new RTL intl helper
- Replace .find() chains with RTL queries, .exists() with queryBy* assertions,
and .simulate() with fireEvent or userEvent

**Migrate HOC tests:**
- Migrate HOC tests in `test/unit/util/` (vm-manager-hoc.test.jsx,
vm-listener-hoc.test.jsx, throttled-property-hoc.test.jsx,
project-saver-hoc.test.jsx, hash-project-loader-hoc.test.jsx,
cloud-manager-hoc.test.jsx, sb-file-uploader-hoc.test.jsx,
project-fetcher-hoc.test.jsx)
- Replace setProps() with RTL's rerender() function; consider testing observable
behavior instead of internal state for setState() tests

**Clean up and verify:**
- Remove enzyme and enzyme-adapter-react-16 from package.json devDependencies
- Delete `test/helpers/enzyme-setup.js` and enzyme-based
`test/helpers/intl-helpers.jsx`
- Run full test suite (`npm test`), smoke tests (`npm run test:smoke`),
development server (`npm start`), and production build (`npm run build`)
- Update README.md with React 18 upgrade note, new minimum Node.js version if
applicable, and updated testing instructions
- Add CHANGELOG or MIGRATION.md entry documenting upgraded dependency versions,
removed deprecated libraries, test infrastructure changes, and any API changes
for consumers

💡 Iterate on the plan with: @coderabbitai <feedback>

Example Feedback
- @coderabbitai You can skip phase 3. Add a simple unit test case for phase 2.
- @coderabbitai For design choice 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord!

[ampelectrecuted]

@coderabbitai specifically, we are replacing both of those old libraries with radix-ui

[coderabbitai]

I've updated the plan above based on your feedback. Ready to proceed when you are!