Create Migration Script: Text Component Migration from Extension to Design System

Create an automated migration script to convert the MetaMask extension'\''s Text component usage to the `@metamask/design-system-react` Text component. This script will handle both the component migration and the conversion of style utility props to Tailwind classes.

### **Technical Details**

The migration script should handle:

1. **Import Statements**
```typescript
// Find and replace imports
- import { Text } from "../../ui/components/component-library/text"
+ import { Text } from "@metamask/design-system-react"
```

2. **Props Mapping**
```typescript
// Current Extension Text Props -> Design System Text Props
{
variant -> variant
color -> color
fontWeight -> fontWeight
fontStyle -> fontStyle
textTransform -> textTransform
textAlign -> textAlign
overflowWrap -> overflowWrap
ellipsis -> ellipsis
// Style utility props will be converted to className
}
```

3. **Enum Mappings**
```typescript
// Extension Enums -> Design System Enums
{
TextVariant -> TextVariant
TextColor -> TextColor
FontWeight -> FontWeight
TextAlign -> TextAlign
TextTransform -> TextTransform
OverflowWrap -> OverflowWrap
}
```

4. **Style Utility Props to Tailwind**
```typescript
// Example transformations
marginTop={4} -> className="mt-4"
paddingLeft={2} -> className="pl-2"
display="flex" -> className="flex"
backgroundColor="primary" -> className="bg-primary"
```

5. **Script Features**
- Parse TypeScript/JavaScript files
- Identify Text component usage
- Transform imports
- Convert props and enums
- Handle style utility props
- Merge className props
- Format output code
- Generate migration report

### **Implementation Details**

1. **Setup Script Structure**
```typescript
// Migration script outline
import { Parser } from "some-ts-parser";
import { transform } from "some-code-transformer";

const migrateTextComponent = async (filePath: string) => {
// Read file
// Parse AST
// Transform nodes
// Write changes
};

const handleImports = (ast: AST) => {
// Update imports
};

const transformProps = (props: Props) => {
// Convert props
};

const convertStyleProps = (props: StyleProps) => {
// Convert to Tailwind
};
```

2. **Prop Transformation Logic**
```typescript
const propMappings = {
// Direct mappings
variant: "variant",
color: "color",

// Style utility mappings
marginTop: (value) => `mt-${value}`,
paddingLeft: (value) => `pl-${value}`,
display: (value) => value,
// ... other mappings
};
```

3. **Class Merging Logic**
```typescript
const mergeClasses = (existingClasses: string, newClasses: string) => {
// Merge and dedupe classes
return twMerge(existingClasses, newClasses);
};
```

### **Acceptance Criteria**

- [ ] Script successfully identifies all Text component usage in the codebase
- [ ] Correctly transforms imports
- [ ] Accurately maps props between components
- [ ] Properly converts style utility props to Tailwind classes
- [ ] Handles className merging correctly
- [ ] Maintains code formatting and comments
- [ ] Provides detailed migration report
- [ ] Includes dry-run option
- [ ] Has error handling and logging
- [ ] Includes tests for all transformations
- [ ] Provides rollback capability
- [ ] Documentation for running the script

### **Testing Strategy**

1. **Unit Tests**
```typescript
describe("Text Component Migration", () => {
test("import transformation", () => {});
test("prop mapping", () => {});
test("style utility conversion", () => {});
test("className merging", () => {});
});
```

2. **Integration Tests**
- Test with real component examples
- Verify output matches expected results
- Check edge cases and complex scenarios

3. **Snapshot Testing**
- Compare transformed code with expected output
- Verify formatting is preserved

### **Usage Example**

```bash
# Run migration
yarn migrate-text-component --dry-run
yarn migrate-text-component --path=./src
yarn migrate-text-component --single-file=./src/component.tsx
```

### **References**

- [Extension Text Component](https://github.com/MetaMask/metamask-extension/tree/main/ui/components/component-library/text)
- [Design System React Text Component](https://github.com/MetaMask/metamask-design-system/tree/main/packages/design-system-react/src/components/text)
- [jscodeshift](https://github.com/facebook/jscodeshift)
- [AST Explorer](https://astexplorer.net/)
- [Tailwind CSS Documentation](https://tailwindcss.com/docs)