playbook_ui 9.17.0.pre.decouple.website2 → 9.19.0.pre.alpha.pre.fonts2

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { TextInput } from '../../'
+
+import TextInput from '../_text_input'
 
 const TextInputAddOn = (props) => {
   const [defaultInput, setDefaultInput] = useState('')

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_custom.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { TextInput } from '../../'
+
+import TextInput from '../_text_input'
 
 const TextInputCustom = (props) => {
   const [name, setName] = useState('')

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx

@@ -1,9 +1,8 @@
 import React, { useState } from 'react'
-import {
-  Caption,
-  TextInput,
-  Title,
-} from '../../'
+
+import Caption from '../../pb_caption/_caption'
+import TextInput from '../../pb_text_input/_text_input'
+import Title from '../../pb_title/_title'
 
 const TextInputDefault = (props) => {
   const handleOnChangeFirstName = ({ target }) => {

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_disabled.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { TextInput } from '../../'
+
+import TextInput from '../_text_input'
 
 class TextInputDisabled extends React.Component {
   render(props) {

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_inline.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { TextInput } from '../../'
+
+import TextInput from '../_text_input'
 
 const TextInputInline = (props) => {
   const [value, setValue] = useState('Inline Input')

data/app/pb_kits/playbook/pb_textarea/_textarea.jsx

@@ -2,10 +2,16 @@
 
 import React, { forwardRef, useEffect, useRef } from 'react'
 import classnames from 'classnames'
-import { Body, Caption, Flex, FlexItem } from '../'
-import type { InputCallback } from '../types.js'
-import { globalProps } from '../utilities/globalProps.js'
+
 import PbTextarea from './'
+import type { InputCallback } from '../types.js'
+
+import { globalProps } from '../utilities/globalProps'
+
+import Body from '../pb_body/_body'
+import Caption from '../pb_caption/_caption'
+import Flex from '../pb_flex/_flex'
+import FlexItem from '../pb_flex/_flex_item'
 
 type TextareaProps = {
   characterCount?: string,

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_character_counter.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { Textarea } from '../../'
+
+import Textarea from '../_textarea'
 
 const TextareaCharacterCounter = (props) => {
   const [value1, setValue1] = useState('Counting characters!')

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_custom.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Textarea } from '../../'
+
+import Textarea from '../_textarea'
 
 const TextareaCustom = (props) => {
   return (

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Textarea } from '../../'
+
+import Textarea from '../_textarea'
 
 const TextareaDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Textarea } from '../../'
+
+import Textarea from '../_textarea'
 
 const TextareaResize = (props) => {
   return (

data/app/pb_kits/playbook/pb_time/_time.jsx

@@ -7,7 +7,9 @@ import DateTime from '../pb_kit/dateTime.js'
 import { buildCss } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
-import { Body, Caption, Icon } from '../'
+import Body from '../pb_body/_body'
+import Caption from '../pb_caption/_caption'
+import Icon from '../pb_icon/_icon'
 
 type TimeProps = {
   align?: 'left' | 'center' | 'right',

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.jsx

@@ -2,9 +2,13 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { Body, Caption, Icon } from '../'
-import DateTime from '../pb_kit/dateTime.js'
-import { globalProps } from '../utilities/globalProps.js'
+
+import DateTime from '../pb_kit/dateTime'
+import { globalProps } from '../utilities/globalProps'
+
+import Body from '../pb_body/_body'
+import Caption from '../pb_caption/_caption'
+import Icon from '../pb_icon/_icon'
 
 type TimeRangeInlineProps = {
   className?: string,

data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx

@@ -5,9 +5,10 @@ import classnames from 'classnames'
 
 import DateTime from '../pb_kit/dateTime.js'
 import { buildCss, buildDataProps } from '../utilities/props'
-import { deprecatedProps, globalProps } from '../utilities/globalProps.js'
+import { deprecatedProps, globalProps } from '../utilities/globalProps'
 
-import { Body, Caption } from '../'
+import Body from '../pb_body/_body'
+import Caption from '../pb_caption/_caption'
 
 type TimeStackedProps = {
   align?: 'left' | 'center' | 'right',

data/app/pb_kits/playbook/pb_timeline/_item.jsx

@@ -2,8 +2,11 @@
 
 import React from 'react'
 import classnames from 'classnames'
+
 import { buildCss } from '../utilities/props'
-import { DateStacked, IconCircle } from '..'
+
+import DateStacked from '../pb_date_stacked/_date_stacked'
+import IconCircle from '../pb_icon_circle/_icon_circle'
 
 type ItemProps = {
   className?: string,

data/app/pb_kits/playbook/pb_timeline/_timeline.jsx

@@ -2,9 +2,11 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import TimelineItem from './_item.jsx'
+
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
+import TimelineItem from './_item.jsx'
+
 type TimelineProps = {
   aria?: object,
   children?: array<React.ReactChild>,

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_default.jsx

@@ -1,6 +1,8 @@
 import React from 'react'
-import Timeline from '../_timeline.jsx'
-import { Body, TitleDetail } from '../../'
+
+import Timeline from '../_timeline'
+import Body from '../../pb_body/_body'
+import TitleDetail from '../../pb_title_detail/_title_detail'
 
 const TimelineDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.jsx

@@ -1,6 +1,8 @@
 import React from 'react'
-import Timeline from '../_timeline.jsx'
-import { Body, TitleDetail } from '../../'
+
+import Timeline from '../_timeline'
+import Body from '../../pb_body/_body'
+import TitleDetail from '../../pb_title_detail/_title_detail'
 
 const TimelineVertical = (props) => (
   <div>

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import Timeline from '../_timeline.jsx'
-import { TitleDetail } from '../../'
+
+import Timeline from '../_timeline'
+import TitleDetail from '../../pb_title_detail/_title_detail'
 
 const TimelineWithDate = (props) => (
   <div>

data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx

@@ -2,10 +2,12 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import DateTime from '../pb_kit/dateTime.js'
+
+import DateTime from '../pb_kit/dateTime'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { Caption } from '../'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
+
+import Caption from '../pb_caption/_caption'
 
 type TimestampProps = {
   align?: "left" | "center" | "right",

data/app/pb_kits/playbook/pb_title/docs/_title_light.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Title } from '../../'
+
+import Title from '../_title'
 
 const TitleLight = (props) => {
   return (

data/app/pb_kits/playbook/pb_title/docs/_title_variants.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Title } from '../../'
+
+import Title from '../_title'
 
 const TitleVariants = (props) => {
   return (

data/app/pb_kits/playbook/pb_title_count/_title_count.jsx

@@ -4,9 +4,10 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
 
-import { Body, Title } from '../'
-import { globalProps } from '../utilities/globalProps.js'
+import Body from '../pb_body/_body'
+import Title from '../pb_title/_title'
 
 type TitleCountProps = {
   align: "center" | "left" | "right",

data/app/pb_kits/playbook/pb_title_count/docs/_title_count_align.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { TitleCount } from '../../'
+
+import TitleCount from '../_title_count'
 
 const TitleCountAlign = (props) => {
   return (

data/app/pb_kits/playbook/pb_title_count/docs/_title_count_default.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { TitleCount } from '../../'
+
+import TitleCount from '../_title_count'
 
 const TitleCountDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_title_detail/_title_detail.jsx

@@ -2,12 +2,13 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps.js'
-
-import { Body, Title } from '../'
 
+import { globalProps } from '../utilities/globalProps'
 import { buildCss, buildDataProps } from '../utilities/props'
 
+import Body from '../pb_body/_body'
+import Title from '../pb_title/_title'
+
 type TitleDetailProps = {
   align?: "left" | "center" | "right",
   className?: string,

data/app/pb_kits/playbook/pb_title_detail/docs/_title_detail_default.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { TitleDetail } from '../../'
+
+import TitleDetail from '../_title_detail'
 
 const TitleDetailDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx

@@ -4,6 +4,7 @@ import React from 'react'
 import Select from 'react-select'
 import AsyncSelect from 'react-select/async'
 import CreateableSelect from 'react-select/creatable'
+import AsyncCreateableSelect from 'react-select/async-creatable'
 import { get, isString, uniqueId } from 'lodash'
 import { globalProps } from '../utilities/globalProps.js'
 import classnames from 'classnames'
@@ -72,7 +73,11 @@ const Typeahead = ({ loadOptions = noop, getOptionLabel, id, getOptionValue, cre
     ...props,
   }
 
-  const Tag = createable ? CreateableSelect : (async ? AsyncSelect : Select)
+  const Tag = (
+    createable
+      ? (async ? AsyncCreateableSelect : CreateableSelect)
+      : (async ? AsyncSelect : Select)
+  )
 
   const handleOnChange = (_data, { action, option, removedValue }) => {
     if (action === 'select-option') {

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

@@ -3,10 +3,8 @@
 import React from 'react'
 import { components } from 'react-select'
 
-import {
-  Flex,
-  TextInput,
-} from '../..'
+import Flex from '../../pb_flex/_flex'
+import TextInput from '../../pb_text_input/_text_input'
 
 type Props = {
   selectProps: any,

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

@@ -3,7 +3,8 @@
 import React from 'react'
 import { components } from 'react-select'
 
-import { Badge, FormPill } from '../../'
+import Badge from '../../pb_badge/_badge'
+import FormPill from '../../pb_form_pill/_form_pill'
 
 type Props = {
   data: object,

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

@@ -3,9 +3,7 @@
 import React from 'react'
 import { components } from 'react-select'
 
-import {
-  User,
-} from '../../'
+import User from '../../pb_user/_user'
 
 const Option = (props: any) => {
   const {

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

@@ -1,9 +1,11 @@
 /* @flow */
 
 import React from 'react'
-import { Flex, Icon } from '../../'
 import { components } from 'react-select'
 
+import Flex from '../../pb_flex/_flex'
+import Icon from '../../pb_icon/_icon'
+
 const Placeholder = (props: any) => (
   <>
     <Flex

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

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