@instructure/ui-codemods 10.20.2-snapshot-11 → 10.20.2-snapshot-12

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.20.2-snapshot-11](https://github.com/instructure/instructure-ui/compare/v10.20.1...v10.20.2-snapshot-11) (2025-06-25)
+## [10.20.2-snapshot-12](https://github.com/instructure/instructure-ui/compare/v10.20.1...v10.20.2-snapshot-12) (2025-06-25)
 
 **Note:** Version bump only for package @instructure/ui-codemods
 

package/README.md

@@ -4,7 +4,7 @@ category: packages
 
 ## ui-codemods
 
-The ui-codemods package should make it easier to deal with API changes when upgrading Instructure UI libraries.
+The `ui-codemods` package should make it easier to deal with API changes when upgrading Instructure UI libraries.
 
 [![npm][npm]][npm-url]
 [![MIT License][license-badge]][license]
@@ -18,102 +18,20 @@ The codemod scripts can be installed via the following command:
 ---
 type: code
 ---
-npm install @instructure/ui-codemods
+# use here the InstUI version number you are upgrading to
+npm install @instructure/ui-codemods@10
 ```
 
-The configuration files are located in the [instui-config](#instui-config) package.
-This can be installed via the following command:
-
-```sh
----
-type: code
----
-npm install @instructure/instui-config
-```
-
-### Updating Deprecated Props
-
-This codemod helps you update your project by renaming `props` that have had names changed (e.g., `onReady` => `onOpen`).
-
-```sh
----
-type: code
----
-jscodeshift -t node_modules/@instructure/ui-codemods/lib/updatePropNames.ts <path> --config=node_modules/@instructure/instui-config/codemod-configs/v<version number ex. 5 or 6>/propNames.config.json
-```
-
-### Updating Package Imports
-
-This codemod helps you update your project by renaming `imports` that have changed (e.g., `instructure-ui` => `@instructure/<package name>`).
-
-```sh
----
-type: code
----
-jscodeshift -t node_modules/@instructure/ui-codemods/lib/updateImports.ts <path> --config=node_modules/@instructure/instui-config/codemod-configs/v<version number ex. 5 or 6>/imports.config.js
-```
-
-### Updating more complex props to the InstUI v8 syntax
-
-This codemod upgrades more complex changes like Button, also outputs any manual changes needed to the console. Run this in a InstUI v7 codebase only. This command has an optional fileName parameter, supplying this will append to the given file the warnings.
-
-```sh
----
-type: code
----
-jscodeshift -t node_modules/@instructure/ui-codemods/lib/updateV7Props.ts <path> -fileName updateV7PropsWarnings.txt
-```
-
-### Codemod for breaking changes after updating the dependencies to V8
-
-```sh
----
-type: code
----
-jscodeshift -t node_modules/@instructure/ui-codemods/lib/updateV8Breaking.ts <path>
-```
-
-This codemod updates breaking changes after a v8 upgrade. Run this in a project after you have upgraded your dependencies to InstUI v8.
-
-### Codemod for breaking changes after updating the dependencies to V9
-
-```sh
----
-type: code
----
-jscodeshift -t node_modules/@instructure/ui-codemods/lib/updateV9Breaking.ts <path> --parser=tsx --usePrettier=false
-```
-
-This codemod addresses breaking changes following a v9 upgrade. Notably, it updates `EmotionThemeProvider` to `InstUISettingsProvider`. Execute this in your project post-upgrade to InstUI v9. Prettier is turned on by default for output formatting, and you can also use the `usePrettier` flag. Additionally, the parser flag can specify the parser for jsx and tsx files.
-
 ### Codemod for changing the color palette to the v10 color palette
 
 ```sh
 ---
 type: code
 ---
-jscodeshift -t node_modules/@instructure/ui-codemods/lib/updateV10Breaking.ts <path> --parser=tsx --usePrettier=false
-```
-
-This codemod updates the `canvas` and `canvas-high-contrast` color palettes. Execute this in your project post-upgrade to InstUI v10. Prettier is turned on by default for output formatting, and you can also use the `usePrettier` flag. Additionally, the parser flag can specify the parser for jsx and tsx files.
-
-### Codemod for adding a wrapper to ReactDOM.render()
-
-```sh
----
-type: code
----
-jscodeshift -t node_modules/@instructure/ui-codemods/lib/updateV8ReactDOM.ts <path> -fileName updateV8ReactDOM.txt
+npx jscodeshift@17.3.0 -t node_modules/@instructure/ui-codemods/lib/updateV10Breaking.ts <path> --usePrettier=false
 ```
 
-This codemod updates ReactDOM.render calls with a given wrapper, for example:
-ReactDOM.render(<div />) -> ReactDOM.render(<Root><div /></Root>).
-Parameters (all optional):
-
-- `fileName`: supplying this will append to the given file the warnings.
-- `wrapperPath`: The import path for the wrapper, default value is '@canvas/react-root'.
-- `wrapperTag`: The tag to wrap render calls in, default is 'Root'.
-- `isDefaultImport`: Is the given tag a default import? Default value is `true`.
+This codemod updates the `canvas` and `canvas-high-contrast` color palettes. Execute this in your project post-upgrade to InstUI v10. Prettier is turned on by default for output formatting, and you can also use the `usePrettier` flag.
 
 [npm]: https://img.shields.io/npm/v/@instructure/ui-codemods.svg
 [npm-url]: https://npmjs.com/package/@instructure/ui-codemods

package/lib/__node_tests__/codemodHelpers.test.tsx

@@ -0,0 +1,455 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import j from 'jscodeshift'
+import {
+  findAttribute,
+  getVisibleChildren,
+  renameElements,
+  findImport,
+  findEveryImport,
+  addImportIfNeeded,
+  replaceImport,
+  removeAllChildren
+} from '../utils/codemodHelpers'
+import { expect } from 'vitest'
+
+describe('test codemod helpers', () => {
+  it('test findAttribute', () => {
+    const data = j(
+      `<>
+        <button id='1234' aloneAttr>asd</button>
+        <button test={false}>asd</button>
+        <test id={asd.gfd}>asd</test>
+        <div {...{id:5}} />
+      </>`
+    )
+    const r = findAttribute('', j, data, 'id')
+    expect(j(r.paths()).toSource()).toEqual(["id='1234'", 'id={asd.gfd}'])
+
+    const r2 = findAttribute('', j, data, 'id', '1234')
+    expect(j(r2.paths()).toSource()).toEqual("id='1234'")
+
+    const r3 = findAttribute('', j, data, 'aloneAttr')
+    expect(j(r3.paths()).toSource()).toEqual('aloneAttr')
+  })
+
+  it('test getVisibleChildren', () => {
+    const data = j(
+      `<button>
+
+        <button id='1234' aloneAttr>asd</button>
+
+      </button>`
+    )
+    const r = getVisibleChildren(
+      data.paths()[0].value.program.body[0].expression.children
+    )
+    expect(j(r).toSource()).toEqual("<button id='1234' aloneAttr>asd</button>")
+  })
+
+  it('test renameElements', () => {
+    // Test simple tag renaming
+    const simpleSource = `<Button id="test">Click me</Button>`
+    let root = j(simpleSource)
+    const buttonElements = root.find(j.JSXElement, {
+      openingElement: {
+        name: {
+          type: 'JSXIdentifier',
+          name: 'Button'
+        }
+      }
+    })
+    renameElements('test.js', buttonElements, 'Button', 'PrimaryButton')
+    expect(root.toSource()).toEqual(
+      `<PrimaryButton id="test">Click me</PrimaryButton>`
+    )
+
+    // Test self-closing tag renaming
+    const selfClosingSource = `<Icon size="small" />`
+    root = j(selfClosingSource)
+    const iconElements = root.find(j.JSXElement, {
+      openingElement: {
+        name: {
+          type: 'JSXIdentifier',
+          name: 'Icon'
+        }
+      }
+    })
+    renameElements('test.js', iconElements, 'Icon', 'SVGIcon')
+    expect(root.toSource()).toEqual(`<SVGIcon size="small" />`)
+
+    // Test compound tag renaming
+    const compoundSource = `<Component.SubItem active={true}>Child</Component.SubItem>`
+    root = j(compoundSource)
+    const compoundElements = root.find(j.JSXElement, {
+      openingElement: {
+        name: {
+          type: 'JSXMemberExpression',
+          object: {
+            name: 'Component'
+          },
+          property: {
+            name: 'SubItem'
+          }
+        }
+      }
+    })
+    renameElements(
+      'test.js',
+      compoundElements,
+      'Component.SubItem',
+      'NewComponent.ListItem'
+    )
+    expect(root.toSource()).toEqual(
+      `<NewComponent.ListItem active={true}>Child</NewComponent.ListItem>`
+    )
+  })
+
+  it('test findImport', () => {
+    // Test standard named import
+    const source = `
+      import { Button } from '@instructure/ui-buttons'
+      import { Text } from '@instructure/ui-text'
+      import React from 'react'
+    `
+    let root = j(source)
+
+    // Find existing import
+    let result = findImport(j, root, 'Button', '@instructure/ui-buttons')
+    expect(result).toEqual('Button')
+
+    // Find import with multiple possible paths
+    result = findImport(j, root, 'Button', [
+      '@instructure/ui-something',
+      '@instructure/ui-buttons'
+    ])
+    expect(result).toEqual('Button')
+
+    // Not existing import
+    result = findImport(j, root, 'Modal', '@instructure/ui-buttons')
+    expect(result).toBeUndefined()
+
+    // Import from wrong path
+    result = findImport(j, root, 'Button', '@instructure/ui-wrong')
+    expect(result).toBeUndefined()
+
+    // Test aliased import
+    const aliasedSource = `
+      import { Button as PrimaryButton } from '@instructure/ui-buttons'
+      import { Text } from '@instructure/ui-text'
+    `
+    root = j(aliasedSource)
+    result = findImport(j, root, 'Button', '@instructure/ui-buttons')
+    expect(result).toEqual('PrimaryButton')
+
+    // Test default import
+    const defaultImportSource = `
+      import DefaultButton from '@instructure/ui-buttons'
+      import { Text } from '@instructure/ui-text'
+    `
+    root = j(defaultImportSource)
+    result = findImport(j, root, 'DefaultButton', '@instructure/ui-buttons')
+    expect(result).toEqual('DefaultButton')
+  })
+
+  it('test findEveryImport', () => {
+    // Test with exactMatch = true (default)
+    const source = `
+      import { Button, IconButton } from '@instructure/ui-buttons'
+      import { Text, Heading } from '@instructure/ui-text'
+      import React from 'react'
+      import { Modal as Dialog } from '@instructure/ui-modal'
+      import DefaultIcon from '@instructure/ui-icons'
+    `
+    const root = j(source)
+
+    // Find imports from exact path
+    let result = findEveryImport(j, root, '@instructure/ui-buttons')
+    expect(result.sort()).toEqual(['Button', 'IconButton'])
+
+    // Renamed imports should return the local name
+    result = findEveryImport(j, root, '@instructure/ui-modal')
+    expect(result).toEqual(['Dialog'])
+
+    // Default imports should be included
+    result = findEveryImport(j, root, '@instructure/ui-icons')
+    expect(result).toEqual(['DefaultIcon'])
+
+    // No imports from a specific path
+    result = findEveryImport(j, root, '@instructure/ui-missing')
+    expect(result).toEqual([])
+
+    // Test with exactMatch = false
+    result = findEveryImport(j, root, '@instructure/ui', false)
+    expect(result.sort()).toEqual([
+      'Button',
+      'DefaultIcon',
+      'Dialog',
+      'Heading',
+      'IconButton',
+      'Text'
+    ])
+
+    // Test with partial path that doesn't match
+    result = findEveryImport(j, root, 'non-existent', false)
+    expect(result).toEqual([])
+  })
+
+  it('test addImportIfNeeded', () => {
+    // Test adding a new import when no imports from the path exist
+    const source = `import { Button } from '@instructure/ui-buttons'
+      import React from 'react'`
+    let root = j(source)
+
+    // Add new import from a new path
+    let result = addImportIfNeeded(j, root, 'Modal', '@instructure/ui-modal')
+    expect(result).toEqual('Modal')
+    expect(root.toSource())
+      .toEqual(`import { Button } from '@instructure/ui-buttons'
+import React from 'react'
+import { Modal } from "@instructure/ui-modal";`)
+
+    // Test adding to existing import statement
+    root = j(source)
+    result = addImportIfNeeded(j, root, 'IconButton', '@instructure/ui-buttons')
+    expect(result).toEqual('IconButton')
+    expect(root.toSource()).toContain(
+      "import { Button, IconButton } from '@instructure/ui-buttons'"
+    )
+
+    // Test adding a default import
+    root = j(source)
+    result = addImportIfNeeded(
+      j,
+      root,
+      'DefaultIcon',
+      '@instructure/ui-icons',
+      true
+    )
+    expect(result).toEqual('DefaultIcon')
+    expect(root.toSource()).toContain(
+      `import DefaultIcon from "@instructure/ui-icons"`
+    )
+
+    // Test not adding an import when it already exists
+    root = j(`
+      import { Button, IconButton } from '@instructure/ui-buttons'
+      import React from 'react'
+    `)
+    result = addImportIfNeeded(j, root, 'Button', '@instructure/ui-buttons')
+    expect(result).toEqual('Button')
+    expect(root.toSource()).toEqual(`
+      import { Button, IconButton } from '@instructure/ui-buttons'
+      import React from 'react'
+    `)
+
+    // Test with multiple possible paths
+    root = j(source)
+    result = addImportIfNeeded(j, root, 'Text', [
+      '@instructure/ui-text',
+      '@instructure/ui-components'
+    ])
+    expect(result).toEqual('Text')
+    expect(root.toSource()).toContain(
+      `import { Text } from "@instructure/ui-text"`
+    )
+
+    root = j(source)
+    result = addImportIfNeeded(j, root, 'Text', [
+      '@instructure/ui-text',
+      '@instructure/ui-buttons'
+    ])
+    expect(result).toEqual('Text')
+    expect(root.toSource()).toContain(
+      `import { Button, Text } from '@instructure/ui-buttons'`
+    )
+    // Test with aliased import
+    const aliasedSource = `
+      import { Button as PrimaryButton } from '@instructure/ui-buttons'
+      import React from 'react'
+    `
+    root = j(aliasedSource)
+    result = addImportIfNeeded(j, root, 'Button', '@instructure/ui-buttons')
+    expect(result).toEqual('PrimaryButton')
+    // No new import should be added since it exists as an alias
+    expect(root.toSource())
+      .toContain(`import { Button as PrimaryButton } from '@instructure/ui-buttons'
+      import React from 'react'`)
+  })
+
+  it('test replaceImport', () => {
+    // Test replacing a named import
+    const source = `
+      import { Button, IconButton } from '@instructure/ui-buttons'
+      import { Text } from '@instructure/ui-text'
+      import React from 'react'
+    `
+    let root = j(source)
+
+    // Replace a simple named import
+    let result = replaceImport(
+      j,
+      root,
+      'Button',
+      'PrimaryButton',
+      '@instructure/ui-buttons'
+    )
+    expect(result).toEqual('PrimaryButton')
+    expect(root.toSource()).toContain(
+      "import { PrimaryButton, IconButton } from '@instructure/ui-buttons'"
+    )
+    expect(root.toSource()).not.toContain(' Button')
+
+    // Test replacing only matches the correct path
+    root = j(source)
+    result = replaceImport(
+      j,
+      root,
+      'Text',
+      'Typography',
+      '@instructure/ui-text'
+    )
+    expect(result).toEqual('Typography')
+    expect(root.toSource()).toEqual(`
+      import { Button, IconButton } from '@instructure/ui-buttons'
+      import { Typography } from '@instructure/ui-text'
+      import React from 'react'
+    `)
+
+    // Test replacing with multiple possible paths
+    root = j(source)
+    result = replaceImport(j, root, 'Text', 'Typography', [
+      '@instructure/ui-something',
+      '@instructure/ui-text'
+    ])
+    expect(result).toEqual('Typography')
+    expect(root.toSource()).toContain(
+      "import { Typography } from '@instructure/ui-text'"
+    )
+
+    // Test replacing a default import
+    const defaultImportSource = `
+      import DefaultButton, { UglyButton } from '@instructure/ui-buttons'
+      import { Text } from '@instructure/ui-text'
+    `
+    root = j(defaultImportSource)
+    result = replaceImport(
+      j,
+      root,
+      'DefaultButton',
+      'PrimaryButton',
+      '@instructure/ui-buttons',
+      true
+    )
+    expect(result).toEqual('PrimaryButton')
+    expect(root.toSource()).toEqual(`
+      import PrimaryButton, { UglyButton } from '@instructure/ui-buttons'
+      import { Text } from '@instructure/ui-text'
+    `)
+
+    // Test replacing non-existent import (should not modify the source)
+    const originalSource = `import { Button } from '@instructure/ui-buttons'`
+    root = j(originalSource)
+    result = replaceImport(j, root, 'Modal', 'Dialog', '@instructure/ui-modal')
+    expect(result).toEqual('Dialog')
+    expect(root.toSource()).toEqual(originalSource) // Source should be unchanged
+  })
+
+  it('test removeAllChildren', () => {
+    // Test removing children from a standard element
+    const source = `<Container><Child>Text content</Child><AnotherChild /></Container>`
+    let root = j(source)
+    const containerElements = root.find(j.JSXElement, {
+      openingElement: {
+        name: {
+          type: 'JSXIdentifier',
+          name: 'Container'
+        }
+      }
+    })
+
+    // Apply removeAllChildren to the Container element
+    removeAllChildren(containerElements.nodes()[0])
+    expect(root.toSource()).toEqual(`<Container />`)
+
+    // Test removing children from a nested element structure
+    const nestedSource = `
+      <Wrapper>
+        <Container>
+          <Child>Text content</Child>
+          <AnotherChild />
+        </Container>
+      </Wrapper>
+    `
+    root = j(nestedSource)
+    const innerContainers = root.find(j.JSXElement, {
+      openingElement: {
+        name: {
+          type: 'JSXIdentifier',
+          name: 'Container'
+        }
+      }
+    })
+
+    removeAllChildren(innerContainers.nodes()[0])
+    expect(root.toSource()).toEqual(`
+      <Wrapper>
+        <Container />
+      </Wrapper>
+    `)
+
+    // Test with an element that already has no children (self-closing)
+    const selfClosingSource = `<EmptyElement />`
+    root = j(selfClosingSource)
+    const emptyElements = root.find(j.JSXElement, {
+      openingElement: {
+        name: {
+          type: 'JSXIdentifier',
+          name: 'EmptyElement'
+        }
+      }
+    })
+
+    removeAllChildren(emptyElements.nodes()[0])
+    expect(root.toSource()).toEqual(`<EmptyElement />`)
+
+    // Test with an element that has attributes
+    const attributeSource = `<Button id="test" onClick={handleClick}>Click me</Button>`
+    root = j(attributeSource)
+    const buttonElements = root.find(j.JSXElement, {
+      openingElement: {
+        name: {
+          type: 'JSXIdentifier',
+          name: 'Button'
+        }
+      }
+    })
+
+    removeAllChildren(buttonElements.nodes()[0])
+    expect(root.toSource()).toEqual(
+      `<Button id="test" onClick={handleClick} />`
+    )
+  })
+})

package/lib/__node_tests__/{updateV10Breaking.test.ts → codemods.test.ts}

@@ -22,11 +22,11 @@
  * SOFTWARE.
  */
 
-import { runTest } from './testHelpers'
+import { runTest } from './runTest'
 import updateV10Breaking from '../updateV10Breaking'
 
-describe('updateV10Breaking', () => {
-  it('test color codemods', () => {
+describe('test codemods', () => {
+  it('test InstUI v10 color codemods', () => {
     runTest(updateV10Breaking)
   })
 })

package/lib/__node_tests__/{testHelpers.ts → runTest.ts}

@@ -63,9 +63,7 @@ export function runTest(codemod: Transform) {
       // based on the file's extension.
       // Also, this is closer to how its used, there is always a correct
       // filename
-      runInlineTest(codemod, {}, { path: inputPath, source: input }, expected, {
-        parser: 'tsx'
-      })
+      runInlineTest(codemod, {}, { path: inputPath, source: input }, expected)
       fixturesRun++
     }
   })

package/lib/index.ts

@@ -22,21 +22,6 @@
  * SOFTWARE.
  */
 
-import updatePropNames from './updatePropNames'
-import updateImports from './updateImports'
-import updateV7Props from './updateV7Props'
-import updateV8Breaking from './updateV8Breaking'
-import UpdateV8ReactDOM from './updateV8ReactDOM'
-import updateV9Breaking from './updateV9Breaking'
 import updateV10Breaking from './updateV10Breaking'
 
-export {
-  updatePropNames,
-  updateImports,
-  updateV7Props,
-  updateV8Breaking,
-  UpdateV8ReactDOM,
-  updateV9Breaking,
-  updateV10Breaking
-}
-export default updatePropNames
+export { updateV10Breaking }

package/lib/{utils → instui-codemods}/updateToV10Colors.ts

@@ -23,11 +23,8 @@
  */
 
 import { Collection, JSCodeshift } from 'jscodeshift'
-import {
-  findImport,
-  isIdentifier,
-  isMemberExpression
-} from '../helpers/codemodHelpers'
+import { findImport } from '../utils/codemodHelpers'
+import { isIdentifier, isMemberExpression } from '../utils/codemodTypeCheckers'
 
 const colorMapping: { [index: string]: string } = {
   brand: 'blue4570',
@@ -77,9 +74,11 @@ export function updateToV10Colors(
         astNode.property.name = colorMapping[astNode.property.name]
       }
     })
-    if(!hasModifications) {
+    if (!hasModifications) {
       // eslint-disable-next-line no-console
-      console.log("Warning: " + _filePath + ' might need manual replacement of colors')
+      console.log(
+        'Warning: ' + _filePath + ' might need manual replacement of colors'
+      )
     }
   }
   return hasModifications