playbook_ui 7.16.0.pre.alpha3 → 8.0.0.pre.alpha4

data/app/pb_kits/playbook/pb_form/{_form_simple_form.html.erb → simple_form.html.erb}

@@ -1,8 +1,8 @@
-<%= simple_form_for *object.merged_form_system_options do |form| %>
-  <% instance_exec form, &object.children %>
+<%= simple_form_for model, options do |form| %>
+  <% instance_exec form, &children %>
 <% end %>
 
-<% if object.validate %>
+<% if validate %>
   <% content_for :pb_js do %>
     <%= javascript_tag do %>
       window.addEventListener('DOMContentLoaded', function() {

data/app/pb_kits/playbook/pb_form/simple_form.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+if defined?(SimpleForm)
+module Playbook
+  module PbForm
+    class SimpleForm < Playbook::KitBase
+      class FormBuilder < ::SimpleForm::FormBuilder
+        include ::Playbook::PbForm::FormBuilder
+
+        def input(attribute_name, options = {}, &block)
+          super(
+            attribute_name,
+            options.deep_merge(label: false, input_html: {
+                            props: {
+                              label: true,
+                            },
+                          }),
+            &block
+          )
+        end
+      end
+
+      prop :options, type: Playbook::Props::Hash, default: {}
+      prop :validate, type: Playbook::Props::Boolean, default: false
+
+      def options
+        {
+          builder: Playbook::PbForm::SimpleForm::FormBuilder,
+          html: html_options,
+          data: data,
+          url: "",
+        }.merge(prop(:options))
+      end
+
+      def model
+        prop(:options).fetch(:model, nil)
+      end
+
+      def data
+        prop(:data).merge("pb-form-validation" => validate)
+      end
+
+      def classname
+        [generate_classname("pb-form"), html[:class]].join(" ")
+      end
+
+      def html
+        prop(:options).fetch(:html, {})
+      end
+
+      def render_in(view_context, &_block)
+        super(view_context, &nil)
+      end
+
+    private
+
+      def html_options
+        html.merge(class: classname)
+      end
+    end
+  end
+end
+end

data/app/pb_kits/playbook/pb_layout/{_item.html.erb → item.html.erb}

@@ -2,5 +2,5 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-  <%= capture(&object.children) %>
+  <%= content %>
 <% end %>

data/app/pb_kits/playbook/pb_layout/item.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbLayout
-    class Item
-      include Playbook::Props
-
-      partial "pb_layout/item"
-
+    class Item < Playbook::KitBase
       prop :size, type: Playbook::Props::Enum,
                   values: %w[sm md lg],
                   default: "sm"

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -40,6 +40,7 @@ module Playbook
           id: id,
           isMulti: true,
           label: label,
+          name: name,
           options: options,
           placeholder: placeholder,
         }

data/lib/playbook.rb

@@ -9,8 +9,10 @@ require "view_component/engine"
 require "playbook/props"
 require "playbook/version"
 require "playbook/pb_kit_helper"
+require "playbook/pb_doc_helper"
 require "playbook/kit_base"
-require "playbook/markdown/template_handler"
+require "playbook/kit_resolver"
+require "playbook/markdown"
 require "playbook/engine" if defined?(Rails)
 
 module Playbook
@@ -19,12 +21,16 @@ module Playbook
   class ConflictingPropsError < StandardError; end
   class MissingPropError < StandardError; end
 
-  class << self
-    def webpacker
-      @webpacker ||= ::Webpacker::Instance.new(
-        root_path: ROOT_PATH,
-        config_path: ROOT_PATH.join("config/webpacker.yml")
-      )
-    end
+module_function
+
+  def webpacker
+    @webpacker ||= ::Webpacker::Instance.new(
+      root_path: ROOT_PATH,
+      config_path: ROOT_PATH.join("config/webpacker.yml")
+    )
+  end
+
+  def kit_path(kit, *args)
+    Playbook::Engine.root.join("app/pb_kits/playbook/pb_#{kit}", *args)
   end
 end

data/lib/playbook/classnames.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Playbook
+  module Classnames
+    def self.included(base)
+      base.prop :classname
+      base.prop :dark, type: Playbook::Props::Boolean, default: false
+    end
+
+    def generate_classname(*name_parts, separator: "_")
+      [
+        name_parts.compact.join(separator),
+        prop(:classname),
+        spacing_props,
+        dark_props,
+        max_width_props,
+        z_index_props,
+      ].compact.join(" ")
+    end
+
+    def generate_classname_without_spacing(*name_parts, separator: "_")
+      [
+        name_parts.compact.join(separator),
+        prop(:classname),
+      ].compact.join(" ")
+    end
+
+  private
+
+    def dark_props
+      dark ? "dark" : nil
+    end
+  end
+end

data/lib/playbook/engine.rb

@@ -1,4 +1,5 @@
 # frozen_string_literal: true
+
 require "sassc-rails"
 require "slim-rails"
 
@@ -13,18 +14,11 @@ module Playbook
     config.view_component.render_monkey_patch_enabled = false
 
     config.assets.paths ||= []
-    config.assets.paths << "#{Gem.loaded_specs['playbook_ui'].full_gem_path}/fonts"
-    config.assets.paths << "#{Gem.loaded_specs['playbook_ui'].full_gem_path}/app/pb_kits/playbook/pb_*"
+    config.assets.paths << Playbook::Engine.root.join("fonts")
+    config.assets.paths << Playbook::Engine.root.join("app/pb_kits/playbook/pb_*")
 
     config.sass.load_paths ||= []
-    config.sass.load_paths << "#{Gem.loaded_specs['playbook_ui'].full_gem_path}/app/pb_kits/playbook"
-
-    initializer "playbook_ui.add_view_paths", after: :add_view_paths do |_app|
-      ActiveSupport.on_load(:action_controller) do
-        append_view_path "#{Gem.loaded_specs['playbook_ui'].full_gem_path}/app/pb_kits/playbook"
-        append_view_path "#{Gem.loaded_specs['playbook_ui'].full_gem_path}/app/pb_kits/playbook/config"
-      end
-    end
+    config.sass.load_paths << Playbook::Engine.root.join("app/pb_kits/playbook")
 
     initializer "webpacker.proxy" do |app|
       insert_middleware = begin

data/lib/playbook/kit_base.rb

@@ -1,9 +1,21 @@
 # frozen_string_literal: true
 
+require "playbook/classnames"
+require "playbook/spacing"
+require "playbook/z_index"
+
 module Playbook
   class KitBase < ViewComponent::Base
-    include Playbook::Props
     include Playbook::PbKitHelper
+    include Playbook::Props
+    include Playbook::Classnames
+    include Playbook::Spacing
+    include Playbook::ZIndex
+
+    prop :id
+    prop :data, type: Playbook::Props::Hash, default: {}
+    prop :aria, type: Playbook::Props::Hash, default: {}
+    prop :children, type: Playbook::Props::Proc
 
     def object
       self

data/lib/playbook/kit_resolver.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Playbook
+  class KitResolver
+    def self.resolve(*args)
+      @resolver ||= new
+      @resolver.resolve(*args)
+    end
+
+    def initialize
+      @cache = Hash.new do |cache, kit_name|
+        is_subkit = kit_name.match(%r{[/\\]})
+        folder = is_subkit ? kit_name.split("/")[0] : kit_name
+        item = is_subkit ? kit_name.split("/")[-1] : kit_name
+        @cache[kit_name] = "Playbook::Pb#{folder.camelize}::#{item.camelize}"
+      end
+    end
+
+    def resolve(kit_name)
+      @cache[kit_name].safe_constantize
+    end
+  end
+end

data/lib/playbook/markdown.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+require "playbook/markdown/template_handler"
+require "playbook/markdown/helper"

data/lib/playbook/markdown/helper.rb

@@ -0,0 +1,153 @@
+# frozen_string_literal: true
+
+require "redcarpet"
+require "rouge"
+require "rouge/plugins/redcarpet"
+require "action_view"
+
+module Playbook
+  module Markdown
+    module Helper
+      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(scope: ".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 unless @headers.include?(permalink)
+
+              permalink.gsub!(/\_(\d+)$/, "_#{Regexp.last_match(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 = Regexp.last_match(1)
+          @default_height = "160"
+          @attr = ["", @default_height]
+
+          # Set src from attributes
+          @string.gsub(/src="(.*?)"/) do
+            @attr[0] = Regexp.last_match(1)
+          end
+
+          # Set height from attributes
+          @string.gsub(/height="(.*?)"/) do
+            @attr[1] = (Regexp.last_match(1) || @default_height)
+          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]") || @list_items[0].include?("[dont]")
+          @element_items = []
+          @list_items.each do |item, _index|
+            item.gsub(%r{\<li>(.*)\</li>}) do
+              @element_items.push(Regexp.last_match(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
+end

data/lib/playbook/pb_doc_helper.rb

@@ -0,0 +1,85 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbDocHelper
+    def pb_kit_title(title)
+      title.remove("pb_").titleize.tr("_", " ")
+    end
+
+    def pb_kit(kit: "", type: "rails", show_code: true, limit_examples: false, dark_mode: false)
+      examples = pb_doc_kit_examples(kit, type)
+      examples = examples.first(1) if limit_examples
+      examples.map do |example|
+        pb_rails "docs/kit_example", props: {
+          kit: kit,
+          example_title: example.values.first,
+          example_key: example.keys.first,
+          show_code: show_code,
+          type: type,
+          dark: dark_mode
+        }
+      end.join.yield_self(&method(:raw))
+    end
+
+    # Deal with lists of kits, used in Playbook doc and Externally
+    def pb_kits(type: "rails", limit_examples: false, dark_mode: false)
+      display_kits = []
+      kits = get_kits
+      kits.each do |kit|
+        if kit.is_a?(Hash)
+          nav_hash_array(kit).each do |sub_kit|
+            display_kits << render_pb_doc_kit(sub_kit, type, limit_examples, false, dark_mode)
+          end
+        else
+          display_kits << render_pb_doc_kit(kit, type, limit_examples, false, dark_mode)
+        end
+      end
+      raw("<div class='pb--docItem'>" + display_kits.join("</div><div class='pb--docItem'>") + "</div>")
+    end
+
+    def get_kits
+      menu = YAML.load_file(Playbook::Engine.root.join("app/pb_kits/playbook/data/menu.yml"))
+      menu["kits"]
+    end
+
+    def render_pb_doc_kit(kit, type, limit_examples, code = true, dark_mode = false)
+      title = pb_doc_render_clickable_title(kit, type)
+      ui = raw("<div class='pb--docItem-ui'>
+          #{pb_kit(kit: kit, type: type, show_code: code, limit_examples: limit_examples, dark_mode: dark_mode)}</div>")
+      title + ui
+    end
+
+  private
+
+    def pb_doc_kit_path(kit, *args)
+      Playbook.kit_path(kit, "docs", *args)
+    end
+
+    def pb_doc_kit_examples(kit, type)
+      example_file = pb_doc_kit_path(kit, "example.yml")
+      if File.exist?(example_file)
+        examples_list = YAML.load_file(example_file)
+                            .inject({}) { |item, (k, v)| item[k.to_sym] = v; item }
+        examples_list.dig(:examples, type) || []
+      else
+        []
+      end
+    end
+
+    def pb_doc_render_clickable_title(kit, type)
+      url = "#"
+      begin
+        url = if type == "react"
+                kit_show_reacts_path(kit)
+              else
+                kit_show_path(kit)
+              end
+      # FIXME this is here because this helper generates a link for playbook website,
+      #       but shouldn't do anything when used elsewhere
+      rescue
+        puts "Kit Path Not Avaliable"
+      end
+      render inline: "<a href='#{url}'>#{pb_rails(:title, props: { text: pb_kit_title(kit), tag: 'h3', size: 2 })}</a>"
+    end
+  end
+end