playbook_ui 7.16.0.pre.alpha3 → 8.0.0.pre.alpha4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5c1e2f80ae9beff061f5f66ba50e8abe2f5835015e89b63cd93f99fb0d31c7ea
-  data.tar.gz: ee51bfbcfd083f64b0178d93b52c9f17b32b5ebcdafb826a3ae344b00fde5079
+  metadata.gz: '061590a33e32cccf2c0a6b1f434921d84723d0bcbbdbbc088fd3b5f3d13cb978'
+  data.tar.gz: '01921feae3d387c46af5f4c9e05121df1808fddaa37f18c842fcb61d68efd33b'
 SHA512:
-  metadata.gz: 58175e42f87221ab469bffed9e7e8f93a924dd1fe8445281209650abbd46ec741d5aee71c7d0ec5471a33fc6cec9bd980644ef637ae648b67adfd7fa452e3b3d
-  data.tar.gz: 87eaf4528894c395091859cdc13dddae33648e6dfb905c2e936286c6f647fb3d1b6456fd5eac6e8424731287ce5411e5a5adf172d0001057914a7fe0579e24e5
+  metadata.gz: 05f0cc3aed39dda97c7bff82f2630b05b26242623ea00848f0b0efd327dccd1087cd95ddda329a78ded17139ec7c4e715dec853b485da79d0f1a9dbeac978656
+  data.tar.gz: ba4974ce61c5a6b1f56f3bb3aae34cc63000dd22db441d2387c506e5c924947013575840e36cecab9272d731cd4a1337d25d4e8944d5520037a085b644a24af6

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

@@ -45,7 +45,3 @@
 .flatpickr-current-month .flatpickr-monthDropdown-months:hover, .numInputWrapper:hover {
   background-color: $white;
 }
-
-// .numInputWrapper:hover {
-//   background-color: $white;
-// }

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

@@ -0,0 +1,12 @@
+<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("list", props: { xpadding: true }) do %>
+      <% kit_props.each do |key, _def| %>
+        <%= pb_rails("list/item") do %>
+          <%= key %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>

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

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbDocs
+    class KitApi < Playbook::KitBase
+      prop :kit, type: Playbook::Props::String, required: true
+
+      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_docs/kit_example.html.erb

@@ -0,0 +1,28 @@
+<%= pb_rails("card", props: { classname: "pb--doc", padding: "none", dark: dark }) do %>
+  <div class="pb--kit-example">
+    <%= pb_rails("caption", props: { text: example_title }) %>
+    <br />
+    <%= example %>
+    <br>
+  </div>
+
+  <% if show_code %>
+    <div class="markdown pb--kit-example-markdown <%= dark ? "dark" : "" %>">
+      <%= markdown(description) %>
+    </div>
+    <div id="code-wrapper">
+      <div class="pb--codeControls">
+        <ul>
+          <li>
+            <a href="#" id="toggle-open" data-toggle="code_example">Code Example</a>
+          </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="toggle-close" data-toggle="false" class="pb--close-toggle">Close</a>
+        <pre class="highlight"><%= raw rouge(source, highlighter) %></pre>
+      </div>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+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(kit, "_#{example_key}.md")
+      end
+
+      def highlighter
+        type.eql?("rails") ? "erb" : "react"
+      end
+
+      def source
+        @source ||= begin
+          extension = type == "react" ? "jsx" : "html.erb"
+          read_kit_file("_#{example_key}.#{extension}")
+        end
+      end
+
+    private
+
+      def read_kit_file(*args)
+        path = ::Playbook.kit_path(kit, "docs", *args)
+        path.exist? ? path.read : ""
+      end
+    end
+  end
+end

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