docks_theme_api 1.0.2

data/spec/lib/components_spec.rb

@@ -0,0 +1,30 @@
+require "spec_helper"
+
+describe Docks::Themes::API::Components do
+  subject { described_class }
+
+  describe ".component_for" do
+    it "returns the base component when no custom component class exists" do
+      expect(subject.component_for(:foo)).to be subject::Base
+    end
+
+    it "returns the custom component class if one exists" do
+      expect(subject.component_for(:code_block)).to be subject::CodeBlock
+      expect(subject.component_for("code_block")).to be subject::CodeBlock
+    end
+  end
+
+  describe ".template_path" do
+    let(:expected_path) {  }
+
+    it "returns the path to the component's template" do
+      path = subject.template_path(:code_block)
+      expect(path).to eq Docks::Themes::API.instance.assets.path_for("components/code_block/code_block.erb")
+      expect(File.exists?(path)).to be true
+    end
+
+    it "returns the path to a nested template" do
+      expect(subject.template_path("tablist:tab")).to eq Docks::Themes::API.instance.assets.path_for("components/tablist/tablist_tab.erb")
+    end
+  end
+end

data/spec/lib/helpers/ui_helper_spec.rb

@@ -0,0 +1,62 @@
+require "spec_helper"
+
+describe Docks::Themes::API::Helpers do
+  let(:includer) do
+    Class.new { include Docks::Themes::API::Helpers }.new
+  end
+
+  describe "#unique_iframe_id" do
+    it "generates a unique id each time" do
+      ids = (1..100).map { includer.unique_iframe_id }
+      expect(ids).to eq ids.uniq
+    end
+  end
+
+  describe "#docks_icons" do
+    it "returns the contents of the icon file" do
+      expect(File).to receive(:read).with(Docks::Themes::API.instance.assets.path_for("images/icons.svg")).and_return("foo")
+      expect(includer.docks_icons).to eq "foo"
+    end
+  end
+
+  describe "#docks_icon" do
+    it "creates an SVG icon with the passed name" do
+      expect(includer.docks_icon("foo")).to have_tag :svg, with: { class: "icon" }
+      expect(includer.docks_icon("foo")).to include "<use xlink:href='#icon--foo'></use>"
+    end
+
+    it "creates an SVG icon with the passed size" do
+      expect(includer.docks_icon("foo", size: 20)).to have_tag :svg, with: { class: ["icon--20"] }
+    end
+
+    it "creates and SVG icon with the passed color" do
+      expect(includer.docks_icon("foo", color: :blue)).to have_tag :svg, with: { class: ["icon--blue"] }
+      expect(includer.docks_icon("foo", color: :blue_darker)).to have_tag :svg, with: { class: ["icon--blue-darker"] }
+    end
+  end
+
+  describe "#docks_demo" do
+    it "renders the demo template/ layout" do
+      expect(includer).to receive(:render).with(Docks::Templates.demo.path, hash_including(layout: Docks::Templates.demo.layout)).and_return "foo"
+      expect(includer.docks_demo("<div></div>")).to eq "foo"
+    end
+
+    it "passes the passed demo along as the demo local" do
+      demo = "foo bar"
+      expect(includer).to receive(:render).with(anything, hash_including(locals: hash_including(demo: demo)))
+      includer.docks_demo(demo)
+    end
+
+    it "passes other locals along to the render call" do
+      locals = { foo: "bar", baz: "qux" }
+      expect(includer).to receive(:render).with(anything, hash_including(locals: hash_including(locals)))
+      includer.docks_demo("foo bar", locals)
+    end
+
+    it "defaults the id local to a unique iframe ID" do
+      expect(includer).to receive(:unique_iframe_id).and_return 1
+      expect(includer).to receive(:render).with(anything, hash_including(locals: hash_including(id: 1)))
+      includer.docks_demo("foo bar")
+    end
+  end
+end

data/spec/lib/theme_spec.rb

@@ -0,0 +1,25 @@
+require "spec_helper"
+
+describe Docks::Themes::API do
+  subject { described_class.instance }
+
+  describe "#configure" do
+    let(:config) { OpenStruct.new(paginate: false, helpers: [:foo]) }
+
+    it "updates pagination to be by pattern" do
+      subject.configure(config)
+      expect(config.paginate).to be :pattern
+    end
+
+    it "adds the helper module to helpers" do
+      original_helpers = config.helpers.dup
+      subject.configure(config)
+
+      expect(config.helpers.length).to be original_helpers.length + 1
+      expect(config.helpers).to include described_class::Helpers
+      original_helpers.each do |helper|
+        expect(config.helpers).to include helper
+      end
+    end
+  end
+end

data/spec/spec_helper.rb

@@ -0,0 +1,15 @@
+require "docks_theme_api"
+require "fileutils"
+require "ostruct"
+require "awesome_print"
+require "rspec-html-matchers"
+
+RSpec.configure do |config|
+  config.include RSpecHtmlMatchers
+
+  config.order = "random"
+
+  config.mock_with :rspec do |c|
+    c.syntax = :expect
+  end
+end

data/tasks/gulp/.eslintrc

@@ -0,0 +1,6 @@
+{
+  "env": {
+    "node": true,
+    "mocha": true
+  }
+}

data/tasks/gulp/browser_sync.js

@@ -0,0 +1,8 @@
+var config = require("./config").plugins.browser_sync,
+    browser_sync = require("browser-sync");
+
+module.exports = function(gulp) {
+  return function() {
+    browser_sync.init(config);
+  };
+};

data/tasks/gulp/code_quality/scripts.js

@@ -0,0 +1,10 @@
+var config = require("../config");
+
+module.exports = function(gulp, plugins) {
+  return function() {
+    return gulp.src(config.source.scripts.all)
+      .pipe(plugins.eslint())
+      .pipe(plugins.eslint.format())
+      .pipe(plugins.eslint.failOnError());
+  };
+};

data/tasks/gulp/config/index.js

@@ -0,0 +1,116 @@
+var path = require("path"),
+    sources, destination, config;
+
+sources = {
+  styles: {
+    all: ["source/**/*.scss"],
+    main: [
+      "source/pattern-library.scss",
+      "source/pattern-library-demo.scss"
+    ]
+  },
+  scripts: {
+    all: [
+      "source/**/!(spec)/*.js",
+      "!source/vendor/**/*.js"
+    ],
+    main: [
+      "source/pattern_library.js",
+      "source/pattern_library_demo.js"
+    ],
+    spec: ["source/**/*_spec.js"]
+  },
+  templates: {
+    all: ["assets/templates/erb/**/*.erb"]
+  }
+};
+
+destination = {
+  styles: "assets/styles",
+  scripts: "assets/scripts",
+  pattern_library: {
+    styles: "public/styles",
+    scripts: "public/scripts"
+  }
+};
+
+config = {
+  source: sources,
+  destination: destination,
+
+  plugins: {
+    // Might want to try this: https://www.npmjs.com/package/bs-html-injector
+    browser_sync: {
+      open: false,
+      files: [
+        "public/**/*.{css,js}",
+        "public/pattern-library/**/*.html"
+      ],
+      server: {
+        baseDir: "public"
+      }
+    },
+
+    browserify: {},
+
+    babel: {
+      optional: ["runtime"],
+      plugins: [
+        path.resolve(__dirname, "../utilities/babel/relative_require.js"),
+        path.resolve(__dirname, "../utilities/babel/spec_helper.js")
+      ],
+      stage: 0
+    },
+
+    docks: {
+      command: "docks"
+    },
+
+    css_globbing: {
+      extensions: [".scss", ".sass"]
+    },
+
+    sass: {
+      errLogToConsole: true
+    },
+
+    autoprefixer: {
+      browsers: ["last 2 versions", "> 5%"]
+    }
+  }
+};
+
+config.plugins.karma = (function() {
+  var files = config.source.scripts.spec,
+      preprocessors;
+  if(!Array.isArray(files)) { files = [files]; }
+
+  preprocessors = {};
+  files.map(function(file) {
+    preprocessors[file] = "browserify";
+  });
+
+  files = [
+    "https://code.jquery.com/jquery-1.11.2.min.js"
+  ].concat(files);
+
+  return {
+    basePath: "",
+    frameworks: ["mocha", "browserify", "es6-shim"],
+    files: files,
+    preprocessors: preprocessors,
+    browserify: {
+      debug: true,
+      transform: [
+        ["babelify", config.plugins.babel]
+      ]
+    },
+    reporters: ["dots"],
+    port: 9876,
+    colors: true,
+    autoWatch: true,
+    browsers: ["PhantomJS"]
+  };
+})();
+
+module.exports = config;

data/tasks/gulp/minify/scripts.js

@@ -0,0 +1,13 @@
+var path = require("path"),
+    config = require("../config");
+
+module.exports = function(gulp, plugins) {
+  return function() {
+    // TODO
+    return gulp.src(path.join(config.destination.scripts, "*.js"))
+      .pipe(plugins.rename({ suffix: ".min" }))
+      .pipe(plugins.uglify())
+      .pipe(gulp.dest(config.destination.scripts))
+      .pipe(plugins.filesize());
+  };
+};

data/tasks/gulp/minify/styles.js

@@ -0,0 +1,13 @@
+var path = require("path"),
+    config = require("../config");
+
+module.exports = function(gulp, plugins) {
+  return function() {
+    // TODO
+    return gulp.src(path.join(config.destination.styles, "!(min).css"))
+      .pipe(plugins.rename({ suffix: ".min" }))
+      .pipe(plugins.minifyCss())
+      .pipe(gulp.dest(config.destination.styles))
+      .pipe(plugins.filesize());
+  };
+};

data/tasks/gulp/pattern_library/index.js

@@ -0,0 +1,5 @@
+var config = require("../config");
+
+module.exports = function(gulp, plugins) {
+  return plugins.shell.task(config.plugins.docks.command);
+};

data/tasks/gulp/pattern_library/scripts.js

@@ -0,0 +1,10 @@
+var destinations = require("../config").destination,
+    browser_sync = require("browser-sync");
+
+module.exports = function(gulp, plugins) {
+  return function() {
+    return gulp.src(destinations.scripts + "/*.js")
+      .pipe(gulp.dest(destinations.pattern_library.scripts))
+      .pipe(browser_sync.stream());
+  };
+};

data/tasks/gulp/pattern_library/styles.js

@@ -0,0 +1,10 @@
+var destinations = require("../config").destination,
+    browser_sync = require("browser-sync");
+
+module.exports = function(gulp, plugins) {
+  return function() {
+    return gulp.src(destinations.styles + "/*.css")
+      .pipe(gulp.dest(destinations.pattern_library.styles))
+      .pipe(browser_sync.stream());
+  };
+};

data/tasks/gulp/scripts.js

@@ -0,0 +1,8 @@
+var browserify = require("browserify"),
+    browserify_bundler = require("./utilities/browserify_bundler"),
+    config = require("./config"),
+    bundler = browserify(config.source.scripts.main[0], config.plugins.browserify);
+
+module.exports = function(gulp, plugins) {
+  return browserify_bundler(bundler, gulp, plugins);
+};

data/tasks/gulp/spec/scripts.js

@@ -0,0 +1,11 @@
+var karma = require("karma"),
+    path = require("path");
+
+module.exports = function(gulp, plugins) {
+  return function(done) {
+    karma.server.start({
+      configFile: path.resolve(__dirname, "../../../karma.conf.js"),
+      singleRun: true
+    }, done);
+  };
+};

data/tasks/gulp/styles.js

@@ -0,0 +1,17 @@
+var config = require("./config"),
+    browser_sync = require("browser-sync"),
+    handle_errors = require("./utilities/handle_errors");
+
+module.exports = function(gulp, plugins) {
+  return function() {
+    return gulp.src(config.source.styles.main)
+      .pipe(plugins.cssGlobbing(config.plugins.css_globbing))
+      .pipe(plugins.sourcemaps.init())
+      .pipe(plugins.sass(config.plugins.sass))
+      .on("error", handle_errors)
+      .pipe(plugins.autoprefixer(config.plugins.autoprefixer))
+      .pipe(plugins.sourcemaps.write())
+      .pipe(gulp.dest(config.destination.styles))
+      .pipe(browser_sync.stream());
+  };
+};

data/tasks/gulp/utilities/babel/relative_require.js

@@ -0,0 +1,22 @@
+// source: http://stackoverflow.com/questions/31068698/importing-node-modules-from-root-directory-using-es6-and-babel-node
+
+module.exports = function(babel) {
+  var cwd = process.cwd();
+
+  return new babel.Transformer("babel_relative_require", {
+    ImportDeclaration: function(node, parent) {
+      var ref;
+
+      if (!babel.types.isLiteral(node.source)) { return node; }
+
+      ref = node.source.value;
+
+      // ensure a value, make sure it's not home relative e.g. ~/foo
+      if (!ref || ref[0] !== "~" || ref[1] === "/") { return node; }
+
+      node.source.value = cwd + "/source/" + node.source.value.slice(1);
+
+      return node;
+    }
+  });
+};

data/tasks/gulp/utilities/babel/spec_helper.js

@@ -0,0 +1,20 @@
+module.exports = function(babel) {
+  var cwd = process.cwd();
+
+  return new babel.Transformer("babel_spec_helper", {
+    ImportDeclaration: function(node, parent) {
+      var ref;
+
+      if (!babel.types.isLiteral(node.source)) { return node; }
+
+      ref = node.source.value;
+
+      // ensure a value, make sure it's not home relative e.g. ~/foo
+      if (!ref || ref !== "spec_helper") { return node; }
+
+      node.source.value = cwd + "/spec/assets/spec_helper.js";
+
+      return node;
+    }
+  });
+};

data/tasks/gulp/utilities/browserify_bundler.js

@@ -0,0 +1,22 @@
+var babelify = require("babelify"),
+    source = require("vinyl-source-stream"),
+    buffer = require("vinyl-buffer"),
+    config = require("../config"),
+    browser_sync = require("browser-sync"),
+    handle_errors = require("../utilities/handle_errors"),
+    path = require("path");
+
+module.exports = function(bundler, gulp, plugins) {
+  bundler.transform(babelify.configure(config.plugins.babel));
+
+  return function() {
+    return bundler.bundle()
+      .on("error", handle_errors)
+      .pipe(source(path.basename(config.source.scripts.main[0])))
+      .pipe(buffer())
+      .pipe(plugins.sourcemaps.init({ loadMaps: true }))
+      .pipe(plugins.sourcemaps.write())
+      .pipe(gulp.dest(config.destination.scripts))
+      .pipe(browser_sync.stream());
+  };
+};

data/tasks/gulp/utilities/handle_errors.js

@@ -0,0 +1,13 @@
+var notify = require("gulp-notify");
+
+module.exports = function() {
+  var args = Array.prototype.slice.call(arguments);
+
+  notify.onError({
+    title: "Compile Error",
+    message: "<%= error %>"
+  }).apply(this, args);
+
+  // Keep gulp from hanging on this task
+  this.emit("end");
+};

data/tasks/gulp/watch.js

@@ -0,0 +1,9 @@
+var sources = require("./config").source;
+
+module.exports = function(gulp) {
+  return function() {
+    gulp.watch(sources.styles.all, ["pattern_library_styles"]);
+    gulp.watch(sources.scripts.all, ["pattern_library_scripts"]);
+    gulp.watch(sources.templates.all, ["pattern_library"]);
+  };
+};

data/tasks/rake/rspec.rake

@@ -0,0 +1,7 @@
+require "rspec/core/rake_task"
+
+RSpec::Core::RakeTask.new(:spec) do |task|
+  task.rspec_opts = "--color --tty"
+end
+
+task default: :spec

data/tasks/rake/rubocop.rake

@@ -0,0 +1,8 @@
+require "rubocop/rake_task"
+
+desc "Run RuboCop on the lib directory"
+
+RuboCop::RakeTask.new(:rubocop) do |task|
+  task.patterns = %w(lib/**/*.rb)
+  task.fail_on_error = false
+end

data/tasks/rake/templates.rake

@@ -0,0 +1,50 @@
+require "html2haml"
+require "html2slim"
+require "fileutils"
+
+def from_root(file)
+  file.sub(File.expand_path("../../", __FILE__), "").sub(/^#{File::SEPARATOR}/, "")
+end
+
+def erb_templates
+  Dir[File.expand_path("../../../assets/templates/erb/**/*.erb", __FILE__)].sort
+end
+
+def corresponding_template(template, options = {})
+  language = options.fetch(:language)
+  template.sub("templates/erb", "templates/#{language}").sub(%r{\.erb$}, ".#{language}")
+end
+
+def convert_haml
+  erb_templates.each do |template|
+    haml_template = corresponding_template(template, language: :haml)
+    FileUtils.mkdir_p(File.dirname(haml_template))
+    `html2haml --ruby19-attributes '#{template}' '#{haml_template}'`
+
+    puts "Converted '#{from_root(template)}' to '#{from_root(haml_template)}'"
+  end
+end
+
+def convert_slim
+  erb_templates.each do |template|
+    slim_template = corresponding_template(template, language: :slim)
+    FileUtils.mkdir_p(File.dirname(slim_template))
+    File.open(slim_template, "w") { |file| file.write(HTML2Slim.convert!(template, :erb)) }
+
+    puts "Converted '#{from_root(template)}' to '#{from_root(slim_template)}'"
+  end
+end
+
+namespace :templates do
+  desc "convert all ERB templates that are available to the user to other template languages"
+
+  task :convert do
+    convert_haml
+    convert_slim
+
+    puts ""
+    Docks::Messenger.warn "Make sure to check the output of the above conversions to make sure that everything went OK!"
+  end
+end
+
+