@kaizen/components 1.57.1 → 1.58.0

package/codemods/migrateWellVariantToColor/transformWellVariantToColor.spec.ts

@@ -0,0 +1,192 @@
+import { parseJsx } from "../__tests__/utils"
+import { transformSource, printAst } from "../utils"
+import { transformWellVariantToColor } from "./transformWellVariantToColor"
+
+describe("transformWellVariantToColor", () => {
+  it('replaces variant="default" with color="gray"', () => {
+    const inputAst = parseJsx(`
+      import {Well} from "@kaizen/components"
+      export const TestComponent = () => <Well variant="default">Test</Well>
+    `)
+    const outputAst = parseJsx(`
+      import {Well} from "@kaizen/components"
+      export const TestComponent = () => <Well color="gray">Test</Well>
+    `)
+    const transformed = transformSource({
+      sourceFile: inputAst,
+      astTransformer: transformWellVariantToColor,
+      tagName: "Well",
+    })
+    expect(transformed).toEqual(printAst(outputAst))
+  })
+
+  it('replaces variant="informative" with color="blue"', () => {
+    const inputAst = parseJsx(`
+      import {Well} from "@kaizen/components"
+      export const TestComponent = () => <Well variant="informative">Test</Well>
+    `)
+    const outputAst = parseJsx(`
+      import {Well} from "@kaizen/components"
+      export const TestComponent = () => <Well color="blue">Test</Well>
+    `)
+    const transformed = transformSource({
+      sourceFile: inputAst,
+      astTransformer: transformWellVariantToColor,
+      tagName: "Well",
+    })
+    expect(transformed).toBe(printAst(outputAst))
+  })
+
+  it('adds color="gray" if variant is not specified', () => {
+    const inputAst = parseJsx(`
+      import {Well} from "@kaizen/components"
+      export const TestComponent = () => <Well>Test</Well>
+    `)
+    const outputAst = parseJsx(`
+      import {Well} from "@kaizen/components"
+      export const TestComponent = () => <Well color="gray">Test</Well>
+    `)
+    const transformed = transformSource({
+      sourceFile: inputAst,
+      astTransformer: transformWellVariantToColor,
+      tagName: "Well",
+    })
+    expect(transformed).toBe(printAst(outputAst))
+  })
+
+  it("handles multiple attributes and replace only variant", () => {
+    const inputAst = parseJsx(`
+      import {Well} from "@kaizen/components"
+      export const TestComponent = () => <Well variant="informative" id="123">Test</Well>
+    `)
+    const outputAst = parseJsx(`
+      import {Well} from "@kaizen/components"
+      export const TestComponent = () => <Well color="blue" id="123">Test</Well>
+    `)
+    const transformed = transformSource({
+      sourceFile: inputAst,
+      astTransformer: transformWellVariantToColor,
+      tagName: "Well",
+    })
+    expect(transformed).toBe(printAst(outputAst))
+  })
+
+  it("handles multiple attributes and add color if variant is not specified", () => {
+    const inputAst = parseJsx(`
+      import {Well} from "@kaizen/components"
+      export const TestComponent = () => <Well id="123">Test</Well>
+    `)
+    const outputAst = parseJsx(`
+      import {Well} from "@kaizen/components"
+      export const TestComponent = () => <Well id="123" color="gray">Test</Well>
+    `)
+    const transformed = transformSource({
+      sourceFile: inputAst,
+      astTransformer: transformWellVariantToColor,
+      tagName: "Well",
+    })
+    expect(transformed).toBe(printAst(outputAst))
+  })
+
+  it("handles nested Well components", () => {
+    const inputAst = parseJsx(`
+      import {Well} from "@kaizen/components"
+      export const TestComponent = () => <div><Well id="123">Test</Well></div>
+    `)
+    const outputAst = parseJsx(`
+      import {Well} from "@kaizen/components"
+      export const TestComponent = () => <div><Well id="123" color="gray">Test</Well></div>
+    `)
+    const transformed = transformSource({
+      sourceFile: inputAst,
+      astTransformer: transformWellVariantToColor,
+      tagName: "Well",
+    })
+    expect(transformed).toBe(printAst(outputAst))
+  })
+
+  it("transforms multiple Wells", () => {
+    const inputAst = parseJsx(`
+      import {Well} from "@kaizen/components"
+      export const TestComponent = () => <div><Well variant="informative">Test</Well><Well>Test 2</Well></div>
+    `)
+    const outputAst = parseJsx(`
+      import {Well} from "@kaizen/components"
+      export const TestComponent = () => <div><Well color="blue">Test</Well><Well color="gray">Test 2</Well></div>
+    `)
+    const transformed = transformSource({
+      sourceFile: inputAst,
+      astTransformer: transformWellVariantToColor,
+      tagName: "Well",
+    })
+    expect(transformed).toBe(printAst(outputAst))
+  })
+
+  it("transforms Well with arbitrary braces", () => {
+    const inputAst = parseJsx(`
+      import {Well} from "@kaizen/components"
+      export const TestComponent = () => <div><Well variant={"informative"}>Test</Well><Well variant={'assertive'}>Test</Well><Well variant={\`positive\`}>Test</Well></div>
+    `)
+    const outputAst = parseJsx(`
+      import {Well} from "@kaizen/components"
+      export const TestComponent = () => <div><Well color="blue">Test</Well><Well color="orange">Test</Well><Well color="green">Test</Well></div>
+    `)
+    const transformed = transformSource({
+      sourceFile: inputAst,
+      astTransformer: transformWellVariantToColor,
+      tagName: "Well",
+    })
+    expect(transformed).toBe(printAst(outputAst))
+  })
+
+  it("won't add color if color already exists", () => {
+    const inputAst = parseJsx(`
+      import {Well} from "@kaizen/components"
+      export const TestComponent = () => <div><Well color="blue">Test</Well></div>
+    `)
+    const outputAst = parseJsx(`
+      import {Well} from "@kaizen/components"
+      export const TestComponent = () => <div><Well color="blue">Test</Well></div>
+    `)
+    const transformed = transformSource({
+      sourceFile: inputAst,
+      astTransformer: transformWellVariantToColor,
+      tagName: "Well",
+    })
+    expect(transformed).toBe(printAst(outputAst))
+  })
+
+  it("won't modify variants usings variables", () => {
+    const inputAst = parseJsx(`
+      import {Well} from "@kaizen/components"
+      export const TestComponent = () => <div><Well variant={wellVariable}>Test</Well></div>
+    `)
+    const outputAst = parseJsx(`
+      import {Well} from "@kaizen/components"
+      export const TestComponent = () => <div><Well variant={wellVariable}>Test</Well></div>
+    `)
+    const transformed = transformSource({
+      sourceFile: inputAst,
+      astTransformer: transformWellVariantToColor,
+      tagName: "Well",
+    })
+    expect(transformed).toBe(printAst(outputAst))
+  })
+
+  it("transforms aliased Well components", () => {
+    const inputAst = parseJsx(`
+      import {Well as KaizenWell} from "@kaizen/components"
+      export const TestComponent = () => <div><KaizenWell variant="informative">Test</KaizenWell></div>
+    `)
+    const outputAst = parseJsx(`
+      import {Well as KaizenWell} from "@kaizen/components"
+      export const TestComponent = () => <div><KaizenWell color="blue">Test</KaizenWell></div>
+    `)
+    const transformed = transformSource({
+      sourceFile: inputAst,
+      astTransformer: transformWellVariantToColor,
+      tagName: "KaizenWell",
+    })
+    expect(transformed).toBe(printAst(outputAst))
+  })
+})

package/codemods/migrateWellVariantToColor/transformWellVariantToColor.ts

@@ -0,0 +1,75 @@
+import ts from "typescript"
+import { updateJsxElementWithNewProps } from "../utils"
+import { getPropValueText } from "../utils/getPropValueText"
+
+/** Recurses through AST to find and update any jsx element that matched the tagName */
+export const transformWellVariantToColor =
+  (context: ts.TransformationContext, tagName: string) =>
+  (rootNode: ts.Node): ts.Node => {
+    function visit(node: ts.Node): ts.Node {
+      if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
+        if (node.tagName.getText() === tagName) {
+          let hasVariant = false
+          let hasColor = false
+          let newAttributes = node.attributes.properties.map(attr => {
+            if (ts.isJsxAttribute(attr) && attr.name.getText() === "variant") {
+              hasVariant = true
+              const valueName =
+                attr.initializer && getPropValueText(attr.initializer)
+
+              if (valueName) {
+                let colorValue: string = "gray"
+                switch (valueName) {
+                  case "default":
+                    colorValue = "gray"
+                    break
+                  case "informative":
+                    colorValue = "blue"
+                    break
+                  case "cautionary":
+                    colorValue = "yellow"
+                    break
+                  case "assertive":
+                    colorValue = "orange"
+                    break
+                  case "negative":
+                    colorValue = "red"
+                    break
+                  case "positive":
+                    colorValue = "green"
+                    break
+                  case "prominent":
+                    colorValue = "purple"
+                    break
+                  default:
+                    colorValue = "gray"
+                }
+                return ts.factory.createJsxAttribute(
+                  ts.factory.createIdentifier("color"),
+                  ts.factory.createStringLiteral(colorValue)
+                )
+              }
+            }
+            if (ts.isJsxAttribute(attr) && attr.name.getText() === "color") {
+              hasColor = true
+            }
+            return attr
+          })
+
+          if (!hasColor && !hasVariant) {
+            newAttributes = [
+              ...newAttributes,
+              ts.factory.createJsxAttribute(
+                ts.factory.createIdentifier("color"),
+                ts.factory.createStringLiteral("gray")
+              ),
+            ]
+          }
+
+          return updateJsxElementWithNewProps(node, newAttributes)
+        }
+      }
+      return ts.visitEachChild(node, visit, context)
+    }
+    return ts.visitNode(rootNode, visit)
+  }

package/codemods/removeInputEditModalMood/index.ts

@@ -0,0 +1,19 @@
+import { transformComponentsInDir } from "../utils"
+import { removeInputEditModalMood } from "./removeInputEditModalMood"
+/** This is here as a script runner that migrates Well variant to their color equivalent */
+const migrateModalMoodsToVariant = (): void => {
+  // eslint-disable-next-line no-console
+  console.log(" ~(-_- ~) Running InputEditModal transformer (~ -_-)~")
+  const targetDir = process.argv[2]
+  if (!targetDir) {
+    process.exit(1)
+  }
+
+  transformComponentsInDir(
+    targetDir,
+    removeInputEditModalMood,
+    "InputEditModal"
+  )
+}
+
+migrateModalMoodsToVariant()

package/codemods/removeInputEditModalMood/removeInputEditModalMood.spec.ts

@@ -0,0 +1,80 @@
+import { parseJsx } from "../__tests__/utils"
+import { transformSource, printAst } from "../utils"
+import { removeInputEditModalMood } from "./removeInputEditModalMood"
+
+describe("removeInputEditModalMood", () => {
+  it("removed mood", () => {
+    const inputAst = parseJsx(`
+      export const TestComponent = () => <InputEditModal mood="positive"/>
+    `)
+    const outputAst = parseJsx(`
+      export const TestComponent = () => <InputEditModal />
+    `)
+    const transformed = transformSource({
+      sourceFile: inputAst,
+      astTransformer: removeInputEditModalMood,
+      tagName: "InputEditModal",
+    })
+    expect(transformed).toEqual(printAst(outputAst))
+  })
+
+  it("handles multiple attributes and remove only mood", () => {
+    const inputAst = parseJsx(`
+      export const TestComponent = () => <InputEditModal mood="destructive" id="123"/>
+    `)
+    const outputAst = parseJsx(`
+      export const TestComponent = () => <InputEditModal id="123"/>
+    `)
+    const transformed = transformSource({
+      sourceFile: inputAst,
+      astTransformer: removeInputEditModalMood,
+      tagName: "InputEditModal",
+    })
+    expect(transformed).toBe(printAst(outputAst))
+  })
+
+  it("transforms multiple InputEditModals", () => {
+    const inputAst = parseJsx(`
+      export const TestComponent = () => <div><InputEditModal mood="positive"/><InputEditModal mood="destructive"/></div>
+    `)
+    const outputAst = parseJsx(`
+      export const TestComponent = () => <div><InputEditModal /><InputEditModal /></div>
+    `)
+    const transformed = transformSource({
+      sourceFile: inputAst,
+      astTransformer: removeInputEditModalMood,
+      tagName: "InputEditModal",
+    })
+    expect(transformed).toBe(printAst(outputAst))
+  })
+
+  it("transforms InputEditModal with arbitrary braces", () => {
+    const inputAst = parseJsx(`
+      export const TestComponent = () => <div><InputEditModal mood={"positive"}/><InputEditModal mood={'assertive'}/><InputEditModal mood={\`positive\`}/></div>
+    `)
+    const outputAst = parseJsx(`
+      export const TestComponent = () => <div><InputEditModal /><InputEditModal /><InputEditModal /></div>
+    `)
+    const transformed = transformSource({
+      sourceFile: inputAst,
+      astTransformer: removeInputEditModalMood,
+      tagName: "InputEditModal",
+    })
+    expect(transformed).toBe(printAst(outputAst))
+  })
+
+  it("won't modify variants usings variables", () => {
+    const inputAst = parseJsx(`
+      export const TestComponent = () => <div><InputEditModal mood={InputEditModalVariable}/></div>
+    `)
+    const outputAst = parseJsx(`
+      export const TestComponent = () => <div><InputEditModal /></div>
+    `)
+    const transformed = transformSource({
+      sourceFile: inputAst,
+      astTransformer: removeInputEditModalMood,
+      tagName: "InputEditModal",
+    })
+    expect(transformed).toBe(printAst(outputAst))
+  })
+})

package/codemods/removeInputEditModalMood/removeInputEditModalMood.ts

@@ -0,0 +1,40 @@
+import ts from "typescript"
+
+/** Recurses through AST to find and update any jsx element that matched the tagName */
+export const removeInputEditModalMood =
+  (context: ts.TransformationContext, tagName: string) =>
+  (rootNode: ts.Node): ts.Node => {
+    function visit(node: ts.Node): ts.Node {
+      if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
+        if (node.tagName.getText() === tagName) {
+          const newAttributes = node.attributes.properties.reduce<
+            ts.JsxAttributeLike[]
+          >((acc, attr) => {
+            if (ts.isJsxAttribute(attr) && attr.name.getText() === "mood") {
+              return acc
+            }
+
+            return [...acc, attr]
+          }, [])
+
+          if (ts.isJsxOpeningElement(node)) {
+            return ts.factory.updateJsxOpeningElement(
+              node,
+              node.tagName,
+              node.typeArguments,
+              ts.factory.createJsxAttributes(newAttributes)
+            )
+          } else if (ts.isJsxSelfClosingElement(node)) {
+            return ts.factory.updateJsxSelfClosingElement(
+              node,
+              node.tagName,
+              node.typeArguments,
+              ts.factory.createJsxAttributes(newAttributes)
+            )
+          }
+        }
+      }
+      return ts.visitEachChild(node, visit, context)
+    }
+    return ts.visitNode(rootNode, visit)
+  }

package/codemods/updateGuidanceBlockVariantProp/transformGuidanceBlockVariantProp.spec.ts

@@ -0,0 +1,118 @@
+import { parseJsx } from "../__tests__/utils"
+import { transformSource, printAst } from "../utils"
+import { transformGuidanceBlockVariantProp } from "./transformGuidanceBlockVariantProp"
+
+describe("transformGuidanceBlockVariantProp", () => {
+  it("removes all instances of `positive`, `negative`, `informative`, `cautionary`, `assertive`", () => {
+    const inputAst = parseJsx(`
+      const TestComponent = () => <GuidanceBlock variant="positive" />
+      const TestComponent = () => <GuidanceBlock variant="negative" />
+      const TestComponent = () => <GuidanceBlock variant="informative" />
+      const TestComponent = () => <GuidanceBlock variant="cautionary" />
+      const TestComponent = () => <GuidanceBlock variant="assertive" />
+    `)
+    const outputAst = parseJsx(`
+      const TestComponent = () => <GuidanceBlock />
+      const TestComponent = () => <GuidanceBlock />
+      const TestComponent = () => <GuidanceBlock />
+      const TestComponent = () => <GuidanceBlock />
+      const TestComponent = () => <GuidanceBlock />
+    `)
+    const transformed = transformSource({
+      sourceFile: inputAst,
+      astTransformer: transformGuidanceBlockVariantProp,
+      tagName: "GuidanceBlock",
+    })
+    expect(transformed).toEqual(printAst(outputAst))
+  })
+
+  it('replaces variant="expert-advice" with variant="prominent"', () => {
+    const inputAst = parseJsx(`
+      export const TestComponent = () => <GuidanceBlock variant="expert-advice" />
+    `)
+    const outputAst = parseJsx(`
+      export const TestComponent = () => <GuidanceBlock variant="prominent" />
+    `)
+    const transformed = transformSource({
+      sourceFile: inputAst,
+      astTransformer: transformGuidanceBlockVariantProp,
+      tagName: "GuidanceBlock",
+    })
+    expect(transformed).toBe(printAst(outputAst))
+  })
+
+  it("handles multiple attributes and replace only variant", () => {
+    const inputAst = parseJsx(`
+      export const TestComponent = () => <GuidanceBlock variant="positive" id="123" />
+    `)
+    const outputAst = parseJsx(`
+      export const TestComponent = () => <GuidanceBlock id="123" />
+    `)
+    const transformed = transformSource({
+      sourceFile: inputAst,
+      astTransformer: transformGuidanceBlockVariantProp,
+      tagName: "GuidanceBlock",
+    })
+    expect(transformed).toBe(printAst(outputAst))
+  })
+
+  it("handles nested GuidanceBlock components", () => {
+    const inputAst = parseJsx(`
+      export const TestComponent = () => <div><GuidanceBlock variant="positive" id="123" /></div>
+    `)
+    const outputAst = parseJsx(`
+      export const TestComponent = () => <div><GuidanceBlock id="123" /></div>
+    `)
+    const transformed = transformSource({
+      sourceFile: inputAst,
+      astTransformer: transformGuidanceBlockVariantProp,
+      tagName: "GuidanceBlock",
+    })
+    expect(transformed).toBe(printAst(outputAst))
+  })
+
+  it("transforms multiple GuidanceBlock", () => {
+    const inputAst = parseJsx(`
+      export const TestComponent = () => <div><GuidanceBlock variant="positive" /><GuidanceBlock variant="positive" /></div>
+    `)
+    const outputAst = parseJsx(`
+      export const TestComponent = () => <div><GuidanceBlock /><GuidanceBlock /></div>
+    `)
+    const transformed = transformSource({
+      sourceFile: inputAst,
+      astTransformer: transformGuidanceBlockVariantProp,
+      tagName: "GuidanceBlock",
+    })
+    expect(transformed).toBe(printAst(outputAst))
+  })
+
+  it("transforms GuidanceBlock with arbitrary braces", () => {
+    const inputAst = parseJsx(`
+      export const TestComponent = () => <div><GuidanceBlock variant={"informative"} /><GuidanceBlock variant={'assertive'} /><GuidanceBlock variant={\`expert-advice\`} /></div>
+    `)
+    const outputAst = parseJsx(`
+      export const TestComponent = () => <div><GuidanceBlock /><GuidanceBlock /><GuidanceBlock variant="prominent" /></div>
+    `)
+    const transformed = transformSource({
+      sourceFile: inputAst,
+      astTransformer: transformGuidanceBlockVariantProp,
+      tagName: "GuidanceBlock",
+    })
+    expect(transformed).toBe(printAst(outputAst))
+  })
+
+  it("won't modify variants usings variables", () => {
+    const inputAst = parseJsx(`
+      export const TestComponent = () => <div><GuidanceBlock variant={wellVariable} /></div>
+    `)
+    const outputAst = parseJsx(`
+      export const TestComponent = () => <div><GuidanceBlock variant={wellVariable} /></div>
+    `)
+    const transformed = transformSource({
+      sourceFile: inputAst,
+      astTransformer: transformGuidanceBlockVariantProp,
+      tagName: "GuidanceBlock",
+    })
+    expect(transformed).toBe(printAst(outputAst))
+  })
+})

package/codemods/updateGuidanceBlockVariantProp/transformGuidanceBlockVariantProp.ts

@@ -0,0 +1,64 @@
+import ts from "typescript"
+import { getPropValueText } from "../utils/getPropValueText"
+
+/** Recurses through AST to find and update any jsx element that matched the tagName */
+export const transformGuidanceBlockVariantProp =
+  (context: ts.TransformationContext, tagName: string) =>
+  (rootNode: ts.Node): ts.Node => {
+    function visit(node: ts.Node): ts.Node {
+      if (ts.isJsxSelfClosingElement(node)) {
+        if (node.tagName.getText() === tagName) {
+          const newAttributes = node.attributes.properties.reduce<
+            ts.JsxAttributeLike[]
+          >((acc, attr) => {
+            if (ts.isJsxAttribute(attr) && attr.name.getText() === "variant") {
+              const valueName =
+                attr.initializer && getPropValueText(attr.initializer)
+
+              const oldValues = [
+                "positive",
+                "negative",
+                "informative",
+                "cautionary",
+                "assertive",
+              ]
+
+              if (valueName) {
+                if (oldValues.includes(valueName)) {
+                  // Remove the attribute for old values
+                  return acc
+                }
+
+                if (valueName === "expert-advice") {
+                  // Replace the attribute value for expert-advice
+                  return [
+                    ...acc,
+                    ts.factory.createJsxAttribute(
+                      attr.name,
+                      ts.factory.createStringLiteral("prominent")
+                    ),
+                  ]
+                }
+
+                // Keep the attribute for other values
+                return [...acc, attr]
+              }
+            }
+
+            return [...acc, attr]
+          }, [])
+
+          if (ts.isJsxSelfClosingElement(node)) {
+            return ts.factory.updateJsxSelfClosingElement(
+              node,
+              node.tagName,
+              node.typeArguments,
+              ts.factory.createJsxAttributes(newAttributes)
+            )
+          }
+        }
+      }
+      return ts.visitEachChild(node, visit, context)
+    }
+    return ts.visitNode(rootNode, visit)
+  }

package/codemods/utils/__fixtures__/KaioComponent.tsx

@@ -0,0 +1,6 @@
+import * as React from "react"
+// @ts-ignore
+import { Pancakes } from "@kaizen/components"
+/* eslint-disable react/jsx-curly-brace-presence */
+export const KaioComponent = (): JSX.Element => <Pancakes topping="butter" />
+/* eslint-enable react/jsx-curly-brace-presence */

package/codemods/utils/__snapshots__/transformSource.spec.ts.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`transformSource updates the value of Pancakes topping to jam 1`] = `
+"import * as React from "react";
+// @ts-ignore
+import { Pancakes } from "@kaizen/components";
+/* eslint-disable react/jsx-curly-brace-presence */
+export const KaioComponent = (): JSX.Element => <Pancakes topping="jam"/>;
+/* eslint-enable react/jsx-curly-brace-presence */
+"
+`;