playbook_ui 12.24.0.pre.alpha.play824733 → 12.24.0.pre.alpha.railsmultilevelimprovements741

data/lib/playbook/forms/builder/multi_level_select_field.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Playbook
+  module Forms
+    class Builder
+      def multi_level_select(id, _options = {}, _html_options = {}, props: {})
+        props[:id] = id
+        @template.pb_rails("multi_level_select", props: props)
+      end
+    end
+  end
+end

data/lib/playbook/forms/builder.rb

@@ -10,7 +10,7 @@ module Playbook
       require_relative "builder/form_field_builder"
       require_relative "builder/select_field"
       require_relative "builder/typeahead_field"
-      require_relative "builder/intl_telephone_field"
+      require_relative "builder/multi_level_select_field"
 
       prepend(FormFieldBuilder.new(:email_field, kit_name: "text_input"))
       prepend(FormFieldBuilder.new(:number_field, kit_name: "text_input"))
@@ -20,6 +20,7 @@ module Playbook
       prepend(FormFieldBuilder.new(:password_field, kit_name: "text_input"))
       prepend(FormFieldBuilder.new(:url_field, kit_name: "text_input"))
       prepend(FormFieldBuilder.new(:text_area, kit_name: "textarea"))
+      prepend(FormFieldBuilder.new(:multi_level_select, kit_name: "multi_level_select"))
 
       def actions
         context = @template.respond_to?(:view_context) ? @template.view_context : @template

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "12.24.0"
-  VERSION = "12.24.0.pre.alpha.play824733"
+  VERSION = "12.24.0.pre.alpha.railsmultilevelimprovements741"
 end

data/lib/playbook.rb

@@ -8,10 +8,9 @@ require "playbook/props"
 require "playbook/forms"
 require "playbook/pb_forms_helper"
 require "playbook/pb_kit_helper"
-require "playbook/pb_doc_helper"
+require "playbook/pb_doc_helper" # Duplicated from website (Temp)
 require "playbook/kit_base"
 require "playbook/kit_resolver"
-require "playbook/markdown"
 
 module Playbook
   ROOT_PATH = Pathname.new(File.join(__dir__, ".."))

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.24.0.pre.alpha.play824733
+  version: 12.24.0.pre.alpha.railsmultilevelimprovements741
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-06-06 00:00:00.000000000 Z
+date: 2023-06-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -67,34 +67,6 @@ dependencies:
     - - '='
       - !ruby/object:Gem::Version
         version: 2.6.1
-- !ruby/object:Gem::Dependency
-  name: redcarpet
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '3.6'
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '3.6'
-- !ruby/object:Gem::Dependency
-  name: rouge
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '3.15'
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '3.15'
 - !ruby/object:Gem::Dependency
   name: view_component
   requirement: !ruby/object:Gem::Requirement
@@ -283,7 +255,9 @@ dependencies:
     - - '='
       - !ruby/object:Gem::Version
         version: 3.3.1
-description: Playbook Design System. Built for Nitro, but powering all.
+description: Playbook UI is built out in Ruby View Components and React Components.
+  Playbook takes a modern design approach and applies it in a way that makes it easy
+  to support bleeding edge or legacy systems.
 email:
 - nitroux@powerhrg.com
 - dev@powerhrg.com
@@ -905,8 +879,6 @@ files:
 - app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_default.jsx
 - app/pb_kits/playbook/pb_distribution_bar/docs/example.yml
 - app/pb_kits/playbook/pb_distribution_bar/docs/index.js
-- app/pb_kits/playbook/pb_docs/kit_api.html.erb
-- app/pb_kits/playbook/pb_docs/kit_api.rb
 - app/pb_kits/playbook/pb_docs/kit_example.html.erb
 - app/pb_kits/playbook/pb_docs/kit_example.rb
 - app/pb_kits/playbook/pb_enhanced_element/element_observer.ts
@@ -1607,8 +1579,6 @@ files:
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.html.erb
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
-- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb
-- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx
 - app/pb_kits/playbook/pb_phone_number_input/docs/example.yml
 - app/pb_kits/playbook/pb_phone_number_input/docs/index.js
 - app/pb_kits/playbook/pb_phone_number_input/phone_number_input.html.erb
@@ -2417,7 +2387,6 @@ files:
 - app/pb_kits/playbook/utilities/flexbox_global_props/_justify_self.scss
 - app/pb_kits/playbook/utilities/flexbox_global_props/_order.scss
 - app/pb_kits/playbook/utilities/globalProps.ts
-- app/pb_kits/playbook/utilities/object.ts
 - app/pb_kits/playbook/utilities/props.ts
 - app/pb_kits/playbook/utilities/test-utils.js
 - app/pb_kits/playbook/utilities/test/globalProps/alignContent.test.js
@@ -2434,6 +2403,7 @@ files:
 - app/pb_kits/playbook/utilities/test/globalProps/order.test.js
 - app/pb_kits/playbook/utilities/text.ts
 - dist/menu.yml
+- dist/playbook-rails.js
 - dist/reset.css
 - lib/playbook.rb
 - lib/playbook/align_content.rb
@@ -2455,7 +2425,7 @@ files:
 - lib/playbook/forms/builder/collection_select_field.rb
 - lib/playbook/forms/builder/date_picker_field.rb
 - lib/playbook/forms/builder/form_field_builder.rb
-- lib/playbook/forms/builder/intl_telephone_field.rb
+- lib/playbook/forms/builder/multi_level_select_field.rb
 - lib/playbook/forms/builder/select_field.rb
 - lib/playbook/forms/builder/typeahead_field.rb
 - lib/playbook/justify_content.rb
@@ -2463,8 +2433,6 @@ files:
 - lib/playbook/kit_base.rb
 - lib/playbook/kit_resolver.rb
 - lib/playbook/line_height.rb
-- lib/playbook/markdown.rb
-- lib/playbook/markdown/helper.rb
 - lib/playbook/number_spacing.rb
 - lib/playbook/order.rb
 - lib/playbook/pagination_renderer.rb
@@ -2492,7 +2460,7 @@ files:
 - lib/playbook/version.rb
 - lib/playbook/z_index.rb
 - lib/playbook_ui.rb
-homepage: http://playbook.powerapp.cloud
+homepage: https://playbook.powerapp.cloud/
 licenses:
 - ISC
 metadata: {}

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

@@ -1,311 +0,0 @@
-<% 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" }) %>
-    <%= pb_rails("card", props: { padding: "none" }) do %>
-      <%= pb_rails("card/card_body", props: { padding: "sm" }) do %>
-        <%= pb_rails("nav", props: { orientation: "horizontal", variant: "subtle" }) do %>
-          <%= pb_rails("nav/item", props: { text: "Global Props", link: "#", active: true }) %>
-        <% end %>
-      <% end %>
-      <%= pb_rails("section_separator") %>
-      <%= pb_rails("card/card_body", props: {}) do %>
-        <%= pb_rails("table", props: {container: false, disable_hover: true }) 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 }) %>
-                </td>
-                <td>
-                  <%= pb_rails("card", props: {
-                    classname: "card",
-                    padding: "xxs",
-                    background: "light",
-                    border_none: true,
-                    border_radius: "sm"
-                  })  do %>
-                    <%= pb_rails("body", props: {
-                      classname: "kearning"
-                    }) 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: "light",
-                          border_none: true,
-                          border_radius: "sm",
-                          margin: "xxs"
-                        })  do %>
-                          <%= pb_rails("body", props: {
-                              classname: "kearning"
-                          }) 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: "light",
-                          border_none: true,
-                          border_radius: "sm",
-                          margin: "xxs"
-                        })  do %>
-                          <%= pb_rails("body", props: {
-                              classname: "kearning"
-                          }) 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" }) %>
-    <%= pb_rails("card", props: { padding: "none" }) do %>
-      <%= pb_rails("card/card_body", props: { padding: "sm" }) do %>
-        <%= pb_rails("nav", props: { orientation: "horizontal", variant: "subtle" }) do %>
-        <% if local_prop_data.present? %>
-          <%= pb_rails("nav/item", props: { text: "Kit Props", link: "#", active: true, id: "local-button-active", classname: "local-active" }) %>
-        <% end %>
-        <% if local_prop_data.present? %>
-          <%= pb_rails("nav/item", props: { text: "Kit Props", link: "#", id: "local-button", classname: "global-active" }) %>
-        <% end %>
-          <%= pb_rails("nav/item", props: { text: "Global Props", link: "#", active: true, id: "global-button-active", classname: "global-active" }) %>
-          <%= pb_rails("nav/item", props: { text: "Global Props", link: "#", id: "global-button", classname: "local-active" }) %>
-        <% end %>
-      <% end %>
-      <%= pb_rails("section_separator") %>
-      <%= pb_rails("card/card_body", props: {}) do %>
-        <%= pb_rails("table", props: {container: false, disable_hover: true, id: "global-prop-table", classname: "global-active"}) 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 }) %>
-                </td>
-                <td>
-                  <%= pb_rails("card", props: {
-                    classname: "card",
-                    padding: "xxs",
-                    background: "light",
-                    border_none: true,
-                    border_radius: "sm"
-                  })  do %>
-                    <%= pb_rails("body", props: {
-                      classname: "kearning"
-                    }) 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: "light",
-                          border_none: true,
-                          border_radius: "sm",
-                          margin: "xxs"
-                        })  do %>
-                          <%= pb_rails("body", props: {
-                              classname: "kearning"
-                          }) 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: "light",
-                          border_none: true,
-                          border_radius: "sm",
-                          margin: "xxs"
-                        })  do %>
-                          <%= pb_rails("body", props: {
-                              classname: "kearning"
-                          }) 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"}) 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 }) %>
-                </td>
-                <td>
-                  <%= pb_rails("card", props: {
-                    classname: "card",
-                    padding: "xxs",
-                    background: "light",
-                    border_none: true,
-                    border_radius: "sm"
-                  })  do %>
-                    <%= pb_rails("body", props: {
-                      classname: "kearning"
-                    }) 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: "light",
-                          border_none: true,
-                          border_radius: "sm",
-                          margin: "xxs"
-                        })  do %>
-                          <%= pb_rails("body", props: {
-                              classname: "kearning"
-                          }) 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: "light",
-                            border_none: true,
-                            border_radius: "sm"
-                      })  do %>
-                        <%= pb_rails("body", props: {
-                          classname: "kearning"
-                        }) 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/app/pb_kits/playbook/pb_docs/kit_api.rb

@@ -1,149 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbDocs
-    class KitApi < Playbook::KitBase
-      prop :kit, type: Playbook::Props::String, required: true
-
-      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/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb

@@ -1,14 +0,0 @@
-<form id="example-form-validation" action="" method="get">
-    <%= pb_rails("phone_number_input", props: { error: "Missing phone number.", id: "validation", initial_country: "af", value: "", required: true }) %>
-    <%= pb_rails("button", props: {html_type: "submit", text: "Save Phone Number"}) %>
-</form>
-
-<% content_for(:pb_js) do %>
-    <%= javascript_tag do %>
-        document.addEventListener('DOMContentLoaded', function () {
-            document.querySelector('#example-form-validation').addEventListener('submit', function (e) {
-                if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) e.preventDefault();
-            })
-        })
-    <% end %>
-<% end %>