playbook_ui 9.19.0 → 10.0.0.pre.alphafonts

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

@@ -5,7 +5,7 @@ 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 } from 'lodash'
+import { get, isString, uniqueId } from 'lodash'
 import { globalProps } from '../utilities/globalProps.js'
 import classnames from 'classnames'
 
@@ -27,23 +27,24 @@ import { noop } from '../utilities/props'
  * @prop {string} label - the text for the optional typeahead input label
  */
 
-type Props = {
+type TypeaheadProps = {
+  id?: string,
   async?: boolean,
   createable?: boolean,
   dark?: boolean,
   label?: string,
-  loadOptions?: noop | string,
-  getOptionLabel?: () => any,
-  getOptionValue?: () => any,
+  loadOptions?: string,
+  getOptionLabel?: string | (() => any),
+  getOptionValue?: string | (() => any),
   name?: string,
 }
 
 /**
  * @constant {React.ReactComponent} Typeahead
- * @param {Props} props - props as described at https://react-select.com/props
+ * @param {TypeaheadProps} props - props as described at https://react-select.com/props
  */
 
-const Typeahead = (props: Props) => {
+const Typeahead = ({ loadOptions = noop, getOptionLabel, id, getOptionValue, createable, async, ...props }: TypeaheadProps) => {
   const selectProps = {
     cacheOptions: true,
     components: {
@@ -57,8 +58,11 @@ const Typeahead = (props: Props) => {
       Placeholder,
       ValueContainer,
     },
+    loadOptions: isString(loadOptions) ? get(window, loadOptions) : loadOptions,
+    getOptionLabel: isString(getOptionLabel) ? get(window, getOptionLabel) : getOptionLabel,
+    getOptionValue: isString(getOptionValue) ? get(window, getOptionValue) : getOptionValue,
     defaultOptions: true,
-    id: 'react-select-input',
+    id: id || uniqueId(),
     inline: false,
     isClearable: true,
     isSearchable: true,
@@ -69,14 +73,13 @@ const Typeahead = (props: Props) => {
     ...props,
   }
 
-  if (typeof(props.loadOptions) === 'string') selectProps.loadOptions = get(window, props.loadOptions)
-  if (typeof(props.getOptionLabel) === 'string') selectProps.getOptionLabel = get(window, props.getOptionLabel)
-  if (typeof(props.getOptionValue) === 'string') selectProps.getOptionValue = get(window, props.getOptionValue)
-
-  let Tag = props.async ? AsyncSelect : Select
-  if (props.createable) Tag = props.async ? AsyncCreateableSelect : CreateableSelect
+  const Tag = (
+    createable
+      ? (async ? AsyncCreateableSelect : CreateableSelect)
+      : (async ? AsyncSelect : Select)
+  )
 
-  const handleOnChange = (data, { action, option, removedValue }) => {
+  const handleOnChange = (_data, { action, option, removedValue }) => {
     if (action === 'select-option') {
       if (selectProps.onMultiValueClick) selectProps.onMultiValueClick(option)
       const multiValueClearEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-option-select`, { detail: 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_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_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()
+)