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

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