Renaming and splitting of migrations to new convention (#7606)

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

Fixes #7477 
Fixes #7599

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

Updates the current migrations to the following new naming convention
with the resulting directory and file structure:

```
// new naming convention
[type]-[action]-[target]

// migrations
react-rename-component-prop
react-replace-text-components
scss-replace-border
scss-replace-border-radius
scss-replace-border-width
scss-replace-breakpoints
scss-replace-color
scss-replace-duration
scss-replace-easing
scss-replace-font-family
scss-replace-font-size
scss-replace-line-height
scss-replace-spacing
scss-replace-text-emphasis
scss-replace-z-index
styles-tokenize-font
styles-tokenize-motion
styles-tokenize-shape
styles-tokenize-space
```

```
polaris-migrator/src/migrations
├── react-rename-component-prop
│   ├── react-rename-component-prop.ts
│   └── tests
│       ├── react-rename-component-prop.input.tsx
│       ├── react-rename-component-prop.output.tsx
│       └── react-rename-component-prop.test.ts
├── react-replace-text-components
│   ├── react-replace-text-components.ts
│   ├── steps
│   │   ├── replace-display-text.ts
│   │   ├── replace-other.ts
│   │   └── replace-text-style.ts
│   └── tests
│       ├── react-replace-text-components.input.tsx
│       ├── react-replace-text-components.output.tsx
│       ├── react-replace-text-components.test.ts
│       ├── with-identifier.input.tsx
│       ├── with-identifier.output.tsx
│       ├── with-relative.input.tsx
│       └── with-relative.output.tsx
├── scss-replace-border
│   ├── scss-replace-border.ts
│   └── tests
│       ├── scss-replace-border.input.scss
│       ├── scss-replace-border.output.scss
│       ├── scss-replace-border.test.ts
│       ├── with-namespace.input.scss
│       └── with-namespace.output.scss
├── scss-replace-border-radius
│   ├── scss-replace-border-radius.ts
│   └── tests
│       ├── scss-replace-border-radius.input.scss
│       ├── scss-replace-border-radius.output.scss
│       ├── scss-replace-border-radius.test.ts
│       ├── with-namespace.input.scss
│       └── with-namespace.output.scss
├── scss-replace-border-width
│   ├── scss-replace-border-width.ts
│   └── tests
│       ├── scss-replace-border-width.input.scss
│       ├── scss-replace-border-width.output.scss
│       ├── scss-replace-border-width.test.ts
│       ├── with-namespace.input.scss
│       └── with-namespace.output.scss
├── scss-replace-breakpoints
│   ├── scss-replace-breakpoints.ts
│   └── tests
│       ├── scss-replace-breakpoints.input.scss
│       ├── scss-replace-breakpoints.output.scss
│       ├── scss-replace-breakpoints.test.ts
│       ├── with-namespace.input.scss
│       └── with-namespace.output.scss
├── scss-replace-color
│   ├── scss-replace-color.ts
│   └── tests
│       ├── scss-replace-color.input.scss
│       ├── scss-replace-color.output.scss
│       ├── scss-replace-color.test.ts
│       ├── with-namespace.input.scss
│       └── with-namespace.output.scss
├── scss-replace-duration
│   ├── scss-replace-duration.ts
│   └── tests
│       ├── scss-replace-duration.input.scss
│       ├── scss-replace-duration.output.scss
│       ├── scss-replace-duration.test.ts
│       ├── with-namespace.input.scss
│       └── with-namespace.output.scss
├── scss-replace-easing
│   ├── scss-replace-easing.ts
│   └── tests
│       ├── scss-replace-easing.input.scss
│       ├── scss-replace-easing.output.scss
│       ├── scss-replace-easing.test.ts
│       ├── with-namespace.input.scss
│       └── with-namespace.output.scss
├── scss-replace-font-family
│   ├── scss-replace-font-family.ts
│   └── tests
│       ├── scss-replace-font-family.input.scss
│       ├── scss-replace-font-family.output.scss
│       ├── scss-replace-font-family.test.ts
│       ├── with-namespace.input.scss
│       └── with-namespace.output.scss
├── scss-replace-font-size
│   ├── scss-replace-font-size.ts
│   └── tests
│       ├── scss-replace-font-size.input.scss
│       ├── scss-replace-font-size.output.scss
│       ├── scss-replace-font-size.test.ts
│       ├── with-namespace.input.scss
│       └── with-namespace.output.scss
├── scss-replace-line-height
│   ├── scss-replace-line-height.ts
│   └── tests
│       ├── scss-replace-line-height.input.scss
│       ├── scss-replace-line-height.output.scss
│       ├── scss-replace-line-height.test.ts
│       ├── with-namespace.input.scss
│       └── with-namespace.output.scss
├── scss-replace-spacing
│   ├── scss-replace-spacing.ts
│   └── tests
│       ├── scss-replace-spacing.input.scss
│       ├── scss-replace-spacing.output.scss
│       ├── scss-replace-spacing.test.ts
│       ├── with-namespace.input.scss
│       └── with-namespace.output.scss
├── scss-replace-text-emphasis
│   ├── scss-replace-text-emphasis.ts
│   └── tests
│       ├── scss-replace-text-emphasis.input.scss
│       ├── scss-replace-text-emphasis.output.scss
│       ├── scss-replace-text-emphasis.test.ts
│       ├── with-namespace.input.scss
│       └── with-namespace.output.scss
├── scss-replace-z-index
│   ├── scss-replace-z-index.ts
│   └── tests
│       ├── scss-replace-z-index.input.scss
│       ├── scss-replace-z-index.output.scss
│       ├── scss-replace-z-index.test.ts
│       ├── with-namespace.input.scss
│       └── with-namespace.output.scss
├── styles-tokenize-font
│   ├── styles-tokenize-font.ts
│   └── tests
│       ├── styles-tokenize-font.input.scss
│       ├── styles-tokenize-font.output.scss
│       ├── styles-tokenize-font.test.ts
│       ├── with-namespace.input.scss
│       └── with-namespace.output.scss
├── styles-tokenize-motion
│   ├── styles-tokenize-motion.ts
│   └── tests
│       ├── styles-tokenize-motion.input.scss
│       ├── styles-tokenize-motion.output.scss
│       └── styles-tokenize-motion.test.ts
├── styles-tokenize-shape
│   ├── styles-tokenize-shape.ts
│   └── tests
│       ├── styles-tokenize-shape.input.scss
│       ├── styles-tokenize-shape.output.scss
│       ├── styles-tokenize-shape.test.ts
│       ├── with-namespace.input.scss
│       └── with-namespace.output.scss
└── styles-tokenize-space
    ├── styles-tokenize-space.ts
    └── tests
        ├── styles-tokenize-space.input.scss
        ├── styles-tokenize-space.output.scss
        ├── styles-tokenize-space.test.ts
        ├── with-namespace.input.scss
        └── with-namespace.output.scss
```

Co-authored-by: Chloe Rice <[email protected]>

Author: sam-b-rose

.changeset/fluffy-owls-breathe.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-migrator': patch
+---
+
+Update `createInlineComment` to format text with RegExp

.changeset/fresh-rats-pay.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-migrator': patch
+---
+
+Add support to replace Identifiers along with JSXIdentifiers for Text migration

.changeset/light-mayflies-drive.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-migrator': minor
+---
+
+Renamed and split migrations based on scope and type (react, scss, and styles)