wip

GoogleForCreators · Nov 22, 2023 · 4e819e6 · 4e819e6
1 parent 64c9860
commit 4e819e6
Show file tree

Hide file tree

Showing 56 changed files with 1,580 additions and 776 deletions.
diff --git a/packages/animation/src/components/types.ts b/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[];

diff --git a/packages/element-library/src/types.ts b/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 {};
diff --git a/packages/elements/src/types/data.ts b/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.

diff --git a/packages/elements/src/types/element.ts b/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;
@@ -136,6 +141,10 @@ export interface GifElement extends SequenceMediaElement {
   resource: GifResource;
 }
 
+export interface OverlayableElement extends Element {
+  overlay?: Pattern | null;
+}
+
 export interface ProductElement extends Element {
   type: ElementType.Product;
   product: ProductData;
@@ -148,30 +157,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;

diff --git a/packages/elements/src/types/media.ts b/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;
 };
diff --git a/packages/elements/src/types/page.ts b/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;
+  }
 }
diff --git a/packages/elements/src/types/story.ts b/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;

diff --git a/packages/elements/src/utils/elementIs.ts b/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';
 
@@ -110,6 +111,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 +128,7 @@ const elementIs = {
   video: isVideo,
   gif: isGif,
   linkable: isLinkable,
+  overlayable: isOverlayable,
 };
 
 export default elementIs;
diff --git a/packages/elements/src/utils/getLayerName.ts b/packages/elements/src/utils/getLayerName.ts
@@ -22,12 +22,9 @@ import { __ } from '@googleforcreators/i18n';
 /**
  * Internal dependencies
  */
-import type { BackgroundableElement, Element } from '../types';
+import type { Element } from '../types';
 import getDefinitionForType from './getDefinitionForType';
-
-function isBackgroundableElement(e: Element): e is BackgroundableElement {
-  return 'isBackground' in e;
-}
+import elementIs from './elementIs';
 
 /**
  * Returns the layer name based on the element properties.
@@ -40,7 +37,7 @@ function getLayerName(element: Element) {
     return element.layerName;
   }
 
-  if (isBackgroundableElement(element) && element.isBackground) {
+  if (elementIs.backgroundable(element) && element.isBackground) {
     return __('Background', 'web-stories');
   }
 

diff --git a/packages/masks/src/output.tsx b/packages/masks/src/output.tsx
@@ -34,14 +34,14 @@ import { DEFAULT_MASK } from './constants';
 interface WithMaskProps {
   element: Element;
   style: CSSProperties;
-  fill: boolean;
+  fill?: boolean;
   children: ReactNode;
-  skipDefaultMask: boolean;
+  skipDefaultMask?: boolean;
 }
 
 export default function WithMask({
   element,
-  fill,
+  fill = false,
   skipDefaultMask = false,
   ...rest
 }: WithMaskProps) {

diff --git a/packages/masks/src/utils/elementBorder.ts b/packages/masks/src/utils/elementBorder.ts
@@ -29,7 +29,13 @@ import type { CSSProperties } from 'react';
  */
 import { canMaskHaveBorder, canSupportMultiBorder } from '../masks';
 
-function hasBorder({ border }: Element) {
+interface ElementWithBorder extends Element {
+  border: Border;
+}
+
+function hasBorder(element: Element): element is ElementWithBorder {
+  const { border } = element;
+
   if (!border) {
     return false;
   }
@@ -48,7 +54,9 @@ function hasBorder({ border }: Element) {
  * @param element Element object.
  * @return If should be displayed.
  */
-export function shouldDisplayBorder(element: Element) {
+export function shouldDisplayBorder(
+  element: Element
+): element is ElementWithBorder {
   return (
     hasBorder(element) &&
     canMaskHaveBorder(element) &&
@@ -63,7 +71,7 @@ interface SizeAndPosition {
   posLeft: string;
 }
 
-type BorderPositionProps = Border & SizeAndPosition;
+type BorderPositionProps = Border & Partial<SizeAndPosition>;
 
 /**
  * Gets the CSS values for an element with border.
@@ -109,7 +117,7 @@ export function getBorderStyle(element: Element): CSSProperties {
     return getBorderRadius(element);
   }
   const { border } = element;
-  const { left, top, right, bottom } = border as Border;
+  const { left, top, right, bottom } = border;
 
   // We're making the border-width responsive just for the preview,
   // since the calculation is not 100% precise here, we're opting to the safe side by rounding the widths up