playbook_ui 12.22.0.pre.alpha.play698responsivespacingglobalprop690 → 12.23.0.pre.alpha.movemarkdown708

data/app/pb_kits/playbook/pb_docs/kit_example.html.erb

@@ -1,74 +0,0 @@
-<% example_html = ERB.new(example).result %>
-
-<%= pb_rails("card", props: { classname: "pb--doc", padding: "none", dark: dark }) do %>
-  <div class="pb--kit-example">
-    <%= pb_rails("caption", props: { text: example_title, dark: dark }) %>
-    <br />
-    <%= example %>
-    <br>
-  </div>
-
-  <% if show_code %>
-    <div class="markdown pb--kit-example-markdown <%= dark ? "dark" : "" %>">
-      <%= render_markdown(description) %>
-    </div>
-    <div id="code-wrapper">
-      <div class="pb--codeControls">
-        <ul>
-          <% hide_button = type == "rails" ? 'flex' : 'none' %>
-            <li>
-            <%= pb_rails("button", props: { id:"copy-html-#{example_key}", icon: "copy", text: "Copy HTML", variant: "link", size: "sm", display: hide_button }) %>
-            </li>
-          <li>
-            <%= pb_rails("button", props: { icon: "code", id:"toggle-open-opened", text: "Close Code", variant: "link", size: "sm", display: "none" }) %>
-            <%= pb_rails("button", props: { icon: "code", id:"toggle-open-closed", text: "Show Code", variant: "link", size: "sm" }) %>
-          </li>
-        </ul>
-      </div>
-      <div class="pb--codeCopy" data-action="toggle" data-togglable="code_example" style="display: none" >
-        <%= pb_rails("section_separator", props: { dark: dark })%>
-        <a href="#" style="padding: 16px 0px 22px 0px;" id="copy-code-<%= example_key %>" class="pb--copy-code" onclick="copyOnClick(`<%= source %>`, `copy-code-<%= example_key %>`)">
-          <%= pb_rails("button", props: { id: "copy-button-#{example_key}", text: "Copy Code", size: "sm", icon: "copy" }) %>
-        </a>
-        <pre class="highlight"><%= raw rouge(source, highlighter) %></pre>
-      </div>
-        <%= pb_rails("popover", props: {
-          trigger_element_id: "copy-button-#{example_key}",
-          tooltip_id: "tooltip-#{example_key}",
-          offset: true,
-          position: "bottom"
-        }) do %>
-        Code Copied
-    <% end %>
-    </div>
-  <% end %>
-<% end %>
-
-<script>
-  var htmlButton = document.getElementById('<%= "copy-html-#{example_key}" %>')
-  if (htmlButton) {
-    htmlButton.addEventListener('click', function() {
-      var tempElement = document.createElement('div')
-      tempElement.innerHTML = `<%= example_html %>`
-      var decodedString = tempElement.textContent || tempElement.innerText;
-      copyContent(decodedString)
-    })
-  }
-
-  var button = document.getElementById('<%= "copy-button-#{example_key}" %>')
-  if (button) {
-    button.addEventListener('click', function() {
-      var tempElement = document.createElement('div')
-      tempElement.innerHTML = `<%= source %>`
-      var decodedString = tempElement.textContent || tempElement.innerText;
-      copyContent(decodedString)
-      var fadeAwayDiv = document.getElementById("<%= "tooltip-#{example_key}" %>")
-      setTimeout(function() {
-        fadeAwayDiv.classList.remove('show')
-      }, 3000)
-      setTimeout(function() {
-        fadeAwayDiv.classList.add('hide')
-      }, 3001)
-    })
-  }
-</script>

data/app/pb_kits/playbook/pb_docs/kit_example.rb

@@ -1,71 +0,0 @@
-# frozen_string_literal: true
-
-# rubocop:disable Style/CaseLikeIf
-
-module Playbook
-  module PbDocs
-    class KitExample < Playbook::KitBase
-      include Playbook::Markdown::Helper
-
-      prop :kit, type: Playbook::Props::String, required: true
-      prop :example_title, type: Playbook::Props::String, required: true
-      prop :example_key, type: Playbook::Props::String, required: true
-      prop :show_code, type: Playbook::Props::Boolean, default: true
-      prop :type, type: Playbook::Props::Enum, values: %w[rails react], default: "rails"
-      prop :dark, type: Playbook::Props::Boolean, default: false
-
-      def example
-        if type == "rails"
-          render inline: source
-        elsif type == "react"
-          react_component example_key.camelize, { dark: dark }
-        end
-      end
-
-      def description
-        @description ||= read_kit_file("docs", "_#{example_key}.md")
-      end
-
-      def highlighter
-        type.eql?("rails") ? "erb" : "react"
-      end
-
-      def source
-        @source ||= begin
-          extension = type == "react" ? "jsx" : "html.erb"
-          stringified_code = read_kit_file("docs", "_#{example_key}.#{extension}")
-          sanitize_code(stringified_code)
-        end
-      end
-
-      def tsx_source
-        read_kit_file("", "_#{example_key}.tsx")
-      end
-
-    private
-
-      def sanitize_code(stringified_code)
-        stringified_code = stringified_code.gsub('"../.."', '"playbook-ui"')
-                                           .gsub('"../../"', '"playbook-ui"')
-                                           .gsub("'../../'", "'playbook-ui'")
-                                           .gsub("'../..'", "'playbook-ui'")
-                                           .gsub(%r{from "../.*}, "from 'playbook-ui'")
-                                           .gsub(%r{from '../.*}, "from 'playbook-ui'")
-        stringified_code = dark ? stringified_code.gsub("{...props}", "dark") : stringified_code.gsub(/\s*{...props}\s*\n/, "\n")
-        if stringified_code.include?("props: { ")
-          stringified_code = stringified_code.gsub("props: {", "props: {dark: true,") if type == "rails" && dark
-        elsif type == "rails" && dark
-          stringified_code = stringified_code.gsub("props: {", "props: {\n    dark: true,")
-        end
-        stringified_code.gsub(" {...props}", "")
-      end
-
-      def read_kit_file(folder, *args)
-        path = ::Playbook.kit_path(kit, folder, *args)
-        path.exist? ? path.read : ""
-      end
-    end
-  end
-end
-
-# rubocop:enable Style/CaseLikeIf

data/lib/playbook/markdown/helper.rb

@@ -1,132 +0,0 @@
-# frozen_string_literal: true
-
-require "redcarpet"
-require "rouge"
-require "rouge/plugins/redcarpet"
-require "action_view"
-
-module Playbook
-  module Markdown
-    module Helper
-      def self.call(template, _source)
-        markdown(template.source)
-      end
-
-      def render_markdown(text)
-        # rubocop:disable Security/Eval
-        eval(Playbook::Markdown::Helper.markdown(text))
-        # rubocop:enable Security/Eval
-      end
-
-      def self.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 = {
-          lax_spacing: true,
-          no_intra_emphasis: true,
-          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)
-        # toc_renderer = Redcarpet::Render::HTML_TOC.new(with_toc_data: true)
-        # @TOC = Redcarpet::Markdown.new(toc_renderer)
-        # puts "TOC: #{@TOC.inspect}"
-        markdown = Redcarpet::Markdown.new(renderer, extensions)
-        "#{markdown.render(text).inspect}.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
-
-      class HTML < Redcarpet::Render::HTML
-        include Rouge::Plugins::Redcarpet
-      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 HTMLWithPants < Redcarpet::Render::HTML
-      include Redcarpet::Render::SmartyPants
-    end
-
-    class HTML < Redcarpet::Render::HTML
-      include Rouge::Plugins::Redcarpet
-    end
-
-    class HTMLBlockCode < Redcarpet::Render::HTML
-      include ActionView::Helpers::AssetTagHelper
-
-      # def block_code(code, language)
-      #   "\n.nf\n#{normal_text(rouge(code, language))}\n.fi\n"
-      # end
-
-      def table(header, body)
-        "<table class='pb_table table-sm table-responsive-collapse table-card table-collapse-sm'>" \
-          "<thead>#{header}</thead>" \
-          "<tbody>#{body}</tbody>" \
-        "</table>"
-      end
-
-      def header(title, level)
-        @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
-        permalink_markup = %(<a name="#{permalink}" class="markdown-header-anchor" )
-        permalink_markup += %(href="##{permalink}"><span class="far fa-link markdown-header-anchor-icon"></span></a>)
-        %(\n<h#{level} id="#{permalink}">#{title} #{permalink_markup}</h#{level}>\n)
-      end
-
-      def image(link, title, alt_text)
-        return nil if link.nil?
-
-        %(<a href="#{link}" target="_blank">#{image_tag(link, title: title, alt: alt_text, class: 'imageloader lazyload')}</a>)
-      end
-    end
-  end
-end

data/lib/playbook/markdown.rb

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