docks_theme_api 1.0.2

data/gulpfile.js

@@ -0,0 +1,88 @@
+var gulp = require("gulp"),
+    plugins = require("gulp-load-plugins")();
+
+function load_task(task) {
+  return require("./tasks/gulp/" + task)(gulp, plugins);
+}
+
+//        ___                                         ___
+//       /  /\         ___      ___                  /  /\
+//      /  /:/_       /  /\    /__/|                /  /:/_
+//     /  /:/ /\     /  /:/   |  |:| ___     ___   /  /:/ /\
+//    /  /:/ /::\   /  /:/    |  |:|/__/\   /  /\ /  /:/ /:/_
+//   /__/:/ /:/\:\ /  /::\  __|__|:|\  \:\ /  /://__/:/ /:/ /\
+//   \  \:\/:/~/://__/:/\:\/__/::::\ \  \:\  /:/ \  \:\/:/ /:/
+//    \  \::/ /:/ \__\/  \:\  ~\~~\:\ \  \:\/:/   \  \::/ /:/
+//     \__\/ /:/       \  \:\   \  \:\ \  \::/     \  \:\/:/
+//       /__/:/         \__\/    \__\/  \__\/       \  \::/
+//       \__\/                                       \__\/
+
+gulp.task("styles", load_task("styles"));
+gulp.task("minify_styles", ["styles"], load_task("minify/styles"));
+
+//        ___          ___          ___                     ___
+//       /  /\        /  /\        /  /\       ___         /  /\     ___
+//      /  /:/_      /  /:/       /  /::\     /  /\       /  /::\   /  /\
+//     /  /:/ /\    /  /:/       /  /:/\:\   /  /:/      /  /:/\:\ /  /:/
+//    /  /:/ /::\  /  /:/  ___  /  /:/~/:/  /__/::\     /  /:/~/://  /:/
+//   /__/:/ /:/\:\/__/:/  /  /\/__/:/ /:/___\__\/\:\__ /__/:/ /://  /::\
+//   \  \:\/:/~/:/\  \:\ /  /:/\  \:\/:::::/   \  \:\/\\  \:\/://__/:/\:\
+//    \  \::/ /:/  \  \:\  /:/  \  \::/~~~~     \__\::/ \  \::/ \__\/  \:\
+//     \__\/ /:/    \  \:\/:/    \  \:\         /__/:/   \  \:\      \  \:\
+//       /__/:/      \  \::/      \  \:\        \__\/     \  \:\      \__\/
+//       \__\/        \__\/        \__\/                   \__\/
+
+gulp.task("scripts_code_quality", load_task("code_quality/scripts"));
+gulp.task("scripts", ["scripts_code_quality"], load_task("scripts"));
+gulp.task("minify_scripts", ["scripts"], load_task("minify/scripts"));
+gulp.task("scripts_spec", load_task("spec/scripts"));
+
+//        ___       ___                             ___          ___          ___
+//       /  /\     /  /\         ___       ___     /  /\        /  /\        /__/\
+//      /  /::\   /  /::\       /  /\     /  /\   /  /:/_      /  /::\       \  \:\
+//     /  /:/\:\ /  /:/\:\     /  /:/    /  /:/  /  /:/ /\    /  /:/\:\       \  \:\
+//    /  /:/~/://  /:/~/::\   /  /:/    /  /:/  /  /:/ /:/_  /  /:/~/:/   _____\__\:\
+//   /__/:/ /://__/:/ /:/\:\ /  /::\   /  /::\ /__/:/ /:/ /\/__/:/ /:/___/__/::::::::\
+//   \  \:\/:/ \  \:\/:/__\//__/:/\:\ /__/:/\:\\  \:\/:/ /:/\  \:\/:::::/\  \:\~~\~~\/
+//    \  \::/   \  \::/     \__\/  \:\\__\/  \:\\  \::/ /:/  \  \::/~~~~  \  \:\  ~~~
+//     \  \:\    \  \:\          \  \:\    \  \:\\  \:\/:/    \  \:\       \  \:\
+//      \  \:\    \  \:\          \__\/     \__\/ \  \::/      \  \:\       \  \:\
+//       \__\/     \__\/                           \__\/        \__\/        \__\/
+
+gulp.task("copy_pattern_library_styles", ["styles"], load_task("pattern_library/styles"));
+gulp.task("copy_pattern_library_scripts", ["scripts"], load_task("pattern_library/scripts"));
+gulp.task("pattern_library_styles", ["copy_pattern_library_styles"], load_task("pattern_library"));
+gulp.task("pattern_library_scripts", ["copy_pattern_library_scripts"], load_task("pattern_library"));
+gulp.task("pattern_library", load_task("pattern_library"));
+
+//        ___          ___                   ___          ___
+//       /__/\        /  /\         ___     /  /\        /__/\
+//      _\_ \:\      /  /::\       /  /\   /  /:/        \  \:\
+//     /__/\ \:\    /  /:/\:\     /  /:/  /  /:/          \__\:\
+//    _\_ \:\ \:\  /  /:/~/::\   /  /:/  /  /:/  ___  ___ /  /::\
+//   /__/\ \:\ \:\/__/:/ /:/\:\ /  /::\ /__/:/  /  /\/__/\  /:/\:\
+//   \  \:\ \:\/:/\  \:\/:/__\//__/:/\:\\  \:\ /  /:/\  \:\/:/__\/
+//    \  \:\ \::/  \  \::/     \__\/  \:\\  \:\  /:/  \  \::/
+//     \  \:\/:/    \  \:\          \  \:\\  \:\/:/    \  \:\
+//      \  \::/      \  \:\          \__\/ \  \::/      \  \:\
+//       \__\/        \__\/                 \__\/        \__\/
+
+gulp.task("browser_sync", load_task("browser_sync"))
+gulp.task("watch", ["browser_sync"], load_task("watch"));
+
+//        ___          ___          ___          ___
+//       /  /\        /  /\        /  /\        /  /\
+//      /  /:/       /  /::\      /  /::\      /  /:/_
+//     /  /:/       /  /:/\:\    /  /:/\:\    /  /:/ /\
+//    /  /:/  ___  /  /:/  \:\  /  /:/~/:/   /  /:/ /:/_
+//   /__/:/  /  /\/__/:/ \__\:\/__/:/ /:/___/__/:/ /:/ /\
+//   \  \:\ /  /:/\  \:\ /  /:/\  \:\/:::::/\  \:\/:/ /:/
+//    \  \:\  /:/  \  \:\  /:/  \  \::/~~~~  \  \::/ /:/
+//     \  \:\/:/    \  \:\/:/    \  \:\       \  \:\/:/
+//      \  \::/      \  \::/      \  \:\       \  \::/
+//       \__\/        \__\/        \__\/        \__\/
+
+gulp.task("code_quality", ["scripts_code_quality"]);
+gulp.task("spec", ["scripts_spec"]);
+gulp.task("default", ["styles", "scripts"]);
+gulp.task("production", ["minify_styles", "minify_scripts"]);

data/karma.conf.js

@@ -0,0 +1,6 @@
+var karma_configuration = require("./tasks/gulp/config").plugins.karma;
+
+module.exports = function(config) {
+  karma_configuration.logLevel = config.LOG_INFO;
+  config.set(karma_configuration);
+};

data/lib/docks_theme_api/components/base_component.rb

@@ -0,0 +1,99 @@
+require "forwardable"
+
+module Docks::Themes
+  class API < Base
+    module Components
+      def self.standardize_classes(classes, base_component = :base)
+        return {} if classes.nil?
+
+        if classes.kind_of?(Hash)
+          classes.each do |key, klass|
+            classes[key] = klass.kind_of?(String) ? klass.split(" ") : klass
+          end
+        else
+          classes = classes.kind_of?(String) ? classes.split(" ") : classes
+          class_hash = {}
+          class_hash[base_component] = classes
+
+          classes = class_hash
+        end
+
+        classes
+      end
+
+      class Base
+        extend Forwardable
+        attr_reader :block
+
+        def_delegators :@view, :concat, :capture, :render
+
+        def initialize(view, opts = {}, &block)
+          @view = view
+          @attributes = opts
+          @classes = Components.standardize_classes(opts.delete(:classes))
+          @block = block
+        end
+
+        def config
+          yield Config.new(self)
+        end
+
+        alias_method :configure, :config
+
+        def method_missing(meth, *args)
+           @attributes.key?(meth) ? @attributes[meth] : super
+        end
+
+        def respond_to?(meth)
+          @attributes.has_key?(meth) || super
+        end
+
+        def classes_for(subcomponent = :base)
+          @classes.fetch(subcomponent, []).join(" ")
+        end
+
+        alias_method :classes, :classes_for
+
+        def ==(other)
+          self.class == other.class && attributes == other.instance_variable_get(:@attributes)
+        end
+
+        def to_s; @attributes.to_s end
+        def inspect; to_s end
+      end
+
+      class Config
+        def initialize(component)
+          @component = component
+        end
+
+        def defaults(opts = {})
+          @component.instance_variable_get(:@attributes).merge!(opts) do |key, passed, default|
+            passed.nil? ? default : passed
+          end
+        end
+
+        def classes(default_classes = {})
+          default_classes = Components.standardize_classes(default_classes)
+          @component.instance_variable_get(:@classes).merge!(default_classes) do |key, passed, default|
+            passed.concat(default).uniq
+          end
+        end
+
+        def conditional_classes(opts)
+          if (attribute = opts.delete(:if))
+            classes(opts) if @component.respond_to?(attribute) && !!@component.send(attribute)
+          elsif (attribute = opts.delete(:unless))
+            classes(opts) if !@component.respond_to?(attribute) || !@component.send(attribute)
+          elsif (attribute = opts.delete(:with))
+            return unless block_given?
+            classes(yield @component.send(attribute))
+          elsif (attribute = opts.delete(:from))
+            return unless @component.respond_to?(attribute)
+            classes(opts.fetch(@component.send(attribute), nil))
+          end
+        end
+      end
+    end
+  end
+end

data/lib/docks_theme_api/components/code_block_component.rb

@@ -0,0 +1,10 @@
+require_relative "base_component.rb"
+
+module Docks::Themes
+  class API < Base
+    module Components
+      class CodeBlock < Base
+      end
+    end
+  end
+end

data/lib/docks_theme_api/components/popover_component.rb

@@ -0,0 +1,15 @@
+require_relative "base_component.rb"
+
+module Docks::Themes
+  class API < Base
+    module Components
+      class Popover < Base
+      def pane(options = {}, &block)
+        klass = "popover__pane"
+        klass << " popover__pane--fixed" if options.fetch(:fixed?, false)
+        concat "<div class='#{klass}'>#{capture(&block)}</div>"
+      end
+    end
+    end
+  end
+end

data/lib/docks_theme_api/components/table_component.rb

@@ -0,0 +1,34 @@
+require_relative "base_component.rb"
+
+module Docks::Themes
+  class API < Base
+    module Components
+      class Table < Base
+        def initialize(*args)
+          @cell_element = "td"
+          super
+        end
+
+        def header(&block)
+          old_cell_element, @cell_element = @cell_element, "th"
+          concat "<thead class='table__header'>#{capture(&block)}</thead>"
+          @cell_element = old_cell_element
+        end
+
+        def body(&block)
+          concat "<tbody class='table__body'>#{capture(&block)}</tbody>"
+        end
+
+        def row(&block)
+          concat "<tr class='table__row'>#{capture(&block)}</tr>"
+        end
+
+        def cell(content, options = {})
+          klass = "table__cell"
+          klass << " table__cell--centered" if options.fetch(:centered?, false)
+          "<#{@cell_element} class='#{klass}'>#{content}</#{@cell_element}>"
+        end
+      end
+    end
+  end
+end

data/lib/docks_theme_api/components/tablist_component.rb

@@ -0,0 +1,11 @@
+require_relative "base_component.rb"
+
+module Docks::Themes
+  class API < Base
+    module Components
+      class Tablist < Base
+        def tab(*args); @view.docks_component("tablist:tab", *args) end
+      end
+    end
+  end
+end

data/lib/docks_theme_api/components.rb

@@ -0,0 +1,21 @@
+require "pathname"
+
+Dir[File.expand_path("../components/*.rb", __FILE__)].each do |component|
+  require component
+end
+
+module Docks::Themes
+  class API < Base
+    module Components
+      def self.component_for(name)
+        const = name.to_s.split(/[^a-z]/i).map(&:capitalize).join("").to_sym
+        const_defined?(const) ? const_get(const) : Base
+      end
+
+      def self.template_path(name)
+        name = name.to_s.split(":")
+        API.instance.assets.path_for(File.join("components", name.first, "#{name.join("_")}.erb"))
+      end
+    end
+  end
+end

data/lib/docks_theme_api/helpers/ui_helper.rb

@@ -0,0 +1,69 @@
+require "docks/templates"
+require_relative "../components.rb"
+
+module Docks::Themes
+  class API < Base
+    module Helpers
+      def unique_iframe_id
+        @iframe_id ||= 0
+        @iframe_id += 1
+        "iframe--#{@iframe_id}"
+      end
+
+      def docks_icons
+        # html safe
+        File.read(API.instance.assets.path_for("images/icons.svg"))
+      end
+
+      def docks_icon(name, options = {})
+        klass = "icon"
+
+        size = options.delete(:size)
+        klass << " icon--#{size}" unless size.nil?
+
+        color = options.delete(:color)
+        klass << " icon--#{color.to_s.gsub("_", "-")}" unless color.nil?
+
+        "<svg class='#{klass}'><use xlink:href='#icon--#{name}'></use></svg>"
+      end
+
+      def docks_demo(demo, locals = {})
+        locals[:id] ||= unique_iframe_id
+        locals[:demo] = demo
+        render(Docks::Templates.demo.path, layout: Docks::Templates.demo.layout, locals: locals)
+      end
+
+      %w(
+        avatar
+        select
+        code_block
+        button
+        tablist
+        resizable
+        toggle
+        toggle_container
+        details_sheet
+        exploded
+        popover
+        xray
+        iframe
+        table
+      ).each do |component_name|
+        define_method "docks_#{component_name}".to_sym do |opts = {}, &block|
+          docks_component(component_name, opts, &block)
+        end
+      end
+
+      def docks_component(name, opts = {}, &block)
+        locals = {}
+        locals[name.to_s.split(":").last.to_sym] = locals[:component] = Components.component_for(name).new(self, opts, &block)
+
+        if block.nil?
+          render(Components.template_path(name), locals)
+        else
+          concat render(Components.template_path(name), locals)
+        end
+      end
+    end
+  end
+end

data/lib/docks_theme_api/theme.rb

@@ -0,0 +1,21 @@
+require "docks_theme_base"
+
+Dir[File.expand_path("../helpers/*.rb", __FILE__)].each do |helper|
+  require helper
+end
+
+module Docks
+  module Themes
+    class API < Base
+      def initialize
+        project_root = Pathname.new(File.expand_path("../../../", __FILE__))
+        @assets = Assets.new(root: project_root + "assets", source_root: project_root + "source")
+      end
+
+      def configure(config)
+        config.paginate = :pattern
+        config.helpers += [Helpers]
+      end
+    end
+  end
+end

data/lib/docks_theme_api.rb

@@ -0,0 +1 @@
+require_relative "docks_theme_api/theme.rb"

data/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "docks",
+  "version": "0.0.1",
+  "scripts": {
+    "test": "grunt spec",
+    "lint": "eslint src"
+  },
+  "description": "template-description",
+  "devDependencies": {
+    "babel": "^5.8.21",
+    "babel-eslint": "^4.0.5",
+    "babel-runtime": "^5.6.15",
+    "babelify": "^6.1.2",
+    "browser-sync": "^2.7.12",
+    "browserify": "^10.2.4",
+    "chai": "^3.2.0",
+    "es5-shim": "^4.1.10",
+    "es6-shim": "^0.28.1",
+    "eslint": "^1.0.0",
+    "gulp": "^3.9.0",
+    "gulp-autoprefixer": "^2.3.1",
+    "gulp-css-globbing": "^0.1.8",
+    "gulp-eslint": "^1.0.0",
+    "gulp-filesize": "0.0.6",
+    "gulp-load-plugins": "^1.0.0-rc.1",
+    "gulp-minify-css": "^1.1.6",
+    "gulp-notify": "^2.2.0",
+    "gulp-rename": "^1.2.2",
+    "gulp-sass": "^2.0.1",
+    "gulp-shell": "^0.4.2",
+    "gulp-sourcemaps": "^1.5.2",
+    "gulp-uglify": "^1.2.0",
+    "karma": "^0.13.5",
+    "karma-browserify": "^4.2.1",
+    "karma-chrome-launcher": "^0.2.0",
+    "karma-es6-shim": "^0.1.3",
+    "karma-firefox-launcher": "^0.1.6",
+    "karma-mocha": "^0.2.0",
+    "karma-phantomjs-launcher": "^0.2.0",
+    "karma-safari-launcher": "^0.1.1",
+    "karma-spec-reporter": "0.0.20",
+    "merge-stream": "^0.1.8",
+    "mocha": "^2.2.5",
+    "mustache": "^2.1.3",
+    "phantomjs": "^1.9.17",
+    "sinon": "^1.15.4",
+    "vinyl-buffer": "^1.0.0",
+    "vinyl-source-stream": "^1.1.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lemonmade/docks.git"
+  },
+  "bugs": {
+    "url": "https://github.com/lemonmade/docks/issues"
+  },
+  "dependencies": {
+    "whatwg-fetch": "^0.9.0"
+  }
+}