feat(sketch): add sketch package with color generation

packages/sketch/README.md

@@ -1,8 +1,29 @@
-## Usage
-
-- `yarn skpm:link` to link
-- `yarn develop`
-- `yarn skpm log -f` to tail logs
-- https://developer.sketch.com/guides/plugin-bundles/
-- When removing layers, start at th e end as the indices get reordered each time
-  a layer is removed
+# @carbon/sketch
+
+## 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`.
+
+## References
+
+- [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`
+- When removing layers, start at th end as the indices get reordered each time a
+  layer is removed

packages/sketch/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "sketch",
+  "name": "@carbon/sketch",
   "private": true,
   "version": "10.2.0",
   "license": "Apache-2.0",

packages/sketch/src/colors.js

@@ -11,48 +11,51 @@ import {
   Style,
   SymbolMaster,
 } from 'sketch/dom';
+import { findOrCreatePage } from './tools/page';
+
+const { black, white, orange, yellow, ...swatches } = colors;
+const colorNames = Object.keys(colors);
+const formattedSwatchNames = colorNames.reduce(
+  (acc, key, i) => ({
+    ...acc,
+    [formatTokenName(key)]: colorNames[i],
+  }),
+  {}
+);
 
 export function render(context) {
   sketch.UI.message('Hi 👋 We are still working on this! 🚧');
 
-  // const sharedStyle = SharedStyle.fromStyle({
-  // name: 'test-01',
-  // style: {
-  // fills: [
-  // {
-  // color: '#000000',
-  // fillType: Style.FillType.Color,
-  // },
-  // ],
-  // },
-  // document: context.document,
-  // });
+  const layerStyles = context.document.layerStyles();
+  const sharedStyles = layerStyles.sharedStyles();
 
-  console.log(context.document.documentData().layerStyles());
-  return;
+  for (let i = sharedStyles.count() - 1; i >= 0; i--) {
+    const sharedStyle = sharedStyles.objectAtIndex(i);
+    const name = sharedStyle.name();
+    const parts = name.split('/');
 
-  const PAGE_NAME = 'Color';
-  let [page] = Array.from(context.document.pages()).filter(page => {
-    return '' + page.name() === PAGE_NAME;
-  });
+    if (parts.length !== 3) {
+      continue;
+    }
 
-  if (!page) {
-    page = new Page({
-      name: PAGE_NAME,
-      parent: context.document,
-    });
-  }
+    const [namespace, swatch, grade] = parts;
+    if (namespace !== 'color') {
+      continue;
+    }
 
-  page.selected = true;
+    if (!formattedSwatchNames[swatch]) {
+      continue;
+    }
 
-  if (Array.isArray(page.layers) && page.layers.length !== 0) {
-    for (let i = page.layers().count() - 1; i >= 0; i--) {
-      const layer = page.layers().objectAtIndex(i);
-      layer.removeFromParent();
+    const formattedSwatchName = formattedSwatchNames[swatch];
+
+    if (colors[formattedSwatchName] && colors[formattedSwatchName][grade]) {
+      layerStyles.removeSharedStyle(sharedStyle);
     }
   }
 
-  const { black, white, orange, yellow, ...swatches } = colors;
+  const page = findOrCreatePage(context, 'Color');
+
   const swatchNames = Object.keys(swatches);
   const ARTBOARD_WIDTH = 40;
   const ARTBOARD_HEIGHT = 40;
@@ -66,19 +69,25 @@ export function render(context) {
       const grade = grades[j];
       const name = formatTokenName(swatch);
       const colorName = `${name}-${grade}`;
+      const sharedStyle = SharedStyle.fromStyle({
+        name: ['color', name, grade].join('/'),
+        style: {
+          fills: [
+            {
+              color: swatches[swatch][grade],
+              fillType: Style.FillType.Color,
+            },
+          ],
+        },
+        document: context.document,
+      });
+
       const rectangle = new ShapePath({
         name: colorName,
         frame: new Rectangle(0, 0, ARTBOARD_WIDTH, ARTBOARD_HEIGHT),
         shapeType: ShapePath.ShapeType.Rectangle,
-        style: sharedStyle,
-        // style: {
-        // fills: [
-        // {
-        // color: swatches[swatch][grade],
-        // fillType: Style.FillType.Color,
-        // },
-        // ],
-        // },
+        sharedStyleId: sharedStyle.id,
+        style: sharedStyle.style,
       });
 
       const artboard = new SymbolMaster({
@@ -92,7 +101,6 @@ export function render(context) {
         ),
         layers: [rectangle],
       });
-      // console.log(formatTokenName(swatch), grade);
     }
   }
 }

packages/sketch/src/tools/page.js

@@ -0,0 +1,47 @@
+/**
+ * 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 { Page } from 'sketch/dom';
+
+/**
+ * Find or create a page for the given document context and page name
+ * @param {SketchContext} context
+ * @param {string} pageName
+ * @return {MSPage}
+ */
+export function findOrCreatePage(context, pageName) {
+  let [page] = Array.from(context.document.pages()).filter(page => {
+    return '' + page.name() === pageName;
+  });
+
+  if (!page) {
+    page = new Page({
+      name: pageName,
+      parent: context.document,
+    });
+  }
+
+  clearPage(page);
+  page.selected = true;
+
+  return page;
+}
+
+/**
+ * Clear all the layers for a given page.
+ * @param {MSPage} page
+ * @return {MSPage}
+ */
+export function clearPage(page) {
+  if (!Array.isArray(page.layers) && page.layers().count() > 0) {
+    for (let i = page.layers().count() - 1; i >= 0; i--) {
+      const layer = page.layers().objectAtIndex(i);
+      layer.removeFromParent();
+    }
+  }
+  return page;
+}