playbook_ui 7.10.0 → 7.12.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2dded8961e6cc6308b1d07c4ddc00b8be69244d92b120ab3d1a370f566a7cd37
-  data.tar.gz: ac06d5ca306f7ba1103a2d68c7e179a8cabd2984e56c73d9a358a25ebb65213f
+  metadata.gz: 76db663b65350ec3f036853f672a99eb7e62addc7f28184b1053376bbde92e1f
+  data.tar.gz: 5c41351c08585e60804c594c118eca69121a696a36ed5d4dfe42b0e7f71a9baf
 SHA512:
-  metadata.gz: d726cb9073d2bf80830ed397990203f1faf674b7f2e04e8da01d70a7ac3ad590a111a373904d4b756ff964eb55ef7829454a10313f370f0310f690298c15a85a
-  data.tar.gz: d18d68afbb27818521cc240f52d6f05c025f0c23745bf3095a7ec1c848c97e73a784049e4db873ad51f874320b32e5d6dc93e441ce6df62025d23031cf1de5a4
+  metadata.gz: 4a32adf1b5e466f16d27c5f3ef87c85e77b5222b1c2876961f8bfeefd9293c97935c4765ea69fca85a49c66016dd9272726a64cf76e478eda7f3170393b01f15
+  data.tar.gz: 1e1e8952f87a4eb7ac560cb98131ec96acd340296bfd504ac539cf1ab6681b4dc55b64a7fedb241fbba4474ed541b33627d2444a31463b9343c94e2f2f73f80f

data/app/controllers/playbook/application_controller.rb

@@ -3,11 +3,13 @@
 module Playbook
   class ApplicationController < ActionController::Base
     helper Webpacker::Helper
-    helper Playbook::PbKitHelper
+    helper Playbook::ApplicationHelper
     helper Playbook::PbDocHelper
     helper Playbook::PbSampleHelper
     append_view_path Playbook::Engine.root + "app/pb_kits"
-  end
 
-  
+    def delete_dark_mode_cookie
+      cookies.delete :dark_mode
+    end
+  end
 end

data/app/helpers/playbook/application_helper.rb

@@ -1,36 +1,30 @@
 # frozen_string_literal: true
 
-require "webpacker"
-require "webpacker/react/railtie" if defined?(Rails)
-require "webpacker/react/helpers"
-require "webpacker/react/component"
-
 module Playbook
   module ApplicationHelper
-    include ::Webpacker::Helper
     include ::Webpacker::React::Helpers
+    include ::Playbook::PbKitHelper
 
     def current_webpacker_instance
       Playbook.webpacker
     end
 
-    def dark_mode
-      if cookies[:dark_mode] == "true"
-        true
-      else
-        false
-      end
+    def pb_rails(kit, props: {}, &block)
+      super kit, props: dark_mode_props(props), &block
+    end
+
+    def pb_react(kit, props: {}, options: {})
+      react_component kit.camelize, dark_mode_props(props), options
     end
 
+  private
+
     def dark_mode_props(props)
-      if cookies[:dark_mode] == "true"
-        props.merge(dark: dark_mode)
-      elsif cookies[:dark_mode] == "false"
-        props.merge(dark: dark_mode)
-      else
-        props
-      end
+      (props || {}).merge(dark: dark_mode?)
     end
 
+    def dark_mode?
+      cookies[:dark_mode].eql? "true"
+    end
   end
 end

data/app/helpers/playbook/pb_doc_helper.rb

@@ -17,53 +17,20 @@ module Playbook
       end
     end
 
-    def read_file(filename)
-      if File.file?(filename)
-        File.read(filename)
-      else
-        ""
-      end
-    end
-
-    def delete_dark_mode_cookie
-      cookies.delete :dark_mode
-    end
-
-    def get_samples(kit)
-      sample_yaml = YAML.load_file("#{Playbook::Engine.root}/app/pb_kits/playbook/data/samples.yml")
-      all_samples = []
-
-      sample_yaml.each do |_category, sample|
-        all_samples.push(sample)
-      end
-
-      output = ""
-      samples_using_kit = []
-      all_samples[0].each do |sample|
-        filepath = "#{Playbook::Engine.root}/app/views/playbook/samples/#{sample}/index.html.erb"
-        output = `grep -l 'pb_rails(\"#{kit}' #{filepath}`
-        samples_using_kit.push(sample) if output.chomp == filepath
-      end
-      samples_using_kit
-    end
-
     def kit_path(kit)
       "#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{kit}"
     end
 
     def get_kit_description(kit)
-      filename = "#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{kit}/docs/_description.md"
-      read_file(filename)
+      read_source_file "app/pb_kits/playbook/pb_#{kit}/docs/_description.md"
     end
 
     def get_per_sample_descriptions(kit, key)
-      filename = "#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{kit}/docs/_#{key}.md"
-      read_file(filename)
+      read_source_file "app/pb_kits/playbook/pb_#{kit}/docs/_#{key}.md"
     end
 
     def get_kit_footer(kit)
-      filename = "#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{kit}/docs/_footer.md"
-      read_file(filename)
+      read_source_file "app/pb_kits/playbook/pb_#{kit}/docs/_footer.md"
     end
 
     def pb_kit(kit: "", type: "rails", show_code: true, limit_examples: false)
@@ -171,6 +138,11 @@ module Playbook
       (!kit.nil? && @kit == link)
     end
 
+    def read_source_file(*args)
+      path = Playbook::Engine.root.join(*args)
+      path.exist? ? path.read : ""
+    end
+
     def format_search_hash(kit)
       label_value_hash = {
         label: kit.to_s.titleize,

data/app/helpers/playbook/pb_kit_helper.rb

@@ -1,41 +1,17 @@
 # frozen_string_literal: true
 
-require "webpacker/react/railtie" if defined?(Rails)
-require "webpacker/react/helpers"
-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, rails_props(props), &block)
+      kit = build_view_model(kit.to_s, props, &block)
       render(partial: kit, as: :object)
     ensure
       self.prefix_partial_path_with_controller_namespace = previous
     end
 
-    def pb_react(kit, props:{dark: react_props}, options: {})
-      ::Webpacker::React::Component.new(kit.camelize).render(props, options)
-    end
-
   private
-    def rails_props(props)
-      if @playbook.nil?
-        props
-      else
-        dark_mode_props(props)
-      end
-    end  
-
-    def react_props
-      if @playbook.nil?
-        false
-      else
-        dark_mode
-      end
-    end 
 
     def is_subkit?(kit)
       kit.match(%r{[/\\]})

data/app/helpers/playbook/pb_sample_helper.rb

@@ -2,43 +2,20 @@
 
 module Playbook
   module PbSampleHelper
-    def has_sample_type?(sample, type)
-      type ||= "rails"
-      if type == "rails"
-        Dir["../../views/playbook/samples/#{sample}/*.html.erb"].empty?
-      elsif type == "react"
-        Dir["../../views/playbook/samples/#{sample}/*.jsx"].empty?
-      end
-    end
-
     def kits_used(sample)
       code = get_raw_code(sample, "rails")
       kits_array = code.scan(/pb_rails\("(\w+)(?:"|\/)/)
       kits_array.uniq
     end
 
-    def pb_sample(sample: "", type: "rails")
-      @type = type
-      @sample = sample
-    end
-
-    def read_file(filename)
-      if File.file?(filename)
-        File.read(filename)
-      else
-        ""
-      end
-    end
-
     def get_raw_code(sample, type)
       if type == "rails"
         ext = "html.erb"
       elsif type == "react"
         ext = "jsx"
       end
-      filename = "#{Playbook::Engine.root}/app/views/playbook/samples/#{sample}/index.#{ext}"
-      contents = read_file(filename)
-      contents
+
+      read_source_file "app/views/playbook/samples", sample, "index.#{ext}"
     end
 
     def get_sample_code_content(sample, type)
@@ -51,6 +28,31 @@ module Playbook
       raw rouge(code, rouge_type)
     end
 
+    def get_category(sample)
+      cat = ""
+      SAMPLES.each do |category, samples|
+        cat = category if samples.include?(sample)
+      end
+      cat
+    end
+
+    def get_samples(kit)
+      all_samples = []
+
+      SAMPLES.each do |_category, sample|
+        all_samples.push(sample)
+      end
+
+      output = ""
+      samples_using_kit = []
+      all_samples[0].each do |sample|
+        filepath = "#{Playbook::Engine.root}/app/views/playbook/samples/#{sample}/index.html.erb"
+        output = `grep -l 'pb_rails(\"#{kit}' #{filepath}`
+        samples_using_kit.push(sample) if output.chomp == filepath
+      end
+      samples_using_kit
+    end
+
     def render_sample_ui(sample, type)
       if type == "rails"
         render template: "playbook/samples/#{sample}/index.html.erb"

data/app/pb_kits/playbook/index.js

@@ -1,8 +1,9 @@
+// !!! IMPORTANT: This file is autogenerated. Please do not edit.!!!
 import './_playbook.scss'
 import 'lazysizes/plugins/attrchange/ls.attrchange'
 import 'lazysizes'
 
-// React Component JSX Imports from the React Kits
+// vvv React Component JSX Imports from the React Kits vvv
 export Avatar from './pb_avatar/_avatar.jsx'
 export AvatarActionButton from './pb_avatar_action_button/_avatar_action_button.jsx'
 export Background from './pb_background/_background.jsx'
@@ -96,6 +97,7 @@ export Typeahead from './pb_typeahead/_typeahead.jsx'
 export User from './pb_user/_user.jsx'
 export UserBadge from './pb_user_badge/_user_badge.jsx'
 export WeekdayStacked from './pb_weekday_stacked/_weekday_stacked.jsx'
+// ^^^ React Component JSX Imports from the React Kits ^^^
 
 // Dashboard Settings
 export { commonSettings, dataColors } from './pb_dashboard/commonSettings'

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.jsx

@@ -4,9 +4,9 @@ import { AvatarActionButton } from '../../'
 const AvatarActionButtonDefault = (props) => (
   <div className="pb--doc-demo-row">
     <AvatarActionButton
-        {...props}
         imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
         name="Sophia Carden"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_background/docs/_background_dark.jsx

@@ -1,10 +1,11 @@
 import React from 'react'
 import { Background } from '../..'
 
-const BackgroundDark = () => (
+const BackgroundDark = (props) => (
   <Background
       backgroundColor="dark"
       padding="xl"
+      {...props}
   />
 )
 

data/app/pb_kits/playbook/pb_background/docs/_background_gradient.jsx

@@ -1,10 +1,11 @@
 import React from 'react'
 import { Background } from '../..'
 
-const BackgroundGradient = () => (
+const BackgroundGradient = (props) => (
   <Background
       backgroundColor="gradient"
       padding="xl"
+      {...props}
   />
 )
 

data/app/pb_kits/playbook/pb_background/docs/_background_image.jsx

@@ -2,11 +2,12 @@ import React from 'react'
 import { Background } from '../..'
 import { Card, Flex, FlexItem, Title } from '../..'
 
-const BackgroundImage = () => (
+const BackgroundImage = (props) => (
   <Background imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80">
     <Flex
         orientation="column"
         vertical="center"
+        {...props}
     >
       <FlexItem>
         <Title
@@ -14,10 +15,17 @@ const BackgroundImage = () => (
             padding="lg"
             size={1}
             text="Background Kit Image"
+            {...props}
         />
       </FlexItem>
-      <FlexItem padding="lg">
-        <Card shadow="deepest">
+      <FlexItem
+          padding="lg"
+          {...props}
+      >
+        <Card
+            shadow="deepest"
+            {...props}
+        >
           {'We cannot seek achievement for ourselves and forget about progress and prosperity for our community... Our ambitions must be broad enough to include the aspirations and needs of others, for their sakes and for our own. - Cesar Chavez'}
         </Card>
       </FlexItem>

data/app/pb_kits/playbook/pb_background/docs/_background_light.jsx

@@ -1,10 +1,11 @@
 import React from 'react'
 import { Background } from '../..'
 
-const BackgroundLight = () => (
+const BackgroundLight = (props) => (
   <Background
       backgroundColor="light"
       padding="xl"
+      {...props}
   />
 )
 

data/app/pb_kits/playbook/pb_background/docs/_background_white.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import { Background } from '../..'
 
-const BackgroundWhite = () => (
+const BackgroundWhite = (props) => (
   <div>
     <Background
         backgroundColor="white"
         padding="xl"
+        {...props}
     />
   </div>
 

data/app/pb_kits/playbook/pb_badge/docs/_badge_colors.jsx

@@ -6,151 +6,151 @@ const BadgeColors = (props) => {
     <div>
       <div>
         <Badge
-            {...props}
             rounded
             text="+1"
             variant="primary"
+            {...props}
         />
 
         &nbsp;
 
         <Badge
-            {...props}
             text="+4"
             variant="primary"
+            {...props}
         />
 
         &nbsp;
 
         <Badge
-            {...props}
             text="+1000"
             variant="primary"
+            {...props}
         />
       </div>
 
       <div>
         <Badge
-            {...props}
             rounded
             text="+1"
             variant="success"
+            {...props}
         />
 
         &nbsp;
 
         <Badge
-            {...props}
             text="+4"
             variant="success"
+            {...props}
         />
 
         &nbsp;
 
         <Badge
-            {...props}
             text="+1000"
             variant="success"
+            {...props}
         />
       </div>
 
       <div>
         <Badge
-            {...props}
             rounded
             text="+1"
             variant="warning"
+            {...props}
         />
 
         &nbsp;
 
         <Badge
-            {...props}
             text="+4"
             variant="warning"
+            {...props}
         />
 
         &nbsp;
 
         <Badge
-            {...props}
             text="+1000"
             variant="warning"
+            {...props}
         />
       </div>
 
       <div>
         <Badge
-            {...props}
             rounded
             text="+1"
             variant="error"
+            {...props}
         />
 
         &nbsp;
 
         <Badge
-            {...props}
             text="+4"
             variant="error"
+            {...props}
         />
 
         &nbsp;
 
         <Badge
-            {...props}
             text="+1000"
             variant="error"
+            {...props}
         />
       </div>
 
       <div>
         <Badge
-            {...props}
             rounded
             text="+1"
             variant="info"
+            {...props}
         />
 
         &nbsp;
 
         <Badge
-            {...props}
             text="+4"
             variant="info"
+            {...props}
         />
 
         &nbsp;
 
         <Badge
-            {...props}
             text="+1000"
             variant="info"
+            {...props}
         />
       </div>
 
       <div>
         <Badge
-            {...props}
             rounded
             text="+1"
             variant="neutral"
+            {...props}
         />
 
         &nbsp;
 
         <Badge
-            {...props}
             text="+4"
             variant="neutral"
+            {...props}
         />
 
         &nbsp;
 
         <Badge
-            {...props}
             text="+1000"
             variant="neutral"
+            {...props}
         />
       </div>
     </div>