material ui @mui imports transforment

readme.md

To run:

npx jscodeshift ./src -t ./shifter.ts --extensions=tsx --parser=tsx -p

Not covered cases:

import capitalize from '@mui/utils/capitalize’;
import { FilterOptionsState } from '@mui/base/AutocompleteUnstyled';
import { AutocompleteRenderOptionState } from '@mui/material/AutocompleteRenderOption';
import { AutocompleteRenderGetTagProps } from '@mui/material/AutocompleteRenderGetTag';
import type { AutocompleteGetTagProps } from '@mui/base/AutocompleteUnstyled';
import { SxProps } from '@mui/system';
import { Box } from '@mui/system';
import styled from '@mui/material/styles/styled';

shifter.ts

/* eslint-disable import/no-anonymous-default-export */
export default function (fileInfo: FileInfo, api: API, options: Map<string, any>) {
  const j = api.jscodeshift;
  const root = j(fileInfo.source);

  root
    .find(j.ImportDeclaration, { source: { value: '@mui/material' } })
    .forEach((importDeclaration) => {
      j(importDeclaration).replaceWith(() => {
        const importDeclarations = [];

        importDeclaration.node.specifiers.forEach((memberSpecifier) => {
          if (memberSpecifier.type === 'ImportSpecifier') {
            const importedName = memberSpecifier.imported.name;
            const localName = memberSpecifier.local.name;
            let isProps =
              importedName.endsWith('Props') ||
              importedName.endsWith('State') ||
              importedName.endsWith('Option') ||
              importedName.endsWith('TypeMap') ||
              importedName.endsWith('Position') ||
              importedName.endsWith('RenderOptionState') ||
              importedName.endsWith('ChangeEvent') ||
              importedName.endsWith('GetTagProps') ||
              importedName.endsWith('AutocompleteRenderGetTagProps') ||
              importedName.endsWith('AutocompleteRenderInputParams') ||
              importedName.endsWith('Classes');
            let importName = isProps
              ? importedName
                  .replace('Props', '')
                  .replace('State', '')
                  .replace('Classes', '')
                  .replace('ChangeEvent', '')
                  .replace('Position', '')
                  .replace('TypeMap', '')
                  .replace('Options', '')
                  .replace('RenderOptionState', '')
                  .replace('AutocompleteRenderGetTagProps', '')
                  .replace('AutocompleteRenderInputParams', '')
                  .replace('GetTagProps', '')
              : importedName;
            let namespace = 'material';
            if (importName === 'styled') {
              importName = 'styles/styled';
            }
            if (importName === 'useTheme') {
              importName = 'styles/useTheme';
            }
            if (importedName === 'SxProps') {
              namespace = 'system';
              importName = 'styleFunctionSx';
            }
            if (importedName === 'AccordionSummary') {
              isProps = false;
            }
            if (importName === 'Theme') {
              isProps = true;
              namespace = 'material';
              importName = '';
            }

            // import { DefaultTheme as Theme } from '@mui/styles';

            if (isProps) {
              // capitalize first letter
              importName = importName.charAt(0).toUpperCase() + importName.slice(1);
            }

            if (importName === 'FilterOptionsState') {
              isProps = true;
              namespace = 'base';
              importName = 'AutocompleteUnstyled';
            }

            let modulePath = `@mui/${namespace}/${importName}`;
            if (modulePath.endsWith('/')) {
              modulePath = modulePath.slice(0, -1);
            }

            importDeclarations.push(
              j.importDeclaration(
                [
                  isProps
                    ? j.importSpecifier(j.identifier(importedName), j.identifier(localName))
                    : j.importDefaultSpecifier(j.identifier(importedName), j.identifier(localName)),
                ],
                j.literal(modulePath)
              )
            );
          }
        });

        return importDeclarations;
      });
    });

  return root.toSource({ quote: 'single' });
}