playbook_ui 7.3.0.pre.alpha1 → 7.3.0.pre.alpha2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ca983cabd6299f4dfad9ce14371ab208cd0a4a07d33a96a982b1d8738fdab2fe
-  data.tar.gz: b595faf637896b674152d5d99447d68afb91167b73613a0968a4dc97bebef410
+  metadata.gz: fbd4e05cea97e416fd256f5ba4ab03c7fbcbc0caf47e2923fd254bfa5e586c07
+  data.tar.gz: 295bf7be92ef65f2f1239ce024e1ca8002bcb2962e6ea341a6cd65ed61f5ffd7
 SHA512:
-  metadata.gz: 44ec7a1bbb7d5caac83eaff177c2901369d5ca0988443256ead755384181fb4dd93821ebba314e49cd777f543fa7f151ec7677913eb3ed7554297c49418770ff
-  data.tar.gz: da094e6d8c732361affbed9a1bc563afd9ce2a4a42d95206af73482a2db773ce488d93fb97efcaf0d0bf888bb271745f0b2491bab370156de11b1e83d2ec2162
+  metadata.gz: '049e5d46a6ebcc307cc3e1c32f428c419cd097670a3a0c3c57689dfa2146cc51106f73c8200820a6b699f01c25696530dc0990f99bd801751dc09e5a1c0e836e'
+  data.tar.gz: c6b10cee16fa46af663a73c374c6eacc3ce7e86f0bb14d90030dd1a847b08f0287f656f3c6f1cb8a4f1a68f950c6cb27c4ca22d59d2e44eb00b072d54712458e

data/README.md

@@ -9,7 +9,8 @@ Playbook is the first design system built for both Rails & React interfaces. Ins
 
 ## Getting started
 
-1. Run `make it`
+1. Run `make install`
+1. Run `make start`
 1. Install overcommit hooks `bin/overcommit`
 1. open [http://localhost:8089](http://localhost:8089)
 

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,99 @@
+# 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]
+    before_action :set_playbook
+    
+    def set_playbook
+      @playbook = true
+    end  
+
+    def enable_dark_mode
+      cookies[:dark_mode] = {
+        value: "true"
+      }
+      redirect_back(fallback_location: root_path)
+    end
+
+    def disable_dark_mode
+       cookies[:dark_mode] = {
+        value: "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/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';
@@ -12,6 +11,7 @@
 @import 'pb_checkbox/checkbox';
 @import 'pb_circle_chart/circle_chart';
 @import 'pb_circle_icon_button/circle_icon_button';
+@import 'pb_collapsible/collapsible';
 @import 'pb_contact/contact';
 @import 'pb_currency/currency';
 @import 'pb_dashboard_value/dashboard_value';

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

@@ -13,6 +13,7 @@ kits:
     - circle_icon_button
   - card
   - checkbox
+  - collapsible
   - charts_and_graphs:
     - bar_graph
     - circle_chart
@@ -55,10 +56,9 @@ kits:
     - hashtag
     - pill
   - popover
-  - progress:
-    - progress_pills
-    - progress_simple
-    - progress_step
+  - progress_pills
+  - progress_simple
+  - progress_step
   - section_separator
   - source
   - star_rating

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'
@@ -15,6 +11,7 @@ export Card from './pb_card/_card.jsx'
 export Checkbox from './pb_checkbox/_checkbox.jsx'
 export CircleChart from './pb_circle_chart/_circle_chart.jsx'
 export CircleIconButton from './pb_circle_icon_button/_circle_icon_button.jsx'
+export Collapsible from 'pb_collapsible/_collapsible.jsx'
 export Contact from './pb_contact/_contact.jsx'
 export Currency from './pb_currency/_currency.jsx'
 export DashboardValue from './pb_dashboard_value/_dashboard_value.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,182 @@
+// ===========================================
+// 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 CircleChart from 'pb_circle_chart/docs'
+import * as CircleIconButton from 'pb_circle_icon_button/docs'
+import * as Collapsible from 'pb_collapsible/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 DatePicker from 'pb_date_picker/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 Typeahead from 'pb_typeahead/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,
+  ...CircleChart,
+  ...CircleIconButton,
+  ...Collapsible,
+  ...Contact,
+  ...Currency,
+  ...DashboardValue,
+  ...Date,
+  ...DatePicker,
+  ...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,
+  ...Typeahead,
+  ...Toggle,
+  ...User,
+  ...UserBadge,
+  ...WeekdayStacked,
+})