wip

plugin-src/transformers/transformDocumentNode.ts

@@ -112,8 +112,8 @@ const getTextStyles = async (): Promise<Record<string, TypographyStyle>> => {
     data: 'typographies'
   });
 
-  for (const [styleId] of stylesToFetch) {
-    const figmaStyle = await figma.getStyleByIdAsync(styleId);
+  for (const [styleId, style] of stylesToFetch) {
+    const figmaStyle = style ?? (await figma.getStyleByIdAsync(styleId));
     if (figmaStyle && isTextStyle(figmaStyle)) {
       styles[styleId] = translateTextStyles(figmaStyle);
     }

plugin-src/translators/text/translateTextStyles.ts

@@ -2,7 +2,8 @@ import {
   translateFontStyle,
   translateLetterSpacing,
   translateLineHeight,
-  translateTextDecoration
+  translateTextDecoration,
+  translateTextTransform
 } from '@plugin/translators/text/properties';
 
 import { TypographyStyle } from '@ui/lib/types/shapes/textShape';
@@ -14,15 +15,18 @@ export const translateTextStyles = (figmaStyle: TextStyle): TypographyStyle => {
     typography: {}
   };
 
-  const path = (figmaStyle.remote ? 'Remote / ' : '') + figmaStyle.name;
+  const path = figmaStyle.remote ? 'Remote / ' : '';
+
+  const lineHeight = translateLineHeight(figmaStyle);
 
   typographyStyle.textStyle = {
     fontFamily: figmaStyle.fontName.family,
     fontSize: figmaStyle.fontSize.toString(),
     fontStyle: translateFontStyle(figmaStyle.fontName.style),
     textDecoration: translateTextDecoration(figmaStyle),
     letterSpacing: translateLetterSpacing(figmaStyle),
-    lineHeight: translateLineHeight(figmaStyle)
+    textTransform: translateTextTransform(figmaStyle),
+    ...(lineHeight ? { lineHeight } : {})
   };
   typographyStyle.typography = {
     path,

ui-src/lib/types/penpotFile.ts

@@ -24,9 +24,9 @@ export interface PenpotFile {
   createPath(path: PathShape): Uuid;
   createText(options: TextShape): Uuid;
   addLibraryColor(color: Color): void;
-  updateLibraryColor(color: Color): void;
-  deleteLibraryColor(color: Color): void;
-  // addLibraryTypography(typography: any): void;
+  // updateLibraryColor(color: Color): void;
+  // deleteLibraryColor(color: Color): void;
+  addLibraryTypography(typography: any): void;
   // deleteLibraryTypography(typography: any): void;
   startComponent(component: ComponentShape): Uuid;
   finishComponent(): void;

ui-src/lib/types/utils/typography.ts

@@ -1,8 +1,9 @@
-import { TextTypography } from '@ui/lib/types/shapes/textShape';
+import { FontId, TextTypography } from '@ui/lib/types/shapes/textShape';
 import { Uuid } from '@ui/lib/types/utils/uuid';
 
-export type Typography = TextTypography & {
-  id?: Uuid;
-  name?: string;
-  path?: string;
-};
+export type Typography = TextTypography &
+  FontId & {
+    id?: Uuid;
+    name?: string;
+    path?: string;
+  };

ui-src/parser/creators/buildFile.ts

@@ -4,7 +4,12 @@ import { sendMessage } from '@ui/context';
 import { PenpotFile } from '@ui/lib/types/penpotFile';
 import { PenpotPage } from '@ui/lib/types/penpotPage';
 import { idLibrary } from '@ui/parser';
-import { createColorsLibrary, createComponentsLibrary, createPage } from '@ui/parser/creators';
+import {
+  createColorsLibrary,
+  createComponentsLibrary,
+  createPage,
+  createTextLibrary
+} from '@ui/parser/creators';
 import { uiComponents } from '@ui/parser/libraries';
 
 export const buildFile = async (file: PenpotFile, children: PenpotPage[]) => {
@@ -35,6 +40,7 @@ export const buildFile = async (file: PenpotFile, children: PenpotPage[]) => {
   }
 
   await createColorsLibrary(file);
+  await createTextLibrary(file);
 
   await createComponentsLibrary(file);
 

ui-src/parser/creators/createText.ts

@@ -13,8 +13,6 @@ export const createText = (
   shape.content = parseContent(shape.content);
   shape.strokes = symbolStrokes(shape.strokes);
 
-  console.log(shape);
-
   file.createText(shape);
 };
 
@@ -35,20 +33,34 @@ const parseContent = (content: TextContent | undefined): TextContent | undefined
 };
 
 const parseTextStyle = (text: Paragraph | TextNode, textStyleId?: string): Paragraph | TextNode => {
-  const textStyle = textStyleId
-    ? uiTextLibraries.get(textStyleId)?.textStyle
-    : {
-        fontFamily: text.fontFamily,
-        fontSize: text.fontSize,
-        fontStyle: text.fontStyle,
-        textDecoration: text.textDecoration,
-        letterSpacing: text.letterSpacing,
-        lineHeight: text.lineHeight
-      };
-
-  return {
-    ...textStyle,
+  const commonTextAttrs = {
     ...text,
     fills: symbolFills(text.fillStyleId, text.fills)
   };
+
+  if (textStyleId === undefined) {
+    return commonTextAttrs;
+  }
+
+  let textLibrary = uiTextLibraries.get(textStyleId);
+  if (textLibrary === undefined) {
+    return commonTextAttrs;
+  }
+
+  textLibrary = {
+    textStyle: {
+      ...textLibrary.textStyle,
+      fontId: text.fontId,
+      fontVariantId: text.fontVariantId,
+      fontWeight: text.fontWeight
+    },
+    typography: textLibrary.typography,
+    name: textLibrary.name
+  };
+  uiTextLibraries.register(textStyleId, textLibrary);
+
+  return {
+    ...textLibrary.textStyle,
+    ...commonTextAttrs
+  };
 };

ui-src/parser/creators/createTextLibrary.ts

@@ -0,0 +1,44 @@
+import { sleep } from '@plugin/utils/sleep';
+
+import { sendMessage } from '@ui/context';
+import { PenpotFile } from '@ui/lib/types/penpotFile';
+import { uiTextLibraries } from '@ui/parser/libraries/UiTextLibraries';
+
+export const createTextLibrary = async (file: PenpotFile) => {
+  let librariesBuilt = 1;
+  const libraries = uiTextLibraries.all();
+
+  sendMessage({
+    type: 'PROGRESS_TOTAL_ITEMS',
+    data: libraries.length
+  });
+
+  sendMessage({
+    type: 'PROGRESS_STEP',
+    data: 'typoLibraries'
+  });
+
+  for (const library of libraries) {
+    const lineHeight = library.textStyle.lineHeight;
+    file.addLibraryTypography({
+      ...library.typography,
+      id: library.textStyle.typographyRefId,
+      fontId: library.textStyle.fontId,
+      fontVariantId: library.textStyle.fontVariantId,
+      letterSpacing: library.textStyle.letterSpacing,
+      fontWeight: library.textStyle.fontWeight,
+      fontStyle: library.textStyle.fontStyle,
+      fontFamily: library.textStyle.fontFamily,
+      fontSize: library.textStyle.fontSize,
+      textTransform: library.textStyle.textTransform,
+      ...(lineHeight ? { lineHeight } : {})
+    });
+
+    sendMessage({
+      type: 'PROGRESS_PROCESSED_ITEMS',
+      data: librariesBuilt++
+    });
+
+    await sleep(0);
+  }
+};

ui-src/parser/creators/index.ts

@@ -12,3 +12,4 @@ export * from './createPage';
 export * from './createPath';
 export * from './createRectangle';
 export * from './createText';
+export * from './createTextLibrary';