@mui/x-codemod 6.0.0-alpha.9 → 6.0.0-beta.1

package/v6.0.0/pickers/text-props-to-localeText/index.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+const defaultPropsToKey = {
+  cancelText: ['cancelButtonLabel'],
+  okText: ['okButtonLabel'],
+  todayText: ['todayButtonLabel'],
+  clearText: ['clearButtonLabel'],
+  endText: ['end'],
+  getClockLabelText: ['clockLabelText'],
+  getHoursClockNumberText: ['hoursClockNumberText'],
+  getMinutesClockNumberText: ['minutesClockNumberText'],
+  getSecondsClockNumberText: ['secondsClockNumberText'],
+  getViewSwitchingButtonText: ['calendarViewSwitchingButtonAriaLabel'],
+  startText: ['start']
+};
+const isMonthSwitchComponent = {
+  DatePicker: true,
+  StaticDatePicker: true,
+  MobileDatePicker: true,
+  DesktopDatePicker: true,
+  DateRangePicker: true,
+  StaticDateRangePicker: true,
+  MobileDateRangePicker: true,
+  DesktopDateRangePicker: true,
+  CalendarPicker: true,
+  // Special cases of DateTimePickers present in both
+  DateTimePicker: true,
+  StaticDateTimePicker: true,
+  MobileDateTimePicker: true,
+  DesktopDateTimePicker: true
+};
+const isViewSwitchComponent = {
+  TimePicker: true,
+  StaticTimePicker: true,
+  MobileTimePicker: true,
+  DesktopTimePicker: true,
+  DateTimePicker: true,
+  ClockPicker: true,
+  // Special cases of DateTimePickers present in both
+  StaticDateTimePicker: true,
+  MobileDateTimePicker: true,
+  DesktopDateTimePicker: true
+};
+const needsWrapper = {
+  ClockPicker: true,
+  CalendarPicker: true
+};
+const impactedComponents = ['DateRangePicker', 'CalendarPicker', 'ClockPicker', 'DatePicker', 'DateRangePicker', 'DateRangePickerDay', 'DateTimePicker', 'DesktopDatePicker', 'DesktopDateRangePicker', 'DesktopDateTimePicker', 'DesktopTimePicker', 'MobileDatePicker', 'MobileDateRangePicker', 'MobileDateTimePicker', 'MobileTimePicker', 'StaticDatePicker', 'StaticDateRangePicker', 'StaticDateTimePicker', 'StaticTimePicker', 'TimePicker'];
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const printOptions = options.printOptions;
+  const root = j(file.source);
+  impactedComponents.forEach(componentName => {
+    const propsToKey = (0, _extends2.default)({}, defaultPropsToKey, {
+      leftArrowButtonText: [...(isViewSwitchComponent[componentName] ? ['openPreviousView'] : []), ...(isMonthSwitchComponent[componentName] ? ['previousMonth'] : [])],
+      rightArrowButtonText: [...(isViewSwitchComponent[componentName] ? ['openNextView'] : []), ...(isMonthSwitchComponent[componentName] ? ['nextMonth'] : [])]
+    });
+    root.findJSXElements(componentName).forEach(path => {
+      const newLocaleText = [];
+      const attributes = path.node.openingElement.attributes;
+      attributes.forEach((node, index) => {
+        if (node.type === 'JSXAttribute' && propsToKey[node.name.name] !== undefined) {
+          const newNames = propsToKey[node.name.name];
+          newNames.forEach(newName => {
+            const property = j.objectProperty(j.identifier(newName), node.value.expression ? node.value.expression : j.literal(node.value.value));
+            property.shorthand = node.value.expression && node.value.expression.name === newName;
+            newLocaleText.push(property);
+          });
+          delete attributes[index];
+        }
+      });
+      if (newLocaleText.length > 0) {
+        if (needsWrapper[componentName]) {
+          // From : https://www.codeshiftcommunity.com/docs/react/#wrapping-components
+
+          // Create a new JSXElement called "LocalizationProvider" and use the original component as children
+          const wrappedComponent = j.jsxElement(j.jsxOpeningElement(j.jsxIdentifier('LocalizationProvider'), [
+          // Add the new localeText prop
+          j.jsxAttribute(j.jsxIdentifier('localeText'), j.jsxExpressionContainer(j.objectExpression(newLocaleText)))]), j.jsxClosingElement(j.jsxIdentifier('LocalizationProvider')), [path.value] // Pass in the original component as children
+          );
+
+          j(path).replaceWith(wrappedComponent);
+        } else {
+          attributes.push(j.jsxAttribute(j.jsxIdentifier('localeText'), j.jsxExpressionContainer(j.objectExpression(newLocaleText))));
+        }
+      }
+    });
+  });
+  return root.toSource(printOptions);
+}

package/v6.0.0/pickers/view-components-rename/index.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+const SUB_PACKAGES = {
+  CalendarPicker: 'DateCalendar',
+  CalendarPickerSkeleton: 'DayCalendarSkeleton',
+  MonthPicker: 'MonthCalendar',
+  YearPicker: 'YearCalendar',
+  ClockPicker: 'TimeClock'
+};
+const VARIABLES = {
+  // Date Calendar
+  CalendarPicker: 'DateCalendar',
+  CalendarPickerProps: 'DateCalendarProps',
+  CalendarPickerSlotsComponent: 'DateCalendarSlotsComponent',
+  CalendarPickerSlotsComponentsProps: 'DateCalendarSlotsComponentsProps',
+  CalendarPickerClasses: 'DateCalendarClasses',
+  CalendarPickerClassKey: 'DateCalendarClassKey',
+  calendarPickerClasses: 'dateCalendarClasses',
+  getCalendarPickerUtilityClass: 'getDateCalendarUtilityClass',
+  // Month Calendar
+  MonthPicker: 'MonthCalendar',
+  MonthPickerProps: 'MonthCalendarProps',
+  MonthPickerClasses: 'MonthCalendarClasses',
+  MonthPickerClassKey: 'MonthCalendarClassKey',
+  monthPickerClasses: 'monthCalendarClasses',
+  getMonthPickerUtilityClass: 'getMonthCalendarUtilityClass',
+  YearPicker: 'YearCalendar',
+  YearPickerProps: 'YearCalendarProps',
+  YearPickerClasses: 'YearCalendarClasses',
+  YearPickerClassKey: 'YearCalendarClassKey',
+  yearPickerClasses: 'yearCalendarClasses',
+  getYearPickerUtilityClass: 'getYearCalendarUtilityClass',
+  ClockPicker: 'TimeClock',
+  ClockPickerProps: 'TimeClockProps',
+  ClockPickerClasses: 'TimeClockClasses',
+  ClockPickerClassKey: 'TimeClockClassKey',
+  clockPickerClasses: 'timeClockClasses',
+  getClockPickerUtilityClass: 'getTimeClockUtilityClass',
+  CalendarPickerSkeleton: 'DayCalendarSkeleton',
+  CalendarPickerSkeletonProps: 'DayCalendarSkeletonProps',
+  CalendarPickerSkeletonClasses: 'DayCalendarSkeletonClasses',
+  CalendarPickerSkeletonClassKey: 'DayCalendarSkeletonClassKey',
+  calendarPickerSkeletonClasses: 'dayCalendarSkeletonClasses',
+  getCalendarPickerSkeletonUtilityClass: 'getDayCalendarSkeletonUtilityClass'
+};
+const PACKAGE_REGEXP = /@mui\/x-date-pickers(-pro|)(\/(.*)|)/;
+const matchImport = path => (path.node.source.value?.toString() ?? '').match(PACKAGE_REGEXP);
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions || {
+    quote: 'single',
+    trailingComma: true
+  };
+  const matchingImports = root.find(j.ImportDeclaration).filter(path => !!matchImport(path));
+
+  // Rename the import specifiers
+  // - import { MonthPicker } from '@mui/x-date-pickers/MonthPicker'
+  // + import { MonthCalendar } from '@mui/x-date-pickers/MonthPicker'
+  matchingImports.find(j.ImportSpecifier).filter(path => !!VARIABLES[path.node.imported.name]).replaceWith(path => j.importSpecifier(j.identifier(VARIABLES[path.node.imported.name])));
+
+  // Rename the nested import declarations
+  // - import {} from '@mui/x-date-pickers/MonthPicker'
+  // + import {} from '@mui/x-date-pickers/MonthCalendar'
+  matchingImports.filter(path => !!SUB_PACKAGES[matchImport(path)?.[3] ?? '']).replaceWith(path => {
+    const subPackage = matchImport(path)[3];
+    const importPath = path.node.source.value?.toString() ?? '';
+    return j.importDeclaration(path.node.specifiers,
+    // copy over the existing import specifiers
+    j.stringLiteral(importPath.replace(subPackage, SUB_PACKAGES[subPackage])) // Replace the source with our new source
+    );
+  });
+
+  // Rename the import usage
+  // - <CalendarPicker />
+  // + <DateCalendar />
+  root.find(j.Identifier).filter(path => !!VARIABLES[path.node.name]).replaceWith(path => j.identifier(VARIABLES[path.node.name]));
+  return root.toSource(printOptions);
+}

package/v6.0.0/pickers/view-components-rename-value-prop/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _renameProps = _interopRequireDefault(require("../../../util/renameProps"));
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+  const result = (0, _renameProps.default)({
+    root,
+    componentNames: ['MonthPicker', 'YearPicker', 'CalendarPicker', 'ClockPicker'],
+    props: {
+      date: 'value'
+    },
+    j
+  });
+  return result.toSource(printOptions);
+}

package/v6.0.0/preset-safe/index.js

@@ -5,8 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = transformer;
-var _localizationProviderRenameLocale = _interopRequireDefault(require("../localization-provider-rename-locale"));
+var _presetSafe = _interopRequireDefault(require("../pickers/preset-safe"));
+var _presetSafe2 = _interopRequireDefault(require("../data-grid/preset-safe"));
 function transformer(file, api, options) {
-  file.source = (0, _localizationProviderRenameLocale.default)(file, api, options);
+  file.source = (0, _presetSafe.default)(file, api, options);
+  file.source = (0, _presetSafe2.default)(file, api, options);
   return file.source;
 }