playbook_ui 12.19.0 → 12.20.0.pre.alpha.movemarkdown668

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

@@ -1,58 +0,0 @@
-// @flow
-
-import React from 'react'
-import { Typeahead } 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 {
-      label: result.login,
-      value: 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(results.items ? filterResults(results) : [])
-        })
-    } else {
-      resolve([])
-    }
-  })
-
-const TypeaheadAsyncCreateable = (props) => {
-  return (
-    <Typeahead
-        async
-        createable
-        isMulti
-        label="Existing or User Created Options"
-        loadOptions={promiseOptions}
-        {...props}
-    />
-  )
-}
-
-export default TypeaheadAsyncCreateable

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

@@ -1,25 +0,0 @@
-// @flow
-
-import React from 'react'
-import { Typeahead } from '../..'
-
-const options = [
-  { label: 'Jardim', value: 'Portuguese' },
-  { label: 'Garten', value: 'German' },
-  { label: 'Giardino', value: 'Italian' },
-  { label: 'Jardín', value: 'Spanish' },
-]
-
-const TypeaheadCreateable = (props) => {
-  return (
-    <Typeahead
-        createable
-        isMulti
-        label="User Created Options"
-        options={options}
-        {...props}
-    />
-  )
-}
-
-export default TypeaheadCreateable

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

@@ -1,63 +0,0 @@
-<%= pb_rails("typeahead", props: {
-  label: "user",
-  name: :foo,
-  data: { typeahead_example: true },
-  input_options: {
-    classname: "my-typeahead-class",
-    data: {
-      typeahead_testing: "data field test"
-    },
-    id: "typeahead-input-id-test",
-  },
-})%>
-
-<br><br><br>
-
-<%= pb_rails("card", props: { padding: "xl", data: { typeahead_example_selected_option: true } }) do %>
-  <%= pb_rails("body") do %>
-    Use the above input to search for users on Github, and see the results as you type.
-  <% end %>
-
-  <%= pb_rails("body") do %>
-    When you make a selection, you will see it appear in the list below
-  <% end %>
-
-  <div data-selected-option></div>
-<% end %>
-
-<template data-typeahead-example-result-option>
-  <%= pb_rails("user", props: {
-    name: tag(:slot, name: "name"),
-    orientation: "horizontal",
-    align: "left",
-    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 || !event.target.dataset.typeaheadExample) return;
-
-    fetch(`https://api.github.com/search/users?q=${encodeURIComponent(event.detail.searchingFor)}`)
-      .then(response => response.json())
-      .then((result) => {
-        const resultOptionTemplate = document.querySelector("[data-typeahead-example-result-option]")
-
-        event.detail.setResults((result.items || []).map((user) => {
-          const wrapper = resultOptionTemplate.content.cloneNode(true)
-          wrapper.querySelector('slot[name="name"]').replaceWith(user.login)
-          wrapper.querySelector('img').dataset.src = user.avatar_url
-          return wrapper
-        }))
-      })
-  })
-
-
-  document.addEventListener("pb-typeahead-kit-result-option-selected", function(event) {
-    if (!event.target.dataset.typeaheadExample) return;
-
-    document.querySelector("[data-typeahead-example-selected-option] [data-selected-option]").innerHTML = ""
-    document.querySelector("[data-typeahead-example-selected-option] [data-selected-option]").innerHTML = event.detail.selected.innerHTML
-  })
-<% end %>

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

@@ -1,24 +0,0 @@
-// @flow
-
-import React from 'react'
-
-import Typeahead from '../_typeahead'
-
-const options = [
-  { label: 'Orange', value: '#FFA500' },
-  { label: 'Red', value: '#FF0000' },
-  { label: 'Green', value: '#00FF00' },
-  { label: 'Blue', value: '#0000FF' },
-]
-
-const TypeaheadDefault = (props) => {
-  return (
-    <Typeahead
-        label="Colors"
-        options={options}
-        {...props}
-    />
-  )
-}
-
-export default TypeaheadDefault

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

@@ -1,19 +0,0 @@
-<%
-  options = [
-    { label: 'Windows', value: '#FFA500' },
-    { label: 'Siding', value: '#FF0000' },
-    { label: 'Doors', value: '#00FF00' },
-    { label: 'Roofs', value: '#0000FF' },
-  ]
-
-%>
-
-<%= pb_rails("typeahead", props: { id: "typeahead-error-example", options: options, error: "Please make a valid selection", label: "Products", name: :foo, is_multi: false }) %>
-
-<!-- This section is an example of the available JavaScript event hooks -->
-<%= javascript_tag defer: "defer" do %>
-  document.addEventListener("pb-typeahead-kit-typeahead-error-example-result-option-select", function(event) {
-    console.log('Option selected')
-    console.dir(event.detail)
-  })
-<% end %>

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

@@ -1,39 +0,0 @@
-// @flow
-
-import React, { useState, useEffect } from 'react'
-
-import Typeahead from '../_typeahead'
-
-const options = [
-  { label: 'Orange', value: '#FFA500' },
-  { label: 'Red', value: '#FF0000' },
-  { label: 'Green', value: '#00FF00' },
-  { label: 'Blue', value: '#0000FF' },
-]
-
-const TypeaheadErrorState = (props) => {
-  const [errorState, setErrorState] = useState("Please make a valid selection");
-  const [searchValue, setSearchValue] = useState(null);
-  
-  const handleOnChange = (value) => setSearchValue(value)
-
-    useEffect(() => {
-      if(searchValue) {
-        setErrorState("")
-      } else {
-        setErrorState("Please make a valid selection")
-      }
-    }, [searchValue])
-  
-  return (
-    <Typeahead
-        error={errorState}
-        label="Colors"
-        onChange={handleOnChange}
-        options={options}
-        {...props}
-    />
-  )
-}
-
-export default TypeaheadErrorState

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

@@ -1 +0,0 @@
-Typeahead w/ Error shows that an option must be selected or the selected option is invalid (i.e., when used in a form it signals a user to fix an error).

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

@@ -1,36 +0,0 @@
-<%
-  synths = [
-    { label: 'Oberheim', value: 'OBXa' },
-    { label: 'Moog', value: 'Minimoog' },
-    { label: 'Roland', value: 'Juno' },
-    { label: 'Korg', value: 'MS-20' },
-  ]
-%>
-<%
-  cities = [
-    { label: 'Budapest', value: 'Hungary' },
-    { label: 'Singapore', value: 'Singapore' },
-    { label: 'Oslo', value: 'Norway' },
-    { label: 'Lagos', value: 'Nigeria' },
-  ]
-%>
-
-<%= pb_rails("typeahead", props: {
-  default_options: [synths.first],
-  id: "typeahead-inline-example1",
-  inline: true,
-  options: synths,
-  label: "Synths",
-  placeholder: "Add synths",
-  pills: true
-}) %>
-
-<%= pb_rails("typeahead", props: {
-  id: "typeahead-inline-example2",
-  inline: true,
-  options: cities,
-  label: "Cities",
-  pills: true,
-  placeholder: "Add cities",
-  plus_icon: true
-}) %>

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

@@ -1,44 +0,0 @@
-// @flow
-
-import React from 'react'
-
-import Typeahead from '../_typeahead'
-
-const synths = [
-  { label: 'Oberheim', value: 'OBXa' },
-  { label: 'Moog', value: 'Minimoog' },
-  { label: 'Roland', value: 'Juno' },
-  { label: 'Korg', value: 'MS-20' },
-]
-
-const cities = [
-  { label: 'Budapest', value: 'Hungary' },
-  { label: 'Singapore', value: 'Singapore' },
-  { label: 'Oslo', value: 'Norway' },
-  { label: 'Lagos', value: 'Nigeria' },
-]
-
-const TypeaheadInline = (props) => {
-  return (
-    <>
-      <Typeahead
-          inline
-          isMulti
-          label="Synths"
-          options={synths}
-          {...props}
-      />
-      <Typeahead
-          inline
-          isMulti
-          label="Placeholder Plus Icon"
-          options={cities}
-          placeholder="Add cities"
-          plusIcon
-          {...props}
-      />
-    </>
-  )
-}
-
-export default TypeaheadInline

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

@@ -1,35 +0,0 @@
-<%
-  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

@@ -1,45 +0,0 @@
-// @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

@@ -1,59 +0,0 @@
-<%= 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

@@ -1,98 +0,0 @@
-/* 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

@@ -1,31 +0,0 @@
-<%
-  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

@@ -1,27 +0,0 @@
-/* @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

@@ -1,24 +0,0 @@
-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.