@atlaskit/modal-dialog 12.0.2

package/codemods/migrations/map-body-from-props.ts

@@ -0,0 +1,147 @@
+import core, { ASTPath, JSXElement } from 'jscodeshift';
+import { Collection } from 'jscodeshift/src/Collection';
+
+import {
+  addDynamicImport,
+  getDefaultSpecifier,
+  getDynamicImportName,
+  getNamedSpecifier,
+  getSafeImportName,
+} from '@atlaskit/codemod-utils';
+
+import {
+  BODY_PROP_NAME,
+  COMPONENTS_PROP_NAME,
+  MODAL_BODY_COMPONENT_FALLBACK_NAME,
+  MODAL_BODY_COMPONENT_NAME,
+  MODAL_BODY_ENDPOINT,
+  PACKAGE_NAME,
+} from '../internal/constants';
+import {
+  addToImport,
+  getComponentImportName,
+  getOverrideFromComponentsProp,
+  getOverrideFromIndividualProp,
+  getVariableDeclarationPathByName,
+  replaceChildren,
+} from '../internal/utils';
+
+export const mapBodyFromProps = (
+  j: core.JSCodeshift,
+  source: Collection<Node>,
+) => {
+  const defaultSpecifier = getDefaultSpecifier(j, source, PACKAGE_NAME);
+  const dynamicImportSpecifier = getDynamicImportName(j, source, PACKAGE_NAME);
+  const modalDialogComponentName = defaultSpecifier || dynamicImportSpecifier;
+
+  if (!modalDialogComponentName) {
+    return;
+  }
+
+  let shouldImportModalBody;
+
+  const modalBodySpecifier = getNamedSpecifier(
+    j,
+    source,
+    PACKAGE_NAME,
+    MODAL_BODY_COMPONENT_NAME,
+  );
+
+  const modalBodyComponentName =
+    modalBodySpecifier ||
+    getSafeImportName({
+      j,
+      base: source,
+      currentDefaultSpecifierName: null,
+      desiredName: MODAL_BODY_COMPONENT_NAME,
+      fallbackName: MODAL_BODY_COMPONENT_FALLBACK_NAME,
+    });
+
+  source
+    .findJSXElements(modalDialogComponentName)
+    .forEach((element: ASTPath<JSXElement>) => {
+      const bodyFromIndividualProp = getOverrideFromIndividualProp(
+        j,
+        element,
+        BODY_PROP_NAME,
+      );
+      const bodyFromComponentsProp = getOverrideFromComponentsProp(
+        j,
+        element,
+        COMPONENTS_PROP_NAME,
+        'Body',
+      );
+
+      /**
+       * If both overrides are declared, use the body passed to the components prop
+       * to replicate the logic in the source code (pre-lite mode).
+       */
+      const body = bodyFromComponentsProp || bodyFromIndividualProp;
+
+      if (!body) {
+        const isSelfClosing = j(element)
+          .find(j.JSXOpeningElement)
+          .at(0)
+          .get('selfClosing').value;
+
+        /**
+         * We only wrap the default ModalBody around the remaining children
+         * if the consumer hasn't already imported/used it, and if
+         * their ModalDialog is not self-closing (because that means
+         * there's no children to be wrapped around).
+         */
+        if (isSelfClosing || modalBodySpecifier) {
+          return;
+        }
+
+        shouldImportModalBody = true;
+
+        const wrappedChildren = j.jsxElement(
+          j.jsxOpeningElement(j.jsxIdentifier(modalBodyComponentName)),
+          j.jsxClosingElement(j.jsxIdentifier(modalBodyComponentName)),
+          element.value.children,
+        );
+
+        replaceChildren(j, element, modalDialogComponentName, wrappedChildren);
+
+        return;
+      }
+
+      const props = j.objectExpression([
+        j.objectProperty(
+          j.identifier('children'),
+          j.jsxFragment(
+            j.jsxOpeningFragment(),
+            j.jsxClosingFragment(),
+            element.value.children,
+          ),
+        ),
+      ]);
+
+      replaceChildren(
+        j,
+        element,
+        modalDialogComponentName,
+        j.jsxExpressionContainer(j.callExpression(body, [props])),
+      );
+    });
+
+  if (shouldImportModalBody) {
+    if (defaultSpecifier) {
+      addToImport(j, source, [
+        getComponentImportName(
+          j,
+          modalBodyComponentName,
+          MODAL_BODY_COMPONENT_NAME,
+        ),
+      ]);
+    } else if (dynamicImportSpecifier) {
+      addDynamicImport(
+        j,
+        getVariableDeclarationPathByName(j, source, dynamicImportSpecifier),
+        modalBodyComponentName,
+        MODAL_BODY_ENDPOINT,
+      );
+    }
+  }
+};

package/codemods/migrations/map-container-from-props.ts

@@ -0,0 +1,72 @@
+import core, { ASTPath, JSXElement, StringLiteral } from 'jscodeshift';
+import { Collection } from 'jscodeshift/src/Collection';
+
+import { getDefaultSpecifier } from '@atlaskit/codemod-utils';
+
+import { COMPONENTS_PROP_NAME, PACKAGE_NAME } from '../internal/constants';
+import {
+  getOverrideFromComponentsProp,
+  replaceChildren,
+} from '../internal/utils';
+
+export const mapContainerFromProps = (
+  j: core.JSCodeshift,
+  source: Collection<Node>,
+) => {
+  const defaultSpecifier = getDefaultSpecifier(j, source, PACKAGE_NAME);
+
+  if (!defaultSpecifier) {
+    return;
+  }
+
+  source
+    .findJSXElements(defaultSpecifier)
+    .forEach((element: ASTPath<JSXElement>) => {
+      const container = getOverrideFromComponentsProp(
+        j,
+        element,
+        COMPONENTS_PROP_NAME,
+        'Container',
+      );
+
+      if (!container) {
+        return;
+      }
+
+      if ((container as StringLiteral).type === 'StringLiteral') {
+        const wrappedChildren = j.jsxElement(
+          j.jsxOpeningElement(
+            j.jsxIdentifier((container as StringLiteral).value),
+          ),
+          j.jsxClosingElement(
+            j.jsxIdentifier((container as StringLiteral).value),
+          ),
+          element.value.children,
+        );
+
+        replaceChildren(j, element, defaultSpecifier, wrappedChildren);
+
+        return;
+      } else {
+        const props = j.objectExpression([
+          j.objectProperty(
+            j.identifier('children'),
+            j.jsxFragment(
+              j.jsxOpeningFragment(),
+              j.jsxClosingFragment(),
+              element.value.children,
+            ),
+          ),
+        ]);
+
+        replaceChildren(
+          j,
+          element,
+          defaultSpecifier,
+          j.jsxExpressionContainer(j.callExpression(container, [props])),
+        );
+
+        return;
+      }
+    });
+};

package/codemods/migrations/map-footer-from-props.ts

@@ -0,0 +1,107 @@
+import core, {
+  ASTPath,
+  JSXElement,
+  JSXExpressionContainer,
+  JSXFragment,
+  JSXSpreadChild,
+} from 'jscodeshift';
+import { Collection } from 'jscodeshift/src/Collection';
+
+import { getDefaultSpecifier } from '@atlaskit/codemod-utils';
+
+import {
+  APPEARANCE_PROP_NAME,
+  COMPONENTS_PROP_NAME,
+  FOOTER_PROP_NAME,
+  PACKAGE_NAME,
+} from '../internal/constants';
+import {
+  getAppearanceFromProp,
+  getOverrideFromComponentsProp,
+  getOverrideFromIndividualProp,
+} from '../internal/utils';
+
+export const mapFooterFromProps = (
+  j: core.JSCodeshift,
+  source: Collection<Node>,
+) => {
+  const defaultSpecifier = getDefaultSpecifier(j, source, PACKAGE_NAME);
+
+  if (!defaultSpecifier) {
+    return;
+  }
+
+  source
+    .findJSXElements(defaultSpecifier)
+    .forEach((element: ASTPath<JSXElement>) => {
+      const footerFromIndividualProp = getOverrideFromIndividualProp(
+        j,
+        element,
+        FOOTER_PROP_NAME,
+      );
+      const footerFromComponentsProp = getOverrideFromComponentsProp(
+        j,
+        element,
+        COMPONENTS_PROP_NAME,
+        'Footer',
+      );
+
+      /**
+       * If declared, use the footer passed to the components prop
+       * to replicate the logic in the source code (pre-lite mode).
+       */
+      const footer = footerFromComponentsProp || footerFromIndividualProp;
+
+      if (!footer) {
+        return;
+      }
+
+      const appearance = getAppearanceFromProp(j, element);
+      const props = appearance
+        ? [
+            j.objectExpression([
+              j.objectProperty(j.identifier(APPEARANCE_PROP_NAME), appearance),
+            ]),
+          ]
+        : [];
+
+      appendFooterAsLastChild(
+        j,
+        element,
+        defaultSpecifier,
+        j.jsxExpressionContainer(j.callExpression(footer, props)),
+      );
+    });
+};
+
+const appendFooterAsLastChild = (
+  j: core.JSCodeshift,
+  element: ASTPath<JSXElement>,
+  specifier: string,
+  footer: JSXElement | JSXExpressionContainer | JSXFragment | JSXSpreadChild,
+) => {
+  const children = element.node.children
+    ? element.node.children.concat([footer, j.jsxText('\n')])
+    : [footer, j.jsxText('\n')];
+
+  j(element)
+    .find(j.JSXOpeningElement)
+    .forEach((openingElement) => {
+      const openingElementName = openingElement.value.name;
+      if (
+        openingElementName.type === 'JSXIdentifier' &&
+        openingElementName.name === specifier
+      ) {
+        j(element).replaceWith(
+          j.jsxElement(
+            j.jsxOpeningElement(
+              j.jsxIdentifier(specifier),
+              openingElement.value.attributes,
+            ),
+            j.jsxClosingElement(j.jsxIdentifier(specifier)),
+            children,
+          ),
+        );
+      }
+    });
+};

package/codemods/migrations/map-header-from-props.ts

@@ -0,0 +1,101 @@
+import core, { ASTPath, JSXElement } from 'jscodeshift';
+import { Collection } from 'jscodeshift/src/Collection';
+
+import { getDefaultSpecifier } from '@atlaskit/codemod-utils';
+
+import {
+  APPEARANCE_PROP_NAME,
+  COMPONENTS_PROP_NAME,
+  HEADER_PROP_NAME,
+  PACKAGE_NAME,
+} from '../internal/constants';
+import {
+  getAppearanceFromProp,
+  getOverrideFromComponentsProp,
+  getOverrideFromIndividualProp,
+} from '../internal/utils';
+
+export const mapHeaderFromProps = (
+  j: core.JSCodeshift,
+  source: Collection<Node>,
+) => {
+  const defaultSpecifier = getDefaultSpecifier(j, source, PACKAGE_NAME);
+
+  if (!defaultSpecifier) {
+    return;
+  }
+
+  source
+    .findJSXElements(defaultSpecifier)
+    .forEach((element: ASTPath<JSXElement>) => {
+      const headerFromIndividualProp = getOverrideFromIndividualProp(
+        j,
+        element,
+        HEADER_PROP_NAME,
+      );
+      const headerFromComponentsProp = getOverrideFromComponentsProp(
+        j,
+        element,
+        COMPONENTS_PROP_NAME,
+        'Header',
+      );
+
+      /**
+       * If declared, use the header passed to the components prop
+       * to replicate the logic in the source code (pre-lite mode).
+       */
+      const header = headerFromComponentsProp || headerFromIndividualProp;
+
+      if (!header) {
+        return;
+      }
+
+      const appearance = getAppearanceFromProp(j, element);
+      const props = appearance
+        ? [
+            j.objectExpression([
+              j.objectProperty(j.identifier(APPEARANCE_PROP_NAME), appearance),
+            ]),
+          ]
+        : [];
+
+      appendHeaderAsFirstChild(
+        j,
+        element,
+        defaultSpecifier,
+        j.jsxExpressionContainer(j.callExpression(header, props)),
+      );
+    });
+};
+
+const appendHeaderAsFirstChild = (
+  j: core.JSCodeshift,
+  element: ASTPath<JSXElement>,
+  specifier: string,
+  header: any,
+) => {
+  const children = element.node.children
+    ? [j.jsxText('\n'), header].concat(element.node.children)
+    : [j.jsxText('\n'), header];
+
+  j(element)
+    .find(j.JSXOpeningElement)
+    .forEach((openingElement) => {
+      const openingElementName = openingElement.value.name;
+      if (
+        openingElementName.type === 'JSXIdentifier' &&
+        openingElementName.name === specifier
+      ) {
+        j(element).replaceWith(
+          j.jsxElement(
+            j.jsxOpeningElement(
+              j.jsxIdentifier(specifier),
+              openingElement.value.attributes,
+            ),
+            j.jsxClosingElement(j.jsxIdentifier(specifier)),
+            children,
+          ),
+        );
+      }
+    });
+};

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

@@ -0,0 +1,193 @@
+import core, {
+  ASTPath,
+  Collection,
+  JSXAttribute,
+  JSXElement,
+  StringLiteral,
+} from 'jscodeshift/src/core';
+
+import {
+  addDynamicImport,
+  getDefaultSpecifier,
+  getDynamicImportName,
+  getJSXAttributesByName,
+  getSafeImportName,
+} from '@atlaskit/codemod-utils';
+
+import {
+  APPEARANCE_PROP_NAME,
+  HEADING_PROP_NAME,
+  IS_MULTILINE_PROP_NAME,
+  MODAL_HEADER_COMPONENT_FALLBACK_NAME,
+  MODAL_HEADER_COMPONENT_NAME,
+  MODAL_HEADER_ENDPOINT,
+  MODAL_TITLE_COMPONENT_FALLBACK_NAME,
+  MODAL_TITLE_COMPONENT_NAME,
+  MODAL_TITLE_ENDPOINT,
+  PACKAGE_NAME,
+} from '../internal/constants';
+import {
+  addToImport,
+  getAppearanceFromProp,
+  getComponentImportName,
+  getIsMultilineFromProp,
+  getVariableDeclarationPathByName,
+} from '../internal/utils';
+
+export const mapHeadingPropToModalTitle = (
+  j: core.JSCodeshift,
+  source: Collection<Node>,
+) => {
+  let doesHeadingPropExist;
+  const defaultSpecifierName = getDefaultSpecifier(j, source, PACKAGE_NAME);
+  const dynamicImportName = getDynamicImportName(j, source, PACKAGE_NAME);
+  const modalDialogComponentName = defaultSpecifierName || dynamicImportName;
+
+  if (!modalDialogComponentName) {
+    return;
+  }
+
+  const modalHeaderComponentName = getSafeImportName({
+    j,
+    base: source,
+    currentDefaultSpecifierName: null,
+    desiredName: MODAL_HEADER_COMPONENT_NAME,
+    fallbackName: MODAL_HEADER_COMPONENT_FALLBACK_NAME,
+  });
+  const modalTitleComponentName = getSafeImportName({
+    j,
+    base: source,
+    currentDefaultSpecifierName: null,
+    desiredName: MODAL_TITLE_COMPONENT_NAME,
+    fallbackName: MODAL_TITLE_COMPONENT_FALLBACK_NAME,
+  });
+
+  source
+    .findJSXElements(modalDialogComponentName)
+    .forEach((element: ASTPath<JSXElement>) => {
+      getJSXAttributesByName(j, element, HEADING_PROP_NAME).forEach(
+        (attribute: ASTPath<JSXAttribute>) => {
+          const headingPropValue = attribute.node.value;
+          doesHeadingPropExist = true;
+
+          j(attribute).remove();
+          element.node.openingElement.selfClosing = false;
+          element.node.closingElement = j.jsxClosingElement(
+            j.jsxIdentifier(modalDialogComponentName),
+          );
+
+          const headerComponent = getHeaderComponent(
+            j,
+            element,
+            modalHeaderComponentName,
+            modalTitleComponentName,
+            headingPropValue,
+          );
+
+          if (element.node.children) {
+            element.node.children.unshift(
+              j.jsxText('\n'),
+              headerComponent,
+              j.jsxText('\n'),
+            );
+          } else {
+            element.node.children = [
+              j.jsxText('\n'),
+              headerComponent,
+              j.jsxText('\n'),
+            ];
+          }
+        },
+      );
+    });
+
+  if (doesHeadingPropExist) {
+    if (defaultSpecifierName) {
+      addToImport(j, source, [
+        getComponentImportName(
+          j,
+          modalTitleComponentName,
+          MODAL_TITLE_COMPONENT_NAME,
+        ),
+        getComponentImportName(
+          j,
+          modalHeaderComponentName,
+          MODAL_HEADER_COMPONENT_NAME,
+        ),
+      ]);
+    } else if (dynamicImportName) {
+      addDynamicImport(
+        j,
+        getVariableDeclarationPathByName(j, source, dynamicImportName),
+        modalHeaderComponentName,
+        MODAL_HEADER_ENDPOINT,
+      );
+      addDynamicImport(
+        j,
+        getVariableDeclarationPathByName(j, source, dynamicImportName),
+        modalTitleComponentName,
+        MODAL_TITLE_ENDPOINT,
+      );
+    }
+  }
+};
+
+const getModalTitleAttributes = (
+  j: core.JSCodeshift,
+  element: ASTPath<JSXElement>,
+) => {
+  const appearance = getAppearanceFromProp(j, element);
+  const isMultiline = getIsMultilineFromProp(j, element);
+
+  const attributes = [];
+
+  if (appearance !== undefined) {
+    const appearanceValue =
+      (appearance as StringLiteral).type === 'StringLiteral'
+        ? appearance
+        : j.jsxExpressionContainer(appearance);
+
+    const appearanceAttr = j.jsxAttribute(
+      j.jsxIdentifier(APPEARANCE_PROP_NAME),
+      appearanceValue,
+    );
+
+    attributes.push(appearanceAttr);
+  }
+
+  if (isMultiline !== undefined) {
+    const isMultilineAttr = j.jsxAttribute(
+      j.jsxIdentifier(IS_MULTILINE_PROP_NAME),
+      isMultiline ? j.jsxExpressionContainer(isMultiline) : isMultiline,
+    );
+
+    attributes.push(isMultilineAttr);
+  }
+
+  return attributes;
+};
+
+const getHeaderComponent = (
+  j: core.JSCodeshift,
+  element: ASTPath<JSXElement>,
+  headerComponentName: string,
+  titleComponentName: string,
+  heading: any,
+) => {
+  return j.jsxElement(
+    j.jsxOpeningElement(j.jsxIdentifier(headerComponentName)),
+    j.jsxClosingElement(j.jsxIdentifier(headerComponentName)),
+    [
+      j.jsxText('\n'),
+      j.jsxElement(
+        j.jsxOpeningElement(
+          j.jsxIdentifier(titleComponentName),
+          getModalTitleAttributes(j, element),
+        ),
+        j.jsxClosingElement(j.jsxIdentifier(titleComponentName)),
+        [j.jsxText('\n'), heading, j.jsxText('\n')],
+      ),
+      j.jsxText('\n'),
+    ],
+  );
+};