@kaizen/components 1.57.2 → 1.58.0

package/codemods/migrateInformationTileMoodToVariant/index.ts

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

package/codemods/migrateInformationTileMoodToVariant/transformInformationTileMoodToVariant.spec.ts

@@ -0,0 +1,84 @@
+import { parseJsx } from "../__tests__/utils"
+import { transformSource, printAst, TransformConfig } from "../utils"
+import { transformInformationTileMoodToVariant } from "./transformInformationTileMoodToVariant"
+
+const transformInformationTile = (
+  sourceFile: TransformConfig["sourceFile"]
+): string =>
+  transformSource({
+    sourceFile,
+    astTransformer: transformInformationTileMoodToVariant,
+    tagName: "InformationTile",
+  })
+
+describe("transformInformationTileMoodToVariant()", () => {
+  it('replaces mood="positive" with variant="default"', () => {
+    const inputAst = parseJsx(
+      'export const TestComponent = () => <InformationTile mood="positive">Hello</InformationTile>'
+    )
+    const outputAst = parseJsx(
+      'export const TestComponent = () => <InformationTile variant="default">Hello</InformationTile>'
+    )
+    expect(transformInformationTile(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('replaces mood="informative" with variant="default"', () => {
+    const inputAst = parseJsx(
+      'export const TestComponent = () => <InformationTile mood="informative">Hello</InformationTile>'
+    )
+    const outputAst = parseJsx(
+      'export const TestComponent = () => <InformationTile variant="default">Hello</InformationTile>'
+    )
+    expect(transformInformationTile(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('replaces mood="cautionary" with variant="default"', () => {
+    const inputAst = parseJsx(
+      'export const TestComponent = () => <InformationTile mood="cautionary">Hello</InformationTile>'
+    )
+    const outputAst = parseJsx(
+      'export const TestComponent = () => <InformationTile variant="default">Hello</InformationTile>'
+    )
+    expect(transformInformationTile(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('replaces mood="assertive" with variant="default"', () => {
+    const inputAst = parseJsx(
+      'export const TestComponent = () => <InformationTile mood="assertive">Hello</InformationTile>'
+    )
+    const outputAst = parseJsx(
+      'export const TestComponent = () => <InformationTile variant="default">Hello</InformationTile>'
+    )
+    expect(transformInformationTile(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('replaces mood="negative" with variant="default"', () => {
+    const inputAst = parseJsx(
+      'export const TestComponent = () => <InformationTile mood="negative">Hello</InformationTile>'
+    )
+    const outputAst = parseJsx(
+      'export const TestComponent = () => <InformationTile variant="default">Hello</InformationTile>'
+    )
+    expect(transformInformationTile(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('replaces mood="prominent" with variant="expert-advice"', () => {
+    const inputAst = parseJsx(
+      'export const TestComponent = () => <InformationTile mood="prominent">Hello</InformationTile>'
+    )
+    const outputAst = parseJsx(
+      'export const TestComponent = () => <InformationTile variant="expert-advice">Hello</InformationTile>'
+    )
+    expect(transformInformationTile(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it("does not add variant if mood was not defined", () => {
+    const inputAst = parseJsx(
+      "export const TestComponent = () => <InformationTile>Hello</InformationTile>"
+    )
+    const outputAst = parseJsx(
+      "export const TestComponent = () => <InformationTile>Hello</InformationTile>"
+    )
+    expect(transformInformationTile(inputAst)).toEqual(printAst(outputAst))
+  })
+})

package/codemods/migrateInformationTileMoodToVariant/transformInformationTileMoodToVariant.ts

@@ -0,0 +1,22 @@
+import type { InformationTileProps } from "~components/Tile"
+import { migrateStringProp } from "../utils"
+
+const OLD_PROP_NAME = "mood"
+const NEW_PROP_NAME = "variant"
+
+const getNewVariantValue = (
+  oldValue: Exclude<InformationTileProps[typeof OLD_PROP_NAME], undefined>
+): Exclude<InformationTileProps[typeof NEW_PROP_NAME], undefined> => {
+  switch (oldValue) {
+    case "prominent":
+      return "expert-advice"
+    default:
+      return "default"
+  }
+}
+
+export const transformInformationTileMoodToVariant = migrateStringProp(
+  OLD_PROP_NAME,
+  NEW_PROP_NAME,
+  getNewVariantValue
+)

package/codemods/migrateInlineNotificationTypeToVariant/index.ts

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

package/codemods/migrateMultiActionTileMoodToVariant/index.ts

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

package/codemods/migrateMultiActionTileMoodToVariant/transformMultiActionTileMoodToVariant.spec.ts

@@ -0,0 +1,84 @@
+import { parseJsx } from "../__tests__/utils"
+import { transformSource, printAst, TransformConfig } from "../utils"
+import { transformMultiActionTileMoodToVariant } from "./transformMultiActionTileMoodToVariant"
+
+const transformMultiActionTile = (
+  sourceFile: TransformConfig["sourceFile"]
+): string =>
+  transformSource({
+    sourceFile,
+    astTransformer: transformMultiActionTileMoodToVariant,
+    tagName: "MultiActionTile",
+  })
+
+describe("transformMultiActionTileMoodToVariant()", () => {
+  it('replaces mood="positive" with variant="default"', () => {
+    const inputAst = parseJsx(
+      'export const TestComponent = () => <MultiActionTile mood="positive">Hello</MultiActionTile>'
+    )
+    const outputAst = parseJsx(
+      'export const TestComponent = () => <MultiActionTile variant="default">Hello</MultiActionTile>'
+    )
+    expect(transformMultiActionTile(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('replaces mood="informative" with variant="default"', () => {
+    const inputAst = parseJsx(
+      'export const TestComponent = () => <MultiActionTile mood="informative">Hello</MultiActionTile>'
+    )
+    const outputAst = parseJsx(
+      'export const TestComponent = () => <MultiActionTile variant="default">Hello</MultiActionTile>'
+    )
+    expect(transformMultiActionTile(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('replaces mood="cautionary" with variant="default"', () => {
+    const inputAst = parseJsx(
+      'export const TestComponent = () => <MultiActionTile mood="cautionary">Hello</MultiActionTile>'
+    )
+    const outputAst = parseJsx(
+      'export const TestComponent = () => <MultiActionTile variant="default">Hello</MultiActionTile>'
+    )
+    expect(transformMultiActionTile(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('replaces mood="assertive" with variant="default"', () => {
+    const inputAst = parseJsx(
+      'export const TestComponent = () => <MultiActionTile mood="assertive">Hello</MultiActionTile>'
+    )
+    const outputAst = parseJsx(
+      'export const TestComponent = () => <MultiActionTile variant="default">Hello</MultiActionTile>'
+    )
+    expect(transformMultiActionTile(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('replaces mood="negative" with variant="default"', () => {
+    const inputAst = parseJsx(
+      'export const TestComponent = () => <MultiActionTile mood="negative">Hello</MultiActionTile>'
+    )
+    const outputAst = parseJsx(
+      'export const TestComponent = () => <MultiActionTile variant="default">Hello</MultiActionTile>'
+    )
+    expect(transformMultiActionTile(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('replaces mood="prominent" with variant="expert-advice"', () => {
+    const inputAst = parseJsx(
+      'export const TestComponent = () => <MultiActionTile mood="prominent">Hello</MultiActionTile>'
+    )
+    const outputAst = parseJsx(
+      'export const TestComponent = () => <MultiActionTile variant="expert-advice">Hello</MultiActionTile>'
+    )
+    expect(transformMultiActionTile(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it("does not add variant if mood was not defined", () => {
+    const inputAst = parseJsx(
+      "export const TestComponent = () => <MultiActionTile>Hello</MultiActionTile>"
+    )
+    const outputAst = parseJsx(
+      "export const TestComponent = () => <MultiActionTile>Hello</MultiActionTile>"
+    )
+    expect(transformMultiActionTile(inputAst)).toEqual(printAst(outputAst))
+  })
+})

package/codemods/migrateMultiActionTileMoodToVariant/transformMultiActionTileMoodToVariant.ts

@@ -0,0 +1,22 @@
+import type { MultiActionTileProps } from "~components/Tile"
+import { migrateStringProp } from "../utils"
+
+const OLD_PROP_NAME = "mood"
+const NEW_PROP_NAME = "variant"
+
+const getNewVariantValue = (
+  oldValue: Exclude<MultiActionTileProps[typeof OLD_PROP_NAME], undefined>
+): Exclude<MultiActionTileProps[typeof NEW_PROP_NAME], undefined> => {
+  switch (oldValue) {
+    case "prominent":
+      return "expert-advice"
+    default:
+      return "default"
+  }
+}
+
+export const transformMultiActionTileMoodToVariant = migrateStringProp(
+  OLD_PROP_NAME,
+  NEW_PROP_NAME,
+  getNewVariantValue
+)

package/codemods/migrateNotificationTypeToVariant/index.ts

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

package/codemods/migrateNotificationTypeToVariant/migrateNotificationTypeToVariant.spec.ts

@@ -0,0 +1,107 @@
+import { parseJsx } from "../__tests__/utils"
+import { transformSource, printAst } from "../utils"
+import { transformNotificationTypeToVariant } from "./migrateNotificationTypeToVariant"
+
+describe("transformNotificationTypeToVariant", () => {
+  it('replaces InlineNotifications type="positive" with variant="success"', () => {
+    const inputAst = parseJsx(`
+      export const TestComponent = () => <InlineNotification type="positive">Test</InlineNotification>
+    `)
+    const outputAst = parseJsx(`
+      export const TestComponent = () => <InlineNotification variant="success">Test</InlineNotification>
+    `)
+    const transformed = transformSource({
+      sourceFile: inputAst,
+      astTransformer: transformNotificationTypeToVariant,
+      tagName: "InlineNotification",
+    })
+    expect(transformed).toEqual(printAst(outputAst))
+  })
+
+  it('replaces GlobalNotification type="positive" with variant="success"', () => {
+    const inputAst = parseJsx(`
+      export const TestComponent = () => <GlobalNotification type="positive">Test</GlobalNotification>
+    `)
+    const outputAst = parseJsx(`
+      export const TestComponent = () => <GlobalNotification variant="success">Test</GlobalNotification>
+    `)
+    const transformed = transformSource({
+      sourceFile: inputAst,
+      astTransformer: transformNotificationTypeToVariant,
+      tagName: "GlobalNotification",
+    })
+    expect(transformed).toEqual(printAst(outputAst))
+  })
+
+  it('replaces ToastNotification type="positive" with variant="success"', () => {
+    const inputAst = parseJsx(`
+      export const TestComponent = () => <ToastNotification type="positive">Test</ToastNotification>
+    `)
+    const outputAst = parseJsx(`
+      export const TestComponent = () => <ToastNotification variant="success">Test</ToastNotification>
+    `)
+    const transformed = transformSource({
+      sourceFile: inputAst,
+      astTransformer: transformNotificationTypeToVariant,
+      tagName: "ToastNotification",
+    })
+    expect(transformed).toEqual(printAst(outputAst))
+  })
+
+  it('replaces type="informative" with variant="informative"', () => {
+    const inputAst = parseJsx(`
+      export const TestComponent = () => <InlineNotification type="informative">Test</InlineNotification>
+    `)
+    const outputAst = parseJsx(`
+      export const TestComponent = () => <InlineNotification variant="informative">Test</InlineNotification>
+    `)
+    const transformed = transformSource({
+      sourceFile: inputAst,
+      astTransformer: transformNotificationTypeToVariant,
+      tagName: "InlineNotification",
+    })
+    expect(transformed).toBe(printAst(outputAst))
+  })
+  it('replaces type="cautionary" with variant="cautionary"', () => {
+    const inputAst = parseJsx(`
+      export const TestComponent = () => <InlineNotification type="cautionary">Test</InlineNotification>
+    `)
+    const outputAst = parseJsx(`
+      export const TestComponent = () => <InlineNotification variant="cautionary">Test</InlineNotification>
+    `)
+    const transformed = transformSource({
+      sourceFile: inputAst,
+      astTransformer: transformNotificationTypeToVariant,
+      tagName: "InlineNotification",
+    })
+    expect(transformed).toBe(printAst(outputAst))
+  })
+  it('replaces type="security" with variant="security"', () => {
+    const inputAst = parseJsx(`
+      export const TestComponent = () => <InlineNotification type="security">Test</InlineNotification>
+    `)
+    const outputAst = parseJsx(`
+      export const TestComponent = () => <InlineNotification variant="security">Test</InlineNotification>
+    `)
+    const transformed = transformSource({
+      sourceFile: inputAst,
+      astTransformer: transformNotificationTypeToVariant,
+      tagName: "InlineNotification",
+    })
+    expect(transformed).toBe(printAst(outputAst))
+  })
+  it('replaces type="negative" with variant="warning"', () => {
+    const inputAst = parseJsx(`
+      export const TestComponent = () => <InlineNotification type="negative">Test</InlineNotification>
+    `)
+    const outputAst = parseJsx(`
+      export const TestComponent = () => <InlineNotification variant="warning">Test</InlineNotification>
+    `)
+    const transformed = transformSource({
+      sourceFile: inputAst,
+      astTransformer: transformNotificationTypeToVariant,
+      tagName: "InlineNotification",
+    })
+    expect(transformed).toBe(printAst(outputAst))
+  })
+})

package/codemods/migrateNotificationTypeToVariant/migrateNotificationTypeToVariant.ts

@@ -0,0 +1,28 @@
+import type { GenericNotificationProps } from "~components/Notification/subcomponents/GenericNotification"
+import { migrateStringProp } from "../utils"
+
+const OLD_PROP_NAME = "type"
+const NEW_PROP_NAME = "variant"
+
+const getNewVariantValue = (
+  oldValue: Exclude<GenericNotificationProps[typeof OLD_PROP_NAME], undefined>
+): Exclude<GenericNotificationProps[typeof NEW_PROP_NAME], undefined> => {
+  switch (oldValue) {
+    case "cautionary":
+      return "cautionary"
+    case "informative":
+      return "informative"
+    case "negative":
+      return "warning"
+    case "positive":
+      return "success"
+    case "security":
+      return "security"
+  }
+}
+
+export const transformNotificationTypeToVariant = migrateStringProp(
+  OLD_PROP_NAME,
+  NEW_PROP_NAME,
+  getNewVariantValue
+)

package/codemods/migrateProgressBarMoodToColor/index.ts

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

package/codemods/migrateProgressBarMoodToColor/transformProgressBarMoodToColor.spec.ts

@@ -0,0 +1,54 @@
+import { parseJsx } from "../__tests__/utils"
+import { transformSource, printAst, TransformConfig } from "../utils"
+import { transformProgressBarMoodToColor } from "./transformProgressBarMoodToColor"
+
+const transformProgressBar = (
+  sourceFile: TransformConfig["sourceFile"]
+): string =>
+  transformSource({
+    sourceFile,
+    astTransformer: transformProgressBarMoodToColor,
+    tagName: "ProgressBar",
+  })
+
+describe("transformProgressBarMoodToColor()", () => {
+  it('replaces mood="cautionary" with color="yellow"', () => {
+    const inputAst = parseJsx(
+      'export const TestComponent = () => <ProgressBar mood="cautionary" />'
+    )
+    const outputAst = parseJsx(
+      'export const TestComponent = () => <ProgressBar color="yellow" />'
+    )
+    expect(transformProgressBar(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('replaces mood="informative" with color="blue', () => {
+    const inputAst = parseJsx(
+      'export const TestComponent = () => <ProgressBar mood="informative" />'
+    )
+    const outputAst = parseJsx(
+      'export const TestComponent = () => <ProgressBar color="blue" />'
+    )
+    expect(transformProgressBar(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('replaces mood="negative" with color="red"', () => {
+    const inputAst = parseJsx(
+      'export const TestComponent = () => <ProgressBar mood="negative" />'
+    )
+    const outputAst = parseJsx(
+      'export const TestComponent = () => <ProgressBar color="red" />'
+    )
+    expect(transformProgressBar(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it('replaces mood="positive" with color="green"', () => {
+    const inputAst = parseJsx(
+      'export const TestComponent = () => <ProgressBar mood="positive" />'
+    )
+    const outputAst = parseJsx(
+      'export const TestComponent = () => <ProgressBar color="green" />'
+    )
+    expect(transformProgressBar(inputAst)).toEqual(printAst(outputAst))
+  })
+})

package/codemods/migrateProgressBarMoodToColor/transformProgressBarMoodToColor.ts

@@ -0,0 +1,26 @@
+import type { ProgressBarProps } from "~components/ProgressBar"
+import { migrateStringProp } from "../utils"
+
+const OLD_PROP_NAME = "mood"
+const NEW_PROP_NAME = "color"
+
+const getNewVariantValue = (
+  oldValue: Exclude<ProgressBarProps[typeof OLD_PROP_NAME], undefined>
+): Exclude<ProgressBarProps[typeof NEW_PROP_NAME], undefined> => {
+  switch (oldValue) {
+    case "cautionary":
+      return "yellow"
+    case "informative":
+      return "blue"
+    case "negative":
+      return "red"
+    case "positive":
+      return "green"
+  }
+}
+
+export const transformProgressBarMoodToColor = migrateStringProp(
+  OLD_PROP_NAME,
+  NEW_PROP_NAME,
+  getNewVariantValue
+)

package/codemods/migrateToastNotificationTypeToVariant/index.ts

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

package/codemods/migrateWellVariantToColor/index.ts

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