@atlaskit/modal-dialog 12.0.2

package/codemods/migrations/handle-prop-spread.tsx

@@ -0,0 +1,51 @@
+import core, { ASTPath, Collection, JSXElement } from 'jscodeshift/src/core';
+
+import {
+  addCommentToStartOfFile,
+  getDefaultSpecifier,
+  getDynamicImportName,
+} from '@atlaskit/codemod-utils';
+
+import { PACKAGE_NAME } from '../internal/constants';
+
+const comment = `
+This file is spreading props on the ModalDialog component, so we could not
+automatically convert this usage to the new API.
+
+The following props have been deprecated as part of moving to a compositional API:
+
+- 'heading' prop has been replaced by ModalHeader and ModalTitle components.
+- 'actions' prop has been replaced by ModalFooter component, with Button components from @atlaskit/button.
+- 'scrollBehavior' prop has been replaced by 'shouldScrollInViewport', where "outside" from the previous prop maps to true in the new prop.
+- 'isHeadingMultiline' prop has been replaced by 'isMultiline' prop on the ModalTitle component.
+- 'appearance' prop has been moved to the ModalTitle component. To achieve the feature parity, pass the 'appearance' prop directly to ModalTitle and Button components inside ModalFooter.
+
+Refer to the docs for the new API at https://atlassian.design/components/modal-dialog/examples
+to complete the migration and use the new composable components.
+`;
+
+export const handlePropSpread = (
+  j: core.JSCodeshift,
+  source: Collection<Node>,
+) => {
+  const defaultSpecifierName = getDefaultSpecifier(j, source, PACKAGE_NAME);
+  const dynamicImportName = getDynamicImportName(j, source, PACKAGE_NAME);
+  const modalDialogComponentName = defaultSpecifierName || dynamicImportName;
+
+  if (!modalDialogComponentName) {
+    return;
+  }
+
+  if (
+    source
+      .findJSXElements(modalDialogComponentName)
+      .filter((element: ASTPath<JSXElement>) => {
+        return (
+          j(element).find(j.JSXOpeningElement).at(0).find(j.JSXSpreadAttribute)
+            .length > 0
+        );
+      }).length
+  ) {
+    addCommentToStartOfFile({ j, base: source, message: comment });
+  }
+};

package/codemods/migrations/inline-WidthNames-declaration.ts

@@ -0,0 +1,92 @@
+import core, {
+  Identifier,
+  TSCallSignatureDeclaration,
+  TSConstructSignatureDeclaration,
+  TSIndexSignature,
+  TSMethodSignature,
+  TSPropertySignature,
+} from 'jscodeshift';
+import { Collection } from 'jscodeshift/src/Collection';
+
+import { getNamedSpecifier, removeImport } from '@atlaskit/codemod-utils';
+
+import {
+  SHARED_VARIABLES_ENDPOINT,
+  WIDTH_NAMES_TYPE_NAME,
+} from '../internal/constants';
+
+export const inlineWidthNamesDeclaration = (
+  j: core.JSCodeshift,
+  source: Collection<Node>,
+) => {
+  const namedSpecifier = getNamedSpecifier(
+    j,
+    source,
+    SHARED_VARIABLES_ENDPOINT,
+    WIDTH_NAMES_TYPE_NAME,
+  );
+
+  if (!namedSpecifier) {
+    return;
+  }
+
+  source.find(j.TSTypeAliasDeclaration).forEach((declaration) => {
+    const annotation = declaration.value.typeAnnotation;
+
+    if (annotation.type === 'TSTypeLiteral') {
+      replaceTypeAnnotationForWidthNames(j, namedSpecifier, annotation.members);
+    }
+  });
+
+  source.find(j.TSInterfaceDeclaration).forEach((declaration) => {
+    replaceTypeAnnotationForWidthNames(
+      j,
+      namedSpecifier,
+      declaration.value.body.body,
+    );
+  });
+
+  /**
+   * Remove import from /shared-variables as it's no longer supported
+   * and this is the only use case of that entry point.
+   */
+  removeImport(j, source, SHARED_VARIABLES_ENDPOINT);
+};
+
+const replaceTypeAnnotationForWidthNames = (
+  j: core.JSCodeshift,
+  specifier: string,
+  typeAnnotations: (
+    | TSPropertySignature
+    | TSCallSignatureDeclaration
+    | TSConstructSignatureDeclaration
+    | TSIndexSignature
+    | TSMethodSignature
+  )[],
+) => {
+  const widthNames = ['small', 'medium', 'large', 'x-large'];
+
+  typeAnnotations
+    .filter((property) => property.type === 'TSPropertySignature')
+    .map((property) => property as TSPropertySignature)
+    .filter((property: TSPropertySignature) => {
+      const typeAnnotation = property.typeAnnotation?.typeAnnotation;
+
+      if (!typeAnnotation) {
+        return false;
+      }
+
+      return (
+        typeAnnotation.type === 'TSTypeReference' &&
+        typeAnnotation.typeName.type === 'Identifier' &&
+        (typeAnnotation.typeName as Identifier).name === specifier
+      );
+    })
+    .forEach((property: TSPropertySignature) => {
+      property.typeAnnotation = j.tsTypeAnnotation(
+        j.tsUnionType(
+          widthNames.map((name) => j.tsLiteralType(j.stringLiteral(name))),
+        ),
+      );
+    });
+};

package/codemods/migrations/map-actions-prop.tsx

@@ -0,0 +1,430 @@
+import core, {
+  ArrayExpression,
+  ASTPath,
+  Collection,
+  Identifier,
+  JSXAttribute,
+  JSXElement,
+  JSXExpressionContainer,
+  ObjectExpression,
+  Property,
+  VariableDeclaration,
+  VariableDeclarator,
+} from 'jscodeshift/src/core';
+
+import {
+  addCommentBefore,
+  addDynamicImport,
+  getDefaultSpecifier,
+  getDynamicImportName,
+  getJSXAttributesByName,
+  getSafeImportName,
+  tryCreateImport,
+} from '@atlaskit/codemod-utils';
+
+import {
+  ACTIONS_PROP_NAME,
+  APPEARANCE_PROP_NAME,
+  AUTOFOCUS_PROP_NAME,
+  BUTTON_COMPONENT_FALLBACK_NAME,
+  BUTTON_COMPONENT_NAME,
+  BUTTON_ENDPOINT,
+  MODAL_FOOTER_COMPONENT_FALLBACK_NAME,
+  MODAL_FOOTER_COMPONENT_NAME,
+  MODAL_FOOTER_ENDPOINT,
+  PACKAGE_NAME,
+} from '../internal/constants';
+import {
+  addToImport,
+  getAppearanceFromProp,
+  getComponentImportName,
+  getVariableDeclarationPathByName,
+} from '../internal/utils';
+
+const comment = `
+In this codemod, we are moving the position of the primary button to the right-hand side of
+modal footer to align with the design guidelines while we convert your usage of 'actions' prop.
+
+However, we could not definitively determine if the 'appearance' prop has been included in the 'actions' prop in this file,
+so in this case, we have converted the 'actions' prop into Button components without moving the position of the primary button.
+To complete the migration and align with the design guidelines, please make the necessary changes manually.`;
+
+export const mapActionsProp = (
+  j: core.JSCodeshift,
+  source: Collection<Node>,
+) => {
+  let isActionsPropPresent;
+  const defaultSpecifierName = getDefaultSpecifier(j, source, PACKAGE_NAME);
+  const buttonDefaultSpecifierName = getDefaultSpecifier(
+    j,
+    source,
+    BUTTON_ENDPOINT,
+  );
+
+  const dynamicImportName = getDynamicImportName(j, source, PACKAGE_NAME);
+  const modalDialogComponentName = defaultSpecifierName || dynamicImportName;
+
+  if (!modalDialogComponentName) {
+    return;
+  }
+  const modalFooterComponentName = getSafeImportName({
+    j,
+    base: source,
+    desiredName: MODAL_FOOTER_COMPONENT_NAME,
+    fallbackName: MODAL_FOOTER_COMPONENT_FALLBACK_NAME,
+    currentDefaultSpecifierName: null,
+  });
+  const buttonComponentName = getSafeImportName({
+    j,
+    base: source,
+    desiredName: BUTTON_COMPONENT_NAME,
+    fallbackName: BUTTON_COMPONENT_FALLBACK_NAME,
+    currentDefaultSpecifierName: buttonDefaultSpecifierName,
+  });
+
+  source
+    .findJSXElements(modalDialogComponentName)
+    .forEach((element: ASTPath<JSXElement>) => {
+      getJSXAttributesByName(j, element, ACTIONS_PROP_NAME).forEach(
+        (attribute: ASTPath<JSXAttribute>) => {
+          const actionsPropValue = (attribute.node
+            .value as JSXExpressionContainer)?.expression;
+
+          if (
+            !actionsPropValue ||
+            actionsPropValue.type === 'JSXEmptyExpression'
+          ) {
+            return;
+          }
+
+          isActionsPropPresent = true;
+
+          j(attribute).remove();
+
+          element.node.openingElement.selfClosing = false;
+          element.node.closingElement = j.jsxClosingElement(
+            j.jsxIdentifier(modalDialogComponentName),
+          );
+
+          const footerComponent = getFooterComponent(
+            j,
+            source,
+            element,
+            modalFooterComponentName,
+            buttonComponentName,
+            actionsPropValue,
+          );
+
+          if (element.node.children) {
+            element.node.children.push(footerComponent, j.jsxText('\n'));
+          } else {
+            element.node.children = [footerComponent, j.jsxText('\n')];
+          }
+        },
+      );
+    });
+
+  if (isActionsPropPresent) {
+    if (defaultSpecifierName) {
+      addToImport(j, source, [
+        getComponentImportName(
+          j,
+          modalFooterComponentName,
+          MODAL_FOOTER_COMPONENT_NAME,
+        ),
+      ]);
+
+      if (!buttonDefaultSpecifierName) {
+        tryCreateImport(j, source, PACKAGE_NAME, BUTTON_ENDPOINT);
+        addToImport(
+          j,
+          source,
+          [j.importDefaultSpecifier(j.identifier(buttonComponentName))],
+          BUTTON_ENDPOINT,
+        );
+      }
+    }
+    if (dynamicImportName) {
+      addDynamicImport(
+        j,
+        getVariableDeclarationPathByName(j, source, dynamicImportName),
+        modalFooterComponentName,
+        MODAL_FOOTER_ENDPOINT,
+      );
+      addDynamicImport(
+        j,
+        getVariableDeclarationPathByName(j, source, dynamicImportName),
+        buttonComponentName,
+        BUTTON_ENDPOINT,
+      );
+    }
+  }
+};
+
+const getAppearanceForButton = (
+  j: core.JSCodeshift,
+  element: ASTPath<JSXElement>,
+  isAppearanceSetInActions: boolean,
+  defaultValue: string,
+) => {
+  const modalDialogAppearance = getAppearanceFromProp(j, element);
+  const shouldUseModalDialogAppearance =
+    modalDialogAppearance && defaultValue === 'primary';
+
+  if (isAppearanceSetInActions && shouldUseModalDialogAppearance) {
+    return j.logicalExpression(
+      '||',
+      j.logicalExpression(
+        '||',
+        j.memberExpression(
+          j.identifier('props'),
+          j.identifier(APPEARANCE_PROP_NAME),
+        ),
+        // @ts-ignore
+        modalDialogAppearance,
+      ),
+      j.stringLiteral(defaultValue),
+    );
+  }
+
+  if (isAppearanceSetInActions && !shouldUseModalDialogAppearance) {
+    return j.logicalExpression(
+      '||',
+      j.memberExpression(
+        j.identifier('props'),
+        j.identifier(APPEARANCE_PROP_NAME),
+      ),
+      j.stringLiteral(defaultValue),
+    );
+  }
+
+  if (!isAppearanceSetInActions && shouldUseModalDialogAppearance) {
+    return j.logicalExpression(
+      '||',
+      // @ts-ignore
+      modalDialogAppearance,
+      j.stringLiteral(defaultValue),
+    );
+  }
+
+  return j.stringLiteral(defaultValue);
+};
+
+const getFooterComponent = (
+  j: core.JSCodeshift,
+  source: Collection<Node>,
+  element: ASTPath<JSXElement>,
+  footerComponentName: string,
+  buttonComponentName: string,
+  actions: any,
+) => {
+  const isAppearanceSetInActions = findAppearanceInActions(
+    j,
+    source,
+    element,
+    actions,
+  );
+
+  return j.jsxElement(
+    j.jsxOpeningElement(j.jsxIdentifier(footerComponentName)),
+    j.jsxClosingElement(j.jsxIdentifier(footerComponentName)),
+    [
+      j.jsxText('\n'),
+      j.jsxExpressionContainer(
+        /**
+         * We reverse the button order only if
+         * appearance is NOT set in actions.
+         */
+        isAppearanceSetInActions
+          ? mapActionsAndKeepOrder(j, element, buttonComponentName, actions)
+          : mapActionsAndReverseOrder(j, element, buttonComponentName, actions),
+      ),
+      j.jsxText('\n'),
+    ],
+  );
+};
+
+const mapActionsAndReverseOrder = (
+  j: core.JSCodeshift,
+  element: core.ASTPath<JSXElement>,
+  buttonComponentName: string,
+  actions: any,
+) => {
+  return j.callExpression(
+    j.memberExpression(
+      j.callExpression(j.memberExpression(actions, j.identifier('map')), [
+        j.arrowFunctionExpression(
+          [j.identifier('props'), j.identifier('index')],
+          j.jsxElement(
+            j.jsxOpeningElement(
+              j.jsxIdentifier(buttonComponentName),
+              getAttributesForReversedButtons(j, element),
+            ),
+            j.jsxClosingElement(j.jsxIdentifier(buttonComponentName)),
+            [
+              j.jsxExpressionContainer(
+                j.memberExpression(j.identifier('props'), j.identifier('text')),
+              ),
+            ],
+          ),
+        ),
+      ]),
+      j.identifier('reverse'),
+    ),
+    [],
+  );
+};
+
+const mapActionsAndKeepOrder = (
+  j: core.JSCodeshift,
+  element: core.ASTPath<JSXElement>,
+  buttonComponentName: string,
+  actions: any,
+) => {
+  return j.callExpression(j.memberExpression(actions, j.identifier('map')), [
+    j.arrowFunctionExpression(
+      [j.identifier('props'), j.identifier('index')],
+      j.jsxElement(
+        j.jsxOpeningElement(
+          j.jsxIdentifier(buttonComponentName),
+          getAttributesForButtons(j, element),
+        ),
+        j.jsxClosingElement(j.jsxIdentifier(buttonComponentName)),
+        [
+          j.jsxExpressionContainer(
+            j.memberExpression(j.identifier('props'), j.identifier('text')),
+          ),
+        ],
+      ),
+    ),
+  ]);
+};
+
+const getAttributesForReversedButtons = (
+  j: core.JSCodeshift,
+  element: core.ASTPath<JSXElement>,
+) => {
+  return [
+    j.jsxSpreadAttribute(j.identifier('props')),
+    j.jsxAttribute(
+      j.jsxIdentifier(AUTOFOCUS_PROP_NAME),
+      j.jsxExpressionContainer(
+        j.binaryExpression('===', j.identifier('index'), j.numericLiteral(0)),
+      ),
+    ),
+    j.jsxAttribute(
+      j.jsxIdentifier(APPEARANCE_PROP_NAME),
+      j.jsxExpressionContainer(
+        j.conditionalExpression(
+          j.binaryExpression('===', j.identifier('index'), j.numericLiteral(0)),
+          /**
+           * This function is called only when appearance is NOT found
+           * in actions – hence hardcoding it to 'false'.
+           */
+          getAppearanceForButton(j, element, false, 'primary'),
+          getAppearanceForButton(j, element, false, 'subtle'),
+        ),
+      ),
+    ),
+  ];
+};
+
+const getAttributesForButtons = (
+  j: core.JSCodeshift,
+  element: core.ASTPath<JSXElement>,
+) => {
+  return [
+    j.jsxSpreadAttribute(j.identifier('props')),
+    j.jsxAttribute(
+      j.jsxIdentifier(APPEARANCE_PROP_NAME),
+      j.jsxExpressionContainer(
+        j.conditionalExpression(
+          j.binaryExpression('===', j.identifier('index'), j.numericLiteral(0)),
+          /**
+           * This function is called only when appearance is found
+           * in actions – hence hardcoding it to 'true'.
+           */
+          getAppearanceForButton(j, element, true, 'primary'),
+          getAppearanceForButton(j, element, true, 'subtle'),
+        ),
+      ),
+    ),
+  ];
+};
+
+const findAppearanceInActions = (
+  j: core.JSCodeshift,
+  source: Collection<Node>,
+  element: core.ASTPath<JSXElement>,
+  actions: any,
+) => {
+  if (actions.type === 'Identifier') {
+    const actionPropVariableName = (actions as Identifier).name;
+
+    const actionsVariableDeclaration = getVariableDeclarationByName(
+      source,
+      j,
+      actionPropVariableName,
+    );
+
+    /**
+     * If there are multiple variables declared with the same name,
+     * we assume that it is and keep the button order the same.
+     */
+    if (actionsVariableDeclaration.length > 1) {
+      addCommentBefore(j, j(element), comment);
+
+      return true;
+    } else {
+      /**
+       * If actions prop is declared as variable, and we can find the declaration
+       * in the same file, we check if there's any appearance property set.
+       */
+      const actionPropVariableValue = (actionsVariableDeclaration as any)?.nodes()[0]
+        .declarations[0]?.init;
+
+      return checkAppearancePropertyExistence(actionPropVariableValue);
+    }
+  } else if (actions.type === 'ArrayExpression') {
+    /**
+     * If actions prop is declared inline, we check if there's any appearance property set.
+     */
+    return checkAppearancePropertyExistence(actions);
+  } else {
+    /**
+     * If we cannot definitively determine whether appearance is set in any of the actions,
+     * we assume that it is and keep the button order the same.
+     */
+    return true;
+  }
+};
+
+const checkAppearancePropertyExistence = (actions: any) => {
+  return (actions as ArrayExpression).elements.some((elem) => {
+    return (elem as ObjectExpression).properties.some((property) => {
+      return (
+        ((property as Property).key as Identifier).name === APPEARANCE_PROP_NAME
+      );
+    });
+  });
+};
+
+const getVariableDeclarationByName = (
+  source: core.Collection<Node>,
+  j: core.JSCodeshift,
+  variableName: string,
+) => {
+  return source
+    .find(j.VariableDeclaration)
+    .filter((variableDeclaration: ASTPath<VariableDeclaration>) => {
+      return variableDeclaration.node.declarations.some(
+        (variableDeclarator) => {
+          const variableDeclaratorTyped = variableDeclarator as VariableDeclarator;
+          return (
+            variableDeclaratorTyped.id.type === 'Identifier' &&
+            variableDeclaratorTyped.id.name === variableName
+          );
+        },
+      );
+    });
+};