playbook_ui 2.5.0

data/app/helpers/playbook/application_helper.rb

@@ -0,0 +1,19 @@
+require "webpacker"
+require "webpacker/react/railtie" if defined?(Rails)
+require "webpacker/react/helpers"
+require "webpacker/react/component"
+
+module Playbook
+  module ApplicationHelper
+    include ::Webpacker::Helper
+    include ::Webpacker::React::Helpers
+
+    def current_webpacker_instance
+      Playbook.webpacker
+    end
+
+    # def react_component(component_name, props = {}, options = {})
+    #   ::Webpacker::React::Component.new(component_name).render(props, options)
+    # end
+  end
+end

data/app/helpers/playbook/layout_helper.rb

@@ -0,0 +1,7 @@
+module Playbook
+    module LayoutHelper
+        def layout(name, &block)
+            Dir["../*"]
+        end
+    end
+end

data/app/helpers/playbook/pb_doc_helper.rb

@@ -0,0 +1,68 @@
+module Playbook
+  module PbDocHelper
+    def pb_title(title)
+      return title.remove('pb_').titleize.tr("_", " ")
+    end
+
+    def has_kit_type?(kit, type)
+      type ||= "rails"
+      if type == "rails"
+        return Dir["playbook/pb_#{kit}/*.html.erb"].empty?
+      elsif type == "react"
+        return Dir["playbook/pb_#{kit}/*.jsx"].empty?
+      end
+    end
+
+    def pb_kit(kit: "", type: "rails")
+      @type = type
+      @kit_examples = get_kit_examples(kit, type)
+      return render partial: "playbook/config/kit_example"
+    end
+
+    def pb_kits(type: "rails")
+      display_kits = []
+      MENU["kits"].sort.each do |kit|
+        title = render_clickable_title(kit)
+        ui = raw("<div class='pb--docItem-ui'>
+            #{pb_kit(kit: kit, type: type)}</div>")
+        display_kits << title+ui
+      end
+      return raw("<div class='pb--docItem'>"+display_kits.map {
+          |k| k }.join("</div><div class='pb--docItem'>")+"</div>")
+    end
+
+    def pb_kit_api(kit)
+      kit_class_obj = get_class_name(kit)
+      @kit_api = kit_class_obj.instance_method(:initialize).parameters.map(&:last)
+      return render partial: "playbook/config/pb_kit_api"
+    end
+
+  private
+    def get_kit_examples(kit, type)
+      example_file = File.join(Playbook::Engine.root,
+          "app", "pb_kits", "playbook", "pb_#{kit}", "docs", "example.yml")
+      if File.exist? example_file
+        examples_list = YAML.load_file(example_file)
+        examples_list = examples_list.inject({}){|item,(k,v)| item[k.to_sym] = v; item}
+        all_kit_examples = {}
+        all_kit_examples[:kit] = kit
+        all_kit_examples[:examples] = examples_list[:examples][type]
+        return all_kit_examples
+      else
+        return {}
+      end
+    end
+
+    def get_class_name(kit)
+      folder = is_subkit?(kit) ? pb_camelize(kit.split('/')[0]) : pb_camelize(kit)
+      item = is_subkit?(kit) ? pb_camelize(kit.split('/')[-1]) : pb_camelize(kit)
+      return "Playbook::Pb#{folder}::#{item}".safe_constantize
+    end
+
+    def render_clickable_title(kit)
+      return render :inline => "<a href='#{kit_show_path(kit)}'>
+          #{pb_rails(:title, props: { text: pb_title(kit),
+          tag: 'h3', size: '2' })}</a>"
+    end
+  end
+end

data/app/helpers/playbook/pb_kit_helper.rb

@@ -0,0 +1,45 @@
+require "webpacker/react/railtie" if defined?(Rails)
+require "webpacker/react/helpers"
+require "webpacker/react/component"
+
+module Playbook
+  module PbKitHelper
+    def pb_rails(kit, props:{}, &block)
+      render_rails(kit, props, &block)
+    end
+
+    def pb_react(kit, props:{}, options:{})
+      render_react(kit, props, options)
+    end
+
+
+  private
+
+    def render_rails(kit, props, &block)
+      props = defined?(props) && !props.nil? ? props : {}
+      kit_class_obj = get_class_name(kit)
+      return render(partial: kit_class_obj.new(**props, &block), as: :object)
+    end
+
+    def render_react(kit, props, options)
+      if defined?(props[:props]) && !props[:props].nil?
+        props = props[:props] if props.keys[0] === :props
+      end
+      return ::Webpacker::React::Component.new(kit.camelize).render(props, options)
+    end
+
+    def is_subkit?(kit)
+      return kit.match(/[\/\\]/)
+    end
+
+    def pb_camelize(string)
+      return string.to_s.tr(" ", "_").camelize
+    end
+
+    def get_class_name(kit)
+      folder = is_subkit?(kit) ? pb_camelize(kit.split('/')[0]) : pb_camelize(kit)
+      item = is_subkit?(kit) ? pb_camelize(kit.split('/')[-1]) : pb_camelize(kit)
+      return "Playbook::Pb#{folder}::#{item}".safe_constantize
+    end
+  end
+end

data/app/helpers/playbook/redcarpet_helper.rb

@@ -0,0 +1,154 @@
+require 'redcarpet'
+require 'rouge'
+require 'rouge/plugins/redcarpet'
+require 'action_view'
+
+module Playbook
+  module RedcarpetHelper
+
+    def markdown(text)
+      options = {
+        filter_html:     false,
+        hard_wrap:       true,
+        link_attributes: { rel: 'nofollow', target: "_blank" },
+        space_after_headers: true,
+        fenced_code_blocks: true,
+        no_styles: false,
+        safe_links_only: true
+      }
+
+      extensions = {
+        autolink:           true,
+        superscript:        true,
+        fenced_code_blocks: true,
+        tables: true,
+        disable_indented_code_blocks: false,
+        strikethrough: true,
+        underline: true,
+        highlight: true,
+        footnotes: true,
+        with_toc_data: true,
+      }
+
+      renderer = HTMLBlockCode.new(options)
+      markdown = Redcarpet::Markdown.new(renderer, extensions)
+
+      markdown.render(text).html_safe
+    end
+
+    def rouge(text, language)
+      formatter = Rouge::Formatters::HTML.new(css_class: 'highlight')
+      lexer = Rouge::Lexer.find(language)
+      formatter.format(lexer.lex(text))
+    end
+
+    def rouge_markdown(text)
+      render_options = {
+          filter_html: true,
+          hard_wrap: true,
+          link_attributes: { rel: 'nofollow' }
+      }
+      renderer = HTML.new(render_options)
+
+      extensions = {
+          autolink: true,
+          fenced_code_blocks: true,
+          lax_spacing: true,
+          no_intra_emphasis: true,
+          strikethrough: true,
+          superscript: true
+      }
+      markdown = Redcarpet::Markdown.new(renderer, extensions)
+      markdown.render(text)
+    end
+  end
+
+  class HTML < Redcarpet::Render::HTML
+    include Rouge::Plugins::Redcarpet
+  end
+
+
+  class HTMLBlockCode < Redcarpet::Render::HTML
+    include ActionView::Helpers::AssetTagHelper
+    def header(title, level)
+      if level == 7
+        @headers ||= []
+        permalink = title.gsub(/\W+/, "-")
+        if @headers.include?(permalink)
+          permalink += "_1"
+          loop do
+            break if !@headers.include?(permalink)
+            permalink.gsub!(/\_(\d+)$/, "_#{$1.to_i + 1}")
+          end
+        end
+        @headers << permalink
+        %(\n<a name="#{permalink}" class="markdown-header-anchor anchor" href="##{permalink}"><span class="fa fa-link anchor-icon"></span></a><h#{level} id=\"#{permalink}\">#{title}</h#{level}>\n)
+      else
+        %(\n<h#{level}>#{title}</h#{level}>\n)
+      end
+    end
+
+    def image(link, title, alt_text)
+      image_tag(link, title: title, alt: alt_text, class: "imageloader lazyload")
+    end
+
+    def preprocess(full_document)
+      full_document.gsub(/\[component (.*)\]/) do
+        @string = $1
+        @default_height = '160'
+        @attr = ['', @default_height]
+
+        # Set src from attributes
+        @string.gsub(/src="(.*?)"/) do
+          @attr[0] = $1
+        end
+
+        # Set height from attributes
+        @string.gsub(/height="(.*?)"/) do
+          if $1
+            @attr[1] = $1
+          else
+            @attr[1] = @default_height
+          end
+        end
+
+        %(\n<div class="uix-component-frame"><iframe scrolling="no" id="component-preview" src="#{@attr[0]}" width="100%" height="#{@attr[1]}"></iframe><a href="#{@attr[0]}" target="_blank" class="uix-component-link">View component</a></div>\n)
+      end
+    end
+
+    def list(contents, list_type)
+      @contents = contents
+      @list_items = contents.split("\n")
+
+      if @list_items[0].include? "[do]" or @list_items[0].include? "[dont]"
+        @element_items = []
+        @list_items.each do |item, index|
+          item.gsub(/\<li>(.*)\<\/li>/) do
+            @element_items.push($1);
+          end
+        end
+
+        # Doing both because we could have either/both
+        # clean up
+        @dont_items, @trash_items_dont = @element_items.partition { |x, i|  x.include? "[dont]" }
+        @do_items, @trash_items_do = @element_items.partition { |x, i|  x.include? "[do]" }
+
+        @do_list = []
+        @do_items.each do |item, index|
+          @do_list.push("<li>#{item.sub('[do] ', '')}</li>")
+        end
+        @do_list = "<ul class='uix-ruleset do-list'>#{@do_list.join("")}</ul>"
+
+        @dont_list = []
+        @dont_items.each do |item, index|
+          @dont_list.push("<li>#{item.sub('[dont] ', '')}</li>")
+        end
+        @dont_list = "<ul class='uix-ruleset dont-list'>#{@dont_list.join("")}</ul>"
+
+        "<div class='row uix-ruleset-block'><div class='col-sm-6'>#{@do_list}</div><div class='col-sm-6'>#{@dont_list}</div></div>"
+      else
+        @contents
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/config/_kit_example.html.slim

@@ -0,0 +1,5 @@
+- if !@kit_examples[:examples].nil?
+  - @kit_examples[:examples].each do |kit_example|
+    - kit_example.each do |key, item|
+      .pb--doc class=(key.include?("_dark") ? "dark_ui" : "light_ui")
+        = render partial: "playbook/config/kit_ui", locals: { key: key, type: @type, item: item }

data/app/pb_kits/playbook/config/_kit_ui.html.slim

@@ -0,0 +1,24 @@
+- type ||= "rails"
+- file_name = type == "rails" ? "_#{key}.html.erb" : "_#{key}.jsx"
+- contents = File.read("#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{@kit_examples[:kit]}/docs/#{file_name}")
+
+.pb--kit-example
+  = pb_rails("caption", props: { text: item })
+  br
+  - if type == "rails"
+    = render partial: "playbook/pb_#{@kit_examples[:kit]}/docs/#{key}"
+  - elsif type == "react"
+    = pb_react(key.camelize)
+  br
+
+.pb--codeControls
+  ul
+    li
+      a href="#" data-toggle="code_example" Code Example
+
+.pb--codeCopy data-action="toggle" data-togglable="code_example"
+  a.pb--close-toggle href="#" data-toggle="false" Close
+  - if type == "rails"
+    = raw rouge(contents, "erb")
+  - elsif type == "react"
+    = raw rouge(contents, "erb")

data/app/pb_kits/playbook/config/_pb_kit_api.html.erb

@@ -0,0 +1,18 @@
+<% if defined?(@kit_api) && @kit_api.present? %>
+  <div data-action="toggle" data-togglable="prop_example" class="pb--propsTable">
+    <table class="pb--propsTable--table">
+      <thead>
+        <tr>
+          <th>Available Props</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% @kit_api.each_with_index do |(key,value),index| %>
+          <tr>
+            <td><%= key %></td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+<% end %>

data/app/pb_kits/playbook/packs/application.js

@@ -0,0 +1,12 @@
+import "../../../../fonts/fontawesome.js"
+import "../../../../fonts/regular.js"
+import "./main.scss";
+import "./kits.js";
+
+$(document).on('click', '[data-toggle]', function(e){
+  e.preventDefault();
+  var kit_container = $(this).closest('.pb--doc');
+  var toggle_target = $(this).data('toggle');
+  $(kit_container).find('[data-action="toggle"]').hide();
+  $(kit_container).find('[data-togglable="'+toggle_target+'"]').show();
+});

data/app/pb_kits/playbook/packs/examples.js

@@ -0,0 +1,37 @@
+import WebpackerReact from "webpacker-react";
+
+import * as body from "pb_body/docs";
+WebpackerReact.setup (body);
+
+import * as button from "pb_button/docs";
+WebpackerReact.setup (button);
+
+import * as caption from "pb_caption/docs";
+WebpackerReact.setup (caption);
+
+import * as card from "pb_card/docs";
+WebpackerReact.setup (card);
+
+import * as image from "pb_image/docs";
+WebpackerReact.setup (image);
+
+import * as layout from "pb_layout/docs";
+WebpackerReact.setup (layout);
+
+import * as list from "pb_list/docs";
+WebpackerReact.setup (list);
+
+import * as table from "pb_table/docs";
+WebpackerReact.setup (table);
+
+import * as title from "pb_title/docs";
+WebpackerReact.setup (title);
+
+import * as vertical_nav from "pb_vertical_nav/docs";
+WebpackerReact.setup (vertical_nav);
+
+import * as avatar from "pb_avatar/docs";
+ WebpackerReact.setup (avatar);
+
+import * as input from "pb_input/docs";
+ WebpackerReact.setup (input);

data/app/pb_kits/playbook/packs/kits.js

@@ -0,0 +1,11 @@
+import "./pb_body.js";
+import "./pb_button.js";
+import "./pb_caption.js";
+import "./pb_card.js";
+import "./pb_title.js";
+import "./pb_layout.js";
+import "./pb_vertical_nav.js";
+import "./pb_image.js";
+import "./pb_table.js";
+import "./pb_avatar.js";
+import "./pb_input.js";

data/app/pb_kits/playbook/packs/main.scss

@@ -0,0 +1,9 @@
+// SCAFFOLD
+@import "site_styles/scaffold";
+
+// KITS
+@import "site_styles/kit_style_index";
+
+// APP STYLES
+@import "site_styles/site-style";
+@import "site_styles/docs/all";

data/app/pb_kits/playbook/packs/pb_avatar.js

@@ -0,0 +1,4 @@
+import Avatar from "pb_avatar/_avatar.jsx";
+import WebpackerReact from "webpacker-react";
+
+WebpackerReact.setup({ Avatar });

data/app/pb_kits/playbook/packs/pb_body.js

@@ -0,0 +1,4 @@
+import Body from "pb_body/_body.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ Body });

data/app/pb_kits/playbook/packs/pb_button.js

@@ -0,0 +1,4 @@
+import Button from "pb_button/_button.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ Button});