@newskit-render/core 0.0.0-d55b7d88

package/newrelic.js

@@ -0,0 +1,86 @@
+'use strict'
+/**
+ * New Relic agent configuration.
+ *
+ * See lib/config/default.js in the agent distribution for a more complete
+ * description of configuration variables and their potential values.
+ */
+exports.config = {
+  /**
+   * Array of application names.
+   */
+  app_name: [process.env.NEW_RELIC_APP_NAME],
+  /**
+   * Your New Relic license key.
+   */
+  license_key: process.env.NEW_RELIC_LICENSE_KEY,
+  /**
+   * This setting controls distributed tracing.
+   * Distributed tracing lets you see the path that a request takes through your
+   * distributed system. Enabling distributed tracing changes the behavior of some
+   * New Relic features, so carefully consult the transition guide before you enable
+   * this feature: https://docs.newrelic.com/docs/transition-guide-distributed-tracing
+   * Default is false.
+   */
+  distributed_tracing: {
+    /**
+     * Enables/disables distributed tracing.
+     *
+     * @env NEW_RELIC_DISTRIBUTED_TRACING_ENABLED
+     */
+    enabled: true,
+  },
+  application_logging: {
+    forwarding: {
+      enabled: true,
+    },
+  },
+  logging: {
+    /**
+     * Level at which to log. 'trace' is most useful to New Relic when diagnosing
+     * issues with the agent, 'info' and higher will impose the least overhead on
+     * production applications.
+     */
+    level: 'info',
+    filepath: '',
+  },
+  /**
+   * When true, all request headers except for those listed in attributes.exclude
+   * will be captured for all traces, unless otherwise specified in a destination's
+   * attributes include/exclude lists.
+   */
+  allow_all_headers: true,
+  attributes: {
+    /**
+     * Prefix of attributes to exclude from all destinations. Allows * as wildcard
+     * at end.
+     *
+     * NOTE: If excluding headers, they must be in camelCase form to be filtered.
+     *
+     * @env NEW_RELIC_ATTRIBUTES_EXCLUDE
+     */
+    exclude: [
+      'request.headers.cookie',
+      'request.headers.authorization',
+      'request.headers.proxyAuthorization',
+      'request.headers.setCookie*',
+      'request.headers.x*',
+      'response.headers.cookie',
+      'response.headers.authorization',
+      'response.headers.proxyAuthorization',
+      'response.headers.setCookie*',
+      'response.headers.x*',
+    ],
+  },
+  rules: {
+    name: [
+      { pattern: '/api/account/mutate', name: 'Account mutation call' },
+      { pattern: '/api/account/query', name: 'Account query call' },
+      { pattern: '/api/auth/.*', name: 'Auth call' },
+      { pattern: '/api/health-check', name: 'Health Check' },
+      { pattern: '/api/news-sitemap', name: 'News Sitemap' },
+      { pattern: '/api/sitemap', name: 'Sitemap' },
+      { pattern: '/api/.*', name: 'API call' },
+    ],
+  },
+}

package/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package/next.config.js

@@ -0,0 +1,95 @@
+/* eslint-disable no-param-reassign */
+const { PHASE_PRODUCTION_SERVER } = require('next/constants')
+
+module.exports = (phase) => {
+  const images = {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'www.thesun.co.uk',
+        pathname: '/wp-content/**',
+      },
+      {
+        protocol: 'https',
+        hostname: 'www.plchldr.co',
+        pathname: '/**',
+      },
+      {
+        protocol: 'https',
+        hostname: 'plchldr.co',
+        pathname: '/**',
+      },
+    ],
+  }
+
+  if (phase === PHASE_PRODUCTION_SERVER) {
+    return {
+      images,
+    }
+  }
+
+  const path = require('path')
+  const withTM = require('next-transpile-modules')([
+    '@newskit-render/auth',
+    '@newskit-render/my-account',
+    '@newskit-render/validation',
+  ])
+  const withBundleAnalyzer = require('@next/bundle-analyzer')({
+    enabled: process.env.ANALYZE === 'true',
+  })
+
+  return withBundleAnalyzer(
+    withTM({
+      webpack: (config, options) => {
+        if (options.isServer) {
+          config.externals = ['react', ...config.externals]
+        }
+
+        config.resolve.alias.newskit = path.resolve(
+          __dirname,
+          '.',
+          'node_modules',
+          'newskit'
+        )
+        config.resolve.alias.react = path.resolve(
+          __dirname,
+          '.',
+          'node_modules',
+          'react'
+        )
+
+        return config
+      },
+      images,
+      output: 'standalone',
+      async rewrites() {
+        return [
+          {
+            source: '/sitemap.xml',
+            destination: '/api/sitemap',
+          },
+          {
+            source: '/pages-sitemap.xml',
+            destination: '/api/pages-sitemap',
+          },
+          {
+            source: '/competitions-sitemap.xml',
+            destination: '/api/competitions-sitemap',
+          },
+          {
+            source: '/news-sitemap.xml',
+            destination: '/api/news-sitemap',
+          },
+          {
+            source: '/feed',
+            destination: '/api/feed',
+          },
+          {
+            source: '/robots.txt',
+            destination: '/api/robots',
+          },
+        ]
+      },
+    })
+  )
+}

package/package.json

@@ -0,0 +1,127 @@
+{
+  "name": "@newskit-render/core",
+  "version": "0.0.0-d55b7d88",
+  "description": "Newskit Render - Core package",
+  "author": "",
+  "license": "UNLICENSED",
+  "keywords": [],
+  "engines": {
+    "node": ">=16.13.0"
+  },
+  "scripts": {
+    "build": "next build",
+    "start": "NODE_OPTIONS=--max_old_space_size=8192 next dev",
+    "dev:nr": "NODE_OPTIONS='-r @newrelic/next' next dev",
+    "start:prod": "next build && next start",
+    "start:prod:nr": "next build && NODE_OPTIONS='-r @newrelic/next' next start",
+    "clean": "rm -rf node_modules & rm -f package-lock.json & rm -f yarn.lock & rm -rf .next",
+    "test:unit": "jest --coverage --verbose --silent --i",
+    "test:unit:ci": "JEST_JUNIT_OUTPUT_NAME=core.xml node --max_old_space_size=4096 --expose-gc ./node_modules/.bin/jest --ci --coverage --reporters=default --reporters=jest-junit --runInBand --logHeapUsage",
+    "test:watch": "jest --watch",
+    "cy:run": "cypress run -b chrome --headless",
+    "cy:vis": "percy exec -- cypress run --config-file cypress/config/visual.config.ts -b chrome --headless",
+    "cy:vis:skip": "PERCY_PARTIAL_BUILD=1 percy exec -- cypress run --config-file cypress/config/visual.skip.config.ts",
+    "cy:open": "cypress open -b chrome",
+    "cy:open:vis": "cypress open --config-file cypress/config/visual.config.ts -b chrome",
+    "test:e2e": "yarn cy:run",
+    "test:e2e:ci": "cypress run --env -b chrome --headless",
+    "start:test:server": "next build && next start",
+    "wait:server": "wait-on http://localhost:3000",
+    "wait:external": "wait-on",
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx . --color && prettier --check './**/*.{js,jsx,ts,tsx,json}'",
+    "lint:fix": "eslint --ext .js,.jsx,.ts,.tsx . --color --fix && prettier --write './**/*.{js,jsx,ts,tsx,json}'",
+    "precommit:lint": "eslint",
+    "precommit": "lint-staged",
+    "analyze": "ANALYZE=true next build"
+  },
+  "dependencies": {
+    "@apollo/client": "3.7.4",
+    "@emotion-icons/material": "3.14.0",
+    "@emotion-icons/material-outlined": "3.14.0",
+    "@emotion/react": "11.9.3",
+    "@emotion/styled": "11.9.3",
+    "@newrelic/next": "0.5.2",
+    "@newrelic/winston-enricher": "4.0.1",
+    "@newskit-render/api": "^1.12.1",
+    "@newskit-render/auth": "^1.8.0",
+    "@newskit-render/checkout": "^3.9.34-alpha.0",
+    "@newskit-render/feature-flags": "^1.8.1-alpha.1",
+    "@newskit-render/feed": "^1.8.9",
+    "@newskit-render/my-account": "^7.54.0-alpha.1",
+    "@newskit-render/shared-components": "^4.28.0-alpha.0",
+    "@newskit-render/standalone-components": "^3.20.27-alpha.0",
+    "@newskit-render/validation": "^1.17.0",
+    "cross-fetch": "3.1.5",
+    "graphql": "16.6.0",
+    "lodash.get": "4.4.2",
+    "newrelic": "10.6.1",
+    "newskit": "7.7.0",
+    "next": "13.4.4",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-helmet": "6.1.0",
+    "sharp": "0.32.4",
+    "swr": "1.3.0",
+    "winston": "3.10.0"
+  },
+  "devDependencies": {
+    "@apollo/react-testing": "4.0.0",
+    "@emotion/jest": "11.10.5",
+    "@next/bundle-analyzer": "12.0.8",
+    "@next/env": "13.1.3",
+    "@next/eslint-plugin-next": "13.0.6",
+    "@percy/cli": "1.16.0",
+    "@percy/cypress": "3.1.2",
+    "@testing-library/jest-dom": "6.1.3",
+    "@testing-library/react": "14.0.0",
+    "@testing-library/user-event": "14.4.3",
+    "@types/newrelic": "9.14.0",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.10",
+    "@types/react-helmet": "6.1.0",
+    "@typescript-eslint/eslint-plugin": "5.51.0",
+    "@typescript-eslint/parser": "5.51.0",
+    "axe-core": "4.3.4",
+    "babel-jest": "26.3.0",
+    "cypress": "13.8.1",
+    "cypress-axe": "1.5.0",
+    "eslint": "8.34.0",
+    "eslint-config-airbnb": "19.0.4",
+    "eslint-config-airbnb-typescript": "17.0.0",
+    "eslint-config-next": "13.1.2",
+    "eslint-config-prettier": "8.6.0",
+    "eslint-import-resolver-typescript": "3.5.2",
+    "eslint-plugin-cypress": "3.0.1",
+    "eslint-plugin-flowtype": "8.0.3",
+    "eslint-plugin-no-only-tests": "3.1.0",
+    "eslint-plugin-prettier": "4.2.1",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
+    "jest-junit": "15.0.0",
+    "jest-watch-typeahead": "2.2.1",
+    "lint-staged": "13.1.0",
+    "next-transpile-modules": "10.0.0",
+    "prettier": "2.8.3",
+    "prettier-eslint": "15.0.1",
+    "prettier-eslint-cli": "7.1.0",
+    "typescript": "4.9.4",
+    "wait-on": "7.0.1"
+  },
+  "precommit": [
+    "precommit"
+  ],
+  "lint-staged": {
+    "**/*.(ts|tsx)": [
+      "yarn run precommit:lint"
+    ]
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "resolutions": {
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.10",
+    "@types/pino-std-serializers": "2.4.1",
+    "@types/pino-pretty": "4.7.5"
+  }
+}

package/pages/_app.tsx

@@ -0,0 +1,117 @@
+import React from 'react'
+import { AppContext as AppContextType, AppProps } from 'next/app'
+import Head from 'next/head'
+import { ThemeProvider, Global, styled } from 'newskit'
+import { Publisher } from '@newskit-render/api'
+import { getFontFamilyFromNextFont } from '@newskit-render/shared-components'
+import { AppContextProvider, AppContext } from '../context/app-context'
+import { InstrumentationContextProvider } from '../app-context/InstrumentationContextProvider'
+import { getTenant } from '../helpers/multiTenancy'
+import { GlobalStyling } from '../css'
+import MultiTenancyProvider from '../context/multi-tenancy'
+import {
+  bitter,
+  poppins,
+  dmSans,
+  theSun,
+  roboto,
+  timesModern,
+  timesDigital,
+  montserrat,
+  publicoHeadline,
+  publicoText,
+  graphik,
+} from '../assets/fontFamily'
+
+const PageContainer = styled.div`
+  position: relative;
+  min-height: 100vh;
+`
+
+interface MyAppProps extends AppProps {
+  tenant: Publisher
+}
+
+function MyApp({ Component, pageProps, tenant }: MyAppProps) {
+  return (
+    <MultiTenancyProvider tenant={tenant}>
+      <AppContextProvider>
+        <>
+          <style jsx global>{`
+            :root {
+              --bitter: ${bitter.style.fontFamily};
+              --poppins: ${poppins.style.fontFamily};
+              --dm-sans: ${dmSans.style.fontFamily};
+              --the-sun: ${theSun.style.fontFamily};
+              --roboto: ${roboto.style.fontFamily};
+              --times-modern: ${timesModern.style.fontFamily};
+              --times-digital: ${timesDigital.style.fontFamily};
+              --montserrat: ${montserrat.style.fontFamily};
+              --publico-headline: ${publicoHeadline.style.fontFamily};
+              --publico-text: ${publicoText.style.fontFamily};
+              --graphik: ${graphik.style.fontFamily};
+            }
+          `}</style>
+          <Head>
+            <meta name="robots" content="max-image-preview:standard" />
+            <meta name="robots" content="max-video-preview:0" />
+            <meta google-site-verification="google-site-verification=9IZcsqYKeNo_Wlkwq6WBqgpqZuiwPGJw90Ug_LAENt4" />
+            <meta
+              key="viewport"
+              name="viewport"
+              content="width=device-width, initial-scale=1, maximum-scale=1"
+            />
+          </Head>
+          <InstrumentationContextProvider>
+            <AppContext.Consumer>
+              {({ theme, themeDropdownObject }) => (
+                <ThemeProvider theme={theme}>
+                  <Global styles={GlobalStyling} />
+                  <PageContainer>
+                    <Component
+                      {...pageProps}
+                      {...{
+                        themeDropdownObject,
+                        customTheme: theme,
+                        context: {
+                          fontFamilies: getFontFamilyFromNextFont([
+                            bitter,
+                            poppins,
+                            dmSans,
+                            theSun,
+                            roboto,
+                            timesModern,
+                            timesDigital,
+                            montserrat,
+                            publicoHeadline,
+                            publicoText,
+                            graphik,
+                          ]),
+                        },
+                      }}
+                    />
+                  </PageContainer>
+                </ThemeProvider>
+              )}
+            </AppContext.Consumer>
+          </InstrumentationContextProvider>
+        </>
+      </AppContextProvider>
+    </MultiTenancyProvider>
+  )
+}
+
+MyApp.getInitialProps = async ({ Component, ctx }: AppContextType) => {
+  let pageProps = {}
+  const tenant = getTenant(ctx.req?.headers?.host)
+  if (Component.getInitialProps) {
+    pageProps = await Component.getInitialProps(ctx)
+  }
+
+  return {
+    pageProps,
+    tenant,
+  }
+}
+
+export default MyApp

package/pages/_document.tsx

@@ -0,0 +1,112 @@
+/* eslint-disable react/no-danger */
+import React from 'react'
+import Script from 'next/script'
+import Document, {
+  Html,
+  Head,
+  Main,
+  NextScript,
+  DocumentContext,
+} from 'next/document'
+import { ExperimentationWeb, Consent, Tealium } from 'newskit'
+import Helmet from 'react-helmet'
+import newrelic from 'newrelic'
+import {
+  experimentationWeb,
+  sourcepointAccountId,
+  sourcepointPropertyHref,
+  sourcepointPropertyId,
+  tealiumAccountId,
+  tealiumProfileId,
+  tealiumEnv,
+} from '../config'
+
+export default class MyDocument extends Document {
+  static async getInitialProps(ctx: DocumentContext) {
+    const { html, head } = await ctx.renderPage()
+
+    const browserTimingHeader = newrelic.getBrowserTimingHeader({
+      hasToRemoveScriptWrapper: true,
+    })
+
+    return {
+      html,
+      head,
+      browserTimingHeader,
+    }
+  }
+
+  render() {
+    const helmet = Helmet.rewind()
+    const showAds =
+      this.props.__NEXT_DATA__.props.pageProps &&
+      this.props.__NEXT_DATA__.props.pageProps.showAds
+        ? this.props.__NEXT_DATA__.props.pageProps.showAds
+        : false
+
+    const { featureFlags } = this.props.__NEXT_DATA__.props.pageProps
+    return (
+      <Html lang="en">
+        <Head>
+          <>
+            <script
+              type="text/javascript"
+              dangerouslySetInnerHTML={{
+                // @ts-ignore
+                __html: this.props.browserTimingHeader,
+              }}
+            />
+            {experimentationWeb &&
+              featureFlags &&
+              featureFlags.experimentation_web_flag && (
+                <ExperimentationWeb
+                  optimizelyWebConfig={{
+                    scriptCdn: experimentationWeb,
+                  }}
+                  reactHelmet={Helmet}
+                />
+              )}
+            {helmet.script.toComponent()}
+            {sourcepointAccountId && (
+              <Consent
+                sourcePointConfigUnified={{
+                  accountId: Number(sourcepointAccountId),
+                  propertyHref: sourcepointPropertyHref,
+                  propertyId: Number(sourcepointPropertyId),
+                  gdpr: {},
+                }}
+                reactHelmet={Helmet}
+              />
+            )}
+            <meta name="robots" content="noindex" />
+            {showAds && (
+              <>
+                <Script
+                  type="text/javascript"
+                  src="https://ads.newskit.co.uk/prebid.newskit.min.js"
+                  strategy="lazyOnload"
+                />
+                <Script
+                  type="text/javascript"
+                  src="https://ads.newskit.co.uk/ads.newskit.min.js"
+                  strategy="lazyOnload"
+                />
+              </>
+            )}
+          </>
+        </Head>
+        <body>
+          {tealiumAccountId && (
+            <Tealium
+              accountId={tealiumAccountId}
+              profileId={tealiumProfileId as string}
+              env={tealiumEnv as string}
+            />
+          )}
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}

package/pages/_error.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import { NotFound, GenericError } from '@newskit-render/my-account'
+import Error from 'next/error'
+import ErrorPage from '../components/ErrorPage/ErrorPage'
+import ErrorPageHelpHub from '../pages/help-hub/error'
+
+function CustomError({ statusCode, asPath }) {
+  const isMyAccountApplication = asPath.startsWith('/account')
+  const isHelpHubApplication = asPath.startsWith('/help-hub')
+
+  if (isMyAccountApplication) {
+    if (statusCode === 404) {
+      return <NotFound />
+    }
+    return <GenericError />
+  }
+  if (isHelpHubApplication) {
+    if (statusCode === 500 || statusCode === 502) {
+      return (
+        <ErrorPageHelpHub
+          credentials={{
+            appId: '',
+            apiKey: '',
+            indexName: '',
+          }}
+        />
+      )
+    }
+    return (
+      <ErrorPage
+        title="Server-side error occurred"
+        errorMassage="We could not fetch the data from the server"
+      />
+    )
+  }
+  if (statusCode === 404) {
+    return (
+      <ErrorPage
+        title="Page not found"
+        errorMassage={`
+    We can't seem to find what you're looking for. If you typed a URL
+    into your browser, it might be worth checking and trying again.`}
+      />
+    )
+  }
+
+  if (statusCode === 500 || statusCode === 502) {
+    return (
+      <ErrorPage
+        title="Server-side error occurred"
+        errorMassage="We could not fetch the data from the server"
+      />
+    )
+  }
+
+  return <Error statusCode={statusCode} />
+}
+
+CustomError.getInitialProps = ({ res, err, asPath }) => {
+  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
+
+  // Logging the error for being captured by New Relic
+  console.error(`An ${statusCode} error has occurred`, err)
+
+  return { statusCode, asPath }
+}
+
+export default CustomError

package/pages/account/add/[field].tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { replaceConsoleAndSetTransactionName } from '../../../helpers/logger'
+import { AddField, addComponentMap } from '@newskit-render/my-account'
+import validation from '../../../validation'
+import { DynamicPage } from '@newskit-render/my-account'
+
+const AccountAddField = (props) => (
+  <DynamicPage
+    objectMap={addComponentMap}
+    pageName={props.data.type}
+    Component={AddField}
+    componentProps={props}
+    validation={validation}
+  />
+)
+
+export default AccountAddField
+export const getServerSideProps = async (context) => {
+  const {
+    params: { field },
+  } = context
+  const doesAddpageExist = Object.keys(addComponentMap).includes(field)
+  replaceConsoleAndSetTransactionName(`Account: add ${field}`)
+
+  if (!doesAddpageExist) {
+    context.res.statusCode = 404
+    // Logging the error for being captured by New Relic
+    console.error(`An error ${context.res.statusCode} occurred on server`)
+  }
+
+  return {
+    props: { data: { type: field } },
+  }
+}

package/pages/account/cancellation/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Cancellation, getProviderProps } from '@newskit-render/my-account'
+import { replaceConsoleAndSetTransactionName } from '../../../helpers/logger'
+import { getFlagsAll } from '@newskit-render/feature-flags' /* cra-effected */
+import validation from '../../../validation'
+
+const AccountCancellation = (props) => (
+  <Cancellation {...props} validation={validation} />
+)
+
+export default AccountCancellation
+
+export const getServerSideProps = async (context) => {
+  replaceConsoleAndSetTransactionName('Account: Cancellation')
+  /* start cra-effected */
+  const featureFlags = await getFlagsAll()
+  /* end cra-effected */
+  return getProviderProps(
+    { ...context, provider: 'Cancellation' },
+    { featureFlags } /* cra-effected */
+  )
+}

package/pages/account/delete/confirm/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {
+  ConfirmAccountDeletion,
+  getProviderProps,
+} from '@newskit-render/my-account'
+import { replaceConsoleAndSetTransactionName } from '../../../../helpers/logger'
+
+const ConfirmDeletion = (props) => <ConfirmAccountDeletion {...props} />
+
+export default ConfirmDeletion
+
+export const getServerSideProps = async (context) => {
+  replaceConsoleAndSetTransactionName('Account: Deletion - Confirmation')
+
+  return getProviderProps({ ...context })
+}