@kaizen/components 0.0.0-canary-button-codemod-canary-20250212054517 → 0.0.0-canary-stacking-context-fix-20250225001220

package/bin/codemod.sh

@@ -31,8 +31,6 @@ echo ""
 
 if npx tsx@latest $CODEMOD_PATH $TARGET_DIR; then
   echo "Codemod '$codemodFileName' completed successfully in directory '$transformDir'"
-  echo "---"
-  echo "Run linting and prettier to correct issues with re-writes"
 else
   echo "Codemod '$codemodFileName' could not be run in '$TARGET_DIR'"
   exit 1

package/codemods/README.md

@@ -103,51 +103,6 @@ Released in `1.60.0`
 
 Removes `Popover` component props `variant` and `customIcon`.
 
-### `upgradeV1Buttons`
-
-Released in `TBC`
-
-Migrates `Button` and `IconButton` component to `Button` V3 or `LinkButton`.
-
-#### Props
-
-- `label` becomes `children`
-  - eg. `<IconButton label="Hello" />` becomes `<Button>Hello</Button>`
-- `onClick` becomes `onPress`
-- Variants:
-  - Default (undefined):
-    - For `Button` becomes `variant="secondary"`
-    - For `IconButton` becomes `variant="tertiary"`
-  - `primary` becomes `variant="primary"`
-  - `secondary` becomes `variant="tertiary"`
-  - `destructive` will be removed (no longer available as a variant)
-- Sizes:
-  - Default (undefined) becomes `large`
-  - `small` becomes `medium`
-  - `regular` becomes `large`
-- `reversed` becomes `isReversed`
-- `classNameOverride` becomes `className`
-- `data-automation-id` becomes `data-testid`
-- `disabled` becomes `isDisabled`
-- `newTabAndIUnderstandTheAccessibilityImplications` becomes `target="_blank"`
-  - `rel="noopener noreferrer"` is also added
-- `component` will not be removed by the codemod, but will throw a TypeScript error as the prop itself no longer exists
-- For `IconButton` only:
-  - `hasHiddenLabel` will be added
-
-#### Component transformation
-
-- `Button`/`IconButton` without the `href` or `component` prop will become `Button` V3
-- `Button`/`IconButton` with the `href` prop will become `LinkButton`
-- `Button`/`IconButton` with the `component` prop will become `LinkButton`
-
-#### Imports
-
-All imports of V1 Buttons will now point to either:
-
-- `@kaizen/components/v3/actions` for `Button`
-- `@kaizen/components` for `LinkButton`
-
 ### `upgradeIconV1`
 
 Released in `1.67.0`; last updated in `1.68.1`

package/codemods/utils/createProp.spec.ts

@@ -1,88 +1,32 @@
 import ts from 'typescript'
 import { parseJsx } from '../__tests__/utils/parseJsx'
-import { createProp, createStyleProp } from './createProp'
+import { createStyleProp } from './createProp'
 import { printAst } from './printAst'
 import { transformSource, type TransformSourceArgs } from './transformSource'
 import { updateJsxElementWithNewProps } from './updateJsxElementWithNewProps'
 
-export const mockTransformer: ts.TransformerFactory<ts.SourceFile> = (context) => (rootNode) => {
+export const mockedTransformer: ts.TransformerFactory<ts.SourceFile> = (context) => (rootNode) => {
   const visit = (node: ts.Node): ts.Node => {
     if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
-      const newAttributes = node.attributes.properties.map((attr) => {
-        if (ts.isJsxAttribute(attr)) {
-          return createProp(`${attr.name.getText()}New`, attr.initializer)
-        }
-        return attr
-      })
-      return updateJsxElementWithNewProps(node, newAttributes)
-    }
-    return ts.visitEachChild(node, visit, context)
-  }
-  return ts.visitNode(rootNode, visit) as ts.SourceFile
-}
-
-const testCreateProp = (sourceFile: TransformSourceArgs['sourceFile']): string =>
-  transformSource({
-    sourceFile,
-    transformers: [mockTransformer],
-  })
-
-describe('createProp()', () => {
-  it('creates a prop with the pre-existing value', () => {
-    const inputAst = parseJsx('<Pancakes isBoolean={false} />')
-    const outputAst = parseJsx('<Pancakes isBooleanNew={false} />')
-    expect(testCreateProp(inputAst)).toEqual(printAst(outputAst))
-  })
+      if (node.tagName.getText() === 'Pancakes') {
+        const newAttributes = node.attributes.properties.map((attr) => {
+          if (ts.isJsxAttribute(attr)) {
+            if (attr.name.getText() === 'replaceWithExistingValue') {
+              return createStyleProp({ width: attr.initializer! })
+            }
 
-  it('creates a prop and transforms true to undefined', () => {
-    const inputAst = parseJsx(`
-      export const TestComponent = () => (
-        <>
-          <Pancakes isBoolean />
-          <Pancakes isBoolean={false} />
-          <Pancakes stringProp="Hello" />
-          <Pancakes stringVarProp={stringVar} />
-          <Pancakes numberProp={3} />
-          <Pancakes objProp={{ key: 'value' }} />
-        </>
-      )
-    `)
-    const outputAst = parseJsx(`
-      export const TestComponent = () => (
-        <>
-          <Pancakes isBooleanNew />
-          <Pancakes isBooleanNew={false} />
-          <Pancakes stringPropNew="Hello" />
-          <Pancakes stringVarPropNew={stringVar} />
-          <Pancakes numberPropNew={3} />
-          <Pancakes objPropNew={{ key: 'value' }} />
-        </>
-      )
-    `)
-    expect(testCreateProp(inputAst)).toEqual(printAst(outputAst))
-  })
-})
-
-export const styleTransformer: ts.TransformerFactory<ts.SourceFile> = (context) => (rootNode) => {
-  const visit = (node: ts.Node): ts.Node => {
-    if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
-      const newAttributes = node.attributes.properties.map((attr) => {
-        if (ts.isJsxAttribute(attr)) {
-          if (attr.name.getText() === 'replaceWithExistingValue') {
-            return createStyleProp({ width: attr.initializer! })
-          }
-
-          if (attr.name.getText() === 'replaceWithStringValue') {
-            return createStyleProp({ width: '100px' })
-          }
+            if (attr.name.getText() === 'replaceWithStringValue') {
+              return createStyleProp({ width: '100px' })
+            }
 
-          if (attr.name.getText() === 'replaceWithNumberValue') {
-            return createStyleProp({ width: 100 })
+            if (attr.name.getText() === 'replaceWithNumberValue') {
+              return createStyleProp({ width: 100 })
+            }
           }
-        }
-        return attr
-      })
-      return updateJsxElementWithNewProps(node, newAttributes)
+          return attr
+        })
+        return updateJsxElementWithNewProps(node, newAttributes)
+      }
     }
     return ts.visitEachChild(node, visit, context)
   }
@@ -92,7 +36,7 @@ export const styleTransformer: ts.TransformerFactory<ts.SourceFile> = (context)
 const testCreateStyleProp = (sourceFile: TransformSourceArgs['sourceFile']): string =>
   transformSource({
     sourceFile,
-    transformers: [styleTransformer],
+    transformers: [mockedTransformer],
   })
 
 describe('createStyleProp()', () => {

package/codemods/utils/createProp.ts

@@ -3,14 +3,7 @@ import ts from 'typescript'
 export const createProp = (
   name: string,
   value?: ts.JsxAttributeValue | undefined,
-): ts.JsxAttribute => {
-  // Transforms `propName={true}` to `propName`
-  if (value && ts.isJsxExpression(value) && value.expression?.kind === ts.SyntaxKind.TrueKeyword) {
-    return ts.factory.createJsxAttribute(ts.factory.createIdentifier(name), undefined)
-  }
-
-  return ts.factory.createJsxAttribute(ts.factory.createIdentifier(name), value)
-}
+): ts.JsxAttribute => ts.factory.createJsxAttribute(ts.factory.createIdentifier(name), value)
 
 export const createStringProp = (name: string, value: string): ts.JsxAttribute =>
   createProp(name, ts.factory.createStringLiteral(value))

package/codemods/utils/getKaioTagName.ts

@@ -5,17 +5,10 @@ type ImportModuleNamedImports = {
   namedImports: ts.NodeArray<ts.ImportSpecifier>
 }
 
-const getKaioNamedImports = (
-  visitedNode: ts.Node,
-  importSource?: string,
-): ImportModuleNamedImports | undefined => {
+const getKaioNamedImports = (visitedNode: ts.Node): ImportModuleNamedImports | undefined => {
   if (ts.isImportDeclaration(visitedNode)) {
     const moduleSpecifier = (visitedNode.moduleSpecifier as ts.StringLiteral).text
-    const hasMatch = importSource
-      ? moduleSpecifier === importSource
-      : moduleSpecifier.includes('@kaizen/components')
-
-    if (hasMatch) {
+    if (moduleSpecifier.includes('@kaizen/components')) {
       const namedBindings = visitedNode.importClause?.namedBindings
       if (namedBindings && ts.isNamedImports(namedBindings)) {
         return {
@@ -49,13 +42,12 @@ const getNamesFromSpecifier = (importSpecifier: ts.ImportSpecifier): ImportSpeci
  */
 export const getKaioTagName = (
   node: ts.Node,
-  componentName: string,
-  importSource?: string,
+  importSpecifierTarget: string,
 ): string | undefined => {
   let alias: string | undefined
 
   const visitNode = (visitedNode: ts.Node): string | undefined => {
-    const kaioNamedImports = getKaioNamedImports(visitedNode, importSource)
+    const kaioNamedImports = getKaioNamedImports(visitedNode)
 
     if (!kaioNamedImports) {
       return ts.forEachChild(visitedNode, visitNode)
@@ -64,7 +56,7 @@ export const getKaioTagName = (
     kaioNamedImports.namedImports.find((importSpecifier) => {
       const { tagName, originalName } = getNamesFromSpecifier(importSpecifier)
 
-      if (originalName === componentName) {
+      if (originalName === importSpecifierTarget) {
         alias = tagName
         return true
       }

package/codemods/utils/index.ts

@@ -1,4 +1,3 @@
-export * from './createJsxElementWithChildren'
 export * from './createProp'
 export * from './getPropValueText'
 export * from './getKaioTagName'

package/dist/cjs/Filter/FilterBar/subcomponents/FilterBarButton/FilterBarButton.cjs

@@ -4,6 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
 var FilterBarContext = require('../../context/FilterBarContext.cjs');
+require('../../../FilterButton/subcomponents/FilterButtonBase/FilterButtonBase.cjs');
 var FilterButton = require('../../../FilterButton/FilterButton/FilterButton.cjs');
 var FilterButtonRemovable = require('../../../FilterButton/FilterButtonRemovable/FilterButtonRemovable.cjs');
 var isRefObject = require('../../../../utils/isRefObject.cjs');

package/dist/cjs/Filter/FilterMultiSelect/subcomponents/Trigger/FilterTriggerButton/FilterTriggerButton.cjs

@@ -2,6 +2,7 @@
 
 var tslib = require('tslib');
 var React = require('react');
+require('../../../../FilterButton/subcomponents/FilterButtonBase/FilterButtonBase.cjs');
 var FilterButton = require('../../../../FilterButton/FilterButton/FilterButton.cjs');
 require('../../../../FilterButton/FilterButtonRemovable/FilterButtonRemovable.cjs');
 var MenuTriggerProvider = require('../../../context/MenuTriggerProvider/MenuTriggerProvider.cjs');

package/dist/cjs/Filter/FilterMultiSelect/subcomponents/Trigger/RemovableFilterTrigger/RemovableFilterTrigger.cjs

@@ -3,6 +3,7 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
+require('../../../../FilterButton/subcomponents/FilterButtonBase/FilterButtonBase.cjs');
 require('../../../../FilterButton/FilterButton/FilterButton.cjs');
 var FilterButtonRemovable = require('../../../../FilterButton/FilterButtonRemovable/FilterButtonRemovable.cjs');
 var MenuTriggerProvider = require('../../../context/MenuTriggerProvider/MenuTriggerProvider.cjs');

package/dist/cjs/index.cjs

@@ -47,6 +47,7 @@ var Filter = require('./Filter/Filter/Filter.cjs');
 var FilterContents = require('./Filter/Filter/subcomponents/FilterContents/FilterContents.cjs');
 var FilterBar = require('./Filter/FilterBar/FilterBar.cjs');
 var FilterBarContext = require('./Filter/FilterBar/context/FilterBarContext.cjs');
+var FilterButtonBase = require('./Filter/FilterButton/subcomponents/FilterButtonBase/FilterButtonBase.cjs');
 var FilterButton = require('./Filter/FilterButton/FilterButton/FilterButton.cjs');
 var FilterButtonRemovable = require('./Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.cjs');
 var FilterDatePicker = require('./Filter/FilterDatePicker/FilterDatePicker.cjs');
@@ -488,6 +489,7 @@ exports.FilterContents = FilterContents.FilterContents;
 exports.FilterBar = FilterBar.FilterBar;
 exports.FilterBarProvider = FilterBarContext.FilterBarProvider;
 exports.useFilterBarContext = FilterBarContext.useFilterBarContext;
+exports.FilterButtonBase = FilterButtonBase.FilterButtonBase;
 exports.FilterButton = FilterButton.FilterButton;
 exports.FilterButtonRemovable = FilterButtonRemovable.FilterButtonRemovable;
 exports.FilterDatePicker = FilterDatePicker.FilterDatePicker;

package/dist/esm/Filter/FilterBar/subcomponents/FilterBarButton/FilterBarButton.mjs

@@ -2,6 +2,7 @@ import { __rest, __assign } from 'tslib';
 import React, { forwardRef, useEffect } from 'react';
 import classnames from 'classnames';
 import { useFilterBarContext } from '../../context/FilterBarContext.mjs';
+import '../../../FilterButton/subcomponents/FilterButtonBase/FilterButtonBase.mjs';
 import { FilterButton } from '../../../FilterButton/FilterButton/FilterButton.mjs';
 import { FilterButtonRemovable } from '../../../FilterButton/FilterButtonRemovable/FilterButtonRemovable.mjs';
 import { isRefObject } from '../../../../utils/isRefObject.mjs';

package/dist/esm/Filter/FilterMultiSelect/subcomponents/Trigger/FilterTriggerButton/FilterTriggerButton.mjs

@@ -1,5 +1,6 @@
 import { __assign } from 'tslib';
 import React, { useRef } from 'react';
+import '../../../../FilterButton/subcomponents/FilterButtonBase/FilterButtonBase.mjs';
 import { FilterButton } from '../../../../FilterButton/FilterButton/FilterButton.mjs';
 import '../../../../FilterButton/FilterButtonRemovable/FilterButtonRemovable.mjs';
 import { useMenuTriggerContext } from '../../../context/MenuTriggerProvider/MenuTriggerProvider.mjs';

package/dist/esm/Filter/FilterMultiSelect/subcomponents/Trigger/RemovableFilterTrigger/RemovableFilterTrigger.mjs

@@ -1,6 +1,7 @@
 import { __assign } from 'tslib';
 import React, { useRef } from 'react';
 import classnames from 'classnames';
+import '../../../../FilterButton/subcomponents/FilterButtonBase/FilterButtonBase.mjs';
 import '../../../../FilterButton/FilterButton/FilterButton.mjs';
 import { FilterButtonRemovable } from '../../../../FilterButton/FilterButtonRemovable/FilterButtonRemovable.mjs';
 import { useMenuTriggerContext } from '../../../context/MenuTriggerProvider/MenuTriggerProvider.mjs';

package/dist/esm/index.mjs

@@ -45,6 +45,7 @@ export { Filter } from './Filter/Filter/Filter.mjs';
 export { FilterContents } from './Filter/Filter/subcomponents/FilterContents/FilterContents.mjs';
 export { FilterBar } from './Filter/FilterBar/FilterBar.mjs';
 export { FilterBarProvider, useFilterBarContext } from './Filter/FilterBar/context/FilterBarContext.mjs';
+export { FilterButtonBase } from './Filter/FilterButton/subcomponents/FilterButtonBase/FilterButtonBase.mjs';
 export { FilterButton } from './Filter/FilterButton/FilterButton/FilterButton.mjs';
 export { FilterButtonRemovable } from './Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.mjs';
 export { FilterDatePicker } from './Filter/FilterDatePicker/FilterDatePicker.mjs';