@planningcenter/tapestry-migration-cli 2.3.0-rc.6 → 2.3.0-rc.8

package/src/components/shared/transformFactories/stylePropTransformFactory.ts

@@ -0,0 +1,362 @@
+import {
+  Collection,
+  JSCodeshift,
+  JSXAttribute,
+  JSXElement,
+  Options,
+  Transform,
+} from "jscodeshift"
+
+import {
+  defaultTheme,
+  splitStyles,
+  stylePropNames,
+} from "../../../../dist/tapestry-react-shim.cjs"
+import { addComment } from "../../shared/actions/addComment"
+import { getAttribute } from "../../shared/actions/getAttribute"
+import { removeAttribute } from "../../shared/actions/removeAttribute"
+import { attributeTransformFactory } from "./attributeTransformFactory"
+
+type StylePropMapping = Record<
+  string,
+  {
+    defaultMapping: string
+    specialValues?: Record<string, string>
+  }
+>
+
+// Helper function to extract prop value from JSX attribute
+function extractPropValue(attr: JSXAttribute, j: JSCodeshift) {
+  if (!attr.value) {
+    // Boolean prop like <Button disabled />
+    return true
+  } else if (attr.value.type === "StringLiteral") {
+    // String literal like color="blue"
+    return attr.value.value
+  } else if (attr.value.type === "JSXExpressionContainer") {
+    // Expression like color={someVar} or color={5}
+    const expression = attr.value.expression
+    if (expression.type === "StringLiteral") {
+      return expression.value
+    } else if (expression.type === "NumericLiteral") {
+      return expression.value
+    } else if (expression.type === "BooleanLiteral") {
+      return expression.value
+    } else if (expression.type === "Identifier") {
+      // Variable reference - we'll use the variable name as a placeholder
+      return `{${expression.name}}`
+    } else {
+      // Complex expression - convert back to string representation
+      return `{${j(expression).toSource()}}`
+    }
+  } else {
+    // Fallback for other types
+    return j(attr.value).toSource()
+  }
+}
+
+function processKeepStyleProps({
+  attributes,
+  j,
+  element,
+  source,
+}: {
+  attributes: JSXAttribute[]
+  element: JSXElement
+  j: JSCodeshift
+  source: Collection
+}): {
+  directProps: Record<string, unknown>
+  themeProps: Record<string, unknown>
+} {
+  const themeProps: Record<string, unknown> = {}
+  const directProps: Record<string, unknown> = {}
+
+  attributes.forEach((attr) => {
+    const propName = attr.name.name as string
+    const propValue = extractPropValue(attr, j)
+
+    // If it's a complex expression (starts and ends with braces), handle it directly
+    if (
+      typeof propValue === "string" &&
+      propValue.startsWith("{") &&
+      propValue.endsWith("}")
+    ) {
+      directProps[propName] = propValue
+    } else {
+      themeProps[propName] = propValue
+    }
+
+    removeAttribute(propName, { element, j, source })
+  })
+
+  return { directProps, themeProps }
+}
+
+function processRemoveStyleProps({
+  j,
+  attributes,
+  source,
+  element,
+}: {
+  attributes: JSXAttribute[]
+  element: JSXElement
+  j: JSCodeshift
+  source: Collection
+}) {
+  attributes.forEach((attr) => {
+    const propName = attr.name.name as string
+    removeAttribute(propName, {
+      buildComment: (name, value) =>
+        `${name} has been removed as this is covered by default styling: ${name}: ${value}`,
+      element,
+      j,
+      source,
+    })
+  })
+}
+
+// Process props that need style property mappings
+function processStylePropMappings({
+  attributes,
+  j,
+  element,
+  source,
+  stylePropMapping,
+}: {
+  attributes: JSXAttribute[]
+  element: JSXElement
+  j: JSCodeshift
+  source: Collection
+  stylePropMapping: StylePropMapping
+}): Record<string, unknown> {
+  const styleProps: Record<string, unknown> = {}
+
+  attributes.forEach((attr) => {
+    const propName = attr.name.name as string
+    if (propName in stylePropMapping) {
+      const propValue = extractPropValue(attr, j)
+      const mappingConfig =
+        stylePropMapping[propName as keyof typeof stylePropMapping]
+
+      if (
+        mappingConfig.specialValues &&
+        typeof propValue === "string" &&
+        propValue in mappingConfig.specialValues
+      ) {
+        const specialAction =
+          mappingConfig.specialValues[
+            propValue as keyof typeof mappingConfig.specialValues
+          ]
+
+        if (specialAction === "AUDIT") {
+          const text = `${propName}="${propValue}" needs manual review for replacement`
+          addComment({ element, j, scope: "styleProp", source, text })
+        }
+        // Future: could support other special actions here
+      } else {
+        const mappedPropName = mappingConfig.defaultMapping
+        styleProps[mappedPropName] = propValue
+      }
+
+      removeAttribute(propName, { element, j, source })
+    }
+  })
+
+  return styleProps
+}
+
+function applyStylesToComponent({
+  j,
+  element,
+  styles,
+}: {
+  element: JSXElement
+  j: JSCodeshift
+  styles: Record<string, unknown>
+}) {
+  const styleAttr = getAttribute({ element, name: "style" })
+  const styleValue = j.jsxExpressionContainer(
+    j.objectExpression(
+      Object.entries(styles).map(([key, value]) => {
+        let valueNode
+        if (
+          typeof value === "string" &&
+          value.startsWith("{") &&
+          value.endsWith("}")
+        ) {
+          // This is a complex expression wrapped in braces - parse it as JS
+          const expressionCode = value.slice(1, -1) // Remove surrounding braces
+          try {
+            const parsed = j(expressionCode)
+            // Get the first expression from the program body
+            const firstStatement = parsed.find(j.Program).get("body", 0).value
+            if (firstStatement?.type === "ExpressionStatement") {
+              valueNode = firstStatement.expression
+            } else {
+              valueNode = j.stringLiteral(value)
+            }
+          } catch {
+            // If parsing fails, fall back to string literal
+            valueNode = j.stringLiteral(value)
+          }
+        } else if (typeof value === "string") {
+          valueNode = j.stringLiteral(value)
+        } else {
+          valueNode = j.literal(value as string | number | boolean | null)
+        }
+
+        return j.objectProperty(j.identifier(key), valueNode)
+      })
+    )
+  )
+
+  if (styleAttr && styleAttr.type === "JSXAttribute") {
+    // TODO: ensure this adds to exisiting style object rather than replacing
+    styleAttr.value = styleValue
+  } else {
+    const styleAttr = j.jsxAttribute(j.jsxIdentifier("style"), styleValue)
+
+    element.openingElement.attributes = element.openingElement.attributes || []
+    element.openingElement.attributes.push(styleAttr)
+  }
+}
+
+export function stylePropTransformFactory(config: {
+  plugin?: {
+    getStyles: (props: Record<string, unknown>) => Record<string, unknown>
+    styleProps: string[]
+  }
+  stylePropMapping?: StylePropMapping
+  stylesToKeep?: string[]
+  stylesToRemove: string[]
+  targetComponent: string
+  targetPackage: string
+}): Transform {
+  const {
+    stylePropMapping = {} as StylePropMapping,
+    stylesToKeep = [],
+    stylesToRemove,
+  } = config
+  const transform: (
+    element: JSXElement,
+    resources: { j: JSCodeshift; options: Options; source: Collection }
+  ) => boolean = (element, { j, options, source }) => {
+    const allAttributes = element.openingElement.attributes || []
+    let allStyleProps: Record<string, unknown> = {}
+    let directStyleProps: Record<string, unknown> = {}
+    const attributes = allAttributes.filter((attr) => {
+      if (attr.type !== "JSXAttribute") return false
+      const name = attr.name?.name as string
+      return (
+        name &&
+        (stylePropNames.includes(name) ||
+          name in stylePropMapping ||
+          stylesToKeep.includes(name) ||
+          stylesToRemove.includes(name) ||
+          (config.plugin?.styleProps.includes(name) ?? false))
+      )
+    }) as JSXAttribute[]
+
+    const keepAttributes = attributes.filter(
+      (attr) =>
+        !stylesToRemove.includes(attr.name.name as string) &&
+        !((attr.name.name as string) in stylePropMapping)
+    )
+    const keepResult = processKeepStyleProps({
+      attributes: keepAttributes,
+      element,
+      j,
+      source,
+    })
+    allStyleProps = {
+      ...allStyleProps,
+      ...keepResult.themeProps,
+    }
+    directStyleProps = {
+      ...directStyleProps,
+      ...keepResult.directProps,
+    }
+
+    allStyleProps = {
+      ...allStyleProps,
+      ...processStylePropMappings({
+        attributes,
+        element,
+        j,
+        source,
+        stylePropMapping,
+      }),
+    }
+
+    const removeAttributes = attributes.filter((attr) =>
+      stylesToRemove.includes(attr.name.name as string)
+    )
+    processRemoveStyleProps({
+      attributes: removeAttributes,
+      element,
+      j,
+      source,
+    })
+
+    // Convert collected style props to CSS if any exist
+    if (
+      Object.keys(allStyleProps).length > 0 ||
+      Object.keys(directStyleProps).length > 0
+    ) {
+      try {
+        let styles: Record<string, unknown> = {}
+
+        // Process theme props through the theme system
+        if (Object.keys(allStyleProps).length > 0) {
+          const result = splitStyles({
+            ...allStyleProps,
+            plugin: config.plugin,
+          })
+          const cssObject = result.css(defaultTheme)
+          styles = { ...styles, ...(cssObject[0] || {}) }
+        }
+
+        // Add direct props without theme processing
+        styles = { ...styles, ...directStyleProps }
+        if (options.verbose) console.log("Final generated styles:", styles)
+
+        // Apply the styles to the component
+        applyStylesToComponent({ element, j, styles })
+      } catch (error) {
+        console.log("Error processing style props:", error)
+        console.log("Style props that caused error:", allStyleProps)
+      }
+    }
+
+    // Add new attributes from replacements and mappings
+    // const allNewAttributes = [...mappingResult.newAttributes]
+    // if (allNewAttributes.length > 0) {
+    //   path.value.attributes = path.value.attributes || []
+    //   path.value.attributes.push(...allNewAttributes)
+    //   hasChanges = true
+    // }
+
+    // Check for unhandled style props before removing processed attributes
+    // const mappingPropNames = Object.keys(STYLE_PROP_MAPPINGS)
+    // processUnhandledProps(
+    //   j,
+    //   path,
+    //   attributes,
+    //   KEEP_STYLE_PROPS,
+    //   REMOVE_STYLE_PROPS,
+    //   mappingPropNames,
+    //   stylePropNames,
+    //   options,
+    //   fileInfo
+    // )
+
+    return attributes.length + removeAttributes.length > 0
+  }
+
+  return attributeTransformFactory({
+    targetComponent: config.targetComponent,
+    targetPackage: config.targetPackage,
+    transform,
+  })
+}

package/src/index.ts

@@ -19,6 +19,10 @@ program
   .option("-f, --fix", "Write the changes")
   .option("-p, --path <path>", "The path to the folder/file to migrate")
   .option("-v, --verbose", "Verbose output")
+  .option(
+    "-j, --js-theme <path>",
+    "Path to JavaScript theme file containing design tokens"
+  )
   .action((componentName, options) => {
     console.log("Hello from Tapestry Migration CLI! 🎨")
     console.log(`Component: ${componentName}`)

package/src/stubs/stackViewPlugin.ts

@@ -0,0 +1,33 @@
+// copied from packages/tapestry-react/src/StackView/StackView.tsx in tapestry-react
+
+function spacingValue(value: string | number): string {
+  return typeof value === "number" ? value * 8 + "px" : value
+}
+
+export const stackViewPlugin = {
+  getStyles({
+    inline,
+    alignment,
+    axis,
+    distribution,
+    spacing,
+    ...styles
+  }: Record<string, unknown>) {
+    if (axis && styles.flexDirection === undefined) {
+      styles.flexDirection = axis === "horizontal" ? "row" : "column"
+    }
+    if (alignment && styles.alignItems === undefined) {
+      styles.alignItems = alignment
+    }
+    if (distribution === "fill") {
+      styles["& > *"] = { flex: "1 0 0px" }
+    } else if (styles.justifyContent === undefined) {
+      styles.justifyContent = distribution
+    }
+    if (typeof spacing === "number" || typeof spacing === "string") {
+      styles.gap = spacingValue(spacing)
+    }
+    return styles
+  },
+  styleProps: ["alignment", "axis", "distribution", "spacing"],
+}

package/src/stubs/tapestry-stub.ts

@@ -0,0 +1,16 @@
+export { Button } from "../../../../node_modules/@planningcenter/tapestry/dist/components/button/Button"
+export { DropdownButton } from "../../../../node_modules/@planningcenter/tapestry/dist/components/button/DropdownButton"
+export { DropdownIconButton } from "../../../../node_modules/@planningcenter/tapestry/dist/components/button/DropdownIconButton"
+export { IconButton } from "../../../../node_modules/@planningcenter/tapestry/dist/components/button/IconButton"
+export { LoadingButton } from "../../../../node_modules/@planningcenter/tapestry/dist/components/button/LoadingButton"
+export { PageHeaderActionsDropdownButton } from "../../../../node_modules/@planningcenter/tapestry/dist/components/button/PageHeaderActionsDropdownButton"
+export { IconLink } from "../../../../node_modules/@planningcenter/tapestry/dist/components/link/IconLink"
+export { Link } from "../../../../node_modules/@planningcenter/tapestry/dist/components/link/Link"
+export { PageHeader } from "../../../../node_modules/@planningcenter/tapestry/dist/components/page-header/PageHeader"
+export { Sidenav } from "../../../../node_modules/@planningcenter/tapestry/dist/components/sidenav/Sidenav"
+export { SidenavItem } from "../../../../node_modules/@planningcenter/tapestry/dist/components/sidenav/SidenavItem"
+export { SidenavSection } from "../../../../node_modules/@planningcenter/tapestry/dist/components/sidenav/SidenavSection"
+export {
+  computedToken,
+  token,
+} from "../../../../node_modules/@planningcenter/tapestry/dist/jsTokens"

package/src/tapestry-react-shim.ts

@@ -0,0 +1,7 @@
+// Import the real utilities from tapestry-react (Stencil parts will be stubbed by Vite aliases)
+// Use absolute file paths since the package doesn't export subpaths
+import defaultTheme from "../../../node_modules/@planningcenter/tapestry-react/dist/system/default-theme.js"
+import splitStyles from "../../../node_modules/@planningcenter/tapestry-react/dist/system/split-styles.js"
+import { stylePropNames } from "../../../node_modules/@planningcenter/tapestry-react/dist/system/style-names.js"
+
+export { defaultTheme, splitStyles, stylePropNames }