playbook_ui 7.3.0.pre.alpha2 → 7.3.0.pre.alpha3

data/app/pb_kits/playbook/pb_typeahead/_typeahead.html.erb

@@ -1,25 +1,29 @@
-<%= content_tag(:div,
+<% if object.pills %>
+  <%= react_component('Typeahead', object.typeahead_with_pills_options) %>
+<% else %>
+  <%= content_tag(:div,
                 id: object.id,
                 data: object.data,
                 class: object.classname) do %>
-  <div class="pb_typeahead_wrapper">
-    <div class="pb_typeahead_loading_indicator" data-pb-typeahead-kit-loading-indicator>
-      <i class="far fa-spinner fa-spin"></i>
+    <div class="pb_typeahead_wrapper">
+      <div class="pb_typeahead_loading_indicator" data-pb-typeahead-kit-loading-indicator>
+        <i class="far fa-spinner fa-spin"></i>
+      </div>
+      <%= pb_rails("text_input", props: {
+        type: "search",
+        label: object.label,
+        name: object.name,
+        value: object.value,
+        placeholder: object.placeholder
+      }) %>
+      <%= pb_rails("list", props: { ordered: false, borderless: false, xpadding: true, role: "status", aria: { live: "polite" }, data: { pb_typeahead_kit_results: true } }) do %>
+      <% end %>
     </div>
-    <%= pb_rails("text_input", props: {
-      type: "search",
-      label: object.label,
-      name: object.name,
-      value: object.value,
-      placeholder: object.placeholder
-    }) %>
-    <%= pb_rails("list", props: { ordered: false, borderless: false, xpadding: true, role: "status", aria: { live: "polite" }, data: { pb_typeahead_kit_results: true } }) do %>
-    <% end %>
-  </div>
 
-  <template data-pb-typeahead-kit-result-option>
-    <%= pb_rails("list/item") do %>
-      <button type="button" data-result-option-item><%= tag(:slot, name: :content) %></button>
-    <% end %>
-  </template>
-<% end %>
+    <template data-pb-typeahead-kit-result-option>
+      <%= pb_rails("list/item") do %>
+        <button type="button" data-result-option-item><%= tag(:slot, name: :content) %></button>
+      <% end %>
+    </template>
+  <% end %>
+<% end %>

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

@@ -3,6 +3,7 @@
 import React from 'react'
 import Select from 'react-select'
 import AsyncSelect from 'react-select/async'
+import { get } from 'lodash'
 
 import Control from './components/Control'
 import IndicatorsContainer from './components/IndicatorsContainer'
@@ -12,6 +13,8 @@ import Option from './components/Option'
 import Placeholder from './components/Placeholder'
 import ValueContainer from './components/ValueContainer'
 
+import { noop } from '../utilities/props'
+
 /**
  * @typedef {object} Props
  * @prop {boolean} async - whether Typeahead should fetch data from
@@ -22,6 +25,8 @@ import ValueContainer from './components/ValueContainer'
 type Props = {
   async?: boolean,
   label?: string,
+  loadOptions?: noop | string,
+  name?: string,
 }
 
 /**
@@ -45,14 +50,27 @@ const Typeahead = (props: Props) => {
     },
     isClearable: true,
     isSearchable: true,
+    name,
     ...props,
   }
 
+  if (typeof(props.loadOptions) === 'string') selectProps.loadOptions = get(window, props.loadOptions)
+
   const Tag = props.async ? AsyncSelect : Select
 
+  const handleOnChange = (data, { action }) => {
+    if (action === 'clear') {
+      const multiValueClearEvent = new CustomEvent('pb-typeahead-kit-result-clear')
+      document.dispatchEvent(multiValueClearEvent)
+    }
+  }
+
   return (
     <div className="pb_typeahead_kit react-select">
-      <Tag {...selectProps} />
+      <Tag
+          onChange={handleOnChange}
+          {...selectProps}
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx

@@ -19,11 +19,18 @@ const MultiValue = (props: Props) => {
     selectProps,
   } = props
 
+  const { imageUrl, label } = data
+
+  const handleOnMultiValueRemove = () => {
+    const multiValueRemoveEvent = new CustomEvent('pb-typeahead-kit-result-option-remove', { detail: data })
+    document.dispatchEvent(multiValueRemoveEvent)
+  }
+
   const handleOnClick = () => {
     if (selectProps.onMultiValueClick) selectProps.onMultiValueClick(data)
+    handleOnMultiValueRemove()
     removeProps.onClick()
   }
-  const { imageUrl, label } = data
 
   return (
     <components.MultiValueContainer

data/app/pb_kits/playbook/pb_typeahead/components/Option.jsx

@@ -12,21 +12,29 @@ const Option = (props: any) => {
     imageUrl,
     label,
   } = props.data
+
+  const handleOptionClicked = () => {
+    const resultSelectedEvent = new CustomEvent('pb-typeahead-kit-result-option-select', { detail: props.data })
+    document.dispatchEvent(resultSelectedEvent)
+  }
+
   return (
     <components.Option {...props}>
-      <Choose>
-        <When condition={imageUrl}>
-          <User
-              align="left"
-              avatarUrl={imageUrl}
-              name={label}
-              orientation="horizontal"
-          />
-        </When>
-        <When condition={!imageUrl}>
-          {label}
-        </When>
-      </Choose>
+      <div onClick={handleOptionClicked}>
+        <Choose>
+          <When condition={imageUrl}>
+            <User
+                align="left"
+                avatarUrl={imageUrl}
+                name={label}
+                orientation="horizontal"
+            />
+          </When>
+          <When condition={!imageUrl}>
+            {label}
+          </When>
+        </Choose>
+      </div>
     </components.Option>
   )
 }

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb

@@ -19,13 +19,14 @@
     name: tag(:slot, name: "name"),
     orientation: "horizontal",
     align: "left",
-    avatar_url: "placeholder"
+    avatar_url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=",
+    avatar: true
     }) %>
 </template>
 
 <%= javascript_tag defer: "defer" do %>
   document.addEventListener("pb-typeahead-kit-search", function(event) {
-    if (!event.target.dataset.typeaheadExample) return;
+    if (!event.target.dataset || !event.target.dataset.typeaheadExample) return;
 
     fetch(`https://api.github.com/search/users?q=${encodeURIComponent(event.detail.searchingFor)}`)
       .then(response => response.json())
@@ -35,7 +36,7 @@
         event.detail.setResults((result.items || []).map((user) => {
           const wrapper = resultOptionTemplate.content.cloneNode(true)
           wrapper.querySelector('slot[name="name"]').replaceWith(user.login)
-          wrapper.querySelector('img').setAttribute("src", user.avatar_url)
+          wrapper.querySelector('img').dataset.src = user.avatar_url
           return wrapper
         }))
       })

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context_dark.html.erb

@@ -18,7 +18,7 @@
 
 <%= javascript_tag defer: "defer" do %>
   document.addEventListener("pb-typeahead-kit-search", function(event) {
-    if (!event.target.dataset.typeaheadExample2) return;
+    if (!event.target.dataset || !event.target.dataset.typeaheadExample2) return;
 
     const fuzzyMatch = function(string, term) {
       const ratio = 0.5;

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb

@@ -0,0 +1,25 @@
+<%
+  options = [
+    { label: 'Windows', value: '#FFA500' },
+    { label: 'Siding', value: '#FF0000' },
+    { label: 'Doors', value: '#00FF00' },
+    { label: 'Roofs', value: '#0000FF' },
+  ]
+%>
+
+<%= pb_rails("typeahead", props: { options: options, label: "Colors", name: :foo, pills: true }) %>
+
+<!-- This section is an example of the available JavaScript event hooks -->
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("pb-typeahead-kit-result-option-select", function(event) {
+    console.log('Option selected')
+    console.dir(event.detail)
+  })
+  document.addEventListener("pb-typeahead-kit-result-option-remove", function(event) {
+    console.log('Option removed')
+    console.dir(event.detail)
+  })
+  document.addEventListener("pb-typeahead-kit-result-clear", function() {
+    console.log('All options cleared')
+  })
+<% end %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx

@@ -10,12 +10,9 @@ const options = [
   { label: 'Roofs', value: '#0000FF' },
 ]
 
-import TypeaheadWithPillsSummary from './_typeahead_with_pills_summary'
-
 const TypeaheadWithPills = () => {
   return (
     <>
-      <TypeaheadWithPillsSummary />
       <Typeahead
           isMulti
           label="Colors"

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md

@@ -0,0 +1,8 @@
+Typeahead kit is data-driven. The minimum default fields are `label` and `value`.
+
+`{ label: "Foo", value: "bar" }`
+
+#### Rails: Subscribing to JS Events
+`pb-typeahead-kit-result-option-select` event to perform custom work when an option is clicked.
+`pb-typeahead-kit-result-option-remove` event to perform custom work when a pill is clicked.
+`pb-typeahead-kit-result-option-clear` event to perform custom work when all pills are removed upon clicking the X.

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb

@@ -0,0 +1,30 @@
+<%= pb_rails("typeahead", props: { async: true, load_options: 'asyncPillsPromiseOptions', label: "Github Users", name: :foo, pills: true, placeholder: "type the name of a Github user" }) %>
+
+<!-- This section is an example of how to provide load_options prop for using dynamic options -->
+<%= javascript_tag defer: "defer" do %>
+  // Simple filter function, providing a list of results in the expected data format
+
+  const filterResults = function(results) {
+    return results.items.map(function(result) {
+      return {
+        label: result.login,
+        value: result.id,
+      }
+    })
+  }
+
+  /* Note: Make sure you assign this to window or a namespace within window
+  or it will not be accessible to the kit! */
+
+  window.asyncPillsPromiseOptions = function(inputValue) {
+    return new Promise(function(resolve) {
+      if (inputValue) {
+        fetch(`https://api.github.com/search/users?q=${inputValue}`)
+          .then(function(response) { return response.json() })
+          .then(function(results) { resolve(filterResults(results))})
+      } else {
+        resolve([])
+      }
+    })
+  }
+<% end %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.md

@@ -0,0 +1,11 @@
+#### Rails: Providing the `load_options` Promise
+
+**Additional required props: ** `async: true`, `pills: true`
+
+The prop `load_options`, when used in conjunction with `async: true` and `pills: true`, points to a JavaScript function located within the global window namespace. This function should return a `Promise` which resolves with the list of formatted options as described in prior examples above. This function is identical to the function provided to the React version of this kit. See the code example for more details.
+
+#### React: `loadOptions`
+
+**Additional required props: ** `async: true`
+
+[As outlined in the react-select Async docs](https://react-select.com/async), `loadOptions` expects to return a Promise that resolves resolves with the list of formatted options as described in prior examples above. See the code example for more details.

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.html.erb

@@ -0,0 +1,25 @@
+<%= pb_rails("typeahead", props: { async: true, load_options: 'asyncPillsPromiseOptionsUsers', label: "Github Users", name: :foo, pills: true, placeholder: "type the name of a Github user" }) %>
+
+<%= javascript_tag defer: "defer" do %>
+  const filterUserResults = function(results) {
+    return results.items.map(function(result) {
+      return {
+        imageUrl: result.avatar_url,
+        label: result.login,
+        value: result.id,
+      }
+    })
+  }
+
+  window.asyncPillsPromiseOptionsUsers = function(inputValue) {
+    return new Promise(function(resolve) {
+      if (inputValue) {
+        fetch(`https://api.github.com/search/users?q=${inputValue}`)
+          .then(function(response) { return response.json() })
+          .then(function(results) { resolve(filterUserResults(results))})
+      } else {
+        resolve([])
+      }
+    })
+  }
+<% end %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx

@@ -8,8 +8,6 @@ import {
   User,
 } from '../..'
 
-import TypeaheadWithPillsAsyncSummary from './_typeahead_with_pills_async_summary'
-
 /**
  *
  * @const filterResults
@@ -65,7 +63,6 @@ const TypeaheadWithPillsAsyncUsers = () => {
 
   return (
     <>
-      <TypeaheadWithPillsAsyncSummary />
       <If condition={users && users.length > 0}>
         <Caption
             marginBottom="xs"

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.md

@@ -0,0 +1 @@
+If the data field `imageUrl` is present, FormPill will receive that field as a prop and display the image.

data/app/pb_kits/playbook/pb_typeahead/docs/example.yml

@@ -2,6 +2,9 @@ examples:
   rails:
     - typeahead_default: Default
     - typeahead_with_context_dark: With Context
+    - typeahead_with_pills: With Pills
+    - typeahead_with_pills_async: With Pills (Async Data)
+    - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
 
   react:
     - typeahead_default: Default

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -5,12 +5,19 @@ module Playbook
     class Typeahead
       include Playbook::Props
 
+      prop :async, type: Playbook::Props::Boolean,
+                    default: false
       prop :label
+      prop :load_options
       prop :name
-      prop :value
+      prop :options, type: Playbook::Props::HashArray, default: []
+      prop :pills, type: Playbook::Props::Boolean,
+                    default: false
+
       prop :placeholder
       prop :search_term_minimum_length, default: 3
       prop :search_debounce_timeout, default: 250
+      prop :value
 
       partial "pb_typeahead/typeahead"
 
@@ -25,6 +32,22 @@ module Playbook
           pb_typeahead_kit_search_debounce_timeout: search_debounce_timeout
         )
       end
+
+      def typeahead_with_pills_options
+        base_options = {
+          isMulti: true,
+          label: label,
+          options: options,
+          placeholder: placeholder
+        }
+
+        base_options.merge!({
+          async: true,
+          loadOptions: load_options,
+        }) if async
+
+        base_options
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_user_badge/_user_badge.jsx

@@ -26,8 +26,11 @@ const UserBadge = (props: UserBadgeProps) => {
   const image = require(`./badges/_${badge}.svg`)
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_user_badge_kit', size), globalProps(props),
-    className)
+  const classes = classnames(
+    buildCss('pb_user_badge_kit', size),
+    globalProps(props),
+    className
+  )
 
   return (
     <div

data/app/pb_kits/playbook/props.rb

@@ -124,7 +124,7 @@ module Playbook
 
       def prop(name, type: Playbook::Props::String, **options)
         @props ||= {}
-        @props[name] = type.new(**options)
+        @props[name] = type.new(options.merge(name: name, kit: self))
 
         define_method(name) { prop(name) }
       end

data/app/pb_kits/playbook/props/base.rb

@@ -5,11 +5,13 @@ module Playbook
     class Error < StandardError; end
 
     class Base
-      attr_reader :default, :required
+      attr_reader :default, :required, :name, :kit
 
-      def initialize(default: nil, required: false)
+      def initialize(default: nil, required: false, name:, kit:)
         @default = default
         @required = required
+        @name = name
+        @kit = kit
       end
 
       def value(value)
@@ -17,10 +19,10 @@ module Playbook
       end
 
       def validate!(input_value)
-        raise(Playbook::Props::Error, "#{inspect} is a required prop and needs to be provided a value") if required && input_value.nil?
+        raise(Playbook::Props::Error, "#{kit} prop '#{name}' of type #{inspect.class} is required and needs a value") if required && input_value.nil?
 
         validate(value(input_value)) ||
-          raise(Playbook::Props::Error, "Invalid value (#{input_value.inspect}) for prop (#{inspect})")
+          raise(Playbook::Props::Error, "#{kit} has invalid value of '#{input_value.inspect}' for prop '#{name}' of type #{inspect.class}")
       end
 
       def validate(_value)