@planningcenter/tapestry-migration-cli 2.3.0-rc.1 → 2.3.0-rc.11

package/src/components/shared/actions/removeUnusedImport.test.ts

@@ -0,0 +1,302 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import { removeUnusedImport } from "./removeUnusedImport"
+
+const j = jscodeshift.withParser("tsx")
+
+describe("removeUnusedImport", () => {
+  describe("single component removal", () => {
+    it("should remove unused import completely when it's the only specifier", () => {
+      const source = j(`
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <div>No Button used</div>
+        }
+      `)
+
+      const result = removeUnusedImport({
+        componentName: "Button",
+        j,
+        packageName: "@planningcenter/tapestry-react",
+        source,
+      })
+
+      expect(result).toBe(true)
+      expect(source.toSource()).not.toContain("import { Button }")
+      expect(source.toSource()).not.toContain("@planningcenter/tapestry-react")
+    })
+
+    it("should remove only the unused specifier from multi-component import", () => {
+      const source = j(`
+        import { Button, Icon, Input } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return (
+            <div>
+              <Icon name="add" />
+              <Input placeholder="Enter text" />
+            </div>
+          )
+        }
+      `)
+
+      const result = removeUnusedImport({
+        componentName: "Button",
+        j,
+        packageName: "@planningcenter/tapestry-react",
+        source,
+      })
+
+      expect(result).toBe(true)
+      const output = source.toSource()
+      expect(output).toContain("import { Icon, Input }")
+      expect(output).not.toContain("Button")
+      expect(output).toContain('<Icon name="add" />')
+      expect(output).toContain('<Input placeholder="Enter text" />')
+    })
+
+    it("should not remove import if component is still used in JSX", () => {
+      const source = j(`
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Button kind="primary">Click me</Button>
+        }
+      `)
+
+      const result = removeUnusedImport({
+        componentName: "Button",
+        j,
+        packageName: "@planningcenter/tapestry-react",
+        source,
+      })
+
+      expect(result).toBe(false)
+      expect(source.toSource()).toContain("import { Button }")
+      expect(source.toSource()).toContain(
+        '<Button kind="primary">Click me</Button>'
+      )
+    })
+
+    it("should not remove import if component is used as a variable reference", () => {
+      const source = j(`
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          const MyButton = Button
+          return <MyButton>Click me</MyButton>
+        }
+      `)
+
+      const result = removeUnusedImport({
+        componentName: "Button",
+        j,
+        packageName: "@planningcenter/tapestry-react",
+        source,
+      })
+
+      expect(result).toBe(false)
+      expect(source.toSource()).toContain("import { Button }")
+      expect(source.toSource()).toContain("const MyButton = Button")
+    })
+
+    it("should handle aliased imports correctly", () => {
+      const source = j(`
+        import { Button as TapestryButton } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <div>No button used</div>
+        }
+      `)
+
+      const result = removeUnusedImport({
+        componentName: "Button",
+        j,
+        packageName: "@planningcenter/tapestry-react",
+        source,
+      })
+
+      expect(result).toBe(true)
+      expect(source.toSource()).not.toContain(
+        "import { Button as TapestryButton }"
+      )
+    })
+
+    it("should not remove aliased import if alias is still used", () => {
+      const source = j(`
+        import { Button as TapestryButton } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <TapestryButton>Click me</TapestryButton>
+        }
+      `)
+
+      const result = removeUnusedImport({
+        componentName: "Button",
+        j,
+        packageName: "@planningcenter/tapestry-react",
+        source,
+      })
+
+      expect(result).toBe(false)
+      expect(source.toSource()).toContain("import { Button as TapestryButton }")
+      expect(source.toSource()).toContain(
+        "<TapestryButton>Click me</TapestryButton>"
+      )
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should return false when import declaration doesn't exist", () => {
+      const source = j(`
+        export function TestComponent() {
+          return <div>No imports</div>
+        }
+      `)
+
+      const result = removeUnusedImport({
+        componentName: "Button",
+        j,
+        packageName: "@planningcenter/tapestry-react",
+        source,
+      })
+
+      expect(result).toBe(false)
+    })
+
+    it("should return false when component isn't in the specified package", () => {
+      const source = j(`
+        import { Button } from "some-other-library"
+
+        export function TestComponent() {
+          return <div>No tapestry button</div>
+        }
+      `)
+
+      const result = removeUnusedImport({
+        componentName: "Button",
+        j,
+        packageName: "@planningcenter/tapestry-react",
+        source,
+      })
+
+      expect(result).toBe(false)
+      expect(source.toSource()).toContain(
+        'import { Button } from "some-other-library"'
+      )
+    })
+
+    it("should return false when component isn't in the import specifiers", () => {
+      const source = j(`
+        import { Icon, Input } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Icon name="add" />
+        }
+      `)
+
+      const result = removeUnusedImport({
+        componentName: "Button",
+        j,
+        packageName: "@planningcenter/tapestry-react",
+        source,
+      })
+
+      expect(result).toBe(false)
+      expect(source.toSource()).toContain("import { Icon, Input }")
+    })
+
+    it("should handle self-closing JSX elements", () => {
+      const source = j(`
+        import { Icon } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Icon name="add" />
+        }
+      `)
+
+      const result = removeUnusedImport({
+        componentName: "Icon",
+        j,
+        packageName: "@planningcenter/tapestry-react",
+        source,
+      })
+
+      expect(result).toBe(false) // Should not remove because Icon is used
+      expect(source.toSource()).toContain("import { Icon }")
+    })
+
+    it("should handle component usage in nested JSX", () => {
+      const source = j(`
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return (
+            <div>
+              <section>
+                <Button>Nested Button</Button>
+              </section>
+            </div>
+          )
+        }
+      `)
+
+      const result = removeUnusedImport({
+        componentName: "Button",
+        j,
+        packageName: "@planningcenter/tapestry-react",
+        source,
+      })
+
+      expect(result).toBe(false) // Should not remove because Button is used
+      expect(source.toSource()).toContain("import { Button }")
+      expect(source.toSource()).toContain("<Button>Nested Button</Button>")
+    })
+  })
+
+  describe("complex usage patterns", () => {
+    it("should handle component used in function calls", () => {
+      const source = j(`
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          const components = [Button]
+          return <div>{components.map(C => <C key="test">Test</C>)}</div>
+        }
+      `)
+
+      const result = removeUnusedImport({
+        componentName: "Button",
+        j,
+        packageName: "@planningcenter/tapestry-react",
+        source,
+      })
+
+      expect(result).toBe(false) // Should not remove because Button is referenced
+      expect(source.toSource()).toContain("import { Button }")
+      expect(source.toSource()).toContain("const components = [Button]")
+    })
+
+    it("should handle component used in conditional rendering", () => {
+      const source = j(`
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent({ showButton }) {
+          return showButton ? <Button>Show</Button> : null
+        }
+      `)
+
+      const result = removeUnusedImport({
+        componentName: "Button",
+        j,
+        packageName: "@planningcenter/tapestry-react",
+        source,
+      })
+
+      expect(result).toBe(false) // Should not remove because Button is used
+      expect(source.toSource()).toContain("import { Button }")
+    })
+  })
+})

package/src/components/shared/actions/removeUnusedImport.ts

@@ -0,0 +1,81 @@
+import { Collection, JSCodeshift } from "jscodeshift"
+
+export function removeUnusedImport({
+  componentName,
+  packageName,
+  j,
+  source,
+}: {
+  componentName: string
+  j: JSCodeshift
+  packageName: string
+  source: Collection
+}): boolean {
+  const importDeclaration = source
+    .find(j.ImportDeclaration)
+    .filter((path) => path.value.source.value === packageName)
+    .at(0)
+  if (!importDeclaration.length) return false
+
+  const importDeclPath = importDeclaration.get()
+  const specifiers = importDeclPath.value.specifiers || []
+  const targetSpecifier = specifiers.find(
+    (spec: { imported: { name: string }; type: string }) => {
+      if (spec.type === "ImportSpecifier") {
+        return spec.imported.name === componentName
+      }
+      if (spec.type === "ImportDefaultSpecifier") {
+        return componentName === "default"
+      }
+      return false
+    }
+  )
+  if (!targetSpecifier) return false
+
+  const localName = targetSpecifier.local?.name || componentName
+  const isUsed = checkComponentUsage(localName, j, source)
+  if (isUsed) return false
+
+  const remainingSpecifiers = specifiers.filter(
+    (spec: { imported: { name: string }; type: string }) =>
+      spec !== targetSpecifier
+  )
+
+  if (remainingSpecifiers.length === 0) {
+    importDeclPath.prune()
+  } else {
+    importDeclPath.value.specifiers = remainingSpecifiers
+  }
+
+  return true
+}
+
+function checkComponentUsage(
+  localName: string,
+  j: JSCodeshift,
+  source: Collection
+): boolean {
+  const jsxUsage = source.find(j.JSXElement).filter((path) => {
+    const openingName = path.value.openingElement.name
+    if (openingName.type === "JSXIdentifier")
+      return openingName.name === localName
+    return false
+  })
+
+  if (jsxUsage.length > 0) return true
+
+  const identifierUsage = source.find(j.Identifier).filter((path) => {
+    const parent = path.parent?.value
+    if (
+      parent?.type === "ImportSpecifier" ||
+      parent?.type === "ImportDefaultSpecifier" ||
+      parent?.type === "JSXOpeningElement" ||
+      parent?.type === "JSXClosingElement"
+    )
+      return false
+
+    return path.value.name === localName
+  })
+
+  return identifierUsage.length > 0
+}

package/src/components/shared/actions/transformElementName.test.ts

@@ -9,9 +9,9 @@ describe("transformElementName", () => {
   it("should transform JSX element name", () => {
     const code = `<Button>Click me</Button>`
     const source = j(code)
-    const elementPath = source.find(j.JSXOpeningElement).at(0)
+    const element = source.find(j.JSXElement).at(0).get().value
 
-    const result = transformElementName(elementPath.get(), "Link")
+    const result = transformElementName({ element, name: "Link" })
 
     expect(result).toBe(true)
     expect(source.toSource()).toContain("<Link>Click me</Link>")
@@ -20,9 +20,9 @@ describe("transformElementName", () => {
   it("should transform both opening and closing tags", () => {
     const code = `<Button className="test">Content</Button>`
     const source = j(code)
-    const elementPath = source.find(j.JSXOpeningElement).at(0)
+    const element = source.find(j.JSXElement).at(0).get().value
 
-    const result = transformElementName(elementPath.get(), "Link")
+    const result = transformElementName({ element, name: "Link" })
 
     expect(result).toBe(true)
     const output = source.toSource()
@@ -33,9 +33,9 @@ describe("transformElementName", () => {
   it("should handle self-closing tags", () => {
     const code = `<Button />`
     const source = j(code)
-    const elementPath = source.find(j.JSXOpeningElement).at(0)
+    const element = source.find(j.JSXElement).at(0).get().value
 
-    const result = transformElementName(elementPath.get(), "Link")
+    const result = transformElementName({ element, name: "Link" })
 
     expect(result).toBe(true)
     expect(source.toSource()).toContain("<Link />")
@@ -44,16 +44,16 @@ describe("transformElementName", () => {
   it("should preserve all attributes", () => {
     const code = `<Button className="test" onClick={handler} disabled>Content</Button>`
     const source = j(code)
-    const elementPath = source.find(j.JSXOpeningElement).at(0)
+    const element = source.find(j.JSXElement).at(0).get().value
 
-    const result = transformElementName(elementPath.get(), "OtherButton")
+    const result = transformElementName({ element, name: "OtherButton" })
 
-    expect(result).toBe(true)
     const output = source.toSource()
     expect(output).toContain('className="test"')
     expect(output).toContain("onClick={handler}")
     expect(output).toContain("disabled")
     expect(output).toContain("<OtherButton")
     expect(output).toContain("</OtherButton>")
+    expect(result).toBe(true)
   })
 })

package/src/components/shared/actions/transformElementName.ts

@@ -1,24 +1,21 @@
-import { ASTPath, JSXOpeningElement } from "jscodeshift"
+import { JSXElement } from "jscodeshift"
 
 /**
  * Transforms JSX element names (both opening and closing tags)
  */
-export function transformElementName(
-  elementPath: ASTPath<JSXOpeningElement>,
-  newName: string
-): boolean {
-  if (elementPath.value.name.type === "JSXIdentifier") {
-    elementPath.value.name.name = newName
+export function transformElementName({
+  element,
+  name,
+}: {
+  element: JSXElement
+  name: string
+}): boolean {
+  if (element?.openingElement?.name?.type === "JSXIdentifier") {
+    element.openingElement.name.name = name
 
-    // Update closing tag if it exists
-    const parent = elementPath.parent
-    if (
-      parent &&
-      parent.value.type === "JSXElement" &&
-      parent.value.closingElement
-    ) {
-      if (parent.value.closingElement.name.type === "JSXIdentifier") {
-        parent.value.closingElement.name.name = newName
+    if (element.closingElement) {
+      if (element.closingElement.name.type === "JSXIdentifier") {
+        element.closingElement.name.name = name
       }
     }
     return true

package/src/components/shared/conditions/hasChildren.ts

@@ -0,0 +1,5 @@
+import { JSXElement } from "jscodeshift"
+
+export function hasChildren(element: JSXElement): boolean {
+  return !!element.children && element.children.length > 0
+}

package/src/components/shared/getJavaScriptTheme.ts

@@ -0,0 +1,68 @@
+import { JavaScriptTheme, loadJavaScriptTheme } from "./jsThemeLoader"
+
+// Cache to avoid reloading the same theme multiple times during a transform run
+const themeCache = new Map<string, JavaScriptTheme>()
+
+/**
+ * Get JavaScript theme from transform options
+ * This function can be used by individual transforms to access the loaded theme
+ */
+export async function getJavaScriptTheme(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  options: any
+): Promise<JavaScriptTheme | null> {
+  // Check if jsThemePath is provided in options
+  const jsThemePath = options.jsThemePath
+
+  if (!jsThemePath) {
+    return null
+  }
+
+  // Check cache first
+  if (themeCache.has(jsThemePath)) {
+    return themeCache.get(jsThemePath)!
+  }
+
+  try {
+    // Load the theme
+    const theme = await loadJavaScriptTheme(jsThemePath)
+
+    // Cache the result
+    themeCache.set(jsThemePath, theme)
+
+    return theme
+  } catch (error) {
+    console.error(
+      `❌ Failed to load JS theme: ${error instanceof Error ? error.message : "Unknown error"}`
+    )
+    return null
+  }
+}
+
+/**
+ * Clear the theme cache (useful for testing)
+ */
+export function clearThemeCache(): void {
+  themeCache.clear()
+}
+
+/**
+ * Helper function to access nested theme values safely
+ * Example: getThemeValue(theme, 'colors.primary') returns '#007bff'
+ */
+export function getThemeValue(theme: JavaScriptTheme, path: string) {
+  return path.split(".").reduce((obj, key) => {
+    return obj && typeof obj === "object" ? obj[key] : undefined
+  }, theme)
+}
+
+/**
+ * Example usage in a transform:
+ *
+ * const theme = await getJavaScriptTheme(options)
+ * if (theme) {
+ *   const primaryColor = getThemeValue(theme, 'colors.primary')
+ *   const mediumSpacing = getThemeValue(theme, 'spacing.md')
+ *   // Use theme values for transformations
+ * }
+ */

package/src/components/shared/jsThemeLoader.ts

@@ -0,0 +1,85 @@
+import { existsSync } from "fs"
+import { isAbsolute, resolve } from "path"
+import { pathToFileURL } from "url"
+
+/**
+ * Interface for JavaScript theme object - flexible structure
+ * This can contain any design tokens: colors, spacing, typography, etc.
+ */
+export interface JavaScriptTheme {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: any
+}
+
+/**
+ * Load a JavaScript theme file using dynamic imports with proper module resolution
+ */
+export async function loadJavaScriptTheme(
+  themePath: string,
+  basePath?: string
+): Promise<JavaScriptTheme> {
+  // Resolve the absolute path
+  let resolvedPath: string
+
+  if (isAbsolute(themePath)) {
+    resolvedPath = themePath
+  } else {
+    // Resolve relative to basePath (usually the current working directory)
+    const base = basePath || process.cwd()
+    resolvedPath = resolve(base, themePath)
+  }
+
+  // Check if file exists
+  if (!existsSync(resolvedPath)) {
+    throw new Error(`JavaScript theme file not found: ${resolvedPath}`)
+  }
+
+  try {
+    // Convert file path to file URL for proper dynamic import
+    const fileUrl = pathToFileURL(resolvedPath).href
+
+    // Dynamic import the JavaScript file
+    const themeModule = await import(fileUrl)
+
+    // Handle different export patterns
+    let themeObject: JavaScriptTheme
+
+    if (themeModule.default) {
+      // ES6 default export or CommonJS module.exports
+      themeObject = themeModule.default
+    } else if (themeModule.theme) {
+      // Named export 'theme'
+      themeObject = themeModule.theme
+    } else if (Object.keys(themeModule).length > 0) {
+      // Named exports - use the entire module
+      themeObject = themeModule
+    } else {
+      throw new Error(
+        'No theme object found in module. Expected default export, named "theme" export, or named exports.'
+      )
+    }
+
+    // Validate that we got an object
+    if (typeof themeObject !== "object" || themeObject === null) {
+      throw new Error("Theme must export an object")
+    }
+
+    return themeObject
+  } catch (error) {
+    if (error instanceof Error) {
+      throw new Error(`Failed to load JavaScript theme: ${error.message}`)
+    }
+    throw new Error("Failed to load JavaScript theme: Unknown error")
+  }
+}
+
+/**
+ * Load JavaScript theme synchronously for use in transforms
+ * This is a wrapper that handles the async loading in the main transform
+ */
+export function loadJavaScriptThemeSync(
+  themePath: string,
+  basePath?: string
+): Promise<JavaScriptTheme> {
+  return loadJavaScriptTheme(themePath, basePath)
+}