WIP: working so far

dirAlias.js

@@ -13,13 +13,15 @@ module.exports = {
     '#containers': resolvePath('src/app/legacy/containers'),
     '#data': resolvePath('data/'),
     '#hooks': resolvePath('src/app/hooks'),
-    '#psammead': resolvePath('src/app/legacy/psammead'),
+    '#legacy': resolvePath('src/app/legacy/'),
     '#lib': resolvePath('src/app/lib/'),
     '#models': resolvePath('src/app/models/'),
     '#pages': resolvePath('src/app/pages/'),
-    '#testHelpers': resolvePath('src/testHelpers/'),
+    '#psammead': resolvePath('src/app/legacy/psammead'),
+    '#routes': resolvePath('src/app/routes/'),
     '#server': resolvePath('src/server/'),
     '#storybook': resolvePath('.storybook/'),
+    '#testHelpers': resolvePath('src/testHelpers/'),
   },
   jestDirAlias: {
     '^#app(.*)$': '<rootDir>/src/app$1',
@@ -28,13 +30,15 @@ module.exports = {
     '^#containers(.*)$': '<rootDir>/src/app/legacy/containers$1',
     '^#data(.*)$': '<rootDir>/data$1',
     '^#hooks(.*)$': '<rootDir>/src/app/hooks$1',
-    '^#psammead(.*)$': '<rootDir>/src/app/legacy/psammead$1',
+    '^#legacy(.*)$': '<rootDir>/src/app/legacy$1',
     '^#lib(.*)$': '<rootDir>/src/app/lib$1',
     '^#models(.*)$': '<rootDir>/src/app/models$1',
     '^#pages(.*)$': '<rootDir>/src/app/pages$1',
-    '^#testHelpers(.*)$': '<rootDir>/src/testHelpers$1',
+    '^#psammead(.*)$': '<rootDir>/src/app/legacy/psammead$1',
+    '^#routes(.*)$': '<rootDir>/src/app/routes$1',
     '^#server(.*)$': '<rootDir>/src/server$1',
     '^#storybook(.*)$': '<rootDir>/.storybook$1',
+    '^#testHelpers(.*)$': '<rootDir>/src/testHelpers$1',
   },
   eslintDirAlias: {
     map: [
@@ -44,13 +48,15 @@ module.exports = {
       ['#containers', './src/app/legacy/containers'],
       ['#data', './data'],
       ['#hooks', './src/app/hooks'],
+      ['#legacy', './src/app/legacy'],
       ['#lib', './src/app/lib'],
-      ['#psammead', './src/app/legacy/psammead'],
       ['#models', './src/app/models'],
       ['#pages', './src/app/pages'],
-      ['#testHelpers', './src/testHelpers'],
+      ['#psammead', './src/app/legacy/psammead'],
+      ['#routes', './src/app/routes'],
       ['#server', './src/server'],
       ['#storybook', './.storybook'],
+      ['#testHelpers', './src/testHelpers'],
     ],
     extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
   },

jsconfig.json

@@ -9,12 +9,14 @@
       "#containers/*": ["./src/app/legacy/containers/*"],
       "#data/*": ["./data/*"],
       "#hooks/*": [".src/app/hooks/*"],
-      "#psammead/*": ["./src/app/legacy/psammead/*"],
+      "#legacy/*": ["./src/app/legacy/*"],
       "#lib/*": ["./src/app/lib/*"],
       "#models/*": ["./src/app/models/*"],
       "#pages/*": ["./src/app/pages/*"],
-      "#testHelpers/*": ["./src/testHelpers/*"],
-      "#server/*": ["./src/server/*"]
+      "#psammead/*": ["./src/app/legacy/psammead/*"],
+      "#routes/*": ["./src/app/routes/*"],
+      "#server/*": ["./src/server/*"],
+      "#testHelpers/*": ["./src/testHelpers/*"]
     }
   },
   "exclude": ["node_modules", "dist"]

package.json

@@ -54,7 +54,7 @@
     "preinstall": "node scripts/check-package-manager.js",
     "start": "NODE_ENV=production node --no-experimental-fetch --max-old-space-size=3500 build/server.js",
     "stop": "./scripts/killApp.sh",
-    "storybook": "node .storybook/buildFontPreloads && storybook dev -p 9001 -c .storybook",
+    "storybook": "node .storybook/buildFontPreloads && storybook dev -p 9001 -c .storybook --debug-webpack",
     "test": "yarn build && yarn test:local",
     "test:local": "yarn test:lint && yarn test:dependencies && yarn test:unit && run-p --race start amp:validate && run-p --race start test:integration:ci",
     "test:dependencies": "node ./scripts/dependencyCheck",

src/app/components/ATIAnalytics/index.test.tsx

@@ -22,7 +22,7 @@ import {
   STORY_PAGE,
   CORRESPONDENT_STORY_PAGE,
   MEDIA_ARTICLE_PAGE,
-} from '../../routes/utils/pageTypes';
+} from '#routes/utils/pageTypes';
 import ATIAnalytics from '.';
 import * as amp from './amp';
 import * as canonical from './canonical';

src/app/components/ATIAnalytics/params/index.test.ts

@@ -10,7 +10,7 @@ import {
   HOME_PAGE,
   ERROR_PAGE,
   LIVE_PAGE,
-} from '../../../routes/utils/pageTypes';
+} from '#routes/utils/pageTypes';
 import { buildATIUrl, buildATIEventTrackingParams } from '.';
 import * as buildPageATIFunctionImports from './genericPage/buildParams';
 import { RequestContextProps } from '../../../contexts/RequestContext';

src/app/components/ATIAnalytics/params/index.ts

@@ -18,7 +18,7 @@ import {
   UGC_PAGE,
   AV_EMBEDS,
   DOWNLOADS_PAGE,
-} from '../../../routes/utils/pageTypes';
+} from '#routes/utils/pageTypes';
 import {
   buildTvRadioATIParams,
   buildTvRadioATIUrl,

src/app/components/Ad/Amp/AdSlot/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import isLive from '#lib/utilities/isLive';
-import { STORY_PAGE } from '../../../../routes/utils/pageTypes';
+import { STORY_PAGE } from '#routes/utils/pageTypes';
 import { PageTypes, Services } from '../../../../models/types/global';
 import { SlotType } from '../../types';
 import {

src/app/components/AmpIframe/index.tsx

@@ -3,7 +3,7 @@
 import { jsx } from '@emotion/react';
 import React, { PropsWithChildren } from 'react';
 import { Helmet } from 'react-helmet';
-import { GridItemMedium } from '#components/Grid';
+import { GridItemMedium } from '#legacy/components/Grid';
 import styles from './index.styles';
 
 type Props = {

src/app/components/ChartbeatAnalytics/index.test.tsx

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren, useMemo } from 'react';
 import { render } from '@testing-library/react';
-import { ARTICLE_PAGE } from '../../routes/utils/pageTypes';
+import { ARTICLE_PAGE } from '#routes/utils/pageTypes';
 import { RequestContextProvider } from '../../contexts/RequestContext';
 import { ServiceContextProvider } from '../../contexts/ServiceContext';
 import { ToggleContext } from '../../contexts/ToggleContext';

src/app/components/ChartbeatAnalytics/utils/index.test.ts

@@ -12,7 +12,7 @@ import {
   TOPIC_PAGE,
   MEDIA_ARTICLE_PAGE,
   LIVE_PAGE,
-} from '../../../routes/utils/pageTypes';
+} from '#routes/utils/pageTypes';
 import {
   chartbeatUID,
   useCanonical,

src/app/components/ChartbeatAnalytics/utils/index.ts

@@ -16,7 +16,7 @@ import {
   TOPIC_PAGE,
   LIVE_PAGE,
   MEDIA_ARTICLE_PAGE,
-} from '../../../routes/utils/pageTypes';
+} from '#routes/utils/pageTypes';
 import {
   Environments,
   PageTypes,

src/app/components/Curation/CurationPromo/index.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import fixture from '#data/pidgin/topics/c95y35941vrt.json';
-import { MEDIA_TYPES } from '#components/Promo';
+import { MEDIA_TYPES } from '#legacy/components/Promo';
 import Promo from '.';
 
 const Wrapper = styled.div`

src/app/components/Curation/CurationPromo/index.tsx

@@ -3,7 +3,7 @@ import React, { useContext } from 'react';
 import moment from 'moment';
 import path from 'ramda/src/path';
 import formatDuration from '#app/lib/utilities/formatDuration';
-import Promo from '#components/Promo';
+import Promo from '#legacy/components/Promo';
 import { Summary } from '#app/models/types/curationData';
 import VisuallyHiddenText from '../../VisuallyHiddenText';
 import { ServiceContext } from '../../../contexts/ServiceContext';

src/app/components/Disclaimer/index.tsx

@@ -6,7 +6,7 @@ import { GridItemLarge } from '../../legacy/components/Grid';
 import { ServiceContext } from '../../contexts/ServiceContext';
 import { RequestContext } from '../../contexts/RequestContext';
 import useToggle from '../../hooks/useToggle';
-import { ARTICLE_PAGE } from '../../routes/utils/pageTypes';
+import { ARTICLE_PAGE } from '#routes/utils/pageTypes';
 import Text from '../Text';
 import InlineLink from '../InlineLink';
 import styles from './index.styles';

src/app/components/Embeds/AmpIframeEmbed/index.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import AmpIframeEmbed from '.';
 import { ServiceContextProvider } from '../../../contexts/ServiceContext';
 import { RequestContextProvider } from '../../../contexts/RequestContext';
-import { ARTICLE_PAGE } from '../../../routes/utils/pageTypes';
+import { ARTICLE_PAGE } from '#routes/utils/pageTypes';
 import { Services } from '../../../models/types/global';
 import { ampParams } from '../types';
 

src/app/components/Embeds/OEmbed/index.test.tsx

@@ -6,7 +6,7 @@ import {
   RequestContext,
   RequestContextProps,
 } from '../../../contexts/RequestContext';
-import { ARTICLE_PAGE } from '../../../routes/utils/pageTypes';
+import { ARTICLE_PAGE } from '#routes/utils/pageTypes';
 import { Services } from '../../../models/types/global';
 import {
   sampleRiddleProps,

src/app/components/Embeds/UnsupportedEmbed/index.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '../../react-testing-library-with-providers';
-import { ARTICLE_PAGE } from '../../../routes/utils/pageTypes';
+import { ARTICLE_PAGE } from '#routes/utils/pageTypes';
 import {
   sampleTelescopeProps,
   samplePlayerRaterProps,

src/app/components/FrostedGlassPromo/index.test.tsx

@@ -5,7 +5,7 @@ import { ToggleContextProvider } from '../../contexts/ToggleContext';
 import { RequestContextProvider } from '../../contexts/RequestContext';
 import { ServiceContextProvider } from '../../contexts/ServiceContext';
 
-import { STORY_PAGE } from '../../routes/utils/pageTypes';
+import { STORY_PAGE } from '#routes/utils/pageTypes';
 import makeRelativeUrlPath from '../../lib/utilities/makeRelativeUrlPath';
 import * as clickTracking from '../../hooks/useClickTrackerHandler';
 import { render } from '../react-testing-library-with-providers';

src/app/components/Image/index.tsx

@@ -10,7 +10,7 @@ import { Global, jsx } from '@emotion/react';
 import { Helmet } from 'react-helmet';
 import styles from './index.styles';
 import { RequestContext } from '../../contexts/RequestContext';
-import { FRONT_PAGE, HOME_PAGE } from '../../routes/utils/pageTypes';
+import { FRONT_PAGE, HOME_PAGE } from '#routes/utils/pageTypes';
 
 type Props = {
   alt: string;

src/app/components/MostRead/index.test.tsx

@@ -9,7 +9,7 @@ import {
   ARTICLE_PAGE,
   CORRESPONDENT_STORY_PAGE,
   HOME_PAGE,
-} from '../../routes/utils/pageTypes';
+} from '#routes/utils/pageTypes';
 import { render, act } from '../react-testing-library-with-providers';
 import { ServiceContextProvider } from '../../contexts/ServiceContext';
 import MostRead from '.';

src/app/components/MostRead/index.tsx

@@ -15,7 +15,7 @@ import {
   STORY_PAGE,
   CORRESPONDENT_STORY_PAGE,
   ARTICLE_PAGE,
-} from '../../routes/utils/pageTypes';
+} from '#routes/utils/pageTypes';
 import { PageTypes } from '../../models/types/global';
 
 const blockLevelEventTrackingData = {

src/app/components/RelatedContentSection/RelatedContentItem/index.tsx

@@ -6,7 +6,7 @@ import path from 'ramda/src/path';
 import pathOr from 'ramda/src/pathOr';
 import { createSrcsets } from '#lib/utilities/srcSet';
 import buildIChefURL from '#app/lib/utilities/ichefURL';
-import Promo from '#components/OptimoPromos';
+import Promo from '#legacy/components/OptimoPromos';
 import isEmpty from 'ramda/src/isEmpty';
 import styles from './index.styles';
 import { EventTrackingBlock } from '../../../models/types/eventTracking';

src/app/contexts/EventTrackingContext/index.test.tsx

@@ -5,7 +5,7 @@ import {
   screen,
 } from '../../components/react-testing-library-with-providers';
 
-import { STORY_PAGE, HOME_PAGE } from '../../routes/utils/pageTypes';
+import { STORY_PAGE, HOME_PAGE } from '#routes/utils/pageTypes';
 import { EventTrackingContext } from '.';
 import fixtureData from './fixtureData.json';
 

src/app/contexts/EventTrackingContext/index.tsx

@@ -26,7 +26,7 @@ import {
   UGC_PAGE,
   AV_EMBEDS,
   DOWNLOADS_PAGE,
-} from '../../routes/utils/pageTypes';
+} from '#routes/utils/pageTypes';
 import { PageTypes, Platforms } from '../../models/types/global';
 import { buildATIEventTrackingParams } from '../../components/ATIAnalytics/params';
 import { ServiceContext } from '../ServiceContext';

src/app/contexts/RequestContext/getStatsPageIdentifier/index.ts

@@ -1,5 +1,5 @@
 import { PageTypes, Services } from '#app/models/types/global';
-import { ARTICLE_PAGE, FRONT_PAGE } from '../../../routes/utils/pageTypes';
+import { ARTICLE_PAGE, FRONT_PAGE } from '#routes/utils/pageTypes';
 
 type Props = {
   pageType: PageTypes;

src/app/lib/utilities/episodeAvailability/ErrorMessage/index.jsx

@@ -14,7 +14,7 @@ import {
   GEL_GROUP_3_SCREEN_WIDTH_MAX,
 } from '#psammead/gel-foundations/src/breakpoints';
 
-import { MediaMessage } from '#components/MediaPlayer';
+import { MediaMessage } from '#legacy/components/MediaPlayer';
 import { EPISODE_STATUS } from '..';
 import { ServiceContext } from '../../../../contexts/ServiceContext';
 

src/app/lib/utilities/getUrlHelpers/getEmbedUrl/index.ts

@@ -1,6 +1,6 @@
 import isLive from '../../isLive';
 import { getEnvConfig } from '../../getEnvConfig';
-import parseAvRoute from '../../../../routes/utils/parseAvRoute';
+import parseAvRoute from '#routes/utils/parseAvRoute';
 
 type MediaTypes = 'media' | 'avEmbed' | 'cps' | 'articles' | 'live' | 'legacy';
 

src/app/models/types/global.ts

@@ -1,4 +1,4 @@
-import * as PAGE_TYPES from '../../routes/utils/pageTypes';
+import * as PAGE_TYPES from '#routes/utils/pageTypes';
 
 export type Environments = 'local' | 'test' | 'live';
 

src/app/pages/ArticlePage/ArticlePage.jsx

@@ -39,7 +39,7 @@ import {
 import filterForBlockType from '#lib/utilities/blockHandlers';
 import RelatedTopics from '#containers/RelatedTopics';
 import NielsenAnalytics from '#containers/NielsenAnalytics';
-import ScrollablePromo from '#components/ScrollablePromo';
+import ScrollablePromo from '#legacy/components/ScrollablePromo';
 import CpsRecommendations from '#containers/CpsRecommendations';
 import InlinePodcastPromo from '#containers/PodcastPromo/Inline';
 import ImageWithCaption from '../../components/ImageWithCaption';

src/app/pages/ArticlePage/PagePromoSections/RelatedContentSection/RelatedContentItem/index.jsx

@@ -2,7 +2,7 @@ import React, { useContext, forwardRef } from 'react';
 import path from 'ramda/src/path';
 import { createSrcsets } from '#lib/utilities/srcSet';
 import buildIChefURL from '#app/lib/utilities/ichefURL';
-import Promo from '#components/OptimoPromos';
+import Promo from '#legacy/components/OptimoPromos';
 import isEmpty from 'ramda/src/isEmpty';
 import { ServiceContext } from '../../../../../contexts/ServiceContext';
 import { TitleWithContent, StyledRelatedContentWrapper } from './index.styles';

src/app/pages/ArticlePage/PagePromoSections/RelatedContentSection/RelatedContentItem/index.styles.jsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import Promo from '#components/OptimoPromos';
+import Promo from '#legacy/components/OptimoPromos';
 import { GEL_SPACING } from '#psammead/gel-foundations/src/spacings';
 import { BORDER_SPACING } from '../../constants';
 

src/app/pages/ArticlePage/PagePromoSections/RelatedContentSection/index.styles.jsx

@@ -9,8 +9,8 @@ import {
   GEL_GROUP_3_SCREEN_WIDTH_MIN,
   GEL_GROUP_4_SCREEN_WIDTH_MIN,
 } from '#psammead/gel-foundations/src/breakpoints';
-import PromoList from '#components/OptimoPromos/PromoList';
-import PromoItem from '#components/OptimoPromos/PromoItem/index.styles';
+import PromoList from '#legacy/components/OptimoPromos/PromoList';
+import PromoItem from '#legacy/components/OptimoPromos/PromoItem/index.styles';
 import { BORDER_SPACING } from '../constants';
 
 export const StyledRelatedContentSection = styled.section`

src/app/pages/ArticlePage/PagePromoSections/TopStoriesSection/TopStoriesItem/index.jsx

@@ -2,7 +2,7 @@ import React, { useContext, forwardRef } from 'react';
 import pathOr from 'ramda/src/pathOr';
 import isEmpty from 'ramda/src/isEmpty';
 import { getIsLive } from '#lib/utilities/getStoryPromoInfo';
-import Promo from '#components/OptimoPromos';
+import Promo from '#legacy/components/OptimoPromos';
 import { ServiceContext } from '../../../../../contexts/ServiceContext';
 
 import {

src/app/pages/ArticlePage/PagePromoSections/TopStoriesSection/TopStoriesItem/index.styles.jsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { getPica } from '#psammead/gel-foundations/src/typography';
-import Promo from '#components/OptimoPromos';
+import Promo from '#legacy/components/OptimoPromos';
 import { GEL_SPACING } from '#psammead/gel-foundations/src/spacings';
 import { BORDER_SPACING } from '../../constants';
 

src/app/pages/ArticlePage/PagePromoSections/TopStoriesSection/index.styles.jsx

@@ -10,8 +10,8 @@ import {
   GEL_GROUP_3_SCREEN_WIDTH_MAX,
 } from '#psammead/gel-foundations/src/breakpoints';
 import SectionLabel from '#psammead/psammead-section-label/src';
-import PromoItem from '#components/OptimoPromos/PromoItem/index.styles';
-import PromoList from '#components/OptimoPromos/PromoList';
+import PromoItem from '#legacy/components/OptimoPromos/PromoItem/index.styles';
+import PromoList from '#legacy/components/OptimoPromos/PromoList';
 import { BORDER_SPACING_DBL } from '../constants';
 
 export const StyledSectionLabel = styled(SectionLabel)`

src/app/pages/ErrorPage/ErrorPage.jsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { Helmet } from 'react-helmet';
-import ErrorMain from '#components/ErrorMain';
+import ErrorMain from '#legacy/components/ErrorMain';
 import { useTheme } from '@emotion/react';
 import { ServiceContext } from '../../contexts/ServiceContext';
 

src/app/pages/FeatureIdxPage/FeatureIdxPage.jsx

@@ -2,7 +2,7 @@ import React, { useContext, Fragment } from 'react';
 import path from 'ramda/src/path';
 import pathOr from 'ramda/src/pathOr';
 import IndexHeading from '#containers/IndexHeading';
-import IndexPageContainer from '#components/PageLayout/IndexPageContainer';
+import IndexPageContainer from '#legacy/components/PageLayout/IndexPageContainer';
 import IndexPageSection from '#containers/IndexPageSection';
 import ComscoreAnalytics from '#containers/ComscoreAnalytics';
 import AdContainer from '../../components/Ad';

src/app/pages/FrontPage/FrontPage.jsx

@@ -4,7 +4,7 @@ import findIndex from 'ramda/src/findIndex';
 import styled from '@emotion/styled';
 import { GEL_GROUP_4_SCREEN_WIDTH_MIN } from '#psammead/gel-foundations/src/breakpoints';
 import ComscoreAnalytics from '#containers/ComscoreAnalytics';
-import IndexPageContainer from '#components/PageLayout/IndexPageContainer';
+import IndexPageContainer from '#legacy/components/PageLayout/IndexPageContainer';
 import IndexPageSection from '#containers/IndexPageSection';
 import RadioScheduleContainer from '#containers/RadioSchedule';
 import { NEGATIVE_MARGIN } from '#lib/styles.const';

src/app/pages/LiveRadioPage/LiveRadioPage.tsx

@@ -3,7 +3,7 @@ import { Headline } from '#psammead/psammead-headings/src';
 import Paragraph from '#psammead/psammead-paragraph/src';
 import RadioScheduleContainer from '#containers/RadioSchedule';
 import ComscoreAnalytics from '#containers/ComscoreAnalytics';
-import Grid, { GelPageGrid } from '#components/Grid';
+import Grid, { GelPageGrid } from '#legacy/components/Grid';
 import MediaLoader from '#app/components/MediaLoader';
 import ATIAnalytics from '../../components/ATIAnalytics';
 import ChartbeatAnalytics from '../../components/ChartbeatAnalytics';