@kaizen/components 1.57.1 → 1.58.0

package/codemods/utils/getPropValueText.spec.ts

@@ -0,0 +1,75 @@
+import ts from "typescript"
+import { parseJsx } from "../__tests__/utils"
+import { getPropValueText } from "./getPropValueText"
+
+export const getJsxAttributeValue = (
+  node: ts.Node
+): ts.JsxAttributeValue | undefined => {
+  const visitNode = (
+    visitedNode: ts.Node
+  ): ts.JsxAttributeValue | undefined => {
+    if (ts.isJsxAttribute(visitedNode)) {
+      return visitedNode.initializer
+    }
+
+    return visitedNode.forEachChild(visitNode)
+  }
+
+  return visitNode(node)
+}
+
+describe("getPropValueText", () => {
+  it("will return the text value of a string literal", () => {
+    const pancakeAst = parseJsx('<Pancake topping="jam" />')
+    const mockAttribute = getJsxAttributeValue(
+      pancakeAst
+    ) as ts.JsxAttributeValue
+
+    expect(getPropValueText(mockAttribute)).toEqual("jam")
+  })
+
+  it("will return the text value of a expression with double quotes", () => {
+    const pancakeAst = parseJsx('<Pancake topping={"jam"} />')
+    const mockAttribute = getJsxAttributeValue(
+      pancakeAst
+    ) as ts.JsxAttributeValue
+
+    expect(getPropValueText(mockAttribute)).toEqual("jam")
+  })
+
+  it("will return the text value of a expression with single quotes", () => {
+    const pancakeAst = parseJsx("<Pancake topping={'jam'} />")
+    const mockAttribute = getJsxAttributeValue(
+      pancakeAst
+    ) as ts.JsxAttributeValue
+
+    expect(getPropValueText(mockAttribute)).toEqual("jam")
+  })
+
+  it("will return the text value of a expression with backticks", () => {
+    const pancakeAst = parseJsx("<Pancake topping={`jam`} />")
+    const mockAttribute = getJsxAttributeValue(
+      pancakeAst
+    ) as ts.JsxAttributeValue
+
+    expect(getPropValueText(mockAttribute)).toEqual("jam")
+  })
+
+  it("will return undefined if a JSX element is used as a value", () => {
+    const pancakeAst = parseJsx("<Pancake topping={<Cheese />} />")
+    const mockAttribute = getJsxAttributeValue(
+      pancakeAst
+    ) as ts.JsxAttributeValue
+
+    expect(getPropValueText(mockAttribute)).toBeUndefined()
+  })
+
+  it("will return undefined if a boolean value", () => {
+    const pancakeAst = parseJsx("<Pancake topping={false} />")
+    const mockAttribute = getJsxAttributeValue(
+      pancakeAst
+    ) as ts.JsxAttributeValue
+
+    expect(getPropValueText(mockAttribute)).toBeUndefined()
+  })
+})

package/codemods/utils/getPropValueText.ts

@@ -0,0 +1,21 @@
+import ts from "typescript"
+
+/** a helper function to get prop's value text from a JSX attribute */
+export const getPropValueText = (
+  propValue: ts.JsxAttributeValue
+): string | undefined => {
+  if (ts.isStringLiteral(propValue)) {
+    return propValue.text
+  }
+
+  const expression = ts.isJsxExpression(propValue) && propValue.expression
+
+  if (expression) {
+    const expressionText = expression.getText()
+
+    if (expressionText.match(/^['"`]/)) {
+      return expressionText.replace(/^['"`]|['"`]$/g, "")
+    }
+  }
+  return undefined
+}

package/codemods/utils/getTagName.spec.ts

@@ -0,0 +1,24 @@
+import { parseJsx } from "../__tests__/utils"
+import { getTagName } from "./getTagName"
+
+describe("getTagName", () => {
+  it("returns the import name if it matches the target specifier", () => {
+    const input = parseJsx('import { Well } from "@kaizen/components"')
+    const tagName = getTagName(input, "Well")
+    expect(tagName).toBe("Well")
+  })
+
+  it("returns the import alias if it matches the target specifier", () => {
+    const input = parseJsx(
+      'import { Well as KaizenWell } from "@kaizen/components"'
+    )
+    const tagName = getTagName(input, "Well")
+    expect(tagName).toBe("KaizenWell")
+  })
+
+  it("returns undefined if there is no match to the target specifier", () => {
+    const input = parseJsx('import { Well } from "@kaizen/well"')
+    const tagName = getTagName(input, "Well")
+    expect(tagName).toBe(undefined)
+  })
+})

package/codemods/utils/getTagName.ts

@@ -0,0 +1,32 @@
+import ts from "typescript"
+
+/** Recurses through AST to find the import specifier name and check it against the `importSpecifierTarget`. If found, it will return the import name or alias, otherwise will return `undefined` */
+export const getTagName = (
+  node: ts.Node,
+  importSpecifierTarget: string
+): string | undefined => {
+  let alias: string | undefined
+
+  const visitNode = (visitedNode: ts.Node): string | undefined => {
+    if (ts.isImportDeclaration(visitedNode)) {
+      const moduleSpecifier = visitedNode.moduleSpecifier.getText()
+      if (moduleSpecifier.includes("@kaizen/components")) {
+        const namedBindings = visitedNode.importClause?.namedBindings
+        if (namedBindings && ts.isNamedImports(namedBindings)) {
+          namedBindings.elements.forEach(importSpecifier => {
+            const importName = importSpecifier.name.getText()
+            const tagName = importSpecifier.propertyName
+              ? importSpecifier.propertyName.getText()
+              : importName
+            if (tagName === importSpecifierTarget) {
+              alias = importName
+            }
+          })
+        }
+      }
+    }
+    return alias || ts.forEachChild(visitedNode, visitNode) || undefined
+  }
+
+  return visitNode(node)
+}

package/codemods/utils/index.ts

@@ -0,0 +1,7 @@
+export * from "./getPropValueText"
+export * from "./getTagName"
+export * from "./migrateStringProp"
+export * from "./printAst"
+export * from "./transformComponentsInDir"
+export * from "./transformSource"
+export * from "./updateJsxElementWithNewProps"

package/codemods/utils/migrateStringProp.spec.ts

@@ -0,0 +1,129 @@
+import { parseJsx } from "../__tests__/utils"
+import { transformSource, printAst, TransformConfig } from "../utils"
+import { migrateStringProp } from "./migrateStringProp"
+
+const transformTopping = (oldValue: string): string => {
+  switch (oldValue) {
+    case "butter":
+      return "jam"
+    default:
+      return "blueberries"
+  }
+}
+
+const testMigrateStringProp = (
+  sourceFile: TransformConfig["sourceFile"]
+): string =>
+  transformSource({
+    sourceFile,
+    astTransformer: migrateStringProp(
+      "toppingOld",
+      "toppingNew",
+      transformTopping
+    ),
+    tagName: "Pancakes",
+  })
+
+describe("migrateStringProp()", () => {
+  describe("replaces old prop name and value with new prop name and value", () => {
+    it("applies to self closing elements", () => {
+      const inputAst = parseJsx(
+        'export const TestComponent = () => <Pancakes toppingOld="butter" />'
+      )
+      const outputAst = parseJsx(
+        'export const TestComponent = () => <Pancakes toppingNew="jam" />'
+      )
+      expect(testMigrateStringProp(inputAst)).toEqual(printAst(outputAst))
+    })
+
+    it("applies to JSX opening elements", () => {
+      const inputAst = parseJsx(
+        'export const TestComponent = () => <Pancakes toppingOld="butter">Hello</Pancakes>'
+      )
+      const outputAst = parseJsx(
+        'export const TestComponent = () => <Pancakes toppingNew="jam">Hello</Pancakes>'
+      )
+      expect(testMigrateStringProp(inputAst)).toEqual(printAst(outputAst))
+    })
+  })
+
+  it("handles multiple attributes and replaces only the provided prop", () => {
+    const inputAst = parseJsx(
+      'export const TestComponent = () => <Pancakes toppingOld="butter" id="123" />'
+    )
+    const outputAst = parseJsx(
+      'export const TestComponent = () => <Pancakes toppingNew="jam" id="123" />'
+    )
+    expect(testMigrateStringProp(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it("transforms multiple components", () => {
+    const inputAst = parseJsx(`
+      export const TestComponent = () => (
+        <div>
+          <Pancakes toppingOld="butter" />
+          <Pancakes toppingOld="honey" />
+        </div>
+      )
+    `)
+    const outputAst = parseJsx(`
+      export const TestComponent = () => (
+        <div>
+          <Pancakes toppingNew="jam" />
+          <Pancakes toppingNew="blueberries" />
+        </div>
+      )
+    `)
+    expect(testMigrateStringProp(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it("transforms arbitrary braces", () => {
+    const inputAst = parseJsx(`
+      export const TestComponent = () => (
+        <div>
+          <Pancakes toppingOld={"butter"} />
+          <Pancakes toppingOld={'butter'} />
+          <Pancakes toppingOld={\`butter\`} />
+        </div>
+      )
+    `)
+    const outputAst = parseJsx(`
+      export const TestComponent = () => (
+        <div>
+          <Pancakes toppingNew="jam" />
+          <Pancakes toppingNew="jam" />
+          <Pancakes toppingNew="jam" />
+        </div>
+      )
+    `)
+    expect(testMigrateStringProp(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it("does not add new prop if old prop is not defined", () => {
+    const inputAst = parseJsx("export const TestComponent = () => <Pancakes />")
+    const outputAst = parseJsx(
+      "export const TestComponent = () => <Pancakes />"
+    )
+    expect(testMigrateStringProp(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it("does not add new prop if new prop already exists", () => {
+    const inputAst = parseJsx(
+      'export const TestComponent = () => <Pancakes toppingNew="jam" />'
+    )
+    const outputAst = parseJsx(
+      'export const TestComponent = () => <Pancakes toppingNew="jam" />'
+    )
+    expect(testMigrateStringProp(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it("does not modify old prop using variables", () => {
+    const inputAst = parseJsx(
+      "export const TestComponent = () => <Pancakes toppingOld={var} />"
+    )
+    const outputAst = parseJsx(
+      "export const TestComponent = () => <Pancakes toppingOld={var} />"
+    )
+    expect(testMigrateStringProp(inputAst)).toEqual(printAst(outputAst))
+  })
+})

package/codemods/utils/migrateStringProp.ts

@@ -0,0 +1,43 @@
+import ts from "typescript"
+import { getPropValueText } from "./getPropValueText"
+import { updateJsxElementWithNewProps } from "./updateJsxElementWithNewProps"
+
+/** Recurses through AST to find and update any jsx element that matched the tagName */
+export const migrateStringProp =
+  <OldValue extends string, NewValue extends string>(
+    oldPropName: string,
+    newPropName: string,
+    valueTransformer: (value: OldValue) => NewValue
+  ) =>
+  (context: ts.TransformationContext, tagName: string) =>
+  (rootNode: ts.Node): ts.Node => {
+    const 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() === oldPropName
+            ) {
+              const oldValue =
+                attr.initializer && getPropValueText(attr.initializer)
+
+              if (oldValue) {
+                const newValue = valueTransformer(oldValue as OldValue)
+                return ts.factory.createJsxAttribute(
+                  ts.factory.createIdentifier(newPropName),
+                  ts.factory.createStringLiteral(newValue)
+                )
+              }
+            }
+
+            return attr
+          })
+
+          return updateJsxElementWithNewProps(node, newAttributes)
+        }
+      }
+      return ts.visitEachChild(node, visit, context)
+    }
+    return ts.visitNode(rootNode, visit)
+  }

package/codemods/utils/printAst.ts

@@ -0,0 +1,6 @@
+import ts from "typescript"
+/** A util that prints that is used to print the AST as a string */
+export const printAst = (ast: ts.SourceFile): string => {
+  const printer = ts.createPrinter()
+  return printer.printFile(ast)
+}

package/codemods/utils/transformComponentsInDir.ts

@@ -0,0 +1,42 @@
+import fs from "fs"
+import path from "path"
+import ts from "typescript"
+import { transformSource, getTagName, TransformConfig } from "."
+
+/** Walks the directory and runs the runs the AST transformer on the given component name */
+export const transformComponentsInDir = (
+  dir: string,
+  transformer: TransformConfig["astTransformer"],
+  componentName: string
+): void => {
+  if (dir.includes("node_modules")) {
+    return
+  }
+
+  const files = fs.readdirSync(dir)
+  files.forEach(file => {
+    const fullPath = path.join(dir, file)
+    if (fs.statSync(fullPath).isDirectory()) {
+      transformComponentsInDir(fullPath, transformer, componentName)
+    } else if (fullPath.endsWith(".tsx")) {
+      const source = fs.readFileSync(fullPath, "utf8")
+      const sourceFile = ts.createSourceFile(
+        fullPath,
+        source,
+        ts.ScriptTarget.Latest,
+        true
+      )
+      const tagName = getTagName(sourceFile, componentName)
+
+      if (tagName) {
+        const updatedSourceFile = transformSource({
+          sourceFile,
+          astTransformer: transformer,
+          tagName,
+        })
+
+        fs.writeFileSync(fullPath, updatedSourceFile, "utf8")
+      }
+    }
+  })
+}

package/codemods/utils/transformSource.spec.ts

@@ -0,0 +1,56 @@
+import fs from "fs"
+import path from "path"
+import ts from "typescript"
+import { parseJsx } from "../__tests__/utils"
+import { TransformConfig, transformSource } from "./transformSource"
+
+export const mockedTransformer =
+  (context: ts.TransformationContext) =>
+  (rootNode: ts.Node): ts.Node => {
+    function visit(node: ts.Node): ts.Node {
+      if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
+        if (node.tagName.getText() === "Pancakes") {
+          const newAttributes = node.attributes.properties.map(attr => {
+            if (ts.isJsxAttribute(attr) && attr.name.getText() === "topping") {
+              return ts.factory.updateJsxAttribute(
+                attr,
+                attr.name,
+                ts.factory.createStringLiteral("jam")
+              )
+            }
+            return 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)
+  }
+
+describe("transformSource", () => {
+  it("updates the value of Pancakes topping to jam", () => {
+    const filePath = path.resolve(
+      path.join(__dirname, "./__fixtures__/KaioComponent.tsx")
+    )
+    const fileContent = fs.readFileSync(filePath, "utf8")
+    const sourceFile = parseJsx(fileContent)
+
+    const mockTransformConfig = {
+      sourceFile,
+      astTransformer: mockedTransformer,
+      tagName: "mockAlias",
+    } satisfies TransformConfig
+
+    const transformed = transformSource(mockTransformConfig)
+
+    expect(transformed).toMatchSnapshot()
+  })
+})

package/codemods/utils/transformSource.ts

@@ -0,0 +1,25 @@
+import ts from "typescript"
+import { printAst } from "./printAst"
+
+export type TransformConfig = {
+  sourceFile: ts.SourceFile
+  astTransformer: (
+    context: ts.TransformationContext,
+    tagName: string
+  ) => (rootNode: ts.Node) => ts.Node
+  tagName: string
+}
+
+/** Transforms the source file with the transformer and target import alias provided */
+export const transformSource = ({
+  sourceFile,
+  astTransformer,
+  tagName,
+}: TransformConfig): string => {
+  const result = ts.transform(sourceFile, [
+    context => astTransformer(context, tagName),
+  ])
+  const transformedSource = result.transformed[0] as ts.SourceFile
+
+  return printAst(transformedSource)
+}

package/codemods/utils/updateJsxElementWithNewProps.spec.ts

@@ -0,0 +1,67 @@
+import ts from "typescript"
+import { parseJsx } from "../__tests__/utils"
+import { updateJsxElementWithNewProps } from "./updateJsxElementWithNewProps"
+
+const printNode = (node: ts.Node, source: ts.SourceFile): string => {
+  const printer = ts.createPrinter({ newLine: ts.NewLineKind.LineFeed })
+  return printer.printNode(ts.EmitHint.Unspecified, node, source)
+}
+
+describe("updateJsxElementWithNewProps()", () => {
+  it("adds a prop to a self closing element", () => {
+    const source = parseJsx("<Pancakes />")
+    const jsxElement = source.statements[0] as ts.ExpressionStatement
+
+    const newAttributes = [
+      ts.factory.createJsxAttribute(
+        ts.factory.createIdentifier("topping"),
+        ts.factory.createStringLiteral("butter")
+      ),
+    ]
+    const updatedNode = updateJsxElementWithNewProps(
+      jsxElement.expression,
+      newAttributes
+    )
+
+    const result = printNode(updatedNode, source)
+    expect(result).toBe('<Pancakes topping="butter"/>')
+  })
+
+  it("removes a prop to a self closing element", () => {
+    const source = parseJsx('<Pancakes topping="butter" />')
+    const jsxElement = source.statements[0] as ts.ExpressionStatement
+
+    const updatedNode = updateJsxElementWithNewProps(jsxElement.expression, [])
+
+    const result = printNode(updatedNode, source)
+    expect(result).toBe("<Pancakes />")
+  })
+
+  it("adds a prop to a JSX opening element", () => {
+    const source = parseJsx("<Pancakes>Hello</Pancakes>")
+    const jsxElement = source.statements[0] as ts.ExpressionStatement
+    const node = (jsxElement.expression as ts.JsxElement).openingElement
+
+    const newAttributes = [
+      ts.factory.createJsxAttribute(
+        ts.factory.createIdentifier("topping"),
+        ts.factory.createStringLiteral("butter")
+      ),
+    ]
+    const updatedNode = updateJsxElementWithNewProps(node, newAttributes)
+
+    const result = printNode(updatedNode, source)
+    expect(result).toBe('<Pancakes topping="butter">')
+  })
+
+  it("removes a prop to a JSX opening element", () => {
+    const source = parseJsx('<Pancakes topping="butter">Hello</Pancakes>')
+    const jsxElement = source.statements[0] as ts.ExpressionStatement
+    const node = (jsxElement.expression as ts.JsxElement).openingElement
+
+    const updatedNode = updateJsxElementWithNewProps(node, [])
+
+    const result = printNode(updatedNode, source)
+    expect(result).toBe("<Pancakes>")
+  })
+})

package/codemods/utils/updateJsxElementWithNewProps.ts

@@ -0,0 +1,24 @@
+import ts from "typescript"
+
+export const updateJsxElementWithNewProps = (
+  node: ts.Node,
+  newAttributes: ts.JsxAttributeLike[]
+): ts.Node => {
+  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 node
+}

package/dist/cjs/BrandMoment/BrandMoment.cjs

@@ -23,6 +23,7 @@ var classnames__default = /*#__PURE__*/_interopDefault(classnames);
  */
 var BrandMoment = function (_a) {
   var mood = _a.mood,
+    variant = _a.variant,
     illustration = _a.illustration,
     header = _a.header,
     body = _a.body,
@@ -30,10 +31,10 @@ var BrandMoment = function (_a) {
     secondaryAction = _a.secondaryAction,
     text = _a.text,
     classNameOverride = _a.classNameOverride,
-    restProps = tslib.__rest(_a, ["mood", "illustration", "header", "body", "primaryAction", "secondaryAction", "text", "classNameOverride"]);
+    restProps = tslib.__rest(_a, ["mood", "variant", "illustration", "header", "body", "primaryAction", "secondaryAction", "text", "classNameOverride"]);
   var queries = useMediaQueries.useMediaQueries().queries;
   return React__default.default.createElement("div", tslib.__assign({
-    className: classnames__default.default(BrandMoment_module.body, BrandMoment_module[mood], classNameOverride)
+    className: classnames__default.default(BrandMoment_module.body, variant ? BrandMoment_module[variant] : BrandMoment_module[mood], classNameOverride)
   }, restProps), React__default.default.createElement("header", {
     className: BrandMoment_module.header
   }, header), React__default.default.createElement("main", {

package/dist/cjs/BrandMoment/BrandMoment.module.scss.cjs

@@ -2,9 +2,11 @@
 
 var styles = {
   "body": "BrandMoment-module_body__J4lls",
-  "informative": "BrandMoment-module_informative__Qvwcd",
   "positive": "BrandMoment-module_positive__78wqJ",
   "negative": "BrandMoment-module_negative__atXal",
+  "informative": "BrandMoment-module_informative__Qvwcd",
+  "success": "BrandMoment-module_success__v503M",
+  "warning": "BrandMoment-module_warning__dWih8",
   "container": "BrandMoment-module_container__4ORHI",
   "header": "BrandMoment-module_header__EAP5Q",
   "main": "BrandMoment-module_main__cdWko",

package/dist/cjs/Card/Card.cjs

@@ -20,15 +20,16 @@ var Card = function (_a) {
   var children = _a.children,
     _b = _a.tag,
     tag = _b === void 0 ? "div" : _b,
-    _c = _a.variant,
-    variant = _c === void 0 ? "default" : _c,
+    variant = _a.variant,
+    _c = _a.color,
+    color = _c === void 0 ? "white" : _c,
     _d = _a.isElevated,
     isElevated = _d === void 0 ? false : _d,
     classNameOverride = _a.classNameOverride,
-    props = tslib.__rest(_a, ["children", "tag", "variant", "isElevated", "classNameOverride"]);
-  var Tag = tag;
-  return React__default.default.createElement(Tag, tslib.__assign({
-    className: classnames__default.default(Card_module.wrapper, Card_module[variant], classNameOverride, isElevated && Card_module.elevated)
+    props = tslib.__rest(_a, ["children", "tag", "variant", "color", "isElevated", "classNameOverride"]);
+  var Element = tag;
+  return React__default.default.createElement(Element, tslib.__assign({
+    className: classnames__default.default(Card_module.wrapper, variant ? Card_module[variant] : Card_module[color], classNameOverride, isElevated && Card_module.elevated)
   }, props), children);
 };
 Card.displayName = "Card";

package/dist/cjs/Card/Card.module.scss.cjs

@@ -2,13 +2,21 @@
 
 var styles = {
   "wrapper": "Card-module_wrapper__h5MUx",
+  "elevated": "Card-module_elevated__m7z8s",
+  "blue": "Card-module_blue__3-ogH",
+  "gray": "Card-module_gray__laFe8",
+  "green": "Card-module_green__FOeLt",
+  "orange": "Card-module_orange__hIZPr",
+  "purple": "Card-module_purple__7tEwm",
+  "red": "Card-module_red__e6deN",
+  "white": "Card-module_white__HD1ph",
+  "yellow": "Card-module_yellow__j4aX-",
   "default": "Card-module_default__MzW74",
   "informative": "Card-module_informative__4yRSy",
   "positive": "Card-module_positive__KvUqp",
   "cautionary": "Card-module_cautionary__iMWR-",
   "destructive": "Card-module_destructive__9wC8X",
   "assertive": "Card-module_assertive__6d1GM",
-  "highlight": "Card-module_highlight__2GSL-",
-  "elevated": "Card-module_elevated__m7z8s"
+  "highlight": "Card-module_highlight__2GSL-"
 };
 module.exports = styles;