TypeScript: Convert text-sets package (#12274)

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,14 @@
  * External dependencies
  */
 import { migrate } from '@googleforcreators/migration';
+import type { Element } from '@googleforcreators/types';
+/**
+ * Internal dependencies
+ */
+import type { MinMax, TextSetData, TextSet, TextSets } from './types';
+import { TextSetType } 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,23 +37,21 @@ function updateMinMax(minMax, element) {
   return minMax;
 }
 
-async function loadTextSet(name) {
-  const data = await import(
+async function loadTextSet(name: string) {
+  const data: TextSetData = (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 TextSetData;
+  const migrated = migrate(data, data.version) as TextSetData;
+  return migrated.pages.reduce((sets: TextSet[], page) => {
     const minMax = {
       minX: Infinity,
       maxX: 0,
       minY: Infinity,
       maxY: 0,
     };
 
-    const textElements = page.elements.filter((element) => {
-      return !element.isBackground && Boolean(updateMinMax(minMax, element));
-    });
+    const textElements = page.elements.filter(({ type }) => type === 'text');
+    textElements.forEach((element) => updateMinMax(minMax, element));
 
     return [
       ...sets,
@@ -72,22 +76,13 @@ async function loadTextSet(name) {
 }
 
 export default async function loadTextSets() {
-  const textSets = [
-    'cover',
-    'step',
-    'section_header',
-    'editorial',
-    'contact',
-    'table',
-    'list',
-    'quote',
-  ];
+  const textSets: TextSets = {} as TextSets;
 
-  const results = await Promise.all(
-    textSets.map(async (name) => {
-      return [name, await loadTextSet(name)];
+  await Promise.all(
+    Object.values(TextSetType).map(async (name) => {
+      textSets[name] = await loadTextSet(name);
     })
   );
 
-  return Object.fromEntries(results);
+  return textSets;
 }

packages/text-sets/src/types.ts

@@ -0,0 +1,75 @@
+/*
+ * 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 TextSetData 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[];
+}
+
+export enum TextSetType {
+  Cover = 'cover',
+  Step = 'step',
+  SectionHeader = 'section_header',
+  Editorial = 'editorial',
+  Contact = 'contact',
+  Table = 'table',
+  List = 'list',
+  Quote = 'quote',
+}

packages/text-sets/tsconfig.json

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

tsconfig.json

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