Jconabree/issue 3873 talon exports (#3874)

* Issue 3873 - Changing exports to named instead of default so wraps work correctly * Fixing exports of hooks Co-authored-by: Devagouda <40405790+dpatil-magento@users.noreply.github.com>
magento · Nov 2, 2022 · 3d4e958 · 3d4e958
1 parent c78b9f9
commit 3d4e958
Show file tree

Hide file tree

Showing 35 changed files with 56 additions and 54 deletions.
diff --git a/packages/pagebuilder/lib/ContentTypes/Banner/banner.js b/packages/pagebuilder/lib/ContentTypes/Banner/banner.js
@@ -6,7 +6,7 @@ import Button from '@magento/venia-ui/lib/components/Button/button';
 import resolveLinkProps from '@magento/peregrine/lib/util/resolveLinkProps';
 import { Link, useHistory } from 'react-router-dom';
 import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
-import useIntersectionObserver from '@magento/peregrine/lib/hooks/useIntersectionObserver';
+import { useIntersectionObserver } from '@magento/peregrine/lib/hooks/useIntersectionObserver';
 import { useMediaQuery } from '@magento/peregrine/lib/hooks/useMediaQuery';
 import handleHtmlContentClick from '../../handleHtmlContentClick';
 

diff --git a/packages/peregrine/lib/hooks/__tests__/useDelayedTransition.spec.js b/packages/peregrine/lib/hooks/__tests__/useDelayedTransition.spec.js
@@ -8,7 +8,7 @@ import { mockSetPageLoading } from '@magento/peregrine/lib/context/app';
 import { mockSetComponentMap } from '@magento/peregrine/lib/context/rootComponents';
 
 import { getRootComponent } from '../../talons/MagentoRoute/helpers';
-import useDelayedTransition from '../useDelayedTransition';
+import { useDelayedTransition } from '../useDelayedTransition';
 
 // jest.mock('react');
 

diff --git a/packages/peregrine/lib/hooks/__tests__/useInternalLink.spec.js b/packages/peregrine/lib/hooks/__tests__/useInternalLink.spec.js
@@ -1,5 +1,5 @@
 import { useAppContext } from '../../context/app';
-import useInternalLink, { SHIMMER_TYPE_SUFFIX } from '../useInternalLink';
+import { useInternalLink, SHIMMER_TYPE_SUFFIX } from '../useInternalLink';
 
 jest.mock('../../context/app', () => ({
     useAppContext: jest.fn()

diff --git a/packages/peregrine/lib/hooks/__tests__/useIntersectionObserver.spec.js b/packages/peregrine/lib/hooks/__tests__/useIntersectionObserver.spec.js
@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 
 import { createTestInstance } from '@magento/peregrine';
-import useIntersectionObserver from '../useIntersectionObserver';
+import { useIntersectionObserver } from '../useIntersectionObserver';
 
 const log = jest.fn();
 

diff --git a/packages/peregrine/lib/hooks/__tests__/useScript.spec.js b/packages/peregrine/lib/hooks/__tests__/useScript.spec.js
@@ -1,6 +1,6 @@
 import { act, renderHook } from '@testing-library/react-hooks';
 
-import useScript from '../useScript';
+import { useScript } from '../useScript';
 
 describe('#useScript', () => {
     it('returns idle if script not provided', () => {

diff --git a/packages/peregrine/lib/hooks/useDelayedTransition.js b/packages/peregrine/lib/hooks/useDelayedTransition.js
@@ -14,7 +14,7 @@ import { getRootComponent } from '../talons/MagentoRoute/helpers';
 
 const DELAY_MESSAGE_PREFIX = 'DELAY:';
 
-const useDelayedTransition = () => {
+export const useDelayedTransition = () => {
     const { pathname } = useLocation();
     const history = useHistory();
     const client = useApolloClient();
@@ -123,5 +123,3 @@ const useDelayedTransition = () => {
         };
     }, [client, resolveUrlQuery, setComponentMap, setPageLoading]);
 };
-
-export default useDelayedTransition;
diff --git a/packages/peregrine/lib/hooks/useGoogleReCaptcha/__tests__/useGoogleReCaptcha.spec.js b/packages/peregrine/lib/hooks/useGoogleReCaptcha/__tests__/useGoogleReCaptcha.spec.js
@@ -11,7 +11,7 @@ import { useGoogleReCaptcha } from '../useGoogleReCaptcha';
 jest.mock('@magento/peregrine/lib/hooks/useScript', () => {
     return {
         __esModule: true,
-        default: jest.fn().mockImplementation(() => {
+        useScript: jest.fn().mockImplementation(() => {
             return 'ready';
         })
     };

diff --git a/packages/peregrine/lib/hooks/useGoogleReCaptcha/useGoogleReCaptcha.js b/packages/peregrine/lib/hooks/useGoogleReCaptcha/useGoogleReCaptcha.js
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useQuery } from '@apollo/client';
 
-import useScript from '@magento/peregrine/lib/hooks/useScript';
+import { useScript } from '@magento/peregrine/lib/hooks/useScript';
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 
 import defaultOperations from './googleReCaptchaConfig.gql';

diff --git a/packages/peregrine/lib/hooks/useInternalLink.js b/packages/peregrine/lib/hooks/useInternalLink.js
@@ -3,7 +3,7 @@ import { useAppContext } from '../context/app';
 
 export const SHIMMER_TYPE_SUFFIX = '_SHIMMER';
 
-export default rootType => {
+export const useInternalLink = rootType => {
     const [, appApi] = useAppContext();
     const { actions: appActions } = appApi;
     const { setNextRootComponent } = appActions;

diff --git a/packages/peregrine/lib/hooks/useIntersectionObserver.js b/packages/peregrine/lib/hooks/useIntersectionObserver.js
@@ -1,4 +1,4 @@
-export default () => {
+export const useIntersectionObserver = () => {
     if (typeof IntersectionObserver === 'undefined') {
         return;
     }

diff --git a/packages/peregrine/lib/hooks/useIsInViewport.js b/packages/peregrine/lib/hooks/useIsInViewport.js
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-import useIntersectionObserver from '@magento/peregrine/lib/hooks/useIntersectionObserver';
+import { useIntersectionObserver } from '@magento/peregrine/lib/hooks/useIntersectionObserver';
 
 export const useIsInViewport = props => {
     const { elementRef, renderOnce = true } = props;

diff --git a/packages/peregrine/lib/hooks/useScript.js b/packages/peregrine/lib/hooks/useScript.js
@@ -8,7 +8,7 @@ import { useState, useEffect } from 'react';
  *
  * @returns {string} - returns one of the possible status: "idle", "loading", "ready" or "error"
  */
-export default src => {
+export const useScript = src => {
     // Keep track of script status ("idle", "loading", "ready", "error")
     const [status, setStatus] = useState(src ? 'loading' : 'idle');
     useEffect(

diff --git a/packages/peregrine/lib/talons/Breadcrumbs/__tests__/useBreadcrumbs.spec.js b/packages/peregrine/lib/talons/Breadcrumbs/__tests__/useBreadcrumbs.spec.js
@@ -43,11 +43,11 @@ jest.mock('@apollo/client', () => {
     };
 });
 
-jest.mock('../../../hooks/useInternalLink', () =>
-    jest.fn(() => ({
+jest.mock('../../../hooks/useInternalLink', () => ({
+    useInternalLink: jest.fn(() => ({
         setShimmerType: jest.fn()
     }))
-);
+}));
 
 const storeConfigResponse = {
     data: {

diff --git a/packages/peregrine/lib/talons/Breadcrumbs/useBreadcrumbs.js b/packages/peregrine/lib/talons/Breadcrumbs/useBreadcrumbs.js
@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { useQuery } from '@apollo/client';
-import useInternalLink from '../../hooks/useInternalLink';
+import { useInternalLink } from '../../hooks/useInternalLink';
 
 import mergeOperations from '../../util/shallowMerge';
 

diff --git a/packages/peregrine/lib/talons/CategoryList/__tests__/useCategoryTile.spec.js b/packages/peregrine/lib/talons/CategoryList/__tests__/useCategoryTile.spec.js
@@ -30,11 +30,11 @@ const props = {
 
 const log = jest.fn();
 
-jest.mock('../../../hooks/useInternalLink', () =>
-    jest.fn(() => ({
+jest.mock('../../../hooks/useInternalLink', () => ({
+    useInternalLink: jest.fn(() => ({
         setShimmerType: jest.fn()
     }))
-);
+}));
 
 const Component = props => {
     const talonProps = useCategoryTile(props);

diff --git a/packages/peregrine/lib/talons/CategoryList/useCategoryTile.js b/packages/peregrine/lib/talons/CategoryList/useCategoryTile.js
@@ -1,7 +1,7 @@
 /* Deprecated in PWA-12.1.0*/
 
 import { useMemo } from 'react';
-import useInternalLink from '../../hooks/useInternalLink';
+import { useInternalLink } from '../../hooks/useInternalLink';
 
 const previewImageSize = 480;
 

diff --git a/packages/peregrine/lib/talons/ContactPage/__tests__/useContactLink.spec.js b/packages/peregrine/lib/talons/ContactPage/__tests__/useContactLink.spec.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { createTestInstance } from '@magento/peregrine';
 import { useQuery } from '@apollo/client';
-import useContactLink from '../useContactLink';
+import { useContactLink } from '../useContactLink';
 
 jest.mock('@apollo/client', () => ({
     useQuery: jest.fn()

diff --git a/packages/peregrine/lib/talons/ContactPage/__tests__/useContactPage.spec.js b/packages/peregrine/lib/talons/ContactPage/__tests__/useContactPage.spec.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { createTestInstance } from '@magento/peregrine';
 
 import { useMutation, useQuery } from '@apollo/client';
-import useContactPage from '../useContactPage';
+import { useContactPage } from '../useContactPage';
 
 /*
  * Mocks.

diff --git a/packages/peregrine/lib/talons/ContactPage/index.js b/packages/peregrine/lib/talons/ContactPage/index.js
@@ -1,2 +1,2 @@
-export { default as useContactPage } from './useContactPage';
-export { default as useContactLink } from './useContactLink';
+export { useContactPage } from './useContactPage';
+export { useContactLink } from './useContactLink';
diff --git a/packages/peregrine/lib/talons/ContactPage/useContactLink.js b/packages/peregrine/lib/talons/ContactPage/useContactLink.js
@@ -3,7 +3,7 @@ import { useQuery } from '@apollo/client';
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 import DEFAULT_OPERATIONS from './contactUs.gql';
 
-export default (props = {}) => {
+export const useContactLink = (props = {}) => {
     const { getStoreConfigQuery } = mergeOperations(
         DEFAULT_OPERATIONS,
         props.operations

diff --git a/packages/peregrine/lib/talons/ContactPage/useContactPage.js b/packages/peregrine/lib/talons/ContactPage/useContactPage.js
@@ -3,7 +3,7 @@ import { useMutation, useQuery } from '@apollo/client';
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 import DEFAULT_OPERATIONS from './contactUs.gql';
 
-export default props => {
+export const useContactPage = props => {
     const { cmsBlockIdentifiers = [], operations } = props;
     const {
         contactMutation,

diff --git a/packages/peregrine/lib/talons/Gallery/useGalleryItem.js b/packages/peregrine/lib/talons/Gallery/useGalleryItem.js
@@ -1,7 +1,7 @@
 import { isSupportedProductType as isSupported } from '@magento/peregrine/lib/util/isSupportedProductType';
 import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
 import { useCallback, useEffect, useRef } from 'react';
-import useIntersectionObserver from '@magento/peregrine/lib/hooks/useIntersectionObserver';
+import { useIntersectionObserver } from '@magento/peregrine/lib/hooks/useIntersectionObserver';
 
 export const useGalleryItem = (props = {}) => {
     const [, { dispatch }] = useEventingContext();

diff --git a/packages/peregrine/lib/talons/Link/__tests__/useLink.spec.js b/packages/peregrine/lib/talons/Link/__tests__/useLink.spec.js
@@ -1,8 +1,8 @@
 import React, { useRef } from 'react';
 import { act, create } from 'react-test-renderer';
 import { useLazyQuery } from '@apollo/client';
-import useLink from '../useLink';
-import useIntersectionObserver from '../../../hooks/useIntersectionObserver';
+import { useLink } from '../useLink';
+import { useIntersectionObserver } from '../../../hooks/useIntersectionObserver';
 
 jest.mock('react', () => {
     const react = jest.requireActual('react');
@@ -34,7 +34,9 @@ jest.mock('../../../util/makeUrl', () =>
     })
 );
 
-jest.mock('../../../hooks/useIntersectionObserver');
+jest.mock('../../../hooks/useIntersectionObserver', () => ({
+    useIntersectionObserver: jest.fn()
+}));
 
 const mockIntersectionObserve = jest.fn();
 const mockIntersectionUnobserve = jest.fn();

diff --git a/packages/peregrine/lib/talons/Link/useLink.js b/packages/peregrine/lib/talons/Link/useLink.js
@@ -1,11 +1,11 @@
 import { useEffect, useRef } from 'react';
 import { useLazyQuery } from '@apollo/client';
-import useIntersectionObserver from '../../hooks/useIntersectionObserver';
+import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
 import resourceUrl from '../../util/makeUrl';
 import mergeOperations from '../../util/shallowMerge';
 import DEFAULT_OPERATIONS from '../MagentoRoute/magentoRoute.gql';
 
-const useLink = (props, passedOperations = {}) => {
+export const useLink = (props, passedOperations = {}) => {
     const { innerRef: originalRef, to } = props;
     const shouldPrefetch = props.prefetchType || props.shouldPrefetch;
     const operations = shouldPrefetch
@@ -65,5 +65,3 @@ const useLink = (props, passedOperations = {}) => {
         ref: elementRef
     };
 };
-
-export default useLink;
diff --git a/packages/peregrine/lib/talons/MegaMenu/__tests__/useMegaMenu.spec.js b/packages/peregrine/lib/talons/MegaMenu/__tests__/useMegaMenu.spec.js
@@ -11,11 +11,11 @@ jest.mock('react-router-dom', () => ({
     useLocation: jest.fn(() => ({ pathname: '/venia-tops.html' }))
 }));
 
-jest.mock('../../../hooks/useInternalLink', () =>
-    jest.fn(() => ({
+jest.mock('../../../hooks/useInternalLink', () => ({
+    useInternalLink: jest.fn(() => ({
         setShimmerType: jest.fn().mockName('onNavigate')
     }))
-);
+}));
 
 jest.mock('../../../hooks/useEventListener', () => ({
     useEventListener: jest.fn()

diff --git a/packages/peregrine/lib/talons/MegaMenu/useMegaMenu.js b/packages/peregrine/lib/talons/MegaMenu/useMegaMenu.js
@@ -1,6 +1,6 @@
 import { useMemo, useState, useCallback, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
-import useInternalLink from '../../hooks/useInternalLink';
+import { useInternalLink } from '../../hooks/useInternalLink';
 
 import { useQuery } from '@apollo/client';
 import { useEventListener } from '../../hooks/useEventListener';

diff --git a/packages/peregrine/lib/talons/Navigation/useNavigation.js b/packages/peregrine/lib/talons/Navigation/useNavigation.js
@@ -6,7 +6,7 @@ import { useAppContext } from '../../context/app';
 import { useCatalogContext } from '../../context/catalog';
 import { useUserContext } from '../../context/user';
 import { useAwaitQuery } from '../../hooks/useAwaitQuery';
-import useInternalLink from '../../hooks/useInternalLink';
+import { useInternalLink } from '../../hooks/useInternalLink';
 
 import DEFAULT_OPERATIONS from './navigation.gql';
 

diff --git a/packages/peregrine/lib/talons/PageLoadingIndicator/__tests__/usePageLoadingIndicator.spec.js b/packages/peregrine/lib/talons/PageLoadingIndicator/__tests__/usePageLoadingIndicator.spec.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { act, create } from 'react-test-renderer';
 import { useAppContext } from '../../../context/app';
-import usePageLoadingIndicator from '../usePageLoadingIndicator';
+import { usePageLoadingIndicator } from '../usePageLoadingIndicator';
 
 jest.mock('../../../context/app', () => {
     return {

diff --git a/packages/peregrine/lib/talons/PageLoadingIndicator/usePageLoadingIndicator.js b/packages/peregrine/lib/talons/PageLoadingIndicator/usePageLoadingIndicator.js
@@ -3,7 +3,7 @@ import { useAppContext } from '../../context/app';
 
 const GROUP_LOADING_DELAY = 750;
 
-export default () => {
+export const usePageLoadingIndicator = () => {
     const [{ isPageLoading }] = useAppContext();
     const doneTimeoutRef = useRef();
     const [loadingState, setLoadingState] = useState('off');

diff --git a/packages/venia-ui/lib/components/App/__tests__/app.spec.js b/packages/venia-ui/lib/components/App/__tests__/app.spec.js
@@ -19,7 +19,9 @@ jest.mock('../../Navigation', () => 'Navigation');
 jest.mock('../../Routes', () => 'Routes');
 jest.mock('../../ToastContainer', () => 'ToastContainer');
 jest.mock('@magento/peregrine/lib/hooks/useDelayedTransition', () => {
-    return jest.fn();
+    return {
+        useDelayedTransition: jest.fn()
+    };
 });
 
 const mockAddToast = jest.fn();

diff --git a/packages/venia-ui/lib/components/App/app.js b/packages/venia-ui/lib/components/App/app.js
@@ -3,7 +3,7 @@ import { useIntl } from 'react-intl';
 import { array, func, shape, string } from 'prop-types';
 
 import { useToasts } from '@magento/peregrine';
-import useDelayedTransition from '@magento/peregrine/lib/hooks/useDelayedTransition';
+import { useDelayedTransition } from '@magento/peregrine/lib/hooks/useDelayedTransition';
 import { useApp } from '@magento/peregrine/lib/talons/App/useApp';
 
 import globalCSS from '../../index.module.css';

diff --git a/packages/venia-ui/lib/components/Link/__tests__/link.spec.js b/packages/venia-ui/lib/components/Link/__tests__/link.spec.js
@@ -1,15 +1,17 @@
 import React from 'react';
 import { act, create } from 'react-test-renderer';
 import { Link as RouterLink } from 'react-router-dom';
-import useLink from '@magento/peregrine/lib/talons/Link/useLink';
+import { useLink } from '@magento/peregrine/lib/talons/Link/useLink';
 import Link from '../link';
 
 jest.mock('@magento/peregrine/lib/talons/Link/useLink', () => {
-    return jest.fn(({ innerRef }) => {
-        return {
-            ref: innerRef
-        };
-    });
+    return {
+        useLink: jest.fn(({ innerRef }) => {
+            return {
+                ref: innerRef
+            };
+        })
+    };
 });
 
 jest.mock('react-router-dom', () => {

diff --git a/packages/venia-ui/lib/components/Link/link.js b/packages/venia-ui/lib/components/Link/link.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import { bool } from 'prop-types';
-import useLink from '@magento/peregrine/lib/talons/Link/useLink';
+import { useLink } from '@magento/peregrine/lib/talons/Link/useLink';
 
 /**
  * @kind functional component

diff --git a/packages/venia-ui/lib/components/PageLoadingIndicator/__tests__/pageLoadingIndicator.spec.js b/packages/venia-ui/lib/components/PageLoadingIndicator/__tests__/pageLoadingIndicator.spec.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { act, create } from 'react-test-renderer';
-import usePageLoadingIndicator from '@magento/peregrine/lib/talons/PageLoadingIndicator/usePageLoadingIndicator';
+import { usePageLoadingIndicator } from '@magento/peregrine/lib/talons/PageLoadingIndicator/usePageLoadingIndicator';
 import PageLoadingIndicator from '../pageLoadingIndicator';
 
 jest.mock(

diff --git a/packages/venia-ui/lib/components/PageLoadingIndicator/pageLoadingIndicator.js b/packages/venia-ui/lib/components/PageLoadingIndicator/pageLoadingIndicator.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { shape, string, bool } from 'prop-types';
 import { useStyle } from '../../classify';
 import defaultClasses from './pageLoadingIndicator.module.css';
-import usePageLoadingIndicator from '@magento/peregrine/lib/talons/PageLoadingIndicator/usePageLoadingIndicator';
+import { usePageLoadingIndicator } from '@magento/peregrine/lib/talons/PageLoadingIndicator/usePageLoadingIndicator';
 
 const PageLoadingIndicator = props => {
     const classes = useStyle(defaultClasses, props.classes);