playbook_ui 7.0.0 → 7.0.1.pre.alpha1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bb42b349eaada511eb34ad28e5941b0de5f2e491b979450744340b94dcce6d14
-  data.tar.gz: 74810184318871129e9ece088f516143a74db76a0f69f9d5a327d1c872f43fc1
+  metadata.gz: 7b4dce5edb2e04ee4933fa937457a2b942afb7d96ba6241db9326ac567e02262
+  data.tar.gz: a742f3a03fdf9d7cc773cf3c39a3e8453a925f79f90a25649f4c1b63a942aaab
 SHA512:
-  metadata.gz: 3843d81864f1d56428a211a5f8c9baedc06aee0bb7674a9c513b1297deb36786e76714acad0996a07748b6dc34e3a846473373a57cc853f1cd3d52fba34c6644
-  data.tar.gz: '03822a87e908c2cd21c6911592a26120ace405f613edef75780060bde453ba911f678d33a90063bc0d01f5c06b6f5ef0c9a661d1b1502da18ba767019b343aae'
+  metadata.gz: fd8d5c695dace05fd3967e9664943b318a160d7edbd327cdd54ce2de9540740fccc98dc14a794285f66152a6422d1311cc1defe06b8436aa66bb2b3d1f184a45
+  data.tar.gz: 6fbcb798e3208c4f53630766d061c1040176717a99d2eaf860b2a9754ecf0584777fc541ae0b1248c856d2417c70004ad237ee01e6940d49e74a64a6daa0e6d3

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)
 
@@ -34,9 +35,10 @@ To run the tests, do `bin/test`. To launch a shell in the container run `make sh
 
 See [docs/upgrade-guide](./docs/upgrade-guide)
 
-### Releases
+### Nitro & Releases
 
-* [Playbook Releases](https://github.com/powerhome/playbook/wiki/Playbook-Releases)
+* [Integrating Playbook Kits into Nitro Components](https://github.com/powerhome/playbook/wiki/Integrating-Playbook-Kits-into-Nitro-Components)
+* [Creating Releases](https://github.com/powerhome/playbook/wiki/Releasing-a-New-Version)
 
 ### Development Environment
 
@@ -61,4 +63,4 @@ See [docs/upgrade-guide](./docs/upgrade-guide)
 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.
+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,12 +2,12 @@
 
 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
-
-  
 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,109 @@
+# 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
+      cookies[:dark_mode] = {
+        value: "true",
+        path: "/",
+      }
+      @dark_mode = true
+      redirect_back(fallback_location: root_path)
+    end
+
+    def disable_dark_mode
+      cookies[:dark_mode] = {
+        value: "false",
+        path: "/",
+      }
+      @dark_mode = false
+      redirect_back(fallback_location: root_path)
+    end
+
+
+    def home; end
+
+    def utilities; end
+
+    def tokens; end
+
+    def kits
+      @dark = dark_mode
+      params[:type] ||= "react"
+      @type = params[:type]
+    end
+
+    def principles; end
+
+    def grid
+      render layout: "layouts/playbook/grid"
+    end
+
+    def kit_show_rails
+      @dark = cookies[:dark_mode]
+      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 dark_mode
+      if @dark_mode == "true"
+        true
+      else
+        false
+      end
+    end
+
+    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,24 +13,5 @@ module Playbook
     def current_webpacker_instance
       Playbook.webpacker
     end
-
-    def dark_mode
-      if cookies[:dark_mode] == "true"
-        true
-      else
-        false
-      end
-    end
-
-    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
-    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 = cookies[:dark_mode]
       @type = type
       @kit_examples = get_kit_examples(kit, type)
       @show_code = show_code

data/app/helpers/playbook/pb_kit_helper.rb

@@ -10,32 +10,34 @@ module Playbook
     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, dark_mode_props(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: {})
+    def pb_react(kit, props:{dark: dark_mode}, options: {})
       ::Webpacker::React::Component.new(kit.camelize).render(props, options)
     end
 
   private
-    def rails_props(props)
-      if @playbook.nil?
-        props
+    def dark_mode
+      if cookies[:dark_mode] == "true"
+        true
       else
-        dark_mode_props(props)
+        false
       end
-    end  
+    end
 
-    def react_props
-      if @playbook.nil?
-        false
+    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
-        dark_mode
+        props
       end
-    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';
@@ -16,7 +15,6 @@
 @import 'pb_currency/currency';
 @import 'pb_dashboard_value/dashboard_value';
 @import 'pb_date/date';
-@import 'pb_date_picker/date_picker';
 @import 'pb_date_range_inline/date_range_inline';
 @import 'pb_date_range_stacked/date_range_stacked';
 @import 'pb_date_stacked/date_stacked';

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 <%= cookies[:dark_mode] == "true" ? "dark" : "" %>">
+    <div class="markdown pb--kit-example-markdown <%=cookies[:dark_mode] == "true" ? "dark" : "" %>">
       <%= markdown(get_per_sample_descriptions(@kit_examples[:kit], key)) %>
     </div>
     <div class="pb--codeControls">

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

@@ -25,7 +25,6 @@ kits:
   - fixed_confirmation_toast
   - flex
   - forms:
-    - date_picker
     - file_upload
     - form
     - form_pill

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'
@@ -13,13 +9,11 @@ export ButtonToolbar from './pb_button_toolbar/_button_toolbar.jsx'
 export Caption from './pb_caption/_caption.jsx'
 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 Contact from './pb_contact/_contact.jsx'
 export Currency from './pb_currency/_currency.jsx'
 export DashboardValue from './pb_dashboard_value/_dashboard_value.jsx'
 export Date from './pb_date/_date.jsx'
-export DatePicker from './pb_date_picker/_date_picker.jsx'
 export DateRangeInline from './pb_date_range_inline/_date_range_inline.jsx'
 export DateRangeStacked from './pb_date_range_stacked/_date_range_stacked.jsx'
 export DateStacked from './pb_date_stacked/_date_stacked.jsx'
@@ -85,7 +79,6 @@ export Title from './pb_title/_title.jsx'
 export TitleCount from './pb_title_count/_title_count.jsx'
 export TitleDetail from './pb_title_detail/_title_detail.jsx'
 export Toggle from './pb_toggle/_toggle.jsx'
-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'
@@ -98,7 +91,6 @@ export dashboardValueSettings from './pb_dashboard_value/dashboardValueSettings'
 
 // Other JS/Plugins
 export pbChart from './plugins/pb_chart.js'
-export datePickerHelper from './pb_date_picker/date_picker_helper.js'
 export PbTypeahead from './pb_typeahead'
 export PbPopover from './pb_popover'
 export PbTable from './pb_table'

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,
+})
+