Codemod: remove Section and Items imports if not used elsewhere in file

[reidbarber]

Previously we weren't removing Section or Item imports, because they may still be used by other components. Now we check if the import is still used, and removed it if not.

✅ Pull Request Checklist:

• Included link to corresponding React Spectrum GitHub Issue.
• Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• Filled out test instructions.
• Updated documentation (if it already exists for this component).
• Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-19
• View the storybook-17
• View the storybook-16
• View the S2 storybook
• View the documentation

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-19
• View the storybook-17
• View the storybook-16
• View the S2 storybook
• View the documentation

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-19
• View the storybook-17
• View the storybook-16
• View the S2 storybook
• View the documentation

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-19
• View the storybook-17
• View the storybook-16
• View the S2 storybook
• View the documentation

[ktabors]

This is a lot of cases where we're removing the Item or Section from tests. This seems like a great change.
I found the two following tests where we aren't able to determine the "item" and leave the imports. Isn't there a third "leave the import" case where someone does one section that is static and a second section that is dynamic? Like the following.

<MenuTrigger>
    <Button>Edit</Button>
    <Menu>
      <Section key={section.key} title="Static Menu Items">
        <Item key="cut">Cut</Item>
        <Item key="copy">Copy</Item>
      </Section> 
      <Section key={section.key} title="Social Media Sites">
        {items}
      </Section

    </Menu>
  </MenuTrigger>

[reidbarber]

Just tried this locally, and it kept the Item import. Are you seeing something different?

Before:

import {Menu, Section, Item, MenuTrigger, Button} from '@adobe/react-spectrum';

let items = [
  {key: 'facebook', name: 'Facebook'},
  {key: 'twitter', name: 'Twitter'},
  {key: 'instagram', name: 'Instagram'},
].map(item => <Item key={item.key}>{item.name}</Item>);

<div>
  <MenuTrigger>
      <Button>Edit</Button>
      <Menu>
        <Section key={section.key} title="Static Menu Items">
          <Item key="cut">Cut</Item>
          <Item key="copy">Copy</Item>
        </Section> 
        <Section key={section.key} title="Social Media Sites">
          {items}
        </Section>
      </Menu>
    </MenuTrigger>
</div>

After:

import { MenuSection, MenuItem, Menu, MenuTrigger, Button } from "@react-spectrum/s2";
import { Item } from '@adobe/react-spectrum';

let items = [
  {key: 'facebook', name: 'Facebook'},
  {key: 'twitter', name: 'Twitter'},
  {key: 'instagram', name: 'Instagram'},
].map(item => // TODO(S2-upgrade): Couldn't automatically detect what type of collection component this is rendered in. You'll need to update this manually.
<Item key={item.key}>{item.name}</Item>);

<div>
  <MenuTrigger>
      <Button>Edit</Button>
      <Menu>
        <MenuSection id={section.key}><Header>Static Menu Items</Header>
          <MenuItem id="cut">Cut</MenuItem>
          <MenuItem id="copy">Copy</MenuItem>
        </MenuSection> 
        <MenuSection id={section.key}><Header>Social Media Sites</Header>
          {items}
        </MenuSection>
      </Menu>
    </MenuTrigger>
</div>

[ktabors]

I just wanted that in a test. :)

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-19
• View the storybook-17
• View the storybook-16
• View the S2 storybook
• View the documentation

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-19
• View the storybook-17
• View the storybook-16
• View the S2 storybook
• View the documentation