TypeScript: Convert output package (#13504)

Co-authored-by: Anurag Vasanwala <[email protected]>

.eslintrc

@@ -57,7 +57,7 @@
       "",
       {
         "pattern": " \\* Copyright \\d{4} Google LLC",
-        "template": " * Copyright 2023 Google LLC"
+        "template": " * Copyright 2024 Google LLC"
       },
       " *",
       " * Licensed under the Apache License, Version 2.0 (the \"License\");",

packages/animation/src/components/types.ts

@@ -61,7 +61,7 @@ export interface AnimationProviderState {
 }
 
 export type AnimationProviderProps = PropsWithChildren<{
-  animations: StoryAnimation[];
+  animations?: StoryAnimation[];
   elements?: Element[];
   onWAAPIFinish?: () => void;
   selectedElementIds?: string[];

packages/element-library/src/text/outputWithUnits.tsx

@@ -66,9 +66,14 @@ function TextOutputWithUnits({
     backgroundTextMode,
     padding,
     borderRadius,
-    tagName: TagName = 'p',
     ...rest
   } = element;
+
+  // It can never be 'auto' here thanks to getTextElementTagNames(),
+  // but this makes TypeScript happy.
+  const TagName =
+    element.tagName && element.tagName !== 'auto' ? element.tagName : 'p';
+
   if (!dataToFontSizeY) {
     dataToFontSizeY = dataToStyleY;
   }

packages/element-library/src/types.ts

@@ -18,7 +18,15 @@
 // Adjust tsconfig.json and "types" field in package.json and then
 // delete this file once complete.
 
+/**
+ * External dependencies
+ */
+import type { ElementDefinition } from '@googleforcreators/elements';
+
 export * from './constants';
+export * from './types';
 export * from './utils/textMeasurements';
 
+export const elementTypes: ElementDefinition[] = [];
+
 export {};

packages/elements/src/types/data.ts

@@ -25,7 +25,10 @@ import type { AudioResource } from '@googleforcreators/media';
  */
 import type { Page } from './page';
 
+export type FontFamily = string;
+
 export type FontStyle = 'normal' | 'italic' | 'regular';
+
 export enum FontVariantStyle {
   Normal = 0,
   Italic = 1,
@@ -35,6 +38,12 @@ export type FontWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
 
 export type FontVariant = [FontVariantStyle, FontWeight];
 
+export enum FontService {
+  Custom = 'custom',
+  GoogleFonts = 'fonts.google.com',
+  System = 'system',
+}
+
 export interface FontMetrics {
   upm: number;
   asc: number;
@@ -54,7 +63,8 @@ export interface FontMetrics {
 }
 
 export interface BaseFontData {
-  family: string;
+  service: FontService;
+  family: FontFamily;
   weights?: FontWeight[];
   styles?: FontStyle[];
   variants?: FontVariant[];
@@ -63,15 +73,15 @@ export interface BaseFontData {
 }
 
 export interface GoogleFontData extends BaseFontData {
-  service: 'fonts.google.com';
+  service: FontService.GoogleFonts;
 }
 
 export interface SystemFontData extends BaseFontData {
-  service: 'system';
+  service: FontService.System;
 }
 
 export interface CustomFontData extends BaseFontData {
-  service: 'custom';
+  service: FontService.Custom;
   url: string;
 }
 
@@ -91,6 +101,12 @@ export interface ProductData {
   productPriceCurrency: string;
   productTitle: string;
   productUrl: string;
+  productIcon?: string;
+  aggregateRating?: {
+    ratingValue: number;
+    reviewCount: number;
+    reviewUrl: string;
+  };
 }
 
 // Data retrieved as part of the raw data from the backend, used for example in the templates, in migration.

packages/elements/src/types/element.ts

@@ -17,11 +17,11 @@
 /**
  * External dependencies
  */
-import type { Solid } from '@googleforcreators/patterns';
+import type { Solid, Pattern } from '@googleforcreators/patterns';
 import type {
-  GifResource,
   Resource,
   SequenceResource,
+  GifResource,
   VideoResource,
 } from '@googleforcreators/media';
 import type { ElementBox } from '@googleforcreators/units';
@@ -30,8 +30,13 @@ import type { ElementBox } from '@googleforcreators/units';
  * Internal dependencies
  */
 import type { ElementType } from './elementType';
-import type { FontMetrics, ProductData } from './data';
 import type { Track } from './media';
+import type {
+  ProductData,
+  GoogleFontData,
+  SystemFontData,
+  CustomFontData,
+} from './data';
 
 export enum LinkType {
   Regular = 'regular',
@@ -101,6 +106,10 @@ export interface Element extends ElementBox {
   isHidden?: boolean;
 }
 
+export interface LinkableElement extends Element {
+  link: Link;
+}
+
 export interface DefaultBackgroundElement extends Element {
   isDefaultBackground: boolean;
   backgroundColor: Solid;
@@ -110,10 +119,6 @@ export interface BackgroundableElement extends Element {
   isBackground?: boolean;
 }
 
-export interface LinkableElement extends Element {
-  link: Link;
-}
-
 export interface MediaElement extends BackgroundableElement {
   resource: Resource;
   scale?: number;
@@ -129,13 +134,23 @@ export interface VideoElement extends SequenceMediaElement {
   type: ElementType.Video;
   tracks: Track[];
   resource: VideoResource;
+  poster?: string;
+  loop?: boolean;
 }
 
 export interface GifElement extends SequenceMediaElement {
   type: ElementType.Gif;
   resource: GifResource;
 }
 
+export interface ImageElement extends MediaElement {
+  type: ElementType.Image;
+}
+
+export interface OverlayableElement extends Element {
+  overlay?: Pattern | null;
+}
+
 export interface ProductElement extends Element {
   type: ElementType.Product;
   product: ProductData;
@@ -148,30 +163,7 @@ export interface StickerElement extends Element {
   };
 }
 
-interface BaseTextElementFont {
-  service: string;
-  family: string;
-  fallbacks: string[];
-  metrics?: FontMetrics;
-}
-
-export interface GoogleTextElementFont extends BaseTextElementFont {
-  service: 'fonts.google.com';
-}
-
-export interface SystemTextElementFont extends BaseTextElementFont {
-  service: 'system';
-}
-
-export interface CustomTextElementFont extends BaseTextElementFont {
-  service: 'custom';
-  url: string;
-}
-
-export type TextElementFont =
-  | GoogleTextElementFont
-  | SystemTextElementFont
-  | CustomTextElementFont;
+export type TextElementFont = GoogleFontData | SystemFontData | CustomFontData;
 
 export interface Padding {
   horizontal: number;
@@ -188,9 +180,13 @@ export interface TextElement extends Element {
   fontSize: number;
 
   backgroundTextMode?: string;
-  tagName?: 'h1' | 'h2' | 'h3' | 'p';
+  tagName?: 'h1' | 'h2' | 'h3' | 'p' | 'auto';
   padding?: Padding;
   marginOffset: number;
   lineHeight: number;
   textAlign: TextAlign;
 }
+
+export interface ShapeElement extends Element {
+  type: ElementType.Shape;
+}

packages/elements/src/types/media.ts

@@ -19,7 +19,7 @@ export type Track = {
   trackId: number;
   trackName: string;
   id: string;
-  srcLang?: string;
+  srclang?: string;
   label?: string;
   kind: string;
 };

packages/elements/src/types/page.ts

@@ -19,6 +19,7 @@
  */
 import type { Pattern } from '@googleforcreators/patterns';
 import type { StoryAnimation } from '@googleforcreators/animation';
+import type { AudioResource } from '@googleforcreators/media';
 
 /**
  * Internal dependencies
@@ -32,33 +33,40 @@ export interface Group {
   isCollapsed?: boolean;
 }
 
+export type BackgroundAudio = {
+  resource: AudioResource;
+  tracks?: Track[];
+  loop?: boolean;
+};
+
 export type Groups = Record<string, Group>;
 
+export type PageAttachment = {
+  url: string;
+  ctaText?: string;
+  theme?: 'light' | 'dark';
+  icon?: string;
+  rel?: string[];
+  needsProxy?: boolean;
+};
+
+export type ShoppingAttachment = {
+  ctaText: string;
+  theme?: 'light' | 'dark';
+};
+
 export interface Page {
   id: ElementId;
   elements: Element[];
   defaultBackgroundElement?: DefaultBackgroundElement;
   animations?: StoryAnimation[];
   backgroundColor: Pattern;
   groups?: Groups;
-  backgroundAudio?: {
-    resource: {
-      src: string;
-      id: number;
-      mimeType: string;
-    };
-    tracks: Track[];
-    loop: boolean;
-  };
-  autoAdvance?: boolean;
-  defaultPageDuration?: number;
-  pageAttachment?: {
-    url: string;
-    ctaText: string;
-    theme: string;
-  };
-  shoppingAttachment?: {
-    ctaText: string;
-    theme: string;
+  backgroundAudio?: BackgroundAudio;
+  pageAttachment?: PageAttachment;
+  shoppingAttachment?: ShoppingAttachment;
+  advancement?: {
+    autoAdvance?: boolean;
+    pageDuration?: number;
   };
 }

packages/elements/src/types/story.ts

@@ -31,8 +31,8 @@ interface FeaturedMedia {
   height: number;
   width: number;
   url: string;
-  needsProxy: boolean;
-  isExternal: boolean;
+  needsProxy?: boolean;
+  isExternal?: boolean;
 }
 interface PublisherLogo {
   id: number;

packages/elements/src/utils/elementIs.ts

@@ -26,14 +26,15 @@ import type {
   BackgroundableElement,
   DefaultBackgroundElement,
   Element,
-  GifElement,
-  LinkableElement,
   MediaElement,
   ProductElement,
   SequenceMediaElement,
   StickerElement,
   TextElement,
   VideoElement,
+  GifElement,
+  LinkableElement,
+  OverlayableElement,
 } from '../types';
 import { ElementType } from '../types';
 
@@ -79,7 +80,10 @@ function isSequenceMediaElement(
   e: Draft<MediaElement>
 ): e is Draft<SequenceMediaElement>;
 function isSequenceMediaElement(e: MediaElement): e is SequenceMediaElement {
-  return 'poster' in e.resource && Boolean(e.resource.poster);
+  return (
+    ('poster' in e.resource && Boolean(e.resource.poster)) ||
+    ('length' in e.resource && Boolean(e.resource.length))
+  );
 }
 
 function isSticker(e: Element): e is StickerElement {
@@ -110,6 +114,12 @@ function isLinkable(e: Element): e is LinkableElement {
   );
 }
 
+function isOverlayable(e: Element): e is OverlayableElement;
+function isOverlayable(e: Draft<Element>): e is Draft<OverlayableElement>;
+function isOverlayable(e: Element): e is OverlayableElement {
+  return 'overlay' in e && typeof e.overlay !== 'undefined';
+}
+
 const elementIs = {
   media: isMediaElement,
   text: isTextElement,
@@ -121,6 +131,7 @@ const elementIs = {
   video: isVideo,
   gif: isGif,
   linkable: isLinkable,
+  overlayable: isOverlayable,
 };
 
 export default elementIs;