Symbol support

__tests__/components/RedBox.js

@@ -13,4 +13,10 @@ describe('<RedBox />', () => {
       expect(tree).toMatchSnapshot();
     }
   });
+
+  it('renders string errors', () => {
+    const tree = renderer.create(<RedBox error={'String only error'} />).toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
 });

__tests__/components/__snapshots__/RedBox.js.snap

@@ -141,3 +141,31 @@ exports[`<RedBox /> renders simple errors 1`] = `
   </view>
 </view>
 `;
+
+exports[`<RedBox /> renders string errors 1`] = `
+<view
+  name="RedBox"
+  style={
+    Object {
+      "backgroundColor": "rgb(204, 0, 0)",
+      "paddingBottom": 10,
+      "paddingLeft": 10,
+      "paddingRight": 10,
+      "paddingTop": 10,
+      "width": 480,
+    }
+  }>
+  <text
+    name="Message"
+    style={
+      Object {
+        "color": "white",
+        "fontSize": 16,
+        "fontWeight": "bold",
+        "lineHeight": 19.2,
+      }
+    }>
+    Error: String only error
+  </text>
+</view>
+`;

__tests__/jsonUtils/layerGroup.js

@@ -2,11 +2,12 @@ import layerGroup from '../../src/jsonUtils/layerGroup';
 
 describe('layer group', () => {
   it('is correctly constructed', () => {
-    const group = layerGroup(100, 200, 300, 400);
+    const group = layerGroup(100, 200, 300, 400, 0.5);
 
     expect(group).toHaveProperty('frame.x', 100);
     expect(group).toHaveProperty('frame.y', 200);
     expect(group).toHaveProperty('frame.width', 300);
     expect(group).toHaveProperty('frame.height', 400);
+    expect(group).toHaveProperty('style.contextSettings.opacity', 0.5);
   });
 });

__tests__/jsonUtils/models.js

@@ -1,4 +1,11 @@
-import { generateID, makeColorFromCSS, makeColorFill, makeRect } from '../../src/jsonUtils/models';
+import {
+  generateID,
+  makeColorFromCSS,
+  makeColorFill,
+  makeRect,
+  makeSymbolInstance,
+  makeSymbolMaster,
+} from '../../src/jsonUtils/models';
 
 describe('generateID', () => {
   it('is unique', () => {
@@ -80,3 +87,29 @@ describe('makeRect', () => {
     expect(group).toHaveProperty('height', 400);
   });
 });
+
+describe('makeSymbolInstance', () => {
+  it('is correctly constructed', () => {
+    const instance = makeSymbolInstance(
+      makeRect(0, 0, 100, 100),
+      'this is the symbol id',
+      'this is the name'
+    );
+
+    expect(instance).toHaveProperty('symbolID', 'this is the symbol id');
+    expect(instance).toHaveProperty('name', 'this is the name');
+  });
+});
+
+describe('makeSymbolMaster', () => {
+  it('is correctly constructed', () => {
+    const master = makeSymbolMaster(
+      makeRect(0, 0, 100, 100),
+      'this is the symbol id',
+      'this is the name'
+    );
+
+    expect(master).toHaveProperty('symbolID', 'this is the symbol id');
+    expect(master).toHaveProperty('name', 'this is the name');
+  });
+});

__tests__/jsonUtils/shapeLayers.js

@@ -37,6 +37,7 @@ describe('makeRectShapeLayer', () => {
     expect(shapeLayer).toHaveProperty('frame.y', 200);
     expect(shapeLayer).toHaveProperty('frame.width', 300);
     expect(shapeLayer).toHaveProperty('frame.height', 400);
+    expect(shapeLayer).toHaveProperty('fixedRadius', 10);
   });
 });
 

__tests__/utils/compose.js

@@ -0,0 +1,10 @@
+import compose from '../../src/utils/compose';
+
+test('simple example', () => {
+  const toUpperCase = a => a.toUpperCase();
+  const slice = a => a.slice(0, 5);
+  const reverse = a => a.split('').reverse().join('');
+  const composed = compose(reverse, slice, toUpperCase);
+
+  expect(composed('hello world')).toEqual('OLLEH');
+});

docs/guides/data-fetching.md

@@ -6,10 +6,7 @@ Pull real data from an API with `fetch` or GraphQL.
 
 [Full example](https://github.com/airbnb/react-sketchapp/tree/master/examples/foursquare-maps)
 
-First, add the [Sketch `fetch` polyfill](https://github.com/mathieudutour/sketch-module-fetch-polyfill) to your projects
-```
-npm install sketch-module-fetch-polyfill --save
-```
+`skpm` automatically provides the [Sketch `fetch` polyfill](https://github.com/mathieudutour/sketch-module-fetch-polyfill) — just use `fetch` as usual.
 
 ```js
 import fetch from 'sketch-module-fetch-polyfill'

examples/basic-setup/README.md

@@ -26,6 +26,6 @@ Then, open Sketch and navigate to `Plugins → react-sketchapp: Basic skpm Examp
 
 ## The idea behind the example
 
-Using skpm to build `react-sketchapp` apps requires a little bit of configuration - use this as an example.
+[`skpm`](https://github.com/sketch-pm/skpm) is the easiest way to build `react-sketchapp` projects - this is a minimal example of it in use.
 
-![examples-basic](https://cloud.githubusercontent.com/assets/591643/24778192/1f0684ec-1ade-11e7-866b-b11bb60ac109.png)
+![examples-basic](https://cloud.githubusercontent.com/assets/591643/24778192/1f0684ec-1ade-11e7-866b-b11bb60ac109.png)

examples/basic-setup/package.json

@@ -14,7 +14,7 @@
   "author": "Jon Gold <jon.gold@airbnb.com>",
   "license": "MIT",
   "devDependencies": {
-    "skpm": "^0.8.0"
+    "skpm": "^0.9.0"
   },
   "dependencies": {
     "chroma-js": "^1.2.2",

examples/colors/package.json

@@ -22,6 +22,6 @@
     "webpack-shell-plugin": "^0.5.0"
   },
   "devDependencies": {
-    "skpm": "^0.8.0"
+    "skpm": "^0.9.0"
   }
 }

examples/foursquare-maps/README.md

@@ -38,6 +38,6 @@ Open a browser to `http://localhost:3000`
 
 Creating maps with live data into Sketch is notoriously difficult — until now ;)
 
-This example is created with `react-primitives` and renders simultaneously to Sketch & Web, and polyfills `fetch` in Sketch with [`sketch-module-fetch-polyfill`](https://github.com/mathieudutour/sketch-module-fetch-polyfill).
+This example is created with `react-primitives` and renders simultaneously to Sketch & Web — maps are provided by [react-primitives-google-static-map](https://www.npmjs.com/package/react-primitives-google-static-map).
 
-![foursquare-maps](https://cloud.githubusercontent.com/assets/591643/25052095/f666928e-2104-11e7-805c-a3c73ffcabcb.png)
+![foursquare-maps](https://cloud.githubusercontent.com/assets/591643/25052095/f666928e-2104-11e7-805c-a3c73ffcabcb.png)

examples/foursquare-maps/package.json

@@ -23,10 +23,9 @@
     "react-primitives": "^0.3.4",
     "react-primitives-google-static-map": "^1.0.1",
     "react-sketchapp": "^0.10.0",
-    "react-test-renderer": "^15.4.1",
-    "sketch-module-fetch-polyfill": "0.1.2"
+    "react-test-renderer": "^15.4.1"
   },
   "devDependencies": {
-    "skpm": "^0.8.0"
+    "skpm": "^0.9.0"
   }
 }

examples/foursquare-maps/src/getVenues.js

@@ -1,6 +1,6 @@
 import param from 'jquery-param';
 
-export default (platformFetch) => {
+export default () => {
   const query = 'burger';
   const latitude = '37.773972';
   const longitude = '-122.431297';
@@ -15,7 +15,7 @@ export default (platformFetch) => {
     client_secret: 'Q10HUP5APBQOYNTPABSH4CSKRGEAI2CXIYULYGG0EZYUUWUZ',
   });
 
-  return platformFetch(`https://api.foursquare.com/v2/venues/search?${params}`)
+  return fetch(`https://api.foursquare.com/v2/venues/search?${params}`)
     .then(res => res.json())
     .then(data => ({
       venues: data.response.venues,

examples/foursquare-maps/src/main.js

@@ -1,11 +1,10 @@
 import React from 'react';
-import fetch from 'sketch-module-fetch-polyfill';
 import { Artboard, render } from 'react-sketchapp';
 import App from './App';
 import getVenues from './getVenues';
 
 export default (context) => {
-  getVenues(fetch).then(({
+  getVenues().then(({
     venues,
     latitude,
     longitude,

examples/foursquare-maps/src/web.js

@@ -3,7 +3,7 @@ import { render } from 'react-dom';
 import App from './App';
 import getVenues from './getVenues';
 
-getVenues(fetch).then(({
+getVenues().then(({
   venues,
   latitude,
   longitude,

examples/profile-cards-graphql/package.json

@@ -16,10 +16,9 @@
     "gql-sketch": "^1.0.1",
     "react": "^15.4.2",
     "react-sketchapp": "^0.10.0",
-    "react-test-renderer": "^15.4.2",
-    "sketch-module-fetch-polyfill": "^0.1.3"
+    "react-test-renderer": "^15.4.2"
   },
   "devDependencies": {
-    "skpm": "^0.8.0"
+    "skpm": "^0.9.0"
   }
 }

examples/profile-cards-graphql/src/main.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { render, Text, View } from 'react-sketchapp';
 import Client from 'gql-sketch';
-import 'sketch-module-fetch-polyfill';
 import type { User } from './types';
 import { fonts, spacing } from './designSystem';
 import Profile from './components/Profile';

examples/profile-cards-primitives/package.json

@@ -23,6 +23,6 @@
     "react-test-renderer": "^15.4.1"
   },
   "devDependencies": {
-    "skpm": "^0.8.0"
+    "skpm": "^0.9.0"
   }
 }

examples/profile-cards-react-with-styles/package.json

@@ -19,6 +19,6 @@
     "react-with-styles": "^1.4.0"
   },
   "devDependencies": {
-    "skpm": "^0.8.0"
+    "skpm": "^0.9.0"
   }
 }

examples/profile-cards/package.json

@@ -18,6 +18,6 @@
     "react-test-renderer": "^15.4.2"
   },
   "devDependencies": {
-    "skpm": "^0.8.0"
+    "skpm": "^0.9.0"
   }
 }

examples/styleguide/package.json

@@ -19,6 +19,6 @@
     "react-test-renderer": "^15.4.2"
   },
   "devDependencies": {
-    "skpm": "^0.8.0"
+    "skpm": "^0.9.0"
   }
 }

examples/symbols/README.md

@@ -0,0 +1,29 @@
+# Symbol Support
+
+## How to use
+Download the example or [clone the repo](http://github.com/airbnb/react-sketchapp):
+```
+curl https://codeload.github.com/airbnb/react-sketchapp/tar.gz/master | tar -xz --strip=2 react-sketchapp-master/examples/symbols
+cd symbols
+```
+
+Install the dependencies
+```
+npm install
+```
+
+Run with live reloading in Sketch
+```
+npm run render
+```
+
+Or, to install as a Sketch plugin:
+```
+npm run build
+npm run link-plugin
+```
+Then, open Sketch and navigate to `Plugins → react-sketchapp: Symbol Support`
+
+## The idea behind the example
+
+[`skpm`](https://github.com/sketch-pm/skpm) is the easiest way to build `react-sketchapp` projects - this is a minimal example of it in use.

examples/symbols/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "symbols",
+  "version": "1.0.0",
+  "description": "",
+  "main": "symbols.sketchplugin",
+  "manifest": "src/manifest.json",
+  "scripts": {
+    "build": "skpm build",
+    "watch": "skpm build --watch",
+    "render": "skpm build --watch --run",
+    "render:once": "skpm build --run",
+    "link-plugin": "skpm link"
+  },
+  "author": "Jon Gold <jon.gold@airbnb.com>",
+  "license": "MIT",
+  "devDependencies": {
+    "skpm": "^0.9.0"
+  },
+  "dependencies": {
+    "chroma-js": "^1.2.2",
+    "prop-types": "^15.5.8",
+    "react": "^15.4.2",
+    "react-sketchapp": "^0.10.0",
+    "react-test-renderer": "^15.4.2"
+  }
+}

examples/symbols/src/manifest.json

@@ -0,0 +1,17 @@
+{
+	"compatibleVersion": 3,
+	"bundleVersion": 1,
+	"commands": [
+		{
+			"name": "react-sketchapp: Symbol Support",
+			"identifier": "main",
+			"script": "./my-command.js"
+		}
+	],
+	"menu": {
+		"isRoot": true,
+		"items": [
+			"main"
+		]
+	}
+}