Merge pull request #8 from pattern-lab/dev

3...2...1... Launch: alpha!

Author: bmuenzenmeyer

.editorconfig

@@ -0,0 +1,11 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+tab_width = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintrc

@@ -0,0 +1,84 @@
+{
+  "env": {
+    "node": true,
+    "builtin": true,
+    "es6": true
+  },
+  "globals": {},
+  "rules": {
+    "block-scoped-var": 0,
+    "camelcase": 0,
+    "comma-spacing": [1, {"before": false, "after": true}],
+    "consistent-return": 2,
+    "curly": [2, "all"],
+    "dot-notation": [1, { "allowKeywords": true }],
+    "eqeqeq": [2, "allow-null"],
+    "global-strict": [0, "never"],
+    "guard-for-in": 2,
+    "indent": [1, 2, {"SwitchCase": 1, "VariableDeclarator": 1}],
+    "lines-around-comment": [1, {
+      "beforeBlockComment": true,
+      "beforeLineComment": true,
+      "allowBlockStart": true,
+      "allowObjectStart": true,
+      "allowArrayStart": true
+    }],
+    "key-spacing": 0,
+    "keyword-spacing": 1,
+    "new-cap": 0,
+    "no-alert": 2,
+    "no-bitwise": 2,
+    "no-caller": 2,
+    "no-cond-assign": [2, "except-parens"],
+    "no-debugger": 2,
+    "no-dupe-args": 2,
+    "no-dupe-keys": 2,
+    "no-empty": 2,
+    "no-eval": 2,
+    "no-extend-native": 2,
+    "no-extra-bind": 2,
+    "no-extra-parens": 0,
+    "no-extra-semi": 2,
+    "no-func-assign": 2,
+    "no-implied-eval": 2,
+    "no-invalid-regexp": 2,
+    "no-irregular-whitespace": 1,
+    "no-iterator": 2,
+    "no-loop-func": 2,
+    "no-mixed-requires": 0,
+    "no-multi-str": 2,
+    "no-multi-spaces": 1,
+    "no-native-reassign": 2,
+    "no-new": 2,
+    "no-param-reassign": 1,
+    "no-proto": 2,
+    "no-redeclare": 0,
+    "no-script-url": 2,
+    "no-self-assign": 2,
+    "no-self-compare": 2,
+    "no-sequences": 2,
+    "no-shadow": 2,
+    "no-undef": 2,
+    "no-underscore-dangle": 0,
+    "no-unreachable": 1,
+    "no-unused-vars": 0,
+    "no-use-before-define": 1,
+    "no-useless-call": 2,
+    "no-useless-concat": 2,
+    "no-with": 2,
+    "quotes": [0, "single"],
+    "radix": 2,
+    "semi": [0, "never"],
+    "strict": 0,
+    "space-before-blocks": 1,
+    "space-before-function-paren": [1, {
+      "anonymous": "always",
+      "named": "never"
+    }],
+    "space-in-parens": [1, "never"],
+    "space-infix-ops": 1,
+    "valid-typeof": 2,
+    "vars-on-top": 0,
+    "wrap-iife": [2, "inside"]
+  }
+}

.gitignore

@@ -35,3 +35,4 @@ jspm_packages
 
 # Optional REPL history
 .node_repl_history
+.idea/

README.md

@@ -1 +1,39 @@
-# plugin-node-tab
+![license](https://img.shields.io/github/license/pattern-lab/plugin-node-tab.svg)
+[![npm](https://img.shields.io/npm/v/plugin-node-tab.svg)](https://www.npmjs.com/package/plugin-node-tab)
+[![Gitter](https://img.shields.io/gitter/room/pattern-lab/php.svg)](https://gitter.im/pattern-lab/php)
+
+# Tab Plugin for Pattern Lab Node
+
+The Tab Plugin allows Pattern Lab Node users to see sibling files next to a pattern in the filesystem, displaying them as additional tabs alongside the template and HTML tabs in both the Style Guide frontend and the single-pattern info modal.
+
+## Installation
+
+To add the Tab Plugin to your project using [npm](http://npmjs.com/) type:
+
+    npm install plugin-node-tab --save
+
+Or add it directly to your project's `package.json` file and run `npm install`
+
+Post installation, the plugin will prompt you for what filetypes you want to add tabs for.
+
+```
+$ Specify filetype(s) to create a tab for. Separate multiple filetypes with a space, pipe or comma. Example: js css >>>
+```
+
+## Expected Structure
+
+With the Tab Plugin installed, you can now accompany pattern template files with the file types of your choice and expect Pattern Lab to show them as tabs. The file structure would be similar to that of `pattern.json` or `pattern.md` files, except that it will be `pattern.<<type>>`.
+
+For example, if we added a` css` tab:
+
+```
+./_patterns/foo/bar
+├── pattern.mustache (the pattern template)
+├── pattern.md (optional pattern-specific documentation and metadata)
+├── pattern.json (optional pattern-specific data)
+└── pattern.css (the tab you added.)
+```
+
+## Enabling / Disabling the Plugin
+
+After install, you may manually enable or disable the plugin by removing it from the `patternlab-config.json` file. Installation added a key called `plugin-node-tab` to it. In the future this will be possible via CLI.

dist/js/plugin-node-tab.js

@@ -0,0 +1,13 @@
+var PluginTab = {
+
+  /**
+   * The function defined as the onready callback within the plugin configuration. 
+   */
+  init: function () {
+
+    //placeholder that will be replaced during configuation
+    //most plugins could probably just implement logic here instead.
+    /*SNIPPETS*/
+
+  }
+};

index.js

@@ -0,0 +1,119 @@
+'use strict';
+
+const pluginName = 'plugin-node-tab';
+
+const fs = require('fs-extra'),
+  glob = require('glob'),
+  path = require('path'),
+  EOL = require('os').EOL,
+  tab_loader = require('./src/tab-loader');
+
+function onPatternIterate(patternlab, pattern) {
+  tab_loader(patternlab, pattern);
+}
+
+/**
+ * Define what events you wish to listen to here
+ * For a full list of events - check out https://github.com/pattern-lab/patternlab-node/wiki/Creating-Plugins#events
+ * @param patternlab - global data store which has the handle to the event emitter
+   */
+function registerEvents(patternlab) {
+  //register our handler at the appropriate time of execution
+  patternlab.events.on('patternlab-pattern-write-end', onPatternIterate);
+}
+
+/**
+* A single place to define the frontend configuration
+* This configuration is outputted to the frontend explicitly as well as included in the plugins object.
+*
+*/
+function getPluginFrontendConfig() {
+  return {
+    'name':'pattern-lab\/' + pluginName,
+    'templates':[],
+    'stylesheets':[],
+    'javascripts':['patternlab-components\/pattern-lab\/' + pluginName + '\/js\/' + pluginName + '.js'],
+    'onready':'PluginTab.init()',
+    'callback':''
+  }
+}
+
+/**
+* The entry point for the plugin. You should not have to alter this code much under many circumstances.
+* Instead, alter getPluginFrontendConfig() and registerEvents() methods
+  */
+function pluginInit(patternlab) {
+
+  if (!patternlab) {
+    console.error('patternlab object not provided to plugin-init');
+    process.exit(1);
+  }
+
+  let fileTypes = require('./package.json').fileTypes;
+
+  //write the plugin json to public/patternlab-components
+  var pluginConfig = getPluginFrontendConfig();
+  var pluginConfigPathName = path.resolve(patternlab.config.paths.public.root, 'patternlab-components', 'packages');
+  try {
+    fs.outputFileSync(pluginConfigPathName + '/' + pluginName + '.json', JSON.stringify(pluginConfig, null, 2));
+  } catch (ex) {
+    console.trace('plugin-node-tab: Error occurred while writing pluginFile configuration');
+    console.log(ex);
+  }
+
+  //add the plugin config to the patternlab-object
+  if (!patternlab.plugins) {
+    patternlab.plugins = [];
+  }
+  patternlab.plugins.push(pluginConfig);
+
+  //write the plugin dist folder to public/pattern-lab
+  var pluginFiles = glob.sync(__dirname + '/dist/**/*');
+
+  if (pluginFiles && pluginFiles.length > 0) {
+
+    let tab_frontend_snippet = fs.readFileSync(path.resolve(__dirname + '/src/snippet.js'), 'utf8');
+
+    for (let i = 0; i < pluginFiles.length; i++) {
+      try {
+        var fileStat = fs.statSync(pluginFiles[i]);
+        if (fileStat.isFile()) {
+          var relativePath = path.relative(__dirname, pluginFiles[i]).replace('dist', ''); //dist is dropped
+          var writePath = path.join(patternlab.config.paths.public.root, 'patternlab-components', 'pattern-lab', pluginName, relativePath);
+
+          //a message to future plugin authors:
+          //depending on your plugin's job - you might need to alter the dist file instead of copying.
+          //if you are simply copying dist files, you can probably do the below:
+          //fs.copySync(pluginFiles[i], writePath);
+
+          //in this case, we need to alter the dist file to loop through our tabs to load as defined in the package.json
+          //we are also being a bit lazy here, since we only expect one file
+          let tabJSFileContents = fs.readFileSync(pluginFiles[i], 'utf8');
+          var snippetString = '';
+          for (let j = 0; j < fileTypes.length; j++) {
+            let tabSnippetLocal = tab_frontend_snippet.replace(/<<type>>/g, fileTypes[j]).replace(/<<typeUC>>/g, fileTypes[j].toUpperCase());
+            snippetString += tabSnippetLocal + EOL;
+          }
+          tabJSFileContents = tabJSFileContents.replace('/*SNIPPETS*/', snippetString);
+          fs.outputFileSync(writePath, tabJSFileContents);
+        }
+      } catch (ex) {
+        console.trace('plugin-node-tab: Error occurred while copying pluginFile', pluginFiles[i]);
+        console.log(ex);
+      }
+    }
+  }
+
+  //setup listeners if not already active
+  if (patternlab.config[pluginName] !== undefined && !patternlab.config[pluginName]) {
+
+    //register events
+    registerEvents(patternlab);
+
+    //set the plugin key to true to indicate it is installed and ready
+    patternlab.config[pluginName] = true;
+  }
+
+}
+
+module.exports = pluginInit;

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "plugin-node-tab",
+  "version": "1.0.0-alpha",
+  "description": "",
+  "main": "index.js",
+  "dependencies": {
+    "fs-extra": "^0.30.0",
+    "glob": "^7.0.0",
+    "inquirer": "^1.1.3"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pattern-lab/plugin-node-tab.git"
+  },
+  "scripts": {
+    "test": "eslint dist/** src/** index.js postinstall.js",
+    "postinstall": "node ./postinstall.js"
+  },
+  "author": "Brian Muenzenmeyer",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/pattern-lab/plugin-node-tab/issues"
+  },
+  "homepage": "https://github.com/pattern-lab/plugin-node-tab#readme",
+  "devDependencies": {
+    "eslint": "^3.5.0"
+  }
+}

postinstall.js

@@ -0,0 +1,39 @@
+'use strict';
+
+const fs = require('fs-extra'),
+  glob = require('glob'),
+  inquirer = require('inquirer');
+
+let config = require('./package.json');
+let fileTypes = [];
+
+var questions = [
+  {
+    type: 'input',
+    name: 'types',
+    message: 'Specify filetype(s) to create a tab for. Separate multiple filetypes with a space, pipe or comma. Example: js css >>> '
+  }
+];
+
+inquirer
+  .prompt(questions)
+  .then(function (answers) {
+
+    fileTypes = answers.types.split(/,| /);
+
+    if (fileTypes.length === 1 && fileTypes[0] === '') {
+      console.log('No filetype(s) provided. Returning unconfigured!');
+      return;
+    }
+
+    for (let i = 0; i < fileTypes.length; i++) {
+      if (fileTypes[i].charAt(0) === '.') {
+        fileTypes[i] = fileTypes[i].slice(1);
+      }
+    }
+
+    console.log('Adding configuration for tabs', fileTypes, 'inside package.json');
+    config.fileTypes = fileTypes;
+    fs.outputFileSync('./package.json', JSON.stringify(config, null, 2), 'utf-8');
+  });
+

src/snippet.js

@@ -0,0 +1,14 @@
+/* global Panels */
+
+Panels.add({
+  'id': 'sg-panel-<<type>>',
+  'name': '<<typeUC>>',
+  'default': false,
+  'templateID': 'pl-panel-template-code',
+  'httpRequest': true,
+  'httpRequestReplace': '.<<type>>',
+  'httpRequestCompleted': false,
+  'prismHighlight': true,
+  'language': 'markup',
+  'keyCombo': 'ctrl+shift+z'
+});