allow tokens from text node

theemo-tokens · Apr 10, 2020 · e0a0f35 · e0a0f35
1 parent 185fe4e
commit e0a0f35
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 16 deletions.
diff --git a/src/sync/reader/figma/config.ts b/src/sync/reader/figma/config.ts
@@ -1,5 +1,5 @@
 import { ReaderSource } from '../config';
-import { Style } from 'figma-api';
+import { Style, Node } from 'figma-api';
 
 export default interface FigmaReaderConfig {
   source: ReaderSource.Figma;
@@ -8,7 +8,9 @@ export default interface FigmaReaderConfig {
   referencer?: ReferencerConfig;
 
   isTokenByStyle?: (style: Style) => boolean;
-  isTokenByNode?: (node: Node) => boolean;
+  isTokenByText?: (node: Node<'TEXT'>) => boolean;
+  getNameFromText?: (node: Node<'TEXT'>) => string;
+  getValueFromText?: (node: Node<'TEXT'>) => string;
 }
 
 // Referencer Options

diff --git a/src/sync/reader/figma/parser.ts b/src/sync/reader/figma/parser.ts
@@ -62,9 +62,9 @@ export default class FigmaParser {
   }
 
   private parseNode(node: Node) {
-    // if (node.type === 'TEXT') {
-    //   this.parseTextNode(node as Node<'TEXT'>);
-    // }
+    if (node.type === 'TEXT') {
+      this.parseTextNode(node as Node<'TEXT'>);
+    }
 
     if (isVectorNode(node)) {
       this.parseVectorNode(node as Node<'VECTOR'>);
@@ -77,19 +77,15 @@ export default class FigmaParser {
     }
   }
 
-  private getCategoryFromType(type: string) {
-    // 'FILL' | 'STROKE' | 'TEXT' | 'EFFECT' | 'GRID'
-    switch (type.toLowerCase()) {
-      case 'fill':
-      case 'stroke':
-        return 'color';
+  private parseTextNode(node: Node<'TEXT'>) {
+    if (!this.isTokenByText(node)) {
+      return;
+    }
 
-      // case 'TEXT':
-      //   return 'typography';
+    const token = this.createToken(this.getNameFromText(node));
+    token.value = this.getValueFromText(node);
 
-      default:
-        return type.toLowerCase();
-    }
+    this.tokens.add(token);
   }
 
   private parseVectorNode(node: Node<'VECTOR'>) {
@@ -145,7 +141,34 @@ export default class FigmaParser {
     };
   }
 
+  private isTokenByText(node: Node<'TEXT'>) {
+    return this.config.isTokenByText?.(node) ?? false;
+  }
+
   private isTokenByStyle(style: Style) {
     return this.config.isTokenByStyle?.(style) ?? false;
   }
+
+  private getNameFromText(node: Node<'TEXT'>) {
+    return this.config.getNameFromText?.(node) ?? node.name;
+  }
+
+  private getValueFromText(node: Node<'TEXT'>) {
+    return this.config.getValueFromText?.(node) ?? node.characters;
+  }
+
+  private getCategoryFromType(type: string) {
+    // 'FILL' | 'STROKE' | 'TEXT' | 'EFFECT' | 'GRID'
+    switch (type.toLowerCase()) {
+      case 'fill':
+      case 'stroke':
+        return 'color';
+
+      // case 'TEXT':
+      //   return 'typography';
+
+      default:
+        return type.toLowerCase();
+    }
+  }
 }