playbook_ui 9.19.0.pre.alphafonts → 10.0.1.alpha.rtflexfix

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

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

@@ -1,7 +1,8 @@
 // @flow
 
 import React from 'react'
-import { Typeahead } from '../../'
+
+import Typeahead from '../_typeahead'
 
 const options = [
   { label: 'Orange', value: '#FFA500' },

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

@@ -1,7 +1,8 @@
 // @flow
 
 import React from 'react'
-import { Typeahead } from '../../'
+
+import Typeahead from '../_typeahead'
 
 const synths = [
   { label: 'Oberheim', value: 'OBXa' },

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

@@ -1,7 +1,8 @@
 // @flow
 
 import React from 'react'
-import { Typeahead } from '../../'
+
+import Typeahead from '../_typeahead'
 
 const labels = [
   { label: 'Verve', value: '1956' },

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

@@ -17,3 +17,4 @@ examples:
     - typeahead_inline: Inline
     - typeahead_multi_kit: Multi Kit Options
     - typeahead_createable: Createable
+    - typeahead_async_createable: Createable (+ Async Data)

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

@@ -6,3 +6,4 @@ export { default as TypeaheadWithPillsAsyncCustomOptions } from './_typeahead_wi
 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'

data/app/pb_kits/playbook/pb_user/_user.jsx

@@ -2,9 +2,13 @@
 
 import React from 'react'
 import classnames from 'classnames'
+
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { Avatar, Body, Title } from '../'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
+
+import Avatar from '../pb_avatar/_avatar'
+import Body from '../pb_body/_body'
+import Title from '../pb_title/_title'
 
 type UserProps = {
   align?: "left" | "center" | "right",

data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_default.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { UserBadge } from '../../'
+
+import UserBadge from '../_user_badge'
 
 const UserBadgeDefault = () => {
   return (

data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_size.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { UserBadge } from '../../'
+
+import UserBadge from '../_user_badge'
 
 const UserBadgeSize = () => {
   return (

data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.jsx

@@ -5,7 +5,8 @@ import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
-import { Caption, Title } from '../'
+import Caption from '../pb_caption/_caption'
+import Title from '../pb_title/_title'
 
 import DateTime from '../pb_kit/dateTime.js'
 
@@ -22,8 +23,8 @@ type WeekdayStackedProps = {
   id?: string,
 }
 
-const getDayOfWeek = (date, compact) => {
-  const dateTime = new DateTime({ value: date })
+const getDayOfWeek = (value, compact) => {
+  const dateTime = new DateTime({ value })
   if (compact) {
     return dateTime.toDayAbbr()
   } else {
@@ -31,8 +32,8 @@ const getDayOfWeek = (date, compact) => {
   }
 }
 
-const getFormattedDate = (date, variant) => {
-  const dateTime = new DateTime({ value: date })
+const getFormattedDate = (value, variant) => {
+  const dateTime = new DateTime({ value })
   if (variant === 'day_only') {
     return dateTime.toDay()
   } else {

data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_compact.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
-import {
-  WeekdayStacked,
-} from '../../'
+
+import WeekdayStacked from '../_weekday_stacked'
 
 const WeekdayStackedCompact = (props) => (
   <div>

data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_default.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
-import {
-  WeekdayStacked,
-} from '../../'
+
+import WeekdayStacked from '../_weekday_stacked'
 
 const WeekdayStackedDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_variant.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
-import {
-  WeekdayStacked,
-} from '../../'
+
+import WeekdayStacked from '../_weekday_stacked'
 
 const WeekdayStackedVariant = (props) => (
   <div>

data/app/pb_kits/playbook/playbook-doc.js

@@ -0,0 +1,195 @@
+// !!! IMPORTANT: This file is autogenerated. Please do not edit.!!!
+import WebpackerReact from 'webpacker-react'
+import ujs from 'webpacker-react/ujs'
+
+// KIT EXAMPLES
+import 'pb_form/pb_form_validation'
+import * as Avatar from 'pb_avatar/docs'
+import * as AvatarActionButton from 'pb_avatar_action_button/docs'
+import * as Background from 'pb_background/docs'
+import * as Badge from 'pb_badge/docs'
+import * as BarGraphDocs from 'pb_bar_graph/docs'
+import * as Body from 'pb_body/docs'
+import * as BreadCrumbs from 'pb_bread_crumbs/docs'
+import * as Button from 'pb_button/docs'
+import * as ButtonToolbar from 'pb_button_toolbar/docs'
+import * as Caption from 'pb_caption/docs'
+import * as Card from 'pb_card/docs'
+import * as Checkbox from 'pb_checkbox/docs'
+import * as CircleChart from 'pb_circle_chart/docs'
+import * as CircleIconButton from 'pb_circle_icon_button/docs'
+import * as Collapsible from 'pb_collapsible/docs'
+import * as Contact from 'pb_contact/docs'
+import * as Currency from 'pb_currency/docs'
+import * as DashboardValue from 'pb_dashboard_value/docs'
+import * as Date from 'pb_date/docs'
+import * as DatePicker from 'pb_date_picker/docs'
+import * as DateRangeInline from 'pb_date_range_inline/docs'
+import * as DateRangeStacked from 'pb_date_range_stacked/docs'
+import * as DateStacked from 'pb_date_stacked/docs'
+import * as DateTime from 'pb_date_time/docs'
+import * as DateTimeStacked from 'pb_date_time_stacked/docs'
+import * as DateYearStacked from 'pb_date_year_stacked/docs'
+import * as Dialog from 'pb_dialog/docs'
+import * as DistributionBarDocs from 'pb_distribution_bar/docs'
+import * as FileUpload from 'pb_file_upload/docs'
+import * as Filter from 'pb_filter/docs'
+import * as FixedConfirmationToast from 'pb_fixed_confirmation_toast/docs'
+import * as Flex from 'pb_flex/docs'
+import * as FormGroup from 'pb_form_group/docs'
+import * as FormPill from 'pb_form_pill/docs'
+import * as Gauge from 'pb_gauge/docs'
+import * as Hashtag from 'pb_hashtag/docs'
+import * as Highlight from 'pb_highlight/docs'
+import * as HomeAddressStreet from 'pb_home_address_street/docs'
+import * as Icon from 'pb_icon/docs'
+import * as IconCircle from 'pb_icon_circle/docs'
+import * as IconStatValue from 'pb_icon_stat_value/docs'
+import * as IconValue from 'pb_icon_value/docs'
+import * as Image from 'pb_image/docs'
+import * as LabelPill from 'pb_label_pill/docs'
+import * as LabelValue from 'pb_label_value/docs'
+import * as Layout from 'pb_layout/docs'
+import * as LegendDocs from 'pb_legend/docs'
+import * as LineGraphDocs from 'pb_line_graph/docs'
+import * as List from 'pb_list/docs'
+import * as LoadingInline from 'pb_loading_inline/docs'
+import * as Message from 'pb_message/docs'
+import * as MultipleUsers from 'pb_multiple_users/docs'
+import * as MultipleUsersStacked from 'pb_multiple_users_stacked/docs'
+import * as Nav from 'pb_nav/docs'
+import * as OnlineStatus from 'pb_online_status/docs'
+import * as Passphrase from 'pb_passphrase/docs'
+import * as PbReactPopover from 'pb_popover/docs'
+import * as Person from 'pb_person/docs'
+import * as PersonContact from 'pb_person_contact/docs'
+import * as Pill from 'pb_pill/docs'
+import * as ProgressPills from 'pb_progress_pills/docs'
+import * as ProgressSimple from 'pb_progress_simple/docs'
+import * as ProgressStep from 'pb_progress_step/docs'
+import * as Radio from 'pb_radio/docs'
+import * as RichTextEditor from 'pb_rich_text_editor/docs'
+import * as SectionSeparator from 'pb_section_separator/docs'
+import * as Select from 'pb_select/docs'
+import * as SelectableCard from 'pb_selectable_card/docs'
+import * as SelectableCardIcon from 'pb_selectable_card_icon/docs'
+import * as SelectableIcon from 'pb_selectable_icon/docs'
+import * as SelectableList from 'pb_selectable_list/docs'
+import * as Source from 'pb_source/docs'
+import * as StarRating from 'pb_star_rating/docs'
+import * as StatChange from 'pb_stat_change/docs'
+import * as StatValue from 'pb_stat_value/docs'
+import * as Table from 'pb_table/docs'
+import * as TextInput from 'pb_text_input/docs'
+import * as Textarea from 'pb_textarea/docs'
+import * as Time from 'pb_time/docs'
+import * as TimeRangeInline from 'pb_time_range_inline/docs'
+import * as TimeStacked from 'pb_time_stacked/docs'
+import * as Timeline from 'pb_timeline/docs'
+import * as Timestamp from 'pb_timestamp/docs'
+import * as Title from 'pb_title/docs'
+import * as TitleCount from 'pb_title_count/docs'
+import * as TitleDetail from 'pb_title_detail/docs'
+import * as Toggle from 'pb_toggle/docs'
+import * as Typeahead from 'pb_typeahead/docs'
+import * as User from 'pb_user/docs'
+import * as UserBadge from 'pb_user_badge/docs'
+import * as WeekdayStacked from 'pb_weekday_stacked/docs'
+
+WebpackerReact.registerComponents({
+  ...Avatar,
+  ...AvatarActionButton,
+  ...Background,
+  ...Badge,
+  ...BarGraphDocs,
+  ...Body,
+  ...BreadCrumbs,
+  ...Button,
+  ...ButtonToolbar,
+  ...Caption,
+  ...Card,
+  ...Checkbox,
+  ...CircleChart,
+  ...CircleIconButton,
+  ...Collapsible,
+  ...Contact,
+  ...Currency,
+  ...DashboardValue,
+  ...Date,
+  ...DatePicker,
+  ...DateRangeInline,
+  ...DateRangeStacked,
+  ...DateStacked,
+  ...DateTime,
+  ...DateTimeStacked,
+  ...DateYearStacked,
+  ...Dialog,
+  ...DistributionBarDocs,
+  ...FileUpload,
+  ...Filter,
+  ...FixedConfirmationToast,
+  ...Flex,
+  ...FormGroup,
+  ...FormPill,
+  ...Gauge,
+  ...Hashtag,
+  ...Highlight,
+  ...HomeAddressStreet,
+  ...Icon,
+  ...IconCircle,
+  ...IconStatValue,
+  ...IconValue,
+  ...Image,
+  ...LabelPill,
+  ...LabelValue,
+  ...Layout,
+  ...LegendDocs,
+  ...LineGraphDocs,
+  ...List,
+  ...LoadingInline,
+  ...Message,
+  ...MultipleUsers,
+  ...MultipleUsersStacked,
+  ...Nav,
+  ...OnlineStatus,
+  ...Passphrase,
+  ...PbReactPopover,
+  ...Person,
+  ...PersonContact,
+  ...Pill,
+  ...ProgressPills,
+  ...ProgressSimple,
+  ...ProgressStep,
+  ...Radio,
+  ...RichTextEditor,
+  ...SectionSeparator,
+  ...Select,
+  ...SelectableCard,
+  ...SelectableCardIcon,
+  ...SelectableIcon,
+  ...SelectableList,
+  ...Source,
+  ...StarRating,
+  ...StatChange,
+  ...StatValue,
+  ...Table,
+  ...TextInput,
+  ...Textarea,
+  ...Time,
+  ...TimeRangeInline,
+  ...TimeStacked,
+  ...Timeline,
+  ...Timestamp,
+  ...Title,
+  ...TitleCount,
+  ...TitleDetail,
+  ...Toggle,
+  ...Typeahead,
+  ...User,
+  ...UserBadge,
+  ...WeekdayStacked,
+})
+ujs.setup(
+  () => WebpackerReact.mountComponents(),
+  () => WebpackerReact.unmountComponents()
+)