Merge pull request #1 from design-ops/NDS-Theme-Rules

NDS theme rules

README.md

@@ -1,16 +1,19 @@
-# sketch-assistant-template
+# NDS Sketch theme assistant
 
-> 💁‍♀️ This repository contains a starter project for developing a new Assistant.
+This Sketch Assistant is to be used when designing theme files for the Natural Design System. The Assistant performs the following checks on your theme file:
 
-👉
-[Click here to generate a new project using this repository as a template](https://github.com/sketch-hq/sketch-assistant-template/generate)
+## Rules
 
-## Getting started
-
-For in-depth guides head over to the [Sketch Developer](https://developer.sketch.com/assistants/)
-site.
-
-- [Getting started](https://developer.sketch.com/assistants/getting-started)
-- [Write a rule](https://developer.sketch.com/assistants/write-a-rule)
-- [Publishing](https://developer.sketch.com/assistants/publish)
-- And more!
+* [Duplicate symbols](./src/rules/duplicate-symbols)
+* [Duplicate layer styles](./src/rules/duplicate-layer-styles)
+* [Duplicate text styles](./src/rules/duplicate-text-styles)
+* [Default symbols](./src/rules/default-symbols)
+* [Default layer styles](./src/rules/default-layer-styles)
+* [Default text styles](./src/rules/default-text-styles)
+* [Sync layer styles](./src/rules/sync-layer-styles)
+* [Sync text styles](./src/rules/sync-text-styles)
+* [Symbol names](./src/rules/symbol-names)
+* [Layer style names](./src/rules/layer-style-names)
+* [Text style names](./src/rules/text-style-names)
+* [Modifier structure](./src/rules/modifier-structure)
+* [Embedded fonts](./src/rules/embed-fonts)

package.json

@@ -1,25 +1,28 @@
 {
-  "name": "sketch-assistant-template",
-  "homepage": "https://github.com/sketch-hq/sketch-assistant-template",
+  "name": "nds-sketch-theme-assistant",
+  "homepage": "https://github.com/design-ops/nds-sketch-theme-assistant",
   "version": "1.0.0",
   "main": "dist/index.js",
   "sketch": "dist/sketch.js",
   "license": "MIT",
   "sketch-assistant": {
-    "title": "Sketch Assistant Template",
-    "description": "Template repository for a starter Assistant project",
+    "title": "NDS Sketch Theme assistant",
+    "description": "Sketch Theme file assistant for use with the Natural Design System",
     "icon": ""
   },
   "author": {
-    "name": "Your Name or Company Name"
+    "name": "Design Ops"
   },
   "keywords": [
     "sketch",
     "sketch files",
     "sketch assistant",
     "public",
     "assistant",
-    "design ops"
+    "design ops",
+    "nds",
+    "natural design system",
+    "design system"
   ],
   "files": [
     "dist"

src/__tests__/index.test.ts

@@ -1,13 +1,136 @@
 import { resolve } from 'path'
-import { testAssistant } from '@sketch-hq/sketch-assistant-utils'
+import { testRuleInAssistant } from '@sketch-hq/sketch-assistant-utils'
 
 import Assistant from '..'
 
-test('test assistant', async () => {
-  const { violations, ruleErrors } = await testAssistant(
-    resolve(__dirname, './empty.sketch'),
+test('Duplicate layer styles', async () => {
+  const { violations } = await testRuleInAssistant(
+    resolve(__dirname, './duplicate-layer-styles.sketch'),
     Assistant,
+    "nds-sketch-theme-assistant/duplicate-layer-styles"
   )
-  expect(violations[0].message).toBe('Hello world')
-  expect(ruleErrors).toHaveLength(0)
+  expect(violations[0].message).toBe("'background' has a duplicate layer style")
+  expect(violations).toHaveLength(1)
+})
+
+test('Duplicate text styles', async () => {
+  const { violations } = await testRuleInAssistant(
+    resolve(__dirname, './duplicate-text-styles.sketch'),
+    Assistant,
+    "nds-sketch-theme-assistant/duplicate-text-styles"
+  )
+  expect(violations[0].message).toBe("'title' has a duplicate text style")
+  expect(violations).toHaveLength(1)
+})
+
+test('Duplicate symbols', async () => {
+  const { violations } = await testRuleInAssistant(
+    resolve(__dirname, './duplicate-symbols.sketch'),
+    Assistant,
+    "nds-sketch-theme-assistant/duplicate-symbols"
+  )
+  expect(violations[0].message).toBe("'icon' has a duplicate symbol")
+  expect(violations).toHaveLength(1)
+})
+
+test('Default layer styles', async () => {
+  const { violations } = await testRuleInAssistant(
+    resolve(__dirname, './default-layer-styles.sketch'),
+    Assistant,
+    "nds-sketch-theme-assistant/default-layer-styles"
+  )
+  expect(violations[0].message).toBe("'background' is missing a default layer style")
+  expect(violations).toHaveLength(1)
+})
+
+test('Default text styles', async () => {
+  const { violations } = await testRuleInAssistant(
+    resolve(__dirname, './default-text-styles.sketch'),
+    Assistant,
+    "nds-sketch-theme-assistant/default-text-styles"
+  )
+  expect(violations[0].message).toBe("'title' is missing a default text style")
+  expect(violations).toHaveLength(1)
+})
+
+test('Default symbols', async () => {
+  const { violations } = await testRuleInAssistant(
+    resolve(__dirname, './default-symbols.sketch'),
+    Assistant,
+    "nds-sketch-theme-assistant/default-symbols"
+  )
+  expect(violations[0].message).toBe("'icon' is missing a default symbol")
+  expect(violations).toHaveLength(1)
+})
+
+test('Modifier structure', async () => {
+  const { violations } = await testRuleInAssistant(
+    resolve(__dirname, './modifier-structure.sketch'),
+    Assistant,
+    "nds-sketch-theme-assistant/modifier-structure"
+  )
+  expect(violations[0].message).toBe("'background --radius' modifier has too many (2) layers")
+  expect(violations[1].message).toBe("'header/background --radius' modifier requires a single layer")
+  expect(violations).toHaveLength(2)
+})
+
+test('Sync layer styles', async () => {
+  const { violations } = await testRuleInAssistant(
+    resolve(__dirname, './sync-layer-styles.sketch'),
+    Assistant,
+    "nds-sketch-theme-assistant/sync-layer-styles"
+  )
+  expect(violations[0].message).toBe("'background' shared style on 'Rectangle' is out of sync")
+  expect(violations).toHaveLength(1)
+})
+
+test('Sync text styles', async () => {
+  const { violations } = await testRuleInAssistant(
+    resolve(__dirname, './sync-text-styles.sketch'),
+    Assistant,
+    "nds-sketch-theme-assistant/sync-text-styles"
+  )
+  expect(violations[0].message).toBe("'title' shared style on 'Title' is out of sync")
+  expect(violations).toHaveLength(1)
+})
+
+test('Symbol names', async () => {
+  const { violations } = await testRuleInAssistant(
+    resolve(__dirname, './symbol-names.sketch'),
+    Assistant,
+    "nds-sketch-theme-assistant/symbol-names"
+  )
+  expect(violations[0].message).toBe('Woops! Symbol name cannot be a "/"')
+  expect(violations[1].message).toBe('Woops! Symbol name cannot be left blank')
+  expect(violations).toHaveLength(2)
+})
+
+test('Text style names', async () => {
+  const { violations } = await testRuleInAssistant(
+    resolve(__dirname, './text-style-names.sketch'),
+    Assistant,
+    "nds-sketch-theme-assistant/text-style-names"
+  )
+  expect(violations[0].message).toBe('Woops! Text Style name cannot be left blank')
+  expect(violations).toHaveLength(1)
+})
+
+test('Layer style names', async () => {
+  const { violations } = await testRuleInAssistant(
+    resolve(__dirname, './layer-style-names.sketch'),
+    Assistant,
+    "nds-sketch-theme-assistant/layer-style-names"
+  )
+  expect(violations[0].message).toBe('Woops! Layer Style name cannot be left blank')
+  expect(violations).toHaveLength(1)
+})
+
+test('Embed Font', async () => {
+  const { violations } = await testRuleInAssistant(
+    resolve(__dirname, './embed-fonts.sketch'),
+    Assistant,
+    "nds-sketch-theme-assistant/embed-fonts"
+  )
+  expect(violations[0].message).toBe("'SF Pro Display' font is not embedded")
+  expect(violations).toHaveLength(1)
 })

src/index.ts

@@ -1,21 +1,52 @@
-import { AssistantPackage, RuleDefinition } from '@sketch-hq/sketch-assistant-types'
+import { AssistantPackage } from '@sketch-hq/sketch-assistant-types'
 
-const helloWorld: RuleDefinition = {
-  rule: async (context) => {
-    context.utils.report('Hello world')
-  },
-  name: 'sketch-assistant-template/hello-world',
-  title: 'Hello World',
-  description: 'Reports a hello world message',
-}
+import { duplicateLayerStyles } from './rules/duplicate-layer-styles'
+import { duplicateTextStyles } from './rules/duplicate-text-styles'
+import { duplicateSymbols } from './rules/duplicate-symbols'
+import { defaultLayerStyles } from './rules/default-layer-styles'
+import { defaultTextStyles } from './rules/default-text-styles'
+import { defaultSymbols } from './rules/default-symbols'
+import { modifierStructure } from './rules/modifier-structure'
+import { syncLayerStyles } from './rules/sync-layer-styles'
+import { syncTextStyles } from './rules/sync-text-styles'
+import { layerStyleNames } from './rules/layer-style-names'
+import { textStyleNames } from './rules/text-style-names'
+import { symbolNames } from './rules/symbol-names'
+import { embedFonts } from './rules/embed-fonts'
 
 const assistant: AssistantPackage = async () => {
   return {
-    name: 'sketch-assistant-template',
-    rules: [helloWorld],
+    name: 'nds-sketch-theme-assistant',
+    rules: [
+      duplicateLayerStyles,
+      duplicateTextStyles,
+      duplicateSymbols,
+      defaultLayerStyles,
+      defaultTextStyles,
+      defaultSymbols,
+      modifierStructure,
+      syncLayerStyles,
+      syncTextStyles,
+      symbolNames,
+      layerStyleNames,
+      textStyleNames,
+      embedFonts,
+    ],
     config: {
       rules: {
-        'sketch-assistant-template/hello-world': { active: true },
+        'nds-sketch-theme-assistant/duplicate-layer-styles': { active: true },
+        'nds-sketch-theme-assistant/duplicate-text-styles': { active: true },
+        'nds-sketch-theme-assistant/duplicate-symbols': { active: true },
+        'nds-sketch-theme-assistant/default-layer-styles': { active: true },
+        'nds-sketch-theme-assistant/default-text-styles': { active: true },
+        'nds-sketch-theme-assistant/default-symbols': { active: true },
+        'nds-sketch-theme-assistant/modifier-structure': { active: true },
+        'nds-sketch-theme-assistant/sync-layer-styles': { active: true },
+        'nds-sketch-theme-assistant/sync-text-styles': { active: true },
+        'nds-sketch-theme-assistant/symbol-names': { active: true },
+        'nds-sketch-theme-assistant/layer-style-names': { active: true },
+        'nds-sketch-theme-assistant/text-style-names': { active: true },
+        'nds-sketch-theme-assistant/embed-fonts': { active: true },
       },
     },
   }

src/rules/default-layer-styles/README.md

@@ -0,0 +1,13 @@
+# ```default-layer-styles```
+
+## Locates missing default layer styles in your theme file
+
+In the Natural Design System everything requires a default state, which is used when no match is determined.
+
+## Configuration
+
+```js
+{
+  "active": true,
+}
+```

src/rules/default-layer-styles/index.ts

@@ -0,0 +1,46 @@
+import { RuleDefinition, SketchFileObject } from '@sketch-hq/sketch-assistant-types'
+
+export const defaultLayerStyles: RuleDefinition = {
+  rule: async (context) => {
+
+    interface Tokens {
+      token: string
+      path: string
+      default: boolean
+      object: SketchFileObject
+    }
+
+    var tokens: Array<Tokens> = [];
+    var tokenParts: Array<string> = [];
+    var defaultTokens: Array<Tokens> = [];
+
+    for (const style of context.utils.objects.sharedStyle) {
+      if (style.value.textStyle == undefined) {
+
+        tokenParts = style.name.split('/');
+        var tokenName = tokenParts.slice(-1).toString();
+        var tokenPath = tokenParts.pop();
+        tokenPath = tokenParts.join('/');
+        if (tokenParts.length > 0) {
+          tokens.push({ token: tokenName, path: tokenPath, default: false, object:style });
+        } else {
+          tokens.push({ token: tokenName, path: tokenPath, default: true, object:style });
+        }
+
+      }
+    }
+    defaultTokens = (tokens.filter((element) => element.default == true));
+
+    for (const token of tokens) {
+      var existingElement = defaultTokens.find((element) => element.token == token.token);
+      if (existingElement == null) {
+        context.utils.report('\'' + token.token + '\' is missing a default layer style', token.object);
+      }
+
+    }
+
+  },
+  name: 'nds-sketch-theme-assistant/default-layer-styles',
+  title: 'Default Layer Styles',
+  description: 'Reports missing default layer style in your NDS theme file.',
+}

src/rules/default-symbols/README.md

@@ -0,0 +1,13 @@
+# ```default-symbols```
+
+## Locates missing default symbols in your theme file
+
+In the Natural Design System everything requires a default state, which is used when no match is determined.
+
+## Configuration
+
+```js
+{
+  "active": true,
+}
+```