playbook_ui 9.16.0 → 9.17.0.pre.decouple.website2

data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx

@@ -4,7 +4,7 @@ import React from 'react'
 import Select from 'react-select'
 import AsyncSelect from 'react-select/async'
 import CreateableSelect from 'react-select/creatable'
-import { get } from 'lodash'
+import { get, isString, uniqueId } from 'lodash'
 import { globalProps } from '../utilities/globalProps.js'
 import classnames from 'classnames'
 
@@ -26,23 +26,24 @@ import { noop } from '../utilities/props'
  * @prop {string} label - the text for the optional typeahead input label
  */
 
-type Props = {
+type TypeaheadProps = {
+  id?: string,
   async?: boolean,
   createable?: boolean,
   dark?: boolean,
   label?: string,
-  loadOptions?: noop | string,
-  getOptionLabel?: () => any,
-  getOptionValue?: () => any,
+  loadOptions?: string,
+  getOptionLabel?: string | (() => any),
+  getOptionValue?: string | (() => any),
   name?: string,
 }
 
 /**
  * @constant {React.ReactComponent} Typeahead
- * @param {Props} props - props as described at https://react-select.com/props
+ * @param {TypeaheadProps} props - props as described at https://react-select.com/props
  */
 
-const Typeahead = (props: Props) => {
+const Typeahead = ({ loadOptions = noop, getOptionLabel, id, getOptionValue, createable, async, ...props }: TypeaheadProps) => {
   const selectProps = {
     cacheOptions: true,
     components: {
@@ -56,8 +57,11 @@ const Typeahead = (props: Props) => {
       Placeholder,
       ValueContainer,
     },
+    loadOptions: isString(loadOptions) ? get(window, loadOptions) : loadOptions,
+    getOptionLabel: isString(getOptionLabel) ? get(window, getOptionLabel) : getOptionLabel,
+    getOptionValue: isString(getOptionValue) ? get(window, getOptionValue) : getOptionValue,
     defaultOptions: true,
-    id: 'react-select-input',
+    id: id || uniqueId(),
     inline: false,
     isClearable: true,
     isSearchable: true,
@@ -68,14 +72,9 @@ const Typeahead = (props: Props) => {
     ...props,
   }
 
-  if (typeof(props.loadOptions) === 'string') selectProps.loadOptions = get(window, props.loadOptions)
-  if (typeof(props.getOptionLabel) === 'string') selectProps.getOptionLabel = get(window, props.getOptionLabel)
-  if (typeof(props.getOptionValue) === 'string') selectProps.getOptionValue = get(window, props.getOptionValue)
+  const Tag = createable ? CreateableSelect : (async ? AsyncSelect : Select)
 
-  let Tag = props.async ? AsyncSelect : Select
-  if (props.createable) Tag = CreateableSelect
-
-  const handleOnChange = (data, { action, option, removedValue }) => {
+  const handleOnChange = (_data, { action, option, removedValue }) => {
     if (action === 'select-option') {
       if (selectProps.onMultiValueClick) selectProps.onMultiValueClick(option)
       const multiValueClearEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-option-select`, { detail: option })

data/app/pb_kits/playbook/playbook-doc.js

@@ -0,0 +1,195 @@
+// !!! IMPORTANT: This file is autogenerated. Please do not edit.!!!
+import WebpackerReact from 'webpacker-react'
+import ujs from 'webpacker-react/ujs'
+
+// 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 Background from 'pb_background/docs'
+import * as Badge from 'pb_badge/docs'
+import * as BarGraphDocs from 'pb_bar_graph/docs'
+import * as Body from 'pb_body/docs'
+import * as BreadCrumbs from 'pb_bread_crumbs/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 DateTime from 'pb_date_time/docs'
+import * as DateTimeStacked from 'pb_date_time_stacked/docs'
+import * as DateYearStacked from 'pb_date_year_stacked/docs'
+import * as Dialog from 'pb_dialog/docs'
+import * as DistributionBarDocs 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 FormGroup from 'pb_form_group/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 IconStatValue from 'pb_icon_stat_value/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 LegendDocs from 'pb_legend/docs'
+import * as LineGraphDocs 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 Passphrase from 'pb_passphrase/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 RichTextEditor from 'pb_rich_text_editor/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 SelectableList from 'pb_selectable_list/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 TextInput from 'pb_text_input/docs'
+import * as Textarea from 'pb_textarea/docs'
+import * as Time from 'pb_time/docs'
+import * as TimeRangeInline from 'pb_time_range_inline/docs'
+import * as TimeStacked from 'pb_time_stacked/docs'
+import * as Timeline from 'pb_timeline/docs'
+import * as Timestamp from 'pb_timestamp/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 Typeahead from 'pb_typeahead/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.registerComponents({
+  ...Avatar,
+  ...AvatarActionButton,
+  ...Background,
+  ...Badge,
+  ...BarGraphDocs,
+  ...Body,
+  ...BreadCrumbs,
+  ...Button,
+  ...ButtonToolbar,
+  ...Caption,
+  ...Card,
+  ...Checkbox,
+  ...CircleChart,
+  ...CircleIconButton,
+  ...Collapsible,
+  ...Contact,
+  ...Currency,
+  ...DashboardValue,
+  ...Date,
+  ...DatePicker,
+  ...DateRangeInline,
+  ...DateRangeStacked,
+  ...DateStacked,
+  ...DateTime,
+  ...DateTimeStacked,
+  ...DateYearStacked,
+  ...Dialog,
+  ...DistributionBarDocs,
+  ...FileUpload,
+  ...Filter,
+  ...FixedConfirmationToast,
+  ...Flex,
+  ...FormGroup,
+  ...FormPill,
+  ...Gauge,
+  ...Hashtag,
+  ...Highlight,
+  ...HomeAddressStreet,
+  ...Icon,
+  ...IconCircle,
+  ...IconStatValue,
+  ...IconValue,
+  ...Image,
+  ...LabelPill,
+  ...LabelValue,
+  ...Layout,
+  ...LegendDocs,
+  ...LineGraphDocs,
+  ...List,
+  ...LoadingInline,
+  ...Message,
+  ...MultipleUsers,
+  ...MultipleUsersStacked,
+  ...Nav,
+  ...OnlineStatus,
+  ...Passphrase,
+  ...PbReactPopover,
+  ...Person,
+  ...PersonContact,
+  ...Pill,
+  ...ProgressPills,
+  ...ProgressSimple,
+  ...ProgressStep,
+  ...Radio,
+  ...RichTextEditor,
+  ...SectionSeparator,
+  ...Select,
+  ...SelectableCard,
+  ...SelectableCardIcon,
+  ...SelectableIcon,
+  ...SelectableList,
+  ...Source,
+  ...StarRating,
+  ...StatChange,
+  ...StatValue,
+  ...Table,
+  ...TextInput,
+  ...Textarea,
+  ...Time,
+  ...TimeRangeInline,
+  ...TimeStacked,
+  ...Timeline,
+  ...Timestamp,
+  ...Title,
+  ...TitleCount,
+  ...TitleDetail,
+  ...Toggle,
+  ...Typeahead,
+  ...User,
+  ...UserBadge,
+  ...WeekdayStacked,
+})
+ujs.setup(
+  () => WebpackerReact.mountComponents(),
+  () => WebpackerReact.unmountComponents()
+)

data/app/pb_kits/playbook/playbook-rails-react-bindings.js

@@ -0,0 +1,35 @@
+// React-Rendered Rails Kit Exports =====
+
+import WebpackerReact from 'webpacker-react'
+import ujs from 'webpacker-react/ujs'
+
+import BarGraph from './pb_bar_graph/_bar_graph'
+import Dialog from './pb_dialog/_dialog'
+import DialogBody from './pb_dialog/child_kits/_dialog_body'
+import DialogFooter from './pb_dialog/child_kits/_dialog_footer'
+import DialogHeader from './pb_dialog/child_kits/_dialog_header'
+import DistributionBar from './pb_distribution_bar/_distribution_bar'
+import Legend from './pb_legend/_legend'
+import LineGraph from './pb_line_graph/_line_graph'
+import Passphrase from './pb_passphrase/_passphrase'
+import RichTextEditor from './pb_rich_text_editor/_rich_text_editor'
+import Typeahead from './pb_typeahead/_typeahead'
+
+WebpackerReact.registerComponents({
+  BarGraph,
+  Dialog,
+  DialogBody,
+  DialogFooter,
+  DialogHeader,
+  DistributionBar,
+  Legend,
+  LineGraph,
+  Passphrase,
+  RichTextEditor,
+  Typeahead,
+})
+
+ujs.setup(
+  () => WebpackerReact.mountComponents(),
+  () => WebpackerReact.unmountComponents()
+)

data/app/pb_kits/playbook/{vendor.js → playbook-rails.js}

@@ -35,9 +35,5 @@ PbTextarea.start()
 
 import 'flatpickr'
 
-import 'trix'
-
 // React-Rendered Rails Kits =====
-import WebpackerReact from 'webpacker-react'
-import * as ReactRailsPBKits from './react_rails_kits.js'
-WebpackerReact.setup({ ...ReactRailsPBKits })
+import './playbook-rails-react-bindings'

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -243,6 +243,10 @@ $category_colors: (
 
 $transparent: transparent;
 
+@function tint($color, $percentage) {
+  @return mix($white, $color, $percentage);
+}
+
 @mixin gradient($start: $gradient_start, $end: $gradient_end) {
   background: $start;
   background: -moz-linear-gradient(-45deg,  $start 0%, $end 100%);

data/app/pb_kits/playbook/tokens/_titles.scss

@@ -0,0 +1,38 @@
+@import "./colors";
+@import "./typography";
+@import "./line_height";
+
+@mixin pb_title(
+    $fontSize: $heading_1,
+    $fontWeight: $lighter,
+    $lineHeight: $lh_tighter
+){
+  font-size: $fontSize;
+  letter-spacing: $lspace_tight;
+  font-weight: $fontWeight;
+  color: $text_lt_default;
+  margin: 0;
+  line-height: $lineHeight;
+  font-family: $font_family_base;
+}
+
+@mixin pb_title_1 {
+  @include pb_title($heading_1);
+  letter-spacing: -0.03em;
+}
+
+@mixin pb_title_2 {
+  @include pb_title($heading_2, $lighter, 0.96);
+}
+
+@mixin pb_title_3 {
+  @include pb_title($heading_3);
+}
+
+@mixin pb_title_4 {
+  @include pb_title($heading_4, $bolder);
+}
+
+@mixin pb_title_dark {
+  color: $text_dk_default;
+}

data/app/pb_kits/playbook/utilities/_colors.scss

@@ -1,7 +1,3 @@
-@function tint($color, $percentage) {
-  @return mix($white, $color, $percentage);
-}
-
 @function shade($color, $percentage) {
   @return mix($charcoal, $color, $percentage);
 }

data/lib/playbook.rb

@@ -1,13 +1,7 @@
 # frozen_string_literal: true
 
-require "sassc-rails"
-require "slim-rails"
-require "webpacker"
-require "webpacker/react"
-require "view_component/engine"
-
 require "playbook/version"
-
+require "playbook/engine"
 require "playbook/props"
 require "playbook/forms"
 require "playbook/pb_forms_helper"
@@ -16,7 +10,6 @@ require "playbook/pb_doc_helper"
 require "playbook/kit_base"
 require "playbook/kit_resolver"
 require "playbook/markdown"
-require "playbook/engine" if defined?(Rails)
 
 module Playbook
   ROOT_PATH = Pathname.new(File.join(__dir__, ".."))
@@ -26,13 +19,6 @@ module Playbook
 
 module_function
 
-  def webpacker
-    @webpacker ||= ::Webpacker::Instance.new(
-      root_path: ROOT_PATH,
-      config_path: ROOT_PATH.join("config/webpacker.yml")
-    )
-  end
-
   def kit_path(kit, *args)
     Playbook::Engine.root.join("app/pb_kits/playbook/pb_#{kit}", *args)
   end

data/lib/playbook/engine.rb

@@ -1,7 +1,8 @@
 # frozen_string_literal: true
 
-require "sassc-rails"
-require "slim-rails"
+require "action_view/railtie"
+require "view_component/engine"
+require "webpacker/react"
 
 module Playbook
   class Engine < ::Rails::Engine
@@ -13,26 +14,15 @@ module Playbook
 
     config.view_component.render_monkey_patch_enabled = false
 
-    config.assets.paths ||= []
-    config.assets.paths << Playbook::Engine.root.join("fonts")
-    config.assets.paths << Playbook::Engine.root.join("app/pb_kits/playbook/pb_*")
-
-    config.sass.load_paths ||= []
-    config.sass.load_paths << Playbook::Engine.root.join("app/pb_kits/playbook")
-
-    initializer "webpacker.proxy" do |app|
-      insert_middleware = begin
-                          Playbook.webpacker.config.dev_server.present?
-                          rescue
-                            nil
-                        end
-      next unless insert_middleware
+    if config.respond_to?(:assets)
+      config.assets.paths ||= []
+      config.assets.paths << Playbook::Engine.root.join("fonts")
+      config.assets.paths << Playbook::Engine.root.join("app/pb_kits/playbook/pb_*")
+    end
 
-      app.middleware.insert_before(
-        0, Webpacker::DevServerProxy,
-        ssl_verify_none: true,
-        webpacker: Playbook.webpacker
-      )
+    if config.respond_to?(:sass)
+      config.sass.load_paths ||= []
+      config.sass.load_paths << Playbook::Engine.root.join("app/pb_kits/playbook")
     end
   end
 end