Merge pull request #12495 from guardian/jm/move-article-format-ar

Use local copy of article format types in AR

apps-rendering/src/adSlot.stories.tsx

@@ -1,14 +1,18 @@
 // ----- Imports ----- //
 
-import type { ArticleFormat } from '@guardian/libs';
-import { ArticleDesign, ArticleDisplay, ArticlePillar } from '@guardian/libs';
+import {
+	ArticleDesign,
+	ArticleDisplay,
+	type ArticleFormat,
+	Pillar,
+} from 'articleFormat';
 import AdSlot from 'adSlot';
 import type { ReactElement } from 'react';
 
 // ----- Stories ----- //
 
 const mockFormat: ArticleFormat = {
-	theme: ArticlePillar.News,
+	theme: Pillar.News,
 	design: ArticleDesign.Standard,
 	display: ArticleDisplay.Standard,
 };

apps-rendering/src/adSlot.tsx

@@ -1,6 +1,6 @@
 import type { SerializedStyles } from '@emotion/react';
 import { css, ThemeProvider } from '@emotion/react';
-import type { ArticleFormat } from '@guardian/libs';
+import type { ArticleFormat } from 'articleFormat';
 import {
 	from,
 	headlineMedium17,

apps-rendering/src/ads.ts

@@ -1,4 +1,4 @@
-import type { ArticleFormat } from '@guardian/libs';
+import type { ArticleFormat } from 'articleFormat';
 import AdSlot from 'adSlot';
 import Paragraph from 'components/Paragraph';
 import type { ReactNode } from 'react';

apps-rendering/src/articleFormat.test.ts

@@ -1,6 +1,6 @@
 // ----- Imports ----- //
 
-import { ArticleDesign, ArticleDisplay, ArticlePillar } from '@guardian/libs';
+import { ArticleDesign, ArticleDisplay, Pillar } from 'articleFormat';
 import { formatToString } from 'articleFormat';
 
 // ----- Tests ----- //
@@ -10,7 +10,7 @@ describe('formatToString', () => {
 		const format = formatToString({
 			design: ArticleDesign.Standard,
 			display: ArticleDisplay.Immersive,
-			theme: ArticlePillar.Culture,
+			theme: Pillar.Culture,
 		});
 
 		expect(format).toBe(

apps-rendering/src/articleFormat.ts

@@ -1,114 +1,168 @@
 /**
- * Helpers for working with the `Format` type from `@guardian/libs`
+ * Type definitions and helpers for `ArticleFormat`
  */
 
 // ----- Imports ----- //
 
-import type { ArticleFormat, ArticleTheme, Pillar } from '@guardian/libs';
-import {
-	ArticleDesign,
-	ArticleDisplay,
-	ArticlePillar,
-	ArticleSpecial,
-} from '@guardian/libs';
 import { Optional } from 'optional';
 
+// ----- Types ----- //
+
+enum ArticleDesign {
+	Standard,
+	Picture,
+	Gallery,
+	Audio,
+	Video,
+	Review,
+	Analysis,
+	Explainer,
+	Comment,
+	Letter,
+	Feature,
+	LiveBlog,
+	DeadBlog,
+	Recipe,
+	MatchReport,
+	Interview,
+	Editorial,
+	Quiz,
+	Interactive,
+	PhotoEssay,
+	PrintShop,
+	Obituary,
+	Correction,
+	FullPageInteractive,
+	NewsletterSignup,
+	Timeline,
+	Profile,
+}
+
+enum ArticleDisplay {
+	Standard,
+	Immersive,
+	Showcase,
+	NumberedList,
+}
+
+enum Pillar {
+	News = 0,
+	Opinion = 1,
+	Sport = 2,
+	Culture = 3,
+	Lifestyle = 4,
+}
+
+enum ArticleSpecial {
+	SpecialReport = 5,
+	Labs = 6,
+	SpecialReportAlt = 7,
+}
+
+type ArticleTheme = Pillar | ArticleSpecial;
+
+interface ArticleFormat {
+	theme: ArticleTheme;
+	design: ArticleDesign;
+	display: ArticleDisplay;
+}
+
 // ----- Functions ----- //
 
 /**
  * Attempts to parse a pillar expressed as a `string` into an
- * {@linkcode ArticlePillar}. Uses the pillar id format provided by CAPI; for
+ * {@linkcode Pillar}. Uses the pillar id format provided by CAPI; for
  * example `"pillar/news"`. Note that CAPI uses `"pillar/arts"` for
  * the culture pillar.
  *
  * @param pillarId A pillar expressed as a `string`, e.g. `"pillar/news"`.
  * @returns An `Optional`, with a `Some` corresponding to an
- * {@linkcode ArticlePillar} if the id is valid, otherwise `None`.
+ * {@linkcode Pillar} if the id is valid, otherwise `None`.
  *
  * @example
- * const maybePillar = getPillarFromId("pillar/arts") // Some<ArticlePillar.Culture>
+ * const maybePillar = getPillarFromId("pillar/arts") // Some<Pillar.Culture>
  */
 const getPillarFromId = (pillarId: string): Optional<Pillar> => {
 	switch (pillarId) {
 		case 'pillar/opinion':
-			return Optional.some(ArticlePillar.Opinion);
+			return Optional.some(Pillar.Opinion);
 		case 'pillar/sport':
-			return Optional.some(ArticlePillar.Sport);
+			return Optional.some(Pillar.Sport);
 		case 'pillar/arts':
-			return Optional.some(ArticlePillar.Culture);
+			return Optional.some(Pillar.Culture);
 		case 'pillar/lifestyle':
-			return Optional.some(ArticlePillar.Lifestyle);
+			return Optional.some(Pillar.Lifestyle);
 		case 'pillar/news':
-			return Optional.some(ArticlePillar.News);
+			return Optional.some(Pillar.News);
 		default:
 			return Optional.none();
 	}
 };
 
 /**
  * Does the same as {@linkcode getPillarFromId}, but falls back to
- * {@linkcode ArticlePillar.News} if parsing fails, instead of returning an
+ * {@linkcode Pillar.News} if parsing fails, instead of returning an
  * `Optional`.
  *
  * @param pillarId A pillar expressed as a `string`, e.g. `"pillar/news"`.
- * @returns An {@linkcode ArticlePillar} if the id is valid, otherwise
- * {@linkcode ArticlePillar.News}.
+ * @returns An {@linkcode Pillar} if the id is valid, otherwise
+ * {@linkcode Pillar.News}.
  *
  * @example
- * const pillar = getPillarOrElseNews("pillar/arts") // ArticlePillar.Culture
- * const pillar = getPillarOrElseNews("invalid id") // ArticlePillar.News
+ * const pillar = getPillarOrElseNews("pillar/arts") // Pillar.Culture
+ * const pillar = getPillarOrElseNews("invalid id") // Pillar.News
  */
 const getPillarOrElseNews = (pillarId: string): Pillar =>
-	getPillarFromId(pillarId).withDefault(ArticlePillar.News);
+	getPillarFromId(pillarId).withDefault(Pillar.News);
 
 /**
- * Converts an {@linkcode ArticlePillar} into a `string`. The `string` will be
+ * Converts an {@linkcode Pillar} into a `string`. The `string` will be
  * in the pillar id format used by CAPI; for example `"pillar/news"`. Note that
  * CAPI uses `"pillar/arts"` for the culture pillar.
  *
- * @param pillar An {@linkcode ArticlePillar}
+ * @param pillar An {@linkcode Pillar}
  * @returns A pillar in `string` form, using the pillar id CAPI format
  *
  * @example
- * const pillarString = pillarToId(ArticlePillar.Culture) // "pillar/arts"
+ * const pillarString = pillarToId(Pillar.Culture) // "pillar/arts"
  */
 const pillarToId = (pillar: Pillar): string => {
 	switch (pillar) {
-		case ArticlePillar.Opinion:
+		case Pillar.Opinion:
 			return 'pillar/opinion';
-		case ArticlePillar.Sport:
+		case Pillar.Sport:
 			return 'pillar/sport';
-		case ArticlePillar.Culture:
+		case Pillar.Culture:
 			return 'pillar/arts';
-		case ArticlePillar.Lifestyle:
+		case Pillar.Lifestyle:
 			return 'pillar/lifestyle';
-		case ArticlePillar.News:
+		case Pillar.News:
 			return 'pillar/news';
 	}
 };
 
 /**
- * Converts an {@linkcode ArticleTheme} into the {@linkcode ArticlePillar}
- * subset. For any `ArticleTheme` that isn't already an `ArticlePillar`, such
+ * Converts an {@linkcode ArticleTheme} into the {@linkcode Pillar}
+ * subset. For any `ArticleTheme` that isn't already an `Pillar`, such
  * as {@linkcode ArticleSpecial.SpecialReport}, will fall back to
- * {@linkcode ArticlePillar.News}.
+ * {@linkcode Pillar.News}.
  *
  * @param theme An {@linkcode ArticleTheme}
- * @returns An {@linkcode ArticlePillar}
+ * @returns An {@linkcode Pillar}
  *
  * @example
- * const themeOne: ArticleTheme = ArticlePillar.Lifestyle
- * const pillar: ArticlePillar = themeToPillar(themeOne) // ArticlePillar.Lifestyle
+ * const themeOne: ArticleTheme = Pillar.Lifestyle
+ * const pillar: Pillar = themeToPillar(themeOne) // Pillar.Lifestyle
  *
  * const themeTwo: ArticleTheme = ArticleSpecial.SpecialReport
- * const pillar: ArticlePillar = themeToPillar(themeTwo) // ArticlePillar.News
+ * const pillar: Pillar = themeToPillar(themeTwo) // Pillar.News
  */
 const themeToPillar = (theme: ArticleTheme): Pillar => {
 	switch (theme) {
 		case ArticleSpecial.SpecialReport:
 		case ArticleSpecial.SpecialReportAlt:
 		case ArticleSpecial.Labs:
-			return ArticlePillar.News;
+			return Pillar.News;
 		default:
 			return theme;
 	}
@@ -209,15 +263,15 @@ const displayToString = (display: ArticleDisplay): string => {
  */
 const themeToString = (theme: ArticleTheme): string => {
 	switch (theme) {
-		case ArticlePillar.News:
+		case Pillar.News:
 			return 'News';
-		case ArticlePillar.Opinion:
+		case Pillar.Opinion:
 			return 'Opinion';
-		case ArticlePillar.Sport:
+		case Pillar.Sport:
 			return 'Sport';
-		case ArticlePillar.Culture:
+		case Pillar.Culture:
 			return 'Culture';
-		case ArticlePillar.Lifestyle:
+		case Pillar.Lifestyle:
 			return 'Lifestyle';
 		case ArticleSpecial.Labs:
 			return 'Labs';
@@ -245,6 +299,12 @@ const formatToString = ({ design, display, theme }: ArticleFormat): string =>
 // ----- Exports ----- //
 
 export {
+	ArticleDesign,
+	ArticleDisplay,
+	ArticleSpecial,
+	ArticleTheme,
+	ArticleFormat,
+	Pillar,
 	formatToString,
 	getPillarFromId,
 	getPillarOrElseNews,

apps-rendering/src/bodyElement.ts

@@ -7,7 +7,7 @@ import type { Newsletter } from '@guardian/apps-rendering-api-models/newsletter'
 import type { Atoms } from '@guardian/content-api-models/v1/atoms';
 import type { BlockElement } from '@guardian/content-api-models/v1/blockElement';
 import { ElementType } from '@guardian/content-api-models/v1/elementType';
-import type { ArticleTheme } from '@guardian/libs';
+import type { ArticleTheme } from 'articleFormat';
 import type { Option } from '../vendor/@guardian/types/index';
 import { fromNullable } from '../vendor/@guardian/types/index';
 import type { TimelineEvent } from 'atoms';

apps-rendering/src/campaign.test.ts

@@ -3,7 +3,7 @@
 import { Campaign } from '@guardian/apps-rendering-api-models/campaign';
 import { CampaignFields } from '@guardian/apps-rendering-api-models/campaignFields';
 import { ParticipationFields } from '@guardian/apps-rendering-api-models/participationFields';
-import { ArticleSpecial } from '@guardian/libs';
+import { ArticleSpecial } from 'articleFormat';
 import { Int64 } from 'thrift';
 import { getCallout, getReport } from 'campaign';
 

apps-rendering/src/campaign.ts

@@ -2,7 +2,7 @@
 
 import type { Campaign } from '@guardian/apps-rendering-api-models/campaign';
 import type { ParticipationFields } from '@guardian/apps-rendering-api-models/participationFields';
-import { ArticleSpecial } from '@guardian/libs';
+import { ArticleSpecial } from 'articleFormat';
 import { Optional } from 'optional';
 
 export type CalloutFields = {

apps-rendering/src/client/callouts.ts

@@ -3,8 +3,12 @@
 import type { Contact } from '@guardian/apps-rendering-api-models/contact';
 import type { FormField } from '@guardian/apps-rendering-api-models/formField';
 import type { FormOption } from '@guardian/apps-rendering-api-models/formOption';
-import { ArticleSpecial, Pillar } from '@guardian/libs';
-import type { ArticleFormat, ArticleTheme } from '@guardian/libs';
+import {
+	type ArticleFormat,
+	ArticleSpecial,
+	type ArticleTheme,
+	Pillar,
+} from 'articleFormat';
 import { withDefault } from '../../vendor/@guardian/types/index';
 import { ElementKind } from 'bodyElementKind';
 import { pipe, resultFromNullable } from 'lib';

apps-rendering/src/components/Anchor/Anchor.stories.tsx

@@ -1,6 +1,6 @@
 // ----- Imports ----- //
 
-import { ArticleDesign, ArticleDisplay, ArticlePillar } from '@guardian/libs';
+import { ArticleDesign, ArticleDisplay, Pillar } from '../../articleFormat';
 import { getAllThemes, getThemeNameAsString } from 'fixtures/article';
 import Anchor from './';
 
@@ -16,7 +16,7 @@ const Default = () => (
 		format={{
 			design: ArticleDesign.Standard,
 			display: ArticleDisplay.Standard,
-			theme: ArticlePillar.News,
+			theme: Pillar.News,
 		}}
 		href={link}
 	>

apps-rendering/src/components/Anchor/index.tsx

@@ -2,8 +2,11 @@
 
 import type { SerializedStyles } from '@emotion/react';
 import { css } from '@emotion/react';
-import type { ArticleFormat } from '@guardian/libs';
-import { ArticleDesign, ArticleSpecial } from '@guardian/libs';
+import {
+	ArticleDesign,
+	type ArticleFormat,
+	ArticleSpecial,
+} from '../../articleFormat';
 import { labs, neutral } from '@guardian/source/foundations';
 import { text } from 'palette';
 import type { ReactNode } from 'react';

apps-rendering/src/components/ArticleBody/index.tsx

@@ -1,6 +1,6 @@
 import type { SerializedStyles } from '@emotion/react';
 import { css } from '@emotion/react';
-import type { ArticleFormat } from '@guardian/libs';
+import type { ArticleFormat } from '../../articleFormat';
 import { palette, remSpace } from '@guardian/source/foundations';
 import type { BodyElement } from 'bodyElement';
 import { background } from 'palette';

apps-rendering/src/components/Avatar/index.tsx

@@ -2,7 +2,7 @@
 
 import type { SerializedStyles } from '@emotion/react';
 import { css } from '@emotion/react';
-import type { ArticleFormat } from '@guardian/libs';
+import type { ArticleFormat } from '../../articleFormat';
 import { remSpace } from '@guardian/source/foundations';
 import { map, withDefault } from '../../../vendor/@guardian/types/index';
 import Img from 'components/Img';

apps-rendering/src/components/Blockquote/Blockquote.stories.tsx

@@ -1,11 +1,11 @@
-import { ArticleDesign, ArticleDisplay, ArticlePillar } from '@guardian/libs';
+import { ArticleDesign, ArticleDisplay, Pillar } from '../../articleFormat';
 import Paragraph from 'components/Paragraph';
 import Blockquote from './';
 
 const standard = {
 	design: ArticleDesign.Standard,
 	display: ArticleDisplay.Standard,
-	theme: ArticlePillar.News,
+	theme: Pillar.News,
 };
 
 const Default = () => (