add schemas for trail type

marjisound · marjisound · commit 252e1072620e · 2025-09-22T16:29:31.000+01:00
diff --git a/dotcom-rendering/src/frontend/feArticle.ts b/dotcom-rendering/src/frontend/feArticle.ts
@@ -1,4 +1,5 @@
 import { type CrosswordProps } from '@guardian/react-crossword';
+import { literal, object, type Output, union } from 'valibot';
 import type { EditionId } from '../lib/edition';
 import type { FEArticleBadgeType } from '../types/badge';
 import type { Block } from '../types/blocks';
@@ -135,65 +136,70 @@ type PageType = {
 	isSensitive: boolean;
 };
 
-type ThemePillar =
-	| 'NewsPillar'
-	| 'OpinionPillar'
-	| 'SportPillar'
-	| 'CulturePillar'
-	| 'LifestylePillar';
-
-type ThemeSpecial = 'SpecialReportTheme' | 'Labs' | 'SpecialReportAltTheme';
-type FETheme = ThemePillar | ThemeSpecial;
+const FEThemeSchema = union([
+	literal('NewsPillar'),
+	literal('OpinionPillar'),
+	literal('SportPillar'),
+	literal('CulturePillar'),
+	literal('LifestylePillar'),
+	literal('SpecialReportTheme'),
+	literal('Labs'),
+	literal('SpecialReportAltTheme'),
+]);
 
 /**
  * FEDesign is what frontend gives (originating in the capi scala client) us on the Format field
  * https://github.com/guardian/content-api-scala-client/blob/master/client/src/main/scala/com.gu.contentapi.client/utils/format/Design.scala
  */
-type FEDesign =
-	| 'ArticleDesign'
-	| 'PictureDesign'
-	| 'GalleryDesign'
-	| 'AudioDesign'
-	| 'VideoDesign'
-	| 'CrosswordDesign'
-	| 'ReviewDesign'
-	| 'AnalysisDesign'
-	| 'CommentDesign'
-	| 'ExplainerDesign'
-	| 'LetterDesign'
-	| 'FeatureDesign'
-	| 'LiveBlogDesign'
-	| 'DeadBlogDesign'
-	| 'RecipeDesign'
-	| 'MatchReportDesign'
-	| 'InterviewDesign'
-	| 'EditorialDesign'
-	| 'QuizDesign'
-	| 'InteractiveDesign'
-	| 'PhotoEssayDesign'
-	| 'ObituaryDesign'
-	| 'FullPageInteractiveDesign'
-	| 'NewsletterSignupDesign'
-	| 'TimelineDesign'
-	| 'ProfileDesign';
+const FEDesignSchema = union([
+	literal('ArticleDesign'),
+	literal('PictureDesign'),
+	literal('GalleryDesign'),
+	literal('AudioDesign'),
+	literal('VideoDesign'),
+	literal('CrosswordDesign'),
+	literal('ReviewDesign'),
+	literal('AnalysisDesign'),
+	literal('CommentDesign'),
+	literal('ExplainerDesign'),
+	literal('LetterDesign'),
+	literal('FeatureDesign'),
+	literal('LiveBlogDesign'),
+	literal('DeadBlogDesign'),
+	literal('RecipeDesign'),
+	literal('MatchReportDesign'),
+	literal('InterviewDesign'),
+	literal('EditorialDesign'),
+	literal('QuizDesign'),
+	literal('InteractiveDesign'),
+	literal('PhotoEssayDesign'),
+	literal('ObituaryDesign'),
+	literal('FullPageInteractiveDesign'),
+	literal('NewsletterSignupDesign'),
+	literal('TimelineDesign'),
+	literal('ProfileDesign'),
+]);
 
 /** FEDisplay is the display information passed through from frontend (originating in the capi scala client) and dictates the display style of the content e.g. Immersive
 https://github.com/guardian/content-api-scala-client/blob/master/client/src/main/scala/com.gu.contentapi.client/utils/format/Display.scala */
-type FEDisplay =
-	| 'StandardDisplay'
-	| 'ImmersiveDisplay'
-	| 'ShowcaseDisplay'
-	| 'NumberedListDisplay';
+const FEDisplaySchema = union([
+	literal('StandardDisplay'),
+	literal('ImmersiveDisplay'),
+	literal('ShowcaseDisplay'),
+	literal('NumberedListDisplay'),
+]);
 
 /**
  * FEFormat is the stringified version of Format passed through from Frontend.
  * It gets converted to the `@guardian/libs` format on platform
  */
-export type FEFormat = {
-	design: FEDesign;
-	theme: FETheme;
-	display: FEDisplay;
-};
+export type FEFormat = Output<typeof FEFormatSchema>;
+
+export const FEFormatSchema = object({
+	design: FEDesignSchema,
+	theme: FEThemeSchema,
+	display: FEDisplaySchema,
+});
 
 export type FEStoryPackage = {
 	heading: string;
diff --git a/dotcom-rendering/src/types/branding.ts b/dotcom-rendering/src/types/branding.ts
@@ -1,27 +1,46 @@
+import {
+	literal,
+	number,
+	object,
+	optional,
+	type Output,
+	string,
+	union,
+} from 'valibot';
 import type { EditionId } from '../lib/edition';
 
-type BrandingLogo = {
-	src: string;
-	link: string;
-	label: string;
-	dimensions: { width: number; height: number };
-};
+export type BrandingLogo = Output<typeof BrandingLogoSchema>;
+
+export const BrandingLogoSchema = object({
+	src: string(),
+	link: string(),
+	label: string(),
+	dimensions: object({
+		width: number(),
+		height: number(),
+	}),
+});
 
 /**
  * @see https://github.com/guardian/commercial-shared/blob/35cdf4e1/src/main/scala/com/gu/commercial/branding/BrandingType.scala
  */
-export type BrandingType =
-	| { name: 'paid-content' }
-	| { name: 'foundation' }
-	| { name: 'sponsored' };
-
-export interface Branding {
-	brandingType?: BrandingType;
-	sponsorName: string;
-	logo: BrandingLogo;
-	aboutThisLink: string;
-	logoForDarkBackground?: BrandingLogo;
-}
+export type BrandingType = Output<typeof BrandingTypeSchema>;
+
+export const BrandingTypeSchema = union([
+	object({ name: literal('paid-content') }),
+	object({ name: literal('foundation') }),
+	object({ name: literal('sponsored') }),
+]);
+
+export type Branding = Output<typeof BrandingSchema>;
+
+export const BrandingSchema = object({
+	brandingType: optional(BrandingTypeSchema),
+	sponsorName: string(),
+	logo: BrandingLogoSchema,
+	aboutThisLink: string(),
+	logoForDarkBackground: optional(BrandingLogoSchema),
+});
 
 export interface EditionBranding {
 	edition: {
diff --git a/dotcom-rendering/src/types/content.ts b/dotcom-rendering/src/types/content.ts
@@ -1,7 +1,17 @@
 import { type CrosswordProps } from '@guardian/react-crossword';
+import { literal, type Output, union } from 'valibot';
 import type { ArticleFormat } from '../lib/articleFormat';
 
-export type StarRating = 0 | 1 | 2 | 3 | 4 | 5;
+export const StarRatingSchema = union([
+	literal(0),
+	literal(1),
+	literal(2),
+	literal(3),
+	literal(4),
+	literal(5),
+]);
+
+export type StarRating = Output<typeof StarRatingSchema>;
 
 export type BoostLevel = 'default' | 'boost' | 'megaboost' | 'gigaboost';
 
diff --git a/dotcom-rendering/src/types/front.ts b/dotcom-rendering/src/types/front.ts
@@ -1,3 +1,4 @@
+import { object, optional, type Output, string } from 'valibot';
 import type {
 	FEAspectRatio,
 	FEContainer,
@@ -109,11 +110,13 @@ export type DCRSlideshowImage = {
 	imageCaption?: string;
 };
 
-export type DCRSnapType = {
-	embedHtml?: string;
-	embedCss?: string;
-	embedJs?: string;
-};
+export type DCRSnapType = Output<typeof DCRSnapTypeSchema>;
+
+export const DCRSnapTypeSchema = object({
+	embedHtml: optional(string()),
+	embedCss: optional(string()),
+	embedJs: optional(string()),
+});
 
 export type AspectRatio = FEAspectRatio;
 
diff --git a/dotcom-rendering/src/types/mainMedia.ts b/dotcom-rendering/src/types/mainMedia.ts
@@ -1,43 +1,55 @@
-import type { PodcastSeriesImage } from './tag';
-
-type Media = {
-	type: 'Video' | 'LoopVideo' | 'Audio' | 'Gallery';
-};
-
+import {
+	boolean,
+	literal,
+	number,
+	object,
+	optional,
+	type Output,
+	string,
+	union,
+} from 'valibot';
+import { PodcastSeriesImageSchema } from './tag';
 /** For displaying embedded, playable videos directly in cards */
-type Video = Media & {
-	type: 'Video';
+const VideoSchema = object({
+	type: literal('Video'),
 	/** @see https://github.com/guardian/frontend/blob/8e7e4d0e/common/app/model/content/Atom.scala#L159 */
-	id: string;
-	videoId: string;
-	height: number;
-	width: number;
-	origin: string;
-	title: string;
-	duration: number;
-	expired: boolean;
-	image?: string;
-};
+	id: string(),
+	videoId: string(),
+	height: number(),
+	width: number(),
+	origin: string(),
+	title: string(),
+	duration: number(),
+	expired: boolean(),
+	image: optional(string()),
+});
+
+const LoopVideoSchema = object({
+	type: literal('LoopVideo'),
+	atomId: string(),
+	videoId: string(),
+	height: number(),
+	width: number(),
+	duration: number(),
+	image: optional(string()),
+});
 
-type LoopVideo = Media & {
-	type: 'LoopVideo';
-	atomId: string;
-	videoId: string;
-	height: number;
-	width: number;
-	duration: number;
-	image?: string;
-};
+const AudioSchema = object({
+	type: literal('Audio'),
+	duration: string(),
+	podcastImage: optional(PodcastSeriesImageSchema),
+});
 
-type Audio = Media & {
-	type: 'Audio';
-	duration: string;
-	podcastImage?: PodcastSeriesImage;
-};
+const GallerySchema = object({
+	type: literal('Gallery'),
+	count: string(),
+});
 
-type Gallery = Media & {
-	type: 'Gallery';
-	count: string;
-};
+export type MainMedia = Output<typeof MainMediaSchema>;
 
-export type MainMedia = Video | LoopVideo | Audio | Gallery;
+export const MainMediaSchema = union([
+	VideoSchema,
+	LoopVideoSchema,
+	AudioSchema,
+	GallerySchema,
+]);
diff --git a/dotcom-rendering/src/types/tag.ts b/dotcom-rendering/src/types/tag.ts
@@ -1,3 +1,4 @@
+import { object, optional, type Output, string } from 'valibot';
 /**
  * This type comes from `frontend`, hence the FE prefix.
  *
@@ -43,10 +44,12 @@ export type Podcast = {
 	image?: string;
 };
 
-export type PodcastSeriesImage = {
-	src?: string;
-	altText?: string;
-};
+export type PodcastSeriesImage = Output<typeof PodcastSeriesImageSchema>;
+
+export const PodcastSeriesImageSchema = object({
+	src: optional(string()),
+	altText: optional(string()),
+});
 
 export type TagType = {
 	id: string;
diff --git a/dotcom-rendering/src/types/trails.ts b/dotcom-rendering/src/types/trails.ts
