playbook_ui_docs 13.29.0.pre.alpha.removeduplicatekitexampleclass3063 → 13.30.0.pre.alpha.PBNTR353draggablev53136

data/app/pb_kits/playbook/pb_overlay/docs/example.yml

@@ -0,0 +1,8 @@
+examples:
+  react:
+  - overlay_default: Default
+  - overlay_multi_directional: Multi-directional
+
+  rails:
+    - overlay_default: Default
+    - overlay_multi_directional: Multi-directional

data/app/pb_kits/playbook/pb_overlay/docs/index.js

@@ -0,0 +1,2 @@
+export { default as OverlayDefault } from './_overlay_default.jsx'
+export { default as OverlayMultiDirectional } from './_overlay_multi_directional.jsx'

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column_rails.html.erb

@@ -1,34 +1,33 @@
-<%= pb_rails("table") do %>
-  <thead>
-    <tr>
-      <th>Column 1</th>
-      <th>Column 2</th>
-      <th>Column 3</th>
-      <th align="center">Rating</th>
-      <th align="right">Money</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td align="center">3</td>
-      <td align="right">$57.32</td>
-    </tr>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td align="center">2</td>
-      <td align="right">$5,657.08</td>
-    </tr>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td align="center">4</td>
-      <td align="right">$358.77</td>
-    </tr>
-  </tbody>
+<%= pb_rails("table") do %>  <%= pb_rails("table/table_head") do %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Rating", text_align: "center" }) %>
+          <%= pb_rails("table/table_header", props: { text: "Money", text_align: "right" }) %>
+       <% end %>
+  <% end %>
+  <%= pb_rails("table/table_body") do %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "3", text_align: "center" }) %>
+          <%= pb_rails("table/table_cell", props: { text: "$57.32", text_align: "right" }) %>
+      <% end %>
+      <%= pb_rails("table/table_row") do %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+        <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+        <%= pb_rails("table/table_cell", props: { text: "2", text_align: "center" }) %>
+        <%= pb_rails("table/table_cell", props: { text: "$5,657.08", text_align: "right" }) %>
+    <% end %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "4", text_align: "center" }) %>
+          <%= pb_rails("table/table_cell", props: { text: "$358.77", text_align: "right" }) %>
+      <% end %>
+  <% end %>
 <% end %>

data/dist/app/components/playbook/pb_docs/kit_example.rb

@@ -0,0 +1,94 @@
+# frozen_string_literal: true
+
+# rubocop:disable Style/CaseLikeIf
+module Playbook
+  module PbDocs
+    class KitExample < Playbook::KitBase
+      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 swift], default: "rails"
+      prop :dark, type: Playbook::Props::Boolean, default: false
+
+      include PlaybookWebsite::Markdown::Helper
+
+      def example
+        if type == "rails"
+          render inline: source
+        elsif type == "react"
+          react_component example_key.camelize, { dark: dark }
+        elsif type == "swift"
+          ## render the markdown file
+          render inline: source
+        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 = if type == "rails"
+                        "html.erb"
+                      else
+                        type == "swift" ? "swift" : "jsx"
+                      end
+          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'")
+                                           .gsub("'../../../../../../playbook-website/app/javascript/scripts/custom-icons'", "'your-directory/custom-icons.js'")
+        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, file_name)
+        name_array = file_name.split(".")
+        path = ::Playbook.kit_path(kit, folder, file_name)
+        if name_array[1] != "md"
+          (path.exist? ? path.read : "")
+        else
+          if path.exist?
+            path.read
+          elsif type == "rails"
+            name_array[0] += "_rails"
+            file_name = name_array.join(".")
+            path = ::Playbook.kit_path(kit, folder, file_name)
+          elsif type == "react"
+            name_array[0] += "_react"
+            file_name = name_array.join(".")
+            path = ::Playbook.kit_path(kit, folder, file_name)
+          end
+          (path.exist? ? path.read : "")
+        end
+      end
+    end
+  end
+end
+
+# rubocop:enable Style/CaseLikeIf

data/dist/menu.yml

@@ -352,6 +352,9 @@ kits:
         platforms: *web
         description: 
         status: "stable"
+      - name: "overlay"
+        platforms: *web
+        status: "stable"
       - name: "draggable"
         platforms: *react_only
         description:
@@ -467,4 +470,5 @@ kits:
         status: "stable"
       - name: "user"
         platforms: *web
-        description: This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.
+        description: This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.
+        status: "stable"