feat(sketch): add sketch package

.prettierignore

@@ -27,6 +27,9 @@ packages/components/css
 packages/components/scss
 packages/components/docs/js
 
+# Sketch
+**/*.sketchplugin/**
+
 # Changelogs
 **/CHANGELOG.md
 

package.json

@@ -94,6 +94,10 @@
       "yarn lerna run lint:staged --scope carbon-components-react",
       "git add"
     ],
+    "*.js,!packages/components/**/*.js,!packages/react/**/*.js": [
+      "yarn format:staged",
+      "git add"
+    ],
     "*.md": [
       "yarn format:staged",
       "git add"

packages/sketch/.gitignore

@@ -0,0 +1 @@
+*.sketchplugin

packages/sketch/README.md

@@ -0,0 +1,103 @@
+# @carbon/sketch
+
+<!-- prettier-ignore-start -->
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+## Table of Contents
+
+- [Getting started (developing)](#getting-started-developing)
+- [Overview](#overview)
+  - [Building sketch plugins](#building-sketch-plugins)
+  - [Project structure](#project-structure)
+- [Reference](#reference)
+- [Tips & Tricks](#tips--tricks)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+<!-- prettier-ignore-end -->
+
+## Getting started (developing)
+
+When working with this package, you will need to follow a couple of steps to get
+started. It's important that you have Sketch installed on your system before
+attempting any of these steps.
+
+1. Run `cd packages/sketch` to go into the package folder
+2. Run `yarn build` to build out the initial plugin
+3. Run `yarn skpm:link` to link the plugin to your Sketch plugin folder
+
+Afterwards, you can continue development by running `yarn develop`.
+
+## Overview
+
+### Building sketch plugins
+
+The output of `@carbon/sketch` is a plugin at
+`packages/sketch/carbon-elements.sketchplugin`. This artifact is generated by
+running `yarn build`. Under the hood, we make use of a tool called
+[`skpm`](https://github.com/skpm/skpm) that allows us to write our Sketch
+plugins using modern JavaScript language features and modules.
+
+When using `skpm`, we add a field named `skpm` to our `package.json` so that it
+knows details about our plugin, most notably the name of the plugin and a
+reference to a `manifest.json` file. This file lists out the capabilities of the
+sketch plugin under the `commands` field, and also defines the menu structure th
+at should appear for this plugin under the Plugins menu in Sketch.
+
+Under the `commands` field, we list out commands and define a path to a `script`
+and name the `handler` that should be called when running the command. In other
+words, if we have a file like:
+
+```js
+// commands/greeting.js
+import sketch from 'sketch';
+
+export function greeting() {
+  sketch.UI.message('Hello world!');
+}
+```
+
+Then in our `manifest.json` we would create an entry under `commands` like:
+
+```json
+{
+  "commands": [
+    {
+      "name": "The name of the command"
+      "identifier": "the.command.identifier",
+      "script": "commands/greeting.",
+      "handler": "greeting"
+    }
+  ]
+}
+```
+
+_Note: We chose the `greeting` handler because that was what was exported in
+`export function greeting() {}`._
+
+We later use the `identifier` field in our menu to reference the command.
+
+### Project structure
+
+```bash
+packages/sketch
+├── package.json
+└── src
+    ├── commands       # Implementation of commands in `manifest.json`
+    ├── manifest.json  # Define capabilities of Sketch plugin
+    ├── sharedStyles   # Methods for syncing shared layer and text styles
+    └── tools          # Tools for interacting with the Sketch DOM and styles
+```
+
+## Reference
+
+- [API Reference](https://developer.sketch.com/reference/api) for the `sketch`
+  module
+- [`Sketch-Headers`](https://github.com/abynim/Sketch-Headers) to determine
+  methods on internal objects
+- [Plugin bundle guide](https://developer.sketch.com/guides/plugin-bundles/) for
+  structuring a plugin and its menus
+
+## Tips & Tricks
+
+- Use `yarn skpm log -f` to tail logs from the Sketch plugin. Useful if you want
+  to debug using `console.log` layer is removed

packages/sketch/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@carbon/sketch",
+  "description": "Tooling for generating a sketch plugin to bring code to design",
+  "private": true,
+ "version": "10.2.0",
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "cross-env NODE_ENV=production skpm-build",
+    "clean": "rimraf carbon-elements.sketchplugin",
+    "develop": "cross-env NODE_ENV=development skpm-build --watch",
+    "skpm:link": "skpm-link"
+  },
+  "dependencies": {
+    "@babel/polyfill": "^7.4.4",
+    "@carbon/colors": "10.2.0",
+    "@carbon/icon-helpers": "10.2.0",
+    "@carbon/icons": "10.2.0",
+    "@carbon/themes": "10.2.0",
+    "@carbon/type": "10.2.0",
+    "@skpm/builder": "^0.7.0",
+    "color-string": "^1.5.3",
+    "skpm": "^1.2.0"
+  },
+  "devDependencies": {
+    "cross-env": "^5.2.0",
+    "rimraf": "^2.6.3"
+  },
+  "skpm": {
+    "name": "Carbon Elements",
+    "manifest": "src/manifest.json",
+    "main": "carbon-elements.sketchplugin",
+    "assets": []
+  }
+}

packages/sketch/src/commands/colors/generate.js

@@ -0,0 +1,94 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Document, Rectangle, ShapePath, SymbolMaster } from 'sketch/dom';
+import { command } from '../command';
+import { syncColorStyles } from '../../sharedStyles/colors';
+import { findOrCreatePage, selectPage } from '../../tools/page';
+import { groupByKey } from '../../tools/grouping';
+
+const ARTBOARD_WIDTH = 40;
+const ARTBOARD_HEIGHT = 40;
+const ARTBOARD_MARGIN = 8;
+
+export function generate() {
+  command('commands/colors/generate', () => {
+    const document = Document.getSelectedDocument();
+    const page = selectPage(findOrCreatePage(document, 'Color'));
+    const sharedStyles = syncColorStyles(document);
+    const { blackAndWhite, colors, support } = groupByKey(
+      sharedStyles,
+      sharedStyle => {
+        const { name } = sharedStyle;
+        const [category, swatch, grade] = name.split('/');
+        switch (swatch) {
+          case 'black':
+          case 'white':
+            return 'blackAndWhite';
+          case 'yellow':
+          case 'orange':
+            return 'support';
+          default:
+            return 'colors';
+        }
+      }
+    );
+
+    let X_OFFSET = 0;
+    let Y_OFFSET = 0;
+
+    for (const sharedStyle of blackAndWhite) {
+      createSymbolFromSharedStyle(sharedStyle, page, X_OFFSET, Y_OFFSET);
+      X_OFFSET = X_OFFSET + ARTBOARD_WIDTH + ARTBOARD_MARGIN;
+    }
+
+    X_OFFSET = 0;
+    Y_OFFSET = Y_OFFSET + ARTBOARD_HEIGHT + ARTBOARD_MARGIN;
+
+    const swatches = groupByKey(colors, sharedStyle => {
+      const [category, swatch, grade] = sharedStyle.name.split('/');
+      return swatch;
+    });
+
+    for (const swatch of Object.keys(swatches)) {
+      for (const sharedStyle of swatches[swatch]) {
+        createSymbolFromSharedStyle(sharedStyle, page, X_OFFSET, Y_OFFSET);
+        X_OFFSET = X_OFFSET + ARTBOARD_WIDTH + ARTBOARD_MARGIN;
+      }
+
+      X_OFFSET = 0;
+      Y_OFFSET = Y_OFFSET + ARTBOARD_HEIGHT + ARTBOARD_MARGIN;
+    }
+
+    for (const sharedStyle of support) {
+      createSymbolFromSharedStyle(sharedStyle, page, X_OFFSET, Y_OFFSET);
+      X_OFFSET = X_OFFSET + ARTBOARD_WIDTH + ARTBOARD_MARGIN;
+    }
+  });
+}
+
+function createSymbolFromSharedStyle(sharedStyle, parent, offsetX, offsetY) {
+  const [category, swatch, grade] = sharedStyle.name.split('/');
+
+  const colorName = grade ? `${swatch}/${swatch}-${grade}` : swatch;
+  const rectangle = new ShapePath({
+    name: 'Color',
+    frame: new Rectangle(0, 0, ARTBOARD_WIDTH, ARTBOARD_HEIGHT),
+    shapeType: ShapePath.ShapeType.Rectangle,
+    sharedStyleId: sharedStyle.id,
+    style: sharedStyle.style,
+  });
+
+  const artboard = new SymbolMaster({
+    parent,
+    name: `${category}/${colorName}`,
+    frame: new Rectangle(offsetX, offsetY, ARTBOARD_WIDTH, ARTBOARD_HEIGHT),
+    layers: [rectangle],
+  });
+
+  return artboard;
+}

packages/sketch/src/commands/colors/index.js

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { sync } from './sync';
+export { generate } from './generate';

packages/sketch/src/commands/colors/sync.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Document } from 'sketch/dom';
+import { command } from '../command';
+import { syncColorStyles } from '../../sharedStyles/colors';
+
+export function sync() {
+  command('commands/colors/sync', () => {
+    const document = Document.getSelectedDocument();
+    syncColorStyles(document);
+  });
+}

packages/sketch/src/commands/command.js

@@ -0,0 +1,26 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import sketch from 'sketch';
+
+/**
+ * Wrap a given command function for consistent UI messages and development
+ * runtime logging.
+ * @param {string} name - the name of the command
+ * @param {Function} fn - the function to call to run the command
+ */
+export function command(name, fn) {
+  const start = Date.now();
+
+  sketch.UI.message('Hi 👋 We are still working on this! 🚧');
+  fn();
+  sketch.UI.message('Done! 🎉');
+
+  if (process.env.NODE_ENV === 'development') {
+    console.log(`[Carbon Elements] ${name}: Done in ${Date.now() - start}ms`);
+  }
+}