playbook_ui 12.19.0 → 12.20.0.pre.alpha.movemarkdown668

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

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

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

@@ -1,19 +0,0 @@
-#### 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

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

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

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

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

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

@@ -1,30 +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-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

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

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

@@ -1,11 +0,0 @@
-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'

data/app/pb_kits/playbook/pb_user/docs/_description.md

@@ -1 +0,0 @@
-This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.

data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_rails.html.erb

@@ -1,36 +0,0 @@
-<div class="pb--doc-demo-row">
-  <%= pb_rails("user", props: {
-    align: "left",
-    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
-    name: "Anna Black",
-    orientation: "horizontal",
-    size: "md",
-    territory: "PHL",
-    title: "Remodeling Consultant"
-  }) do %>
-    <%= pb_rails("flex", props: { align: "center" }) do %>
-      <%= pb_rails("icon", props: { icon: "users" }) %>
-      <%= pb_rails("caption", props: { padding_left: "xs", text: "Admin" }) %>
-    <% end %>
-  <% end %>
-
-  <%= pb_rails("user", props: {
-    align: "left",
-    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
-    name: "Anna Black",
-    orientation: "horizontal",
-    size: "md",
-  }) do %>
-    <%= pb_rails("contact", props: {
-      contact_type: "cell",
-      contact_value: "349-185-9988"
-    }) %>
-    <%= pb_rails("contact", props: {
-      contact_value: 5555555555
-    }) %>
-    <%= pb_rails("contact", props: {
-      contact_type: "email",
-      contact_value: "email@example.com"
-    }) %>
-  <% end %>
-</div>

data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_rails.md

@@ -1 +0,0 @@
-The kit accepts block content and whatever is passed as block content will display in the subtitle section.

data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_react.jsx

@@ -1,56 +0,0 @@
-import React from "react"
-import { Caption, Contact, Flex, Icon, User } from "../.."
-
-const MentorSubtitle = (
-  <Flex>
-    <Icon icon="users" />
-    <Caption
-        paddingLeft="xs"
-        text="Admin"
-    />
-  </Flex>
-)
-
-const ContactSubtitle = (
-  <>
-    <Contact
-        contactType="cell"
-        contactValue="349-185-9988"
-    />
-    <Contact
-        contactValue="5555555555"
-    />
-    <Contact
-        contactType="email"
-        contactValue="email@example.com"
-    />
-  </>
-)
-
-const UserBlockContentSubtitleReact = (props) => {
-  return (
-    <div className="pb--doc-demo-row">
-      <User
-          align="left"
-          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
-          name="Anna Black"
-          orientation="horizontal"
-          subtitle={MentorSubtitle}
-          territory="PHL"
-          title="Remodeling Consultant"
-          {...props}
-      />
-
-      <User
-          align="left"
-          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
-          name="Anna Black"
-          orientation="horizontal"
-          subtitle={ContactSubtitle}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default UserBlockContentSubtitleReact

data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_react.md

@@ -1 +0,0 @@
-The `subtitle` prop accepts strings as well as nodes. Whatever node is passed will display in the subtitle section.

data/app/pb_kits/playbook/pb_user/docs/_user_default.html.erb

@@ -1,38 +0,0 @@
-<div class="pb--doc-demo-row">
-  <div>
-    <%= pb_rails("user", props: {
-      name: "Anna Black",
-      title: "Remodeling Consultant",
-      orientation: "vertical",
-      align: "center",
-      size: "lg",
-      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
-      }) %>
-  </div>
-  <div>
-    <%= pb_rails("user", props: {
-      name: "Anna Black",
-      title: "Remodeling Consultant",
-      orientation: "horizontal",
-      align: "left",
-      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
-      }) %>
-  </div>
-  <div>
-    <%= pb_rails("user", props: {
-      name: "Anna Black",
-      orientation: "horizontal",
-      align: "left",
-      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
-      }) %>
-
-     <br>
-
-     <%= pb_rails("user", props: {
-       name: "Anna Black",
-       orientation: "horizontal",
-       align: "left",
-       avatar: true
-     }) %>
-  </div>
-</div>

data/app/pb_kits/playbook/pb_user/docs/_user_default.jsx

@@ -1,55 +0,0 @@
-import React from 'react'
-import { User } from '../../'
-
-const UserDefault = (props) => {
-  return (
-    <div className="pb--doc-demo-row">
-
-      <div>
-        <User
-            align="center"
-            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
-            name="Anna Black"
-            orientation="vertical"
-            size="lg"
-            title="Remodeling Consultant"
-            {...props}
-        />
-      </div>
-
-      <div>
-        <User
-            align="left"
-            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
-            name="Anna Black"
-            orientation="horizontal"
-            title="Remodeling Consultant"
-            {...props}
-        />
-      </div>
-
-      <div>
-        <User
-            align="left"
-            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
-            name="Anna Black"
-            orientation="horizontal"
-            {...props}
-        />
-
-        <br />
-
-        <User
-            align="left"
-            avatar
-            name="Anna Black"
-            orientation="horizontal"
-            {...props}
-        />
-      </div>
-
-    </div>
-  )
-}
-
-export default UserDefault