@newskit-render/standalone-components 1.10.3 → 1.11.0

package/README.md

@@ -157,7 +157,151 @@ const ArticleList: React.FC<{
 )
 ```
 
-## 3. Help-hub:
+## 3. Article Recommendations Provider
+
+The purpose of this component is to hold the dpaTemplates in the context, fetch the recommended articles and map them to the appropriate templates.
+
+The component takes the following props.
+
+```typescript
+export type ArticleRecommendationsProviderProps = {
+  articleId?: string
+  context?: ArticleRecommendationsProviderBaseContextType
+  children: ReactNode
+  config: Config
+}
+```
+
+`articleId` is required to get the recommended articles for the given article
+
+`config` is required to access NewsKit API to be able to fetch the recommended articles
+
+```typescript
+export type Config = {
+  newskitApiEnvUrl: string
+  newskitApiXApiKey: string
+}
+```
+
+The `context` holds the `dpaTemplates`. The default context can be overridden or extended.
+
+```typescript
+const defaultContext: ArticleRecommendationsProviderContextType = {
+  dpaTemplates: [
+    {
+      templateId: 'list-1',
+      columnCount: '1',
+      size: 'small',
+      recommendedArticles: { totalArticlesCount: 4 },
+      adlibraryMPU: { totalArticlesCount: 0 },
+    },
+    {
+      templateId: 'list-2',
+      columnCount: { xs: '1', sm: '2', lg: '4' },
+      size: 'large',
+      recommendedArticles: { totalArticlesCount: 8 },
+      adlibraryMPU: { totalArticlesCount: 0 },
+    },
+  ],
+}
+```
+
+Template props:
+
+`templateId` template identifier used to uniquely identify the template
+
+`columnCount` together with the `totalArticlesCount` will determine the layout. Example: `list-1` will result in a 1x4 article grid, while `list-2` will result in a 4x2 grid on a large screen.
+
+`size` the size of the articles
+
+`recommendedArticles` and `adlibraryMPU` are the types of articles. These can be extended as well. Note the data fetching currently is done only for `recommendedArticles`
+
+### Usage
+
+```typescript
+const Article: React.FC<ArticleSlug> = ({
+  universalArticle,
+  articleURL,
+  twitterUsername,
+  siteHost,
+  gscId,
+  user,
+  articleId,
+  config,
+}) => (
+  <ArticleRecommendationsProvider articleId={articleId} config={config}>
+    <Highlights>
+  </ArticleRecommendationsProvider>
+)
+
+export async function getServerSideProps(context) {
+  return {
+    props: {
+      config: {
+        newskitApiEnvUrl,
+        newskitApiXApiKey,
+      },
+      articleId,
+    },
+  }
+}
+```
+
+The `ArticleRecommendationsProvider` will fetch the recommended articles. Once the fetch is complete it will slice and map the articles to the dpaTemplates.
+
+Example: The default context after the mapping will look like below
+
+```typescript
+const defaultContext: ArticleRecommendationsProviderContextType = {
+  dpaTemplates: [
+    {
+      templateId: 'list-1',
+      columnCount: '1',
+      size: 'small',
+      recommendedArticles: [{ article }, ...], // 4 articles
+      adlibraryMPU: [],
+    },
+    {
+      templateId: 'list-2',
+      columnCount: { xs: '1', sm: '2', lg: '4' },
+      size: 'large',
+      recommendedArticles: [{ article }, ...], //8 articles
+      adlibraryMPU: [],
+    },
+  ],
+}
+```
+
+The `ArticleList` component based on the `templateId` will get the correct article data from the context and it will use the `ArticleGrid` component to render the layout.
+
+```typescript
+const ArticleList: React.FC<{ templateId: string }> = ({ templateId }) => {
+  const context = useContext(
+    ArticleRecommendationsProviderContext
+  ) as ArticleRecommendationsProviderContextTypeWithArticles
+
+  const dpaTemplate = context.dpaTemplates.find(
+    (dpaTemplate) => dpaTemplate.templateId === templateId
+  )
+
+  if (!dpaTemplate) {
+    return null
+  }
+
+  const { recommendedArticles, columnCount, size } = dpaTemplate
+  return (
+    <AricleGrid
+      articles={recommendedArticles}
+      columnCount={columnCount}
+      size={size}
+    />
+  )
+}
+
+const Highlights: React.FC = () => <ArticleList templateId="list-1" />
+```
+
+## 4. Help-hub:
 
 Help-Hub is a section of a website on which your customers can search for a specific problem and find some help to resolve it. It consists of three parts:
 

package/dist/cjs/article-recommendations/components/ArticleRecommendationsProvider.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ArticleRecommendationsProviderProps } from '../types';
+declare const ArticleRecommendationsProvider: React.FC<ArticleRecommendationsProviderProps>;
+export default ArticleRecommendationsProvider;

package/dist/cjs/article-recommendations/components/ArticleRecommendationsProvider.js

@@ -0,0 +1,66 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var lodash_merge_1 = __importDefault(require("lodash.merge"));
+var context_1 = require("../context");
+var swr_1 = __importDefault(require("swr"));
+var provider_1 = require("../provider");
+var defaultContext = {
+    dpaTemplates: [
+        {
+            templateId: 'list-1',
+            columnCount: '1',
+            size: 'small',
+            recommendedArticles: { totalArticlesCount: 4 },
+            adlibraryMPU: { totalArticlesCount: 0 },
+        },
+        {
+            templateId: 'list-2',
+            columnCount: { xs: '1', sm: '2', lg: '4' },
+            size: 'large',
+            recommendedArticles: { totalArticlesCount: 8 },
+            adlibraryMPU: { totalArticlesCount: 0 },
+        },
+    ],
+};
+var mapDpaTemplates = function (articles, dpaTemplates) {
+    var articleTypeNames = Object.keys(dpaTemplates[0]).slice(3);
+    return articleTypeNames.reduce(function (acc, articleTypeName) {
+        var startCount = 0;
+        var dpaTemplatesWithArticles = acc.map(function (dpaTemplate) {
+            var _a;
+            var totalArticlesCount = dpaTemplate[articleTypeName].totalArticlesCount;
+            var slicedArticles = articles[articleTypeName].slice(startCount, startCount + totalArticlesCount);
+            startCount += totalArticlesCount;
+            return __assign(__assign({}, dpaTemplate), (_a = {}, _a[articleTypeName] = slicedArticles, _a));
+        });
+        startCount = 0;
+        return dpaTemplatesWithArticles;
+    }, dpaTemplates);
+};
+var ArticleRecommendationsProvider = function (_a) {
+    var articleId = _a.articleId, context = _a.context, config = _a.config, children = _a.children;
+    var enhancedContext = (0, lodash_merge_1.default)({}, defaultContext, context);
+    var articles = (0, swr_1.default)([articleId, config], provider_1.fetcher).data;
+    var mapedDpaTemplates = articles
+        ? mapDpaTemplates({ recommendedArticles: articles, adlibraryMPU: [] }, enhancedContext.dpaTemplates)
+        : [];
+    var contextWithArticles = __assign(__assign({}, enhancedContext), { dpaTemplates: mapedDpaTemplates, articleId: articleId });
+    return (react_1.default.createElement(context_1.ArticleRecommendationsProviderContext.Provider, { value: contextWithArticles }, children));
+};
+exports.default = ArticleRecommendationsProvider;
+//# sourceMappingURL=ArticleRecommendationsProvider.js.map

package/dist/cjs/article-recommendations/components/ArticleRecommendationsProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleRecommendationsProvider.js","sourceRoot":"","sources":["../../../../src/article-recommendations/components/ArticleRecommendationsProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,gDAAyB;AACzB,8DAAgC;AAChC,sCAAkE;AASlE,4CAAwB;AACxB,wCAAqC;AAErC,IAAM,cAAc,GAA8C;IAChE,YAAY,EAAE;QACZ;YACE,UAAU,EAAE,QAAQ;YACpB,WAAW,EAAE,GAAG;YAChB,IAAI,EAAE,OAAO;YACb,mBAAmB,EAAE,EAAE,kBAAkB,EAAE,CAAC,EAAE;YAC9C,YAAY,EAAE,EAAE,kBAAkB,EAAE,CAAC,EAAE;SACxC;QACD;YACE,UAAU,EAAE,QAAQ;YACpB,WAAW,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE;YAC1C,IAAI,EAAE,OAAO;YACb,mBAAmB,EAAE,EAAE,kBAAkB,EAAE,CAAC,EAAE;YAC9C,YAAY,EAAE,EAAE,kBAAkB,EAAE,CAAC,EAAE;SACxC;KACF;CACF,CAAA;AAED,IAAM,eAAe,GAAG,UACtB,QAAyB,EACzB,YAA2B;IAE3B,IAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;IAC9D,OAAO,gBAAgB,CAAC,MAAM,CAAC,UAAC,GAAG,EAAE,eAAe;QAClD,IAAI,UAAU,GAAG,CAAC,CAAA;QAClB,IAAM,wBAAwB,GAA8B,GAAG,CAAC,GAAG,CACjE,UAAC,WAAW;;YACF,IAAA,kBAAkB,GAAK,WAAW,CAAC,eAAe,CAAC,mBAAjC,CAAiC;YAC3D,IAAM,cAAc,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC,KAAK,CACpD,UAAU,EACV,UAAU,GAAI,kBAA6B,CAC5C,CAAA;YAED,UAAU,IAAI,kBAA4B,CAAA;YAC1C,6BACK,WAAW,gBACb,eAAe,IAAG,cAAc,OAClC;QACH,CAAC,CACF,CAAA;QACD,UAAU,GAAG,CAAC,CAAA;QACd,OAAO,wBAAwB,CAAA;IACjC,CAAC,EAAE,YAAmB,CAAC,CAAA;AACzB,CAAC,CAAA;AAED,IAAM,8BAA8B,GAAkD,UAAC,EAKtF;QAJC,SAAS,eAAA,EACT,OAAO,aAAA,EACP,MAAM,YAAA,EACN,QAAQ,cAAA;IAER,IAAM,eAAe,GAAG,IAAA,sBAAK,EAAC,EAAE,EAAE,cAAc,EAAE,OAAO,CAAC,CAAA;IAClD,IAAM,QAAQ,GAAK,IAAA,aAAM,EAAY,CAAC,SAAS,EAAE,MAAM,CAAC,EAAE,kBAAO,CAAC,KAApD,CAAoD;IAE1E,IAAM,iBAAiB,GAAG,QAAQ;QAChC,CAAC,CAAC,eAAe,CACb,EAAE,mBAAmB,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,EAAE,EACnD,eAAe,CAAC,YAAY,CAC7B;QACH,CAAC,CAAC,EAAE,CAAA;IAEN,IAAM,mBAAmB,yBACpB,eAAe,KAClB,YAAY,EAAE,iBAAiB,EAC/B,SAAS,WAAA,GACV,CAAA;IAED,OAAO,CACL,8BAAC,+CAAqC,CAAC,QAAQ,IAAC,KAAK,EAAE,mBAAmB,IACvE,QAAQ,CACsC,CAClD,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,8BAA8B,CAAA"}

package/dist/cjs/article-recommendations/components/RecommendedArticleList.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const RecommendedArticleList: React.FC<{
+    templateId: string;
+}>;
+export default RecommendedArticleList;

package/dist/cjs/article-recommendations/components/RecommendedArticleList.js

@@ -0,0 +1,43 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var ArticleGrid_1 = __importDefault(require("./ArticleGrid"));
+var context_1 = require("../context");
+var RecommendedArticleList = function (_a) {
+    var templateId = _a.templateId;
+    var context = (0, react_1.useContext)(context_1.ArticleRecommendationsProviderContext);
+    var dpaTemplate = context.dpaTemplates.find(function (dpaTemplate) { return dpaTemplate.templateId === templateId; });
+    if (!dpaTemplate) {
+        return null;
+    }
+    var recommendedArticles = dpaTemplate.recommendedArticles, columnCount = dpaTemplate.columnCount, size = dpaTemplate.size;
+    return (react_1.default.createElement(ArticleGrid_1.default, { articles: recommendedArticles, columnCount: columnCount, size: size }));
+};
+exports.default = RecommendedArticleList;
+//# sourceMappingURL=RecommendedArticleList.js.map

package/dist/cjs/article-recommendations/components/RecommendedArticleList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecommendedArticleList.js","sourceRoot":"","sources":["../../../../src/article-recommendations/components/RecommendedArticleList.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAyC;AACzC,8DAAsC;AACtC,sCAAkE;AAGlE,IAAM,sBAAsB,GAAqC,UAAC,EAEjE;QADC,UAAU,gBAAA;IAEV,IAAM,OAAO,GAAG,IAAA,kBAAU,EACxB,+CAAqC,CACmB,CAAA;IAE1D,IAAM,WAAW,GAAG,OAAO,CAAC,YAAY,CAAC,IAAI,CAC3C,UAAC,WAAW,IAAK,OAAA,WAAW,CAAC,UAAU,KAAK,UAAU,EAArC,CAAqC,CACvD,CAAA;IAED,IAAI,CAAC,WAAW,EAAE;QAChB,OAAO,IAAI,CAAA;KACZ;IAEO,IAAA,mBAAmB,GAAwB,WAAW,oBAAnC,EAAE,WAAW,GAAW,WAAW,YAAtB,EAAE,IAAI,GAAK,WAAW,KAAhB,CAAgB;IAC9D,OAAO,CACL,8BAAC,qBAAU,IACT,QAAQ,EAAE,mBAAmB,EAC7B,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,GACV,CACH,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,sBAAsB,CAAA"}

package/dist/cjs/article-recommendations/components/index.d.ts

@@ -1,4 +1,6 @@
 import AricleGrid from './ArticleGrid';
 import ArticleRecommendation from './ArticleRecommendation';
+import ArticleRecommendationsProvider from './ArticleRecommendationsProvider';
+import RecommendedArticleList from './RecommendedArticleList';
 export * from './baseProps';
-export { ArticleRecommendation, AricleGrid };
+export { ArticleRecommendation, AricleGrid, ArticleRecommendationsProvider, RecommendedArticleList, };

package/dist/cjs/article-recommendations/components/index.js

@@ -17,10 +17,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AricleGrid = exports.ArticleRecommendation = void 0;
+exports.RecommendedArticleList = exports.ArticleRecommendationsProvider = exports.AricleGrid = exports.ArticleRecommendation = void 0;
 var ArticleGrid_1 = __importDefault(require("./ArticleGrid"));
 exports.AricleGrid = ArticleGrid_1.default;
 var ArticleRecommendation_1 = __importDefault(require("./ArticleRecommendation"));
 exports.ArticleRecommendation = ArticleRecommendation_1.default;
+var ArticleRecommendationsProvider_1 = __importDefault(require("./ArticleRecommendationsProvider"));
+exports.ArticleRecommendationsProvider = ArticleRecommendationsProvider_1.default;
+var RecommendedArticleList_1 = __importDefault(require("./RecommendedArticleList"));
+exports.RecommendedArticleList = RecommendedArticleList_1.default;
 __exportStar(require("./baseProps"), exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/article-recommendations/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/article-recommendations/components/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,8DAAsC;AAIN,qBAJzB,qBAAU,CAIyB;AAH1C,kFAA2D;AAGlD,gCAHF,+BAAqB,CAGE;AAD9B,8CAA2B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/article-recommendations/components/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,8DAAsC;AAQpC,qBARK,qBAAU,CAQL;AAPZ,kFAA2D;AAMzD,gCANK,+BAAqB,CAML;AALvB,oGAA6E;AAO3E,yCAPK,wCAA8B,CAOL;AANhC,oFAA6D;AAO3D,iCAPK,gCAAsB,CAOL;AALxB,8CAA2B"}

package/dist/cjs/article-recommendations/context/index.d.ts

@@ -0,0 +1,3 @@
+import { ArticleRecommendationsProviderContextType } from '../types';
+import React from 'react';
+export declare const ArticleRecommendationsProviderContext: React.Context<ArticleRecommendationsProviderContextType | null>;

package/dist/cjs/article-recommendations/context/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArticleRecommendationsProviderContext = void 0;
+var react_1 = __importDefault(require("react"));
+exports.ArticleRecommendationsProviderContext = react_1.default.createContext(null);
+//# sourceMappingURL=index.js.map

package/dist/cjs/article-recommendations/context/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/article-recommendations/context/index.tsx"],"names":[],"mappings":";;;;;;AACA,gDAAyB;AAEZ,QAAA,qCAAqC,GAAG,eAAK,CAAC,aAAa,CACtE,IAAI,CACL,CAAA"}

package/dist/cjs/article-recommendations/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components';
 export * from './provider';
 export * from './types';
+export * from './context';

package/dist/cjs/article-recommendations/index.js

@@ -17,4 +17,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./components"), exports);
 __exportStar(require("./provider"), exports);
 __exportStar(require("./types"), exports);
+__exportStar(require("./context"), exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/article-recommendations/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/article-recommendations/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,+CAA4B;AAC5B,6CAA0B;AAC1B,0CAAuB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/article-recommendations/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,+CAA4B;AAC5B,6CAA0B;AAC1B,0CAAuB;AACvB,4CAAyB"}

package/dist/cjs/article-recommendations/provider/recommendationsProvider.d.ts

@@ -1,2 +1,4 @@
 import { ProviderArgs, Article } from '../index';
-export declare const recommendationsProvider: ({ articleId, publisher, userId, }: ProviderArgs) => Promise<Article[]>;
+import { Fetcher } from 'swr';
+export declare const fetcher: Fetcher<Article[]>;
+export declare const recommendationsProvider: ({ articleId, publisher, userId, config, }: ProviderArgs) => Promise<Article[]>;

package/dist/cjs/article-recommendations/provider/recommendationsProvider.js

@@ -36,16 +36,33 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.recommendationsProvider = void 0;
+exports.recommendationsProvider = exports.fetcher = void 0;
 var api_1 = require("@newskit-render/api");
 var queries_1 = require("./queries");
+var fetcher = function (articleId, config) { return __awaiter(void 0, void 0, void 0, function () {
+    var userId;
+    var _a;
+    return __generator(this, function (_b) {
+        if (typeof window !== 'undefined') {
+            //@ts-ignore
+            userId = (_a = window.utag) === null || _a === void 0 ? void 0 : _a.data['cp.utag_main_v_id'];
+        }
+        return [2 /*return*/, (0, exports.recommendationsProvider)({
+                articleId: articleId,
+                config: config,
+                userId: userId,
+                publisher: api_1.Publisher.SUN_UK,
+            })];
+    });
+}); };
+exports.fetcher = fetcher;
 var recommendationsProvider = function (_a) {
-    var articleId = _a.articleId, publisher = _a.publisher, userId = _a.userId;
+    var articleId = _a.articleId, publisher = _a.publisher, userId = _a.userId, config = _a.config;
     return __awaiter(void 0, void 0, void 0, function () {
         var apolloClient, response, recommendedArticles;
         return __generator(this, function (_b) {
             switch (_b.label) {
-                case 0: return [4 /*yield*/, (0, api_1.createApolloClient)(api_1.ClientTypes.nkapi)];
+                case 0: return [4 /*yield*/, (0, api_1.createApolloClient)(api_1.ClientTypes.nkapi, undefined, undefined, undefined, config)];
                 case 1:
                     apolloClient = _b.sent();
                     return [4 /*yield*/, apolloClient.query({

package/dist/cjs/article-recommendations/provider/recommendationsProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"recommendationsProvider.js","sourceRoot":"","sources":["../../../../src/article-recommendations/provider/recommendationsProvider.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAAqE;AACrE,qCAA+C;AAGxC,IAAM,uBAAuB,GAAG,UAAO,EAI/B;QAHb,SAAS,eAAA,EACT,SAAS,eAAA,EACT,MAAM,YAAA;;;;;wBAEe,qBAAM,IAAA,wBAAkB,EAAC,iBAAW,CAAC,KAAK,CAAC,EAAA;;oBAA1D,YAAY,GAAG,SAA2C;oBAC/C,qBAAM,YAAY,CAAC,KAAK,CAAC;4BACxC,KAAK,EAAE,6BAAmB;4BAC1B,SAAS,EAAE,EAAE,SAAS,WAAA,EAAE,SAAS,EAAE,EAAE,SAAS,WAAA,EAAE,MAAM,QAAA,EAAE,EAAE;yBAC3D,CAAC,EAAA;;oBAHI,QAAQ,GAAG,SAGf;oBAEI,mBAAmB,GAAG,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,GAAG,CACpE,UAAC,OAAO;;wBAAK,OAAA,CAAC;4BACZ,KAAK,EAAE,OAAO,CAAC,MAAM;4BACrB,GAAG,EAAE,OAAO,CAAC,MAAM;4BACnB,IAAI,EAAE,OAAO,CAAC,QAAQ;4BACtB,IAAI,EACF,CAAA,MAAA,MAAA,MAAA,MAAA,OAAO,CAAC,KAAK,0CAAE,WAAW,0CAAE,KAAK,0CAAG,CAAC,CAAC,0CAAE,GAAG;iCAC3C,MAAA,MAAA,MAAA,OAAO,CAAC,KAAK,0CAAE,KAAK,0CAAG,CAAC,CAAC,0CAAE,GAAG,CAAA;gCAC9B,IAAI;yBACP,CAAC,CAAA;qBAAA,CACH,CAAA;oBAED,sBAAO,mBAAmB,EAAA;;;;CAC3B,CAAA;AAxBY,QAAA,uBAAuB,2BAwBnC"}
+{"version":3,"file":"recommendationsProvider.js","sourceRoot":"","sources":["../../../../src/article-recommendations/provider/recommendationsProvider.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAAgF;AAChF,qCAA+C;AAIxC,IAAM,OAAO,GAAuB,UACzC,SAAS,EACT,MAAM;;;;QAGN,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;YACjC,YAAY;YACZ,MAAM,GAAG,MAAA,MAAM,CAAC,IAAI,0CAAE,IAAI,CAAC,mBAAmB,CAAC,CAAA;SAChD;QAED,sBAAO,IAAA,+BAAuB,EAAC;gBAC7B,SAAS,WAAA;gBACT,MAAM,EAAE,MAAgB;gBACxB,MAAM,QAAA;gBACN,SAAS,EAAE,eAAS,CAAC,MAAM;aAC5B,CAAC,EAAA;;KACH,CAAA;AAhBY,QAAA,OAAO,WAgBnB;AAEM,IAAM,uBAAuB,GAAG,UAAO,EAK/B;QAJb,SAAS,eAAA,EACT,SAAS,eAAA,EACT,MAAM,YAAA,EACN,MAAM,YAAA;;;;;wBAEe,qBAAM,IAAA,wBAAkB,EAC3C,iBAAW,CAAC,KAAK,EACjB,SAAS,EACT,SAAS,EACT,SAAS,EACT,MAAM,CACP,EAAA;;oBANK,YAAY,GAAG,SAMpB;oBACgB,qBAAM,YAAY,CAAC,KAAK,CAAC;4BACxC,KAAK,EAAE,6BAAmB;4BAC1B,SAAS,EAAE,EAAE,SAAS,WAAA,EAAE,SAAS,EAAE,EAAE,SAAS,WAAA,EAAE,MAAM,QAAA,EAAE,EAAE;yBAC3D,CAAC,EAAA;;oBAHI,QAAQ,GAAG,SAGf;oBAEI,mBAAmB,GAAG,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,GAAG,CACpE,UAAC,OAAO;;wBAAK,OAAA,CAAC;4BACZ,KAAK,EAAE,OAAO,CAAC,MAAM;4BACrB,GAAG,EAAE,OAAO,CAAC,MAAM;4BACnB,IAAI,EAAE,OAAO,CAAC,QAAQ;4BACtB,IAAI,EACF,CAAA,MAAA,MAAA,MAAA,MAAA,OAAO,CAAC,KAAK,0CAAE,WAAW,0CAAE,KAAK,0CAAG,CAAC,CAAC,0CAAE,GAAG;iCAC3C,MAAA,MAAA,MAAA,OAAO,CAAC,KAAK,0CAAE,KAAK,0CAAG,CAAC,CAAC,0CAAE,GAAG,CAAA;gCAC9B,IAAI;yBACP,CAAC,CAAA;qBAAA,CACH,CAAA;oBAED,sBAAO,mBAAmB,EAAA;;;;CAC3B,CAAA;AA/BY,QAAA,uBAAuB,2BA+BnC"}

package/dist/cjs/article-recommendations/types/index.d.ts

@@ -1,5 +1,6 @@
 import { Publisher } from '@newskit-render/api';
 import { MQ } from 'newskit';
+import { ReactNode } from 'react';
 export declare type Article = {
     href: string;
     title: string;
@@ -19,10 +20,15 @@ export declare type ArticleRecommendationProps = {
     size: 'large' | 'small';
     overrides?: ArticleRecommendationOverrides;
 };
+export declare type Config = {
+    newskitApiEnvUrl: string;
+    newskitApiXApiKey: string;
+};
 export declare type ProviderArgs = {
     userId?: string;
     publisher: Publisher;
     articleId: string;
+    config?: Config;
 };
 export declare type ArticleRecommendationOverrides = {
     spaceStack?: MQ<string>;
@@ -54,3 +60,34 @@ export declare type ArticleRecommendationOverrides = {
         };
     };
 };
+export declare type ArticleTemplate = Record<string, Article[]>;
+export declare type ArticleTypeName = 'recommendedArticles' | 'adlibraryMPU';
+export declare type ArticleTypes = Record<ArticleTypeName, {
+    totalArticlesCount: number;
+}>;
+export declare type DpaTemplate = ArticleTypes & {
+    templateId: string;
+    columnCount: MQ<string>;
+    size: 'small' | 'large';
+};
+export declare type DpaTemplateWithArticles = {
+    templateId: string;
+    columnCount: MQ<string>;
+    size: 'small' | 'large';
+} & Record<string, Article[]>;
+export declare type ArticleRecommendationsProviderBaseContextType = {
+    dpaTemplates: DpaTemplate[];
+};
+export declare type ArticleRecommendationsProviderContextTypeWithArticles = {
+    dpaTemplates: DpaTemplateWithArticles[];
+};
+export declare type ArticleRecommendationsProviderContextType = ArticleRecommendationsProviderBaseContextType | ArticleRecommendationsProviderContextTypeWithArticles;
+export declare type ArticleRecommendationsProviderProps = {
+    articleId: string;
+    context?: ArticleRecommendationsProviderBaseContextType;
+    children: ReactNode;
+    config: Config;
+};
+export declare enum ContextNameMap {
+    'articleRecommendationProvider' = "articleRecommendationProvider"
+}

package/dist/cjs/article-recommendations/types/index.js

@@ -1,3 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContextNameMap = void 0;
+var ContextNameMap;
+(function (ContextNameMap) {
+    ContextNameMap["articleRecommendationProvider"] = "articleRecommendationProvider";
+})(ContextNameMap = exports.ContextNameMap || (exports.ContextNameMap = {}));
 //# sourceMappingURL=index.js.map

package/dist/cjs/article-recommendations/types/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/article-recommendations/types/index.ts"],"names":[],"mappings":""}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/article-recommendations/types/index.ts"],"names":[],"mappings":";;;AA2GA,IAAY,cAEX;AAFD,WAAY,cAAc;IACxB,iFAAiE,CAAA;AACnE,CAAC,EAFW,cAAc,GAAd,sBAAc,KAAd,sBAAc,QAEzB"}

package/dist/esm/article-recommendations/components/ArticleRecommendationsProvider.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ArticleRecommendationsProviderProps } from '../types';
+declare const ArticleRecommendationsProvider: React.FC<ArticleRecommendationsProviderProps>;
+export default ArticleRecommendationsProvider;

package/dist/esm/article-recommendations/components/ArticleRecommendationsProvider.js

@@ -0,0 +1,61 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import merge from 'lodash.merge';
+import { ArticleRecommendationsProviderContext } from '../context';
+import useSWR from 'swr';
+import { fetcher } from '../provider';
+var defaultContext = {
+    dpaTemplates: [
+        {
+            templateId: 'list-1',
+            columnCount: '1',
+            size: 'small',
+            recommendedArticles: { totalArticlesCount: 4 },
+            adlibraryMPU: { totalArticlesCount: 0 },
+        },
+        {
+            templateId: 'list-2',
+            columnCount: { xs: '1', sm: '2', lg: '4' },
+            size: 'large',
+            recommendedArticles: { totalArticlesCount: 8 },
+            adlibraryMPU: { totalArticlesCount: 0 },
+        },
+    ],
+};
+var mapDpaTemplates = function (articles, dpaTemplates) {
+    var articleTypeNames = Object.keys(dpaTemplates[0]).slice(3);
+    return articleTypeNames.reduce(function (acc, articleTypeName) {
+        var startCount = 0;
+        var dpaTemplatesWithArticles = acc.map(function (dpaTemplate) {
+            var _a;
+            var totalArticlesCount = dpaTemplate[articleTypeName].totalArticlesCount;
+            var slicedArticles = articles[articleTypeName].slice(startCount, startCount + totalArticlesCount);
+            startCount += totalArticlesCount;
+            return __assign(__assign({}, dpaTemplate), (_a = {}, _a[articleTypeName] = slicedArticles, _a));
+        });
+        startCount = 0;
+        return dpaTemplatesWithArticles;
+    }, dpaTemplates);
+};
+var ArticleRecommendationsProvider = function (_a) {
+    var articleId = _a.articleId, context = _a.context, config = _a.config, children = _a.children;
+    var enhancedContext = merge({}, defaultContext, context);
+    var articles = useSWR([articleId, config], fetcher).data;
+    var mapedDpaTemplates = articles
+        ? mapDpaTemplates({ recommendedArticles: articles, adlibraryMPU: [] }, enhancedContext.dpaTemplates)
+        : [];
+    var contextWithArticles = __assign(__assign({}, enhancedContext), { dpaTemplates: mapedDpaTemplates, articleId: articleId });
+    return (React.createElement(ArticleRecommendationsProviderContext.Provider, { value: contextWithArticles }, children));
+};
+export default ArticleRecommendationsProvider;
+//# sourceMappingURL=ArticleRecommendationsProvider.js.map

package/dist/esm/article-recommendations/components/ArticleRecommendationsProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleRecommendationsProvider.js","sourceRoot":"","sources":["../../../../src/article-recommendations/components/ArticleRecommendationsProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,MAAM,cAAc,CAAA;AAChC,OAAO,EAAE,qCAAqC,EAAE,MAAM,YAAY,CAAA;AASlE,OAAO,MAAM,MAAM,KAAK,CAAA;AACxB,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAErC,IAAM,cAAc,GAA8C;IAChE,YAAY,EAAE;QACZ;YACE,UAAU,EAAE,QAAQ;YACpB,WAAW,EAAE,GAAG;YAChB,IAAI,EAAE,OAAO;YACb,mBAAmB,EAAE,EAAE,kBAAkB,EAAE,CAAC,EAAE;YAC9C,YAAY,EAAE,EAAE,kBAAkB,EAAE,CAAC,EAAE;SACxC;QACD;YACE,UAAU,EAAE,QAAQ;YACpB,WAAW,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE;YAC1C,IAAI,EAAE,OAAO;YACb,mBAAmB,EAAE,EAAE,kBAAkB,EAAE,CAAC,EAAE;YAC9C,YAAY,EAAE,EAAE,kBAAkB,EAAE,CAAC,EAAE;SACxC;KACF;CACF,CAAA;AAED,IAAM,eAAe,GAAG,UACtB,QAAyB,EACzB,YAA2B;IAE3B,IAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;IAC9D,OAAO,gBAAgB,CAAC,MAAM,CAAC,UAAC,GAAG,EAAE,eAAe;QAClD,IAAI,UAAU,GAAG,CAAC,CAAA;QAClB,IAAM,wBAAwB,GAA8B,GAAG,CAAC,GAAG,CACjE,UAAC,WAAW;;YACF,IAAA,kBAAkB,GAAK,WAAW,CAAC,eAAe,CAAC,mBAAjC,CAAiC;YAC3D,IAAM,cAAc,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC,KAAK,CACpD,UAAU,EACV,UAAU,GAAI,kBAA6B,CAC5C,CAAA;YAED,UAAU,IAAI,kBAA4B,CAAA;YAC1C,6BACK,WAAW,gBACb,eAAe,IAAG,cAAc,OAClC;QACH,CAAC,CACF,CAAA;QACD,UAAU,GAAG,CAAC,CAAA;QACd,OAAO,wBAAwB,CAAA;IACjC,CAAC,EAAE,YAAmB,CAAC,CAAA;AACzB,CAAC,CAAA;AAED,IAAM,8BAA8B,GAAkD,UAAC,EAKtF;QAJC,SAAS,eAAA,EACT,OAAO,aAAA,EACP,MAAM,YAAA,EACN,QAAQ,cAAA;IAER,IAAM,eAAe,GAAG,KAAK,CAAC,EAAE,EAAE,cAAc,EAAE,OAAO,CAAC,CAAA;IAClD,IAAM,QAAQ,GAAK,MAAM,CAAY,CAAC,SAAS,EAAE,MAAM,CAAC,EAAE,OAAO,CAAC,KAApD,CAAoD;IAE1E,IAAM,iBAAiB,GAAG,QAAQ;QAChC,CAAC,CAAC,eAAe,CACb,EAAE,mBAAmB,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,EAAE,EACnD,eAAe,CAAC,YAAY,CAC7B;QACH,CAAC,CAAC,EAAE,CAAA;IAEN,IAAM,mBAAmB,yBACpB,eAAe,KAClB,YAAY,EAAE,iBAAiB,EAC/B,SAAS,WAAA,GACV,CAAA;IAED,OAAO,CACL,oBAAC,qCAAqC,CAAC,QAAQ,IAAC,KAAK,EAAE,mBAAmB,IACvE,QAAQ,CACsC,CAClD,CAAA;AACH,CAAC,CAAA;AAED,eAAe,8BAA8B,CAAA"}

package/dist/esm/article-recommendations/components/RecommendedArticleList.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const RecommendedArticleList: React.FC<{
+    templateId: string;
+}>;
+export default RecommendedArticleList;

package/dist/esm/article-recommendations/components/RecommendedArticleList.js

@@ -0,0 +1,15 @@
+import React, { useContext } from 'react';
+import AricleGrid from './ArticleGrid';
+import { ArticleRecommendationsProviderContext } from '../context';
+var RecommendedArticleList = function (_a) {
+    var templateId = _a.templateId;
+    var context = useContext(ArticleRecommendationsProviderContext);
+    var dpaTemplate = context.dpaTemplates.find(function (dpaTemplate) { return dpaTemplate.templateId === templateId; });
+    if (!dpaTemplate) {
+        return null;
+    }
+    var recommendedArticles = dpaTemplate.recommendedArticles, columnCount = dpaTemplate.columnCount, size = dpaTemplate.size;
+    return (React.createElement(AricleGrid, { articles: recommendedArticles, columnCount: columnCount, size: size }));
+};
+export default RecommendedArticleList;
+//# sourceMappingURL=RecommendedArticleList.js.map

package/dist/esm/article-recommendations/components/RecommendedArticleList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecommendedArticleList.js","sourceRoot":"","sources":["../../../../src/article-recommendations/components/RecommendedArticleList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,UAAU,MAAM,eAAe,CAAA;AACtC,OAAO,EAAE,qCAAqC,EAAE,MAAM,YAAY,CAAA;AAGlE,IAAM,sBAAsB,GAAqC,UAAC,EAEjE;QADC,UAAU,gBAAA;IAEV,IAAM,OAAO,GAAG,UAAU,CACxB,qCAAqC,CACmB,CAAA;IAE1D,IAAM,WAAW,GAAG,OAAO,CAAC,YAAY,CAAC,IAAI,CAC3C,UAAC,WAAW,IAAK,OAAA,WAAW,CAAC,UAAU,KAAK,UAAU,EAArC,CAAqC,CACvD,CAAA;IAED,IAAI,CAAC,WAAW,EAAE;QAChB,OAAO,IAAI,CAAA;KACZ;IAEO,IAAA,mBAAmB,GAAwB,WAAW,oBAAnC,EAAE,WAAW,GAAW,WAAW,YAAtB,EAAE,IAAI,GAAK,WAAW,KAAhB,CAAgB;IAC9D,OAAO,CACL,oBAAC,UAAU,IACT,QAAQ,EAAE,mBAAmB,EAC7B,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,GACV,CACH,CAAA;AACH,CAAC,CAAA;AAED,eAAe,sBAAsB,CAAA"}

package/dist/esm/article-recommendations/components/index.d.ts

@@ -1,4 +1,6 @@
 import AricleGrid from './ArticleGrid';
 import ArticleRecommendation from './ArticleRecommendation';
+import ArticleRecommendationsProvider from './ArticleRecommendationsProvider';
+import RecommendedArticleList from './RecommendedArticleList';
 export * from './baseProps';
-export { ArticleRecommendation, AricleGrid };
+export { ArticleRecommendation, AricleGrid, ArticleRecommendationsProvider, RecommendedArticleList, };

package/dist/esm/article-recommendations/components/index.js

@@ -1,5 +1,7 @@
 import AricleGrid from './ArticleGrid';
 import ArticleRecommendation from './ArticleRecommendation';
+import ArticleRecommendationsProvider from './ArticleRecommendationsProvider';
+import RecommendedArticleList from './RecommendedArticleList';
 export * from './baseProps';
-export { ArticleRecommendation, AricleGrid };
+export { ArticleRecommendation, AricleGrid, ArticleRecommendationsProvider, RecommendedArticleList, };
 //# sourceMappingURL=index.js.map

package/dist/esm/article-recommendations/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/article-recommendations/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,eAAe,CAAA;AACtC,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAE3D,cAAc,aAAa,CAAA;AAC3B,OAAO,EAAE,qBAAqB,EAAE,UAAU,EAAE,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/article-recommendations/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,eAAe,CAAA;AACtC,OAAO,qBAAqB,MAAM,yBAAyB,CAAA;AAC3D,OAAO,8BAA8B,MAAM,kCAAkC,CAAA;AAC7E,OAAO,sBAAsB,MAAM,0BAA0B,CAAA;AAE7D,cAAc,aAAa,CAAA;AAC3B,OAAO,EACL,qBAAqB,EACrB,UAAU,EACV,8BAA8B,EAC9B,sBAAsB,GACvB,CAAA"}

package/dist/esm/article-recommendations/context/index.d.ts

@@ -0,0 +1,3 @@
+import { ArticleRecommendationsProviderContextType } from '../types';
+import React from 'react';
+export declare const ArticleRecommendationsProviderContext: React.Context<ArticleRecommendationsProviderContextType | null>;

package/dist/esm/article-recommendations/context/index.js

@@ -0,0 +1,3 @@
+import React from 'react';
+export var ArticleRecommendationsProviderContext = React.createContext(null);
+//# sourceMappingURL=index.js.map

package/dist/esm/article-recommendations/context/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/article-recommendations/context/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,CAAC,IAAM,qCAAqC,GAAG,KAAK,CAAC,aAAa,CACtE,IAAI,CACL,CAAA"}

package/dist/esm/article-recommendations/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components';
 export * from './provider';
 export * from './types';
+export * from './context';

package/dist/esm/article-recommendations/index.js

@@ -1,4 +1,5 @@
 export * from './components';
 export * from './provider';
 export * from './types';
+export * from './context';
 //# sourceMappingURL=index.js.map

package/dist/esm/article-recommendations/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/article-recommendations/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/article-recommendations/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA"}

package/dist/esm/article-recommendations/provider/recommendationsProvider.d.ts

@@ -1,2 +1,4 @@
 import { ProviderArgs, Article } from '../index';
-export declare const recommendationsProvider: ({ articleId, publisher, userId, }: ProviderArgs) => Promise<Article[]>;
+import { Fetcher } from 'swr';
+export declare const fetcher: Fetcher<Article[]>;
+export declare const recommendationsProvider: ({ articleId, publisher, userId, config, }: ProviderArgs) => Promise<Article[]>;

package/dist/esm/article-recommendations/provider/recommendationsProvider.js

@@ -34,15 +34,31 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-import { createApolloClient, ClientTypes } from '@newskit-render/api';
+import { createApolloClient, ClientTypes, Publisher } from '@newskit-render/api';
 import { GET_RECOMMENDATIONS } from './queries';
+export var fetcher = function (articleId, config) { return __awaiter(void 0, void 0, void 0, function () {
+    var userId;
+    var _a;
+    return __generator(this, function (_b) {
+        if (typeof window !== 'undefined') {
+            //@ts-ignore
+            userId = (_a = window.utag) === null || _a === void 0 ? void 0 : _a.data['cp.utag_main_v_id'];
+        }
+        return [2 /*return*/, recommendationsProvider({
+                articleId: articleId,
+                config: config,
+                userId: userId,
+                publisher: Publisher.SUN_UK,
+            })];
+    });
+}); };
 export var recommendationsProvider = function (_a) {
-    var articleId = _a.articleId, publisher = _a.publisher, userId = _a.userId;
+    var articleId = _a.articleId, publisher = _a.publisher, userId = _a.userId, config = _a.config;
     return __awaiter(void 0, void 0, void 0, function () {
         var apolloClient, response, recommendedArticles;
         return __generator(this, function (_b) {
             switch (_b.label) {
-                case 0: return [4 /*yield*/, createApolloClient(ClientTypes.nkapi)];
+                case 0: return [4 /*yield*/, createApolloClient(ClientTypes.nkapi, undefined, undefined, undefined, config)];
                 case 1:
                     apolloClient = _b.sent();
                     return [4 /*yield*/, apolloClient.query({

package/dist/esm/article-recommendations/provider/recommendationsProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"recommendationsProvider.js","sourceRoot":"","sources":["../../../../src/article-recommendations/provider/recommendationsProvider.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACrE,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAA;AAG/C,MAAM,CAAC,IAAM,uBAAuB,GAAG,UAAO,EAI/B;QAHb,SAAS,eAAA,EACT,SAAS,eAAA,EACT,MAAM,YAAA;;;;;wBAEe,qBAAM,kBAAkB,CAAC,WAAW,CAAC,KAAK,CAAC,EAAA;;oBAA1D,YAAY,GAAG,SAA2C;oBAC/C,qBAAM,YAAY,CAAC,KAAK,CAAC;4BACxC,KAAK,EAAE,mBAAmB;4BAC1B,SAAS,EAAE,EAAE,SAAS,WAAA,EAAE,SAAS,EAAE,EAAE,SAAS,WAAA,EAAE,MAAM,QAAA,EAAE,EAAE;yBAC3D,CAAC,EAAA;;oBAHI,QAAQ,GAAG,SAGf;oBAEI,mBAAmB,GAAG,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,GAAG,CACpE,UAAC,OAAO;;wBAAK,OAAA,CAAC;4BACZ,KAAK,EAAE,OAAO,CAAC,MAAM;4BACrB,GAAG,EAAE,OAAO,CAAC,MAAM;4BACnB,IAAI,EAAE,OAAO,CAAC,QAAQ;4BACtB,IAAI,EACF,CAAA,MAAA,MAAA,MAAA,MAAA,OAAO,CAAC,KAAK,0CAAE,WAAW,0CAAE,KAAK,0CAAG,CAAC,CAAC,0CAAE,GAAG;iCAC3C,MAAA,MAAA,MAAA,OAAO,CAAC,KAAK,0CAAE,KAAK,0CAAG,CAAC,CAAC,0CAAE,GAAG,CAAA;gCAC9B,IAAI;yBACP,CAAC,CAAA;qBAAA,CACH,CAAA;oBAED,sBAAO,mBAAmB,EAAA;;;;CAC3B,CAAA"}
+{"version":3,"file":"recommendationsProvider.js","sourceRoot":"","sources":["../../../../src/article-recommendations/provider/recommendationsProvider.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,kBAAkB,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAChF,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAA;AAI/C,MAAM,CAAC,IAAM,OAAO,GAAuB,UACzC,SAAS,EACT,MAAM;;;;QAGN,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;YACjC,YAAY;YACZ,MAAM,GAAG,MAAA,MAAM,CAAC,IAAI,0CAAE,IAAI,CAAC,mBAAmB,CAAC,CAAA;SAChD;QAED,sBAAO,uBAAuB,CAAC;gBAC7B,SAAS,WAAA;gBACT,MAAM,EAAE,MAAgB;gBACxB,MAAM,QAAA;gBACN,SAAS,EAAE,SAAS,CAAC,MAAM;aAC5B,CAAC,EAAA;;KACH,CAAA;AAED,MAAM,CAAC,IAAM,uBAAuB,GAAG,UAAO,EAK/B;QAJb,SAAS,eAAA,EACT,SAAS,eAAA,EACT,MAAM,YAAA,EACN,MAAM,YAAA;;;;;wBAEe,qBAAM,kBAAkB,CAC3C,WAAW,CAAC,KAAK,EACjB,SAAS,EACT,SAAS,EACT,SAAS,EACT,MAAM,CACP,EAAA;;oBANK,YAAY,GAAG,SAMpB;oBACgB,qBAAM,YAAY,CAAC,KAAK,CAAC;4BACxC,KAAK,EAAE,mBAAmB;4BAC1B,SAAS,EAAE,EAAE,SAAS,WAAA,EAAE,SAAS,EAAE,EAAE,SAAS,WAAA,EAAE,MAAM,QAAA,EAAE,EAAE;yBAC3D,CAAC,EAAA;;oBAHI,QAAQ,GAAG,SAGf;oBAEI,mBAAmB,GAAG,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,GAAG,CACpE,UAAC,OAAO;;wBAAK,OAAA,CAAC;4BACZ,KAAK,EAAE,OAAO,CAAC,MAAM;4BACrB,GAAG,EAAE,OAAO,CAAC,MAAM;4BACnB,IAAI,EAAE,OAAO,CAAC,QAAQ;4BACtB,IAAI,EACF,CAAA,MAAA,MAAA,MAAA,MAAA,OAAO,CAAC,KAAK,0CAAE,WAAW,0CAAE,KAAK,0CAAG,CAAC,CAAC,0CAAE,GAAG;iCAC3C,MAAA,MAAA,MAAA,OAAO,CAAC,KAAK,0CAAE,KAAK,0CAAG,CAAC,CAAC,0CAAE,GAAG,CAAA;gCAC9B,IAAI;yBACP,CAAC,CAAA;qBAAA,CACH,CAAA;oBAED,sBAAO,mBAAmB,EAAA;;;;CAC3B,CAAA"}

package/dist/esm/article-recommendations/types/index.d.ts

@@ -1,5 +1,6 @@
 import { Publisher } from '@newskit-render/api';
 import { MQ } from 'newskit';
+import { ReactNode } from 'react';
 export declare type Article = {
     href: string;
     title: string;
@@ -19,10 +20,15 @@ export declare type ArticleRecommendationProps = {
     size: 'large' | 'small';
     overrides?: ArticleRecommendationOverrides;
 };
+export declare type Config = {
+    newskitApiEnvUrl: string;
+    newskitApiXApiKey: string;
+};
 export declare type ProviderArgs = {
     userId?: string;
     publisher: Publisher;
     articleId: string;
+    config?: Config;
 };
 export declare type ArticleRecommendationOverrides = {
     spaceStack?: MQ<string>;
@@ -54,3 +60,34 @@ export declare type ArticleRecommendationOverrides = {
         };
     };
 };
+export declare type ArticleTemplate = Record<string, Article[]>;
+export declare type ArticleTypeName = 'recommendedArticles' | 'adlibraryMPU';
+export declare type ArticleTypes = Record<ArticleTypeName, {
+    totalArticlesCount: number;
+}>;
+export declare type DpaTemplate = ArticleTypes & {
+    templateId: string;
+    columnCount: MQ<string>;
+    size: 'small' | 'large';
+};
+export declare type DpaTemplateWithArticles = {
+    templateId: string;
+    columnCount: MQ<string>;
+    size: 'small' | 'large';
+} & Record<string, Article[]>;
+export declare type ArticleRecommendationsProviderBaseContextType = {
+    dpaTemplates: DpaTemplate[];
+};
+export declare type ArticleRecommendationsProviderContextTypeWithArticles = {
+    dpaTemplates: DpaTemplateWithArticles[];
+};
+export declare type ArticleRecommendationsProviderContextType = ArticleRecommendationsProviderBaseContextType | ArticleRecommendationsProviderContextTypeWithArticles;
+export declare type ArticleRecommendationsProviderProps = {
+    articleId: string;
+    context?: ArticleRecommendationsProviderBaseContextType;
+    children: ReactNode;
+    config: Config;
+};
+export declare enum ContextNameMap {
+    'articleRecommendationProvider' = "articleRecommendationProvider"
+}

package/dist/esm/article-recommendations/types/index.js

@@ -1,2 +1,5 @@
-export {};
+export var ContextNameMap;
+(function (ContextNameMap) {
+    ContextNameMap["articleRecommendationProvider"] = "articleRecommendationProvider";
+})(ContextNameMap || (ContextNameMap = {}));
 //# sourceMappingURL=index.js.map

package/dist/esm/article-recommendations/types/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/article-recommendations/types/index.ts"],"names":[],"mappings":""}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/article-recommendations/types/index.ts"],"names":[],"mappings":"AA2GA,MAAM,CAAN,IAAY,cAEX;AAFD,WAAY,cAAc;IACxB,iFAAiE,CAAA;AACnE,CAAC,EAFW,cAAc,KAAd,cAAc,QAEzB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/standalone-components",
-  "version": "1.10.3",
+  "version": "1.11.0",
   "description": "Newskit Render Standalone Components",
   "author": "",
   "license": "UNLICENSED",
@@ -34,7 +34,7 @@
     "@emotion-icons/material-outlined": "3.14.0",
     "@emotion/react": "11.10.4",
     "@emotion/styled": "11.10.4",
-    "@newskit-render/api": "^1.2.2",
+    "@newskit-render/api": "^1.3.0",
     "@newskit-render/shared-components": "^1.18.0",
     "algoliasearch": "4.13.1",
     "cross-fetch": "3.1.5",