playbook_ui 7.16.0 → 8.0.1

data/lib/playbook/engine.rb

@@ -1,4 +1,5 @@
 # frozen_string_literal: true
+
 require "sassc-rails"
 require "slim-rails"
 
@@ -10,19 +11,14 @@ module Playbook
       g.test_framework :rspec
     end
 
+    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

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+require "playbook/classnames"
+require "playbook/spacing"
+require "playbook/z_index"
+
+module Playbook
+  class KitBase < ViewComponent::Base
+    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
+    end
+  end
+end

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,89 @@
+# 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
+
+    def nav_hash_array(link)
+      link.first.last
+    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

data/lib/playbook/pb_kit_helper.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbKitHelper
+    def pb_rails(kit_name, props: {}, &block)
+      kit = Playbook::KitResolver.resolve(kit_name.to_s)
+      render_component kit.new(props, &block), &block
+    end
+  end
+end

data/lib/playbook/props.rb

@@ -22,6 +22,9 @@ module Playbook
   module Props
     extend ActiveSupport::Concern
 
+    attr_accessor :values
+    private :values, :values=
+
     def initialize(prop_values = {}, &block)
       self.values = { children: block }.merge(Hash(prop_values))
       self.class.props.each do |key, definition|
@@ -33,120 +36,21 @@ module Playbook
       self.class.props[name].value values[name]
     end
 
-    def spacing_props
-      selected_props = spacing_options.keys.select { |sk| try(sk) }
-      return nil unless selected_props.present?
-
-      selected_props.map do |k|
-        spacing_value = send(k)
-        "#{spacing_options[k]}_#{spacing_value}" if spacing_values.include? spacing_value
-      end.compact.join(" ")
-    end
-
-    def dark_props
-      dark ? "dark" : nil
-    end
-
-    def max_width_props
-      selected_mw_props = max_width_options.keys.select { |sk| try(sk) }
-      return nil unless selected_mw_props.present?
-
-      selected_mw_props.map do |k|
-        width_value = send(k)
-        "max_width_#{width_value}" if max_width_values.include? width_value
-      end.compact.join(" ")
-    end
-
-    def generate_classname(*name_parts, separator: "_")
-      [
-        name_parts.compact.join(separator),
-        prop(:classname),
-        spacing_props,
-        dark_props,
-        max_width_props,
-      ].compact.join(" ")
-    end
-
-    def generate_classname_without_spacing(*name_parts, separator: "_")
-      [
-        name_parts.compact.join(separator),
-        prop(:classname),
-      ].compact.join(" ")
-    end
-
     attr_accessor :values
     private :values, :values=
 
     included do
-      prop :id
-      prop :data, type: Playbook::Props::Hash, default: {}
-      prop :classname
-      prop :aria, type: Playbook::Props::Hash, default: {}
-      prop :children, type: Playbook::Props::Proc
-      prop :margin
-      prop :margin_bottom
-      prop :margin_left
-      prop :margin_right
-      prop :margin_top
-      prop :margin_x
-      prop :margin_y
-      prop :max_width
-      prop :padding
-      prop :padding_bottom
-      prop :padding_left
-      prop :padding_right
-      prop :padding_top
-      prop :padding_x
-      prop :padding_y
-      prop :dark, type: Playbook::Props::Boolean, default: false
-    end
-
-    def spacing_options
-      {
-        margin: "m",
-        margin_bottom: "mb",
-        margin_left: "ml",
-        margin_right: "mr",
-        margin_top: "mt",
-        margin_x: "mx",
-        margin_y: "my",
-        padding: "p",
-        padding_bottom: "pb",
-        padding_left: "pl",
-        padding_right: "pr",
-        padding_top: "pt",
-        padding_x: "px",
-        padding_y: "py",
-      }
-    end
-
-    def max_width_options
-      {
-        max_width: "mw",
-      }
-    end
-
-    def max_width_values
-      %w[sm md lg xl]
-    end
-
-    def spacing_values
-      %w[none xs sm md lg xl]
+      class_attribute :props, default: {}
     end
 
     class_methods do
-      def props
-        @props
-      end
-
       def clear_props
-        @props.keys.each { |prop_name| remove_method(prop_name) }
-        @props.clear
+        props.keys.each { |prop_name| remove_method(prop_name) }
+        props.clear
       end
 
       def prop(name, type: Playbook::Props::String, **options)
-        @props ||= {}
-        @props[name] = type.new(options.merge(name: name, kit: self))
+        self.props = self.props.merge(name => type.new(options.merge(name: name, kit: self)))
 
         define_method(name) { prop(name) }
       end