RubyGems - playbook_ui - Versions diffs - 7.0.0.pre.alpha9 → 7.0.0.pre.alpha10 - Mend

playbook_ui 7.0.0.pre.alpha9 → 7.0.0.pre.alpha10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (126) hide show

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

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

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

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

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

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

@@ -1,4 +1,10 @@
 examples:
   rails:
-  - typeahead_default: Default
-  - typeahead_with_context_dark: With Context
+    - typeahead_default: Default
+    - typeahead_with_context_dark: With Context
+  react:
+    - typeahead_default: Default
+    - typeahead_with_pills: With Pills
+    - typeahead_with_pills_async: With Pills (Async Data)
+    - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)

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

@@ -0,0 +1,4 @@
+export { default as TypeaheadDefault } from './_typeahead_default'
+export { default as TypeaheadWithPills } from './_typeahead_with_pills'
+export { default as TypeaheadWithPillsAsync } from './_typeahead_with_pills_async'
+export { default as TypeaheadWithPillsAsyncUsers } from './_typeahead_with_pills_async_users'

data/app/pb_kits/playbook/tokens/_typography.scss CHANGED

@@ -38,10 +38,10 @@ $heading_4: $font_base;
-/* Letter Spacing */
-$lspace_tightest:         _.1em;
-$lspace_tighter:          _.07em;
-$lspace_tight:            _.03em;
+// Letter Spacing
+$lspace_tightest:         -.1em;
+$lspace_tighter:          -.07em;
+$lspace_tight:            -.03em;
 $lspace_normal:           0;
 $lspace_loose:            .03em;
 $lspace_looser:           .07em;

data/app/pb_kits/playbook/vendor.js CHANGED

@@ -5,6 +5,10 @@ window.pbChart = pbChart
 // Forms
 import './pb_form/pb_form_validation'
+// Date Picker
+import datePickerHelper from './pb_date_picker/date_picker_helper.js'
+window.datePickerHelper = datePickerHelper
 // Lazy image loading
 import 'lazysizes'
@@ -20,6 +24,8 @@ PbTypeahead.start()
 import PbTable from './pb_table'
 PbTable.start()
+import 'flatpickr'
 // React-Rendered Rails Kits =====
 import WebpackerReact from 'webpacker-react'
 import * as ReactRailsPBKits from './react_rails_kits.js'

data/lib/playbook/version.rb CHANGED

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 module Playbook
-  VERSION = "7.0.0.pre.alpha9"
+  VERSION = "7.0.0.pre.alpha10"
 end

metadata CHANGED

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 7.0.0.pre.alpha9
+  version: 7.0.0.pre.alpha10
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-08-31 00:00:00.000000000 Z
+date: 2020-09-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -683,18 +683,60 @@ files:
 - app/pb_kits/playbook/pb_date/_date.jsx
 - app/pb_kits/playbook/pb_date/_date.scss
 - app/pb_kits/playbook/pb_date/date.rb
-- app/pb_kits/playbook/pb_date/docs/_date_alignment.html.erb
-- app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx
 - app/pb_kits/playbook/pb_date/docs/_date_default.html.erb
-- app/pb_kits/playbook/pb_date/docs/_date_default_react.jsx
-- app/pb_kits/playbook/pb_date/docs/_date_default_react.md
+- app/pb_kits/playbook/pb_date/docs/_date_default.jsx
 - app/pb_kits/playbook/pb_date/docs/_date_timezone.html.erb
 - app/pb_kits/playbook/pb_date/docs/_date_timezone.md
-- app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb
-- app/pb_kits/playbook/pb_date/docs/_date_variants.jsx
 - app/pb_kits/playbook/pb_date/docs/_description.md
 - app/pb_kits/playbook/pb_date/docs/example.yml
 - app/pb_kits/playbook/pb_date/docs/index.js
+- app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb
+- app/pb_kits/playbook/pb_date_picker/_date_picker.jsx
+- app/pb_kits/playbook/pb_date_picker/_date_picker.scss
+- app/pb_kits/playbook/pb_date_picker/date_picker.rb
+- app/pb_kits/playbook/pb_date_picker/date_picker_helper.js
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.md
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.md
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hide_icon.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hide_icon.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.md
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.md
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.md
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.md
+- app/pb_kits/playbook/pb_date_picker/docs/_description.md
+- app/pb_kits/playbook/pb_date_picker/docs/example.yml
+- app/pb_kits/playbook/pb_date_picker/docs/index.js
+- app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss
+- app/pb_kits/playbook/pb_date_picker/sass_partials/_day_styles.scss
+- app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss
+- app/pb_kits/playbook/pb_date_picker/sass_partials/_header_styles.scss
+- app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss
 - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.html.erb
 - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx
 - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss
@@ -865,6 +907,7 @@ files:
 - app/pb_kits/playbook/pb_form/form_builder/action_area.rb
 - app/pb_kits/playbook/pb_form/form_builder/checkbox_field.rb
 - app/pb_kits/playbook/pb_form/form_builder/collection_select_field.rb
+- app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb
 - app/pb_kits/playbook/pb_form/form_builder/form_field_builder.rb
 - app/pb_kits/playbook/pb_form/form_builder/form_with_form_builder.rb
 - app/pb_kits/playbook/pb_form/form_builder/select_field.rb
@@ -1625,13 +1668,18 @@ files:
 - app/pb_kits/playbook/pb_time/_time.scss
 - app/pb_kits/playbook/pb_time/docs/_description.md
 - app/pb_kits/playbook/pb_time/docs/_footer.md
+- app/pb_kits/playbook/pb_time/docs/_time_align.html.erb
 - app/pb_kits/playbook/pb_time/docs/_time_align.jsx
+- app/pb_kits/playbook/pb_time/docs/_time_dark.html.erb
 - app/pb_kits/playbook/pb_time/docs/_time_dark.jsx
 - app/pb_kits/playbook/pb_time/docs/_time_default.html.erb
 - app/pb_kits/playbook/pb_time/docs/_time_default.jsx
 - app/pb_kits/playbook/pb_time/docs/_time_default.md
+- app/pb_kits/playbook/pb_time/docs/_time_sizes.html.erb
+- app/pb_kits/playbook/pb_time/docs/_time_sizes.jsx
 - app/pb_kits/playbook/pb_time/docs/_time_timestamp.html.erb
 - app/pb_kits/playbook/pb_time/docs/_time_timestamp.jsx
+- app/pb_kits/playbook/pb_time/docs/_time_timezone.html.erb
 - app/pb_kits/playbook/pb_time/docs/_time_timezone.jsx
 - app/pb_kits/playbook/pb_time/docs/_time_timezone.md
 - app/pb_kits/playbook/pb_time/docs/example.yml
@@ -1758,12 +1806,27 @@ files:
 - app/pb_kits/playbook/pb_tooltip/index.js
 - app/pb_kits/playbook/pb_tooltip/tooltip.rb
 - app/pb_kits/playbook/pb_typeahead/_typeahead.html.erb
+- app/pb_kits/playbook/pb_typeahead/_typeahead.jsx
 - app/pb_kits/playbook/pb_typeahead/_typeahead.scss
+- app/pb_kits/playbook/pb_typeahead/components/Control.jsx
+- app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.jsx
+- app/pb_kits/playbook/pb_typeahead/components/MenuList.jsx
+- app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx
+- app/pb_kits/playbook/pb_typeahead/components/Option.jsx
+- app/pb_kits/playbook/pb_typeahead/components/Placeholder.jsx
+- app/pb_kits/playbook/pb_typeahead/components/ValueContainer.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_description.md
 - app/pb_kits/playbook/pb_typeahead/docs/_footer.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context_dark.html.erb
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_summary.jsx
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_summary.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/example.yml
+- app/pb_kits/playbook/pb_typeahead/docs/index.js
 - app/pb_kits/playbook/pb_typeahead/index.js
 - app/pb_kits/playbook/pb_typeahead/typeahead.rb
 - app/pb_kits/playbook/pb_user/_user.html.erb