RubyGems - playbook_ui - Versions diffs - 12.19.0.pre.alpha.movemarkdown639 → 12.20.0.pre.alpha.title2665 - Mend

playbook_ui 12.19.0.pre.alpha.movemarkdown639 → 12.20.0.pre.alpha.title2665

Files changed (1479) hide show

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

	@@ -0,0 +1 @@
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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1,103 @@
+/* @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 {
+      imageUrl: result.avatar_url, //add the custom field
+      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(filterResults(results)))
+    } else {
+      resolve([])
+    }
+  })
+const TypeaheadWithPillsAsyncUsers = (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}
+          noOptionsMessage={() => 'Type to Search'}
+          onChange={handleOnChange}
+          onMultiValueClick={handleOnMultiValueClick}
+          placeholder="type the name of a Github user"
+          {...props}
+      />
+    </>
+  )
+}
+export default TypeaheadWithPillsAsyncUsers

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

	@@ -0,0 +1 @@
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/_typeahead_without_pills.html.erb ADDED Viewed

@@ -0,0 +1,30 @@
+<%
+  options = [
+    { label: 'Windows', value: '#FFA500' },
+    { label: 'Siding', value: '#FF0000' },
+    { label: 'Doors', value: '#00FF00' },
+    { label: 'Roofs', value: '#0000FF' },
+  ]
+%>
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-without-pills-example1",
+    placeholder: "All Colors",
+    options: options,
+    label: "Colors",
+    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-without-pills-example1-result-option-select", function(event) {
+    console.log('Single Option selected')
+    console.dir(event.detail)
+  })
+  document.addEventListener("pb-typeahead-kit-typeahead-without-pills-example1-result-clear", function() {
+    console.log('All options cleared')
+  })
+<% end %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ Passing `is_multi: false` will allow the user to only select one option from the drop down. Note: this will disable `pills` prop.

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

@@ -0,0 +1,24 @@
+examples:
+  rails:
+    - typeahead_default: Default
+    - typeahead_with_context: With Context
+    - typeahead_with_pills: With Pills
+    - typeahead_without_pills: Without Pills (Single Select)
+    - typeahead_with_pills_async: With Pills (Async Data)
+    - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
+    - typeahead_inline: Inline
+    - typeahead_multi_kit: Multi Kit Options
+    - typeahead_error_state: Error State
+  react:
+    - typeahead_default: Default
+    - typeahead_with_highlight: With Highlight
+    - typeahead_with_pills: With Pills
+    - typeahead_with_pills_async: With Pills (Async Data)
+    - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
+    - typeahead_with_pills_async_custom_options: With Pills (Async Data w/ Custom Options)
+    - typeahead_inline: Inline
+    - typeahead_multi_kit: Multi Kit Options
+    - typeahead_createable: Createable
+    - typeahead_async_createable: Createable (+ Async Data)
+    - typeahead_error_state: Error State

data/app/pb_kits/playbook/pb_typeahead/docs/index.js ADDED Viewed

@@ -0,0 +1,11 @@
+export { default as TypeaheadDefault } from './_typeahead_default.jsx'
+export { default as TypeaheadWithHighlight } from './_typeahead_with_highlight.jsx'
+export { default as TypeaheadWithPills } from './_typeahead_with_pills.jsx'
+export { default as TypeaheadWithPillsAsync } from './_typeahead_with_pills_async.jsx'
+export { default as TypeaheadWithPillsAsyncUsers } from './_typeahead_with_pills_async_users.jsx'
+export { default as TypeaheadWithPillsAsyncCustomOptions } from './_typeahead_with_pills_async_custom_options.jsx'
+export { default as TypeaheadInline } from './_typeahead_inline.jsx'
+export { default as TypeaheadMultiKit } from './_typeahead_multi_kit.jsx'
+export { default as TypeaheadCreateable } from './_typeahead_createable.jsx'
+export { default as TypeaheadAsyncCreateable } from './_typeahead_async_createable.jsx'
+export { default as TypeaheadErrorState } from './_typeahead_error_state.jsx'