playbook_ui 7.0.0 → 7.0.1.pre.alpha1

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

@@ -1,13 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import { components } from 'react-select'
-
-const IndicatorsContainer = (props: any) => (
-  <components.IndicatorsContainer
-      className="text_input_indicators"
-      {...props}
-  />
-)
-
-export default IndicatorsContainer

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

@@ -1,12 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import { components } from 'react-select'
-
-const MenuList = (props: any) => (
-  <components.MenuList {...props}>
-    {props.children}
-  </components.MenuList>
-)
-
-export default MenuList

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

@@ -1,51 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import { components } from 'react-select'
-
-import { FormPill } from '../../'
-
-type Props = {
-  data: object,
-  multiValueTemplate: any,
-  removeProps: any,
-  selectProps: any,
-}
-
-const MultiValue = (props: Props) => {
-  const {
-    data,
-    removeProps,
-    selectProps,
-  } = props
-
-  const handleOnClick = () => {
-    if (selectProps.onMultiValueClick) selectProps.onMultiValueClick(data)
-    removeProps.onClick()
-  }
-  const { imageUrl, label } = data
-
-  return (
-    <components.MultiValueContainer
-        className="text_input_multivalue_container"
-        {...props}
-    >
-      <If condition={imageUrl}>
-        <FormPill
-            avatarUrl={imageUrl}
-            marginRight="xs"
-            name={label}
-            onClick={handleOnClick}
-        />
-        <Else />
-        <FormPill
-            marginRight="xs"
-            onClick={handleOnClick}
-            text={label}
-        />
-      </If>
-    </components.MultiValueContainer>
-  )
-}
-
-export default MultiValue

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

@@ -1,34 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import { components } from 'react-select'
-
-import {
-  User,
-} from '../../'
-
-const Option = (props: any) => {
-  const {
-    imageUrl,
-    label,
-  } = props.data
-  return (
-    <components.Option {...props}>
-      <Choose>
-        <When condition={imageUrl}>
-          <User
-              align="left"
-              avatarUrl={imageUrl}
-              name={label}
-              orientation="horizontal"
-          />
-        </When>
-        <When condition={!imageUrl}>
-          {label}
-        </When>
-      </Choose>
-    </components.Option>
-  )
-}
-
-export default Option

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

@@ -1,13 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import { components } from 'react-select'
-
-const Placeholder = (props: any) => (
-  <components.IndicatorsContainer
-      className="placeholder"
-      {...props}
-  />
-)
-
-export default Placeholder

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

@@ -1,13 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import { components } from 'react-select'
-
-const ValueContainer = (props: Props) => (
-  <components.ValueContainer
-      className="text_input_value_container"
-      {...props}
-  />
-)
-
-export default ValueContainer

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

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

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

@@ -1,29 +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' },
-]
-
-import TypeaheadWithPillsSummary from './_typeahead_with_pills_summary'
-
-const TypeaheadWithPills = () => {
-  return (
-    <>
-      <TypeaheadWithPillsSummary />
-      <Typeahead
-          isMulti
-          label="Colors"
-          options={options}
-          placeholder=""
-      />
-    </>
-  )
-}
-
-export default TypeaheadWithPills

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

@@ -1,84 +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 {
-      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 TypeaheadWithPillsAsync = () => {
-  const [users, setUsers] = useState([])
-  const handleOnChange = (value) => setUsers(value)
-
-  return (
-    <>
-      <If condition={users && users.length > 0}>
-        <Caption
-            marginBottom="xs"
-            text="State (Users)"
-        />
-        <For
-            each="user"
-            of={users}
-        >
-          <User
-              align="left"
-              key={user.value}
-              marginBottom="md"
-              name={user.label}
-              orientation="horizontal"
-          />
-        </For>
-      </If>
-      <Typeahead
-          async
-          isMulti
-          label="Github Users"
-          loadOptions={promiseOptions}
-          onChange={handleOnChange}
-          placeholder="type the name of a Github user"
-      />
-    </>
-  )
-}
-
-export default TypeaheadWithPillsAsync

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

@@ -1,45 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import { Body, Flex, FlexItem, Icon } from '../..'
-
-const TypeaheadWithPillsAsyncSummary = () => {
-  return (
-    <>
-      <Flex
-          marginBottom="lg"
-          vertical="center"
-      >
-        <FlexItem>
-          <Body
-              color="light"
-          >
-            <Icon
-                icon="info-circle"
-                marginRight="xs"
-            />
-          </Body>
-        </FlexItem>
-        <FlexItem>
-          <Body
-              color="light"
-          >
-            {'If the data field '}
-            <code>{'imageUrl'}</code>
-            {' is present, '}
-            <code>{'FormPill'}</code>
-            {' will receive that field as a prop and display the image. '}
-            <br />
-            {'Additionally, you can also leverage the callback prop: '}
-            <code>{'onMultiValueClick'}</code>
-            {' to perform custom work when a '}
-            <code>{'MultiValue'}</code>
-            {' item is clicked.'}
-          </Body>
-        </FlexItem>
-      </Flex>
-    </>
-  )
-}
-
-export default TypeaheadWithPillsAsyncSummary

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

@@ -1,101 +0,0 @@
-/* @flow */
-
-import React, { useState } from 'react'
-
-import {
-  Caption,
-  Typeahead,
-  User,
-} from '../..'
-
-import TypeaheadWithPillsAsyncSummary from './_typeahead_with_pills_async_summary'
-
-/**
- *
- * @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 = () => {
-  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 (
-    <>
-      <TypeaheadWithPillsAsyncSummary />
-      <If condition={users && users.length > 0}>
-        <Caption
-            marginBottom="xs"
-            text="State (Users)"
-        />
-        <For
-            each="user"
-            of={users}
-        >
-          <User
-              align="left"
-              avatarUrl={user.imageUrl}
-              key={user.value}
-              marginBottom="md"
-              name={user.label}
-              orientation="horizontal"
-          />
-        </For>
-      </If>
-      <Typeahead
-          async
-          isMulti
-          label="Github Users"
-          loadOptions={promiseOptions}
-          onChange={handleOnChange}
-          onMultiValueClick={handleOnMultiValueClick}
-          placeholder="type the name of a Github user"
-      />
-    </>
-  )
-}
-
-export default TypeaheadWithPillsAsyncUsers

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

@@ -1,27 +0,0 @@
-// @flow
-
-import React from 'react'
-import { Body, Icon } from '../..'
-
-const TypeaheadWithPillsSummary = () => {
-  return (
-    <>
-      <Body
-          color="light"
-          marginBottom="lg"
-      >
-        <Icon
-            icon="info-circle"
-            marginRight="xs"
-        />
-        {'Typeahead kit is data-driven. The minimum default fields are '}
-        <code>{'label'}</code>
-        {' and '}
-        <code>{'value'}</code>
-        {'.'}
-      </Body>
-    </>
-  )
-}
-
-export default TypeaheadWithPillsSummary