@procore/text-editor 0.0.1

package/codemod/text-editor-migrate.js

@@ -0,0 +1,509 @@
+#!/usr/bin/env node
+
+/**
+ * Codemod to migrate from @procore/core-react TextEditor to @procore/text-editor package
+ *
+ * This codemod performs the following transformations:
+ *
+ * 1. Updates imports from @procore/core-react to @procore/text-editor for TextEditor components
+ * 2. Updates Form.RichText usage to include textEditorComponent prop
+ * 3. Updates Jest configuration to use textEditorJestConfig
+ */
+
+const fs = require('fs')
+const path = require('path')
+
+// ANSI color codes for console output
+const colors = {
+  reset: '\x1b[0m',
+  bold: '\x1b[1m',
+  success: '\x1b[32m',
+  error: '\x1b[31m',
+  info: '\x1b[36m',
+}
+
+// Track statistics
+const stats = {
+  filesProcessed: 0,
+  importsUpdated: 0,
+  formRichTextUpdated: 0,
+  jestConfigUpdated: 0,
+  errors: [],
+}
+
+// TextEditor-related exports that should be migrated
+const TEXT_EDITOR_EXPORTS = [
+  'TextEditor',
+  'TextEditorOutput',
+  'TextEditorProvider',
+  'TextEditorProps',
+  'TextEditorOutputProps',
+]
+
+/**
+ * Transform TypeScript/JavaScript imports
+ */
+function transformImports(fileContent) {
+  let modified = false
+  let newContent = fileContent
+  let needsTextEditorImport = false
+
+  // Pattern to match import statements from @procore/core-react
+  const importRegex =
+    /import\s*(?:type\s+)?{([^}]+)}\s*from\s*['"]@procore\/core-react['"]/gs
+
+  newContent = newContent.replace(importRegex, (match, imports) => {
+    // Check if this is a type import
+    const isTypeImport = match.includes('import type')
+
+    // Check if this is a multiline import
+    const isMultiline = imports.includes('\n')
+
+    // Split by comma and filter out empty entries
+    const importList = imports
+      .split(',')
+      .map((i) => i.trim())
+      .filter((i) => i)
+    const textEditorImports = []
+    const coreReactImports = []
+
+    importList.forEach((imp) => {
+      // Skip empty imports
+      if (!imp) return
+
+      // Remove type prefix if present
+      const cleanImport = imp.replace(/^type\s+/, '')
+      const importName = cleanImport.split(/\s+as\s+/)[0].trim()
+
+      if (TEXT_EDITOR_EXPORTS.includes(importName)) {
+        textEditorImports.push(imp)
+        modified = true
+      } else {
+        coreReactImports.push(imp)
+      }
+    })
+
+    let result = ''
+
+    // Keep core-react import if there are remaining imports
+    if (coreReactImports.length > 0) {
+      // Filter out any empty strings from the import list
+      const cleanedImports = coreReactImports.filter((imp) => imp.trim())
+      const importKeyword = isTypeImport ? 'import type' : 'import'
+
+      if (isMultiline && cleanedImports.length > 0) {
+        result = `${importKeyword} {\n  ${cleanedImports.join(
+          ',\n  '
+        )},\n} from '@procore/core-react'`
+      } else {
+        result = `${importKeyword} { ${cleanedImports.join(
+          ', '
+        )} } from '@procore/core-react'`
+      }
+    }
+
+    // Add text-editor import if needed
+    if (textEditorImports.length > 0) {
+      if (result) result += '\n'
+      const importKeyword = isTypeImport ? 'import type' : 'import'
+
+      if (isMultiline && textEditorImports.length > 0) {
+        result += `${importKeyword} {\n  ${textEditorImports.join(
+          ',\n  '
+        )},\n} from '@procore/text-editor'`
+      } else {
+        result += `${importKeyword} { ${textEditorImports.join(
+          ', '
+        )} } from '@procore/text-editor'`
+      }
+      stats.importsUpdated++
+    }
+
+    return result
+  })
+
+  // Check if file uses Form.RichText without TextEditor import
+  if (
+    newContent.includes('Form.RichText') &&
+    !newContent.includes('@procore/text-editor')
+  ) {
+    needsTextEditorImport = true
+  }
+
+  return { content: newContent, modified, needsTextEditorImport }
+}
+
+/**
+ * Transform Form.RichText usage
+ */
+function transformFormRichText(fileContent) {
+  let modified = false
+  let newContent = fileContent
+  let needsTextEditorImport = false
+
+  // Pattern to match Form.RichText components
+  const formRichTextRegex = /<Form\.(RichText(?:Field)?)([\s\S]*?)(\/>|>)/g
+
+  newContent = newContent.replace(
+    formRichTextRegex,
+    (match, componentName, propsAndWhitespace, closing) => {
+      // Check if textEditorComponent prop already exists
+      if (propsAndWhitespace.includes('textEditorComponent')) {
+        return match // Already migrated
+      }
+
+      // Skip Form.RichText.Read (TextEditorOutput) components
+      if (match.includes('Form.RichText.Read')) {
+        return match
+      }
+
+      modified = true
+      needsTextEditorImport = true
+      stats.formRichTextUpdated++
+
+      // Check if props span multiple lines by looking for newlines after the opening tag
+      const hasNewlines = propsAndWhitespace.includes('\n')
+
+      if (hasNewlines) {
+        // For multiline props, add the new prop on its own line with proper indentation
+        // Find the last prop line to get the indentation
+        const lines = propsAndWhitespace.split('\n')
+
+        // Find the last non-empty line that contains a prop
+        let lastPropLineIndex = -1
+        for (let i = lines.length - 1; i >= 0; i--) {
+          if (lines[i].trim() && lines[i].includes('=')) {
+            lastPropLineIndex = i
+            break
+          }
+        }
+
+        if (lastPropLineIndex >= 0) {
+          // Get indentation from the last prop line
+          const indentMatch = lines[lastPropLineIndex].match(/^(\s*)/)
+          const indent = indentMatch ? indentMatch[1] : '  '
+
+          // Insert the new prop after the last prop line
+          lines.splice(
+            lastPropLineIndex + 1,
+            0,
+            `${indent}textEditorComponent={TextEditor}`
+          )
+          const newPropsAndWhitespace = lines.join('\n')
+
+          return `<Form.${componentName}${newPropsAndWhitespace}${closing}`
+        } else {
+          // No props found, detect indentation from the first line
+          const firstLineIndent = lines[0]
+            ? lines[0].match(/^(\s*)/)?.[1] || '  '
+            : '  '
+          return `<Form.${componentName}\n${firstLineIndent}textEditorComponent={TextEditor}${propsAndWhitespace}${closing}`
+        }
+      } else {
+        // For single-line or no props
+        const trimmed = propsAndWhitespace.trim()
+        if (trimmed) {
+          // Has props on same line
+          return `<Form.${componentName} ${trimmed} textEditorComponent={TextEditor}${closing}`
+        } else {
+          // No props
+          return `<Form.${componentName} textEditorComponent={TextEditor}${closing}`
+        }
+      }
+    }
+  )
+
+  // If we need TextEditor import and it's not already there, add it
+  if (
+    needsTextEditorImport &&
+    !newContent.includes("from '@procore/text-editor'")
+  ) {
+    // Check if there's already an import from @procore/core-react
+    const coreReactImportMatch = newContent.match(
+      /import\s*{([^}]+)}\s*from\s*['"]@procore\/core-react['"]/
+    )
+
+    if (coreReactImportMatch) {
+      // Add the text-editor import after the core-react import
+      const insertPosition =
+        coreReactImportMatch.index + coreReactImportMatch[0].length
+      newContent =
+        newContent.slice(0, insertPosition) +
+        "\nimport { TextEditor } from '@procore/text-editor'" +
+        newContent.slice(insertPosition)
+    } else {
+      // Find the last import statement and add after it
+      const lastImportMatch = [
+        ...newContent.matchAll(/import\s+.*?from\s+['"].*?['"]\s*;?\s*\n/g),
+      ].pop()
+
+      if (lastImportMatch) {
+        const insertPosition = lastImportMatch.index + lastImportMatch[0].length
+        newContent =
+          newContent.slice(0, insertPosition) +
+          "import { TextEditor } from '@procore/text-editor'\n" +
+          newContent.slice(insertPosition)
+      } else {
+        // No imports found, add at the beginning
+        newContent =
+          "import { TextEditor } from '@procore/text-editor'\n\n" + newContent
+      }
+    }
+  }
+
+  return { content: newContent, modified }
+}
+
+/**
+ * Transform Jest configuration files
+ */
+function transformJestConfig(fileContent) {
+  let modified = false
+  let newContent = fileContent
+
+  // Check if file uses coreReactJestConfig
+  if (
+    newContent.includes('coreReactJestConfig') &&
+    newContent.includes('@procore/core-react/jestConfig')
+  ) {
+    // Replace CommonJS require statements
+    newContent = newContent.replace(
+      /const\s*{\s*coreReactJestConfig\s*}\s*=\s*require\s*\(\s*['"]@procore\/core-react\/jestConfig['"]\s*\)/g,
+      "const { textEditorJestConfig } = require('@procore/text-editor/jestConfig')"
+    )
+
+    // Replace ES6 import statements
+    newContent = newContent.replace(
+      /import\s*{\s*coreReactJestConfig\s*}\s*from\s*['"]@procore\/core-react\/jestConfig['"]/g,
+      "import { textEditorJestConfig } from '@procore/text-editor/jestConfig'"
+    )
+
+    // Replace destructured imports (e.g., import { coreReactJestConfig as something })
+    newContent = newContent.replace(
+      /import\s*{\s*coreReactJestConfig\s+as\s+(\w+)\s*}\s*from\s*['"]@procore\/core-react\/jestConfig['"]/g,
+      "import { textEditorJestConfig as $1 } from '@procore/text-editor/jestConfig'"
+    )
+
+    // Replace the function calls
+    newContent = newContent.replace(
+      /coreReactJestConfig\s*\(/g,
+      'textEditorJestConfig('
+    )
+
+    if (newContent !== fileContent) {
+      modified = true
+      stats.jestConfigUpdated++
+    }
+  }
+
+  return { content: newContent, modified }
+}
+
+/**
+ * Process a single file
+ */
+function processFile(filePath) {
+  try {
+    const content = fs.readFileSync(filePath, 'utf8')
+    let newContent = content
+    let wasModified = false
+
+    // Determine file type
+    const ext = path.extname(filePath)
+    const fileName = path.basename(filePath)
+
+    // Config file detection
+    const isConfigFile =
+      /^jest\.(config|setup)\.(js|ts|cjs|mjs)$/.test(fileName) ||
+      /\.config\.(js|ts|cjs|mjs)$/.test(fileName)
+
+    // Process Jest configuration
+    if (isConfigFile && content.includes('coreReactJestConfig')) {
+      const result = transformJestConfig(content)
+      if (result.modified) {
+        newContent = result.content
+        wasModified = true
+      }
+    }
+
+    // For regular JS/TS files, process imports and Form.RichText
+    if (['.js', '.jsx', '.ts', '.tsx'].includes(ext) && !isConfigFile) {
+      // Transform imports
+      const importResult = transformImports(content)
+      if (importResult.modified) {
+        newContent = importResult.content
+        wasModified = true
+      }
+
+      // Transform Form.RichText
+      const formResult = transformFormRichText(newContent)
+      if (formResult.modified) {
+        newContent = formResult.content
+        wasModified = true
+      }
+    }
+
+    // Write back if modified
+    if (wasModified) {
+      fs.writeFileSync(filePath, newContent, 'utf8')
+      console.log(`${colors.success}✓${colors.reset} Updated: ${filePath}`)
+      stats.filesProcessed++
+    }
+  } catch (error) {
+    stats.errors.push({ file: filePath, error: error.message })
+    console.error(
+      `${colors.error}✗${colors.reset} Error processing ${filePath}: ${error.message}`
+    )
+  }
+}
+
+/**
+ * Find all relevant files in a directory
+ */
+function findFiles(dir, pattern) {
+  const files = []
+
+  function walk(currentDir) {
+    try {
+      const items = fs.readdirSync(currentDir)
+
+      for (const item of items) {
+        const fullPath = path.join(currentDir, item)
+        const stat = fs.statSync(fullPath)
+
+        // Skip node_modules and common build directories
+        if (
+          item === 'node_modules' ||
+          item === 'dist' ||
+          item === 'build' ||
+          item === '.git'
+        ) {
+          continue
+        }
+
+        if (stat.isDirectory()) {
+          walk(fullPath)
+        } else if (pattern.test(item)) {
+          files.push(fullPath)
+        }
+      }
+    } catch (error) {
+      console.error(`Error reading directory ${currentDir}: ${error.message}`)
+    }
+  }
+
+  walk(dir)
+  return files
+}
+
+/**
+ * Main function
+ */
+function main() {
+  const args = process.argv.slice(2)
+
+  if (args.includes('--help') || args.includes('-h')) {
+    console.log(`
+${colors.bold}TextEditor Migration Codemod${colors.reset}
+
+${colors.bold}Usage:${colors.reset}
+
+  ${colors.info}npx text-editor-migrate [path]${colors.reset}
+
+${colors.bold}Description:${colors.reset}
+
+  Migrates code from using TextEditor components in @procore/core-react
+  to the new @procore/text-editor package.
+
+${colors.bold}Transformations:${colors.reset}
+
+  • Updates imports from @procore/core-react to @procore/text-editor
+  • Adds textEditorComponent prop to Form.RichText
+  • Updates Jest configuration to use textEditorJestConfig
+
+${colors.bold}Examples:${colors.reset}
+
+  ${colors.info}npx text-editor-migrate${colors.reset}                     # Run on current directory
+  ${colors.info}npx text-editor-migrate ./src${colors.reset}               # Run on src directory
+  ${colors.info}npx text-editor-migrate ./src/Component.tsx${colors.reset} # Run on single file
+    `)
+    return
+  }
+
+  // Default to current directory if no path provided
+  const targetPath = path.resolve(args[0] || '.')
+
+  console.log(
+    `\n${colors.bold}Starting TextEditor migration...${colors.reset}\n`
+  )
+  console.log(`Target: ${targetPath}\n`)
+
+  // Check if target exists
+  if (!fs.existsSync(targetPath)) {
+    console.error(
+      `${colors.error}Error: Path does not exist: ${targetPath}${colors.reset}`
+    )
+    process.exit(1)
+  }
+
+  const stat = fs.statSync(targetPath)
+  let filesToProcess = []
+
+  if (stat.isDirectory()) {
+    // Find all JavaScript/TypeScript files
+    filesToProcess = findFiles(targetPath, /\.(jsx?|tsx?|cjs|mjs)$/)
+
+    // Also include config files (they might be missed if they're .cjs or .mjs)
+    const configFiles = findFiles(targetPath, /\.config\.(js|ts|cjs|mjs)$/)
+
+    // Deduplicate files (in case config files were already included)
+    const uniqueFiles = new Set([...filesToProcess, ...configFiles])
+    filesToProcess = Array.from(uniqueFiles)
+  } else {
+    filesToProcess = [targetPath]
+  }
+
+  console.log(`Found ${filesToProcess.length} files to process\n`)
+
+  // Process all files
+  filesToProcess.forEach((file) => processFile(file))
+
+  // Check if any changes were made
+  if (stats.filesProcessed === 0 && stats.errors.length === 0) {
+    console.log(`${colors.bold}No changes${colors.reset}\n`)
+    return
+  }
+
+  // Print summary
+  console.log(`\n${colors.bold}Migration Summary:${colors.reset}\n`)
+  console.log(
+    `${colors.success}✓${colors.reset} Files processed: ${stats.filesProcessed}`
+  )
+  console.log(
+    `${colors.success}✓${colors.reset} Imports updated: ${stats.importsUpdated}`
+  )
+  console.log(
+    `${colors.success}✓${colors.reset} Form.RichText updated: ${stats.formRichTextUpdated}`
+  )
+  console.log(
+    `${colors.success}✓${colors.reset} Jest configs updated: ${stats.jestConfigUpdated}`
+  )
+
+  if (stats.errors.length > 0) {
+    console.log(`\n${colors.error}Errors encountered:${colors.reset}`)
+    stats.errors.forEach(({ file, error }) => {
+      console.log(`  ${colors.error}✗${colors.reset} ${file}: ${error}`)
+    })
+  }
+
+  console.log(`\n${colors.bold}Migration complete!${colors.reset}\n`)
+
+  if (stats.filesProcessed > 0) {
+    console.log(`${colors.bold}Next steps:${colors.reset}\n`)
+    console.log('1. Review the changes made by the codemod')
+    console.log('2. Run your tests to ensure everything works correctly\n')
+  }
+}
+
+// Run the codemod
+main()