playbook_ui 5.2.0.pre.alpha15 → 5.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 274092c750becaf4daffb7d40f39b9e6bc1e6fcab52d5292b97135fa42f5442c
-  data.tar.gz: 2ab394c9c1a67c6ece74e66f350b49a6a09e7fa4eef8ea89b0fd0b85529ba558
+  metadata.gz: bb8840e61c52b773111c22632a90f9543ff610609017855691c9cd4e1999315e
+  data.tar.gz: 4abd95023a74be43d334f19bcd57160edbd76f51a3be26733e0e22463413109c
 SHA512:
-  metadata.gz: 89c1011123df84fff6eed520e28df406440306ffdc386140d688111e8b68fe56f11c5d0ee742bc6d83013c0b0177c7cd9fd662657484e20627fed380105536c6
-  data.tar.gz: 6aa91b74538221795eb6a9606c95dd8bde9b11f61e29c4d105e37ad7f40dcaec1607b559f327dac36dd25f0a043e0aa2bd5482fab988788639f5c11f475dcd16
+  metadata.gz: d2c02a383c9fa07b0892c1ead36815a66cfcf699d5deecee13d109e664affc7e173ddda17b6301f1160cc1cc59c8a01854129f30d14dd12edc16d0c60f032861
+  data.tar.gz: ce596c4e96e0665b56f4c9a4622ca004600c3c613c87329ed0321ebf315fd16fffd1b6220b74bff7fdb23df9f129e4cf65602af1e7880cf70c06080c678cbd61

data/README.md

@@ -52,3 +52,15 @@ See [docs/upgrade-guide](./docs/upgrade-guide)
 * [Using a Kit within a Kit](https://github.com/powerhome/playbook/wiki/Using-a-Kit-within-a-Kit)
 * [Understanding Rails Kit HTML Wrapper](https://github.com/powerhome/playbook/wiki/Understanding-Rails-Kit-HTML-Wrapper)
 * [Kit Stylesheet](https://github.com/powerhome/playbook/wiki/Kit-Stylesheet)
+
+### Testing Playbook Kits Locally
+
+#### Testing React Kits locally
+1.  Inside of your Playbook repository, run `yarn link`. 
+2.  Inside of the directory you want to test with playbook, run `yarn link playbook-ui`.
+3.  Run `yarn hmr` in your directory you want to test with playbook, and hard refresh (command + shift + R) your browser.
+4.  Test all the things!
+5.  When finished, inside of the directory you want to test with playbook, run `yarn unlink playbook-ui`.
+6.  Inside of your Playbook repository, run `yarn unlink`. 
+
+Keep in mind: Styles are brought in from playbook through the rails gem, so you will not be able to test scss updates with yarn linking.

data/app/controllers/playbook/application_controller.rb

@@ -2,6 +2,8 @@
 
 module Playbook
   class ApplicationController < ActionController::Base
+    protect_from_forgery with: :exception
+
     helper Webpacker::Helper
     helper Playbook::PbKitHelper
     helper Playbook::PbDocHelper

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,79 @@
+# 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 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 template: "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/pb_kit_helper.rb

@@ -15,7 +15,6 @@ module Playbook
       self.prefix_partial_path_with_controller_namespace = previous
     end
 
-    # deprecated
     def pb_react(kit, props: {}, options: {})
       ::Webpacker::React::Component.new(kit.camelize).render(props, options)
     end

data/app/pb_kits/playbook/_playbook.scss

@@ -1,4 +1,3 @@
-@import "tokens/fonts";
 @import "pb_body/body";
 @import "pb_button/button";
 @import "pb_caption/caption";

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

@@ -91,3 +91,4 @@ kits:
     - title_detail
     - weekday_stacked
   - user
+  - user_badge

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,174 @@
+// ===========================================
+// 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 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 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 Installer from 'pb_installer/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 Logistic from 'pb_logistic/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,
+  ...Caption,
+  ...Card,
+  ...Checkbox,
+  ...CircleIconButton,
+  ...Contact,
+  ...Currency,
+  ...DashboardValue,
+  ...Date,
+  ...DateRangeInline,
+  ...DateRangeStacked,
+  ...DateStacked,
+  ...DateTimeStacked,
+  ...DateYearStacked,
+  ...DistributionBar,
+  ...FileUpload,
+  ...Filter,
+  ...FixedConfirmationToast,
+  ...Flex,
+  ...FormPill,
+  ...Hashtag,
+  ...Highlight,
+  ...HomeAddressStreet,
+  ...Icon,
+  ...IconCircle,
+  ...IconValue,
+  ...Image,
+  ...Installer,
+  ...LabelPill,
+  ...LabelValue,
+  ...Layout,
+  ...Legend,
+  ...LineGraph,
+  ...List,
+  ...LoadingInline,
+  ...Logistic,
+  ...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,
+})

data/app/pb_kits/playbook/packs/main.scss

@@ -0,0 +1,12 @@
+// SCAFFOLD
+@import "site_styles/scaffold";
+
+// KITS
+@import "../playbook";
+
+// APP STYLES
+@import "site_styles/site-style";
+@import "site_styles/docs/all";
+
+// FULL PAGE EXAMPLE STYLES
+@import "site_styles/samples";

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

@@ -0,0 +1,19 @@
+// ===========================================
+// Generated file from kit generator.
+//
+// ===========================================
+
+import WebpackerReact from 'webpacker-react'
+
+//
+// ===========================================
+// ===========================================
+// Generated file from kit generator.
+
+import Dashboards from '../../../views/playbook/samples/dashboards/index.jsx'
+import FilterTable from '../../../views/playbook/samples/filter_table/index.jsx'
+import Registration from '../../../views/playbook/samples/registration/index.jsx'
+
+WebpackerReact.setup({ Dashboards })
+WebpackerReact.setup({ FilterTable })
+WebpackerReact.setup({ Registration })