@kaizen/components 0.0.0-canary-fix-select-futureselect-focus-jumping-20241003232256 → 0.0.0-canary-tsx-codemod-20241029235345

package/codemods/upgradeIconV1/transformIcon.ts

@@ -0,0 +1,115 @@
+import ts from "typescript"
+import {
+  createProp,
+  createStringProp,
+  createStyleProp,
+  getPropValueText,
+  updateJsxElementWithNewProps,
+} from "../utils"
+
+const propsToStyleMap = new Map<string, string>([
+  ["color", "color"],
+  ["height", "height"],
+  ["width", "width"],
+])
+
+const transformPropRole = (
+  oldValue: string
+): ts.JsxAttribute | null | undefined => {
+  switch (oldValue) {
+    case "presentation":
+      return createProp("isPresentational")
+    case "img":
+      // `role` is removed and `aria-label` transforms to `alt`
+      return null
+    default:
+      return undefined
+  }
+}
+
+/**
+ * @returns
+ * - `ts.JsxAttribute` if the prop should be transformed
+ * - `null` if the prop should be removed
+ * - `undefined` if the prop should be kept as is
+ */
+const transformIconProp = (
+  propName: string,
+  propValue: ts.JsxAttributeValue | undefined
+): ts.JsxAttribute | null | undefined => {
+  switch (propName) {
+    case "role":
+      const oldValue = propValue && getPropValueText(propValue)
+      return oldValue ? transformPropRole(oldValue) : undefined
+    case "aria-label":
+      return createProp("alt", propValue)
+    case "classNameOverride":
+      return createProp("className", propValue)
+    // `aria-hidden` is not necessary as `role` will cater for presentational icons
+    case "aria-hidden":
+    // `fontSize` did nothing for svg icons
+    case "fontSize":
+    // `viewBox` no longer relevant
+    case "viewBox":
+      return null
+    default:
+      return undefined
+  }
+}
+
+export const transformIcon = (
+  node: ts.JsxOpeningElement | ts.JsxSelfClosingElement,
+  name: string,
+  isFilled?: boolean
+): ts.Node => {
+  const styles: Map<string, ts.JsxAttributeValue> = new Map()
+
+  const newAttributes = node.attributes.properties.reduce<
+    ts.JsxAttributeLike[]
+  >((acc, attr) => {
+    if (ts.isJsxAttribute(attr)) {
+      const propName = attr.name.getText()
+
+      if (propName === "inheritSize") {
+        ts.addSyntheticLeadingComment(
+          attr,
+          ts.SyntaxKind.SingleLineCommentTrivia,
+          ' @todo: Apply the correct --icon-size (eg. in Tailwind: className="[--icon-size:48]")',
+          true
+        )
+        acc.push(attr)
+        return acc
+      }
+
+      if (propsToStyleMap.has(propName)) {
+        if (attr.initializer) {
+          styles.set(propsToStyleMap.get(propName) as string, attr.initializer)
+        }
+        return acc
+      }
+
+      const newProp = transformIconProp(propName, attr.initializer)
+
+      if (newProp === null) return acc
+
+      if (newProp) {
+        acc.push(newProp)
+        return acc
+      }
+    }
+
+    acc.push(attr)
+    return acc
+  }, [])
+
+  if (styles.size > 0) {
+    newAttributes.unshift(createStyleProp(Object.fromEntries(styles.entries())))
+  }
+
+  if (isFilled) {
+    newAttributes.unshift(createProp("isFilled"))
+  }
+  newAttributes.unshift(createStringProp("name", name))
+
+  return updateJsxElementWithNewProps(node, newAttributes, "Icon")
+}

package/codemods/upgradeIconV1/transformSpinnerIconToLoadingSpinner.spec.ts

@@ -0,0 +1,81 @@
+import ts from "typescript"
+import { parseJsx } from "../__tests__/utils"
+import { printAst } from "../utils"
+import { transformSpinnerIconToLoadingSpinner } from "./transformSpinnerIconToLoadingSpinner"
+
+export const mockedTransformer =
+  (alias?: string) =>
+  (context: ts.TransformationContext) =>
+  (rootNode: ts.Node): ts.Node => {
+    const visit = (node: ts.Node): ts.Node => {
+      if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
+        return transformSpinnerIconToLoadingSpinner(node, alias)
+      }
+      return ts.visitEachChild(node, visit, context)
+    }
+    return ts.visitNode(rootNode, visit)
+  }
+
+const transformInput = (sourceFile: ts.SourceFile, alias?: string): string => {
+  const result = ts.transform(sourceFile, [mockedTransformer(alias)])
+  const transformedSource = result.transformed[0] as ts.SourceFile
+  return printAst(transformedSource)
+}
+
+describe("transformSpinnerIconToLoadingSpinner()", () => {
+  it("replaces SpinnerIcon with LoadingSpinner and adds size and accessibilityLabel", () => {
+    const inputAst = parseJsx("<SpinnerIcon />")
+    const outputAst = parseJsx(
+      '<LoadingSpinner size="xs" accessibilityLabel="Loading" />'
+    )
+    expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it("uses alias if it is defined", () => {
+    const inputAst = parseJsx("<SpinnerIcon />")
+    const outputAst = parseJsx(
+      '<KzLoadingSpinner size="xs" accessibilityLabel="Loading" />'
+    )
+    expect(transformInput(inputAst, "KzLoadingSpinner")).toEqual(
+      printAst(outputAst)
+    )
+  })
+
+  describe("transform existing props", () => {
+    it("removes role and changes aria-label to accessibilityLabel or fallback", () => {
+      const inputAst = parseJsx(`
+          export const TestComponent = () => (
+            <>
+              <SpinnerIcon role="presentation" />
+              <SpinnerIcon role="img" aria-label="I am loading" />
+            </>
+          )
+        `)
+      const outputAst = parseJsx(`
+          export const TestComponent = () => (
+            <>
+              <LoadingSpinner size="xs" accessibilityLabel="Loading" />
+              <LoadingSpinner size="xs" accessibilityLabel="I am loading" />
+            </>
+          )
+        `)
+      expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+    })
+
+    it("leaves classNameOverride as is", () => {
+      const inputAst = parseJsx('<SpinnerIcon classNameOverride="mt-16" />')
+      const outputAst = parseJsx(
+        '<LoadingSpinner size="xs" accessibilityLabel="Loading" classNameOverride="mt-16" />'
+      )
+      expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+    })
+
+    it("removes viewBox", () => {
+      const inputAst = parseJsx('<SpinnerIcon viewBox="0 0 100 100" />')
+      const outputAst = parseJsx(
+        '<LoadingSpinner size="xs" accessibilityLabel="Loading" />'
+      )
+      expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+    })
+  })
+})

package/codemods/upgradeIconV1/transformSpinnerIconToLoadingSpinner.ts

@@ -0,0 +1,41 @@
+import ts from "typescript"
+import {
+  createStringProp,
+  getPropValueText,
+  updateJsxElementWithNewProps,
+} from "../utils"
+
+export const transformSpinnerIconToLoadingSpinner = (
+  node: ts.JsxOpeningElement | ts.JsxSelfClosingElement,
+  tagName: string = "LoadingSpinner"
+): ts.Node => {
+  let accessibilityLabel = "Loading"
+  const newAttributes = node.attributes.properties.reduce<
+    ts.JsxAttributeLike[]
+  >((acc, attr) => {
+    if (ts.isJsxAttribute(attr)) {
+      const propName = attr.name.getText()
+
+      if (propName === "role") return acc
+      if (propName === "viewBox") return acc
+
+      if (propName === "aria-label") {
+        const value = attr.initializer && getPropValueText(attr.initializer)
+        if (value) {
+          accessibilityLabel = value
+        }
+        return acc
+      }
+    }
+
+    acc.push(attr)
+    return acc
+  }, [])
+
+  newAttributes.unshift(
+    createStringProp("accessibilityLabel", accessibilityLabel)
+  )
+  newAttributes.unshift(createStringProp("size", "xs"))
+
+  return updateJsxElementWithNewProps(node, newAttributes, tagName)
+}

package/codemods/upgradeIconV1/upgradeIconV1.spec.ts

@@ -0,0 +1,306 @@
+import { parseJsx } from "../__tests__/utils"
+import {
+  transformSource,
+  printAst,
+  TransformConfig,
+  ImportModuleNameTagsMap,
+} from "../utils"
+import { upgradeIconV1 } from "./upgradeIconV1"
+
+const transformIcons = (
+  sourceFile: TransformConfig["sourceFile"],
+  tagNames: ImportModuleNameTagsMap
+): string =>
+  transformSource({
+    sourceFile,
+    astTransformer: upgradeIconV1,
+    tagName: tagNames,
+  })
+
+describe("upgradeIconV1()", () => {
+  describe("CaMonogramIcon to Brand", () => {
+    const transformedBrandProps = 'variant="enso" style={{ width: "20px" }}'
+
+    it("updates import from CaMonogramIcon to Brand", () => {
+      const inputAst = parseJsx(`
+        import { CaMonogramIcon } from "@kaizen/components"
+        export const TestComponent = () => <CaMonogramIcon />
+      `)
+      const outputAst = parseJsx(`
+        import { Brand } from "@kaizen/components"
+        export const TestComponent = () => <Brand ${transformedBrandProps} />
+      `)
+      expect(
+        transformIcons(
+          inputAst,
+          new Map([
+            [
+              "@kaizen/components",
+              new Map([["CaMonogramIcon", "CaMonogramIcon"]]),
+            ],
+          ])
+        )
+      ).toEqual(printAst(outputAst))
+    })
+
+    it("updates import from CaMonogramIcon using alias to Brand", () => {
+      const inputAst = parseJsx(`
+        import { CaMonogramIcon as LogoAlias } from "@kaizen/components"
+        export const TestComponent = () => <LogoAlias />
+      `)
+      const outputAst = parseJsx(`
+        import { Brand } from "@kaizen/components"
+        export const TestComponent = () => <Brand ${transformedBrandProps} />
+      `)
+      expect(
+        transformIcons(
+          inputAst,
+          new Map([
+            ["@kaizen/components", new Map([["LogoAlias", "CaMonogramIcon"]])],
+          ])
+        )
+      ).toEqual(printAst(outputAst))
+    })
+
+    it("does not add another Brand import if it is already imported", () => {
+      const inputAst = parseJsx(`
+        import { Brand, CaMonogramIcon } from "@kaizen/components"
+        export const TestComponent = () => <CaMonogramIcon />
+      `)
+      const outputAst = parseJsx(`
+        import { Brand } from "@kaizen/components"
+        export const TestComponent = () => <Brand ${transformedBrandProps} />
+      `)
+      expect(
+        transformIcons(
+          inputAst,
+          new Map([
+            [
+              "@kaizen/components",
+              new Map([
+                ["Brand", "Brand"],
+                ["CaMonogramIcon", "CaMonogramIcon"],
+              ]),
+            ],
+          ])
+        )
+      ).toEqual(printAst(outputAst))
+    })
+
+    it("uses Brand alias for an existing import", () => {
+      const inputAst = parseJsx(`
+        import { Brand as KzBrand, CaMonogramIcon } from "@kaizen/components"
+        export const TestComponent = () => <CaMonogramIcon />
+      `)
+      const outputAst = parseJsx(`
+        import { Brand as KzBrand } from "@kaizen/components"
+        export const TestComponent = () => <KzBrand ${transformedBrandProps} />
+      `)
+      expect(
+        transformIcons(
+          inputAst,
+          new Map([
+            [
+              "@kaizen/components",
+              new Map([
+                ["KzBrand", "Brand"],
+                ["CaMonogramIcon", "CaMonogramIcon"],
+              ]),
+            ],
+          ])
+        )
+      ).toEqual(printAst(outputAst))
+    })
+  })
+
+  describe("SpinnerIcon to LoadingSpinner", () => {
+    const transformedLoadingSpinnerProps =
+      'size="xs" accessibilityLabel="Loading"'
+
+    it("updates import from SpinnerIcon to LoadingSpinner", () => {
+      const inputAst = parseJsx(`
+        import { SpinnerIcon } from "@kaizen/components"
+        export const TestComponent = () => <SpinnerIcon />
+      `)
+      const outputAst = parseJsx(`
+        import { LoadingSpinner } from "@kaizen/components"
+        export const TestComponent = () => <LoadingSpinner ${transformedLoadingSpinnerProps} />
+      `)
+      expect(
+        transformIcons(
+          inputAst,
+          new Map([
+            ["@kaizen/components", new Map([["SpinnerIcon", "SpinnerIcon"]])],
+          ])
+        )
+      ).toEqual(printAst(outputAst))
+    })
+
+    it("updates import from SpinnerIcon using alias to LoadingSpinner", () => {
+      const inputAst = parseJsx(`
+        import { SpinnerIcon as LogoAlias } from "@kaizen/components"
+        export const TestComponent = () => <LogoAlias />
+      `)
+      const outputAst = parseJsx(`
+        import { LoadingSpinner } from "@kaizen/components"
+        export const TestComponent = () => <LoadingSpinner ${transformedLoadingSpinnerProps} />
+      `)
+      expect(
+        transformIcons(
+          inputAst,
+          new Map([
+            ["@kaizen/components", new Map([["LogoAlias", "SpinnerIcon"]])],
+          ])
+        )
+      ).toEqual(printAst(outputAst))
+    })
+
+    it("does not add another LoadingSpinner import if it is already imported", () => {
+      const inputAst = parseJsx(`
+        import { LoadingSpinner, SpinnerIcon } from "@kaizen/components"
+        export const TestComponent = () => <SpinnerIcon />
+      `)
+      const outputAst = parseJsx(`
+        import { LoadingSpinner } from "@kaizen/components"
+        export const TestComponent = () => <LoadingSpinner ${transformedLoadingSpinnerProps} />
+      `)
+      expect(
+        transformIcons(
+          inputAst,
+          new Map([
+            [
+              "@kaizen/components",
+              new Map([
+                ["LoadingSpinner", "LoadingSpinner"],
+                ["SpinnerIcon", "SpinnerIcon"],
+              ]),
+            ],
+          ])
+        )
+      ).toEqual(printAst(outputAst))
+    })
+
+    it("uses LoadingSpinner alias for an existing import", () => {
+      const inputAst = parseJsx(`
+        import { LoadingSpinner as KzLoadingSpinner, SpinnerIcon } from "@kaizen/components"
+        export const TestComponent = () => <SpinnerIcon />
+      `)
+      const outputAst = parseJsx(`
+        import { LoadingSpinner as KzLoadingSpinner } from "@kaizen/components"
+        export const TestComponent = () => <KzLoadingSpinner ${transformedLoadingSpinnerProps} />
+      `)
+      expect(
+        transformIcons(
+          inputAst,
+          new Map([
+            [
+              "@kaizen/components",
+              new Map([
+                ["KzLoadingSpinner", "LoadingSpinner"],
+                ["SpinnerIcon", "SpinnerIcon"],
+              ]),
+            ],
+          ])
+        )
+      ).toEqual(printAst(outputAst))
+    })
+  })
+
+  it("transforms old Icon", () => {
+    const inputAst = parseJsx(`
+      import { FlagOnIcon } from "@kaizen/components"
+      export const TestComponent = () => <FlagOnIcon />
+    `)
+    const outputAst = parseJsx(`
+      import { Icon } from "@kaizen/components/future"
+      export const TestComponent = () => <Icon name="flag" isFilled />
+    `)
+    expect(
+      transformIcons(
+        inputAst,
+        new Map([
+          ["@kaizen/components", new Map([["FlagOnIcon", "FlagOnIcon"]])],
+        ])
+      )
+    ).toEqual(printAst(outputAst))
+  })
+
+  it("transforms aliased old Icon", () => {
+    const inputAst = parseJsx(`
+      import { HamburgerIcon as IconAlias } from "@kaizen/components"
+      export const TestComponent = () => <IconAlias />
+    `)
+    const outputAst = parseJsx(`
+      import { Icon } from "@kaizen/components/future"
+      export const TestComponent = () => <Icon name="menu" />
+    `)
+    expect(
+      transformIcons(
+        inputAst,
+        new Map([
+          ["@kaizen/components", new Map([["IconAlias", "HamburgerIcon"]])],
+        ])
+      )
+    ).toEqual(printAst(outputAst))
+  })
+
+  describe("import statements", () => {
+    it("does not update import of components which are not Icons", () => {
+      const inputAst = parseJsx(`
+        import { AddIcon, Card } from "@kaizen/components"
+        export const TestComponent = () => <Card><AddIcon /></Card>
+      `)
+      const outputAst = parseJsx(`
+        import { Card } from "@kaizen/components"
+        import { Icon } from "@kaizen/components/future"
+        export const TestComponent = () => <Card><Icon name="add" /></Card>
+      `)
+      expect(
+        transformIcons(
+          inputAst,
+          new Map([["@kaizen/components", new Map([["AddIcon", "AddIcon"]])]])
+        )
+      ).toEqual(printAst(outputAst))
+    })
+
+    it("does not update import of components which are not from KAIO", () => {
+      const inputAst = parseJsx(`
+        import { AddIcon, HamburgerIcon as IconAlias } from "@kaizen/components"
+        import { HamburgerIcon as HamHam } from "somewhere-else"
+        export const TestComponent = () => (
+          <>
+            <AddIcon />
+            <IconAlias />
+            <HamHam />
+          </>
+        )
+      `)
+      const outputAst = parseJsx(`
+        import { Icon } from "@kaizen/components/future"
+        import { HamburgerIcon as HamHam } from "somewhere-else"
+        export const TestComponent = () => (
+          <>
+            <Icon name="add" />
+            <Icon name="menu" />
+            <HamHam />
+          </>
+        )
+      `)
+      expect(
+        transformIcons(
+          inputAst,
+          new Map([
+            [
+              "@kaizen/components",
+              new Map([
+                ["AddIcon", "AddIcon"],
+                ["IconAlias", "HamburgerIcon"],
+              ]),
+            ],
+            ["somewhere-else", new Map([["HamHam", "HamburgerIcon"]])],
+          ])
+        )
+      ).toEqual(printAst(outputAst))
+    })
+  })
+})

package/codemods/upgradeIconV1/upgradeIconV1.ts

@@ -0,0 +1,94 @@
+import ts from "typescript"
+import {
+  setImportToRemove,
+  ImportModuleNameTagsMap,
+  updateKaioImports,
+  UpdateKaioImportsArgs,
+  setImportToAdd,
+} from "../utils"
+import { getNewIconPropsFromOldIconName } from "./getNewIconPropsFromOldIconName"
+import { transformCaMonogramIconToBrand } from "./transformCaMonogramIconToBrand"
+import { transformIcon } from "./transformIcon"
+import { transformSpinnerIconToLoadingSpinner } from "./transformSpinnerIconToLoadingSpinner"
+
+const reverseStringMap = <Key extends string, Value extends string>(
+  map: Map<Key, Value>
+): Map<Value, Key> => {
+  const reverseMap = new Map<Value, Key>()
+  map.forEach((value, key) => reverseMap.set(value, key))
+  return reverseMap
+}
+
+export const upgradeIconV1 =
+  (context: ts.TransformationContext, tagNames: ImportModuleNameTagsMap) =>
+  (rootNode: ts.Node): ts.Node => {
+    const oldImportSource = "@kaizen/components"
+
+    const kaioTagNames = tagNames.get(oldImportSource)
+    if (!kaioTagNames) return rootNode
+
+    const componentToAliasMap = reverseStringMap(kaioTagNames)
+    const importsToRemove =
+      new Map() satisfies UpdateKaioImportsArgs["importsToRemove"]
+    const importsToAdd =
+      new Map() satisfies UpdateKaioImportsArgs["importsToAdd"]
+
+    const visit = (node: ts.Node): ts.Node => {
+      if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
+        const tagName = node.tagName.getText()
+        const kaioComponentName = kaioTagNames.get(tagName)
+
+        if (kaioComponentName === "CaMonogramIcon") {
+          setImportToRemove(importsToRemove, oldImportSource, kaioComponentName)
+          const alias = componentToAliasMap.get("Brand") as string
+
+          if (!kaioTagNames.has(alias)) {
+            setImportToAdd(importsToAdd, "@kaizen/components", {
+              componentName: "Brand",
+              alias: alias !== "Brand" ? alias : undefined,
+            })
+          }
+          return transformCaMonogramIconToBrand(node, alias)
+        }
+
+        if (kaioComponentName === "SpinnerIcon") {
+          setImportToRemove(importsToRemove, oldImportSource, kaioComponentName)
+          const alias = componentToAliasMap.get("LoadingSpinner") as string
+
+          if (!kaioTagNames.has(alias)) {
+            setImportToAdd(importsToAdd, "@kaizen/components", {
+              componentName: "LoadingSpinner",
+              alias: alias !== "LoadingSpinner" ? alias : undefined,
+            })
+          }
+          return transformSpinnerIconToLoadingSpinner(node, alias)
+        }
+
+        if (kaioComponentName) {
+          const newIconProps = getNewIconPropsFromOldIconName(kaioComponentName)
+          if (newIconProps === undefined) {
+            // eslint-disable-next-line no-console
+            console.info(
+              "SKIPPED - No new icon equivalent found for",
+              node.tagName.getText()
+            )
+            return node
+          }
+
+          setImportToRemove(importsToRemove, oldImportSource, kaioComponentName)
+          setImportToAdd(importsToAdd, "@kaizen/components/future", {
+            componentName: "Icon",
+          })
+
+          return transformIcon(node, newIconProps.name, newIconProps.isFilled)
+        }
+      }
+      return ts.visitEachChild(node, visit, context)
+    }
+    const node = ts.visitNode(rootNode, visit)
+
+    return updateKaioImports({
+      importsToRemove: importsToRemove.size > 0 ? importsToRemove : undefined,
+      importsToAdd: importsToAdd.size > 0 ? importsToAdd : undefined,
+    })(context)(node)
+  }