Remove custom fonts form (#243)

* remove custom fonts form

* changeset

* changeset

.changeset/fair-boxes-laugh.md

@@ -0,0 +1,5 @@
+---
+'penpot-exporter': minor
+---
+
+Remove custom font form since penpot now matches the fonts by fontName and fontFamily

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') {

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)

plugin-src/translators/text/font/custom/customFontIds.ts

@@ -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);
-};

plugin-src/translators/text/font/custom/index.ts

@@ -1,3 +1,2 @@
-export * from './customFontIds';
 export * from './translateCustomFont';
 export * from './translateFontVariantId';

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
   };

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"
-        />
-      )}
-    />
-  );
-};

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(() => {