@atlaskit/modal-dialog 12.0.2

package/codemods/__tests__/rename-scrollBehavior-to-shouldScrollInViewport.test.ts

@@ -0,0 +1,237 @@
+import { createTransformer } from '@atlaskit/codemod-utils';
+
+import { renameScrollBehaviorToShouldScrollInViewport } from '../migrations/rename-scrollBehavior-to-shouldScrollInViewport';
+
+const transformer = createTransformer([
+  renameScrollBehaviorToShouldScrollInViewport,
+]);
+
+const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
+
+describe('rename scrollBehavior prop', () => {
+  ['tsx', 'babylon'].forEach((parser) => {
+    describe(`parser: ${parser}`, () => {
+      defineInlineTest(
+        { default: transformer, parser },
+        {},
+        `
+    import React from 'react';
+
+    import ModalDialog from '@atlaskit/modal-dialog';
+
+    export default function modalDialog() {
+      return (
+        <ModalDialog
+          testId="modal-dialog"
+          scrollBehavior="outside"
+          appearance="warning"
+        >
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          Proin aliquet faucibus velit id ornare. Nam urna ante, consequat
+          vitae viverra non, hendrerit in lorem. Sed fringilla dolor
+          eget nisi eleifend lacinia ut a ligula.
+        </ModalDialog>
+      );
+    }
+    `,
+        `
+    import React from 'react';
+
+    import ModalDialog from '@atlaskit/modal-dialog';
+
+    export default function modalDialog() {
+      return (
+        <ModalDialog
+          testId="modal-dialog"
+          shouldScrollInViewport
+          appearance="warning"
+        >
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          Proin aliquet faucibus velit id ornare. Nam urna ante, consequat
+          vitae viverra non, hendrerit in lorem. Sed fringilla dolor
+          eget nisi eleifend lacinia ut a ligula.
+        </ModalDialog>
+      );
+    }
+    `,
+        'should change scrollBehavior="outside" to shouldScrollInViewport',
+      );
+
+      defineInlineTest(
+        { default: transformer, parser },
+        {},
+        `
+    import React from 'react';
+
+    import ModalDialog from '@atlaskit/modal-dialog';
+
+    export default function modalDialog() {
+      return (
+        <ModalDialog
+          testId="modal-dialog"
+          scrollBehavior="inside"
+          appearance="warning"
+        >
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          Proin aliquet faucibus velit id ornare. Nam urna ante, consequat
+          vitae viverra non, hendrerit in lorem. Sed fringilla dolor
+          eget nisi eleifend lacinia ut a ligula.
+        </ModalDialog>
+      );
+    }
+    `,
+        `
+    import React from 'react';
+
+    import ModalDialog from '@atlaskit/modal-dialog';
+
+    export default function modalDialog() {
+      return (
+        <ModalDialog testId="modal-dialog" appearance="warning">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          Proin aliquet faucibus velit id ornare. Nam urna ante, consequat
+          vitae viverra non, hendrerit in lorem. Sed fringilla dolor
+          eget nisi eleifend lacinia ut a ligula.
+        </ModalDialog>
+      );
+    }
+    `,
+        'should remove scrollBehavior="inside" as it is default behaviour',
+      );
+
+      defineInlineTest(
+        { default: transformer, parser },
+        {},
+        `
+    import React from 'react';
+
+    import ModalDialog from '@atlaskit/modal-dialog';
+
+    export default function modalDialog() {
+      return (
+        <ModalDialog
+          testId="modal-dialog"
+          scrollBehavior="inside-wide"
+          appearance="warning"
+        >
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          Proin aliquet faucibus velit id ornare. Nam urna ante, consequat
+          vitae viverra non, hendrerit in lorem. Sed fringilla dolor
+          eget nisi eleifend lacinia ut a ligula.
+        </ModalDialog>
+      );
+    }
+    `,
+        `
+    import React from 'react';
+
+    import ModalDialog from '@atlaskit/modal-dialog';
+
+    export default function modalDialog() {
+      return (
+        <ModalDialog testId="modal-dialog" appearance="warning">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          Proin aliquet faucibus velit id ornare. Nam urna ante, consequat
+          vitae viverra non, hendrerit in lorem. Sed fringilla dolor
+          eget nisi eleifend lacinia ut a ligula.
+        </ModalDialog>
+      );
+    }
+    `,
+        'should remove scrollBehavior="inside-wide" as it is now default behaviour',
+      );
+
+      defineInlineTest(
+        { default: transformer, parser },
+        {},
+        `
+    import React from 'react';
+
+    import ModalDialog from '@atlaskit/modal-dialog';
+
+    export default function modalDialog() {
+      return (
+        <ModalDialog
+          testId="modal-dialog"
+          scrollBehavior={scrollBehavior}
+          appearance="warning"
+        >
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          Proin aliquet faucibus velit id ornare. Nam urna ante, consequat
+          vitae viverra non, hendrerit in lorem. Sed fringilla dolor
+          eget nisi eleifend lacinia ut a ligula.
+        </ModalDialog>
+      );
+    }
+    `,
+        `
+    import React from 'react';
+
+    import ModalDialog from '@atlaskit/modal-dialog';
+
+    export default function modalDialog() {
+      return (
+        <ModalDialog
+          testId="modal-dialog"
+          shouldScrollInViewport={scrollBehavior === "outside"}
+          appearance="warning"
+        >
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          Proin aliquet faucibus velit id ornare. Nam urna ante, consequat
+          vitae viverra non, hendrerit in lorem. Sed fringilla dolor
+          eget nisi eleifend lacinia ut a ligula.
+        </ModalDialog>
+      );
+    }
+    `,
+        'should assert scrollBehavior variable to convert to shouldScrollInViewport',
+      );
+
+      defineInlineTest(
+        { default: transformer, parser },
+        {},
+        `
+    import React from 'react';
+
+    import ModalDialog from '@atlaskit/modal-dialog';
+
+    export default function modalDialog() {
+      return (
+        <ModalDialog
+          testId="modal-dialog"
+          scrollBehavior={"outside"}
+          appearance="warning"
+        >
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          Proin aliquet faucibus velit id ornare. Nam urna ante, consequat
+          vitae viverra non, hendrerit in lorem. Sed fringilla dolor
+          eget nisi eleifend lacinia ut a ligula.
+        </ModalDialog>
+      );
+    }
+    `,
+        `
+    import React from 'react';
+
+    import ModalDialog from '@atlaskit/modal-dialog';
+
+    export default function modalDialog() {
+      return (
+        <ModalDialog
+          testId="modal-dialog"
+          shouldScrollInViewport
+          appearance="warning"
+        >
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          Proin aliquet faucibus velit id ornare. Nam urna ante, consequat
+          vitae viverra non, hendrerit in lorem. Sed fringilla dolor
+          eget nisi eleifend lacinia ut a ligula.
+        </ModalDialog>
+      );
+    }
+    `,
+        'should change scrollBehavior value passed in an expression container to shouldScrollInViewport',
+      );
+    });
+  });
+});

package/codemods/internal/constants.tsx

@@ -0,0 +1,41 @@
+export const PACKAGE_NAME = '@atlaskit/modal-dialog';
+
+export const ACTIONS_PROP_NAME = 'actions';
+export const HEADING_PROP_NAME = 'heading';
+export const HEADER_PROP_NAME = 'header';
+export const BODY_PROP_NAME = 'body';
+export const FOOTER_PROP_NAME = 'footer';
+export const APPEARANCE_PROP_NAME = 'appearance';
+export const AUTOFOCUS_PROP_NAME = 'autoFocus';
+export const COMPONENTS_PROP_NAME = 'components';
+export const IS_HEADING_MULTILINE_PROP_NAME = 'isHeadingMultiline';
+export const IS_MULTILINE_PROP_NAME = 'isMultiline';
+export const IS_CHROMELESS_PROP_NAME = 'isChromeless';
+
+export const SHARED_VARIABLES_ENDPOINT = `${PACKAGE_NAME}/shared-variables`;
+export const WIDTH_NAMES_TYPE_NAME = 'WidthNames';
+
+export const MODAL_HEADER_COMPONENT_NAME = 'ModalHeader';
+export const MODAL_HEADER_COMPONENT_FALLBACK_NAME = 'AKModalHeader';
+export const MODAL_HEADER_TYPE_NAME = `${MODAL_HEADER_COMPONENT_NAME}Props`;
+export const MODAL_HEADER_ENDPOINT = `${PACKAGE_NAME}/modal-header`;
+
+export const MODAL_TITLE_COMPONENT_NAME = 'ModalTitle';
+export const MODAL_TITLE_COMPONENT_FALLBACK_NAME = 'AKModalTitle';
+export const MODAL_TITLE_TYPE_NAME = `${MODAL_TITLE_COMPONENT_NAME}Props`;
+export const MODAL_TITLE_ENDPOINT = `${PACKAGE_NAME}/modal-title`;
+
+export const MODAL_BODY_COMPONENT_NAME = 'ModalBody';
+export const MODAL_BODY_COMPONENT_FALLBACK_NAME = 'AKModalBody';
+export const MODAL_BODY_TYPE_NAME = `${MODAL_BODY_COMPONENT_NAME}Props`;
+export const MODAL_BODY_ENDPOINT = `${PACKAGE_NAME}/modal-body`;
+
+export const MODAL_FOOTER_COMPONENT_NAME = 'ModalFooter';
+export const MODAL_FOOTER_COMPONENT_FALLBACK_NAME = 'AKModalFooter';
+export const MODAL_FOOTER_TYPE_NAME = `${MODAL_FOOTER_COMPONENT_NAME}Props`;
+export const MODAL_FOOTER_ENDPOINT = `${PACKAGE_NAME}/modal-footer`;
+
+export const BUTTON_PACKAGE_NAME = '@atlaskit/button';
+export const BUTTON_COMPONENT_NAME = 'Button';
+export const BUTTON_COMPONENT_FALLBACK_NAME = 'AKButton';
+export const BUTTON_ENDPOINT = `${BUTTON_PACKAGE_NAME}/standard-button`;

package/codemods/internal/utils.tsx

@@ -0,0 +1,223 @@
+import core, {
+  ASTPath,
+  ImportDeclaration,
+  ImportDefaultSpecifier,
+  ImportNamespaceSpecifier,
+  ImportSpecifier,
+  JSXAttribute,
+  JSXElement,
+  JSXExpressionContainer,
+  JSXFragment,
+  JSXSpreadChild,
+  ObjectExpression,
+  ObjectProperty,
+  StringLiteral,
+  VariableDeclaration,
+  VariableDeclarator,
+} from 'jscodeshift';
+import { Collection } from 'jscodeshift/src/Collection';
+
+import { getJSXAttributesByName } from '@atlaskit/codemod-utils';
+
+import {
+  APPEARANCE_PROP_NAME,
+  IS_HEADING_MULTILINE_PROP_NAME,
+  PACKAGE_NAME,
+} from './constants';
+
+export const getOverrideFromIndividualProp = (
+  j: core.JSCodeshift,
+  element: ASTPath<JSXElement>,
+  attributeName: string,
+) => {
+  let override;
+  getJSXAttributesByName(j, element, attributeName).forEach(
+    (attribute: ASTPath<JSXAttribute>) => {
+      const { value } = attribute.node;
+
+      if (value && value.type === 'JSXExpressionContainer') {
+        override = (value as JSXExpressionContainer).expression;
+      }
+    },
+  );
+
+  return override;
+};
+
+export const getOverrideFromComponentsProp = (
+  j: core.JSCodeshift,
+  element: ASTPath<JSXElement>,
+  attributeName: string,
+  keyName: string,
+) => {
+  let override;
+  getJSXAttributesByName(j, element, attributeName).forEach(
+    (attribute: ASTPath<JSXAttribute>) => {
+      const { value } = attribute.node;
+
+      if (value && value.type === 'JSXExpressionContainer') {
+        if (
+          (value as JSXExpressionContainer).expression.type ===
+          'ObjectExpression'
+        ) {
+          const valueExpression = value.expression as ObjectExpression;
+          const overrideFromComponentsProp = valueExpression.properties
+            .filter((property) => property.type === 'ObjectProperty')
+            .map((property) => property as ObjectProperty)
+            .find(
+              (property: ObjectProperty) =>
+                property.key.type === 'Identifier' &&
+                property.key.name === keyName,
+            );
+
+          if (overrideFromComponentsProp) {
+            override = overrideFromComponentsProp.value;
+            valueExpression.properties = valueExpression.properties.filter(
+              (property: any) => property !== overrideFromComponentsProp,
+            );
+          }
+        }
+      }
+    },
+  );
+
+  return override;
+};
+
+export const getAppearanceFromProp = (
+  j: core.JSCodeshift,
+  element: ASTPath<JSXElement>,
+) => {
+  let appearance;
+  getJSXAttributesByName(j, element, APPEARANCE_PROP_NAME).forEach(
+    (attribute: ASTPath<JSXAttribute>) => {
+      const { value } = attribute.node;
+
+      if (value && value.type === 'StringLiteral') {
+        // <ModalDialog appearance="warning" />
+        appearance = j.stringLiteral((value as StringLiteral).value);
+      } else if (value && value.type === 'JSXExpressionContainer') {
+        // <ModalDialog appearance={appearance} />
+        appearance = (value as JSXExpressionContainer).expression;
+      }
+    },
+  );
+
+  return appearance;
+};
+
+export const getIsMultilineFromProp = (
+  j: core.JSCodeshift,
+  element: ASTPath<JSXElement>,
+) => {
+  let isMultiline;
+  getJSXAttributesByName(j, element, IS_HEADING_MULTILINE_PROP_NAME).forEach(
+    (attribute: ASTPath<JSXAttribute>) => {
+      const { value } = attribute.node;
+      if (value === null) {
+        // <ModalDialog isHeadingMultiline />
+        isMultiline = value;
+        j(attribute).remove();
+      } else if (value && value.type === 'JSXExpressionContainer') {
+        // <ModalDialog isHeadingMultiline={true} />
+        isMultiline = (value as JSXExpressionContainer).expression;
+        j(attribute).remove();
+      }
+    },
+  );
+
+  return isMultiline;
+};
+
+export const replaceChildren = (
+  j: core.JSCodeshift,
+  element: ASTPath<JSXElement>,
+  specifier: string,
+  children: JSXElement | JSXExpressionContainer | JSXFragment | JSXSpreadChild,
+) => {
+  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)),
+            [j.jsxText('\n'), children, j.jsxText('\n')],
+          ),
+        );
+      }
+    });
+};
+
+export const getComponentImportName = (
+  j: core.JSCodeshift,
+  componentDefaultName: string,
+  componentAliasName: string,
+) => {
+  return isAliasImport(componentDefaultName, componentAliasName)
+    ? j.importSpecifier(
+        j.identifier(componentAliasName),
+        j.identifier(componentDefaultName),
+      )
+    : j.importSpecifier(j.identifier(componentDefaultName));
+};
+
+const isAliasImport = (
+  componentDefaultName: string,
+  componentAliasName: string,
+) => componentDefaultName !== componentAliasName;
+
+export const addToImport = (
+  j: core.JSCodeshift,
+  source: Collection<Node>,
+  specifiers: (
+    | ImportSpecifier
+    | ImportDefaultSpecifier
+    | ImportNamespaceSpecifier
+  )[],
+  packageEndpoint?: string,
+) => {
+  const endpoint = packageEndpoint ?? PACKAGE_NAME;
+
+  source
+    .find(j.ImportDeclaration)
+    .filter(
+      (path: ASTPath<ImportDeclaration>) => path.node.source.value === endpoint,
+    )
+    .forEach((path: ASTPath<ImportDeclaration>) => {
+      j(path).replaceWith(
+        j.importDeclaration(
+          [...(path.value.specifiers || []), ...specifiers],
+          j.literal(endpoint),
+        ),
+      );
+    });
+};
+
+export const getVariableDeclarationPathByName = (
+  j: core.JSCodeshift,
+  source: Collection<Node>,
+  variableName: string,
+) => {
+  return source
+    .find(j.VariableDeclaration)
+    .filter((variableDeclarationPath: ASTPath<VariableDeclaration>) => {
+      return (
+        j(variableDeclarationPath)
+          .find(j.VariableDeclarator)
+          .filter(
+            (variableDeclaratorPath: ASTPath<VariableDeclarator>) =>
+              variableDeclaratorPath.node.id.type === 'Identifier' &&
+              variableDeclaratorPath.node.id.name === variableName,
+          ).length > 0
+      );
+    });
+};