update bookignore

.bookignore

@@ -1,5 +1,7 @@
+.github/
 __tests__/
-example/
+examples/
 flow-typed/
 lib/
 scratch/
+src/

examples/colors/.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "airbnb"
+  ]
+}

examples/colors/README.md

@@ -0,0 +1,21 @@
+# Basic Webpack example
+
+## 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/colors
+cd colors
+```
+
+Install the dependencies, build, and link
+```
+npm install
+npm run build
+npm run link-plugin
+```
+
+Then, open Sketch and navigate to `Plugins → react-sketchapp: Basic Webpack Example → Run Plugin`
+
+## The idea behind the example
+
+Using Webpack to build `react-sketchapp` apps requires a little bit of configuration - use this as an example.

examples/colors/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "colors",
+  "private": true,
+  "scripts": {
+    "build": "webpack",
+    "watch": "webpack --watch",
+    "link-plugin": "./symlink-plugin.sh"
+  },
+  "author": "Jon Gold <jon.gold@airbnb.com>",
+  "license": "MIT",
+  "dependencies": {
+    "chroma-js": "^1.2.2",
+    "ramda": "^0.23.0",
+    "react": "^15.4.2",
+    "react-sketchapp": "^0.9.1",
+    "react-test-renderer": "^15.4.1"
+  },
+  "devDependencies": {
+    "babel-core": "^6.18.2",
+    "babel-loader": "^6.2.8",
+    "babel-preset-airbnb": "^2.2.3",
+    "copy-webpack-plugin": "^4.0.1",
+    "webpack": "^2.3.2"
+  }
+}

examples/colors/src/main.js

@@ -0,0 +1,46 @@
+import React, { PropTypes } from 'react';
+import { render, StyleSheet, View } from 'react-sketchapp';
+import chroma from 'chroma-js';
+import { times } from 'ramda';
+
+const styles = StyleSheet.create({
+  container: {
+    width: 480,
+    height: 480,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+  },
+});
+
+const Document = ({ colors, steps }) => {
+  const color = chroma.scale(colors);
+
+  return (
+    <View style={styles.container}>
+      {times(i => color(i / steps).hex(), steps).map((val, i) => (
+        <View
+          name={val}
+          key={val}
+          style={{
+            backgroundColor: val,
+            margin: 2,
+            height: 96 - 2 * i,
+            width: 96 - 2 * i,
+            borderRadius: 2 * i,
+          }}
+        />
+      ))}
+    </View>
+  );
+};
+Document.propTypes = {
+  colors: PropTypes.arrayOf(PropTypes.string),
+  steps: PropTypes.number,
+};
+
+const onRun = (context) => {
+  render(<Document colors={['#01FFD8', '#C137E3', '#8702ED']} steps={50} />, context);
+};
+
+module.exports = onRun;

examples/colors/src/manifest.json

@@ -0,0 +1,21 @@
+{
+  "name": "colors",
+  "author": "Jon Gold",
+  "version": 0.1,
+  "compatibleVersion": 1,
+  "bundleVersion": 1,
+  "disableCocoaScriptPreprocessor": true,
+  "commands": [
+    {
+      "name": "Run Plugin",
+      "identifier": "main",
+      "script": "main.js"
+    }
+  ],
+  "menu": {
+    "title": "react-sketchapp: Generative Colors",
+    "items": [
+      "main"
+    ]
+  }
+}

examples/colors/symlink-plugin.sh

@@ -0,0 +1 @@
+ln -s $(PWD)/colors.sketchplugin ~/Library/Application\ Support/com.bohemiancoding.sketch3/Plugins

examples/colors/webpack.config.js

@@ -0,0 +1,30 @@
+const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+module.exports = {
+  entry: {
+    main: './src/main.js',
+  },
+
+  output: {
+    filename: '[name].js',
+    library: 'onRun',
+    path: path.join(__dirname, 'colors.sketchplugin/Contents/Sketch'),
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+      },
+    ],
+  },
+
+  plugins: [
+    new CopyWebpackPlugin([
+      { from: 'src/manifest.json' },
+    ]),
+  ],
+};