playbook_ui 7.0.0.pre.alpha9 → 7.0.1.pre.alpha5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a43c45f7c02be5a750af086ebfcefc86725299eb31719a0a2dd8a6a79e97fd8d
-  data.tar.gz: 859745ed6bd9388339f3ed65fbec574d07f2d3b109b7e8c79353272dcd7f888e
+  metadata.gz: 307f7d3b50e4e7f2fa0120bcc21789e4c7cdbdb7d95be1a861916bde4c60d53c
+  data.tar.gz: 60128d11456552fcb094b720a0397dd7819e114739724fd453658fbe19b2f79c
 SHA512:
-  metadata.gz: 96f4466b2ef7b76c1a35cea42bc83bdad24749c7e0bcfcba2b14a3d71f7215ab21a1400ec222976a96171a8b95bb9c77d3638b245a56856902532bbbdf4cbd42
-  data.tar.gz: 9e29349a5a6b132d926b48ea385458153886e3f5df9d1eb340d6d7d710ef7506745cd90a59e50c876bdd03c8a697f995c02504c94bf3ab1765ddb4a4e542565b
+  metadata.gz: 2b60ba28e743d5e4eaabd90b07d7046de61659cebbc1ff64496dd58c98cc02c16780474fda3a1b6e66332c8dab3c66c2dc87a8b9840e83c693ab2945e499dfec
+  data.tar.gz: 79d7e15c19a592e027b8c67e56eb9ae058c4c7b3dd989fd05b0cb2111b18114b704b90b6dc35247a5b0195939e34cbf1c988e7c1db2d87946430be47585e731d

data/app/controllers/playbook/application_controller.rb

@@ -2,10 +2,14 @@
 
 module Playbook
   class ApplicationController < ActionController::Base
+    protect_from_forgery with: :exception
+
     helper Webpacker::Helper
     helper Playbook::PbKitHelper
     helper Playbook::PbDocHelper
     helper Playbook::PbSampleHelper
     append_view_path Playbook::Engine.root + "app/pb_kits"
   end
+
+  ENV["dark_mode"] = "false"
 end

data/app/controllers/playbook/guides_controller.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+require_dependency "playbook/application_controller"
+
+module Playbook
+  class GuidesController < ApplicationController
+    def create_kit; end
+
+    def use_nitro; end
+  end
+end

data/app/controllers/playbook/pages_controller.rb

@@ -0,0 +1,90 @@
+# frozen_string_literal: true
+
+require_dependency "playbook/application_controller"
+require "yaml"
+
+module Playbook
+  class PagesController < ApplicationController
+    before_action :set_kit, only: %i[kit_show_rails kit_show_react]
+    before_action :ensure_kit_type_exists, only: %i[kit_show_rails kit_show_react]
+    before_action :set_category, only: %i[kit_category_show_rails kit_category_show_react]
+
+    def enable_dark_mode
+      ENV["dark_mode"] = "true"
+      redirect_back(fallback_location: root_path)
+    end
+
+    def disable_dark_mode
+      ENV["dark_mode"] = "false"
+      redirect_back(fallback_location: root_path)
+    end
+
+
+    def home; end
+
+    def utilities; end
+
+    def tokens; end
+
+    def kits
+      params[:type] ||= "react"
+      @type = params[:type]
+    end
+
+    def principles; end
+
+    def grid
+      render layout: "layouts/playbook/grid"
+    end
+
+    def kit_show_rails
+      render "playbook/pages/kit_show"
+    end
+
+    def kit_show_react
+      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"].map { |link| link.is_a?(Hash) ? link.first.last : link }
+      if menu.flatten.include?(params[:name])
+        @kit = params[:name]
+      else
+        redirect_to root_path, flash: { error: "That kit does not exist" }
+      end
+    end
+
+    def ensure_kit_type_exists
+      # TODO: unsure why we cannot simply use the helpers that are included in ApplicationController - fix this
+      is_rails_kit = action_name == "kit_show_rails"
+      files = is_rails_kit ? File.join("**", "*.erb") : File.join("**", "*.jsx")
+      kit_files = Dir.glob(files, base: "#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{@kit}/docs").present?
+      if !kit_files.present?
+        redirect_to action: is_rails_kit ? "kit_show_react" : "kit_show_rails"
+      end
+    end
+  end
+end

data/app/controllers/playbook/samples_controller.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+require_dependency "playbook/application_controller"
+require "yaml"
+
+module Playbook
+  class SamplesController < ApplicationController
+    before_action :set_sample, only: %i[sample_show_rails sample_show_react]
+
+    layout "playbook/samples"
+
+    def samples
+      params[:type] ||= "rails"
+      @type = params[:type]
+    end
+
+    def sample_show_rails
+      params[:type] ||= "rails"
+      @type = params[:type]
+      render template: "playbook/samples/sample_show"
+    end
+
+    def sample_show_react
+      params[:type] ||= "react"
+      @type = params[:type]
+      render template: "playbook/samples/sample_show"
+    end
+
+  private
+
+    def set_sample
+      menu = MENU["samples"].map { |link| link.is_a?(Hash) ? link.first.last : link }
+      if menu.flatten.include?(params[:name])
+        @sample = params[:name]
+      else
+        redirect_to root_path, flash: { error: "That kit does not exist" }
+      end
+    end
+  end
+end

data/app/helpers/playbook/application_helper.rb

@@ -13,5 +13,24 @@ module Playbook
     def current_webpacker_instance
       Playbook.webpacker
     end
+
+    def dark_mode
+      if ENV["dark_mode"] == "true"
+        true
+      else
+        false
+      end
+    end
+
+    def dark_mode_props(props)
+      if ENV["dark_mode"] == "true"
+        props.merge(dark: dark_mode)
+      elsif ENV["dark_mode"] == "false"
+        props.merge(dark: dark_mode)
+      else
+        props
+      end
+    end
+    
   end
 end

data/app/helpers/playbook/pb_doc_helper.rb

@@ -45,6 +45,7 @@ module Playbook
     end
 
     def pb_kit(kit: "", type: "rails", show_code: true)
+      # @dark = ENV["dark_mode"]
       @type = type
       @kit_examples = get_kit_examples(kit, type)
       @show_code = show_code

data/app/helpers/playbook/pb_kit_helper.rb

@@ -6,21 +6,36 @@ require "webpacker/react/component"
 
 module Playbook
   module PbKitHelper
+
     def pb_rails(kit, props: {}, &block)
       previous = prefix_partial_path_with_controller_namespace
       self.prefix_partial_path_with_controller_namespace = false
-      kit = build_view_model(kit.to_s, props, &block)
+      kit = build_view_model(kit.to_s, rails_props, &block)
       render(partial: kit, as: :object)
     ensure
       self.prefix_partial_path_with_controller_namespace = previous
     end
 
-    # deprecated
-    def pb_react(kit, props: {}, options: {})
+    def pb_react(kit, props:{dark: react_props}, options: {})
       ::Webpacker::React::Component.new(kit.camelize).render(props, options)
     end
 
   private
+    def rails_props
+      if ENV["dark_mode"].nil?
+        props
+      else
+        dark_mode_props
+      end
+    end  
+
+    def react_props
+      if ENV["dark_mode"].is_set?
+        false
+      else
+        dark_mode
+      end
+    end 
 
     def is_subkit?(kit)
       kit.match(%r{[/\\]})

data/app/pb_kits/playbook/_playbook.scss

@@ -1,4 +1,3 @@
-@import "tokens/fonts";
 @import "pb_body/body";
 @import "pb_button/button";
 @import 'pb_button_toolbar/button_toolbar';

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

@@ -1,9 +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'%>">
+    <%=pb_rails("card", props:{classname: "pb--doc", padding:"none"})do%>
         <%= render partial: "config/kit_ui", locals: { key: key, type: @type, item: item, show_code: @show_code } %>
-      </div>
+      <% end %>
     <% end %>
   <% end %>
-<% end %>
+<% end %>

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

@@ -19,7 +19,7 @@
 </div>
 
   <% if @show_code%>
-    <div class="markdown pb--kit-example-markdown">
+    <div class="markdown pb--kit-example-markdown <%=ENV["dark_mode"] == "true" ? "dark" : "" %>">
       <%= markdown(get_per_sample_descriptions(@kit_examples[:kit], key)) %>
     </div>
     <div class="pb--codeControls">
@@ -30,6 +30,7 @@
       </ul>
     </div>
     <div class="pb--codeCopy" data-action="toggle" data-togglable="code_example" style="display: none" >
+      <%= pb_rails("section_separator")%>
       <a href="#" data-toggle="false" class="pb--close-toggle">Close</a>
       <% if type == "rails" %>
         <pre class="highlight"><%= raw rouge(contents, "erb") %></pre>

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

@@ -1,18 +1,16 @@
 <% if defined?(@kit_api) && @kit_api.present? %>
+
   <div data-action="toggle" data-togglable="prop_example" class="pb--propsTable">
-    <table class="pb--propsTable--table">
-      <thead>
-        <tr>
-          <th>Available Props</th>
-        </tr>
-      </thead>
-      <tbody>
+  <%= 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_api.each_with_index do |(key,value),index| %>
-          <tr>
-            <td><%= key %></td>
-          </tr>
+            <%= pb_rails("list/item") do %>
+              <%= key %>
+            <% end %>
         <% end %>
-      </tbody>
-    </table>
+      <% end %>
+    <% end %>
   </div>
+  
 <% end %>

data/app/pb_kits/playbook/index.js

@@ -1,7 +1,3 @@
-import './_playbook.scss'
-import 'lazysizes/plugins/attrchange/ls.attrchange'
-import 'lazysizes'
-
 // React Component JSX Imports from the React Kits
 export Avatar from './pb_avatar/_avatar.jsx'
 export AvatarActionButton from './pb_avatar_action_button/_avatar_action_button.jsx'

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

@@ -0,0 +1,55 @@
+import '../../../../fonts/fontawesome-min.js'
+import '../../../../fonts/regular-min.js'
+import './main.scss'
+import '../vendor.js'
+
+// Move to separate file
+window.$(document).on('click', '[data-toggle]', function(e) {
+  e.preventDefault()
+
+  var kitContainer = window.$(this).closest('.pb--doc')
+  var toggleTarget = window.$(this).data('toggle')
+
+  window
+    .$(kitContainer)
+    .find('[data-action="toggle"]')
+    .hide()
+  window
+    .$(kitContainer)
+    .find('[data-togglable="' + toggleTarget + '"]')
+    .show()
+})
+
+window.$(document).ready(() => {
+  $('.compress').hide()
+
+  window.$(document).on('click', '.toggle-button', (e) => {
+    e.preventDefault()
+    $('.pb--codeCopy').toggleClass('close')
+  })
+
+  $('.expand').click(() => {
+    $('.sample-nav').hide()
+    $('.compress').show()
+  })
+
+  $('.compress').click(() => {
+    $('.sample-nav').show()
+    $('.compress').hide()
+  })
+
+  const setClipboard = (value) => {
+    var tempInput = document.createElement('textarea')
+    tempInput.style = 'position: absolute; left: -1000px; top: -1000px'
+    tempInput.value = value
+    document.body.appendChild(tempInput)
+    tempInput.select()
+    document.execCommand('copy')
+    document.body.removeChild(tempInput)
+  }
+
+  $('.copy-clipboard').click(() => {
+    var copyText = document.querySelector('.hiddenCodeforCopy').textContent
+    setClipboard(copyText)
+  })
+})

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

@@ -0,0 +1,175 @@
+// ===========================================
+// Generated file from kit generator.
+//
+// KIT EXAMPLES
+// ===========================================
+
+import WebpackerReact from 'webpacker-react'
+
+//
+// ===========================================
+// ===========================================
+// Generated file from kit generator.
+// KIT EXAMPLES
+
+import '../pb_form/pb_form_validation'
+import * as Avatar from 'pb_avatar/docs'
+import * as AvatarActionButton from 'pb_avatar_action_button/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 ButtonToolbar from 'pb_button_toolbar/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'
+import * as Currency from 'pb_currency/docs'
+import * as DashboardValue from 'pb_dashboard_value/docs'
+import * as Date from 'pb_date/docs'
+import * as DateRangeInline from 'pb_date_range_inline/docs'
+import * as DateRangeStacked from 'pb_date_range_stacked/docs'
+import * as DateStacked from 'pb_date_stacked/docs'
+import * as DateTimeStacked from 'pb_date_time_stacked/docs'
+import * as DateYearStacked from 'pb_date_year_stacked/docs'
+import * as DistributionBar from 'pb_distribution_bar/docs'
+import * as FileUpload from 'pb_file_upload/docs'
+import * as Filter from 'pb_filter/docs'
+import * as FixedConfirmationToast from 'pb_fixed_confirmation_toast/docs'
+import * as Flex from 'pb_flex/docs'
+import * as FormPill from 'pb_form_pill/docs'
+import * as Gauge from 'pb_gauge/docs'
+import * as Hashtag from 'pb_hashtag/docs'
+import * as Highlight from 'pb_highlight/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 LabelPill from 'pb_label_pill/docs'
+import * as LabelValue from 'pb_label_value/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 LoadingInline from 'pb_loading_inline/docs'
+import * as Message from 'pb_message/docs'
+import * as MultipleUsers from 'pb_multiple_users/docs'
+import * as MultipleUsersStacked from 'pb_multiple_users_stacked/docs'
+import * as Nav from 'pb_nav/docs'
+import * as OnlineStatus from 'pb_online_status/docs'
+import * as PbReactPopover from 'pb_popover/docs'
+import * as Person from 'pb_person/docs'
+import * as PersonContact from 'pb_person_contact/docs'
+import * as Pill from 'pb_pill/docs'
+import * as ProgressPills from 'pb_progress_pills/docs'
+import * as ProgressSimple from 'pb_progress_simple/docs'
+import * as ProgressStep from 'pb_progress_step/docs'
+import * as Radio from 'pb_radio/docs'
+import * as SectionSeparator from 'pb_section_separator/docs'
+import * as Select from 'pb_select/docs'
+import * as SelectableCard from 'pb_selectable_card/docs'
+import * as SelectableCardIcon from 'pb_selectable_card_icon/docs'
+import * as SelectableIcon from 'pb_selectable_icon/docs'
+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 Textarea from 'pb_textarea/docs'
+import * as TextInput from 'pb_text_input/docs'
+import * as Time from 'pb_time/docs'
+import * as Timeline from 'pb_timeline/docs'
+import * as TimeStacked from 'pb_time_stacked/docs'
+import * as Timestamp from 'pb_timestamp/docs'
+import * as TimeRangeInline from 'pb_time_range_inline/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 * as WeekdayStacked from 'pb_weekday_stacked/docs'
+
+WebpackerReact.setup({
+  ...Avatar,
+  ...AvatarActionButton,
+  ...Badge,
+  ...BarGraph,
+  ...Body,
+  ...Button,
+  ...ButtonToolbar,
+  ...Caption,
+  ...Card,
+  ...Checkbox,
+  ...CircleIconButton,
+  ...Contact,
+  ...Currency,
+  ...DashboardValue,
+  ...Date,
+  ...DateRangeInline,
+  ...DateRangeStacked,
+  ...DateStacked,
+  ...DateTimeStacked,
+  ...DateYearStacked,
+  ...DistributionBar,
+  ...FileUpload,
+  ...Filter,
+  ...FixedConfirmationToast,
+  ...Flex,
+  ...FormPill,
+  ...Gauge,
+  ...Hashtag,
+  ...Highlight,
+  ...HomeAddressStreet,
+  ...Icon,
+  ...IconCircle,
+  ...IconValue,
+  ...Image,
+  ...LabelPill,
+  ...LabelValue,
+  ...Layout,
+  ...Legend,
+  ...LineGraph,
+  ...List,
+  ...LoadingInline,
+  ...Message,
+  ...MultipleUsers,
+  ...MultipleUsersStacked,
+  ...Nav,
+  ...OnlineStatus,
+  ...PbReactPopover,
+  ...Person,
+  ...PersonContact,
+  ...Pill,
+  ...ProgressPills,
+  ...ProgressSimple,
+  ...ProgressStep,
+  ...Radio,
+  ...SectionSeparator,
+  ...Select,
+  ...SelectableCard,
+  ...SelectableIcon,
+  ...SelectableCardIcon,
+  ...Source,
+  ...StarRating,
+  ...StatChange,
+  ...StatValue,
+  ...Table,
+  ...Textarea,
+  ...TextInput,
+  ...Time,
+  ...Timeline,
+  ...TimeStacked,
+  ...Timestamp,
+  ...TimeRangeInline,
+  ...Title,
+  ...TitleCount,
+  ...TitleDetail,
+  ...Toggle,
+  ...User,
+  ...UserBadge,
+  ...WeekdayStacked,
+})
+