Using webpack aliases in simorgh

.storybook/config.js

@@ -4,7 +4,7 @@ import { configure, addDecorator, addParameters } from '@storybook/react';
 import { create } from '@storybook/theming';
 import * as fontFaces from '@bbc/psammead-styles/fonts';
 import timemachine from 'timemachine';
-import GlobalStyle from '../src/app/lib/globalStyles';
+import GlobalStyle from '#app/lib/globalStyles';
 
 // This affects the global Date object for the storybook application, to ensure consistency in chromaticQA testing.
 timemachine.config({

3rdPartyCypress/cypress/integration/errorPageNews.js

@@ -1,4 +1,4 @@
-import news from '../../../src/app/lib/config/services/news';
+import news from '#app/lib/config/services/news';
 
 // This is a 3rd party test, but if it fails we should arrange for it to be fixed.
 describe('Test the mozart 404 page', () => {

cypress/integration/pages/articles/tests.js

@@ -1,7 +1,7 @@
 import { BBC_BLOCKS } from '@bbc/psammead-assets/svgs';
 import * as moment from 'moment-timezone';
 import config from '../../../support/config/services';
-import appConfig from '../../../../src/app/lib/config/services';
+import appConfig from '#app/lib/config/services';
 
 const getBlockByType = (blocks, blockType) => {
   let blockData;

cypress/integration/pages/errorPage404/tests.js

@@ -1,5 +1,5 @@
 import config from '../../../support/config/services';
-import appConfig from '../../../../src/app/lib/config/services';
+import appConfig from '#app/lib/config/services';
 
 // For testing important features that differ between services, e.g. Timestamps.
 // We recommend using inline conditional logic to limit tests to services which differ.

cypress/integration/pages/testsForAllPages.js

@@ -1,6 +1,6 @@
 import config from '../../support/config/services';
 import envConfig from '../../support/config/envs';
-import appConfig from '../../../src/app/lib/config/services';
+import appConfig from '#lib/config/services';
 import describeForEuOnly from '../../support/helpers/describeForEuOnly';
 import useAppToggles from '../../support/helpers/useAppToggles';
 

cypress/integration/specialFeatures/cookieBanner/testsForAMPOnly.js

@@ -1,5 +1,5 @@
 import config from '../../../support/config/services';
-import appConfig from '../../../../src/app/lib/config/services';
+import appConfig from '#app/lib/config/services';
 import describeForEuOnly from '../../../support/helpers/describeForEuOnly';
 
 // Limited to 1 UK & 1 WS service when a smoke test due to time test takes to run per page.

cypress/integration/specialFeatures/cookieBanner/testsForCanonicalOnly.js

@@ -1,4 +1,4 @@
-import appConfig from '../../../../src/app/lib/config/services';
+import appConfig from '#app/lib/config/services';
 import config from '../../../support/config/services';
 
 // Limited to 1 UK & 1 WS service when a smoke test due to time test takes to run per page.

cypress/support/helpers/useAppToggles.js

@@ -1,4 +1,4 @@
-import togglesConfig from '../../../src/app/lib/config/toggles';
+import togglesConfig from '#app/lib/config/toggles';
 
 const useAppToggles = togglesConfig[Cypress.env('APP_ENV')];
 

dataValidator/helpers/validators/validateData.test.js

@@ -3,7 +3,7 @@ global.console.time = jest.fn(); // silence console.time during jest tests
 
 const { validateData } = require('./validateData');
 
-const validData = require('../../../data/news/articles/c0000000001o.json');
+const validData = require('#data/news/articles/c0000000001o.json');
 
 const invalidData = {};
 

dataValidator/helpers/validators/validateNode.test.js

@@ -1,11 +1,11 @@
-import { textBlock as modelTextBlock } from '../../../src/app/models/blocks';
+import { textBlock as modelTextBlock } from '#models/blocks';
 
 global.console.log = jest.fn(); // silence console.log during jest tests
 global.console.time = jest.fn(); // silence console.time during jest tests
 
 const validateNode = require('./validateNode');
 const { getAllSchemas } = require('../interpretSchema/getAllSchemas');
-const data = require('../../../data/news/articles/c0000000001o.json');
+const data = require('#data/news/articles/c0000000001o.json');
 
 const schemas = getAllSchemas();
 const { article } = schemas;

dataValidator/helpers/validators/validateOneOf.test.js

@@ -2,7 +2,7 @@
 
 const { validateOneOf } = require('./validateOneOf');
 const { getAllSchemas } = require('../interpretSchema/getAllSchemas');
-const data = require('../../../data/news/articles/c0000000001o.json');
+const data = require('#data/news/articles/c0000000001o.json');
 
 const schemas = getAllSchemas();
 const referencedItems = schemas.blocks.items.oneOf;

puppeteer/bundleRequests.test.js

@@ -1,6 +1,6 @@
 // eslint-disable-next-line import/no-unresolved
 import puppeteer from 'puppeteer';
-import { localBaseUrl } from '../src/testHelpers/config';
+import { localBaseUrl } from '#testHelpers/config';
 
 global.Cypress = { env: () => 'local' };
 

src/app/Layouts/defaultPageWrapper.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import DefaultPageWrapper from './defaultPageWrapper';
-import { shouldShallowMatchSnapshot } from '../../testHelpers';
+import { shouldShallowMatchSnapshot } from '#testHelpers';
 
 describe('defaultPageWrapper', () => {
   const propsWithChildren = {

src/app/components/ErrorPage/index.jsx

@@ -7,8 +7,8 @@ import Paragraph from '@bbc/psammead-paragraph';
 import { C_POSTBOX } from '@bbc/psammead-styles/colours';
 import { scriptPropType } from '@bbc/gel-foundations/prop-types';
 import { getParagon, GEL_FF_REITH_SANS } from '@bbc/gel-foundations/typography';
-import { GhostGrid, GridItemConstrainedMedium } from '../../lib/styledGrid';
-import idSanitiser from '../../lib/utilities/idSanitiser';
+import { GhostGrid, GridItemConstrainedMedium } from '#lib/styledGrid';
+import idSanitiser from '#lib/utilities/idSanitiser';
 
 const StatusCode = styled.span`
   ${props => (props.script ? getParagon(props.script) : '')};

src/app/components/ErrorPage/index.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { latin, arabic } from '@bbc/gel-foundations/scripts';
-import { shouldMatchSnapshot } from '../../../testHelpers';
+import { shouldMatchSnapshot } from '#testHelpers';
 import ErrorMain from './index';
 
 describe('ErrorMain', () => {

src/app/components/IfAboveIE9Comment/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shouldMatchSnapshot } from '../../../testHelpers';
+import { shouldMatchSnapshot } from '#testHelpers';
 import IfAboveIE9 from '.';
 
 describe('Timestamp', () => {

src/app/components/InlineSpan/index.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { latin, arabic } from '@bbc/gel-foundations/scripts';
-import { shouldMatchSnapshot } from '../../../testHelpers';
+import { shouldMatchSnapshot } from '#testHelpers';
 import Inline from './index';
 
 describe('Inline', () => {

src/app/components/LinkedData/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shouldShallowMatchSnapshot } from '../../../testHelpers';
+import { shouldShallowMatchSnapshot } from '#testHelpers';
 import LinkData from '.';
 
 describe('LinkData', () => {

src/app/components/Metadata/helpers/iconLinks.test.js

@@ -1,4 +1,4 @@
-import { shouldMatchSnapshot } from '../../../../testHelpers';
+import { shouldMatchSnapshot } from '#testHelpers';
 import { getIconLinks } from './iconLinks';
 
 const iconSizes = {

src/app/components/Metadata/index.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Metadata from './index';
-import { shouldShallowMatchSnapshot } from '../../../testHelpers';
+import { shouldShallowMatchSnapshot } from '#testHelpers';
 
 const iconSizes = {
   'apple-touch-icon': [

src/app/components/ResourceHints/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shouldMatchSnapshot } from '../../../testHelpers';
+import { shouldMatchSnapshot } from '#testHelpers';
 import ResourceHints from './index';
 
 describe('ResourceHints', () => {

src/app/containers/ATIAnalytics/atiUrl/index.js

@@ -9,7 +9,7 @@ import {
   getReferrer,
   isLocServeCookieSet,
   sanitise,
-} from '../../../lib/analyticsUtils';
+} from '#lib/analyticsUtils';
 
 /*
  * For AMP pages, certain browser and device values are determined

src/app/containers/ATIAnalytics/atiUrl/index.test.js

@@ -1,4 +1,4 @@
-import * as genericLabelHelpers from '../../../lib/analyticsUtils';
+import * as genericLabelHelpers from '#lib/analyticsUtils';
 
 const atiPageViewParams = require('.').default;
 

src/app/containers/ATIAnalytics/canonical/index.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { string } from 'prop-types';
-import sendBeacon from '../../../lib/analyticsUtils/sendBeacon';
+import sendBeacon from '#lib/analyticsUtils/sendBeacon';
 
 const CanonicalATIAnalytics = ({ pageviewParams }) => {
   const [atiPageViewUrl] = useState(

src/app/containers/ATIAnalytics/canonical/index.test.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { create, act } from 'react-test-renderer';
 import { render } from 'enzyme';
 import CanonicalATIAnalytics from '.';
-import { shouldMatchSnapshot } from '../../../../testHelpers';
-import * as beacon from '../../../lib/analyticsUtils/sendBeacon';
+import { shouldMatchSnapshot } from '#testHelpers';
+import * as beacon from '#lib/analyticsUtils/sendBeacon';
 
 describe('Canonical ATI Analytics', () => {
   afterEach(() => {

src/app/containers/ATIAnalytics/index.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { RequestContext } from '../../contexts/RequestContext';
+import { RequestContext } from '#contexts/RequestContext';
 import CanonicalATIAnalytics from './canonical';
 import AmpATIAnalytics from './amp';
 import getArticleAtiParams from './params/article';
 import getFrontPageAtiParams from './params/frontpage';
 import getMediaPageAtiParams from './params/media';
-import { pageDataPropType } from '../../models/propTypes/data';
+import { pageDataPropType } from '#models/propTypes/data';
 
 const ATIAnalytics = ({ data }) => {
   const { pageType, platform } = React.useContext(RequestContext);

src/app/containers/ATIAnalytics/index.test.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { node, string } from 'prop-types';
 import renderer from 'react-test-renderer';
-import { isNull, suppressPropWarnings } from '../../../testHelpers';
+import { isNull, suppressPropWarnings } from '#testHelpers';
 import { articleDataNews } from '../Article/fixtureData';
-import { RequestContextProvider } from '../../contexts/RequestContext';
-import { ServiceContextProvider } from '../../contexts/ServiceContext';
+import { RequestContextProvider } from '#contexts/RequestContext';
+import { ServiceContextProvider } from '#contexts/ServiceContext';
 
 import ATIAnalytics from '.';
 import * as amp from './amp';

src/app/containers/ATIAnalytics/params/article/index.jsx

@@ -1,16 +1,16 @@
 import { useContext } from 'react';
 import atiPageViewParams from '../../atiUrl';
-import { ServiceContext } from '../../../../contexts/ServiceContext';
-import { RequestContext } from '../../../../contexts/RequestContext';
+import { ServiceContext } from '#contexts/ServiceContext';
+import { RequestContext } from '#contexts/RequestContext';
 
-import { getPublishedDatetime } from '../../../../lib/analyticsUtils';
+import { getPublishedDatetime } from '#lib/analyticsUtils';
 import {
   getLanguage,
   getContentId,
   getPageIdentifier,
   getPromoHeadline,
   getThingAttributes,
-} from '../../../../lib/analyticsUtils/article';
+} from '#lib/analyticsUtils/article';
 
 const ArticleAtiParams = articleData => {
   const { platform, isUK, statsDestination, previousPath, origin } = useContext(

src/app/containers/ATIAnalytics/params/article/index.test.jsx

@@ -2,10 +2,10 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import ArticleAtiParams from '.';
 import * as atiPageViewParams from '../../atiUrl';
-import * as commonTestUtils from '../../../../lib/analyticsUtils';
-import * as testUtils from '../../../../lib/analyticsUtils/article';
-import { ServiceContext } from '../../../../contexts/ServiceContext';
-import { RequestContextProvider } from '../../../../contexts/RequestContext';
+import * as commonTestUtils from '#lib/analyticsUtils';
+import * as testUtils from '#lib/analyticsUtils/article';
+import { ServiceContext } from '#contexts/ServiceContext';
+import { RequestContextProvider } from '#contexts/RequestContext';
 
 describe('ArticleAtiParams', () => {
   const mockArticleData = {

src/app/containers/ATIAnalytics/params/frontpage/index.jsx

@@ -1,14 +1,14 @@
 import { useContext } from 'react';
 import atiPageViewParams from '../../atiUrl';
-import { RequestContext } from '../../../../contexts/RequestContext';
-import { ServiceContext } from '../../../../contexts/ServiceContext';
-import { getPublishedDatetime } from '../../../../lib/analyticsUtils';
+import { RequestContext } from '#contexts/RequestContext';
+import { ServiceContext } from '#contexts/ServiceContext';
+import { getPublishedDatetime } from '#lib/analyticsUtils';
 import {
   getContentId,
   getLanguage,
   getPageIdentifier,
   getPageTitle,
-} from '../../../../lib/analyticsUtils/frontpage';
+} from '#lib/analyticsUtils/frontpage';
 
 const FrontPageAtiParams = frontpageData => {
   const { platform, statsDestination } = useContext(RequestContext);

src/app/containers/ATIAnalytics/params/frontpage/index.test.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import * as atiPageViewParams from '../../atiUrl';
-import * as commonTestUtils from '../../../../lib/analyticsUtils';
-import * as testUtils from '../../../../lib/analyticsUtils/frontpage';
-import { ServiceContext } from '../../../../contexts/ServiceContext';
-import { RequestContextProvider } from '../../../../contexts/RequestContext';
+import * as commonTestUtils from '#lib/analyticsUtils';
+import * as testUtils from '#lib/analyticsUtils/frontpage';
+import { ServiceContext } from '#contexts/ServiceContext';
+import { RequestContextProvider } from '#contexts/RequestContext';
 
 import FrontPageAtiParams from '.';
 

src/app/containers/ATIAnalytics/params/media/index.jsx

@@ -2,8 +2,8 @@ import { useContext } from 'react';
 import path from 'ramda/src/path';
 
 import atiPageViewParams from '../../atiUrl';
-import { RequestContext } from '../../../../contexts/RequestContext';
-import { ServiceContext } from '../../../../contexts/ServiceContext';
+import { RequestContext } from '#contexts/RequestContext';
+import { ServiceContext } from '#contexts/ServiceContext';
 
 const Params = pageData => {
   const { platform, statsDestination } = useContext(RequestContext);

src/app/containers/ATIAnalytics/params/media/index.test.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import * as atiPageViewParams from '../../atiUrl';
-import { ServiceContext } from '../../../../contexts/ServiceContext';
-import { RequestContextProvider } from '../../../../contexts/RequestContext';
+import { ServiceContext } from '#contexts/ServiceContext';
+import { RequestContextProvider } from '#contexts/RequestContext';
 
 import MediaAtiParams from '.';
-import fixture from '../../../../../../data/indonesia/bbc_indonesian_radio/liveradio.json';
+import fixture from '#data/indonesia/bbc_indonesian_radio/liveradio.json';
 
 describe('MediaAtiParams', () => {
   const Component = (serviceContextStub, requestContextStub) => (

src/app/containers/App/App.jsx

@@ -2,7 +2,7 @@ import { useEffect, useState, useRef } from 'react';
 import { renderRoutes } from 'react-router-config';
 import { withRouter } from 'react-router-dom';
 import getRouteProps from '../../routes/getInitialData/utils/getRouteProps';
-import usePrevious from '../../lib/utilities/usePrevious';
+import usePrevious from '#lib/utilities/usePrevious';
 
 export const App = ({ routes, location, initialData, bbcOrigin, history }) => {
   const {

src/app/containers/App/index.test.jsx

@@ -3,7 +3,7 @@
  * https://github.com/jtart/react-universal-app
  */
 import React from 'react';
-import { shouldShallowMatchSnapshot } from '../../../testHelpers';
+import { shouldShallowMatchSnapshot } from '#testHelpers';
 import { ClientApp, ServerApp } from '.';
 
 describe('ClientApp', () => {

src/app/containers/Article/fixtureData.js

@@ -1,4 +1,4 @@
-import { blockContainingText, singleTextBlock } from '../../models/blocks';
+import { blockContainingText, singleTextBlock } from '#models/blocks';
 
 const articleDataBuilder = (
   id,

src/app/containers/Article/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shape } from 'prop-types';
 import compose from 'ramda/src/compose';
-import articlePropTypes from '../../models/propTypes/article';
+import articlePropTypes from '#models/propTypes/article';
 import ArticleMain from '../ArticleMain';
 
 import withContexts from '../PageHandlers/withContexts';

src/app/containers/Article/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shouldMatchSnapshot } from '../../../testHelpers';
+import { shouldMatchSnapshot } from '#testHelpers';
 import ArticleContainer from './index';
 
 // explicitly ignore console.log errors for Article/index:getInitialProps() error logging