Merge pull request #511 from airbnb/f/fix-font

Author: mathieudutour

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 This project adheres to [Semantic Versioning](http://semver.org/). Every release, along with the migration instructions, is documented on the Github [Releases](https://github.com/airbnb/react-sketchapp/releases) page.
 
+## Version 3.2.3
+
+- Fix getting the font name (#510)
+
 ## Version 3.2.2
 
 - Fix getting the default bridge on NodeJS
@@ -15,7 +19,7 @@ This project adheres to [Semantic Versioning](http://semver.org/). Every release
 
 - Add a new `useWindowDimensions` hook for Artboard viewport (#501)
 
-## Version 3.1.2
+## Version 3.1.3
 
 - Add proptypes for Text
 - Allow `fontWeigth` to be a number

__tests__/jest/sharedStyles/TextStyles.ts

@@ -132,7 +132,7 @@ describe('create', () => {
       const input = [...whitelist, ...blacklist].reduce(
         (acc, key) => ({
           ...acc,
-          [key]: true,
+          [key]: '',
         }),
         {},
       );
@@ -142,7 +142,7 @@ describe('create', () => {
       const firstStoredStyle = res[Object.keys(res)[0]].cssStyle;
 
       whitelist.forEach((key) => {
-        expect(firstStoredStyle).toHaveProperty(key, true);
+        expect(firstStoredStyle).toHaveProperty(key, '');
       });
 
       blacklist.forEach((key) => {

examples/basic-setup/src/my-command.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { render, Artboard, Text, View } from 'react-sketchapp';
+import { render, Artboard, Text, View } from '../../../lib';
 import chroma from 'chroma-js';
 
 // take a hex and give us a nice text color to put over it
@@ -23,7 +23,10 @@ const Swatch = ({ name, hex }) => (
       padding: 8,
     }}
   >
-    <Text name="Swatch Name" style={{ color: textColor(hex), fontWeight: 'bold' }}>
+    <Text
+      name="Swatch Name"
+      style={{ color: textColor(hex), fontWeight: 'bold', fontFamily: 'Helvetica' }}
+    >
       {name}
     </Text>
     <Text name="Swatch Hex" style={{ color: textColor(hex) }}>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-sketchapp",
-  "version": "3.2.2",
+  "version": "3.2.3",
   "description": "A React renderer for Sketch.app",
   "sideEffects": false,
   "main": "lib/index.js",

src/jsonUtils/textLayers.ts

@@ -57,7 +57,7 @@ const makeFontDescriptor = (bridge: PlatformBridge) => (
 ): FileFormat.FontDescriptor => ({
   _class: 'fontDescriptor',
   attributes: {
-    name: bridge.findFontName(String(style)), // will default to the system font
+    name: bridge.findFontName(style), // will default to the system font
     size: style.fontSize || 14,
   },
 });

src/platformBridges/sketch/findFontName.ts

@@ -192,5 +192,5 @@ export const findFont = (style: TextStyle): NSFont => {
 
 export function findFontName(style: TextStyle): string {
   const font = findFont(style);
-  return font.fontDescriptor().postscriptName();
+  return String(font.fontDescriptor().postscriptName());
 }