TypeScript: convert fontProvider

packages/elements/src/types/data.ts

@@ -42,16 +42,30 @@ export interface FontMetrics {
   lGap: number;
 }
 
-export interface FontData {
+export interface BaseFontData {
   family: string;
-  service?: string;
   weights?: FontWeight[];
   styles?: FontStyle[];
   variants?: FontVariant[];
   fallbacks?: string[];
   metrics?: FontMetrics;
 }
 
+export interface GoogleFontData extends BaseFontData {
+  service: 'fonts.google.com';
+}
+
+export interface SystemFontData extends BaseFontData {
+  service: 'system';
+}
+
+export interface CustomFontData extends BaseFontData {
+  service: 'custom';
+  url: string;
+}
+
+export type FontData = GoogleFontData | SystemFontData | CustomFontData;
+
 export interface ProductImage {
   alt: string;
   url: string;

packages/elements/src/types/element.ts

@@ -106,3 +106,12 @@ export interface MediaElement extends BackgroundableElement {
 export interface SequenceMediaElement extends MediaElement {
   resource: SequenceResource;
 }
+
+export interface TextElement extends Element {
+  content: string;
+  font: {
+    service: string;
+    family: string;
+    fallbacks: string[];
+  };
+}

packages/fonts/package.json

@@ -47,7 +47,7 @@
   },
   "main": "dist/index.js",
   "module": "dist-module/index.js",
-  "tyoes": "dist-types/index.d.ts",
+  "types": "dist-types/index.d.ts",
   "source": "src/index.ts",
   "publishConfig": {
     "access": "public"

packages/fonts/src/types.ts

@@ -16,5 +16,5 @@
 
 export interface Font {
   family: string;
-  variants: Array<[number, number]>;
+  variants?: Array<[number, number]>;
 }

packages/story-editor/src/app/font/actions/useLoadFontFiles.js → packages/story-editor/src/app/font/actions/useLoadFontFiles.ts

@@ -24,15 +24,17 @@ import {
   ensureFontLoaded,
   loadInlineStylesheet,
 } from '@googleforcreators/dom';
+import type { FontData } from '@googleforcreators/elements';
 
 /**
  * Internal dependencies
  */
 import cleanForSlug from '../../../utils/cleanForSlug';
+import type { FontConfig } from '../types';
 
 function useLoadFontFiles() {
-  const maybeLoadFont = useCallback(async (font) => {
-    const { family, service, variants, url } = font;
+  const maybeLoadFont = useCallback(async (font: FontData) => {
+    const { family, service, variants } = font;
 
     const handle = cleanForSlug(family);
     const elementId = `web-stories-${handle}-font-css`;
@@ -50,9 +52,14 @@ function useLoadFontFiles() {
           elementId
         );
         break;
-      case 'custom':
-        await loadInlineStylesheet(elementId, getFontCSS(family, url));
+      case 'custom': {
+        const fontCSS = getFontCSS(family, font.url);
+        if (!fontCSS) {
+          return;
+        }
+        loadInlineStylesheet(elementId, fontCSS);
         break;
+      }
       default:
         return;
     }
@@ -67,7 +74,7 @@ function useLoadFontFiles() {
    * @return {Promise<boolean>} Returns fonts loaded promise
    */
   const maybeEnqueueFontStyle = useCallback(
-    (fonts) => {
+    (fonts: FontConfig[]) => {
       return Promise.allSettled(
         fonts.map(async ({ font, fontWeight, fontStyle, content }) => {
           const { family, service } = font;

packages/story-editor/src/app/font/context.ts

@@ -0,0 +1,46 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import { createContext } from '@googleforcreators/react';
+
+/**
+ * Internal dependencies
+ */
+import type { FontProviderState } from './types';
+
+export default createContext<FontProviderState>({
+  state: {
+    fonts: [],
+    curatedFonts: [],
+    customFonts: [],
+    recentFonts: [],
+  },
+  actions: {
+    getFontsBySearch: () => Promise.resolve([]),
+    getFontByName: () => null,
+    maybeEnqueueFontStyle: () => Promise.resolve(),
+    getFontWeight: (name: string) => [{ name, value: 400 }],
+    getFontFallback: () => [''],
+    ensureMenuFontsLoaded: () => undefined,
+    ensureCustomFontsLoaded: () => undefined,
+    addRecentFont: () => undefined,
+    getCustomFonts: () => Promise.resolve(),
+    getCuratedFonts: () => Promise.resolve(),
+  },
+});

packages/story-editor/src/app/font/fontProvider.js → packages/story-editor/src/app/font/fontProvider.tsx

@@ -17,10 +17,11 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
+import type { PropsWithChildren } from 'react';
 import { useCallback, useRef, useState } from '@googleforcreators/react';
 import { CURATED_FONT_NAMES } from '@googleforcreators/fonts';
 import { loadStylesheet } from '@googleforcreators/dom';
+import type { FontData } from '@googleforcreators/elements';
 
 /**
  * Internal dependencies
@@ -30,12 +31,13 @@ import { useAPI } from '../api';
 import Context from './context';
 import useLoadFontFiles from './actions/useLoadFontFiles';
 import { GOOGLE_MENU_FONT_URL } from './constants';
+import type { FontWeightOption } from './types';
 
-function FontProvider({ children }) {
-  const [queriedFonts, setQueriedFonts] = useState([]);
-  const [curatedFonts, setCuratedFonts] = useState([]);
-  const [recentFonts, setRecentFonts] = useState([]);
-  const [customFonts, setCustomFonts] = useState(null);
+function FontProvider({ children }: PropsWithChildren<unknown>) {
+  const [queriedFonts, setQueriedFonts] = useState<FontData[]>([]);
+  const [curatedFonts, setCuratedFonts] = useState<FontData[]>([]);
+  const [recentFonts, setRecentFonts] = useState<FontData[]>([]);
+  const [customFonts, setCustomFonts] = useState<FontData[] | null>(null);
   const {
     actions: { getFonts },
   } = useAPI();
@@ -92,21 +94,21 @@ function FontProvider({ children }) {
   const { maybeEnqueueFontStyle, maybeLoadFont } = useLoadFontFiles();
 
   const getFontByName = useCallback(
-    (name) => {
+    (name: string) => {
       const foundFont = fonts.find((font) => font.family === name);
-      return foundFont ? foundFont : {};
+      return foundFont ? foundFont : null;
     },
     [fonts]
   );
 
   const getFontsBySearch = useCallback(
-    async (search) => {
+    async (search: string) => {
       if (search.length < 2) {
         setQueriedFonts([]);
         return [];
       }
 
-      const newFonts = await getFonts({ search });
+      const newFonts = (await getFonts?.({ search })) || [];
 
       const formattedFonts = newFonts.map((font) => ({
         ...font,
@@ -122,8 +124,10 @@ function FontProvider({ children }) {
   );
 
   const getFontWeight = useCallback(
-    (name) => {
-      const defaultFontWeights = [{ name: FONT_WEIGHT_NAMES[400], value: 400 }];
+    (name: string) => {
+      const defaultFontWeights: FontWeightOption[] = [
+        { name: FONT_WEIGHT_NAMES[400], value: 400 },
+      ];
 
       const currentFont = getFontByName(name);
       let fontWeights = defaultFontWeights;
@@ -142,15 +146,15 @@ function FontProvider({ children }) {
   );
 
   const getFontFallback = useCallback(
-    (name) => {
+    (name: string) => {
       const currentFont = getFontByName(name);
       return currentFont?.fallbacks ? currentFont.fallbacks : [];
     },
     [getFontByName]
   );
 
   const addRecentFont = useCallback(
-    (recentFont) => {
+    (recentFont: FontData) => {
       const newRecentFonts = [recentFont];
       recentFonts.forEach((font) => {
         if (recentFont.family === font.family) {
@@ -163,8 +167,8 @@ function FontProvider({ children }) {
     [recentFonts]
   );
 
-  const menuFonts = useRef([]);
-  const ensureMenuFontsLoaded = useCallback((fontsToLoad) => {
+  const menuFonts = useRef<string[]>([]);
+  const ensureMenuFontsLoaded = useCallback((fontsToLoad: string[]) => {
     const newMenuFonts = fontsToLoad.filter(
       (fontName) => !menuFonts.current.includes(fontName)
     );
@@ -187,13 +191,13 @@ function FontProvider({ children }) {
   const ensureCustomFontsLoaded = useCallback(
     (fontsToLoad) => {
       for (const font of fontsToLoad) {
-        const fontObj = customFonts.find(({ family }) => family === font);
+        const fontObj = customFonts?.find(({ family }) => family === font);
 
         if (!fontObj) {
           continue;
         }
 
-        maybeLoadFont(fontObj);
+        void maybeLoadFont(fontObj);
       }
     },
     [customFonts, maybeLoadFont]
@@ -223,8 +227,4 @@ function FontProvider({ children }) {
   return <Context.Provider value={state}>{children}</Context.Provider>;
 }
 
-FontProvider.propTypes = {
-  children: PropTypes.node,
-};
-
 export default FontProvider;

packages/story-editor/src/app/font/test/actions/useLoadFontFiles.js → packages/story-editor/src/app/font/test/actions/useLoadFontFiles.ts

@@ -32,7 +32,7 @@ const DEFAULT_FONT = {
   fontWeight: 400,
   fontStyle: 'normal',
   content: 'Fill in some text',
-};
+} as const;
 
 const CUSTOM_FONT = {
   font: {
@@ -43,7 +43,7 @@ const CUSTOM_FONT = {
   fontWeight: 400,
   fontStyle: 'normal',
   content: 'Fill in some text',
-};
+} as const;
 
 /* eslint-disable testing-library/no-node-access */
 
@@ -65,27 +65,13 @@ describe('useLoadFontFiles', () => {
     expect(document.getElementById('bar-regular-css')).toBeDefined();
   });
 
-  it('should skip font with unknown service', () => {
-    expect(document.getElementById('font-css')).toBeNull();
-
-    renderHook(async () => {
-      const { maybeEnqueueFontStyle } = useLoadFontFiles();
-
-      await maybeEnqueueFontStyle([
-        { ...DEFAULT_FONT, font: { ...DEFAULT_FONT.font, service: 'abcd' } },
-      ]);
-    });
-
-    expect(document.getElementById('font-css')).toBeNull();
-  });
-
   it('waits for all promises to be settled', () => {
     expect(document.getElementById('font-css')).toBeNull();
 
     renderHook(async () => {
       const { maybeEnqueueFontStyle } = useLoadFontFiles();
 
-      await maybeEnqueueFontStyle([{}, DEFAULT_FONT]);
+      await maybeEnqueueFontStyle([DEFAULT_FONT]);
     });
 
     expect(document.querySelectorAll('link')).toHaveLength(1);