@instructure/ui-codemods 8.17.1-snapshot.30 → 8.17.1-snapshot.71

package/lib/utils/updateV7ButtonsWithText.ts

@@ -0,0 +1,111 @@
+/*
+ * 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 { findAttribute, findElements } from '../helpers/v7PropsUpdateHelpers'
+import { Collection, JSCodeshift, Literal } from 'jscodeshift'
+
+/**
+ * Does the following updates on a <Button>:
+ * - `variant="default"` -> removed
+ * - `variant="primary"` -> `color="primary"`
+ * - `variant="success"` -> `color="success"`
+ * - `variant="danger"` -> `color="danger"`
+ * - `variant="light"` -> `color="primary-inverse"`
+ * - `variant="ghost"` -> `color="ghost" withBackground={false}`
+ * - `variant="ghost-inverse"` -> `color="primary-inverse" withBackground={false}`
+ */
+export default function updateV7ButtonsWithText(
+  j: JSCodeshift,
+  root: Collection,
+  importedName: string,
+  filePath: string
+) {
+  const buttons = findElements(filePath, j, root, importedName)
+
+  // remove variant="default"
+  findAttribute(filePath, j, buttons, 'variant', 'default').remove()
+  // replace <Button variant="primary" with <Button color="primary"
+  findAttribute(filePath, j, buttons, 'variant', 'primary').replaceWith(
+    (nodePath) => {
+      const { node } = nodePath
+      node.name.name = 'color'
+      return nodePath.node
+    }
+  )
+  // replace <Button variant="success" with <Button color="success"
+  findAttribute(filePath, j, buttons, 'variant', 'success').replaceWith(
+    (nodePath) => {
+      const { node } = nodePath
+      node.name.name = 'color'
+      return nodePath.node
+    }
+  )
+  // replace <Button variant="danger" with <Button color="danger"
+  findAttribute(filePath, j, buttons, 'variant', 'danger').replaceWith(
+    (nodePath) => {
+      const { node } = nodePath
+      node.name.name = 'color'
+      return nodePath.node
+    }
+  )
+  // replace <Button variant="light" with color="primary-inverse"
+  findAttribute(filePath, j, buttons, 'variant', 'light').replaceWith(
+    (nodePath) => {
+      const { node } = nodePath
+      node.name.name = 'color'
+      ;(node.value as Literal).value = 'primary-inverse'
+      return nodePath.node
+    }
+  )
+  // replace <Button variant="ghost" with <Button color="primary" withBackground={false}
+  findAttribute(filePath, j, buttons, 'variant', 'ghost')
+    .replaceWith((nodePath) => {
+      const { node } = nodePath
+      node.name.name = 'color'
+      ;(node.value as Literal).value = 'primary'
+      return nodePath.node
+    })
+    .insertAfter(
+      j.jsxAttribute(
+        j.jsxIdentifier('withBackground'),
+        j.jsxExpressionContainer(j.jsxIdentifier('false'))
+      )
+    )
+
+  // replace <Button variant="ghost-inverse" with
+  // <Button color="primary-inverse" withBackground={false}
+  findAttribute(filePath, j, buttons, 'variant', 'ghost-inverse')
+    .replaceWith((nodePath) => {
+      const { node } = nodePath
+      node.name.name = 'color'
+      ;(node.value as Literal).value = 'primary-inverse'
+      return nodePath.node
+    })
+    .insertAfter(
+      j.jsxAttribute(
+        j.jsxIdentifier('withBackground'),
+        j.jsxExpressionContainer(j.jsxIdentifier('false'))
+      )
+    )
+}

package/lib/utils/updateV7FocusableView.ts

@@ -0,0 +1,105 @@
+/*
+ * 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 type { Collection, JSCodeshift } from 'jscodeshift'
+import {
+  addImportIfNeeded,
+  findAttribute,
+  findElements,
+  findImport,
+  printWarning,
+  renameElements
+} from '../helpers/v7PropsUpdateHelpers'
+import { Literal } from 'jscodeshift'
+
+/**
+ * Does the following updates on a <FocusableView>:
+ * - `<FocusableView/>` -> `<View/>`
+ * - focused -> withFocusOutline
+ * - shape -> delete and display warning, that focus ring shape cannot be set
+ * - color="primary" -> delete, its the default
+ * - color="error" -> focusColor="danger"
+ * - color="inverse" -> focusColor="inverse"
+ *
+ **/
+export default function updateV7FocusableView(
+  j: JSCodeshift,
+  root: Collection,
+  filePath: string
+) {
+  const importName = findImport(j, root, 'FocusableView', [
+    '@instructure/ui-focusable',
+    '@instructure/ui'
+  ])
+  if (!importName) {
+    return false
+  }
+  const views = findElements(filePath, j, root, importName)
+
+  ///// `<FocusableView/>` -> `<View/>`
+  renameElements(filePath, views, 'FocusableView', 'View')
+  addImportIfNeeded(j, root, 'View', '@instructure/ui-view')
+
+  ///// focused -> withFocusOutline
+  findAttribute(filePath, j, views, 'focused').replaceWith((nodePath) => {
+    const { node } = nodePath
+    node.name.name = 'withFocusOutline'
+    return nodePath.node
+  })
+
+  ///// shape -> delete and display warning, that focus ring shape cannot be set
+  findAttribute(filePath, j, views, 'shape')
+    .forEach((path) => {
+      printWarning(
+        filePath,
+        path.value.loc?.start.line,
+        `The 'shape' property was removed, focus ring shape
+       cannot be set in InstUI v8`
+      )
+    })
+    .remove()
+
+  //// color="primary" -> delete, its the default
+  findAttribute(filePath, j, views, 'color', 'primary').remove()
+
+  //// color="error" -> focusColor="danger"
+  findAttribute(filePath, j, views, 'color', 'error').replaceWith(
+    (nodePath) => {
+      const { node } = nodePath
+      node.name.name = 'focusColor'
+      ;(node.value as Literal).value = 'danger'
+      return nodePath.node
+    }
+  )
+
+  ///// color="inverse" -> focusColor="inverse"
+  findAttribute(filePath, j, views, 'color', 'inverse').replaceWith(
+    (nodePath) => {
+      const { node } = nodePath
+      node.name.name = 'focusColor'
+      return nodePath.node
+    }
+  )
+  return true
+}

package/lib/utils/updateV7Heading.ts

@@ -0,0 +1,145 @@
+/*
+ * 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 type {
+  Collection,
+  JSCodeshift,
+  JSXAttribute,
+  JSXElement
+} from 'jscodeshift'
+import {
+  addImportIfNeeded,
+  findElements,
+  findImport,
+  isJSXAttribue,
+  isJSXExpressionContainer,
+  isLiteral,
+  printWarning
+} from '../helpers/v7PropsUpdateHelpers'
+
+/**
+ * Does the following update on a <Heading>:
+ * `<Heading ellipsis>abc</Heading>` ->
+ *           `<Heading><TruncateText>abc</TruncateText></Heading>
+ */
+export default function updateV7Heading(
+  j: JSCodeshift,
+  root: Collection,
+  filePath: string
+) {
+  const importName = findImport(j, root, 'Heading', [
+    '@instructure/ui-heading',
+    '@instructure/ui'
+  ])
+  if (!importName) {
+    return false
+  }
+  const tags = findElements(filePath, j, root, importName, {
+    name: 'ellipsis'
+  })
+
+  tags.forEach((path) => {
+    if (path.value.openingElement.attributes) {
+      for (const attr of path.value.openingElement.attributes) {
+        if (isJSXAttribue(attr) && attr.name.name === 'ellipsis') {
+          if (!attr.value) {
+            // <Heading ellipsis>abc</Heading>
+            wrapInTruncateText(j, root, attr, path.value)
+          } else if (isJSXExpressionContainer(attr.value)) {
+            // <Heading ellipsis={expr}>abc</Heading>
+            if (isLiteral(attr.value.expression)) {
+              if (typeof attr.value.expression.value === 'boolean') {
+                if (attr.value.expression.value === true) {
+                  // <Heading ellipsis={true}>abc</Heading>
+                  wrapInTruncateText(j, root, attr, path.value)
+                } else {
+                  // <Heading ellipsis={false}>abc</Heading>
+                  // remove ellipsis attribute
+                  path.value.openingElement.attributes.splice(
+                    path.value.openingElement.attributes.indexOf(attr),
+                    1
+                  )
+                  return
+                }
+              } else {
+                printWarning(
+                  filePath,
+                  path.value.loc?.start.line,
+                  'Heading ellipsis ' +
+                    'parameter has non-boolean value, please refactor manually'
+                )
+                return
+              }
+            } else {
+              printWarning(
+                filePath,
+                path.value.loc?.start.line,
+                'Heading ellipsis ' +
+                  'parameter has non-boolean value, please refactor manually'
+              )
+              return
+            }
+          } else {
+            printWarning(
+              filePath,
+              path.value.loc?.start.line,
+              'Heading ellipsis ' +
+                'parameter has non-boolean value, please refactor manually'
+            )
+            return
+          }
+        }
+      }
+    }
+  })
+  if (tags) {
+    return true
+  }
+  return false
+}
+
+function wrapInTruncateText(
+  j: JSCodeshift,
+  root: Collection,
+  attr: JSXAttribute,
+  elem: JSXElement
+) {
+  elem.openingElement.attributes!.splice(
+    elem.openingElement.attributes!.indexOf(attr),
+    1
+  )
+  addImportIfNeeded(j, root, 'TruncateText', [
+    '@instructure/ui-truncate-text',
+    '@instructure/ui'
+  ])
+  // move children under a new TruncateText
+  const children = elem.children
+  const tt = j.jsxElement(
+    j.jsxOpeningElement(j.jsxIdentifier('TruncateText')),
+    j.jsxClosingElement(j.jsxIdentifier('TruncateText')),
+    children
+  )
+  // eslint-disable-next-line no-param-reassign
+  elem.children = [tt]
+}

package/lib/utils/updateV7Lists.ts

@@ -0,0 +1,113 @@
+/*
+ * 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 { Collection, JSCodeshift } from 'jscodeshift'
+import {
+  addImportIfNeeded,
+  findAttribute,
+  findElements,
+  findImport,
+  printWarning,
+  renameElements
+} from '../helpers/v7PropsUpdateHelpers'
+
+/**
+ * Does the following update on a <List>:
+ * - `<List variant="default"` -> `<List`
+ * - `<List variant="unstyled"` -> `<List isUnstyled={true}`
+ * - `<List variant="inline"` -> `<InlineList`
+ * - `<List delimiter=` -> display warning
+ * - `<List.Item delimiter=` -> display warning
+ */
+export default function updateV7Lists(
+  j: JSCodeshift,
+  root: Collection,
+  filePath: string
+) {
+  const importName = findImport(j, root, 'List', [
+    '@instructure/ui-lists',
+    '@instructure/ui'
+  ])
+  if (!importName) {
+    return false
+  }
+  const tags = findElements(filePath, j, root, importName, {
+    name: 'variant'
+  })
+
+  ///// `<List variant="default"` -> `<List`
+  findAttribute(filePath, j, tags, 'variant', 'default').remove()
+
+  ///// `<List variant="unstyled"` -> `<List isUnstyled`
+  findAttribute(filePath, j, tags, 'variant', 'unstyled')
+    .remove()
+    .insertAfter(j.jsxAttribute(j.jsxIdentifier('isUnstyled')))
+
+  ///// `<List variant="inline"` -> `<InlineList`
+  const inlineLists = findElements(filePath, j, root, 'List', {
+    name: 'variant',
+    value: 'inline'
+  })
+  if (inlineLists.length > 0) {
+    findAttribute(filePath, j, inlineLists, 'variant').remove()
+    renameElements(filePath, inlineLists, 'List', 'InlineList')
+    inlineLists.forEach((path) => {
+      if (path.value.children) {
+        // rename List.Item to InlineList.Item
+        renameElements(
+          filePath,
+          path.value.children,
+          'List.Item',
+          'InlineList.Item'
+        )
+      }
+    })
+    addImportIfNeeded(j, root, 'InlineList', [
+      '@instructure/ui',
+      '@instructure/ui-lists'
+    ])
+  }
+
+  ///// `<List delimiter=` -> display warning
+  ///// `<List.Item delimiter=` -> display warning
+  findElements(filePath, j, root, importName, { name: 'delimiter' }).forEach(
+    (path) => {
+      printWarning(
+        filePath,
+        path.value.loc?.start.line,
+        `List's delimiter prop is only available for 'InlineList' in InstUI v8, please check.`
+      )
+    }
+  )
+  findElements(filePath, j, root, 'List.Item', { name: 'delimiter' }).forEach(
+    (path) => {
+      printWarning(
+        filePath,
+        path.value.loc?.start.line,
+        `List's delimiter prop is only available for 'InlineList' in InstUI v8, please check.`
+      )
+    }
+  )
+  return tags.length > 0
+}

package/lib/utils/updateV7Pill.ts

@@ -0,0 +1,83 @@
+/*
+ * 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 { Collection, JSCodeshift } from 'jscodeshift'
+import {
+  findElements,
+  findImport,
+  isJSXAttribue,
+  printWarning
+} from '../helpers/v7PropsUpdateHelpers'
+
+/**
+ * Does the following updates on a <Pill>:
+ * - `<Pill text="abc"/>` -> `<Pill>abc</Pill>`
+ **/
+export default function updateV7Pill(
+  j: JSCodeshift,
+  root: Collection,
+  filePath: string
+) {
+  const importName = findImport(j, root, 'Pill', [
+    '@instructure/ui-pill',
+    '@instructure/ui'
+  ])
+  if (!importName) {
+    return false
+  }
+  ///// `<Pill text="abc"/>` -> `<Pill>abc</Pill>`
+  let isUpdated = false
+  findElements(filePath, j, root, importName, { name: 'text' }).forEach(
+    (path) => {
+      const tag = path.value
+      for (const attr of tag.openingElement.attributes!) {
+        if (isJSXAttribue(attr) && attr.name.name === 'text') {
+          if (tag.children && tag.children.length !== 0) {
+            printWarning(
+              filePath,
+              tag.loc?.start.line,
+              "Pill had both `text` attribute and children. I've " +
+                'moved the value of `text` under its `children`, please double ' +
+                'check.'
+            )
+          }
+          if (tag.openingElement.selfClosing) {
+            tag.openingElement.selfClosing = false
+            tag.closingElement = j.jsxClosingElement(j.jsxIdentifier('Pill'))
+          }
+          if (!tag.children) {
+            tag.children = []
+          }
+          tag.children!.push(attr.value!)
+          tag.openingElement.attributes!.splice(
+            tag.openingElement.attributes!.indexOf(attr),
+            1
+          )
+          isUpdated = true
+        }
+      }
+    }
+  )
+  return isUpdated
+}

package/lib/utils/updateV7Popover.ts

@@ -0,0 +1,137 @@
+/*
+ * 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 type {
+  Collection,
+  JSCodeshift,
+  JSXElement,
+  JSXExpressionContainer,
+  StringLiteral
+} from 'jscodeshift'
+import {
+  findElements,
+  findImport,
+  getVisibleChildren,
+  isJSXElement,
+  isJSXIdentifier,
+  isJSXMemberExpression,
+  isJSXText,
+  printWarning
+} from '../helpers/v7PropsUpdateHelpers'
+
+/**
+ * Does the following updates on a <Popover>:
+ * - `<Popover><Popover.Trigger>{t}</Popover.Trigger></Popover>` ->
+ *     `<Popover renderTrigger={t} />`
+ * - `<Popover><Popover.Content>c</Popover.Content></Popover>` ->
+ *     `<Popover>c</Popover>`
+ * - `<Popover onToggle=` -> Display warning that it needs to be done
+ *   manually
+ **/
+export default function updateV7Popover(
+  j: JSCodeshift,
+  root: Collection,
+  filePath: string
+) {
+  const importName = findImport(j, root, 'Popover', [
+    '@instructure/ui-popover',
+    '@instructure/ui'
+  ])
+  if (!importName) {
+    return false
+  }
+  let isUpdated = false
+  ///// `<Popover><Popover.Trigger>{t}</Popover.Trigger></Popover>` ->
+  /////     `<Popover renderTrigger={t} />`
+  findElements(filePath, j, root, 'Popover').forEach((path) => {
+    const trigger = getVisibleChildren(
+      getChildrenByName('Popover', 'Trigger', path.value.children)
+    )
+    if (trigger.length > 0) {
+      // should have 0 or 1 child
+      isUpdated = true
+      const theChild = trigger[0]
+      let toAdd = theChild as JSXExpressionContainer | StringLiteral
+      if (isJSXText(theChild)) {
+        toAdd = j.stringLiteral(theChild.value)
+      }
+      if (isJSXElement(theChild)) {
+        toAdd = j.jsxExpressionContainer(theChild)
+      } // hope these conversions are enough
+      path.value.openingElement.attributes!.push(
+        j.jsxAttribute(j.jsxIdentifier('renderTrigger'), toAdd)
+      )
+    }
+  })
+  ///// `<Popover><Popover.Content>c</Popover.Content></Popover>` ->
+  /////    `<Popover>c</Popover>`
+  findElements(filePath, j, root, 'Popover').forEach((path) => {
+    const trigger = getChildrenByName('Popover', 'Content', path.value.children)
+    if (trigger) {
+      // should have 0 or 1 child
+      isUpdated = true
+      path.value.children!.push(...trigger)
+    }
+  })
+  ///// `<Popover onToggle=` -> Display warning that it needs to be done manually
+  findElements(filePath, j, root, 'Popover', { name: 'onToggle' }).forEach(
+    (path) => {
+      printWarning(
+        filePath,
+        path.value.loc?.start.line,
+        "Popover's onToggle needs to be converted manually " +
+          'to onShowContent and onHideContent'
+      )
+    }
+  )
+  return isUpdated
+}
+
+/**
+ * Removes the child of the given array that is named like `Name1.Name2`
+ * It returns the first child of the child that has this name (if any)
+ */
+function getChildrenByName(
+  name1: string,
+  name2: string,
+  array?: JSXElement['children']
+) {
+  if (!array) {
+    return
+  }
+  for (const child of array) {
+    if (
+      isJSXElement(child) &&
+      child.children &&
+      isJSXMemberExpression(child.openingElement.name) &&
+      isJSXIdentifier(child.openingElement.name.object) &&
+      child.openingElement.name.object.name === name1 &&
+      child.openingElement.name.property.name === name2
+    ) {
+      array.splice(array.indexOf(child), 1)
+      return child.children
+    }
+  }
+  return
+}