openpanel/packages/codemod/src/transformations/use-data-grid-columns.ts

import type {
  API,
  JSCodeshift,
  Collection,
  FileInfo,
  ObjectExpression,
  Identifier,
  Property,
  JSXAttribute,
} from "jscodeshift";

export const parser = "tsx";

const removeColumnsOnUseDataGrid = (j: JSCodeshift, root: Collection<any>) => {
  const useDataGridHook = root.find(j.CallExpression, {
    callee: {
      name: "useDataGrid",
    },
  });

  useDataGridHook.replaceWith((p) => {
    if (p.node.arguments.length === 0) {
      return p.node;
    }

    const propertiesWithoutColumns = (
      p.node.arguments[0] as unknown as ObjectExpression
    ).properties.filter(
      (p: Property) => (p.key as Identifier).name !== "columns",
    );

    if (propertiesWithoutColumns.length === 0) {
      p.node.arguments = [];

      return p.node;
    }

    (p.node.arguments[0] as unknown as ObjectExpression).properties =
      propertiesWithoutColumns;

    return p.node;
  });
};

const addColumnsToUseDataGrid = (j: JSCodeshift, root: Collection<any>) => {
  const dataGridElement = root.find(j.JSXElement, {
    openingElement: {
      name: {
        name: "DataGrid",
      },
    },
  });

  if (dataGridElement.length === 0) {
    console.warn(
      "If you use `useDataGrid` hook, you need to use `DataGrid` element.",
    );
    return;
  }

  dataGridElement.forEach((path) => {
    const hasColumnsAttribute = path.node.openingElement.attributes.find(
      (attribute) => (attribute as JSXAttribute).name?.name === "columns",
    );

    if (hasColumnsAttribute) {
      return;
    }

    path.node.openingElement.attributes.push(
      j.jsxAttribute(
        j.jsxIdentifier("columns"),
        j.jsxExpressionContainer(j.identifier("columns")),
      ),
    );
  });
};

export default function transformer(file: FileInfo, api: API): string {
  const j = api.jscodeshift;
  const source = j(file.source);

  const refineMuiUseDataGridImports = source.find(j.ImportDeclaration, {
    source: {
      value: "@pankod/refine-mui",
    },
    specifiers: [
      {
        imported: {
          name: "useDataGrid",
        },
      },
    ],
  });

  if (refineMuiUseDataGridImports.length === 0) {
    return;
  }

  removeColumnsOnUseDataGrid(j, source);
  addColumnsToUseDataGrid(j, source);

  return source.toSource();
}