playbook_ui 7.16.0.pre.alpha2 → 8.0.0.pre.alpha1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 060bbc665f5d8d94eb51bc59b16af5175b9b1bf7e9bfd8c6e1fffa42b690e8df
-  data.tar.gz: e40e476f42e53227913d489e305a9affab6566ee389a0cf52645571d7dcfb33c
+  metadata.gz: c921685c5d3955c36d8ae3c9e44ca3da8a85566f09b1586435c2e0eaadef53bc
+  data.tar.gz: 84fe2792d4bd4dbc7bb57bc150d5af4bec0cf93b7bbf7ed7e64a7b5c85e6b63d
 SHA512:
-  metadata.gz: fc610e6bd830d1d91a90296c44b1600058f9ce285a556deda7574644f931567c8b9df3c641e01783be7c709ca0417c6f3b11f0adfba7eb9b843416aa34aa6697
-  data.tar.gz: 6ccdb6de2019e82c42b4703cbf688c485060e8c7747b2a69d20623b045f30c28baa11665bf7066680989c7913afc62dedb5a49e7b2f40d75394ee6ac066adf77
+  metadata.gz: 68eb2a35ffe4c1b6ecf9fe60853562f7d2cd28ab16c17a8f4cc5904f9b05e56128fa66699fd82527346bdff505f8d797d5eb7251ac78d7095088c8dacabdc721
+  data.tar.gz: de3dfb369f495b031ac6744170d62c5dfe0ef1ff84cbbb470a03b35675fc8460abb63b44940764b7c6239e351a888d4a23a9c5733958d0595bd5dc97d2c62be9

data/app/controllers/playbook/application_controller.rb

@@ -6,7 +6,6 @@ module Playbook
     helper Playbook::ApplicationHelper
     helper Playbook::PbDocHelper
     helper Playbook::PbSampleHelper
-    append_view_path Playbook::Engine.root + "app/pb_kits"
 
     def delete_dark_mode_cookie
       cookies.delete :dark_mode

data/app/helpers/playbook/pb_doc_helper.rb

@@ -6,6 +6,27 @@ module Playbook
       title.remove("pb_").titleize.tr("_", " ")
     end
 
+    def pb_doc_source(type, kit, example_key)
+      highlight = type == "react" ? "react" : "erb"
+      extension = type == "react" ? "jsx" : "html.erb"
+      source = read_source_file kit_path(kit).join("docs/_#{example_key}.#{extension}")
+      raw rouge(source, highlight)
+    end
+
+    def pb_doc_example(type, kit, example_key)
+      if type == "rails"
+        render file: kit_path(kit).join("docs/_#{example_key}.html.erb")
+      elsif type == "react"
+        pb_react(example_key.camelize)
+      end
+    end
+
+    def pb_doc_kit_api(kit)
+      kit_class = Playbook::KitResolver.resolve(kit.to_s)
+      return unless kit_class
+      render partial: "playbook/config/pb_kit_api", locals: { kit_api: kit_class.props.keys }
+    end
+
     def has_kit_type?(kit, type)
       type ||= "rails"
       if type == "rails"
@@ -17,20 +38,16 @@ module Playbook
       end
     end
 
-    def kit_path(kit)
-      "#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{kit}"
-    end
-
     def get_kit_description(kit)
-      read_source_file "app/pb_kits/playbook/pb_#{kit}/docs/_description.md"
+      read_source_file kit_path(kit).join("docs/_description.md")
     end
 
     def get_per_sample_descriptions(kit, key)
-      read_source_file "app/pb_kits/playbook/pb_#{kit}/docs/_#{key}.md"
+      read_source_file kit_path(kit).join("docs/_#{key}.md")
     end
 
     def get_kit_footer(kit)
-      read_source_file "app/pb_kits/playbook/pb_#{kit}/docs/_footer.md"
+      read_source_file kit_path(kit).join("docs/_footer.md")
     end
 
     def pb_kit(kit: "", type: "rails", show_code: true, limit_examples: false)
@@ -38,7 +55,7 @@ module Playbook
       @kit_examples = get_kit_examples(kit, type)
       @limit_examples = limit_examples
       @show_code = show_code
-      render partial: "config/kit_example"
+      render partial: "playbook/config/kit_example"
     end
 
     def pb_kits(type: "rails", limit_examples: false)
@@ -76,16 +93,6 @@ module Playbook
       title + ui
     end
 
-    def pb_kit_api(kit)
-      kit_class_obj = get_class_name(kit.to_s)
-      @kit_api = if kit_class_obj < Playbook::PbKit::Base
-                   kit_class_obj.instance_method(:initialize).parameters.map(&:last)
-                 else
-                   kit_class_obj.props.keys
-                 end
-      render partial: "playbook/config/pb_kit_api"
-    end
-
     def nav_hash_category(link)
       link.keys.first
     end
@@ -171,9 +178,12 @@ module Playbook
 
   private
 
+    def kit_path(kit)
+      Playbook::Engine.root.join("app/pb_kits/playbook/pb_#{kit}")
+    end
+
     def get_kit_examples(kit, type)
-      example_file = File.join(Playbook::Engine.root,
-                               "app", "pb_kits", "playbook", "pb_#{kit}", "docs", "example.yml")
+      example_file = kit_path(kit).join("docs/example.yml")
       if File.exist? example_file
         examples_list = YAML.load_file(example_file)
                             .inject({}) { |item, (k, v)| item[k.to_sym] = v; item }
@@ -183,12 +193,6 @@ module Playbook
       end
     end
 
-    def get_class_name(kit)
-      folder = is_subkit?(kit) ? kit.split("/")[0] : kit
-      item = is_subkit?(kit) ? kit.split("/")[-1] : kit
-      "Playbook::Pb#{folder.camelize}::#{item.camelize}".safe_constantize
-    end
-
     def render_clickable_title(kit, type)
       url = "#"
       begin

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss

@@ -289,9 +289,6 @@
 .numInputWrapper span svg path {
   fill: rgba(0,0,0,0.5);
 }
-.numInputWrapper:hover {
-  background: rgba(0,0,0,0.05);
-}
 .numInputWrapper:hover span {
   opacity: 1;
 }

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_header_styles.scss

@@ -37,6 +37,7 @@
     border: 0;
     appearance: none;
     -webkit-appearance: none;
+    border-radius: 0;
     background-color: transparent;
     border-left: solid 1px $border_light;
     padding-left: $space_md - 1.5;

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss

@@ -42,6 +42,6 @@
   -webkit-box-shadow: none;
           box-shadow: none;
 }
-.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
+.flatpickr-current-month .flatpickr-monthDropdown-months:hover, .numInputWrapper:hover {
   background-color: $white;
-}
+}

data/app/pb_kits/playbook/pb_filter/filter.html.erb

@@ -0,0 +1,86 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+    <%= object.wrapper do %>
+      <%= pb_rails("flex", props: { orientation: "row", padding_right: "lg", vertical: "center" }) do %>
+        <% if (object.template != "sort_only") %>
+          <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "filter", id:"filter#{object.id}"}) %>
+          <div class="maskContainer">
+            <div class="filters">
+              <div class="left_gradient"></div>
+              <% object.filters.each do |filter| %>
+                <% if filter[:name] == "" %>
+                  <div>
+                    <%= pb_rails("body", props: {
+                      color: "light",
+                      padding_left: "xs",
+                      size: 4,
+                      tag:"h4",
+                      text: "No Filter Selected"
+                    }) %>
+                  </div>
+                <% else %>
+                <div class="filter">
+                  <%= pb_rails("caption", props: { text: filter[:name]}) %>
+                  <%= pb_rails("title", props: { size: 4, tag:"h4", text: filter[:value]}) %>
+                </div>
+                <% end %>
+              <% end %>
+              <div class="right_gradient"></div>
+            </div>
+          </div>
+          <% if (object.template != "default") %>
+            <%= pb_rails("caption", props: {text: object.result_text, size:"xs", classname:"filter-results"})%>
+          <% end %>
+        <% end %>
+
+        <% if (object.template == "single" ) || (object.template == "sort_only") %>
+          <% unless object.sort_menu == [{}] %>
+            <%= pb_rails("button", props: {variant: "link",id: "sort-button#{object.id}",padding_right: "none"}) do %>
+              <% object.sort_menu.each do |item| %>
+                <% if item[:active] == true %>
+                  <%= item[:item] %>
+                  <%= pb_rails("icon", props: { icon: object.sort_icon(item[:direction]), fixed_width: true }) %>
+                <% end %>
+              <% end %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+
+      <% if (object.template == "default")%>
+        <%= pb_rails("section_separator") %>
+        <%= pb_rails("flex", props: {orientation: "row", vertical: "center", spacing: "between", classname: "filter-bottom"}) do %>
+          <%= pb_rails("title_count", props: {title: "Results:",count: object.results, align:"center"}) %>
+            <%= pb_rails("flex", props: {orientation: "row", vertical: "center"}) do %>
+              <%= pb_rails("caption", props: { text: "sort by:"}) %>
+              <%= pb_rails("button", props: {variant: "link", padding_right: "none", id: "sort-button#{object.id}"}) do %>
+                <% object.sort_menu.each do |item| %>
+                  <% if item[:active] == true %>
+                    <%= item[:item] %>
+                    <%= pb_rails("icon", props: { icon: object.sort_icon(item[:direction]), fixed_width: true }) %>
+                  <% end %>
+                <% end %>
+              <% end %>
+            <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <% if object.template != "sort_only"%>
+      <%= pb_rails("popover", props: {min_width: object.min_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: 'bottom'}) do %>
+        <%= content %>
+      <% end %>
+    <%end%>
+
+    <% if object.template != "filter_only"%>
+      <%= pb_rails("popover", props: {classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: 'bottom', padding: 'none'}) do %>
+          <%= pb_rails("list") do %>
+            <% object.sort_menu.each do |item| %>
+              <%= pb_rails("list/item") do%> <%= pb_rails("button", props: {variant: "link" ,classname: "p-0", text: item[:item], link: item[:link]}) %><% end %>
+            <% end %>
+          <% end %>
+      <% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_filter/filter.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbFilter
-    class Filter
-      include Playbook::Props
-
-      partial "pb_filter/filter"
-
+    class Filter < Playbook::KitBase
       prop :filters, type: Playbook::Props::HashArray, default: [{name: ''}]
       prop :sort_menu, type: Playbook::Props::HashArray, default: [{}]
       prop :results, type: Playbook::Props::Numeric
@@ -31,6 +27,14 @@ module Playbook
         end
       end
 
+      def wrapper(&block)
+        if object.background
+          pb_rails("card", props: { padding: "none" }, &block)
+        else
+          capture(&block)
+        end
+      end
+
       def sort_icon(direction)
         case direction
         when "asc"

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -13,7 +13,7 @@
   ]
 %>
 
-<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+<%= pb_rails("form", props: { form_system_options: { scope: :example, url: "", method: :get } }) do |form| %>
   <%= form.typeahead :example_user, props: { data: { typeahead_example1: true, user: {} }, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
   <%= form.telephone_field :example_phone_field, props: { label: true } %>
@@ -32,7 +32,7 @@
     unchecked_value: "no",
     id: "checkbox-id",
     name: "checkbox-name",
-    class: "checkbox-class" 
+    class: "checkbox-class"
   %>
   <%= form.date_picker :example_date_picker_1, props: { label: true } %>
 

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -14,7 +14,7 @@
 %>
 
 <%= pb_rails("form", props: {
-    form_system_options: { scope: :example, method: :get },
+    form_system_options: { scope: :example, method: :get, url: "" },
     validate: true
   }) do |form| %>
   <%= form.text_field :example_text_field, props: { label: true, required: true } %>

data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb

@@ -39,8 +39,7 @@
   ]
 %>
 
-
-<%= pb_rails("form", props: { form_system: "simple_form", form_system_options: [example_form_model.new, url: "", method: :get] }) do |form| %>
+<%= pb_rails("form/simple_form", props: { options: { model: example_form_model.new, url: "", method: :get } }) do |form| %>
   <%= form.input :example_text_field, as: :string %>
   <%= form.input :example_phone_field, as: :tel %>
   <%= form.input :example_email_field, as: :email %>

data/app/pb_kits/playbook/pb_form/form.html.erb

@@ -0,0 +1,7 @@
+<%=
+  pb_rails("form/#{form_system}", props: {
+    options: form_system_options,
+    children: children,
+    validate: validate
+  })
+%>

data/app/pb_kits/playbook/pb_form/form.rb

@@ -1,28 +1,26 @@
 # frozen_string_literal: true
 
-# require_dependency "app/pb_kits/playbook/pb_form/form_builder"
-
 module Playbook
   module PbForm
-    class Form
-      include Playbook::Props
-
-      clear_props
+    class Form < ::Playbook::KitBase
       prop :form_system, type: Playbook::Props::Enum,
                          values: %w[form_with simple_form],
                          default: "form_with"
       prop :form_system_options, type: Playbook::Props::Base
-      prop :children, type: Playbook::Props::Proc
       prop :validate, type: Playbook::Props::Boolean, default: false
 
-      delegate :to_partial_path, to: :specific_form
-      delegate :merged_form_system_options, to: :specific_form
-      delegate :form_builder, to: :specific_form
-
-    private
+      def form_system_options
+        form_options = prop(:form_system_options)
+        if form_options.is_a?(::Array)
+          model, options = *form_options
+          (options || {}).merge(model: model)
+        else
+          form_options
+        end
+      end
 
-      def specific_form
-        @specific_form ||= "#{self.class}::#{form_system.classify}Form".constantize.new(self)
+      def render_in(view_context, &_block)
+        super(view_context, &nil)
       end
     end
   end

data/app/pb_kits/playbook/pb_form/form_builder.rb

@@ -21,7 +21,7 @@ module Playbook
         prepend(DatePickerField)
 
         def actions(&block)
-          ActionArea.new(self).wrapper(&block)
+          @template.render_component ActionArea.new(submit_default_value: submit_default_value), &block
         end
       end
     end

data/app/pb_kits/playbook/pb_form/form_builder/action_area.html.erb

@@ -0,0 +1,3 @@
+<ol class="pb-form-actions">
+    <%= content %>
+</ol>

data/app/pb_kits/playbook/pb_form/form_builder/action_area.rb

@@ -3,10 +3,8 @@
 module Playbook
   module PbForm
     module FormBuilder
-      class ActionArea
-        def initialize(form_builder)
-          self.form_builder = form_builder
-        end
+      class ActionArea < Playbook::KitBase
+        prop :submit_default_value, type: Playbook::Props::String
 
         def submit(value = nil, props: {})
           props[:type] ||= "submit"
@@ -14,26 +12,12 @@ module Playbook
         end
 
         def button(value = nil, props:)
-          props[:text] ||= value || form_builder.send(:submit_default_value)
-
-          template.content_tag(:li) do
-            template.pb_rails("button", props: props)
-          end
-        end
+          props[:text] ||= value || submit_default_value
 
-        def wrapper
-          template.content_tag(:ol, class: "pb-form-actions") do
-            yield self
+          content_tag(:li) do
+            pb_rails("button", props: props)
           end
         end
-
-      private
-
-        attr_accessor :form_builder
-
-        def template
-          form_builder.instance_variable_get("@template")
-        end
       end
     end
   end

data/app/pb_kits/playbook/pb_form/form_with.html.erb

@@ -0,0 +1,18 @@
+<%= form_with(id: id,
+              aria: aria,
+              class: classname,
+              data: data,
+              builder: form_builder,
+              **options) do |form| %>
+  <% instance_exec form, &children %>
+
+  <% if validate %>
+    <% content_for :pb_js do %>
+      <%= javascript_tag do %>
+        window.addEventListener('DOMContentLoaded', function() {
+          PbFormValidation.start()
+        })
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_form/form_with.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbForm
+    class FormWith < Playbook::KitBase
+      class FormBuilder < ::ActionView::Helpers::FormBuilder
+        include ::Playbook::PbForm::FormBuilder
+      end
+
+      prop :options, type: Playbook::Props::Hash, default: {}
+      prop :validate, type: Playbook::Props::Boolean, default: false
+
+      def data
+        prop(:data).merge("pb-form-validation" => validate)
+      end
+
+      def options
+        { url: "" }.merge(Hash(prop(:options)))
+      end
+
+      def classname
+        [generate_classname("pb-form"), options[:class]].join(" ")
+      end
+
+      def form_builder
+        ::Playbook::PbForm::FormWith::FormBuilder
+      end
+
+      def render_in(view_context, &_block)
+        super(view_context, &nil)
+      end
+    end
+  end
+end