playbook_ui 12.20.0.pre.alpha.movemarkdown668 → 12.20.0.pre.alpha.title2665

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

@@ -0,0 +1,35 @@
+<%
+  labels = [
+    { label: 'Verve', value: '1956' },
+    { label: 'Stax', value: '1957' },
+    { label: 'Motown', value: '1959' },
+    { label: 'Kudu', value: '1971' },
+    { label: 'Stones Throw', value: '1996' },
+  ]
+%>
+<%
+  expressionists = [
+    { label: 'Kandinsky', value: 'Russia' },
+    { label: 'Klee', value: 'Switzerland' },
+    { label: 'Kokoschka', value: 'Austria' },
+    { label: 'Kirchner', value: 'Germany' },
+  ]
+%>
+
+<%= pb_rails("typeahead", props: {
+  default_options: [labels.first],
+  id: "typeahead-multi-kit-example1",
+  options: labels,
+  label: "Badges",
+  multi_kit: "badge",
+  pills: true
+}) %>
+
+<%= pb_rails("typeahead", props: {
+  default_options: [expressionists.first],
+  id: "typeahead-multi-kit-example2",
+  options: expressionists,
+  label: "Small Pills",
+  multi_kit: "smallPill",
+  pills: true,
+}) %>

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

@@ -0,0 +1,45 @@
+// @flow
+
+import React from 'react'
+
+import Typeahead from '../_typeahead'
+
+const labels = [
+  { label: 'Verve', value: '1956' },
+  { label: 'Stax', value: '1957' },
+  { label: 'Motown', value: '1959' },
+  { label: 'Kudu', value: '1971' },
+  { label: 'Stones Throw', value: '1996' },
+]
+
+const expressionists = [
+  { label: 'Kandinsky', value: 'Russia' },
+  { label: 'Klee', value: 'Switzerland' },
+  { label: 'Kokoschka', value: 'Austria' },
+  { label: 'Kirchner', value: 'Germany' },
+]
+
+const TypeaheadMultiKit = (props) => {
+  return (
+    <>
+      <Typeahead
+          defaultValue={[labels[0]]}
+          isMulti
+          label="Badges"
+          multiKit="badge"
+          options={labels}
+          {...props}
+      />
+      <Typeahead
+          defaultValue={[expressionists[0]]}
+          isMulti
+          label="Small Pills"
+          multiKit="smallPill"
+          options={expressionists}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default TypeaheadMultiKit

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

@@ -0,0 +1,59 @@
+<%= pb_rails("select", props: {
+  label: "Colors",
+  name: "foo",
+  data: { context_select: true },
+  options: [
+    { value: "red", value_text: "Red" },
+    { value: "orange", value_text: "Orange" },
+    { value: "yellow", value_text: "Yellow" },
+    { value: "green", value_text: "Green" },
+    { value: "blue", value_text: "Blue" },
+    { value: "purple", value_text: "Purple" },
+  ]
+  }) %>
+
+  <%= pb_rails("typeahead", props: {
+  label: "Crayola Crayons",
+  name: :foo,
+  data: {
+    typeahead_example2: true,
+    search_context_value_selector: "[data-context-select] select"
+    }
+  }) %>
+
+<br><br><br>
+
+<%= javascript_tag defer: "defer" do %>
+
+  document.addEventListener("pb-typeahead-kit-search", function(event) {
+    if (!event.target.dataset || !event.target.dataset.typeaheadExample2) return;
+
+    const fuzzyMatch = function(string, term) {
+      const ratio = 0.5;
+      string = string.toLowerCase();
+      const compare = term.toLowerCase();
+      let matches = 0;
+
+      if (string.indexOf(compare) > -1) return true;
+
+      for (let index = 0; index < compare.length; index++) {
+        if (string.indexOf(compare[index]) > -1) {
+          matches += 1
+        } else {
+          matches -=1;
+        }
+      }
+
+      return (matches / string.length >= ratio || term == "")
+    };
+
+    const colors = { red: ["Red", "Scarlet", "Chestnut", "Mahogany"],
+                     orange: ["Orange", "Apricot", "Peach", "Melon", "Burnt Sienna", "Macaroni and Cheese"],
+                     yellow: ["Yellow", "Gold", "Goldenrod", "Canary", "Laser Lemon"],
+                     green: ["Green", "Olive Green", "Granny Smith Apple", "Spring Green", "Sea Green"],
+                     blue: ["Blue", "Cerulean", "Bluetiful", "Sky Blue", "Cadet Blue", "Cornflower"],
+                     purple: ["Violet", "Indigo", "Wisteria", "Purple Mountain Majesty", "Lavender"] };
+
+    event.detail.setResults(colors[event.detail.searchingContext].filter((color) => fuzzyMatch(color, event.detail.searchingFor)).map((color) => document.createTextNode(color)));
+  })
+<% end %>

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

@@ -0,0 +1,98 @@
+/* eslint-disable react/no-danger */
+/* eslint-disable react/no-multi-comp */
+/* @flow */
+
+import React, { useState } from 'react'
+import { components, OptionProps } from 'react-select'
+
+import {
+  Avatar,
+  Body,
+  Flex,
+  FlexItem,
+  Title,
+  Typeahead,
+} from '../..'
+
+const USERS = [
+  {
+    name: "Wade Winningham",
+    title: "Nitro Principal Developer",
+    territory: "PHL",
+  },
+  {
+    name: "Jason Cypret",
+    title: "Vice President of User Experience",
+    territory: "PHL",
+  },
+  {
+    name: "Stephen Marshall",
+    title: "Senior User Experience Engineer",
+    territory: "PHL",
+  },
+  {
+    name: "Jasper Furniss",
+    title: "Senior User Experience Engineer",
+    territory: "PHL",
+  },
+];
+
+const TypeaheadWithHighlight = (props) => {
+  const [selectedUser, setSelectedUser] = useState()
+
+  const formatOptionLabel = ({name, territory, title}, {inputValue}) => {
+
+    const highlighted = (text: string) => {
+      if (!inputValue.length) return text
+      return text.replace(
+        new RegExp(inputValue, 'gi'),
+        highlighted => `<mark>${highlighted}</mark>`
+      )
+    }
+    return (
+      <Flex>
+        <FlexItem>
+          <Avatar
+              marginRight="sm"
+              name={name}
+              size="sm"
+          />
+        </FlexItem>
+        <FlexItem>
+          <Title size={4}><span dangerouslySetInnerHTML={{ __html: highlighted(name) }} /></Title>
+          <Body color="light">
+            <span dangerouslySetInnerHTML={{ __html: highlighted(title) }} />{" • "}
+            {territory}
+          </Body>
+        </FlexItem>
+      </Flex>
+    )
+  }
+
+  const customComponents = {
+    Option: (props: OptionProps) => (
+      <components.Option {...props}/>
+    ),
+    SingleValue: ({ data }: any) => (
+      <span>{data.name}</span>
+    )
+  }
+
+  return (
+    <React.Fragment>
+      <Typeahead
+          components={customComponents}
+          formatOptionLabel={formatOptionLabel}
+          getOptionLabel={(option) => option.name}
+          getOptionValue={({name, title}) => `${name} ${title}`}
+          label="Users"
+          onChange={(user) => setSelectedUser(user)}
+          options={USERS.filter((option) => option.name != selectedUser?.name)}
+          placeholder="type the name of a user"
+          {...props}
+      />
+    </React.Fragment>
+  )
+}
+
+export default TypeaheadWithHighlight

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

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

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

@@ -0,0 +1,27 @@
+/* @flow */
+
+import React from 'react'
+import { Typeahead } from '../..'
+
+const options = [
+  { label: 'Windows', value: '#FFA500' },
+  { label: 'Siding', value: '#FF0000' },
+  { label: 'Doors', value: '#00FF00' },
+  { label: 'Roofs', value: '#0000FF' },
+]
+
+const TypeaheadWithPills = (props) => {
+  return (
+    <>
+      <Typeahead
+          isMulti
+          label="Colors"
+          options={options}
+          placeholder=""
+          {...props}
+      />
+    </>
+  )
+}
+
+export default TypeaheadWithPills

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

@@ -0,0 +1,24 @@
+Typeahead kit is data-driven. The minimum default fields are `label` and `value`.
+
+This is an example of an option: `{ label: 'Windows', value: '#FFA500' }`
+
+#### Rails: Default Options
+
+You can also pass `default_options` which will populate the initial pill selections:
+
+`default_options: [{ label: 'Windows', value: '#FFA500' }]`
+
+#### Rails: Subscribing to JS Events
+
+JavaScript events are triggered based on actions you take within the kit such as selection, removal and clearing.
+This kit utilizes a default `id` prop named `react-select-input`. It is **highly advised** to send your own unique `id` prop when using this kit to ensure these events do not unintentionally affect other instances of the kit in the same view. The examples below will use the unique `id` prop named `typeahead-pills-example1`:
+
+`pb-typeahead-kit-typeahead-pills-example1-result-option-select` event to perform custom work when an option is clicked.
+`pb-typeahead-kit-typeahead-pills-example1-result-option-remove` event to perform custom work when a pill is clicked.
+`pb-typeahead-kit-typeahead-pills-example1-result-option-clear` event to perform custom work when all pills are removed upon clicking the X.
+
+#### Rails: Publishing JS Events
+
+The same rule regarding the `id` prop applies to publishing JS events. The examples below will use the unique `id` prop named `typeahead-pills-example1`:
+
+`pb-typeahead-kit-typeahead-pills-example1:clear` event to clear all options.

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

@@ -0,0 +1,46 @@
+<%= pb_rails("typeahead", props: {
+  async: true,
+  get_option_label: 'getOptionLabel',
+  get_option_value: 'getOptionValue',
+  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 {
+        name: result.login,
+        id: 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([])
+      }
+    })
+  }
+
+  window.getOptionLabel = function(option) {
+    return option.name;
+  }
+  window.getOptionValue = function(option) {
+    return option.id;
+  }
+<% end %>

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

@@ -0,0 +1,101 @@
+/* @flow */
+
+import React, { useState } from 'react'
+
+import {
+  Caption,
+  Typeahead,
+  User,
+} from '../..'
+
+/**
+ *
+ * @const filterResults
+ * @ignore
+ * @returns {[Object]} - a custom mapping of objects, minimally containing
+ * `value` and `label` among other possible fields
+ * @summary - for doc example purposes only
+ */
+
+const filterResults = (results) =>
+  results.items.map((result) => {
+    return {
+      name: result.login,
+      id: result.id,
+    }
+  })
+
+/**
+ *
+ * @const promiseOptions
+ * @ignore
+ * @returns {Promise} - fetch API data results from Typeahead input text
+ * @see - https://react-select.com/home#async
+ * @summary - for doc example purposes only
+ */
+
+const promiseOptions = (inputValue) =>
+  new Promise((resolve) => {
+    if (inputValue) {
+      fetch(`https://api.github.com/search/users?q=${inputValue}`)
+        .then((response) => response.json())
+        .then((results) => resolve(filterResults(results)))
+    } else {
+      resolve([])
+    }
+  })
+
+const TypeaheadWithPillsAsync = (props) => {
+  const [users, setUsers] = useState([])
+  const handleOnChange = (value) => setUsers(formatUsers(value))
+  const formatValue = (users) => formatUsers(users)
+  const formatUsers = (users) => {
+    const results = () => (users.map((user) => {
+      if (Object.keys(user)[0] === 'name' || Object.keys(user)[1] === 'id'){
+        return ({ label: user.name, value: user.id })
+      } else {
+        return user
+      }
+    }))
+    return results()
+  }
+
+  return (
+    <>
+      <If condition={users && users.length > 0}>
+        <Caption
+            marginBottom="xs"
+            text="State (Users)"
+            {...props}
+        />
+        <For
+            each="user"
+            of={users}
+        >
+          <User
+              align="left"
+              key={user.value}
+              marginBottom="md"
+              name={user.label}
+              orientation="horizontal"
+              {...props}
+          />
+        </For>
+      </If>
+      <Typeahead
+          async
+          getOptionLabel={(option) => option.name}
+          getOptionValue={(option) => option.id}
+          isMulti
+          label="Github Users"
+          loadOptions={promiseOptions}
+          onChange={handleOnChange}
+          placeholder="type the name of a Github user"
+          value={formatValue(users)}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default TypeaheadWithPillsAsync

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

@@ -0,0 +1,19 @@
+#### 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.
+
+##### `getOptionLabel` + `getOptionValue`
+
+If your server returns data that requires differing field names other than `label` and `value`
+
+See `react-select` docs for more information: https://react-select.com/advanced#replacing-builtins

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

@@ -0,0 +1,111 @@
+/* @flow */
+
+import React, { useState } from 'react'
+
+import {
+  Caption,
+  Typeahead,
+  User,
+} from '../..'
+
+/**
+ *
+ * @const filterResults
+ * @ignore
+ * @returns {[Object]} - a custom mapping of objects, minimally containing
+ * `value` and `label` among other possible fields
+ * @summary - for doc example purposes only
+ */
+
+type UserProps = {
+  imageUrl?: String,
+  label?: String,
+  territory?: String,
+  type?: String,
+}
+
+const filterResults = (results) =>
+  results.items.map((result) => {
+    return {
+      imageUrl: result.avatar_url, //add the custom field
+      label: result.login,
+      value: result.id,
+      territory: 'PHL',
+      type: result.type,
+    }
+  })
+
+const promiseOptions = (inputValue) =>
+  new Promise((resolve) => {
+    if (inputValue) {
+      fetch(`https://api.github.com/search/users?q=${inputValue}`)
+        .then((response) => response.json())
+        .then((results) => resolve(filterResults(results)))
+    } else {
+      resolve([])
+    }
+  })
+
+const TypeaheadWithPillsAsyncCustomOptions = (props) => {
+  const [users, setUsers] = useState([])
+  const handleOnChange = (value) => setUsers(value)
+
+  /**
+   *
+   * @const handleOnMultiValueClick {function} - a custom callback for the MultiValue click
+   * @ignore
+   * @returns {null}
+   * @summary - for doc example purposes only
+   */
+  const handleOnMultiValueClick = (value) => {
+    alert(`You removed the user: "${value.label}"`)
+  }
+
+  return (
+    <>
+      <If condition={users && users.length > 0}>
+        <Caption
+            marginBottom="xs"
+            text="State (Users)"
+            {...props}
+        />
+        <For
+            each="user"
+            of={users}
+        >
+          <User
+              align="left"
+              avatar
+              avatarUrl={user.imageUrl}
+              key={user.value}
+              marginBottom="md"
+              name={user.label}
+              orientation="horizontal"
+              {...props}
+          />
+        </For>
+      </If>
+      <Typeahead
+          async
+          isMulti
+          label="Github Users"
+          loadOptions={promiseOptions}
+          onChange={handleOnChange}
+          onMultiValueClick={handleOnMultiValueClick}
+          placeholder="type the name of a Github user"
+          valueComponent={(props: UserProps) => (
+            <User
+                avatar
+                avatarUrl={props.imageUrl}
+                name={props.label}
+                territory={props.territory}
+                title={props.type}
+            />
+          )}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default TypeaheadWithPillsAsyncCustomOptions

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

@@ -0,0 +1 @@
+Use `valueComponent` props to pass your desire custom options. `valueComponent` will be displayed if present. 

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 %>