playbook_ui 4.1.2 → 4.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8d8d2706a6185cb8fff36a451298252df283de1357548d7bfe979a800d348667
-  data.tar.gz: bbd353a847bb8ca1f36d49326ceaa861e83ef3ef8fad809ee4380afd00ecb76b
+  metadata.gz: e1f5453ef495f16a0c7abae04bef14015972c62ac815cd6b2c95e8b3d628bd67
+  data.tar.gz: 541addf63471c2acbc2c8e67ecbfa7beb2d13f7a986bdea2675e78a915cdd568
 SHA512:
-  metadata.gz: c4e51aa393a12e4c058a4e6ad07599dea8e853dc13f09e2adef3c3347876c9bf6c3388cd543dcb33ffad5e9939d9a00c02cc069171ecbd29f31290be5ac19782
-  data.tar.gz: '080fc6900b777356abf179f744bb3b299055fd7baa3c1da5d68249c766288961f1035e4f62cbbfb33fb7c5b923f30a5b176426509ecb706cc0d3f64fe00159fa'
+  metadata.gz: 270dbf525c913b04d5ec65c4318b11da5fffea2c4624e42e2dbc26321651369039f0bc0b24d0d8ae1859cb01387bf1197dfe5f64aeb77ef08ddc5a9c833aaa38
+  data.tar.gz: 1f35b76115e2679e476ea3188188a96e5362847db1a1047e9eea3fe1e0c02d937b3abe988f55b5d89b38ee3584f156e3f9710f69d9c448cb425e14e5c8634201

data/app/controllers/playbook/pages_controller.rb

@@ -6,6 +6,7 @@ require "yaml"
 module Playbook
   class PagesController < ApplicationController
     before_action :set_kit, only: %i[kit_show_rails kit_show_react]
+    before_action :set_category, only: %i[kit_category_show_rails kit_category_show_react]
 
     def home; end
 
@@ -36,14 +37,35 @@ module Playbook
       render template: "playbook/pages/kit_show"
     end
 
+    def kit_category_show_rails
+      params[:type] ||= "rails"
+      @type = params[:type]
+      render template: "playbook/pages/kit_category_show"
+    end
+
+    def kit_category_show_react
+      render template: "playbook/pages/kit_category_show"
+    end
+
   private
 
+    def set_category
+      categories = MENU["kits"].map { |link| link.first.first if link.is_a?(Hash) }.compact
+      @category = params[:name]
+      if categories.flatten.include?(@category)
+        @category_kits = MENU["kits"].map { |link| link.first.last if link.is_a?(Hash) && link.first.first == @category }.compact.flatten
+        @kits = params[:name]
+      else
+        redirect_to root_path, flash: { error: "That kit does not exist" }
+      end
+    end
+
     def set_kit
-      menu = MENU["kits"]
-      if menu.include?(params[:name])
+      menu = MENU["kits"].map { |link| link.is_a?(Hash) ? link.first.last : link }
+      if menu.flatten.include?(params[:name])
         @kit = params[:name]
       else
-        redirect_to root_path
+        redirect_to root_path, flash: { error: "That kit does not exist" }
       end
     end
   end

data/app/helpers/playbook/application_helper.rb

@@ -13,9 +13,5 @@ module Playbook
     def current_webpacker_instance
       Playbook.webpacker
     end
-
-    # def react_component(component_name, props = {}, options = {})
-    #   ::Webpacker::React::Component.new(component_name).render(props, options)
-    # end
   end
 end

data/app/helpers/playbook/pb_doc_helper.rb

@@ -15,23 +15,42 @@ module Playbook
       end
     end
 
-    def pb_kit(kit: "", type: "rails")
+    def pb_kit(kit: "", type: "rails", show_code: true)
       @type = type
       @kit_examples = get_kit_examples(kit, type)
-      render partial: "playbook/config/kit_example"
+      @show_code = show_code
+      render partial: "config/kit_example"
     end
 
     def pb_kits(type: "rails")
       display_kits = []
-      MENU["kits"].sort.each do |kit|
-        title = render_clickable_title(kit)
-        ui = raw("<div class='pb--docItem-ui'>
-            #{pb_kit(kit: kit, type: type)}</div>")
-        display_kits << title + ui
+      MENU["kits"].each do |kit|
+        if kit.is_a?(Hash)
+          nav_hash_array(kit).each do |sub_kit|
+            display_kits << render_pb_doc_kit(sub_kit, type)
+          end
+        else
+          display_kits << render_pb_doc_kit(kit, type, false)
+        end
       end
       raw("<div class='pb--docItem'>" + display_kits.join("</div><div class='pb--docItem'>") + "</div>")
     end
 
+    def pb_category_kits(category_kits: [], type: "rails")
+      display_kits = []
+      category_kits.each do |kit|
+        display_kits << render_pb_doc_kit(kit, type, false)
+      end
+      raw("<div class='pb--docItem'>" + display_kits.join("</div><div class='pb--docItem'>") + "</div>")
+    end
+
+    def render_pb_doc_kit(kit, type, code = true)
+      title = render_clickable_title(kit)
+      ui = raw("<div class='pb--docItem-ui'>
+          #{pb_kit(kit: kit, type: type, show_code: code)}</div>")
+      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
@@ -42,6 +61,14 @@ module Playbook
       render partial: "playbook/config/pb_kit_api"
     end
 
+    def nav_hash_category(link)
+      link.keys.first
+    end
+
+    def nav_hash_array(link)
+      link.first.last
+    end
+
   private
 
     def get_kit_examples(kit, type)
@@ -63,9 +90,13 @@ module Playbook
     end
 
     def render_clickable_title(kit)
-      render inline: "<a href='#{kit_show_path(kit)}'>
-          #{pb_rails(:title, props: { text: pb_kit_title(kit),
-                                      tag: 'h3', size: 2 })}</a>"
+      url = "#"
+      begin
+        url = kit_show_path(kit)
+      rescue
+        puts "Kit Path Not Avaliable"
+      end
+        render inline: "<a href='#{url}'>#{ pb_rails(:title, props: { text: pb_kit_title(kit), tag: 'h3', size: 2 })}</a>"
     end
   end
 end

data/app/pb_kits/playbook/_playbook.scss

@@ -18,6 +18,7 @@
 @import 'pb_distribution_bar/distribution_bar';
 @import 'pb_fixed_confirmation_toast/fixed_confirmation_toast';
 @import 'pb_form/form';
+@import 'pb_flex/flex';
 @import 'pb_hashtag/hashtag';
 @import 'pb_home_address_street/home_address_street';
 @import 'pb_icon/icon';

data/app/pb_kits/playbook/config/_kit_example.html.erb

@@ -0,0 +1,9 @@
+<%if !@kit_examples[:examples].nil? %>
+  <% @kit_examples[:examples].each do |kit_example| %>
+    <% kit_example.each do |key, item| %>
+      <div class="pb--doc <%=key.include?('_dark') ? 'dark_ui' : 'light_ui'%>">
+        <%= render partial: "config/kit_ui", locals: { key: key, type: @type, item: item, show_code: @show_code } %>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/config/_kit_example.html.slim

@@ -2,4 +2,4 @@
   - @kit_examples[:examples].each do |kit_example|
     - kit_example.each do |key, item|
       .pb--doc class=(key.include?("_dark") ? "dark_ui" : "light_ui")
-        = render partial: "playbook/config/kit_ui", locals: { key: key, type: @type, item: item }
+        = render partial: "config/kit_ui", locals: { key: key, type: @type, item: item, show_code: @show_code }

data/app/pb_kits/playbook/config/_kit_ui.html.slim

@@ -1,24 +1,29 @@
 - type ||= "rails"
-- file_name = type == "rails" ? "_#{key}.html.erb" : "_#{key}.jsx"
-- contents = File.read("#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{@kit_examples[:kit]}/docs/#{file_name}")
+
+- if type == "react"
+  - contents = "<%= react_component('kits/#{key}') %>"
+- else
+  - contents = File.read("#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{@kit_examples[:kit]}/docs/_#{key}.html.erb")
 
 .pb--kit-example
   = pb_rails("caption", props: { text: item })
   br
   - if type == "rails"
-    = render partial: "playbook/pb_#{@kit_examples[:kit]}/docs/#{key}"
+    = render partial: "pb_#{@kit_examples[:kit]}/docs/#{key}"
   - elsif type == "react"
     = pb_react(key.camelize)
   br
 
-.pb--codeControls
-  ul
-    li
-      a href="#" data-toggle="code_example" Code Example
 
-.pb--codeCopy data-action="toggle" data-togglable="code_example"
-  a.pb--close-toggle href="#" data-toggle="false" Close
-  - if type == "rails"
-    = raw rouge(contents, "erb")
-  - elsif type == "react"
-    = raw rouge(contents, "erb")
+- if @show_code
+  .pb--codeControls
+    ul
+      li
+        a href="#" data-toggle="code_example" Code Example
+
+  .pb--codeCopy data-action="toggle" data-togglable="code_example"
+    a.pb--close-toggle href="#" data-toggle="false" Close
+    - if type == "rails"
+      = raw rouge(contents, "erb")
+    - elsif type == "react"
+      = raw rouge(contents, "erb")

data/app/pb_kits/playbook/data/menu.yml

@@ -0,0 +1,70 @@
+kits:
+  - avatar
+  - badge
+  - buttons:
+    - button
+    - circle_icon_button
+  - card
+  - checkbox
+  - charts_and_graphs:
+    - bar_graph
+    - legend
+    - line_graph
+    - distribution_bar
+  - fixed_confirmation_toast
+  - flex
+  - forms:
+    - form
+    - radio
+    - select
+    - selectable_card
+    - text_input
+    - textarea
+    - typeahead
+    - toggle
+  - hashtag
+  - icon
+  - icon_circle
+  - icon_value
+  - image
+  - layout
+  - list
+  - loading_inline
+  - multiple_users
+  - multiple_users_stacked
+  - nav
+  - online_status
+  - pill
+  - popover
+  - progress_pills
+  - progress_simple
+  - section_separator
+  - source
+  - star_rating
+  - stat_changea
+  - table
+  - typography:
+    - body
+    - caption
+    - title
+  - typography_patterns:
+    - contact
+    - currency
+    - dashboard_value
+    - date
+    - date_range_inline
+    - date_stacked
+    - date_year_stacked
+    - home_address_street
+    - label_pill
+    - label_value
+    - message
+    - person
+    - person_contact
+    - stat_value
+    - time
+    - timestamp
+    - title_count
+    - title_detail
+  - user
+  - user_badge

data/app/pb_kits/playbook/index.js

@@ -17,6 +17,8 @@ export DateStacked from './pb_date_stacked/_date_stacked.jsx'
 export DateYearStacked from './pb_date_year_stacked/_date_year_stacked.jsx'
 export DistributionBar from './pb_distribution_bar/_distribution_bar.jsx'
 export FixedConfirmationToast from './pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx'
+export Flex from './pb_flex/_flex.jsx'
+export FlexItem from './pb_flex/_flex_item.jsx'
 export Hashtag from './pb_hashtag/_hashtag.jsx'
 export HomeAddressStreet from './pb_home_address_street/_home_address_street.jsx'
 export Icon from './pb_icon/_icon.jsx'

data/app/pb_kits/playbook/packs/application.js

@@ -1,7 +1,6 @@
 import '../../../../fonts/fontawesome.min.js'
 import '../../../../fonts/regular.min.js'
 import './main.scss'
-import './kits.js'
 import '../vendor.js'
 
 // Move to separate file

data/app/pb_kits/playbook/packs/examples.js

@@ -13,13 +13,13 @@ import WebpackerReact from 'webpacker-react'
 // KIT EXAMPLES
 
 import '../pb_form/pb_form_validation'
-import * as avatar from 'pb_avatar/docs'
+import * as Avatar from 'pb_avatar/docs'
 import * as Badge from 'pb_badge/docs'
 import * as BarGraph from 'pb_bar_graph/docs'
-import * as body from 'pb_body/docs'
-import * as button from 'pb_button/docs'
-import * as caption from 'pb_caption/docs'
-import * as card from 'pb_card/docs'
+import * as Body from 'pb_body/docs'
+import * as Button from 'pb_button/docs'
+import * as Caption from 'pb_caption/docs'
+import * as Card from 'pb_card/docs'
 import * as Checkbox from 'pb_checkbox/docs'
 import * as CircleIconButton from 'pb_circle_icon_button/docs'
 import * as Contact from 'pb_contact/docs'
@@ -31,18 +31,19 @@ import * as DateStacked from 'pb_date_stacked/docs'
 import * as DateYearStacked from 'pb_date_year_stacked/docs'
 import * as DistributionBar from 'pb_distribution_bar/docs'
 import * as FixedConfirmationToast from 'pb_fixed_confirmation_toast/docs'
+import * as Flex from 'pb_flex/docs'
 import * as Hashtag from 'pb_hashtag/docs'
 import * as HomeAddressStreet from 'pb_home_address_street/docs'
 import * as Icon from 'pb_icon/docs'
 import * as IconCircle from 'pb_icon_circle/docs'
 import * as IconValue from 'pb_icon_value/docs'
-import * as image from 'pb_image/docs'
+import * as Image from 'pb_image/docs'
 import * as LabelPill from 'pb_label_pill/docs'
 import * as LabelValue from 'pb_label_value/docs'
-import * as layout from 'pb_layout/docs'
+import * as Layout from 'pb_layout/docs'
 import * as Legend from 'pb_legend/docs'
 import * as LineGraph from 'pb_line_graph/docs'
-import * as list from 'pb_list/docs'
+import * as List from 'pb_list/docs'
 import * as LoadingInline from 'pb_loading_inline/docs'
 import * as Message from 'pb_message/docs'
 import * as MultipleUsers from 'pb_multiple_users/docs'
@@ -62,78 +63,81 @@ import * as Source from 'pb_source/docs'
 import * as StarRating from 'pb_star_rating/docs'
 import * as StatChange from 'pb_stat_change/docs'
 import * as StatValue from 'pb_stat_value/docs'
-import * as table from 'pb_table/docs'
+import * as Table from 'pb_table/docs'
 import * as Textarea from 'pb_textarea/docs'
 import * as TextInput from 'pb_text_input/docs'
 import * as Time from 'pb_time/docs'
 import * as Timestamp from 'pb_timestamp/docs'
-import * as title from 'pb_title/docs'
+import * as Title from 'pb_title/docs'
 import * as TitleCount from 'pb_title_count/docs'
 import * as TitleDetail from 'pb_title_detail/docs'
 import * as Toggle from 'pb_toggle/docs'
 import * as User from 'pb_user/docs'
 import * as UserBadge from 'pb_user_badge/docs'
-import PbTypeahead from 'pb_typeahead'
 
+import PbTypeahead from 'pb_typeahead'
 PbTypeahead.start()
-WebpackerReact.setup(avatar)
-WebpackerReact.setup(Badge)
-WebpackerReact.setup(BarGraph)
-WebpackerReact.setup(body)
-WebpackerReact.setup(button)
-WebpackerReact.setup(caption)
-WebpackerReact.setup(card)
-WebpackerReact.setup(Checkbox)
-WebpackerReact.setup(CircleIconButton)
-WebpackerReact.setup(Contact)
-WebpackerReact.setup(Currency)
-WebpackerReact.setup(DashboardValue)
-WebpackerReact.setup(Date)
-WebpackerReact.setup(DateRangeInline)
-WebpackerReact.setup(DateStacked)
-WebpackerReact.setup(DateYearStacked)
-WebpackerReact.setup(DistributionBar)
-WebpackerReact.setup(FixedConfirmationToast)
-WebpackerReact.setup(Hashtag)
-WebpackerReact.setup(HomeAddressStreet)
-WebpackerReact.setup(Icon)
-WebpackerReact.setup(IconCircle)
-WebpackerReact.setup(IconValue)
-WebpackerReact.setup(image)
-WebpackerReact.setup(LabelPill)
-WebpackerReact.setup(LabelValue)
-WebpackerReact.setup(layout)
-WebpackerReact.setup(Legend)
-WebpackerReact.setup(LineGraph)
-WebpackerReact.setup(list)
-WebpackerReact.setup(LoadingInline)
-WebpackerReact.setup(Message)
-WebpackerReact.setup(MultipleUsers)
-WebpackerReact.setup(MultipleUsersStacked)
-WebpackerReact.setup(Nav)
-WebpackerReact.setup(OnlineStatus)
-WebpackerReact.setup(Person)
-WebpackerReact.setup(PersonContact)
-WebpackerReact.setup(Pill)
-WebpackerReact.setup(Popover)
-WebpackerReact.setup(ProgressPills)
-WebpackerReact.setup(ProgressSimple)
-WebpackerReact.setup(Radio)
-WebpackerReact.setup(SectionSeparator)
-WebpackerReact.setup(Select)
-WebpackerReact.setup(SelectableCard)
-WebpackerReact.setup(Source)
-WebpackerReact.setup(StarRating)
-WebpackerReact.setup(StatChange)
-WebpackerReact.setup(StatValue)
-WebpackerReact.setup(table)
-WebpackerReact.setup(Textarea)
-WebpackerReact.setup(TextInput)
-WebpackerReact.setup(Time)
-WebpackerReact.setup(Timestamp)
-WebpackerReact.setup(title)
-WebpackerReact.setup(TitleCount)
-WebpackerReact.setup(TitleDetail)
-WebpackerReact.setup(Toggle)
-WebpackerReact.setup(User)
-WebpackerReact.setup(UserBadge)
+
+WebpackerReact.setup({
+  ...Avatar,
+  ...Badge,
+  ...BarGraph,
+  ...Body,
+  ...Button,
+  ...Caption,
+  ...Card,
+  ...Checkbox,
+  ...CircleIconButton,
+  ...Contact,
+  ...Currency,
+  ...DashboardValue,
+  ...Date,
+  ...DateRangeInline,
+  ...DateStacked,
+  ...DateYearStacked,
+  ...DistributionBar,
+  ...FixedConfirmationToast,
+  ...Flex,
+  ...Hashtag,
+  ...HomeAddressStreet,
+  ...Icon,
+  ...IconCircle,
+  ...IconValue,
+  ...Image,
+  ...LabelPill,
+  ...LabelValue,
+  ...Layout,
+  ...Legend,
+  ...LineGraph,
+  ...List,
+  ...LoadingInline,
+  ...Message,
+  ...MultipleUsers,
+  ...MultipleUsersStacked,
+  ...Nav,
+  ...OnlineStatus,
+  ...Person,
+  ...PersonContact,
+  ...Pill,
+  ...ProgressPills,
+  ...ProgressSimple,
+  ...Radio,
+  ...SectionSeparator,
+  ...Select,
+  ...SelectableCard,
+  ...Source,
+  ...StarRating,
+  ...StatChange,
+  ...StatValue,
+  ...Table,
+  ...Textarea,
+  ...TextInput,
+  ...Time,
+  ...Timestamp,
+  ...Title,
+  ...TitleCount,
+  ...TitleDetail,
+  ...Toggle,
+  ...User,
+  ...UserBadge,
+})