[Joy] Add slots/slotProps props to the typing of all components and apply useSlot to all components

[hbjORbj]

This PR includes:

• Rename components to slots and componentsProps to slotProps in all Joy UI components and in useSlot().
• Apply Joy useSlot() to all Joy UI components
• Apply slot test to all Joy UI components
• Add spec tests to all Joy UI components
• Codemod for renaming components to slots and componentsProps to slotProps in all Joy UI components

Checklist

• Alert
• AspectRatio
• Avatar
• AvatarGroup
• Badge
• Box
• Breadcrumbs
• Button
• Card
• CardContent
• CardCover
• CardOverflow
• Checkbox
• Chip
• ChipDelete
• CircularProgress
• Container
• CssBaseline
• Divider
• FormControl
• FormHelperText
• FormLabel
• Grid
• IconButton
• Input
• LinearProgress
• Link
• List
• ListDivider
• ListItem
• ListItemButton
• ListItemContent
• ListItemDecorator
• ListSubheader
• Menu
• MenuItem
• MenuList
• Modal
• ModalClose
• ModalDialog
• Option
• Radio
• RadioGroup
• ScopedCssBaseline
• Select
• Sheet
• Slider
• Stack
• SvgIcon
• Switch
• Tab
• TabList
• TabPanel
• Tabs
• Textarea
• TextField
• Tooltip
• Typography

[mui-bot]

	Messages
📖	Netlify deploy preview: https://deploy-preview-34997--material-ui.netlify.app/

@mui/joy: parsed: +0.15% , gzip: +0.14%

Details of bundle changes

Generated by 🚫 dangerJS against 715d72d

[hbjORbj]

A few tests still fail, but I think I spent enough time trying to figure out. Your help would be appreciated, Jun. @siriwatknp

[siriwatknp]

👍 Great job @hbjORbj. Let's wait until the codemod PR is approved.

[siriwatknp]

@hbjORbj To make codemod specific to Joy UI. We should do this:

1. list the component imports first

import { Alert as JoyAlert } from '@mui/joy';
import JoyAutocomplete from '@mui/joy/Autocomplete';

// the list should be ['JoyAlert', 'JoyAutocomplete']

2. use .findJSXElements($name) and then do the transform as you already did.

[siriwatknp]

This is one example of how to list the imports https://github.com/siriwatknp/material-ui/blob/joy/variant-inversion/packages/mui-codemod/src/v5.0.0/theme-provider.js#L15

[hbjORbj]

Hey, Thanks, Jun.

I changed it to the following in this commit. Please let me know if I did it correctly.

  root
    .find(j.ImportDeclaration)
    .filter(({ node }) => {
      return node.source.value.startsWith('@mui/joy');
    })
    .forEach((path) => {
      path.node.specifiers.forEach((node) => {
        root.findJSXElements(node.local.name).forEach((elementPath) => {
          if (elementPath.node.type !== 'JSXElement') {
            return;
          }

          elementPath.node.openingElement.attributes.forEach((elementNode) => {
            if (elementNode.type !== 'JSXAttribute') {
              return;
            }

            switch (elementNode.name.name) {
              case 'components':
                transformComponentsProp(elementNode);
                break;

              case 'componentsProps':
                transformComponentsPropsProp(elementNode);
                break;

              default:
            }
          });
        });
      });
    });

  const transformed = root.findJSXElements();
  return transformed.toSource(printOptions);

[siriwatknp]

@hbjORbj I suggest adding another test case for the codemod.

// the codemod should transform only Joy UI components;
import { Alert as JoyAlert } from '@mui/joy';
import JoyAutocomplete from '@mui/joy/Autocomplete';

import CustomComponent from 'components/Custom';

function App() {
  return (
    <div>
      <JoyAlert components={{ ... }} componentsProps={{ ... }} />
      <JoyAutocomplete components={{ ... }} componentsProps={{ ... }} />
      <CustomComponent components={{ ... }} componentsProps={{ ... }} />
    </div>
  )
}

[hbjORbj]

Ready for review again! @siriwatknp