@atlaskit/modal-dialog 12.0.2

package/codemods/__tests__/remove-component-override-props.test.ts

@@ -0,0 +1,153 @@
+import { createTransformer } from '@atlaskit/codemod-utils';
+
+import { removeComponentOverrideProps } from '../migrations/remove-component-override-props';
+
+const transformer = createTransformer([removeComponentOverrideProps]);
+
+const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
+
+describe('remove component override props', () => {
+  ['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
+          onClose={handleClose}
+          components={{}}
+        >
+          {content}
+        </ModalDialog>
+      );
+    }
+    `,
+        `/* TODO: (from codemod)\u0020
+    We have converted this file as best we could but you might still need
+    to manually complete migrating this usage of ModalDialog.
+
+    This file uses one or more of the following ModalDialog props: 'components', 'header',
+    'footer', 'body'. These props have been removed as part of moving to
+    a compositional API.
+
+    The render props that used to be exposed by the custom component APIs are
+    now accessible using the 'useModal' hook instead: 'testId', 'titleId', and 'onClose'.
+
+    We are also no longer exposing 'appearance' as render prop, so this needs to be
+    manually passed to your custom components.
+
+    If you are using the 'container' value of 'components' to wrap ModalDialog in something
+    other than a 'form', you'll need to add the style 'all: inherit;' for scrolling to function.
+
+    For a complete guide on customization using the new compositional API, refer to the docs at
+    https://atlassian.design/components/modal-dialog/examples. */
+    import React from 'react';
+
+    import ModalDialog from '@atlaskit/modal-dialog';
+
+    export default function modalDialog() {
+      return (
+        <ModalDialog onClose={handleClose}>
+          {content}
+        </ModalDialog>
+      );
+    }
+    `,
+        'should remove components prop and add explanation in comment',
+      );
+
+      defineInlineTest(
+        { default: transformer, parser },
+        {},
+        `
+    import React from 'react';
+
+    import ModalDialog from '@atlaskit/modal-dialog';
+
+    export default function modalDialog() {
+      return (
+        <ModalDialog
+          onClose={handleClose}
+          header={header}
+          footer={footer}
+          body={body}
+        >
+          {content}
+        </ModalDialog>
+      );
+    }
+    `,
+        `/* TODO: (from codemod)\u0020
+    We have converted this file as best we could but you might still need
+    to manually complete migrating this usage of ModalDialog.
+
+    This file uses one or more of the following ModalDialog props: 'components', 'header',
+    'footer', 'body'. These props have been removed as part of moving to
+    a compositional API.
+
+    The render props that used to be exposed by the custom component APIs are
+    now accessible using the 'useModal' hook instead: 'testId', 'titleId', and 'onClose'.
+
+    We are also no longer exposing 'appearance' as render prop, so this needs to be
+    manually passed to your custom components.
+
+    If you are using the 'container' value of 'components' to wrap ModalDialog in something
+    other than a 'form', you'll need to add the style 'all: inherit;' for scrolling to function.
+
+    For a complete guide on customization using the new compositional API, refer to the docs at
+    https://atlassian.design/components/modal-dialog/examples. */
+    import React from 'react';
+
+    import ModalDialog from '@atlaskit/modal-dialog';
+
+    export default function modalDialog() {
+      return (
+        <ModalDialog onClose={handleClose}>
+          {content}
+        </ModalDialog>
+      );
+    }
+    `,
+        'should remove header/footer/body props and add explanation in comment',
+      );
+
+      defineInlineTest(
+        { default: transformer, parser },
+        {},
+        `
+    import React from 'react';
+
+    import ModalDialog from '@atlaskit/modal-dialog';
+
+    export default function modalDialog() {
+      return (
+        <ModalDialog onClose={handleClose}>
+          {content}
+        </ModalDialog>
+      );
+    }
+    `,
+        `
+    import React from 'react';
+
+    import ModalDialog from '@atlaskit/modal-dialog';
+
+    export default function modalDialog() {
+      return (
+        <ModalDialog onClose={handleClose}>
+          {content}
+        </ModalDialog>
+      );
+    }
+    `,
+        'should not add comment if there are no component props to be removed',
+      );
+    });
+  });
+});

package/codemods/__tests__/remove-is-chromeless.tsx

@@ -0,0 +1,182 @@
+import { createTransformer } from '@atlaskit/codemod-utils';
+
+import { removeIsChromeless } from '../migrations/remove-is-chromeless';
+
+const transformer = createTransformer([removeIsChromeless]);
+
+const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
+
+describe('Modal isChromeless prop removal codemods', () => {
+  ['tsx', 'babylon'].forEach((parser) => {
+    describe(`parser: ${parser}`, () => {
+      defineInlineTest(
+        { default: transformer, parser },
+        {},
+        `
+    import React from 'react';
+    import Modal from '@atlaskit/modal-dialog';
+
+    const App = () => {
+      return (
+        <Modal
+        testId="modal"
+        isChromeless={false}
+        />
+      );
+    }
+    `,
+        `
+    import React from 'react';
+    import Modal from '@atlaskit/modal-dialog';
+
+    const App = () => {
+      return <Modal testId="modal" />;
+    }
+    `,
+        `should remove the "isChromeless" prop without adding comment when its value is false`,
+      );
+      defineInlineTest(
+        { default: transformer, parser },
+        {},
+        `
+    import React from 'react';
+    import Modal from '@atlaskit/modal-dialog';
+
+    const App = () => {
+      return (
+        <Modal
+        testId="modal"
+        isBlanketHidden
+        autoFocus={false}
+        />
+      );
+    }
+    `,
+        `
+    import React from 'react';
+    import Modal from '@atlaskit/modal-dialog';
+
+    const App = () => {
+      return (
+        <Modal
+        testId="modal"
+        isBlanketHidden
+        autoFocus={false}
+        />
+      );
+    }
+    `,
+        `should leave other props as it is when "isChromeless" prop is not present`,
+      );
+      defineInlineTest(
+        { default: transformer, parser },
+        {},
+        `
+    import React from 'react';
+    import Modal from '@atlaskit/modal-dialog';
+
+    const App = () => {
+      return (
+        <Modal
+        testId="modal"
+        isChromeless={true}
+        />
+      );
+    }
+    `,
+        `
+    import React from 'react';
+    import Modal from '@atlaskit/modal-dialog';
+
+    const App = () => {
+      return (
+        /* TODO: (from codemod)\u0020
+        ModalDialog has a new compositional API and the 'isChromeless' prop is no longer supported.
+        To have the functionality of the 'isChromeless' prop, you can choose to not use any of the default exports (ModalBody, ModalHeader and ModalFooter).
+        The only other change is that ModalDialog's children should have a border radius of 3px to match the box shadow.
+        For more information, check the documentation at https://atlassian.design/components/modal-dialog/examples */
+        (<Modal testId="modal" />)
+      );
+    }
+    `,
+        `should remove the "isChromeless" prop and add comment when its value is true`,
+      );
+      defineInlineTest(
+        { default: transformer, parser },
+        {},
+        `
+    import React from 'react';
+    import Modal from '@atlaskit/modal-dialog';
+
+    const App = () => {
+      return (
+        <Modal
+        testId="modal"
+        onCloseComplete={() => console.log('closed')}
+        isChromeless
+        isBlanketHidden
+        autoFocus={false}
+        />
+      );
+    }
+    `,
+        `
+    import React from 'react';
+    import Modal from '@atlaskit/modal-dialog';
+
+    const App = () => {
+      return (
+        /* TODO: (from codemod)\u0020
+        ModalDialog has a new compositional API and the 'isChromeless' prop is no longer supported.
+        To have the functionality of the 'isChromeless' prop, you can choose to not use any of the default exports (ModalBody, ModalHeader and ModalFooter).
+        The only other change is that ModalDialog's children should have a border radius of 3px to match the box shadow.
+        For more information, check the documentation at https://atlassian.design/components/modal-dialog/examples */
+        (<Modal
+          testId="modal"
+          onCloseComplete={() => console.log('closed')}
+          isBlanketHidden
+          autoFocus={false} />)
+      );
+    }
+    `,
+        `should remove the "isChromeless" prop and add comment when its value is implicitly true`,
+      );
+      defineInlineTest(
+        { default: transformer, parser },
+        {},
+        `
+    import React from 'react';
+    import Modal from '@atlaskit/modal-dialog';
+
+    const App = () => {
+      const val=false;
+      return (
+        <Modal
+        isChromeless={val}
+        >
+          hello world
+        </Modal>
+      );
+    }
+    `,
+        `
+    import React from 'react';
+    import Modal from '@atlaskit/modal-dialog';
+
+    const App = () => {
+      const val=false;
+      return (
+        /* TODO: (from codemod)\u0020
+        ModalDialog has a new compositional API and the 'isChromeless' prop is no longer supported.
+        To have the functionality of the 'isChromeless' prop, you can choose to not use any of the default exports (ModalBody, ModalHeader and ModalFooter).
+        The only other change is that ModalDialog's children should have a border radius of 3px to match the box shadow.
+        For more information, check the documentation at https://atlassian.design/components/modal-dialog/examples */
+        (<Modal>hello world</Modal>)
+      );
+    }
+    `,
+        `should remove the "isChromeless" prop and add comment when its value is a variable`,
+      );
+    });
+  });
+});

package/codemods/__tests__/rename-appearance-type.test.ts

@@ -0,0 +1,52 @@
+import { createTransformer } from '@atlaskit/codemod-utils';
+
+import { renameAppearanceType } from '../migrations/rename-appearance-type';
+
+const transformer = createTransformer([renameAppearanceType]);
+
+const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
+
+// Only testing for tsx here because it's modifying types
+describe('rename appearance prop type', () => {
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+    import { AppearanceType } from '@atlaskit/modal-dialog';
+    `,
+    `
+    import React from 'react';
+    import { Appearance as AppearanceType } from '@atlaskit/modal-dialog';
+    `,
+    'should create alias for AppearanceType as Appearance',
+  );
+
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+    import ModalDialog, { AppearanceType } from '@atlaskit/modal-dialog';
+    `,
+    `
+    import React from 'react';
+    import ModalDialog, { Appearance as AppearanceType } from '@atlaskit/modal-dialog';
+    `,
+    'should create aliases when imported with a default import',
+  );
+
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+    import ModalDialog, { AppearanceType as ModalDialogAppearance } from '@atlaskit/modal-dialog';
+    `,
+    `
+    import React from 'react';
+    import ModalDialog, { Appearance as ModalDialogAppearance } from '@atlaskit/modal-dialog';
+    `,
+    'should preserve old alias names',
+  );
+});

package/codemods/__tests__/rename-inner-component-prop-types.test.ts

@@ -0,0 +1,82 @@
+import { createTransformer } from '@atlaskit/codemod-utils';
+
+import { renameInnerComponentPropTypes } from '../migrations/rename-inner-component-prop-types';
+
+const transformer = createTransformer([renameInnerComponentPropTypes]);
+
+const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
+
+// Only testing for tsx here because it's modifying types
+describe('rename inner component prop types', () => {
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+    import {
+      HeaderComponentProps,
+      BodyComponentProps,
+      FooterComponentProps,
+      TitleComponentProps,
+    } from '@atlaskit/modal-dialog';
+    `,
+    `
+    import React from 'react';
+    import {
+      ModalHeaderProps as HeaderComponentProps,
+      ModalBodyProps as BodyComponentProps,
+      ModalFooterProps as FooterComponentProps,
+      ModalTitleProps as TitleComponentProps,
+    } from '@atlaskit/modal-dialog';
+    `,
+    'should create aliases for (Header/Body/Footer/Title)ComponentProps as Modal(Header/Body/Footer/Title)Props',
+  );
+
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+    import ModalDialog, {
+      HeaderComponentProps,
+      BodyComponentProps,
+      FooterComponentProps,
+      TitleComponentProps,
+    } from '@atlaskit/modal-dialog';
+    `,
+    `
+    import React from 'react';
+    import ModalDialog, {
+      ModalHeaderProps as HeaderComponentProps,
+      ModalBodyProps as BodyComponentProps,
+      ModalFooterProps as FooterComponentProps,
+      ModalTitleProps as TitleComponentProps,
+    } from '@atlaskit/modal-dialog';
+    `,
+    'should create aliases when imported with a default import',
+  );
+
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+    import ModalDialog, {
+      HeaderComponentProps as CustomHeaderProps,
+      BodyComponentProps as CustomBodyProps,
+      FooterComponentProps as CustomFooterProps,
+      TitleComponentProps as CustomTitleProps,
+    } from '@atlaskit/modal-dialog';
+    `,
+    `
+    import React from 'react';
+    import ModalDialog, {
+      ModalHeaderProps as CustomHeaderProps,
+      ModalBodyProps as CustomBodyProps,
+      ModalFooterProps as CustomFooterProps,
+      ModalTitleProps as CustomTitleProps,
+    } from '@atlaskit/modal-dialog';
+    `,
+    'should preserve old alias names',
+  );
+});