Declare Angular directives in KSS comments

README.md

@@ -256,6 +256,39 @@ Note: When using templateUrl in directives, the template path is relative to sty
 
 Document your CSS components with [KSS](http://warpspire.com/kss/)
 
+### Defining an Angular directive
+
+If your components can be rendered with Angular directives, you can define them in KSS markup and so avoid copy-pasting
+in the `markup` field. This is how you can instruct the style guide to use Angular:
+
+  // Test directive
+  //
+  // markup:
+  // <div sg-test-directive>If you see this something is wrong</div>
+  //
+  // sg-angular-directive:
+  // name: NameOfMainAppModule
+  // template: path/to/template-filename.html
+  // file: path/to/application-file.js
+  //
+  // Styleguide 6.1
+
+It is possible to define several files, so you can attach all the needed dependencies:
+
+  // sg-angular-directive:
+  // name: NameOfMainAppModule
+  // template: path/to/template-filename.html
+  // file: path/to/application-file.js
+  // file: path/to/dependency-file.js
+  // file: path/to/stylesheet.css
+
+You can also write the same with comma-syntax
+
+  // sg-angular-directive:
+  // name: NameOfMainAppModule
+  // template: path/to/template-filename.html
+  // file: path/to/application-file.js, path/to/dependency-file.js, path/to/stylesheet.css
+
 ### Wrapper markup
 
 Sometimes your component examples need a wrapper. For example:

demo-gulpfile.js

@@ -17,16 +17,7 @@ gulp.task('styleguide', ['static'], function() {
             'node_modules/node-bourbon/assets/stylesheets',
             'node_modules/node-neat/assets/stylesheets'
           ]
-        },
-        filesConfig: [
-          {
-            name: 'sgAppTest',
-            files: [
-              'demo/testDirective.js'
-            ],
-            template: 'demo/testDirective.html'
-          }
-        ]
+        }
       }))
     .pipe(gulp.dest(outputPath));
 });

lib/app/sass/app.scss

@@ -1239,5 +1239,10 @@ Styleguide 4.4
 // markup:
 // <div sg-test-directive>If you see this something is wrong</div>
 //
+// sg-angular-directive:
+// name: sgAppTest
+// template: demo/testDirective.html
+// file: demo/testDirective.js
+//
 // Styleguide 6.1
 

lib/app/styleguide_config.json

@@ -8,14 +8,5 @@
       "node_modules/node-bourbon/assets/stylesheets",
       "node_modules/node-neat/assets/stylesheets"
     ]
-  },
-  "filesConfig": [
-    {
-      "name": "sgAppTest",
-      "files": [
-        "demo/testDirective.js"
-      ],
-      "template": "demo/testDirective.html"
-    }
-  ]
+  }
 }

lib/modules/angular-files.js

@@ -0,0 +1,34 @@
+'use strict';
+
+module.exports = {
+
+  /* Puts angular directives declared in sections into config */
+  add: function(config, sections) {
+
+    function add(content) {
+      if (!config) {
+        config = [];
+      }
+      config.push(content);
+    }
+
+    sections.forEach(function(section) {
+
+      if (section['sg-angular-directive']) {
+
+        section['sg-angular-directive'].files = section['sg-angular-directive'].file;
+        if (!(section['sg-angular-directive'].files instanceof Array)) {
+          section['sg-angular-directive'].files = [
+            section['sg-angular-directive'].files
+          ];
+        }
+
+        add(section['sg-angular-directive']);
+      }
+    });
+
+    return config;
+
+  }
+
+};

lib/modules/kss-additional-params.js

@@ -8,14 +8,20 @@ function trimLinebreaks(str) {
   return str.replace(/^[\r\n]+|[\r\n]+$/g, '');
 }
 
+// A list of params which need values parsing
+var ComplexParams = [
+  'sg-angular-directive'
+];
+
 module.exports = {
 
   /* Parses additional KSS params for the styleguide */
   get: function(source) {
 
     // Remove comment markup from comments
     var comment = source.split('//').join('').split('/*').join('').split('*/').join(''),
-      additionalKssParams = {};
+      additionalKssParams = {},
+      _this = this;
 
     comment = trimLinebreaks(comment);
 
@@ -26,12 +32,56 @@ module.exports = {
         varName = varName[1].trim();
       }
       if (varName && varName.substring(0, 3) === 'sg-') {
-        additionalKssParams[varName] = markUpBlock.substring(markUpBlock.indexOf('\n') + 1);
+        additionalKssParams[varName] = _this.getValue(varName, markUpBlock);
       }
 
     });
 
     return additionalKssParams;
+  },
+
+  /* Parses values */
+  getValue: function(varName, source) {
+
+    var body = source.substring(source.indexOf('\n') + 1),
+      result;
+
+    // Do not parse every variable
+    if (ComplexParams.indexOf(varName) === -1) {
+      result = body;
+    } else {
+
+      result = {};
+
+      body.split('\n').forEach(function(line) {
+
+        var keyVal = line.split(':').map(function(str) {
+          str = str.trim();
+          if (str.indexOf(',') !== -1) {
+            str = str.split(',').map(function(s) {
+              return s.trim();
+            });
+          }
+          return str;
+        });
+
+        if (!result[keyVal[0]]) {
+          // Define new value
+          result[keyVal[0]] = keyVal[1];
+        } else {
+          // Add another value
+          if (!(result[keyVal[0]] instanceof Array)) {
+            result[keyVal[0]] = [
+              result[keyVal[0]]
+            ];
+          }
+          result[keyVal[0]].push(keyVal[1]);
+        }
+
+      });
+    }
+
+    return result;
   }
 
 };

lib/modules/kss-parser.js

@@ -46,7 +46,11 @@ function trimLinebreaks(str) {
 }
 
 function sanitize(string) {
-  return sanitizeHtml(string, {allowedTags: [], allowedAttributes: []});
+
+  var sanitized = sanitizeHtml(string, {allowedTags: [], allowedAttributes: []});
+  // HACK: Remove extra parameters from descriotion
+  sanitized = sanitized.split(/sg\-[^:]*:/)[0];
+  return sanitized;
 }
 
 function processBlock(block, options) {

lib/styleguide.js

@@ -24,6 +24,7 @@ var path = require('path'),
   atRules = requireModule('at-rules'),
   variableParser = requireModule('variable-parser'),
   kssParser = requireModule('kss-parser'),
+  angularFiles = requireModule('angular-files'),
   pseudoSelectors = requireModule('pseudo-selectors'),
   preprocess = requireModule('preprocess'),
   wrapperMarkup = requireModule('wrapper-markup'),
@@ -188,6 +189,9 @@ module.exports = function(options) {
         styleguide.sections = sections;
         styleguide.variables = variables;
 
+        // Extend config with Angular directives declared in KSS
+        opt.filesConfig = angularFiles.add(opt.filesConfig, sections);
+
         function pushAllFiles() {
           return through.obj(function(file, enc, cb) {
             _this.push(file);

test/unit/modules/kss-additional-params.test.js

@@ -107,4 +107,139 @@ describe('Parsing KSS additional params', function() {
     expect(params).eql(result);
   });
 
+  it('Should parse complex variables', function() {
+    var str = multiline(function() {
+      /*
+ sg-angular-directive:
+ name: sgAppTest
+ template: demo/testDirective.html
+ file: demo/testDirective.js
+      */
+      }),
+      result = {
+        name: 'sgAppTest',
+        file: 'demo/testDirective.js',
+        template: 'demo/testDirective.html'
+      },
+      value = kssAdditionalParams.getValue('sg-angular-directive', str);
+
+    expect(value).eql(result);
+  });
+
+  it('Should parse complex variables with 2 nexted values', function() {
+    var str = multiline(function() {
+      /*
+ sg-angular-directive:
+ name: sgAppTest
+ template: demo/testDirective.html
+ file: demo/testDirective.js
+ file: demo/testDirective2.js
+      */
+      }),
+      result = {
+        name: 'sgAppTest',
+        file: [
+          'demo/testDirective.js',
+          'demo/testDirective2.js'
+          ],
+        template: 'demo/testDirective.html'
+      },
+      value = kssAdditionalParams.getValue('sg-angular-directive', str);
+
+    expect(value).eql(result);
+  });
+
+  it('Should parse complex variables with many nexted values', function() {
+    var str = multiline(function() {
+      /*
+ sg-angular-directive:
+ name: sgAppTest
+ template: demo/testDirective.html
+ file: demo/testDirective.js
+ file: demo/testDirective2.js
+ file: demo/testDirective3.js
+ file: demo/testDirective4.js
+      */
+      }),
+      result = {
+        name: 'sgAppTest',
+        file: [
+          'demo/testDirective.js',
+          'demo/testDirective2.js',
+          'demo/testDirective3.js',
+          'demo/testDirective4.js'
+          ],
+        template: 'demo/testDirective.html'
+      },
+      value = kssAdditionalParams.getValue('sg-angular-directive', str);
+
+    expect(value).eql(result);
+  });
+
+  it('Should parse complex variables with comma notation', function() {
+    var str = multiline(function() {
+      /*
+ sg-angular-directive:
+ name: sgAppTest
+ template: demo/testDirective.html
+ file: demo/testDirective.js, demo/testDirective2.js
+      */
+      }),
+      result = {
+        name: 'sgAppTest',
+        file: [
+          'demo/testDirective.js',
+          'demo/testDirective2.js'
+          ],
+        template: 'demo/testDirective.html'
+      },
+      value = kssAdditionalParams.getValue('sg-angular-directive', str);
+
+    expect(value).eql(result);
+  });
+
+  it('Should ignore extra spaces when parsing complex variables', function() {
+    var str = multiline(function() {
+      /*
+ sg-angular-directive:
+ name: sgAppTest
+ template:  demo/testDirective.html 
+ file:   demo/testDirective.js , demo/testDirective2.js
+ file:   demo/testDirective3.js 
+      */
+      }),
+      result = {
+        name: 'sgAppTest',
+        file: [
+          'demo/testDirective.js',
+          'demo/testDirective2.js',
+          'demo/testDirective3.js'
+          ],
+        template: 'demo/testDirective.html'
+      },
+      value = kssAdditionalParams.getValue('sg-angular-directive', str);
+
+    expect(value).eql(result);
+  });
+
+  it('Should parse only listed params as comples', function() {
+    var str = multiline(function() {
+      /*
+ sg-another-custom-param:
+ param1: val1
+ param2: val2
+      */
+      }),
+      result = multiline(function() {
+      /*
+ param1: val1
+ param2: val2
+      */
+      }),
+      value = kssAdditionalParams.getValue('sg-another-custom-param', str);
+
+    expect(value).eql(result);
+  });
+
+
 });