playbook_ui_docs 13.33.0.pre.alpha.PLAY14143318 → 13.33.1.pre.alpha.PLAY14063320

data/dist/app/components/playbook/pb_docs/kit_api.html.erb

@@ -0,0 +1,321 @@
+<% if !local_prop_data.present? %>
+  <div data-action="toggle" data-togglable="prop_example" class="pb--propsTable">
+  <%= pb_rails("title", props: { text: "Available Props", size: 3, margin_bottom: "sm", dark: dark }) %>
+    <%= pb_rails("card", props: { padding: "none", dark: dark }) do %>
+      <%= pb_rails("card/card_body", props: { padding: "sm" }) do %>
+        <%= pb_rails("nav", props: { orientation: "horizontal", variant: "subtle", dark: dark }) do %>
+          <%= pb_rails("nav/item", props: { text: "Global Props", link: "#", active: true, dark: dark }) %>
+        <% end %>
+      <% end %>
+      <%= pb_rails("section_separator", props:{ dark: dark }) %>
+      <%= pb_rails("card/card_body", props: {}) do %>
+        <%= pb_rails("table", props: {container: false, disable_hover: true, dark: dark }) do %>
+          <thead>
+            <tr>
+              <th>Props</th>
+              <th>Type</th>
+              <th>Values</th>
+            </tr>
+          </thead>
+          <tbody>
+            <% global_prop_data.each do |key, value|%>
+              <tr>
+                <td>
+                  <%= pb_rails("title", props: { text: key, tag: "h4", size: 4, dark: dark }) %>
+                </td>
+                <td>
+                  <%= pb_rails("card", props: {
+                    classname: "card",
+                    padding: "xxs",
+                    background: dark ? "dark" : "light",
+                    border_none: true,
+                    border_radius: "sm"
+                  })  do %>
+                    <%= pb_rails("body", props: {
+                      classname: "kearning",
+                      dark: dark
+                    }) do %>
+                        <% if key =~ /^padding|^margin/ %>
+                            <%= "array" %>
+                        <% else %>
+                          <%= value[:type].to_s.downcase %>
+                        <% end %>
+                    <% end %>
+                  <% end %>
+                </td>
+                <td>
+                  <% if key =~ /^padding|^margin/ %>
+                  <% padding_margin_values.each do |item| %>
+                      <%= pb_rails("card", props: {
+                          flex_direction: "row",
+                          classname: "card",
+                          padding: "xxs",
+                          background: dark ? "dark" : "light",
+                          border_none: true,
+                          border_radius: "sm",
+                          margin: "xxs"
+                        })  do %>
+                          <%= pb_rails("body", props: {
+                              classname: "kearning",
+                              dark: dark
+                          }) do %>
+                            <%= item %>
+                          <% end %>
+                        <% end %>
+                      <% end %>
+                  <% else %>
+                  <% if value[:values].present? %>
+                    <% value[:values].each do |item| %>
+                      <% if item != nil %>
+                        <%= pb_rails("card", props: {
+                          flex_direction: "row",
+                          classname: "card",
+                          padding: "xxs",
+                          background: dark ? "dark" : "light",
+                          border_none: true,
+                          border_radius: "sm",
+                          margin: "xxs"
+                        })  do %>
+                          <%= pb_rails("body", props: {
+                              classname: "kearning",
+                              dark: dark
+                          }) do %>
+                            <%= item %>
+                          <% end %>
+                        <% end %>
+                      <% end %>
+                    <% end %>
+                  <% end %>
+                  <% end %>
+                </td>
+              </tr>
+            <% end %>
+          </tbody>
+        <% end %>
+      <% end %>
+    <% end %>
+  </div>
+<% else %>
+  <div data-action="toggle" data-togglable="prop_example" class="pb--propsTable">
+    <%= pb_rails("title", props: { text: "Available Props", size: 3, margin_bottom: "sm", dark: dark }) %>
+    <%= pb_rails("card", props: { padding: "none", dark: dark }) do %>
+      <%= pb_rails("card/card_body", props: { padding: "sm" }) do %>
+        <%= pb_rails("nav", props: { orientation: "horizontal", variant: "subtle", dark: dark }) do %>
+        <% if local_prop_data.present? %>
+          <%= pb_rails("nav/item", props: { text: "Kit Props", link: "#", active: true, id: "local-button-active", classname: "local-active", dark: dark }) %>
+        <% end %>
+        <% if local_prop_data.present? %>
+          <%= pb_rails("nav/item", props: { text: "Kit Props", link: "#", id: "local-button", classname: "global-active", dark: dark }) %>
+        <% end %>
+          <%= pb_rails("nav/item", props: { text: "Global Props", link: "#", active: true, id: "global-button-active", classname: "global-active", dark: dark }) %>
+          <%= pb_rails("nav/item", props: { text: "Global Props", link: "#", id: "global-button", classname: "local-active", dark: dark }) %>
+        <% end %>
+      <% end %>
+      <%= pb_rails("section_separator", props: { dark: dark }) %>
+      <%= pb_rails("card/card_body", props: { dark: dark }) do %>
+        <%= pb_rails("table", props: {container: false, disable_hover: true, id: "global-prop-table", classname: "global-active", dark: dark}) do %>
+          <thead>
+            <tr>
+              <th>Props</th>
+              <th>Type</th>
+              <th>Values</th>
+            </tr>
+          </thead>
+          <tbody>
+          <% global_prop_data.each do |key, value|%>
+              <tr>
+                <td>
+                  <%= pb_rails("title", props: { text: key, tag: "h4", size: 4, dark: dark }) %>
+                </td>
+                <td>
+                  <%= pb_rails("card", props: {
+                    classname: "card",
+                    padding: "xxs",
+                    background: dark ? "dark" : "light",
+                    border_none: true,
+                    border_radius: "sm"
+                  })  do %>
+                    <%= pb_rails("body", props: {
+                      classname: "kearning",
+                      dark: dark
+                    }) do %>
+                        <% if key =~ /^padding|^margin/ %>
+                            <%= "array" %>
+                        <% else %>
+                          <%= value[:type].to_s.downcase %>
+                        <% end %>
+                    <% end %>
+                  <% end %>
+                </td>
+                <td>
+                  <% if key =~ /^padding|^margin/ %>
+                  <% padding_margin_values.each do |item| %>
+                      <%= pb_rails("card", props: {
+                          flex_direction: "row",
+                          classname: "card",
+                          padding: "xxs",
+                          background: dark ? "dark" : "light",
+                          border_none: true,
+                          border_radius: "sm",
+                          margin: "xxs"
+                        })  do %>
+                          <%= pb_rails("body", props: {
+                              classname: "kearning",
+                              dark: dark
+                          }) do %>
+                            <%= item %>
+                          <% end %>
+                        <% end %>
+                      <% end %>
+                  <% else %>
+                  <% if value[:values].present? %>
+                    <% value[:values].each do |item| %>
+                      <% if item != nil %>
+                        <%= pb_rails("card", props: {
+                          flex_direction: "row",
+                          classname: "card",
+                          padding: "xxs",
+                          background: dark ? "dark" : "light",
+                          border_none: true,
+                          border_radius: "sm",
+                          margin: "xxs"
+                        })  do %>
+                          <%= pb_rails("body", props: {
+                              classname: "kearning",
+                              dark: dark
+                          }) do %>
+                            <%= item %>
+                          <% end %>
+                        <% end %>
+                      <% end %>
+                    <% end %>
+                  <% end %>
+                  <% end %>
+                </td>
+              </tr>
+            <% end %>
+          </tbody>
+        <% end %>
+        <%= pb_rails("table", props: {container: false, disable_hover: true, id: "local-prop-table", classname: "local-active", dark: dark }) do %>
+          <thead>
+            <tr>
+              <th>Props</th>
+              <th>Type</th>
+              <th>Values</th>
+              <th>Default</th>
+            </tr>
+          </thead>
+          <tbody>
+          <% local_prop_data.each do |key, value|%>
+              <tr>
+                <td>
+                  <%= pb_rails("title", props: { text: key, tag: "h4", size: 4, dark: dark }) %>
+                </td>
+                <td>
+                  <%= pb_rails("card", props: {
+                    classname: "card",
+                    dark: dark,
+                    padding: "xxs",
+                    background: dark ? "dark" : "light",
+                    border_none: true,
+                    border_radius: "sm"
+                  })  do %>
+                    <%= pb_rails("body", props: {
+                      classname: "kearning",
+                      dark: dark
+                    }) do %>
+                        <%= value[:type].downcase %>
+                    <% end %>
+                  <% end %>
+                </td>
+                <td>
+                  <% if value[:values].present? %>
+                    <% value[:values].each do |item| %>
+                      <% if item != nil %>
+                        <%= pb_rails("card", props: {
+                          flex_direction: "row",
+                          classname: "card",
+                          padding: "xxs",
+                          background: dark ? "dark" : "light",
+                          border_none: true,
+                          border_radius: "sm",
+                          margin: "xxs"
+                        })  do %>
+                          <%= pb_rails("body", props: {
+                              classname: "kearning",
+                              dark: dark,
+                          }) do %>
+                            <%= item %>
+                          <% end %>
+                        <% end %>
+                      <% end %>
+                    <% end %>
+                  <% end %>
+                </td>
+                <td>
+                  <% if value[:default].present? || value[:default].is_a?(TrueClass) || value[:default].is_a?(FalseClass) %>
+                    <%= pb_rails("card", props: {
+                            classname: "card",
+                            padding: "xxs",
+                            background: dark ? "dark" : "light",
+                            border_none: true,
+                            border_radius: "sm"
+                      })  do %>
+                        <%= pb_rails("body", props: {
+                          classname: "kearning",
+                          dark: dark,
+                        }) do %>
+                            <%= value[:default] %>
+                        <% end %>
+                      <% end %>
+                  <% end %>
+                </td>
+              </tr>
+            <% end %>
+          </tbody>
+        <% end %>
+      <% end %>
+    <% end %>
+  </div>
+<% end %>
+
+<script>
+
+const globalNavAndTable = document.querySelectorAll('.global-active');
+const localNavAndTable = document.querySelectorAll('.local-active');
+
+globalNavAndTable.forEach(element => {
+  element.style.display = 'none';
+});
+
+const globalButton = document.getElementById("global-button");
+if (globalButton) {
+  globalButton.addEventListener("click", showGlobal);
+}
+
+const localButton = document.getElementById("local-button");
+if (localButton) {
+  localButton.addEventListener("click", showLocal);
+}
+
+function showGlobal() {
+  localNavAndTable.forEach(element => {
+    element.style.display = 'none';
+  });
+
+  globalNavAndTable.forEach(element => {
+    element.style.display = 'table';
+  });
+}
+
+function showLocal() {
+  localNavAndTable.forEach(element => {
+    element.style.display = 'table';
+  });
+
+  globalNavAndTable.forEach(element => {
+    element.style.display = 'none';
+  });
+}
+
+</script>

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

@@ -0,0 +1,150 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbDocs
+    class KitApi < Playbook::KitBase
+      prop :kit, type: Playbook::Props::String, required: true
+      prop :dark, type: Playbook::Props::Boolean, default: false
+
+      def kit_local_props
+        local = []
+        kit_props.each do |key, value|
+          value.kit != Playbook::KitBase && local.push({ key: key, value: value })
+        end
+        local
+      end
+
+      def padding_margin_values
+        %w[none xxs xs sm md lg xl]
+      end
+
+      def local_prop_data
+        local_props = {}
+
+        kit_local_props.each do |key, _value|
+          name = key[:value].instance_variable_get(:@name)
+          type = key[:value].class.to_s.split("::").last
+          default = key[:value].instance_variable_get(:@default)
+          values = key[:value].instance_variable_get(:@values)
+          local_props[name.to_sym] = { "type": type, "default": default, "values": values }
+        end
+        local_props
+      end
+
+      def kit_global_props
+        global_props = {}
+        global_prop_names = []
+        global_prop_values = {}
+        global_props_with_values = {}
+        global_props_without_values = []
+        parent_child_object = {}
+        updated_global_props_with_values = {}
+
+        # extracts the modules from kit_base.rb, which is where we import all the global props that we inject into every rails kit
+        pb_module = Playbook::KitBase.included_modules.select { |mod| mod.to_s.include?("Playbook::") }
+
+        # loops through the kits and extracts each prop with its values and pushes that to the global_props hash
+        kit_props.each do |key, value|
+          value.kit == Playbook::KitBase && global_props[key.to_sym] = value
+        end
+
+        # loops through the global_props and extracts the name of each prop and pushes that to global_prop_names array
+        global_props.each do |name, _values|
+          global_prop_names.push(name)
+        end
+
+        # Loops through each module in pb_module and searches for methods that end in _values, as these methods hold the values for each prop
+        # we then save the values and type and push that to the values hash as a key value pair
+        pb_module.each do |mod|
+          mod.instance_methods.each do |method_name|
+            next unless method_name.to_s.end_with?("_values")
+
+            value = send(method_name)
+            type = value.class
+            global_prop_values[method_name.to_s.chomp("_values").to_sym] = { "type": type, "values": value }
+          end
+        end
+
+        # loops through the global_prop_names array
+        # then loops through the global_prop_values hash and extracts the values that have the same name found in global_prop_names
+        # this loop helps ensure only global props values are actually extracted, as there could be other methods that end in _values in the modules we are iterating over
+        # these verified global props with values are then pushed to the global_props_with_values hash
+        global_prop_names.each do |name, _prop|
+          global_prop_values.each do |key, value|
+            global_props_with_values[key] = value if key == name
+          end
+        end
+
+        # now we grab all the global_prop_names that do not have a matching key in global_prop_values.
+        # This gives us any global prop that did not have any predefined value. like classname and dark
+        global_props_without_values = global_prop_names - global_prop_values.keys
+
+        # Loops through each module in pb_module and searches for methods that end in _options, as these methods hold all the props in the module
+        # save the prop names prop values and  and parent module name to parent_child_object hash
+        # this is a comprehensive list of all parent module and children props for edge cases like spacing.rb, that is not named after the props it represents
+        pb_module.each do |mod|
+          mod.instance_methods.each do |method_name|
+            next unless method_name.to_s.end_with?("_options")
+
+            props = send(method_name)
+            parent = mod.to_s.split("::").last
+            values = send("#{parent.underscore}_values")
+            parent_child_object[parent] = { "props": props, "values": values }
+          end
+        end
+
+        # loops through each object in parent_child_object and extracts its children (props and values)
+        # loops through each child and extracts the individual props
+        # Checks if the props match any of the props in global_props_without_values
+        # if it does, then we push that prop to global_props_with_values hash
+        # This extracts the props in the spacing.rb file and any file that is not named after the props it represents
+        parent_child_object.each do |_parent, children|
+          children.each do |_child, props|
+            props.each do |prop, _value|
+              type = children[:values].class
+              values = children[:values]
+              global_props_with_values[prop] = { "type": type, "values": values } if global_props_without_values.include?(prop)
+            end
+          end
+        end
+
+        # loop through the global_props hash and the global_props_with_values hash.
+        # extract the props from global_props that are not found in global_props_with_values into updated_global_props_with_values
+        # This is the last piece that grabs the global props that did not have values at all, like classname and dark, and adds it to our hash
+        global_props.each do |prop, value|
+          unless global_props_with_values.include?(prop)
+            type = value.class.to_s.split("::").last
+            updated_global_props_with_values[prop] = { "type": type }
+          end
+        end
+
+        # Merge updated_global_props_with_values into global_props_with_values
+        # global_props_with_values will now hold all the global props thier values and type
+        global_props_with_values.merge!(updated_global_props_with_values)
+
+        global_props_with_values
+      end
+
+      def global_prop_data
+        global_props = {}
+
+        kit_global_props.each do |key, value|
+          type = value[:type]
+          values = value[:values]
+          global_props[key] = { "type": type, "values": values }
+        end
+        global_props
+      end
+
+      def kit_props
+        kit_class.props
+      end
+
+    private
+
+      def kit_class
+        @kit_class ||= Playbook::KitResolver.resolve(kit.to_s)
+      end
+    end
+  end
+end

data/dist/app/components/playbook/pb_docs/kit_example.html.erb

@@ -0,0 +1,80 @@
+<% example_html = ERB.new(example).result %>
+
+<%= pb_rails("card", props: { classname: "pb--doc", padding: "none", dark: dark }) do %>
+  <% unless (type == "swift") %>
+    <div class="pb--kit-example">
+      <%= pb_rails("caption", props: { text: example_title, dark: dark }) %>
+      <br />
+      <%= example %>
+      <br>
+    </div>
+  <% else %>
+    <div class="pb--kit-example-markdown pt_none markdown kit_show_swift <%= dark ? "dark" : "" %>">
+      <%= pb_rails("caption", props: { text: example_title, dark: dark, margin_top: "md" }) %>
+      <%= render_markdown(description) %>
+    </div>
+  <% end %>
+  <% if show_code && type != "swift" %>
+    <div class="markdown pb--kit-example-markdown 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", classname: dark ? "dark" : "", variant: "link", size: "sm", display: hide_button }) %>
+            </li>
+          <li>
+            <%= pb_rails("button", props: { icon: "code", id:"toggle-open-opened", classname: dark ? "dark" : "", text: "Close Code", variant: "link", size: "sm", display: "none" }) %>
+            <%= pb_rails("button", props: { icon: "code", id:"toggle-open-closed", classname: dark ? "dark" : "", 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="#" 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", padding_x: "xs" }) %>
+        </a>
+        <pre class="highlight"><%= raw render_code(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/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