@kaizen/components 1.57.1 → 1.58.0

package/bin/codemod.sh

@@ -0,0 +1,39 @@
+#!/usr/bin/env bash
+
+set -e
+
+elapsed_time() {
+  echo -e "${GREEN}Built in: ${BOLD}${GREEN}$SECONDS${NC} ${GREEN}seconds${NC}"
+}
+
+# Check if the correct number of arguments is provided
+if [ "$#" -ne 2 ]; then
+  echo "Usage: $0 transformDir codemodFileName"
+  exit 1
+fi
+
+# Assign parameters to variables
+transformDir=$1
+codemodFileName=$2
+
+# Calculated variables
+BASEPATH=$(pwd "$0")
+SCRIPT=$(realpath "$0")
+SCRIPTPATH=$(dirname "$SCRIPT")
+CODEMOD_PATH="$SCRIPTPATH/../codemods/$codemodFileName/index.ts"
+TARGET_DIR="$BASEPATH/$transformDir"
+
+# Print the parameters (for debugging purposes)
+echo ""
+echo "RUNNING - codemod '$codemodFileName' on the dir:"
+echo "$TARGET_DIR"
+echo ""
+
+if npx tsx $CODEMOD_PATH $TARGET_DIR; then
+  echo "Codemod '$codemodFileName' completed successfully in directory '$transformDir'"
+else
+  echo "Codemod '$codemodFileName' could not be run in '$TARGET_DIR'"
+  exit 1
+fi
+
+elapsed_time

package/codemods/README.md

@@ -0,0 +1,31 @@
+
+# Kaizen codemods
+This directory is a collection of codemods that can be executed via CLI with the `kaizen-codemod` command.
+
+## Prerequisite
+Install `@kaizen/components`.
+
+## CLI pattern
+
+```
+  kaizen-codemod {DIR} {CODEMOD_NAME}
+```
+
+DIR - the directory to run the codemod for. Note that node_modules are excluded.
+CODEMOD_NAME - the name of the codemod (refer to list below).
+
+Example:
+```
+  kaizen-codemod src migrateWellVariantToColor
+```
+
+## Available codemods
+- `migrateBrandMomentMoodToVariant`: Migrates `BrandMoment` component prop from `mood` to `variant`.
+- `migrateEmptyStateIllustrationTypeToVariant`: Migrates `EmptyState` component prop from `illustrationType` to `variant`.
+- `migrateGlobalNotificationTypeToVariant`: Transforms `GlobalNotification`'s `type` prop to the new `variant` prop.
+- `migrateInlineNotificationTypeToVariant`: Transforms `InlineNotification`'s `type` prop to the new `variant` prop.
+- `migrateInformationTileMoodToVariant`: Migrates `InformationTile` component prop from `mood` to `variant`.
+- `migrateMultiActionTileMoodToVariant`: Migrates `MultiActionTile` component prop from `mood` to `variant`.
+- `migrateProgressBarMoodToColor`: Migrates `ProgressBar` component prop from `mood` to `color`
+- `migrateToastNotificationTypeToVariant`: Transforms `ToastNotification`'s `type` prop to the new `variant` prop.
+- `migrateWellVariantToColor`: Migrates `Well` component prop from `variant` to `color`.

package/codemods/__tests__/utils/index.ts

@@ -0,0 +1 @@
+export * from "./parseJsx"

package/codemods/__tests__/utils/parseJsx.ts

@@ -0,0 +1,11 @@
+import ts from "typescript"
+
+// This function is used to parse a stringified JSX element into an AST
+export const parseJsx = (jsx: string): ts.SourceFile =>
+  ts.createSourceFile(
+    "tempFile.tsx",
+    jsx,
+    ts.ScriptTarget.Latest,
+    true,
+    ts.ScriptKind.TSX
+  )

package/codemods/migrateBrandMomentMoodToVariant/index.ts

@@ -0,0 +1,21 @@
+import { transformComponentsInDir } from "../utils"
+import { transformBrandMomentMoodToVariant } from "./transformBrandMomentMoodToVariant"
+
+const migrateBrandMomentMoodToVariant = (): void => {
+  // eslint-disable-next-line no-console
+  console.log(
+    " ~(-_- ~) Running BrandMoment mood to variant transformer (~ -_-)~"
+  )
+  const targetDir = process.argv[2]
+  if (!targetDir) {
+    process.exit(1)
+  }
+
+  transformComponentsInDir(
+    targetDir,
+    transformBrandMomentMoodToVariant,
+    "BrandMoment"
+  )
+}
+
+migrateBrandMomentMoodToVariant()

package/codemods/migrateBrandMomentMoodToVariant/transformBrandMomentMoodToVariant.spec.ts

@@ -0,0 +1,44 @@
+import { parseJsx } from "../__tests__/utils"
+import { transformSource, printAst, TransformConfig } from "../utils"
+import { transformBrandMomentMoodToVariant } from "./transformBrandMomentMoodToVariant"
+
+const transformBrandMoment = (
+  sourceFile: TransformConfig["sourceFile"]
+): string =>
+  transformSource({
+    sourceFile,
+    astTransformer: transformBrandMomentMoodToVariant,
+    tagName: "BrandMoment",
+  })
+
+describe("transformBrandMomentMoodToVariant()", () => {
+  it('replaces mood="informative" with variant="informative"', () => {
+    const inputAst = parseJsx(
+      'export const TestComponent = () => <BrandMoment mood="informative" />'
+    )
+    const outputAst = parseJsx(
+      'export const TestComponent = () => <BrandMoment variant="informative" />'
+    )
+    expect(transformBrandMoment(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('replaces mood="positive" with variant="success"', () => {
+    const inputAst = parseJsx(
+      'export const TestComponent = () => <BrandMoment mood="positive" />'
+    )
+    const outputAst = parseJsx(
+      'export const TestComponent = () => <BrandMoment variant="success" />'
+    )
+    expect(transformBrandMoment(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('replaces mood="negative" with variant="warning"', () => {
+    const inputAst = parseJsx(
+      'export const TestComponent = () => <BrandMoment mood="negative" />'
+    )
+    const outputAst = parseJsx(
+      'export const TestComponent = () => <BrandMoment variant="warning" />'
+    )
+    expect(transformBrandMoment(inputAst)).toEqual(printAst(outputAst))
+  })
+})

package/codemods/migrateBrandMomentMoodToVariant/transformBrandMomentMoodToVariant.ts

@@ -0,0 +1,24 @@
+import type { BrandMomentProps } from "~components/BrandMoment"
+import { migrateStringProp } from "../utils"
+
+const OLD_PROP_NAME = "mood"
+const NEW_PROP_NAME = "variant"
+
+const getNewVariantValue = (
+  oldValue: Exclude<BrandMomentProps[typeof OLD_PROP_NAME], undefined>
+): Exclude<BrandMomentProps[typeof NEW_PROP_NAME], undefined> => {
+  switch (oldValue) {
+    case "informative":
+      return "informative"
+    case "positive":
+      return "success"
+    case "negative":
+      return "warning"
+  }
+}
+
+export const transformBrandMomentMoodToVariant = migrateStringProp(
+  OLD_PROP_NAME,
+  NEW_PROP_NAME,
+  getNewVariantValue
+)

package/codemods/migrateCardVariantToColor/index.ts

@@ -0,0 +1,15 @@
+import { transformComponentsInDir } from "../utils"
+import { transformCardVariantToColor } from "./transformCardVariantToColor"
+
+const migrateCardVariantToColor = (): void => {
+  // eslint-disable-next-line no-console
+  console.log(" ~(-_- ~) Running Card variant to color transformer (~ -_-)~")
+  const targetDir = process.argv[2]
+  if (!targetDir) {
+    process.exit(1)
+  }
+
+  transformComponentsInDir(targetDir, transformCardVariantToColor, "Card")
+}
+
+migrateCardVariantToColor()

package/codemods/migrateCardVariantToColor/transformCardVariantToColor.spec.ts

@@ -0,0 +1,91 @@
+import { parseJsx } from "../__tests__/utils"
+import { transformSource, printAst, TransformConfig } from "../utils"
+import { transformCardVariantToColor } from "./transformCardVariantToColor"
+
+const transformCard = (sourceFile: TransformConfig["sourceFile"]): string =>
+  transformSource({
+    sourceFile,
+    astTransformer: transformCardVariantToColor,
+    tagName: "Card",
+  })
+
+describe("transformCardVariantToColor()", () => {
+  it('replaces variant="assertive" with color="orange"', () => {
+    const inputAst = parseJsx(
+      'export const TestComponent = () => <Card variant="assertive">Hello</Card>'
+    )
+    const outputAst = parseJsx(
+      'export const TestComponent = () => <Card color="orange">Hello</Card>'
+    )
+    expect(transformCard(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('replaces variant="cautionary" with color="yellow"', () => {
+    const inputAst = parseJsx(
+      'export const TestComponent = () => <Card variant="cautionary">Hello</Card>'
+    )
+    const outputAst = parseJsx(
+      'export const TestComponent = () => <Card color="yellow">Hello</Card>'
+    )
+    expect(transformCard(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('replaces variant="default" with color="white"', () => {
+    const inputAst = parseJsx(
+      'export const TestComponent = () => <Card variant="default">Hello</Card>'
+    )
+    const outputAst = parseJsx(
+      'export const TestComponent = () => <Card color="white">Hello</Card>'
+    )
+    expect(transformCard(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('replaces variant="destructive" with color="red"', () => {
+    const inputAst = parseJsx(
+      'export const TestComponent = () => <Card variant="destructive">Hello</Card>'
+    )
+    const outputAst = parseJsx(
+      'export const TestComponent = () => <Card color="red">Hello</Card>'
+    )
+    expect(transformCard(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('replaces variant="highlight" with color="purple"', () => {
+    const inputAst = parseJsx(
+      'export const TestComponent = () => <Card variant="highlight">Hello</Card>'
+    )
+    const outputAst = parseJsx(
+      'export const TestComponent = () => <Card color="purple">Hello</Card>'
+    )
+    expect(transformCard(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('replaces variant="informative" with color="blue"', () => {
+    const inputAst = parseJsx(
+      'export const TestComponent = () => <Card variant="informative">Hello</Card>'
+    )
+    const outputAst = parseJsx(
+      'export const TestComponent = () => <Card color="blue">Hello</Card>'
+    )
+    expect(transformCard(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('replaces variant="positive" with color="green"', () => {
+    const inputAst = parseJsx(
+      'export const TestComponent = () => <Card variant="positive">Hello</Card>'
+    )
+    const outputAst = parseJsx(
+      'export const TestComponent = () => <Card color="green">Hello</Card>'
+    )
+    expect(transformCard(inputAst)).toEqual(printAst(outputAst))
+  })
+  it("If no variant exists, it does not add one", () => {
+    const inputAst = parseJsx(
+      "export const TestComponent = () => <Card>Hello</Card>"
+    )
+    const outputAst = parseJsx(
+      "export const TestComponent = () => <Card>Hello</Card>"
+    )
+    expect(transformCard(inputAst)).toEqual(printAst(outputAst))
+  })
+})

package/codemods/migrateCardVariantToColor/transformCardVariantToColor.ts

@@ -0,0 +1,32 @@
+import type { CardProps } from "~components/Card"
+import { migrateStringProp } from "../utils"
+
+const OLD_PROP_NAME = "variant"
+const NEW_PROP_NAME = "color"
+
+const getNewVariantValue = (
+  oldValue: Exclude<CardProps[typeof OLD_PROP_NAME], undefined>
+): Exclude<CardProps[typeof NEW_PROP_NAME], undefined> => {
+  switch (oldValue) {
+    case "assertive":
+      return "orange"
+    case "cautionary":
+      return "yellow"
+    case "default":
+      return "white"
+    case "destructive":
+      return "red"
+    case "highlight":
+      return "purple"
+    case "informative":
+      return "blue"
+    case "positive":
+      return "green"
+  }
+}
+
+export const transformCardVariantToColor = migrateStringProp(
+  OLD_PROP_NAME,
+  NEW_PROP_NAME,
+  getNewVariantValue
+)

package/codemods/migrateConfirmationModalMoodsToVariant/index.ts

@@ -0,0 +1,19 @@
+import { transformComponentsInDir } from "../utils"
+import { transformConfirmationModalMoodsToVariant } from "./transformConfirmationModalMoodsToVariant"
+/** 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 ConfirmationModal transformer (~ -_-)~")
+  const targetDir = process.argv[2]
+  if (!targetDir) {
+    process.exit(1)
+  }
+
+  transformComponentsInDir(
+    targetDir,
+    transformConfirmationModalMoodsToVariant,
+    "ConfirmationModal"
+  )
+}
+
+migrateModalMoodsToVariant()

package/codemods/migrateConfirmationModalMoodsToVariant/transformConfirmationModalMoodsToVariant.spec.ts

@@ -0,0 +1,110 @@
+import { parseJsx } from "../__tests__/utils"
+import { transformSource, printAst } from "../utils"
+import { transformConfirmationModalMoodsToVariant } from "./transformConfirmationModalMoodsToVariant"
+
+describe("transformConfirmationModalMoodsToVariant", () => {
+  it('replaces mood="positive" with variant="success"', () => {
+    const inputAst = parseJsx(`
+      export const TestComponent = () => <ConfirmationModal mood="positive"/>
+    `)
+    const outputAst = parseJsx(`
+      export const TestComponent = () => <ConfirmationModal variant="success"/>
+    `)
+    const transformed = transformSource({
+      sourceFile: inputAst,
+      astTransformer: transformConfirmationModalMoodsToVariant,
+      tagName: "ConfirmationModal",
+    })
+    expect(transformed).toEqual(printAst(outputAst))
+  })
+
+  it('replaces mood="negative" with variant="warning"', () => {
+    const inputAst = parseJsx(`
+      export const TestComponent = () => <ConfirmationModal mood="negative"/>
+    `)
+    const outputAst = parseJsx(`
+      export const TestComponent = () => <ConfirmationModal variant="warning"/>
+    `)
+    const transformed = transformSource({
+      sourceFile: inputAst,
+      astTransformer: transformConfirmationModalMoodsToVariant,
+      tagName: "ConfirmationModal",
+    })
+    expect(transformed).toEqual(printAst(outputAst))
+  })
+
+  it("handles multiple attributes and replace only variant", () => {
+    const inputAst = parseJsx(`
+      export const TestComponent = () => <ConfirmationModal mood="negative" id="123"/>
+    `)
+    const outputAst = parseJsx(`
+      export const TestComponent = () => <ConfirmationModal variant="warning" id="123"/>
+    `)
+    const transformed = transformSource({
+      sourceFile: inputAst,
+      astTransformer: transformConfirmationModalMoodsToVariant,
+      tagName: "ConfirmationModal",
+    })
+    expect(transformed).toBe(printAst(outputAst))
+  })
+
+  it("transforms multiple ConfirmationModals", () => {
+    const inputAst = parseJsx(`
+      export const TestComponent = () => <div><ConfirmationModal mood="positive"/><ConfirmationModal  mood="negative"/></div>
+    `)
+    const outputAst = parseJsx(`
+      export const TestComponent = () => <div><ConfirmationModal variant="success"/><ConfirmationModal variant="warning"/></div>
+    `)
+    const transformed = transformSource({
+      sourceFile: inputAst,
+      astTransformer: transformConfirmationModalMoodsToVariant,
+      tagName: "ConfirmationModal",
+    })
+    expect(transformed).toBe(printAst(outputAst))
+  })
+
+  it("transforms ConfirmationModal with arbitrary braces", () => {
+    const inputAst = parseJsx(`
+      export const TestComponent = () => <div><ConfirmationModal mood={"positive"}/><ConfirmationModal mood={'assertive'}/><ConfirmationModal mood={\`positive\`}/></div>
+    `)
+    const outputAst = parseJsx(`
+      export const TestComponent = () => <div><ConfirmationModal variant="success"/><ConfirmationModal variant="cautionary"/><ConfirmationModal variant="success"/></div>
+    `)
+    const transformed = transformSource({
+      sourceFile: inputAst,
+      astTransformer: transformConfirmationModalMoodsToVariant,
+      tagName: "ConfirmationModal",
+    })
+    expect(transformed).toBe(printAst(outputAst))
+  })
+
+  it("won't add variant if variant already exists", () => {
+    const inputAst = parseJsx(`
+      export const TestComponent = () => <div><ConfirmationModal variant="success"/></div>
+    `)
+    const outputAst = parseJsx(`
+      export const TestComponent = () => <div><ConfirmationModal variant="success"/></div>
+    `)
+    const transformed = transformSource({
+      sourceFile: inputAst,
+      astTransformer: transformConfirmationModalMoodsToVariant,
+      tagName: "ConfirmationModal",
+    })
+    expect(transformed).toBe(printAst(outputAst))
+  })
+
+  it("won't modify variants usings variables", () => {
+    const inputAst = parseJsx(`
+      export const TestComponent = () => <div><ConfirmationModal variant={confirmationModalVariable}/></div>
+    `)
+    const outputAst = parseJsx(`
+      export const TestComponent = () => <div><ConfirmationModal variant={confirmationModalVariable}/></div>
+    `)
+    const transformed = transformSource({
+      sourceFile: inputAst,
+      astTransformer: transformConfirmationModalMoodsToVariant,
+      tagName: "ConfirmationModal",
+    })
+    expect(transformed).toBe(printAst(outputAst))
+  })
+})

package/codemods/migrateConfirmationModalMoodsToVariant/transformConfirmationModalMoodsToVariant.ts

@@ -0,0 +1,59 @@
+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 transformConfirmationModalMoodsToVariant =
+  (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.map(attr => {
+            if (ts.isJsxAttribute(attr) && attr.name.getText() === "mood") {
+              const valueName =
+                attr.initializer && getPropValueText(attr.initializer)
+
+              if (valueName) {
+                let variantValue: string = ""
+                switch (valueName) {
+                  case "positive":
+                    variantValue = "success"
+                    break
+                  case "negative":
+                    variantValue = "warning"
+                    break
+                  case "assertive":
+                    variantValue = "cautionary"
+                    break
+                }
+                return ts.factory.createJsxAttribute(
+                  ts.factory.createIdentifier("variant"),
+                  ts.factory.createStringLiteral(variantValue)
+                )
+              }
+            }
+
+            return 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/migrateEmptyStateIllustrationTypeToVariant/index.ts

@@ -0,0 +1,21 @@
+import { transformComponentsInDir } from "../utils"
+import { transformEmptyStateIllustrationTypeToVariant } from "./transformEmptyStateIllustrationTypeToVariant"
+
+const migrateEmptyStateIllustrationTypeToVariant = (): void => {
+  // eslint-disable-next-line no-console
+  console.log(
+    " ~(-_- ~) Running EmptyState illustrationType to variant transformer (~ -_-)~"
+  )
+  const targetDir = process.argv[2]
+  if (!targetDir) {
+    process.exit(1)
+  }
+
+  transformComponentsInDir(
+    targetDir,
+    transformEmptyStateIllustrationTypeToVariant,
+    "EmptyState"
+  )
+}
+
+migrateEmptyStateIllustrationTypeToVariant()

package/codemods/migrateEmptyStateIllustrationTypeToVariant/transformEmptyStateIllustrationTypeToVariant.spec.ts

@@ -0,0 +1,74 @@
+import { parseJsx } from "../__tests__/utils"
+import { transformSource, printAst, TransformConfig } from "../utils"
+import { transformEmptyStateIllustrationTypeToVariant } from "./transformEmptyStateIllustrationTypeToVariant"
+
+const transformEmptyState = (
+  sourceFile: TransformConfig["sourceFile"]
+): string =>
+  transformSource({
+    sourceFile,
+    astTransformer: transformEmptyStateIllustrationTypeToVariant,
+    tagName: "EmptyState",
+  })
+
+describe("transformEmptyStateIllustrationTypeToVariant()", () => {
+  it('replaces illustrationType="positive" with variant="success"', () => {
+    const inputAst = parseJsx(
+      'export const TestComponent = () => <EmptyState illustrationType="positive">Hello</EmptyState>'
+    )
+    const outputAst = parseJsx(
+      'export const TestComponent = () => <EmptyState variant="success">Hello</EmptyState>'
+    )
+    expect(transformEmptyState(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('replaces illustrationType="informative" with variant="informative"', () => {
+    const inputAst = parseJsx(
+      'export const TestComponent = () => <EmptyState illustrationType="informative">Hello</EmptyState>'
+    )
+    const outputAst = parseJsx(
+      'export const TestComponent = () => <EmptyState variant="informative">Hello</EmptyState>'
+    )
+    expect(transformEmptyState(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('replaces illustrationType="negative" with variant="warning"', () => {
+    const inputAst = parseJsx(
+      'export const TestComponent = () => <EmptyState illustrationType="negative">Hello</EmptyState>'
+    )
+    const outputAst = parseJsx(
+      'export const TestComponent = () => <EmptyState variant="warning">Hello</EmptyState>'
+    )
+    expect(transformEmptyState(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('replaces illustrationType="action" with variant="warning"', () => {
+    const inputAst = parseJsx(
+      'export const TestComponent = () => <EmptyState illustrationType="action">Hello</EmptyState>'
+    )
+    const outputAst = parseJsx(
+      'export const TestComponent = () => <EmptyState variant="warning">Hello</EmptyState>'
+    )
+    expect(transformEmptyState(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('replaces illustrationType="neutral" with variant="expert-advice"', () => {
+    const inputAst = parseJsx(
+      'export const TestComponent = () => <EmptyState illustrationType="neutral">Hello</EmptyState>'
+    )
+    const outputAst = parseJsx(
+      'export const TestComponent = () => <EmptyState variant="expert-advice">Hello</EmptyState>'
+    )
+    expect(transformEmptyState(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it("does not add variant if illustrationType was not defined", () => {
+    const inputAst = parseJsx(
+      "export const TestComponent = () => <EmptyState>Hello</EmptyState>"
+    )
+    const outputAst = parseJsx(
+      "export const TestComponent = () => <EmptyState>Hello</EmptyState>"
+    )
+    expect(transformEmptyState(inputAst)).toEqual(printAst(outputAst))
+  })
+})

package/codemods/migrateEmptyStateIllustrationTypeToVariant/transformEmptyStateIllustrationTypeToVariant.ts

@@ -0,0 +1,28 @@
+import type { EmptyStateProps } from "~components/EmptyState"
+import { migrateStringProp } from "../utils"
+
+const OLD_PROP_NAME = "illustrationType"
+const NEW_PROP_NAME = "variant"
+
+const getNewVariantValue = (
+  oldValue: Exclude<EmptyStateProps[typeof OLD_PROP_NAME], undefined>
+): Exclude<EmptyStateProps[typeof NEW_PROP_NAME], undefined> => {
+  switch (oldValue) {
+    case "informative":
+      return "informative"
+    case "positive":
+      return "success"
+    case "negative":
+      return "warning"
+    case "action":
+      return "warning"
+    case "neutral":
+      return "expert-advice"
+  }
+}
+
+export const transformEmptyStateIllustrationTypeToVariant = migrateStringProp(
+  OLD_PROP_NAME,
+  NEW_PROP_NAME,
+  getNewVariantValue
+)

package/codemods/migrateGlobalNotificationTypeToVariant/index.ts

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