refactor: use TS "import type" (#1443)

* refactor(actions-global): use import type for TS type imports

* refactor(sentry): use import type for TS type imports

* refactor(sdk): use import type for TS type imports

* refactor(react-notifications): use import type for TS type imports

* refactor(notifications): use import type for TS type imports

* refactor(l10n): use import type for TS type imports

* refactor(i18n): use import type for TS type imports

* refactor(browser-history): use import type for TS type imports

* refactor(application-shell-connectors): use import type for TS type imports

* refactor(application-shell): use import type for TS type imports

* refactor(application-components): use import type for TS type imports

packages/actions-global/README.md

@@ -4,7 +4,7 @@
   <a href="https://www.npmjs.com/package/@commercetools-frontend/actions-global"><img src="https://badgen.net/npm/v/@commercetools-frontend/actions-global" alt="Latest release (latest dist-tag)" /></a> <a href="https://www.npmjs.com/package/@commercetools-frontend/actions-global"><img src="https://badgen.net/npm/v/@commercetools-frontend/actions-global/next" alt="Latest release (next dist-tag)" /></a> <a href="https://bundlephobia.com/result?p=@commercetools-frontend/actions-global"><img src="https://badgen.net/bundlephobia/minzip/@commercetools-frontend/actions-global" alt="Minified + GZipped size" /></a> <a href="https://github.com/commercetools/merchant-center-application-kit/blob/master/LICENSE"><img src="https://badgen.net/github/license/commercetools/merchant-center-application-kit" alt="GitHub license" /></a>
 </p>
 
-Global redux actions for a MC application.
+Global redux actions for a Custom Application.
 
 ## Install
 

packages/actions-global/src/actions/handle-action-error.spec.ts

@@ -1,4 +1,5 @@
-import { TStatusCode } from '@commercetools-frontend/constants';
+import type { TStatusCode } from '@commercetools-frontend/constants';
+
 import handleActionError from './handle-action-error';
 
 let dispatch: jest.Mock;

packages/actions-global/src/actions/handle-action-error.ts

@@ -1,11 +1,14 @@
-import { ThunkDispatch } from 'redux-thunk';
-import {
-  STATUS_CODES,
-  LOGOUT_REASONS,
+import type { ThunkDispatch } from 'redux-thunk';
+import type {
   TAppNotificationApiError,
   TStatusCode,
   ApplicationWindow,
 } from '@commercetools-frontend/constants';
+
+import {
+  STATUS_CODES,
+  LOGOUT_REASONS,
+} from '@commercetools-frontend/constants';
 import { reportErrorToSentry } from '@commercetools-frontend/sentry';
 import browserHistory from '@commercetools-frontend/browser-history';
 import showApiErrorNotification from './show-api-error-notification';

packages/actions-global/src/actions/show-api-error-notification.ts

@@ -1,5 +1,9 @@
+import type {
+  TApiErrorNotification,
+  TApiErrorNotificationOptions,
+} from '../types';
+
 import { DOMAINS } from '@commercetools-frontend/constants';
-import { TApiErrorNotification, TApiErrorNotificationOptions } from '../types';
 import showNotification from './show-notification';
 
 export default function showApiErrorNotification({

packages/actions-global/src/actions/show-notification.ts

@@ -1,13 +1,12 @@
+import type { TNotificationMetaOptions } from '@commercetools-frontend/notifications';
+import type { TShowNotification } from '../types';
+
 import isNumber from 'lodash/isNumber';
-import {
-  addNotification,
-  TNotificationMetaOptions,
-} from '@commercetools-frontend/notifications';
+import { addNotification } from '@commercetools-frontend/notifications';
 import {
   NOTIFICATION_DOMAINS,
   NOTIFICATION_KINDS_SIDE,
 } from '@commercetools-frontend/constants';
-import { TShowNotification } from '../types';
 
 export default function showNotification<
   Notification extends TShowNotification

packages/actions-global/src/actions/show-unexpected-error-notification.ts

@@ -1,8 +1,7 @@
-import {
-  DOMAINS,
-  TAppNotificationValuesUnexpectedError,
-} from '@commercetools-frontend/constants';
-import { TUnexpectedErrorNotification } from '../types';
+import type { TAppNotificationValuesUnexpectedError } from '@commercetools-frontend/constants';
+import type { TUnexpectedErrorNotification } from '../types';
+
+import { DOMAINS } from '@commercetools-frontend/constants';
 import showNotification from './show-notification';
 
 export default function showUnexpectedErrorNotification({

packages/actions-global/src/hooks/use-on-action-error.spec.tsx

@@ -1,5 +1,6 @@
+import type { Action } from 'redux';
+
 import React from 'react';
-import { Action } from 'redux';
 import { Provider } from 'react-redux';
 import { renderHook } from '@testing-library/react-hooks';
 import useOnActionError from './use-on-action-error';

packages/actions-global/src/hooks/use-on-action-error.ts

@@ -1,6 +1,8 @@
+import type { ActionError } from '../actions/handle-action-error';
+
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import handleActionError, { ActionError } from '../actions/handle-action-error';
+import handleActionError from '../actions/handle-action-error';
 
 export default function useOnActionError() {
   const dispatch = useDispatch();

packages/actions-global/src/hooks/use-show-api-error-notification.ts

@@ -1,7 +1,8 @@
+import type { TApiErrorNotificationOptions } from '../types';
+
 import React from 'react';
 import { useDispatch } from 'react-redux';
 import { showApiErrorNotification } from '../actions';
-import { TApiErrorNotificationOptions } from '../types';
 
 // Returns a function that dispatches an API error notification.
 // Example:

packages/actions-global/src/hooks/use-show-notification.ts

@@ -1,8 +1,9 @@
+import type { TNotificationMetaOptions } from '@commercetools-frontend/notifications';
+import type { TShowNotification } from '../types';
+
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import { TNotificationMetaOptions } from '@commercetools-frontend/notifications';
 import { showNotification } from '../actions';
-import { TShowNotification } from '../types';
 
 // Returns a function that dispatches a notification, pre-configured to
 // a speficic notification.

packages/actions-global/src/hooks/use-show-unexpected-error-notification.ts

@@ -1,6 +1,7 @@
+import type { TAppNotificationValuesUnexpectedError } from '@commercetools-frontend/constants';
+
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import { TAppNotificationValuesUnexpectedError } from '@commercetools-frontend/constants';
 import { showUnexpectedErrorNotification } from '../actions';
 
 // Returns a function that dispatches an unexpected error notification.

packages/actions-global/src/index.ts

@@ -1,5 +1,5 @@
 export { default as version } from './version';
-import { DispatchActionError } from './actions/handle-action-error';
+import type { DispatchActionError } from './actions/handle-action-error';
 
 export type TDispatchActionError = DispatchActionError;
 

packages/actions-global/src/types.ts

@@ -1,5 +1,5 @@
-import { TNotification } from '@commercetools-frontend/notifications';
-import {
+import type { TNotification } from '@commercetools-frontend/notifications';
+import type {
   TAppNotification,
   TAppNotificationDomain,
   TAppNotificationKind,

packages/application-components/src/components/dialogs/internals/dialog-footer.tsx

@@ -1,5 +1,7 @@
+import type { IntlShape } from 'react-intl';
+
 import React from 'react';
-import { useIntl, IntlShape } from 'react-intl';
+import { useIntl } from 'react-intl';
 import SecondaryButton from '@commercetools-uikit/secondary-button';
 import PrimaryButton from '@commercetools-uikit/primary-button';
 import Spacings from '@commercetools-uikit/spacings';

packages/application-components/src/components/dialogs/internals/dialog-header.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
+import { css } from '@emotion/core';
 import { CloseIcon } from '@commercetools-uikit/icons';
 import SecondaryIconButton from '@commercetools-uikit/secondary-icon-button';
 import Text from '@commercetools-uikit/text';
 import Spacings from '@commercetools-uikit/spacings';
-import { css } from '@emotion/core';
 
 type Props = {
   title: string;

packages/application-components/src/components/maintenance-page-layout/maintenance-page-layout.spec.tsx

@@ -1,6 +1,8 @@
+import type { Props } from './maintenance-page-layout';
+
 import React from 'react';
 import { renderComponent } from '../../../test-utils';
-import MaintenancePageLayout, { Props } from './maintenance-page-layout';
+import MaintenancePageLayout from './maintenance-page-layout';
 
 const createTestProps = (props: Partial<Props> = {}) => ({
   imageSrc: '/assets/foo.svg',

packages/application-shell-connectors/src/components/application-context/application-context.spec.tsx

@@ -1,3 +1,5 @@
+import type { ApplicationWindow } from '@commercetools-frontend/constants';
+
 import React from 'react';
 import { render } from '@testing-library/react';
 import {
@@ -9,7 +11,6 @@ import {
   mapProjectToApplicationContextProject,
   mapEnvironmentToApplicationContextEnvironment,
 } from './application-context';
-import { ApplicationWindow } from '@commercetools-frontend/constants';
 
 type AdditionalEnvironmentProps = { foo: string };
 

packages/application-shell-connectors/src/components/application-context/application-context.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
-import moment from 'moment-timezone';
-import { ApplicationWindow } from '@commercetools-frontend/constants';
-import getDisplayName from '../../utils/get-display-name';
-import {
+import type { ApplicationWindow } from '@commercetools-frontend/constants';
+import type {
   TFetchLoggedInUserQuery,
   TFetchProjectQuery,
 } from '../../types/generated/mc';
+
+import React from 'react';
+import moment from 'moment-timezone';
+import getDisplayName from '../../utils/get-display-name';
 import {
   normalizeAllAppliedActionRights,
   normalizeAllAppliedMenuVisibilities,

packages/application-shell-connectors/src/components/application-context/index.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   ProviderProps,
   TApplicationContext as ApplicationContext,
 } from './application-context';

packages/application-shell-connectors/src/components/application-context/normalizers.spec.ts

@@ -1,4 +1,5 @@
-import { TFetchProjectQuery } from '../../types/generated/mc';
+import type { TFetchProjectQuery } from '../../types/generated/mc';
+
 import {
   normalizeAllAppliedActionRights,
   normalizeAllAppliedMenuVisibilities,

packages/application-shell-connectors/src/components/application-context/normalizers.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   Maybe,
   TFetchProjectQuery,
   TStoreDataFence,

packages/application-shell-connectors/src/components/project-extension-image-regex/project-extension-image-regex.spec.tsx

@@ -1,17 +1,13 @@
+import type { RenderResult } from '@testing-library/react';
+import type { MockedProviderProps } from '@apollo/react-testing';
+import type { TImageRegexContext } from './project-extension-image-regex';
+
 import React from 'react';
-import {
-  render,
-  RenderResult,
-  waitForElementToBeRemoved,
-} from '@testing-library/react';
-import {
-  MockedProvider as ApolloMockProvider,
-  MockedProviderProps,
-} from '@apollo/react-testing';
+import { render, waitForElementToBeRemoved } from '@testing-library/react';
+import { MockedProvider as ApolloMockProvider } from '@apollo/react-testing';
 import {
   ProjectExtensionProviderForImageRegex,
   GetProjectExtensionImageRegex,
-  TImageRegexContext,
 } from './project-extension-image-regex';
 import FetchProjectExtensionImageRegex from './fetch-project-extension-image-regex.settings.graphql';
 import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';

packages/application-shell-connectors/src/components/project-extension-image-regex/project-extension-image-regex.tsx

@@ -1,11 +1,12 @@
+import type {
+  TFetchProjectExtensionImageRegexQuery,
+  TImageRegexOptions,
+} from '../../types/generated/settings';
+
 import React from 'react';
 import { useQuery } from 'react-apollo';
 import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
 import { reportErrorToSentry } from '@commercetools-frontend/sentry';
-import {
-  TFetchProjectExtensionImageRegexQuery,
-  TImageRegexOptions,
-} from '../../types/generated/settings';
 import getDisplayName from '../../utils/get-display-name';
 import FetchProjectExtensionImageRegex from './fetch-project-extension-image-regex.settings.graphql';
 

packages/application-shell-connectors/src/index.ts

@@ -1,5 +1,5 @@
 export { default as version } from './version';
-import {
+import type {
   TProviderProps as ProviderProps,
   TApplicationContext as ApplicationContext,
 } from './components/application-context';

packages/application-shell-connectors/src/test-utils/test-utils.ts

@@ -1,8 +1,9 @@
-import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
-import {
+import type {
   Maybe,
   TFetchProjectExtensionImageRegexQuery,
 } from '../types/generated/settings';
+
+import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
 import { FetchProjectExtensionImageRegex } from '../components/project-extension-image-regex/fetch-project-extension-image-regex.settings.graphql';
 
 export const createGraphqlResponseForProjectExtensionImageRegexQuery = (

packages/application-shell-connectors/src/utils/get-mc-api-url/get-mc-api-url.ts

@@ -1,4 +1,4 @@
-import { ApplicationWindow } from '@commercetools-frontend/constants';
+import type { ApplicationWindow } from '@commercetools-frontend/constants';
 
 /**
  * NOTE:

packages/application-shell/src/apollo-links/error-link.ts

@@ -1,6 +1,8 @@
-import { GraphQLError } from 'graphql';
-import { onError, ErrorResponse } from 'apollo-link-error';
-import { ServerError, ServerParseError } from 'apollo-link-http-common';
+import type { GraphQLError } from 'graphql';
+import type { ErrorResponse } from 'apollo-link-error';
+import type { ServerError, ServerParseError } from 'apollo-link-http-common';
+
+import { onError } from 'apollo-link-error';
 import {
   STATUS_CODES,
   LOGOUT_REASONS,

packages/application-shell/src/apollo-links/header-link.ts

@@ -1,7 +1,7 @@
+import type { NormalizedCacheObject } from 'apollo-cache-inmemory';
 import type { TApolloContext } from '../utils/apollo-context';
 
 import ApolloClient from 'apollo-client';
-import { NormalizedCacheObject } from 'apollo-cache-inmemory';
 import { ApolloLink } from 'apollo-link';
 import omitEmpty from 'omit-empty-es';
 import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';

packages/application-shell/src/components/app-bar/app-bar.tsx

@@ -1,3 +1,6 @@
+import type { TFetchLoggedInUserQuery } from '../../types/generated/mc';
+import type { TApplicationsMenu } from '../../types/generated/proxy';
+
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { css } from '@emotion/core';
@@ -6,8 +9,6 @@ import { customProperties } from '@commercetools-uikit/design-system';
 import LogoSVG from '@commercetools-frontend/assets/images/logo.svg';
 import { CONTAINERS } from '../../constants';
 import { getPreviousProjectKey } from '../../utils';
-import { TFetchLoggedInUserQuery } from '../../types/generated/mc';
-import { TApplicationsMenu } from '../../types/generated/proxy';
 import UserSettingsMenu from '../user-settings-menu';
 import ProjectSwitcher from '../project-switcher';
 import BackToProject from '../back-to-project';

packages/application-shell/src/components/application-shell-provider/application-shell-provider.tsx

@@ -1,19 +1,16 @@
+import type { TApplicationContext } from '@commercetools-frontend/application-shell-connectors';
+import type { TAsyncLocaleDataProps } from '@commercetools-frontend/i18n';
+import type { TrackingWhitelist } from '../../utils/gtm';
+
 import './global-style-imports';
 import '../../track-performance';
 import React from 'react';
 import { Router } from 'react-router-dom';
 import { ApolloProvider } from 'react-apollo';
 import { Provider as ReduxProvider } from 'react-redux';
 import history from '@commercetools-frontend/browser-history';
-import {
-  ApplicationContextProvider,
-  TApplicationContext,
-} from '@commercetools-frontend/application-shell-connectors';
-import {
-  AsyncLocaleData,
-  TAsyncLocaleDataProps,
-} from '@commercetools-frontend/i18n';
-import { TrackingWhitelist } from '../../utils/gtm';
+import { ApplicationContextProvider } from '@commercetools-frontend/application-shell-connectors';
+import { AsyncLocaleData } from '@commercetools-frontend/i18n';
 import internalReduxStore from '../../configure-store';
 import apolloClient from '../../configure-apollo';
 import ConfigureIntlProvider from '../configure-intl-provider';

packages/application-shell/src/components/application-shell/application-shell.tsx

@@ -1,8 +1,14 @@
-import React, { SyntheticEvent } from 'react';
-import { Dispatch } from 'redux';
+import type { SyntheticEvent } from 'react';
+import type { Dispatch } from 'redux';
+import type { TFlags } from '@flopflip/types';
+import type { ApolloError } from 'apollo-client';
+import type { TApplicationContext } from '@commercetools-frontend/application-shell-connectors';
+import type { TAsyncLocaleDataProps } from '@commercetools-frontend/i18n';
+import type { TApplicationsMenu } from '../../types/generated/proxy';
+import type { TrackingWhitelist } from '../../utils/gtm';
+
+import React from 'react';
 import { Redirect, Route, Switch, useLocation } from 'react-router-dom';
-import { ApolloError } from 'apollo-client';
-import { TFlags } from '@flopflip/types';
 import { Global, css } from '@emotion/core';
 import styled from '@emotion/styled';
 import {
@@ -14,17 +20,9 @@ import {
   reportErrorToSentry,
   SentryUserTracker,
 } from '@commercetools-frontend/sentry';
-import {
-  ApplicationContextProvider,
-  TApplicationContext,
-} from '@commercetools-frontend/application-shell-connectors';
+import { ApplicationContextProvider } from '@commercetools-frontend/application-shell-connectors';
 import { NotificationsList } from '@commercetools-frontend/react-notifications';
-import {
-  AsyncLocaleData,
-  TAsyncLocaleDataProps,
-} from '@commercetools-frontend/i18n';
-import { TApplicationsMenu } from '../../types/generated/proxy';
-import { TrackingWhitelist } from '../../utils/gtm';
+import { AsyncLocaleData } from '@commercetools-frontend/i18n';
 import internalReduxStore from '../../configure-store';
 import ProjectDataLocale from '../project-data-locale';
 import PortalsContainer from '../portals-container';