shibori 1.0.0.beta1

data/builder/patternlab_gulp.js

@@ -0,0 +1,26 @@
+var patternlab_engine = require('./patternlab.js');
+
+module.exports = function(gulp) {
+
+  gulp.task('patternlab', ['clean'], function(cb){
+    var patternlab = patternlab_engine();
+    patternlab.build(false);
+    cb();
+  });
+
+  gulp.task('patternlab:version', function(){
+    var patternlab = patternlab_engine();
+    patternlab.version();
+  })
+
+  gulp.task('patternlab:only_patterns', ['clean'], function(){
+    var patternlab = patternlab_engine();
+    patternlab.build_patterns_only(false);
+  })
+
+  gulp.task('patternlab:help', function(){
+    var patternlab = patternlab_engine();
+    patternlab.help();
+  })
+
+}

data/builder/pseudopattern_hunter.js

@@ -0,0 +1,78 @@
+/** 
+ * Heroku-Patterns - v0.2.0 - 2016
+ * 
+ * , and the web community.
+ * Licensed under the  license.
+ * 
+ * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice.
+ * 
+ **/(function () {
+	"use strict";
+
+	var pseudopattern_hunter = function(){
+
+		function findpseudopatterns(currentPattern, patternlab){
+
+			var glob = require('glob'),
+			fs = require('fs-extra'),
+			pa = require('./pattern_assembler'),
+			lh = require('./lineage_hunter'),
+			of = require('./object_factory'),
+			mustache = require('mustache');
+
+			var pattern_assembler = new pa();
+			var lineage_hunter = new lh();
+
+			//look for a pseudo pattern by checking if there is a file containing same name, with ~ in it, ending in .json
+			var needle = currentPattern.subdir + '/' + currentPattern.fileName + '~*.json';
+			var pseudoPatterns = glob.sync(needle, {
+				cwd: 'source/_patterns/', //relative to gruntfile
+				debug: false,
+				nodir: true,
+			});
+
+			if(pseudoPatterns.length > 0){
+
+				for(var i = 0; i < pseudoPatterns.length; i++){
+
+					if(patternlab.config.debug){
+						console.log('found pseudoPattern variant of ' + currentPattern.key);
+					}
+
+					//we want to do everything we normally would here, except instead head the pseudoPattern data
+					var variantFileData = fs.readJSONSync('source/_patterns/' + pseudoPatterns[i]);
+
+					//extend any existing data with variant data
+					variantFileData = pattern_assembler.merge_data(variantFileData, currentPattern.jsonFileData);
+
+					var variantName = pseudoPatterns[i].substring(pseudoPatterns[i].indexOf('~') + 1).split('.')[0];
+					var patternVariant = new of.oPattern(currentPattern.subdir, currentPattern.fileName + '-' + variantName + '.mustache', variantFileData);
+
+					//see if this file has a state
+					pattern_assembler.setPatternState(patternVariant, patternlab);
+
+					//use the same template as the non-variant
+					patternVariant.template = currentPattern.template;
+					patternVariant.extendedTemplate = currentPattern.extendedTemplate;
+
+					//find pattern lineage
+					lineage_hunter.find_lineage(patternVariant, patternlab);
+
+					//add to patternlab object so we can look these up later.
+					pattern_assembler.addPattern(patternVariant, patternlab);
+				}
+			}
+
+		}
+
+		return {
+			find_pseudopatterns: function(pattern, patternlab){
+				findpseudopatterns(pattern, patternlab);
+			}
+		};
+
+	};
+
+	module.exports = pseudopattern_hunter;
+
+}());

data/config.json

@@ -0,0 +1,34 @@
+ {
+ 	"patterns" : {
+ 		"source" : "./source/_patterns/",
+ 		"public" : "./public/patterns/"
+ 	},
+ 	"ignored-extensions" : ["scss", "DS_Store", "less"],
+ 	"ignored-directories" : ["scss"],
+ 	"debug": false,
+ 	"ishControlsVisible": {
+ 		"s": true,
+ 		"m": true,
+ 		"l": true,
+ 		"full": true,
+ 		"random": true,
+ 		"disco": true,
+ 		"hay": true,
+ 		"mqs": true,
+ 		"find": true,
+ 		"views-all": true,
+ 		"views-annotations": true,
+ 		"views-code": true,
+ 		"views-new": true,
+ 		"tools-all": true,
+ 		"tools-sync": true,
+ 		"tools-shortcuts": true,
+ 		"tools-docs": true
+ 	},
+  "patternStates": {
+      "homepage-emergency" : "inprogress"
+  },
+  "patternExportKeys": [],
+  "patternExportDirectory": "./pattern_exports/",
+  "baseurl" : ""
+ }

data/docs/Pattern Lab Node.md

@@ -0,0 +1,225 @@
+## Heroku WWW Marketing Pattern Lab
+
+This style guide uses [Pattern Lab](http://patternlab.io/). It combines platform-agnostic assets, like the Mustache-based patterns, the JavaScript-based viewer, and the self-contained webserver, with a Node-based "builder" that transforms and dynamically builds the Pattern Lab site.
+
+### Getting Started
+
+1. Run `npm install` from the command line
+2. Run `gulp` or `gulp serve` from the command line
+
+This creates all patterns, the styleguide, and the pattern lab site. `gulp serve` will have BrowserSync spin up and serve the files.
+
+### Command Line Interface
+
+The following are gulp task arguments you may execute:
+
+##### `patternlab`
+With no arguments, patternlab runs the full builder, compiling patterns, and constructing the front-end site.
+
+##### `patternlab:only_patterns`
+Compile the patterns only, outputting to ./public/patterns
+
+##### `patternlab:v`
+Retrieve the version of patternlab-node you have installed
+
+##### `patternlab:help`
+Get more information about patternlab-node, pattern lab in general, and where to report issues.
+
+##### Nav Bar Controls
+If you don't have a need for some of the nav-bar tools in the Pattern Lab frontend, you can turn them off in `config.json`.
+
+The current selection is as follows.
+
+```
+"ishControlsVisible": {
+	"s": true,
+	"m": true,
+	"l": true,
+	"full": true,
+	"random": true,
+	"disco": true,
+	"hay": true,
+	"mqs": false,
+	"find": false,
+	"views-all": true,
+	"views-annotations": true,
+	"views-code": true,
+	"views-new": true,
+	"tools-all": true,
+	"tools-follow": false,
+	"tools-reload": false,
+	"tools-shortcuts": false,
+	"tools-docs": true
+}
+```
+##### Pattern States
+You can set the state of a pattern by including it in `config.json` too. The out of the box styles are in progress (orange), in review (yellow), and complete (green).
+Pattern states should be lowercase and use hyphens where spaces are present.
+```
+"patternStates": {
+	"colors" : "inprogress",
+	"fonts" : "inreview",
+	"three-up" : "complete"
+}
+```
+
+##### Pattern Export
+`config.json` also has two properties that work together to export completed patterns for use in a production environment. Provide an array of keys and an output directory. Pattern Lab doesn't ship with any pattern export keys, but the default directory is `"./pattern_exports/"` created inside the install directory.
+
+```
+"patternExportKeys": ["molecules-primary-nav", "organisms-header", "organisms-header"],
+"patternExportDirectory": "./pattern_exports/"
+```
+
+Coupled with exported css (much easier to extract with existing tools like [grunt-contrib-copy](https://github.com/gruntjs/grunt-contrib-copy)), pattern export can help to maintain the relevancy of the design system by directly placing partials in a directory of your choosing.
+
+##### baseurl
+
+If your instance of Pattern Lab lives in a subdirectory of your server, for instance on github pages (ex: yourusername.github.io/patterns-demo/), then add the baseurl here. The baseurl is everything after the hostname - ie: `patterns-demo`
+
+```
+"baseurl" : "/patterns-demo"
+```
+
+Default: blank
+
+##### excluding patterns
+
+If you'd like to exclude an individual pattern you can do so by prepending the filename with an underscore, like: `_filename.mustache`
+
+You can also exclude complete directories by prepending the directory name with an underscore, like: `/_experiment/...`
+
+##### Debug Mode
+`patternlab.json` is a file created for debugging purposes. Set `debug` to true in `.config.json` to see all the secrets.
+
+##### Server & BrowserSync
+Running `gulp serve` will compile the Pattern Lab frontend and host it by default on <a href="http://localhost:3000">http://localhost:3000</a> via [BrowserSync](http://www.browsersync.io/docs/). After it starts, templates, `data.json`, and scss/css changes in your source code will be automatically injected into the page.
+
+You'll notice that if you have this open across different browsers, we do our best to keep the frontend in sync, but there is a known issue with synced navigation using the main menu.
+
+### Advanced Pattern Library Features
+
+##### Pattern Parameters
+Pattern parameters are a simple mechanism for replacing Mustache variables via attributes on a pattern partial tag rather than having to use a pattern-specific json file. They are especially useful when you want to supply distinct values for Mustache variables in a specific pattern partial instance that may be included multiple times in a molecule, template, or page.
+
+The basic syntax is this:
+
+```
+{{> molecules-single-comment(description: 'A life is like a garden. Perfect moments can be had, but not preserved, except in memory.') }}
+```
+
+The attributes listed in the pattern parameters should match Mustache variable names in your pattern. The values listed for each attribute will replace the Mustache variables. Again, pattern parameters are a simple find and replace of Mustache variables with the supplied values.
+
+Pattern parameters **do not** currently support the following:
+
+* sub-lists (e.g. iteration of a section),
+* and the use of long strings of text can be unwieldy
+* nested properties within the parameter data, such as `{{> molecules-single-comment(foo.bar: 'baz') }}`
+
+You can read the full documentation on pattern parameters here: [Using Pattern Parameters](http://patternlab.io/docs/pattern-parameters.html)
+
+##### Pseudo-Patterns
+Pseudo-patterns are meant to give developers the ability to build multiple and unique **rendered** patterns off of one base pattern and its mark-up while giving them control over the data that is injected into the base pattern. This feature is especially useful when developing template- and page-style patterns.
+
+Pseudo-patterns are, essentially, the pattern-specific JSON files that would accompany a pattern. Rather than require a Mustache pattern, though, pseudo-patterns are hinted so a developer can reference a shared pattern. The basic syntax:
+
+`patternName~pseudoPatternName.json`
+
+The tilde, `~`, and JSON extension denotes that this is a pseudo-pattern. `patternName` is the parent pattern that will be used when rendering the pseudo-pattern. `patternName` and `pseudoPatternName` are combined when adding the pseudo-pattern to the navigation.
+
+The JSON file itself works exactly like the [pattern-specific JSON file](http://patternlab.io/docs/data-pattern-specific.html). It has the added benefit that the pseudo-pattern will also import any values from the parent pattern's pattern-specific JSON file. Here is an example (which ships with the package) where we want to show an emergency notification on our homepage template. Our `03-templates/` directory looks like this:
+
+```
+00-homepage.mustache
+01-blog.mustache
+02-article.mustache
+```
+
+Our `00-homepage.mustache` template might look like this:
+
+```
+<div id="main-container">
+    {{# emergency }}
+        <div class="emergency">Oh Noes! Emergency!</div>
+    {{/ emergency }}
+    { ...a bunch of other content... }
+</div>
+```
+
+If our `_data.json` file doesn't give a value for `emergency` that section will never show up when `00-homepage.mustache` is rendered.
+
+We want to show both the regular and emergency states of the homepage but we don't want to duplicate the entire `00-homepage.mustache` template. That would be a maintenance nightmare. So let's add our pseudo-pattern:
+
+```
+00-homepage.mustache
+00-homepage~emergency.json
+01-blog.mustache
+02-article.mustache
+```
+
+In our pseudo-pattern, `00-homepage~emergency.json`, we add our `emergency` attribute:
+
+```
+{
+    "emergency": true
+}
+```
+
+Now when we generate our site we'll have our homepage template rendered twice. Once as the regular template and once as a pseudo-pattern showing the emergency section. Note that the pseudo-pattern will show up in our navigation as `Homepage Emergency`.
+
+##### Pattern Linking
+You can build patterns that link to one another to help simulate using a real website. This is especially useful when working with the Pages and Templates pattern types. The basic format is:
+
+`{{ link.pattern-name }}`
+
+For example, if you wanted to add a link to the `home page` template from your `blog` template you could write the following:
+
+`<a href="{{ link.templates-homepage }}">Home</a>`
+
+This would compile to:
+
+`<a href="/patterns/templates-homepage/templates-homepage.html">Home</a>`
+
+As you can see, it's a much easier way of linking patterns to one another.
+
+===
+
+## Working with Patterns
+
+(The following documentation is built for the PHP version of Pattern Lab, but most applies to the node version too. If you find omissions or mistakes please open an issue.)
+
+Patterns are the core element of Pattern Lab. Understanding how they work is the key to getting the most out of the system. Patterns use [Mustache](http://mustache.github.io/) so please read [Mustache's docs](http://mustache.github.io/mustache.5.html) as well.
+
+* [How Patterns Are Organized](http://patternlab.io/docs/pattern-organization.html)
+* [Adding New Patterns](http://patternlab.io/docs/pattern-add-new.html)
+* [Reorganizing Patterns](http://patternlab.io/docs/pattern-reorganizing.html)
+* [Including One Pattern Within Another via Partials](http://patternlab.io/docs/pattern-including.html)
+* [Managing Assets for a Pattern: JavaScript, images, CSS, etc.](http://patternlab.io/docs/pattern-managing-assets.html)
+* [Modifying the Pattern Header and Footer](http://patternlab.io/docs/pattern-header-footer.html)
+* [Using Pattern Parameters](http://patternlab.io/docs/pattern-parameters.html)
+* [Using Pattern State](http://patternlab.io/docs/pattern-states.html)
+* ["Hiding" Patterns in the Navigation](http://patternlab.io/docs/pattern-hiding.html)
+* [Adding Annotations](http://patternlab.io/docs/pattern-adding-annotations.html)
+* [Viewing Patterns on a Mobile Device](http://patternlab.io/docs/pattern-mobile-view.html)
+
+## Creating & Working With Dynamic Data for a Pattern
+
+The Node version of Pattern Lab utilizes Mustache as the template language for patterns. In addition to allowing for the [inclusion of one pattern within another](http://patternlab.io/docs/pattern-including.html) it also gives pattern developers the ability to include variables. This means that attributes like image sources can be centralized in one file for easy modification across one or more patterns. The Node version of Pattern Lab uses a JSON file, `source/_data/data.json`, to centralize many of these attributes.
+
+* [Introduction to JSON & Mustache Variables](http://patternlab.io/docs/data-json-mustache.html)
+* [Overriding the Central `data.json` Values with Pattern-specific Values](http://patternlab.io/docs/data-pattern-specific.html)
+* [Linking to Patterns with Pattern Lab's Default `link` Variable](http://patternlab.io/docs/data-link-variable.html)
+* [Creating Lists with Pattern Lab's Default `listItems` Variable](http://patternlab.io/docs/data-listitems.html)
+
+## Using Pattern Lab's Advanced Features
+
+By default, the Pattern Lab assets can be manually generated and the Pattern Lab site manually refreshed but who wants to waste time doing that? Here are some ways that Pattern Lab can make your development workflow a little smoother:
+
+* [Watching for Changes and Auto-Regenerating Patterns](http://patternlab.io/docs/advanced-auto-regenerate.html) - Node version coming soon
+* [Auto-Reloading the Browser Window When Changes Are Made](http://patternlab.io/docs/advanced-reload-browser.html) - Node version coming soon
+* [Multi-browser & Multi-device Testing with Page Follow](http://patternlab.io/docs/advanced-page-follow.html)
+* [Keyboard Shortcuts](http://patternlab.io/docs/advanced-keyboard-shortcuts.html)
+* [Special Pattern Lab-specific Query String Variables ](http://patternlab.io/docs/pattern-linking.html)
+* [Preventing the Cleaning of public/](http://patternlab.io/docs/advanced-clean-public.html) - Node version coming soon
+* [Modifying the Pattern Lab Nav](http://patternlab.io/docs/advanced-pattern-lab-nav.html) - Node version coming soon
+* [Editing the config.ini Options](http://patternlab.io/docs/advanced-config-options.html) - Node version coming soon

data/gulpfile.js

@@ -0,0 +1,148 @@
+'use strict'
+
+var pkg = require('./package.json'),
+    gulp = require('gulp'),
+    eol = require('os').EOL,
+    del = require('del'),
+    strip_banner = require('gulp-strip-banner'),
+    header = require('gulp-header'),
+    nodeunit = require('gulp-nodeunit'),
+    bourbon = require('node-bourbon'),
+    neat = require('node-neat'),
+		sass = require('gulp-sass'),
+    browserSync = require('browser-sync').create();
+
+require('gulp-load')(gulp);
+var banner = [ '/** ',
+  ' * <%= pkg.name %> - v<%= pkg.version %> - <%= today %>',
+  ' * ',
+  ' * <%= pkg.author %>, and the web community.',
+  ' * Licensed under the <%= pkg.license %> license.',
+  ' * ',
+  ' * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice.',
+  ' * ', ' **/'].join(eol);
+
+//load patternlab-node tasks
+gulp.loadTasks(__dirname+'/builder/patternlab_gulp.js');
+
+//clean patterns dir
+gulp.task('clean', function(cb){
+  del.sync(['./public/patterns/*'], {force: true});
+  cb();
+})
+
+//build the banner
+gulp.task('banner', function(){
+  return gulp.src([
+    './builder/patternlab.js',
+    './builder/object_factory.js',
+    './builder/lineage_hunter.js',
+    './builder/media_hunter.js',
+    './builder/patternlab_grunt.js',
+    './builder/parameter_hunter.js',
+    './builder/pattern_exporter.js',
+    './builder/pattern_assembler.js',
+    './builder/pseudopattern_hunter.js',
+    './builder/list_item_hunter.js'
+  ])
+    .pipe(strip_banner())
+    .pipe(header( banner, {
+      pkg : pkg,
+      today : new Date().getFullYear() }
+    ))
+    .pipe(gulp.dest('./builder'));
+})
+
+//copy tasks
+gulp.task('cp:js', function(){
+  return gulp.src('**/*.js', {cwd:'./source/js'})
+    .pipe(gulp.dest('./public/js'))
+});
+gulp.task('cp:img', function(){
+  return gulp.src(
+    [ '**/*.gif', '**/*.png', '**/*.jpg', '**/*.jpeg', '**/*.svg'  ],
+    {cwd:'./source/images'} )
+    .pipe(gulp.dest('./public/images'))
+});
+gulp.task('cp:font', function(){
+  return gulp.src(['*', '**/*' ],
+    {cwd:'./source/fonts'} )
+    .pipe(gulp.dest('./public/fonts'))
+});
+gulp.task('cp:data', function(){
+  return gulp.src('annotations.js', {cwd:'./source/_data'})
+    .pipe(gulp.dest('./public/data'))
+})
+gulp.task('cp:css', function(){
+  return gulp.src('./source/css/shibori.css')
+    .pipe(gulp.dest('./public/css'))
+    .pipe(browserSync.stream());
+})
+
+//server and watch tasks
+gulp.task('connect', ['lab'], function(){
+  browserSync.init({
+    server: {
+      baseDir: './public/'
+    }
+  });
+  gulp.watch('./source/css/shibori.css', ['cp:css']);
+
+  //suggested watches if you use scss
+  gulp.watch('./source/css/**/*.scss', ['sass:style']);
+  gulp.watch('./public/styleguide/css/*.scss', ['sass:styleguide']);
+
+  gulp.watch([
+    './source/_patterns/**/*.mustache',
+    './source/_patterns/**/*.json',
+    './source/_data/*.json'	],
+     ['lab-pipe'], function(){
+       browserSync.reload();
+     });
+
+})
+
+//unit test
+gulp.task('nodeunit', function(){
+  return gulp.src('./test/**/*_tests.js')
+    .pipe(nodeunit());
+})
+
+// sass tasks, turn on if you want to use
+gulp.task('sass:style', function(){
+	return gulp.src('./source/css/*.scss')
+		.pipe(sass({
+			outputStyle: 'expanded',
+			precision: 8,
+      includePaths: neat.includePaths
+		}))
+		.pipe(gulp.dest('./public/css'))
+    .pipe(browserSync.stream());
+})
+gulp.task('sass:styleguide', function(){
+	return gulp.src('./public/styleguide/css/*.scss')
+ 		.pipe(sass({
+ 			outputStyle: 'expanded',
+ 			precision: 8
+ 		}))
+ 		.pipe(gulp.dest('./public/styleguide/css'))
+    .pipe(browserSync.stream());
+})
+
+gulp.task('lab-pipe', ['lab'], function(cb){
+  cb();
+  browserSync.reload();
+})
+
+gulp.task('default', ['lab']);
+
+gulp.task('assets', ['cp:js', 'cp:img', 'cp:font', 'cp:data', 'sass:style', 'sass:styleguide']);
+gulp.task('prelab', ['clean', 'banner', 'assets']);
+gulp.task('lab', ['prelab', 'patternlab'], function(cb){cb();});
+gulp.task('patterns', ['patternlab:only_patterns']);
+gulp.task('serve', ['lab', 'connect']);
+gulp.task('serveprod', ['lab']);
+gulp.task('travis', ['lab', 'nodeunit']);
+
+gulp.task('version', ['patternlab:version']);
+gulp.task('help', ['patternlab:help']);

data/index.js

@@ -0,0 +1,20 @@
+var express = require('express');
+var app = express();
+
+app.set('port', (process.env.PORT || 5000));
+
+app.use(express.static(__dirname + '/public'));
+
+// views is directory for all template files
+app.set('views', __dirname + '/public');
+app.set('view engine', 'ejs');
+
+app.get('/', function(request, response) {
+  response.render('index');
+});
+
+app.listen(app.get('port'), function() {
+  console.log('Node app is running on port', app.get('port'));
+});
+
+

data/lib/shibori/version.rb

@@ -0,0 +1,3 @@
+module Shibori
+  VERSION = '1.0.0.beta1'
+end

data/lib/shibori.rb

@@ -0,0 +1,11 @@
+class Shibori
+  class Railtie < Rails::Railtie
+    initializer 'shibori' do
+      Rails.configuration.assets.paths += [
+        File.expand_path('../../source/css', __FILE__),
+        File.expand_path('../../source/js', __FILE__),
+        File.expand_path('../../source/fonts', __FILE__),
+      ]
+    end
+  end
+end

data/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "Heroku-Patterns",
+  "description": "Pattern Lab is a collection of tools to help you create atomic design systems. This is the node command line interface (CLI).",
+  "version": "0.2.0",
+  "scripts": {
+    "start": "node index.js",
+    "postinstall": "gulp default"
+  },
+  "dependencies": {
+    "browser-sync": "^2.8.2",
+    "del": "^1.2.1",
+    "diveSync": "^0.2.1",
+    "ejs": "2.3.3",
+    "express": "^4.13.3",
+    "fs-extra": "^0.14.0",
+    "glob": "^4.3.5",
+    "gulp": "^3.8.8",
+    "gulp-copy": "0.0.2",
+    "gulp-header": "^1.0.5",
+    "gulp-load": "^0.1.1",
+    "gulp-nodeunit": "0.0.5",
+    "gulp-sass": "^2.0.4",
+    "gulp-strip-banner": "0.0.2",
+    "html-entities": "^1.1.1",
+    "mustache": "^1.0.0",
+    "node-bourbon": "^4.2.3",
+    "node-neat": "^1.7.2",
+    "owl.carousel": "^2.1.4"
+  },
+  "keywords": [
+    "Pattern Lab",
+    "Atomic Web Design",
+    "Node",
+    "Grunt",
+    "Javascript"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/heroku/www-patterns.git"
+  },
+  "engines": {
+    "node": ">=0.1"
+  }
+}