Merge pull request #8 from Runroom/hotfix/missing-fonts

Fix Missing Fonts

src/common/interfaces.ts

@@ -1,3 +1,5 @@
+import { PenpotFile } from '../ui/penpot';
+
 export type NodeData = {
   id: string;
   name: string;
@@ -42,3 +44,8 @@ export type TextData = Pick<
   textAlignVertical: 'CENTER' | 'TOP' | 'BOTTOM';
   children: TextDataChildren[];
 };
+
+export type ExportFile = {
+  penpotFile: PenpotFile;
+  fontNames: Set<FontName>;
+};

src/ui/converters/createPenpotBoard.ts

@@ -1,15 +1,14 @@
 import { createPenpotItem } from '.';
-import { NodeData } from '../../common/interfaces';
+import { ExportFile, NodeData } from '../../common/interfaces';
-import { PenpotFile } from '../penpot';
 import { translateFills } from '../translators';
 
 export const createPenpotBoard = (
-  file: PenpotFile,
+  file: ExportFile,
   node: NodeData,
   baseX: number,
   baseY: number
 ) => {
-  file.addArtboard({
+  file.penpotFile.addArtboard({
     name: node.name,
     x: node.x + baseX,
     y: node.y + baseY,
@@ -20,5 +19,5 @@ export const createPenpotBoard = (
   for (const child of node.children) {
     createPenpotItem(file, child, node.x + baseX, node.y + baseY);
   }
-  file.closeArtboard();
+  file.penpotFile.closeArtboard();
 };

src/ui/converters/createPenpotCircle.ts

@@ -1,14 +1,13 @@
-import { NodeData } from '../../common/interfaces';
+import { ExportFile, NodeData } from '../../common/interfaces';
-import { PenpotFile } from '../penpot';
 import { translateFills } from '../translators';
 
 export const createPenpotCircle = (
-  file: PenpotFile,
+  file: ExportFile,
   node: NodeData,
   baseX: number,
   baseY: number
 ) => {
-  file.createCircle({
+  file.penpotFile.createCircle({
     name: node.name,
     x: node.x + baseX,
     y: node.y + baseY,

src/ui/converters/createPenpotFile.ts

@@ -1,11 +1,11 @@
 import { createPenpotItem } from '.';
-import { NodeData } from '../../common/interfaces';
+import { ExportFile, NodeData } from '../../common/interfaces';
 import { createFile } from '../penpot';
 
 export const createPenpotFile = (node: NodeData) => {
-  const file = createFile(node.name);
+  const exportFile = { penpotFile: createFile(node.name), fontNames: new Set<FontName>() };
   for (const page of node.children) {
-    createPenpotItem(file, page, 0, 0);
+    createPenpotItem(exportFile as ExportFile, page, 0, 0);
   }
-  return file;
+  return exportFile;
 };

src/ui/converters/createPenpotGroup.ts

@@ -1,16 +1,15 @@
 import { createPenpotItem } from '.';
-import { NodeData } from '../../common/interfaces';
+import { ExportFile, NodeData } from '../../common/interfaces';
-import { PenpotFile } from '../penpot';
 
 export const createPenpotGroup = (
-  file: PenpotFile,
+  file: ExportFile,
   node: NodeData,
   baseX: number,
   baseY: number
 ) => {
-  file.addGroup({ name: node.name });
+  file.penpotFile.addGroup({ name: node.name });
   for (const child of node.children) {
     createPenpotItem(file, child, baseX, baseY);
   }
-  file.closeGroup();
+  file.penpotFile.closeGroup();
 };

src/ui/converters/createPenpotImage.ts

@@ -1,13 +1,12 @@
-import { NodeData } from '../../common/interfaces';
+import { ExportFile, NodeData } from '../../common/interfaces';
-import { PenpotFile } from '../penpot';
 
 export const createPenpotImage = (
-  file: PenpotFile,
+  file: ExportFile,
   node: NodeData,
   baseX: number,
   baseY: number
 ) => {
-  file.createImage({
+  file.penpotFile.createImage({
     name: node.name,
     x: node.x + baseX,
     y: node.y + baseY,

src/ui/converters/createPenpotItem.ts

@@ -7,12 +7,11 @@ import {
   createPenpotRectangle,
   createPenpotText
 } from '.';
-import { NodeData, TextData } from '../../common/interfaces';
+import { ExportFile, NodeData, TextData } from '../../common/interfaces';
-import { PenpotFile } from '../penpot';
 import { calculateAdjustment } from '../utils';
 
 export const createPenpotItem = (
-  file: PenpotFile,
+  file: ExportFile,
   node: NodeData,
   baseX: number,
   baseY: number

src/ui/converters/createPenpotPage.ts

@@ -1,11 +1,10 @@
 import { createPenpotItem } from '.';
-import { NodeData } from '../../common/interfaces';
+import { ExportFile, NodeData } from '../../common/interfaces';
-import { PenpotFile } from '../penpot';
 
-export const createPenpotPage = (file: PenpotFile, node: NodeData) => {
+export const createPenpotPage = (file: ExportFile, node: NodeData) => {
-  file.addPage(node.name);
+  file.penpotFile.addPage(node.name);
   for (const child of node.children) {
     createPenpotItem(file, child, 0, 0);
   }
-  file.closePage();
+  file.penpotFile.closePage();
 };

src/ui/converters/createPenpotRectangle.ts

@@ -1,14 +1,13 @@
-import { NodeData } from '../../common/interfaces';
+import { ExportFile, NodeData } from '../../common/interfaces';
-import { PenpotFile } from '../penpot';
 import { translateFills } from '../translators';
 
 export const createPenpotRectangle = (
-  file: PenpotFile,
+  file: ExportFile,
   node: NodeData,
   baseX: number,
   baseY: number
 ) => {
-  file.createRect({
+  file.penpotFile.createRect({
     name: node.name,
     x: node.x + baseX,
     y: node.y + baseY,

src/ui/converters/createPenpotText.ts

@@ -1,7 +1,6 @@
 import slugify from 'slugify';
 
-import { TextData } from '../../common/interfaces';
+import { ExportFile, TextData } from '../../common/interfaces';
-import { PenpotFile } from '../penpot';
 import {
   translateFills,
   translateFontStyle,
@@ -10,16 +9,15 @@ import {
   translateTextTransform,
   translateVerticalAlign
 } from '../translators';
-import { validateFont } from '../validators';
 
 export const createPenpotText = (
-  file: PenpotFile,
+  file: ExportFile,
   node: TextData,
   baseX: number,
   baseY: number
 ) => {
   const children = node.children.map(val => {
-    validateFont(val.fontName);
+    file.fontNames.add(val.fontName);
 
     return {
       lineHeight: val.lineHeight,
@@ -38,9 +36,9 @@ export const createPenpotText = (
     };
   });
 
-  validateFont(node.fontName);
+  file.fontNames.add(node.fontName);
 
-  file.createText({
+  file.penpotFile.createText({
     name: node.name,
     x: node.x + baseX,
     y: node.y + baseY,

src/ui/ui.tsx

@@ -1,8 +1,10 @@
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
+import slugify from 'slugify';
 
 import { createPenpotFile } from './converters';
 import './ui.css';
+import { validateFont } from './validators';
 
 type PenpotExporterState = {
   missingFonts: Set<string>;
@@ -26,14 +28,12 @@ export default class PenpotExporter extends React.Component<unknown, PenpotExpor
   componentWillUnmount = () => {
     window.removeEventListener('message', this.onMessage);
   };
+  addFontWarning(font: string) {
+    const newMissingFonts = this.state.missingFonts;
+    newMissingFonts.add(font);
 
-  // TODO: FIX THIS CODE
+    this.setState(() => ({ missingFonts: newMissingFonts }));
-  // addFontWarning(font: string) {
+  }
-  //   const newMissingFonts = this.state.missingFonts;
-  //   newMissingFonts.add(font);
-  //
-  //   this.setState(() => ({ missingFonts: newMissingFonts }));
-  // }
 
   onCreatePenpot = () => {
     this.setState(() => ({ exporting: true }));
@@ -48,7 +48,13 @@ export default class PenpotExporter extends React.Component<unknown, PenpotExpor
   onMessage = (event: any) => {
     if (event.data.pluginMessage.type == 'FIGMAFILE') {
       const file = createPenpotFile(event.data.pluginMessage.data);
-      file.export();
+      // validate file.fontNames
+      file.fontNames.forEach(font => {
+        if (!validateFont(font)) {
+          this.addFontWarning(slugify(font.family.toLowerCase()));
+        }
+      });
+      file.penpotFile.export();
       this.setState(() => ({ exporting: false }));
     }
   };