From 42ec8d8cee7cb2ca908d9a73add52b2d4c097d48 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alex=20S=C3=A1nchez?= <alejandro@runroom.com>
Date: Thu, 19 Dec 2024 15:26:05 +0100
Subject: [PATCH] remove custom fonts form

---
 plugin-src/code.ts                            |  2 +-
 plugin-src/handleExportMessage.ts             |  7 +-
 .../text/font/custom/customFontIds.ts         |  9 ---
 .../translators/text/font/custom/index.ts     |  1 -
 .../text/font/custom/translateCustomFont.ts   |  6 +-
 ui-src/components/MissingFontsSection.tsx     | 65 ++++---------------
 ui-src/context/useFigma.ts                    |  4 +-
 7 files changed, 19 insertions(+), 75 deletions(-)
 delete mode 100644 plugin-src/translators/text/font/custom/customFontIds.ts

diff --git a/plugin-src/code.ts b/plugin-src/code.ts
index e8feb35c..354d5e89 100644
--- a/plugin-src/code.ts
+++ b/plugin-src/code.ts
@@ -16,7 +16,7 @@ figma.ui.onmessage = message => {
   }
 
   if (message.type === 'export') {
-    handleExportMessage(message.data as Record<string, string>);
+    handleExportMessage();
   }
 
   if (message.type === 'cancel') {
diff --git a/plugin-src/handleExportMessage.ts b/plugin-src/handleExportMessage.ts
index 2cd49c93..42f2678b 100644
--- a/plugin-src/handleExportMessage.ts
+++ b/plugin-src/handleExportMessage.ts
@@ -1,11 +1,6 @@
 import { transformDocumentNode } from '@plugin/transformers';
-import { setCustomFontId } from '@plugin/translators/text/font/custom';
-
-export const handleExportMessage = async (missingFontIds: Record<string, string>) => {
-  Object.entries(missingFontIds).forEach(([fontFamily, fontId]) => {
-    setCustomFontId(fontFamily, fontId);
-  });
 
+export const handleExportMessage = async () => {
   figma.ui.postMessage({
     type: 'PENPOT_DOCUMENT',
     data: await transformDocumentNode(figma.root)
diff --git a/plugin-src/translators/text/font/custom/customFontIds.ts b/plugin-src/translators/text/font/custom/customFontIds.ts
deleted file mode 100644
index 7a421a8b..00000000
--- a/plugin-src/translators/text/font/custom/customFontIds.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-const customFontIds = new Map<string, string>();
-
-export const getCustomFontId = (fontName: FontName) => {
-  return customFontIds.get(fontName.family);
-};
-
-export const setCustomFontId = (fontFamily: string, fontId: string) => {
-  customFontIds.set(fontFamily, fontId);
-};
diff --git a/plugin-src/translators/text/font/custom/index.ts b/plugin-src/translators/text/font/custom/index.ts
index 49e3ab52..39bb5855 100644
--- a/plugin-src/translators/text/font/custom/index.ts
+++ b/plugin-src/translators/text/font/custom/index.ts
@@ -1,3 +1,2 @@
-export * from './customFontIds';
 export * from './translateCustomFont';
 export * from './translateFontVariantId';
diff --git a/plugin-src/translators/text/font/custom/translateCustomFont.ts b/plugin-src/translators/text/font/custom/translateCustomFont.ts
index 6f370a19..755374ac 100644
--- a/plugin-src/translators/text/font/custom/translateCustomFont.ts
+++ b/plugin-src/translators/text/font/custom/translateCustomFont.ts
@@ -1,4 +1,4 @@
-import { getCustomFontId, translateFontVariantId } from '@plugin/translators/text/font/custom';
+import { translateFontVariantId } from '@plugin/translators/text/font/custom';
 
 import { TextTypography } from '@ui/lib/types/shapes/textShape';
 
@@ -6,10 +6,8 @@ export const translateCustomFont = (
   fontName: FontName,
   fontWeight: string
 ): Pick<TextTypography, 'fontId' | 'fontVariantId' | 'fontWeight'> | undefined => {
-  const customFontId = getCustomFontId(fontName);
-
   return {
-    fontId: customFontId ? `custom-${customFontId}` : '',
+    fontId: '',
     fontVariantId: translateFontVariantId(fontName, fontWeight),
     fontWeight
   };
diff --git a/ui-src/components/MissingFontsSection.tsx b/ui-src/components/MissingFontsSection.tsx
index 518fca12..507b7b48 100644
--- a/ui-src/components/MissingFontsSection.tsx
+++ b/ui-src/components/MissingFontsSection.tsx
@@ -1,5 +1,4 @@
-import { Banner, IconInfo32, Link, Textbox } from '@create-figma-plugin/ui';
-import { Controller, useFormContext } from 'react-hook-form';
+import { Banner, IconInfo32, Link } from '@create-figma-plugin/ui';
 
 import { useFigmaContext } from '@ui/context';
 
@@ -14,58 +13,20 @@ export const MissingFontsSection = () => {
     <Stack space="small">
       <Stack space="xsmall">
         <Banner icon={<IconInfo32 />}>
-          {missingFonts.length} custom font{missingFonts.length > 1 ? 's' : ''} detected
+          {missingFonts.length} custom font{missingFonts.length > 1 ? 's' : ''} detected:
+          <ul style={{ paddingLeft: 20 }}>
+            {missingFonts.map(font => (
+              <li key={font}>{font}</li>
+            ))}
+          </ul>
         </Banner>
-        <span>To export your file with custom fonts, please follow these steps:</span>
-        <Stack as="ol" space="xsmall" style={{ paddingLeft: '1rem' }}>
-          <li>
-            Before exporting the file, upload your custom local fonts in Penpot.
-            <br />
-            <Link href="https://help.penpot.app/user-guide/custom-fonts/" target="_blank">
-              Learn how to do it.
-            </Link>
-          </li>
-          <li>
-            Follow this{' '}
-            <Link
-              href="https://github.com/penpot/penpot-exporter-figma-plugin/wiki/Step-by-Step-guide-to-finding-Font-Ids-in-Penpot"
-              target="_blank"
-            >
-              step-by-step guide
-            </Link>{' '}
-            to locate and copy the font IDs from Penpot
-          </li>
-          <li>Return here and paste the font IDs in the section below</li>
-        </Stack>
+        <span>
+          To export your file with custom fonts, first upload them in Penpot.{' '}
+          <Link href="https://help.penpot.app/user-guide/custom-fonts/" target="_blank">
+            Learn how to upload fonts.
+          </Link>
+        </span>
       </Stack>
-      {missingFonts.map(font => (
-        <Stack space="2xsmall" key={font}>
-          <ControlledTextbox name={font} placeholder="Paste font ID from Penpot" />
-          <span>{font}</span>
-        </Stack>
-      ))}
     </Stack>
   );
 };
-
-type ControlledTextboxProps = { name: string; placeholder: string };
-
-const ControlledTextbox = ({ name, placeholder }: ControlledTextboxProps) => {
-  const { control } = useFormContext();
-
-  return (
-    <Controller
-      control={control}
-      name={name}
-      render={({ field: { onChange, onBlur, value } }) => (
-        <Textbox
-          onChange={onChange}
-          onBlur={onBlur}
-          value={value}
-          placeholder={placeholder}
-          variant="border"
-        />
-      )}
-    />
-  );
-};
diff --git a/ui-src/context/useFigma.ts b/ui-src/context/useFigma.ts
index a5272716..9be1f911 100644
--- a/ui-src/context/useFigma.ts
+++ b/ui-src/context/useFigma.ts
@@ -147,12 +147,12 @@ export const useFigma = (): UseFigmaHook => {
     postMessage('cancel');
   };
 
-  const exportPenpot = (data: FormValues) => {
+  const exportPenpot = () => {
     setExporting(true);
     setStep('processing');
     setProcessedItems(0);
 
-    postMessage('export', data);
+    postMessage('export');
   };
 
   useEffect(() => {