# react-next to react component moves

If the v7 component implementation is in `react-internal` (most components), the `react-next` implementation should be moved to `react-internal` (NOT `react`). In the steps, `react(-internal)` means whichever of the two packages is appropriate for your component.

Full steps:

1. Move the component code and tests from react-next to `react(-internal)`. Steps:
1. Find where the v7 component is currently located (either `react-internal` or `react`) and delete the whole folder `react(-internal)/src/components/ComponentName`.
2. Move the whole folder `react-next/src/components/ComponentName` to `react(-internal)`
3. Update any `react-next` or `react` imports in the moved code to relative imports. If it's in `react-internal` also change those to relative imports. (A few things must still be deep-imported from react-internal; we'll fix this later.)
2. Update the component's root file in react-next (e.g. `react-next/src/Fabric.ts`) to re-export from `@fluentui/react/lib/ComponentName`
3. Delete any `*Next` perf-tests or vr-tests for the component
4. Delete `react-examples/src/react-next/ComponentName/docs` (they should be exact duplicates; even if they're not, the react versions are more likely to be correct)
5. Compare the examples and .doc.tsx in `react-examples/src/react-next/ComponentName` with the `react` versions. If the example names and content appear unchanged you can just delete the react-next versions. Otherwise copy over the moved examples to the react folder (fixing imports to be from react), and delete any remaining react-next example/doc files.
- Note: Even if the component is in `react-internal`, the examples should be under `react-examples/src/react` and import from `@fluentui/react`
7. Update snapshots and API in `react(-internal)` and `react-next`

In the PR, be sure to look at:
- Perf test: is the new implementation slower?
- Screener: any visual regressions?
- Bundle size (not sure if it will be accurate until all components move)

| Component | Assignee | PR/notes |
| ------------------- | --------- | -------- |
| Callout | Jon | [done](https://github.com/microsoft/fluentui/pull/15455) |
| ChoiceGroup | Elizabeth | [done](https://github.com/microsoft/fluentui/pull/15387) |
| Coachmark | Elizabeth | [done](https://github.com/microsoft/fluentui/pull/15400) |
| ComboBox + Autofill | Jon | [done](https://github.com/microsoft/fluentui/pull/15490)|
| ContextualMenu | Jon | [done](https://github.com/microsoft/fluentui/pull/15448) |
| Dropdown | Jon | [done](https://github.com/microsoft/fluentui/pull/15500) |
| Fabric | Tomi | [done](https://github.com/microsoft/fluentui/pull/15388) |
| FloatingPicker/ExtendedPicker | Jon | [done](https://github.com/microsoft/fluentui/pull/15458) |
| FocusTrapZone | Mak | [done](https://github.com/microsoft/fluentui/pull/15368) |
| Image | Tomi | [done](https://github.com/microsoft/fluentui/pull/15367) |
| Layer | Caleb | [done](https://github.com/microsoft/fluentui/pull/15481) |
| MessageBar | Caleb | [done](https://github.com/microsoft/fluentui/pull/15393) |
| OverflowSet | Caleb | [done](https://github.com/microsoft/fluentui/pull/15389) |
| Persona | Jon | [done](https://github.com/microsoft/fluentui/pull/15386) |
| Popup | Mak | [done](https://github.com/microsoft/fluentui/pull/15436) |
| Rating | Elizabeth | [done](https://github.com/microsoft/fluentui/pull/15398) |
| ResizeGroup | Elizabeth | [done](https://github.com/microsoft/fluentui/pull/15401) |
| SearchBox | Caleb | [done](https://github.com/microsoft/fluentui/pull/15385) |
| SelectedItemsList | Caleb | [done](https://github.com/microsoft/fluentui/pull/15430) |
| Shimmer | Caleb | [done](https://github.com/microsoft/fluentui/pull/15407) |
| SpinButton | Caleb | [done](https://github.com/microsoft/fluentui/pull/15408) |
| SwatchColorPicker | Caleb | [done](https://github.com/microsoft/fluentui/pull/15373) |
| TextField | Elizabeth | [done](https://github.com/microsoft/fluentui/pull/15370) |

Ignore/delete react-next versions due to not yet converted:

- Breadcrumb (done)
- Modal (done)
- Keytip

### Other table which didn't turn out to be very useful

| Component | Uses other affected components |
| --------- | --------------- |
| Callout | Popup, Layer |
| Coachmark | FocusTrapZone, Layer |
| ComboBox + Autofill | Callout |
| ContextualMenu | Callout |
| Dropdown | Callout, Fabric, FocusTrapZone, Layer, Popup |
| ExtendedPicker | FloatingPicker, Persona, SelectedItemsList |
| FloatingPicker | Persona |
| Keytip | Callout, ContextualMenu |
| Layer | Fabric |
| Rating | Image |
| SelectedItemsList | FloatingPicker, Persona, ContextualMenu |
| SpinButton | Image |
| TeachingBubble | Callout, FocusTrapZone, Image |