TypeScript: Convert text-sets package

packages/text-sets/package.json

@@ -27,17 +27,19 @@
   "type": "module",
   "customExports": {
     ".": {
-      "default": "./src/index.js"
+      "default": "./src/index.ts"
     }
   },
   "main": "dist/index.js",
   "module": "dist-module/index.js",
-  "source": "src/index.js",
+  "types": "dist-types/index.d.ts",
+  "source": "src/index.ts",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@googleforcreators/migration": "*"
+    "@googleforcreators/migration": "*",
+    "@googleforcreators/types": "*"
   },
   "devDependencies": {
     "puppeteer": "*"

packages/text-sets/src/loadTextSets.js → packages/text-sets/src/loadTextSets.ts

@@ -18,8 +18,13 @@
  * External dependencies
  */
 import { migrate } from '@googleforcreators/migration';
+import type { Element } from '@googleforcreators/types';
+/**
+ * Internal dependencies
+ */
+import type { MinMax, TemplateData, TextSet, TextSets } from './types';
 
-function updateMinMax(minMax, element) {
+function updateMinMax(minMax: MinMax, element: Element): MinMax {
   // Purposely mutating object so passed
   // in minMax is modified
   minMax.minX = Math.min(minMax.minX, element.x);
@@ -31,21 +36,20 @@ function updateMinMax(minMax, element) {
   return minMax;
 }
 
-async function loadTextSet(name) {
-  const data = await import(
+async function loadTextSet(name: string): Promise<TextSet[]> {
+  const data: TemplateData = (await import(
     /* webpackChunkName: "chunk-web-stories-textset-[index]" */ `./raw/${name}.json`
-  );
-  const migrated = migrate(data.default, data.default.version);
-
-  return migrated.pages.reduce((sets, page) => {
+  )) as TemplateData;
+  const migrated = migrate(data, data.version) as TemplateData;
+  return migrated.pages.reduce((sets: TextSet[], page) => {
     const minMax = {
       minX: Infinity,
       maxX: 0,
       minY: Infinity,
       maxY: 0,
     };
 
-    const textElements = page.elements.filter((element) => {
+    const textElements = page.elements.filter((element: Element) => {
       return !element.isBackground && Boolean(updateMinMax(minMax, element));
     });
 
@@ -55,7 +59,7 @@ async function loadTextSet(name) {
         textSetFonts: page.fonts,
         id: page.id,
         textSetCategory: name,
-        elements: textElements.map((e) => ({
+        elements: textElements.map((e: Element) => ({
           ...e,
           // Offset elements so the text set's
           // default position is (0,0)
@@ -71,7 +75,7 @@ async function loadTextSet(name) {
   }, []);
 }
 
-export default async function loadTextSets() {
+export default async function loadTextSets(): Promise<TextSets> {
   const textSets = [
     'cover',
     'step',
@@ -84,10 +88,10 @@ export default async function loadTextSets() {
   ];
 
   const results = await Promise.all(
-    textSets.map(async (name) => {
+    textSets.map(async (name: string): Promise<Array<string | TextSet[]>> => {
       return [name, await loadTextSet(name)];
     })
   );
 
-  return Object.fromEntries(results);
+  return Object.fromEntries(results) as TextSets;
 }

packages/text-sets/src/types.ts

@@ -0,0 +1,64 @@
+/*
+ * Copyright 2022 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 type { Page, Story, Element } from '@googleforcreators/types';
+
+export interface TemplateData extends Omit<Story, 'pages'> {
+  current: null;
+  selection: never[];
+  story: Record<string, never>;
+  version: number;
+  pages: TextSetPage[];
+}
+
+export interface TextSetPage extends Page {
+  fonts: string[];
+  id: string;
+}
+
+export interface MinMax {
+  minX: number;
+  maxX: number;
+  minY: number;
+  maxY: number;
+}
+
+export interface TextSetElement extends Element {
+  normalizedOffsetX: number;
+  normalizedOffsetY: number;
+  textSetWidth: number;
+  textSetHeight: number;
+}
+
+export interface TextSet {
+  id: string;
+  elements: TextSetElement[];
+  textSetCategory: string;
+  textSetFonts: string[];
+}
+
+export interface TextSets {
+  cover: TextSet[];
+  step: TextSet[];
+  section_header: TextSet[];
+  editorial: TextSet[];
+  contact: TextSet[];
+  table: TextSet[];
+  list: TextSet[];
+  quote: TextSet[];
+}

packages/text-sets/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.shared.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "declarationDir": "dist-types"
+  },
+  "include": ["src/**/*"]
+}

tsconfig.json

@@ -9,6 +9,7 @@
     { "path": "packages/react" },
     { "path": "packages/rich-text" },
     { "path": "packages/stickers" },
+    { "path": "packages/text-sets" },
     { "path": "packages/tracking" },
     { "path": "packages/transform" },
     { "path": "packages/types" },