@newskit-render/core 1.77.0 → 1.79.0-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.78.0](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.78.0-alpha.0...@newskit-render/core@1.78.0) (2022-07-22)
+
+**Note:** Version bump only for package @newskit-render/core
+
+
+
+
+
+# [1.77.0](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.77.0-alpha.0...@newskit-render/core@1.77.0) (2022-07-22)
+
+**Note:** Version bump only for package @newskit-render/core
+
+
+
+
+
 ## [1.76.4](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.76.4-alpha.0...@newskit-render/core@1.76.4) (2022-07-22)
 
 **Note:** Version bump only for package @newskit-render/core

package/README.md

@@ -105,3 +105,157 @@ In order to publish the contracts you need to execute:
 ```sh
 npm run pact:publish
 ```
+
+## Multi-tenant application
+
+A multi-tenant application allows you to run an application from various (sub-)domains and show different content depending on the domain that is used.
+
+This means that the titles would be able to load different brands' content and themes, while running the same application. The codebase will be the same across all brands.
+
+### Getting started
+
+How to configure your application for multitenancy
+
+1. If you want to build a project from scratch, that will have everything from newskit-render, you need to run `create-render-app` (See [Newskit-Render Getting started](https://github.com/newscorp-ghfb/ncu-newskit-render#getting-started)).
+
+When creating a new project a question whether you'd like your application to be multi tenant will prompt in the terminal.
+
+2. If you already have a Next application and you want to make it multi-tenant you need to add the following files:
+
+In config folder: `config/multiTenancy.ts`:
+
+```
+import { sharedTheme, timesTheme } from '@newskit-render/shared-components'
+import { Publisher } from '@newskit-render/api'
+import { demoStrings, timesStrings } from '../theme/strings'
+
+export const translationsMap = {
+  [Publisher.DEMO]: demoStrings,
+  [Publisher.TIMES]: timesStrings,
+}
+
+export const themesMap = {
+  [Publisher.DEMO]: sharedTheme,
+  [Publisher.TIMES]: timesTheme,
+}
+```
+
+
+
+- `translationsMap` is used for re-mapping variables like site title, or any other string for each brand. Example:
+
+```
+export const demoStrings = {
+    title: 'Demo Site'
+}
+
+export const timesStrings = {
+    title: 'Times Site'
+}
+```
+
+
+
+- `themesMap` is used for mapping the theme for each brand. 
+Brand names live in the `PUBLISHER` object
+
+
+In context folder `context/multi-tenancy`
+Add a multi-tenancy context that will keep the current tenant:
+
+```
+import React, { createContext, useContext } from 'react'
+import get from 'lodash.get'
+import { Publisher } from '@newskit-render/api'
+import { translationsMap } from '../../config'
+
+export interface MultiTenancyContextProps {
+  tenant?: Publisher
+  getTenantString?: (key: string, defaultValue?: string) => string
+}
+
+const MultiTenancyContext = createContext<MultiTenancyContextProps>({})
+
+const MultiTenancyProvider: React.FC<MultiTenancyContextProps> = ({
+  tenant,
+  children,
+}) => (
+  <MultiTenancyContext.Provider
+    value={{
+      tenant,
+      getTenantString: (key: string, defaultValue: string = ''): string => {
+        const data = translationsMap[tenant]
+        return get(data, key, defaultValue)
+      },
+    }}
+  >
+    {children}
+  </MultiTenancyContext.Provider>
+)
+
+export const useMultiTenancy = () => useContext(MultiTenancyContext)
+export default MultiTenancyProvider
+```
+
+
+Now you need to update `_app.js`. To pass the tenant to the app, you need to wrap it in `MultitenancyProvide`: 
+
+```
+interface MyAppProps extends AppProps {
+  tenant: Publisher
+}
+
+function MyApp({ Component, pageProps, tenant }: MyAppProps) {
+  return (
+    <MultiTenancyProvider tenant={tenant}>
+      <AppContextProvider>
+	    ………
+      </AppContextProvider>
+    </MultiTenancyProvider>
+  )
+}
+
+export default MyApp
+```
+
+
+Then call the `getTenant()` helper function in `getInitialProps()`. This function extracts the brands' hostname ( domain name ) from the request headers and then we save the tenant in the context provider:
+
+```
+MyApp.getInitialProps = async ({ Component, ctx }: AppContextType) => {
+  let pageProps = {}
+  const tenant = getTenant(ctx.req?.headers?.host as string)
+
+  if (Component.getInitialProps) {
+    pageProps = await Component.getInitialProps(ctx)
+  }
+  return { pageProps, tenant }
+}
+```
+
+
+### How to set the theme for each tenant
+
+You can use the `useMultiTenancy` hook anywhere in the code to get the current tenant 
+
+In `context/app-context.js`:
+
+```
+const AppContext = React.createContext({
+  theme: sharedTheme,
+} as AppContextType)
+
+const AppContextProvider = ({ children }: { children: JSX.Element }) => {
+  const { tenant } = useMultiTenancy()
+  const tenantTheme = themesMap[tenant]
+  const [theme, setTheme] = useState(tenantTheme)
+
+  return (
+    <AppContext.Provider value={{ theme, setTheme }}>
+      {children}
+    </AppContext.Provider>
+  )
+}
+
+export { AppContextProvider, AppContext }
+```

package/cypress/axe/terminal-log.js

@@ -0,0 +1,19 @@
+export const terminalLog = (violations) => {
+  cy.task(
+    'log',
+    `${violations.length} accessibility violation${
+      violations.length === 1 ? '' : 's'
+    } ${violations.length === 1 ? 'was' : 'were'} detected`
+  )
+  // pluck specific keys to keep the table readable
+  const violationData = violations.map(
+    ({ id, impact, description, nodes }) => ({
+      id,
+      impact,
+      description,
+      nodes: nodes.length,
+    })
+  )
+
+  cy.task('table', violationData)
+}

package/cypress/e2e/account/accessibility.spec.js

@@ -1,28 +1,7 @@
-function terminalLog(violations) {
-  cy.task(
-    'log',
-    `${violations.length} accessibility violation${
-      violations.length === 1 ? '' : 's'
-    } ${violations.length === 1 ? 'was' : 'were'} detected`
-  )
-  // pluck specific keys to keep the table readable
-  const violationData = violations.map(
-    ({ id, impact, description, nodes }) => ({
-      id,
-      impact,
-      description,
-      nodes: nodes.length,
-    })
-  )
-
-  cy.task('table', violationData)
-}
+import { terminalLog } from '../../axe/terminal-log'
 
 const pages = [
-  {
-    url: '/account',
-    name: 'Personal Details',
-  },
+  { url: '/account', name: 'Personal Details' },
   { url: '/account/edit/name', name: 'Name form' },
   { url: '/account/edit/displayName', name: 'Display Name form' },
   { url: '/account/edit/email', name: 'Email form' },
@@ -43,7 +22,8 @@ const pages = [
   // {
   //   url: '/account/payment',
   //   name: 'Payment form',
-  //   skip: { skipFailures: true }, // error being caused by Stripe, ignore at this time
+  //   skip: { skipFailures: true },
+  // error being caused by Stripe, ignore at this time
   // },
   {
     url: '/account/newsletters-and-alerts',

package/cypress/e2e/help-hub/accessibility.spec.js

@@ -0,0 +1,21 @@
+import { terminalLog } from '../../axe/terminal-log'
+
+const pages = [
+  { url: '/help-hub', name: 'Landing Page' },
+  { url: '/help-hub/results?q=google', name: 'Search Page' },
+  { url: '/help-hub/article/sign-with-google', name: 'Article Page' },
+]
+
+describe('Page accessibility', () => {
+  pages.forEach(({ url, name, skip }) => {
+    it(`Should pass a11y tests: ${name}`, () => {
+      cy.mockConsentAndVisit(url)
+      cy.injectAxe()
+      cy.checkA11y(null, null, terminalLog, skip)
+
+      cy.get('[data-testid="autocomplete-input"]').type('Google')
+
+      cy.checkA11y(null, null, terminalLog, false)
+    })
+  })
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/core",
-  "version": "1.77.0",
+  "version": "1.79.0-alpha.0",
   "description": "Newskit Render - Core package",
   "author": "",
   "license": "UNLICENSED",
@@ -35,12 +35,12 @@
     "@apollo/client": "3.4.16",
     "@newskit-render/api": "^0.36.0",
     "@newskit-render/auth": "^0.44.0",
-    "@newskit-render/checkout": "^0.51.2",
+    "@newskit-render/checkout": "^0.51.4-alpha.0",
     "@newskit-render/feature-flags": "^0.24.0",
     "@newskit-render/feed": "^0.24.0",
     "@newskit-render/my-account": "^0.184.0",
     "@newskit-render/shared-components": "^0.68.0",
-    "@newskit-render/standalone-components": "^0.30.0",
+    "@newskit-render/standalone-components": "^0.32.0-alpha.0",
     "@newskit-render/validation": "^0.50.0",
     "cross-fetch": "3.1.5",
     "graphql": "15.6.0",

package/pages/help-hub/results.tsx

@@ -11,12 +11,12 @@ import { AppContext } from '../../context'
 import { addCacheHeaders } from '../../helpers/addCacheHeaders'
 
 const ResultsPage: React.FC<{
-  credentilas: AlgoliaCredentials
+  credentials: AlgoliaCredentials
   hits: Hit[]
 }> = (props) => {
   const { theme, setTheme } = useContext(AppContext)
   const themeDropdownObject = createThemeDropdownObject(setTheme)
-  const credentials = { props }
+  const { credentials } = props
   return (
     <HelpHubResultsPage
       {...props}