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

package/codemods/upgradeV1Buttons/upgradeV1Buttons.ts

@@ -1,93 +0,0 @@
-import ts from 'typescript'
-import {
-  createJsxElementWithChildren,
-  getKaioTagName,
-  setImportToAdd,
-  setImportToRemove,
-  updateKaioImports,
-  type TagImportAttributesMap,
-  type UpdateKaioImportsArgs,
-} from '../utils'
-import { transformV1ButtonAttributes } from './transformV1ButtonAttributes'
-
-const V1_BUTTONS = ['Button', 'IconButton']
-const V1_BUTTONS_IMPORT_SOURCE = [
-  '@kaizen/components',
-  '@kaizen/components/v1/actions',
-  '@kaizen/components/v2/actions',
-]
-const BUTTON_IMPORT_DESTINATION = '@kaizen/components/v3/actions'
-const LINKBUTTON_IMPORT_DESTINATION = '@kaizen/components'
-
-export const upgradeV1Buttons =
-  (tagsMap: TagImportAttributesMap): ts.TransformerFactory<ts.SourceFile> =>
-  (context) =>
-  (rootNode) => {
-    const importsToRemove: UpdateKaioImportsArgs['importsToRemove'] = new Map()
-    const importsToAdd: UpdateKaioImportsArgs['importsToAdd'] = new Map()
-
-    const importedTargetButtonTagName = getKaioTagName(
-      rootNode,
-      'Button',
-      BUTTON_IMPORT_DESTINATION,
-    )
-
-    const importedTargetLinkButtonTagName = getKaioTagName(
-      rootNode,
-      'LinkButton',
-      LINKBUTTON_IMPORT_DESTINATION,
-    )
-
-    const visit = (node: ts.Node): ts.Node => {
-      if (ts.isJsxSelfClosingElement(node)) {
-        const tagName = node.tagName.getText()
-        const tagImportAttributes = tagsMap.get(tagName)
-
-        if (!tagImportAttributes) return node
-
-        if (!V1_BUTTONS.includes(tagImportAttributes.originalName)) return node
-        if (!V1_BUTTONS_IMPORT_SOURCE.includes(tagImportAttributes.importModuleName)) return node
-
-        const { targetComponentName, newAttributes, childrenValue } = transformV1ButtonAttributes(
-          node,
-          tagImportAttributes.originalName,
-        )
-
-        const targetTagName =
-          targetComponentName === 'Button'
-            ? (importedTargetButtonTagName ?? 'Button')
-            : (importedTargetLinkButtonTagName ?? 'LinkButton')
-
-        setImportToRemove(
-          importsToRemove,
-          tagImportAttributes.importModuleName,
-          tagImportAttributes.originalName,
-        )
-
-        if (targetComponentName === 'Button' && !importedTargetButtonTagName) {
-          setImportToAdd(importsToAdd, BUTTON_IMPORT_DESTINATION, {
-            componentName: 'Button',
-            alias:
-              importedTargetButtonTagName !== 'Button' ? importedTargetButtonTagName : undefined,
-          })
-        }
-
-        if (targetComponentName === 'LinkButton' && !importedTargetLinkButtonTagName) {
-          setImportToAdd(importsToAdd, LINKBUTTON_IMPORT_DESTINATION, {
-            componentName: 'LinkButton',
-            alias:
-              importedTargetLinkButtonTagName !== 'LinkButton'
-                ? importedTargetLinkButtonTagName
-                : undefined,
-          })
-        }
-
-        return createJsxElementWithChildren(targetTagName, newAttributes, childrenValue)
-      }
-      return ts.visitEachChild(node, visit, context)
-    }
-
-    const node = ts.visitNode(rootNode, visit)
-
-    return updateKaioImports({ importsToRemove, importsToAdd })(context)(node as ts.SourceFile)
-  }

package/codemods/utils/createJsxElementWithChildren.spec.ts

@@ -1,119 +0,0 @@
-import ts from 'typescript'
-import { parseJsx } from '../__tests__/utils'
-import { createJsxElementWithChildren } from './createJsxElementWithChildren'
-import { printAst } from './printAst'
-import { transformSource, type TransformSourceArgs } from './transformSource'
-
-export const mockedTransformer: ts.TransformerFactory<ts.SourceFile> = (context) => (rootNode) => {
-  const visit = (node: ts.Node): ts.Node => {
-    let childrenValue: ts.JsxAttributeValue | undefined
-
-    if (ts.isJsxSelfClosingElement(node)) {
-      const tagName = node.tagName.getText()
-      const attributes = node.attributes.properties.reduce<ts.JsxAttributeLike[]>((acc, attr) => {
-        if (ts.isJsxAttribute(attr) && attr.name.getText() === 'toChildren') {
-          childrenValue = attr.initializer
-          return acc
-        }
-
-        acc.push(attr)
-        return acc
-      }, [])
-
-      return createJsxElementWithChildren(tagName, attributes, childrenValue)
-    }
-    return ts.visitEachChild(node, visit, context)
-  }
-  return ts.visitNode(rootNode, visit) as ts.SourceFile
-}
-
-const testCreateJsxElementWithChildren = (sourceFile: TransformSourceArgs['sourceFile']): string =>
-  transformSource({ sourceFile, transformers: [mockedTransformer] })
-
-describe('createJsxElementWithChildren()', () => {
-  it('transforms a string value', () => {
-    const inputAst = parseJsx('<Button toChildren="Hello" variant="primary" />')
-    const outputAst = parseJsx('<Button variant="primary">Hello</Button>')
-    expect(testCreateJsxElementWithChildren(inputAst)).toEqual(printAst(outputAst))
-  })
-
-  it('transforms a string in brackets', () => {
-    const inputAst = parseJsx(`
-      <>
-        <Button toChildren={"Double quotes"} variant="primary" />
-        <Button toChildren={'Single quotes'} variant="primary" />
-      </>
-    `)
-    const outputAst = parseJsx(`
-      <>
-        <Button variant="primary">Double quotes</Button>
-        <Button variant="primary">Single quotes</Button>
-      </>
-    `)
-    // const outputAst = parseJsx('<Button variant="primary">Hello</Button>')
-    expect(testCreateJsxElementWithChildren(inputAst)).toEqual(printAst(outputAst))
-  })
-
-  it('transforms a string with comments in brackets', () => {
-    const inputAst = parseJsx(`<Button
-      toChildren={
-        "Hello" // comment
-      }
-      variant="primary" />
-    `)
-    const outputAst = parseJsx(`<Button variant="primary">{
-      "Hello" // comment
-    }</Button>`)
-    expect(testCreateJsxElementWithChildren(inputAst)).toEqual(printAst(outputAst))
-  })
-
-  it('transforms a template literal with variables', () => {
-    /* eslint-disable no-template-curly-in-string */
-    const inputAst = parseJsx('<Button toChildren={`Hello ${name}`} variant="primary" />')
-    const outputAst = parseJsx('<Button variant="primary">{`Hello ${name}`}</Button>')
-    /* eslint-enable no-template-curly-in-string */
-    expect(testCreateJsxElementWithChildren(inputAst)).toEqual(printAst(outputAst))
-  })
-
-  it('transforms a variable', () => {
-    const inputAst = parseJsx('<Button toChildren={childrenVar} variant="primary" />')
-    const outputAst = parseJsx('<Button variant="primary">{childrenVar}</Button>')
-    expect(testCreateJsxElementWithChildren(inputAst)).toEqual(printAst(outputAst))
-  })
-
-  it('transforms a ternary', () => {
-    const inputAst = parseJsx(
-      '<Button toChildren={isPancake ? "Pancake" : "Waffle"} variant="primary" />',
-    )
-    const outputAst = parseJsx(
-      '<Button variant="primary">{isPancake ? "Pancake" : "Waffle"}</Button>',
-    )
-    expect(testCreateJsxElementWithChildren(inputAst)).toEqual(printAst(outputAst))
-  })
-
-  it('transforms a JSX element', () => {
-    const inputAst = parseJsx('<Button toChildren={<span>Hello</span>} variant="primary" />')
-    const outputAst = parseJsx('<Button variant="primary"><span>Hello</span></Button>')
-    expect(testCreateJsxElementWithChildren(inputAst)).toEqual(printAst(outputAst))
-  })
-
-  it('transforms a JSX self-closing element', () => {
-    const inputAst = parseJsx('<Button toChildren={<Icon />} variant="primary" />')
-    const outputAst = parseJsx('<Button variant="primary"><Icon /></Button>')
-    expect(testCreateJsxElementWithChildren(inputAst)).toEqual(printAst(outputAst))
-  })
-
-  it('transforms a JSX fragment', () => {
-    const inputAst = parseJsx('<Button toChildren={<>Hello</>} variant="primary" />')
-    const outputAst = parseJsx('<Button variant="primary"><>Hello</></Button>')
-    expect(testCreateJsxElementWithChildren(inputAst)).toEqual(printAst(outputAst))
-  })
-
-  it('adds a comment if no value for children has been passed in', () => {
-    const inputAst = parseJsx('<Button variant="primary" />')
-    const outputAst = parseJsx(`<Button variant="primary">
-/* @todo Children required but a value was not found during the codemod */
-</Button>`)
-    expect(testCreateJsxElementWithChildren(inputAst)).toEqual(printAst(outputAst))
-  })
-})

package/codemods/utils/createJsxElementWithChildren.ts

@@ -1,55 +0,0 @@
-import ts from 'typescript'
-
-const createJsxChildren = (childrenValue: ts.JsxAttributeValue): ts.JsxChild => {
-  if (ts.isStringLiteral(childrenValue)) {
-    return ts.factory.createJsxText(childrenValue.text)
-  }
-
-  if (ts.isJsxExpression(childrenValue)) {
-    const value = childrenValue.expression
-
-    if (value) {
-      if (ts.isStringLiteral(value)) {
-        // Tests for {"string"}, {'string'}
-        const regexExpContainsOnlyQuotedString = new RegExp(/^\{(["']).*(\1)\}$/g)
-
-        if (regexExpContainsOnlyQuotedString.test(childrenValue.getFullText())) {
-          return ts.factory.createJsxText(value.text)
-        }
-      }
-
-      if (ts.isJsxElement(value) || ts.isJsxSelfClosingElement(value) || ts.isJsxFragment(value)) {
-        return value
-      }
-    }
-
-    return childrenValue
-  }
-
-  return childrenValue
-}
-
-/**
- * Use this to replace a self-closing JSX element to a JSX element with children
- */
-export const createJsxElementWithChildren = (
-  tagName: string,
-  attributes: ts.JsxAttributeLike[],
-  childrenValue: ts.JsxAttributeValue | undefined,
-): ts.JsxElement => {
-  const tagNameId = ts.factory.createIdentifier(tagName)
-  const fallbackChildren = [
-    ts.factory.createJsxText('\n'),
-    ts.factory.createJsxText(
-      '/* @todo Children required but a value was not found during the codemod */',
-    ),
-    ts.factory.createJsxText('\n'),
-  ]
-  const children = childrenValue ? [createJsxChildren(childrenValue)] : fallbackChildren
-
-  return ts.factory.createJsxElement(
-    ts.factory.createJsxOpeningElement(tagNameId, [], ts.factory.createJsxAttributes(attributes)),
-    children,
-    ts.factory.createJsxClosingElement(tagNameId),
-  )
-}

package/src/__rc__/Button/_docs/Button--migration-guide.mdx

@@ -1,58 +0,0 @@
-import { Canvas, Meta, Controls, Story } from '@storybook/blocks'
-import { ResourceLinks, KAIOInstallation } from '~storybook/components'
-
-<Meta title="Components/Button/Button (v3)/Migration Guide" />
-
-# Button Migration Guide
-
-This is a short guide to assist in migration from the old to new `Button` and `LinkButton` component.
-
-## Key API differences
-
-Below is a list of notable changes when migrating to the new `Button` and `LinkButton` component:
-
-- `label` is now handled as `Children` and does not have a specific prop.
-- Variants, such as `primary` and `secondary`, are now controlled as by the single `variant` prop.
-- `onClick` and other event handlers now reflect the RAC event ecosystems, ie: `onPress`.
-  - You can see more about the RAC event ecosystem [here](https://react-spectrum.adobe.com/react-aria/Button.html#events).
-- `Button` and `LinkButton` now exist as separate components.
-  - The intent is to more closely align to the semantic roles of an anchor or button and should be used accordingly.
-- `LinkButton` handles native navigation via `href` out of the box but additional config can be used to allow for client side routing - [see here](/docs/components-linkbutton-api-specification--docs#client-side-routing).
-  - `onPress` can still be used in place of `onClick` for pushing to routers.
-- `IconButton` has been superseded by icon props and the [icon-only pattern](/docs/components-button-button-v3-api-specification--docs#icon-only-button-and-hashiddenlabel).
-- `working` props has been updated to `pending` to better reflect the state of the button.
-- `badge` prop has been removed and should be handled within the `Children` where required.
-- `size` props have been adjusted to include `small`, `medium` and `large`.
-- Styles have been consolidate to align with modern designs and variants like `destructive` have been removed.
-  - The codemod will remap these to the relative variants.
-- Reversed styles should be handled by the `ReversedColors` Provider but for ease of migration can use the `isReversed` prop.
-
-## Codemod
-
-To assist in migration we have created the `upgradeV1Buttons` codemod.
-
-This will loop through the given directory and update all instances of Button to the latest implementation. You can refer to this [README](https://github.com/cultureamp/kaizen-design-system/blob/main/packages/components/codemods/README.md#kaizen-codemods) on how to run kaizen codemods using the CLI within your repository, ie:
-
-```bash
-pnpm kaizen-codemod src upgradeV1Buttons
-```
-
-### Pre-requisites
-
-It is also recommended that the `upgradeIconV1` codemod is run before `upgradeV1Buttons` to ensure that all icons are updated to the new `Icon` component that uses the Material icons CDN. Seem more about this [here](/docs/components-icon-icon-future-api-specification--docs#set-up).
-
-### Potential gotchas
-
-If you're facing any issues not captured below, reach out to the [#help_design_system](https://cultureamp.slack.com/archives/C0189KBPM4Y) channel on Slack.
-
-### `icon` props and sizing
-
-While the `icon` prop supports any `JSX` element, only the latest [Icon component](/docs/components-icon-icon-future-api-specification--docs) will be able to handle relative sizing and spacing automatically within the Button. We recommend running the `upgradeIconV1` codemod before this to convert all icons to the latest implementation. See the guidance here on using the [Material Icons CDN](/docs/guides-app-starter--docs#5-link-to-google-material-symbols-cdn).
-
-### `component` render props and intentional type errors
-
-Based off Metabase queries, `component` render props is used in consuming repositories to wrap Button content with a routing solution, such as NextJS's `Link` component. To ensure a safe migration, the codemod will update any usages to a `LinkButton` with the `component` prop still passed in. This will cause an intentional type error to provide feedback and make it easier to find in the codebase for a manual update. This should be able to be converted to use client side routing by following the [LinkButton API docs](https://cultureamp.design/?path=/docs/components-linkbutton-api-specification--docs).
-
-## More information
-
-For more information on the about each of the new API's, we recommend referring the [Button](/docs/components-button-button-v3-api-specification--docs) or [LinkButton](/docs/components-linkbutton-api-specification--docs) API specifications.