@planningcenter/tapestry-migration-cli 2.1.0 → 2.1.1-qa-380.0

package/src/components/shared/transformFactories/helpers/manageImports.test.ts

@@ -0,0 +1,383 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import {
+  addImportToExisting,
+  createNewImport,
+  getImportName,
+  hasConflictingImport,
+  removeImportFromDeclaration,
+} from "./manageImports"
+
+const j = jscodeshift.withParser("tsx")
+
+describe("componentTransformUtilities", () => {
+  describe("getImportName", () => {
+    it("should return local name for imported component", () => {
+      const code = `import { Button } from "@planningcenter/tapestry-react"`
+      const source = j(code)
+
+      const result = getImportName("Button", "@planningcenter/tapestry-react", {
+        j,
+        source,
+      })
+
+      expect(result).toBe("Button")
+    })
+
+    it("should return aliased name for renamed import", () => {
+      const code = `import { Button as TapestryButton } from "@planningcenter/tapestry-react"`
+      const source = j(code)
+
+      const result = getImportName("Button", "@planningcenter/tapestry-react", {
+        j,
+        source,
+      })
+
+      expect(result).toBe("TapestryButton")
+    })
+
+    it("should return null when component is not imported", () => {
+      const code = `import { Link } from "@planningcenter/tapestry-react"`
+      const source = j(code)
+
+      const result = getImportName("Button", "@planningcenter/tapestry-react", {
+        j,
+        source,
+      })
+
+      expect(result).toBe(null)
+    })
+
+    it("should return null when package is not imported", () => {
+      const code = `import { Button } from "other-package"`
+      const source = j(code)
+
+      const result = getImportName("Button", "@planningcenter/tapestry-react", {
+        j,
+        source,
+      })
+
+      expect(result).toBe(null)
+    })
+
+    it("should handle multiple imports from same package", () => {
+      const code = `import { Button, Link as MyLink } from "@planningcenter/tapestry-react"`
+      const source = j(code)
+
+      const buttonResult = getImportName(
+        "Button",
+        "@planningcenter/tapestry-react",
+        { j, source }
+      )
+      const linkResult = getImportName(
+        "Link",
+        "@planningcenter/tapestry-react",
+        { j, source }
+      )
+
+      expect(buttonResult).toBe("Button")
+      expect(linkResult).toBe("MyLink")
+    })
+
+    it("should handle multiple import declarations", () => {
+      const code = `
+        import { Button } from "@planningcenter/tapestry-react"
+        import { useState } from "react"
+        import { Link } from "@planningcenter/tapestry-react"
+      `
+      const source = j(code)
+
+      const buttonResult = getImportName(
+        "Button",
+        "@planningcenter/tapestry-react",
+        { j, source }
+      )
+      const linkResult = getImportName(
+        "Link",
+        "@planningcenter/tapestry-react",
+        { j, source }
+      )
+
+      expect(buttonResult).toBe("Button")
+      expect(linkResult).toBe("Link")
+    })
+  })
+
+  describe("hasConflictingImport", () => {
+    it("should return true when component is imported from different package", () => {
+      const code = `import { Link } from "react-router-dom"`
+      const source = j(code)
+
+      const result = hasConflictingImport(
+        "Link",
+        "@planningcenter/tapestry-react",
+        { j, source }
+      )
+
+      expect(result).toBe(true)
+    })
+
+    it("should return false when component is only imported from excluded package", () => {
+      const code = `import { Link } from "@planningcenter/tapestry-react"`
+      const source = j(code)
+
+      const result = hasConflictingImport(
+        "Link",
+        "@planningcenter/tapestry-react",
+        { j, source }
+      )
+
+      expect(result).toBe(false)
+    })
+
+    it("should return false when component is not imported at all", () => {
+      const code = `import { Button } from "@planningcenter/tapestry-react"`
+      const source = j(code)
+
+      const result = hasConflictingImport(
+        "Link",
+        "@planningcenter/tapestry-react",
+        { j, source }
+      )
+
+      expect(result).toBe(false)
+    })
+
+    it("should return true for default import conflicts", () => {
+      const code = `import Link from "next/link"`
+      const source = j(code)
+
+      const result = hasConflictingImport(
+        "Link",
+        "@planningcenter/tapestry-react",
+        { j, source }
+      )
+
+      expect(result).toBe(true)
+    })
+
+    it("should handle multiple conflicting sources", () => {
+      const code = `
+        import { Link } from "react-router-dom"
+        import { Link as NextLink } from "next/link"
+        import { Button } from "@planningcenter/tapestry-react"
+      `
+      const source = j(code)
+
+      const result = hasConflictingImport(
+        "Link",
+        "@planningcenter/tapestry-react",
+        { j, source }
+      )
+
+      expect(result).toBe(true)
+    })
+  })
+
+  describe("addImportToExisting", () => {
+    it("should add new import to existing import declaration", () => {
+      const code = `import { Button } from "@planningcenter/tapestry-react"`
+      const source = j(code)
+      const importPath = source.find(j.ImportDeclaration).at(0)
+
+      addImportToExisting(importPath.get(), "Link", j)
+
+      const output = source.toSource()
+      expect(output).toContain(
+        'import { Button, Link } from "@planningcenter/tapestry-react"'
+      )
+    })
+
+    it("should add aliased import to existing declaration", () => {
+      const code = `import { Button } from "@planningcenter/tapestry-react"`
+      const source = j(code)
+      const importPath = source.find(j.ImportDeclaration).at(0)
+
+      addImportToExisting(importPath.get(), "Link", j, "TLink")
+
+      const output = source.toSource()
+      expect(output).toContain(
+        'import { Button, Link as TLink } from "@planningcenter/tapestry-react"'
+      )
+    })
+
+    it("should not add duplicate imports", () => {
+      const code = `import { Button, Link } from "@planningcenter/tapestry-react"`
+      const source = j(code)
+      const importPath = source.find(j.ImportDeclaration).at(0)
+
+      addImportToExisting(importPath.get(), "Link", j)
+
+      const output = source.toSource()
+      // Should still only have one Link import
+      expect(output).toContain(
+        'import { Button, Link } from "@planningcenter/tapestry-react"'
+      )
+    })
+
+    it("should handle empty specifiers list", () => {
+      const code = `import {} from "@planningcenter/tapestry-react"`
+      const source = j(code)
+      const importPath = source.find(j.ImportDeclaration).at(0)
+
+      addImportToExisting(importPath.get(), "Button", j)
+
+      const output = source.toSource()
+      expect(output).toContain(
+        'import { Button } from "@planningcenter/tapestry-react"'
+      )
+    })
+  })
+
+  describe("createNewImport", () => {
+    it("should create new import declaration", () => {
+      const code = `const test = "existing code"`
+      const source = j(code)
+
+      createNewImport(source, "Button", "@planningcenter/tapestry-react", j)
+
+      const output = source.toSource()
+      expect(output).toContain(
+        'import { Button } from "@planningcenter/tapestry-react";'
+      )
+      expect(output).toContain('const test = "existing code"')
+    })
+
+    it("should create new import with alias", () => {
+      const code = `const test = "existing"`
+      const source = j(code)
+
+      createNewImport(
+        source,
+        "Link",
+        "@planningcenter/tapestry-react",
+        j,
+        "TLink"
+      )
+
+      const output = source.toSource()
+      expect(output).toContain(
+        'import { Link as TLink } from "@planningcenter/tapestry-react";'
+      )
+    })
+
+    it("should add new import after existing imports", () => {
+      const code = `
+        import React from "react"
+        import { useState } from "react"
+
+        const component = () => null
+      `
+      const source = j(code)
+
+      createNewImport(source, "Button", "@planningcenter/tapestry-react", j)
+
+      const output = source.toSource()
+      const lines = output.split("\n")
+      const reactImportIndex = lines.findIndex((line) =>
+        line.includes('import React from "react"')
+      )
+      const useStateImportIndex = lines.findIndex((line) =>
+        line.includes('import { useState } from "react"')
+      )
+      const buttonImportIndex = lines.findIndex((line) =>
+        line.includes('import { Button } from "@planningcenter/tapestry-react"')
+      )
+
+      expect(reactImportIndex).toBeLessThan(buttonImportIndex)
+      expect(useStateImportIndex).toBeLessThan(buttonImportIndex)
+    })
+
+    it("should handle empty file", () => {
+      const code = ``
+      const source = j(code)
+
+      createNewImport(source, "Button", "@planningcenter/tapestry-react", j)
+
+      const output = source.toSource()
+      expect(output).toBe(
+        'import { Button } from "@planningcenter/tapestry-react";'
+      )
+    })
+  })
+
+  describe("removeImportFromDeclaration", () => {
+    it("should remove import specifier", () => {
+      const code = `import { Button, Link } from "@planningcenter/tapestry-react"`
+      const source = j(code)
+      const importPath = source.find(j.ImportDeclaration).at(0)
+
+      const result = removeImportFromDeclaration(importPath.get(), "Button")
+
+      expect(result).toBe(true)
+      const output = source.toSource()
+      expect(output).toContain(
+        'import { Link } from "@planningcenter/tapestry-react"'
+      )
+      expect(output).not.toContain("Button")
+    })
+
+    it("should remove entire import if no specifiers left", () => {
+      const code = `
+        import React from "react"
+        import { Button } from "@planningcenter/tapestry-react"
+        const component = () => null
+      `
+      const source = j(code)
+      const tapestryImport = source
+        .find(j.ImportDeclaration)
+        .filter(
+          (path) => path.value.source.value === "@planningcenter/tapestry-react"
+        )
+        .at(0)
+
+      const result = removeImportFromDeclaration(tapestryImport.get(), "Button")
+
+      expect(result).toBe(true)
+      const output = source.toSource()
+      expect(output).not.toContain("@planningcenter/tapestry-react")
+      expect(output).toContain('import React from "react"') // Other imports should remain
+    })
+
+    it("should return false if import not found", () => {
+      const code = `import { Button } from "@planningcenter/tapestry-react"`
+      const source = j(code)
+      const importPath = source.find(j.ImportDeclaration).at(0)
+
+      const result = removeImportFromDeclaration(importPath.get(), "Link")
+
+      expect(result).toBe(false)
+      const output = source.toSource()
+      expect(output).toContain("Button") // Should be unchanged
+    })
+
+    it("should handle single import removal", () => {
+      const code = `import { Button } from "@planningcenter/tapestry-react"`
+      const source = j(code)
+      const importPath = source.find(j.ImportDeclaration).at(0)
+
+      const result = removeImportFromDeclaration(importPath.get(), "Button")
+
+      expect(result).toBe(true)
+      expect(source.find(j.ImportDeclaration).length).toBe(0)
+    })
+
+    it("should preserve other specifiers", () => {
+      const code = `import { Button, Link, Input } from "@planningcenter/tapestry-react"`
+      const source = j(code)
+      const importPath = source.find(j.ImportDeclaration).at(0)
+
+      const result = removeImportFromDeclaration(importPath.get(), "Link")
+
+      expect(result).toBe(true)
+      const output = source.toSource()
+      expect(output).toContain("Button")
+      expect(output).toContain("Input")
+      expect(output).not.toContain("Link")
+      expect(output).toContain(
+        'import { Button, Input } from "@planningcenter/tapestry-react"'
+      )
+    })
+  })
+})

package/src/components/shared/transformFactories/helpers/manageImports.ts

@@ -0,0 +1,204 @@
+import { Collection, ImportSpecifier, JSCodeshift } from "jscodeshift"
+
+import { TransformCondition } from "../../types"
+
+/**
+ * Generic import name getter that works with any package
+ */
+export function getImportName(
+  importName: string,
+  packageName: string,
+  { source, j }: { j: JSCodeshift; source: Collection }
+): string | null {
+  let localName: string | null = null
+
+  source
+    .find(j.ImportDeclaration, {
+      source: { value: packageName },
+    })
+    .forEach((path) => {
+      const specifiers = path.value.specifiers || []
+
+      specifiers.forEach((spec) => {
+        if (
+          spec.type === "ImportSpecifier" &&
+          spec.imported?.name === importName
+        ) {
+          localName = (spec.local?.name as string) || importName
+        }
+      })
+    })
+
+  return localName
+}
+
+/**
+ * Checks if a component is already imported from sources other than the specified package
+ */
+export function hasConflictingImport(
+  componentName: string,
+  excludePackage: string,
+  { source, j }: { j: JSCodeshift; source: Collection }
+): boolean {
+  const conflictingImport = source.find(j.ImportDeclaration).filter((path) => {
+    if (path.value.source.value === excludePackage) {
+      return false
+    }
+
+    return (
+      path.value.specifiers?.some(
+        (spec) =>
+          (spec.type === "ImportSpecifier" &&
+            spec.imported?.name === componentName) ||
+          (spec.type === "ImportDefaultSpecifier" &&
+            spec.local?.name === componentName)
+      ) || false
+    )
+  })
+
+  return conflictingImport.length > 0
+}
+
+/**
+ * Adds an import to an existing import declaration
+ */
+export function addImportToExisting(
+  importPath: Collection,
+  componentName: string,
+  j: JSCodeshift,
+  alias?: string
+): void {
+  const specifiers = importPath.get().value.specifiers || []
+
+  const hasImport = specifiers.some(
+    (spec: ImportSpecifier) =>
+      spec.type === "ImportSpecifier" && spec.imported?.name === componentName
+  )
+
+  if (!hasImport) {
+    const importSpecifier = alias
+      ? j.importSpecifier(j.identifier(componentName), j.identifier(alias))
+      : j.importSpecifier(j.identifier(componentName))
+
+    specifiers.push(importSpecifier)
+  }
+}
+
+/**
+ * Creates a new import declaration
+ */
+export function createNewImport(
+  source: Collection,
+  componentName: string,
+  packageName: string,
+  j: JSCodeshift,
+  alias?: string
+): void {
+  const importSpecifier = alias
+    ? j.importSpecifier(j.identifier(componentName), j.identifier(alias))
+    : j.importSpecifier(j.identifier(componentName))
+
+  const lastImport = source.find(j.ImportDeclaration).at(-1)
+  if (lastImport.length > 0) {
+    lastImport.insertAfter(
+      j.importDeclaration([importSpecifier], j.stringLiteral(packageName))
+    )
+  } else {
+    const program = source.find(j.Program)
+    if (program.length > 0) {
+      program
+        .get("body", 0)
+        .insertBefore(
+          j.importDeclaration([importSpecifier], j.stringLiteral(packageName))
+        )
+    }
+  }
+}
+
+/**
+ * Removes an import from an import declaration and cleans up empty imports
+ */
+export function removeImportFromDeclaration(
+  importPath: Collection,
+  componentName: string
+): boolean {
+  const specifiers = importPath.get().value.specifiers || []
+
+  const importIndex = specifiers.findIndex(
+    (spec: ImportSpecifier) =>
+      spec.type === "ImportSpecifier" && spec.imported?.name === componentName
+  )
+
+  if (importIndex >= 0) {
+    specifiers.splice(importIndex, 1)
+
+    // Remove entire import if no specifiers left
+    if (specifiers.length === 0) {
+      importPath.get().replace()
+    }
+    return true
+  }
+  return false
+}
+
+/**
+ * Manages imports after transformation - adds target imports and removes unused source imports
+ */
+export function manageImports(
+  source: Collection,
+  config: {
+    /** Condition that must be met for the transform to occur */
+    condition: TransformCondition
+    /** Optional alias to use if target component conflicts with existing imports */
+    conflictAlias?: string
+    /** The source component name to transform from */
+    fromComponent: string
+    /** The package to import the source component from */
+    fromPackage: string
+    /** The target component name to transform to */
+    toComponent: string
+    /** The package to import the target component from */
+    toPackage: string
+  },
+  sourceComponentName: string,
+  targetComponentName: string,
+  j: JSCodeshift
+): void {
+  // Check if source component is still being used
+  const stillUsesSource =
+    source.find(j.JSXOpeningElement, {
+      name: { name: sourceComponentName },
+    }).length > 0
+
+  // Handle source package import cleanup
+  const sourceImport = source
+    .find(j.ImportDeclaration, {
+      source: { value: config.fromPackage },
+    })
+    .at(0)
+
+  if (sourceImport.length > 0 && !stillUsesSource) {
+    removeImportFromDeclaration(sourceImport, config.fromComponent)
+  }
+
+  // Handle target package import addition
+  const targetImport = source
+    .find(j.ImportDeclaration, {
+      source: { value: config.toPackage },
+    })
+    .at(0)
+
+  if (targetImport.length > 0) {
+    const alias =
+      targetComponentName !== config.toComponent
+        ? targetComponentName
+        : undefined
+    addImportToExisting(targetImport, config.toComponent, j, alias)
+  } else {
+    const alias =
+      targetComponentName !== config.toComponent
+        ? targetComponentName
+        : undefined
+    createNewImport(source, config.toComponent, config.toPackage, j, alias)
+  }
+}

package/src/components/shared/types.ts

@@ -0,0 +1,6 @@
+import { JSXElement } from "jscodeshift"
+
+/**
+ * Condition function that determines whether a JSX element should be transformed
+ */
+export type TransformCondition = (element: JSXElement) => boolean

package/src/index.ts

@@ -0,0 +1,47 @@
+#!/usr/bin/env tsx
+
+import { Command } from "commander"
+
+import { runTransforms } from "./jscodeshiftRunner"
+
+const program = new Command()
+
+program
+  .name("tapestry-migration-cli")
+  .description("CLI tool for Tapestry migrations")
+
+const COMPONENTS = ["button"]
+
+program
+  .command("run")
+  .description("Run a migration of a component from Tapestry React to Tapestry")
+  .argument("<component-name>", "The name of the component to migrate")
+  .option("-f, --fix", "Write the changes")
+  .option("-p, --path <path>", "The path to the folder/file to migrate")
+  .option("-v, --verbose", "Verbose output")
+  .action((componentName, options) => {
+    console.log("Hello from Tapestry Migration CLI! 🎨")
+    console.log(`Component: ${componentName}`)
+    const key = componentName.toLowerCase()
+
+    if (COMPONENTS.includes(key)) {
+      runTransforms(key, options)
+    } else {
+      console.log(
+        `Invalid component name: ${componentName}. Valid components are: ${COMPONENTS.join(", ")}`
+      )
+    }
+  })
+
+program
+  .command("help")
+  .description("Show help information")
+  .action(() => {
+    program.help()
+  })
+
+program.parse()
+
+if (!process.argv.slice(2).length) {
+  program.outputHelp()
+}

package/src/jscodeshiftRunner.ts

@@ -0,0 +1,49 @@
+import { execSync } from "child_process"
+import { existsSync } from "fs"
+import { dirname, resolve } from "path"
+import { fileURLToPath } from "url"
+
+import { Options } from "./shared/types"
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+export function runTransforms(key: string, options: Options): void {
+  const transformPath = resolve(__dirname, "components", key, "index.ts")
+  const targetPath = options.path
+
+  if (!existsSync(targetPath)) {
+    console.error(`❌ Path not found: ${targetPath}`)
+    return
+  }
+
+  console.log("🎯 Running transforms...")
+  console.log(`📁 Target: ${targetPath}`)
+  console.log(`🔧 Transform: ${transformPath}`)
+
+  try {
+    const command = [
+      "npx",
+      "--prefer-offline",
+      "jscodeshift",
+      "-t",
+      transformPath,
+      targetPath,
+      options.fix ? "" : "--dry",
+      options.verbose ? "--verbose=2" : "",
+      "--parser=tsx",
+    ]
+      .filter(Boolean)
+      .join(" ")
+
+    console.log(`🚀 Running: ${command}`)
+
+    execSync(command, {
+      cwd: process.cwd(),
+      env: process.env,
+      stdio: "inherit",
+    })
+  } catch (error) {
+    console.error("❌ Transform failed:", error)
+  }
+}

package/src/shared/types.ts

@@ -0,0 +1,6 @@
+export interface Options {
+  fix?: boolean
+  jsTheme?: string
+  path: string
+  verbose?: boolean
+}

package/dist/index.d.ts

@@ -1,2 +0,0 @@
-#!/usr/bin/env node
-export {};