playbook_ui 9.17.0.pre.decouple.website2 → 9.19.0

data/app/pb_kits/playbook/pb_message/message.rb

@@ -9,6 +9,8 @@ module Playbook
       prop :label
       prop :message
       prop :timestamp
+      prop :timestamp_object
+      prop :align_timestamp, type: Playbook::Props::Enum, values: %w[left right], default: "right"
 
       def classname
         generate_classname("pb_message_kit", avatar_class)

data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss

@@ -3,8 +3,8 @@
 @import "../tokens/border_radius";
 @import "../tokens/animation-curves";
 @import "../tokens/typography";
-@import "../tokens/titles";
 @import "../pb_body/body_mixins";
+@import "../pb_title/title_mixin";
 @import "./subtle_mixin";
 
 $selector: ".pb_nav_list";
@@ -134,7 +134,7 @@ $selector: ".pb_nav_list";
       border-bottom: 0;
     }
   }
-
+  
 }
 
 //Image Wrapper

data/app/pb_kits/playbook/pb_passphrase/_passphrase.jsx

@@ -74,7 +74,10 @@ const Passphrase = (props: PassphraseProps) => {
   }
 
   const [showPassphrase, setShowPassphrase] = useState(false)
-  const toggleShowPassphrase = () => setShowPassphrase(!showPassphrase)
+  const toggleShowPassphrase = (e) => {
+    e.preventDefault()
+    setShowPassphrase(!showPassphrase)
+  }
 
   const classes = classnames(buildCss('pb_passphrase'), globalProps(props), className)
 

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.jsx

@@ -2,18 +2,11 @@
 
 import React, { useEffect, useRef } from 'react'
 import classnames from 'classnames'
-import useFocus from './useFocus'
-import { globalProps } from '../utilities/globalProps'
+import useFocus from './useFocus.js'
+import Trix from 'trix'
+import { globalProps } from '../utilities/globalProps.js'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
 
-try {
-  const Trix = require('trix')
-  Trix.config.textAttributes.inlineCode = {
-    tagName: 'code',
-    inheritable: true,
-  }
-} catch (_e) { /* do nothing */ }
-
 type RichTextEditorProps = {
   aria?: object,
   toolbarBottom?: Boolean,
@@ -53,6 +46,11 @@ const RichTextEditor = (props: RichTextEditorProps) => {
   const dataProps = buildDataProps(data)
 
   useEffect(() => {
+    Trix.config.textAttributes.inlineCode = {
+      tagName: 'code',
+      inheritable: true,
+    }
+
     trixRef.current.addEventListener('trix-initialize', (event) => {
       const element = event.target
 

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -1,6 +1,6 @@
 @import "../pb_body/body_mixins";
 @import "../pb_textarea/textarea_mixin";
-@import "../tokens/titles";
+@import "../pb_title/title_mixin";
 @import "../tokens/colors";
 
 [class^=pb_select] {

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -1,5 +1,5 @@
 @import "../pb_textarea/textarea_mixin";
-@import "../tokens/titles";
+@import "../pb_title/title_mixin";
 @import "../tokens/colors";
 
 

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

@@ -1,11 +1,11 @@
 @import "../pb_body/body_mixins";
 @import "./textarea_mixin";
+@import "../pb_title/title_mixin";
 @import "../tokens/spacing";
-@import "../tokens/titles";
 
 [class^=pb_textarea_kit] {
   margin-bottom: $space_sm;
-
+  
   [class^=pb_caption_kit] {
     margin-bottom: $space_xs;
     display: block;
@@ -28,7 +28,7 @@
   .pb_text_area_kit:hover {
     background-color: rgba($focus_input_light,$opacity_5);
   }
-
+  
   &.resize_both > textarea {
     resize: both;
     overflow: auto;

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -1,4 +1,4 @@
-@import "../tokens/titles";
+@import "title_mixin";
 @import "../tokens/colors";
 
 [class^=pb_title_kit]{

data/app/pb_kits/playbook/pb_title/_title_mixin.scss

@@ -1 +1,40 @@
-@import "../tokens/titles";
+@import "../tokens/colors";
+@import "../tokens/typography";
+@import "../tokens/line_height";
+
+@mixin pb_title(
+    $fontSize: $heading_1,
+    $fontWeight: $lighter,
+    $lineHeight: $lh_tighter
+){
+  font-size: $fontSize;
+  letter-spacing: $lspace_tight;
+  font-weight: $fontWeight;
+  color: $text_lt_default;
+  margin: 0;
+  line-height: $lineHeight;
+  font-family: $font_family_base;
+}
+
+@mixin pb_title_1 {
+  @include pb_title($heading_1);
+  letter-spacing: -0.03em;
+}
+
+@mixin pb_title_2 {
+  @include pb_title($heading_2, $lighter, 0.96);
+}
+
+@mixin pb_title_3 {
+  @include pb_title($heading_3);
+}
+
+@mixin pb_title_4 {
+  @include pb_title($heading_4, $bolder);
+}
+
+@mixin pb_title_dark {
+  color: $text_dk_default;
+}
+
+

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

@@ -4,7 +4,8 @@ import React from 'react'
 import Select from 'react-select'
 import AsyncSelect from 'react-select/async'
 import CreateableSelect from 'react-select/creatable'
-import { get, isString, uniqueId } from 'lodash'
+import AsyncCreateableSelect from 'react-select/async-creatable'
+import { get } from 'lodash'
 import { globalProps } from '../utilities/globalProps.js'
 import classnames from 'classnames'
 
@@ -26,24 +27,23 @@ import { noop } from '../utilities/props'
  * @prop {string} label - the text for the optional typeahead input label
  */
 
-type TypeaheadProps = {
-  id?: string,
+type Props = {
   async?: boolean,
   createable?: boolean,
   dark?: boolean,
   label?: string,
-  loadOptions?: string,
-  getOptionLabel?: string | (() => any),
-  getOptionValue?: string | (() => any),
+  loadOptions?: noop | string,
+  getOptionLabel?: () => any,
+  getOptionValue?: () => any,
   name?: string,
 }
 
 /**
  * @constant {React.ReactComponent} Typeahead
- * @param {TypeaheadProps} props - props as described at https://react-select.com/props
+ * @param {Props} props - props as described at https://react-select.com/props
  */
 
-const Typeahead = ({ loadOptions = noop, getOptionLabel, id, getOptionValue, createable, async, ...props }: TypeaheadProps) => {
+const Typeahead = (props: Props) => {
   const selectProps = {
     cacheOptions: true,
     components: {
@@ -57,11 +57,8 @@ const Typeahead = ({ loadOptions = noop, getOptionLabel, id, getOptionValue, cre
       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: id || uniqueId(),
+    id: 'react-select-input',
     inline: false,
     isClearable: true,
     isSearchable: true,
@@ -72,9 +69,14 @@ const Typeahead = ({ loadOptions = noop, getOptionLabel, id, getOptionValue, cre
     ...props,
   }
 
-  const Tag = createable ? CreateableSelect : (async ? AsyncSelect : Select)
+  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)
 
-  const handleOnChange = (_data, { action, option, removedValue }) => {
+  let Tag = props.async ? AsyncSelect : Select
+  if (props.createable) Tag = props.async ? AsyncCreateableSelect : CreateableSelect
+
+  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/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/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/react_rails_kits.js

@@ -0,0 +1,13 @@
+// React-Rendered Rails Kit Exports =====
+export { default as BarGraph } from './pb_bar_graph/_bar_graph.jsx'
+export { default as DistributionBar } from './pb_distribution_bar/_distribution_bar.jsx'
+export { default as Legend } from './pb_legend/_legend.jsx'
+export { default as LineGraph } from './pb_line_graph/_line_graph.jsx'
+export { default as Passphrase } from './pb_passphrase/_passphrase.jsx'
+export { default as Typeahead } from './pb_typeahead/_typeahead.jsx'
+export { default as RichTextEditor } from './pb_rich_text_editor/_rich_text_editor.jsx'
+export { default as Dialog } from './pb_dialog/_dialog.jsx'
+export { default as DialogHeader } from './pb_dialog/child_kits/_dialog_header.jsx'
+export { default as DialogBody } from './pb_dialog/child_kits/_dialog_body.jsx'
+export { default as DialogFooter } from './pb_dialog/child_kits/_dialog_footer.jsx'
+export { KitSearch, SnippetToggle, DarkModeToggle } from './docs_components'

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -243,10 +243,6 @@ $category_colors: (
 
 $transparent: transparent;
 
-@function tint($color, $percentage) {
-  @return mix($white, $color, $percentage);
-}
-
 @mixin gradient($start: $gradient_start, $end: $gradient_end) {
   background: $start;
   background: -moz-linear-gradient(-45deg,  $start 0%, $end 100%);

data/app/pb_kits/playbook/utilities/_colors.scss

@@ -1,3 +1,7 @@
+@function tint($color, $percentage) {
+  @return mix($white, $color, $percentage);
+}
+
 @function shade($color, $percentage) {
   @return mix($charcoal, $color, $percentage);
 }

data/app/pb_kits/playbook/utilities/accessibility.js

@@ -0,0 +1,22 @@
+/* eslint-disable no-console */
+
+import axe from 'axe-core'
+
+export const runAxe = function(include = '.pb--kit-example', ignore = ['.pb--kit-example :first-child']) {
+  axe
+    .run({
+      include: [include],
+      exclude: [ignore],
+    })
+    .then((results) => {
+      if (results.violations.length) {
+        console.warn('🚨 [axe-core] Accessibility issues found. See below for a list:')
+        console.dir(results.violations)
+      } else {
+        console.log('[axe-core] Yay! 🎉 No accessibility violations were found!')
+      }
+    })
+    .catch((err) => {
+      console.error('Something bad happened:', err.message)
+    })
+}

data/app/pb_kits/playbook/{playbook-rails.js → vendor.js}

@@ -35,5 +35,9 @@ PbTextarea.start()
 
 import 'flatpickr'
 
+import 'trix'
+
 // React-Rendered Rails Kits =====
-import './playbook-rails-react-bindings'
+import WebpackerReact from 'webpacker-react'
+import * as ReactRailsPBKits from './react_rails_kits.js'
+WebpackerReact.setup({ ...ReactRailsPBKits })

data/lib/playbook.rb

@@ -1,7 +1,13 @@
 # frozen_string_literal: true
 
+require "sassc-rails"
+require "slim-rails"
+require "webpacker"
+require "webpacker/react"
+require "view_component/engine"
+
 require "playbook/version"
-require "playbook/engine"
+
 require "playbook/props"
 require "playbook/forms"
 require "playbook/pb_forms_helper"
@@ -10,6 +16,7 @@ require "playbook/pb_doc_helper"
 require "playbook/kit_base"
 require "playbook/kit_resolver"
 require "playbook/markdown"
+require "playbook/engine" if defined?(Rails)
 
 module Playbook
   ROOT_PATH = Pathname.new(File.join(__dir__, ".."))
@@ -19,6 +26,13 @@ module Playbook
 
 module_function
 
+  def webpacker
+    @webpacker ||= ::Webpacker::Instance.new(
+      root_path: ROOT_PATH,
+      config_path: ROOT_PATH.join("config/webpacker.yml")
+    )
+  end
+
   def kit_path(kit, *args)
     Playbook::Engine.root.join("app/pb_kits/playbook/pb_#{kit}", *args)
   end

data/lib/playbook/engine.rb

@@ -1,8 +1,7 @@
 # frozen_string_literal: true
 
-require "action_view/railtie"
-require "view_component/engine"
-require "webpacker/react"
+require "sassc-rails"
+require "slim-rails"
 
 module Playbook
   class Engine < ::Rails::Engine
@@ -14,15 +13,26 @@ module Playbook
 
     config.view_component.render_monkey_patch_enabled = false
 
-    if config.respond_to?(:assets)
-      config.assets.paths ||= []
-      config.assets.paths << Playbook::Engine.root.join("fonts")
-      config.assets.paths << Playbook::Engine.root.join("app/pb_kits/playbook/pb_*")
-    end
+    config.assets.paths ||= []
+    config.assets.paths << Playbook::Engine.root.join("fonts")
+    config.assets.paths << Playbook::Engine.root.join("app/pb_kits/playbook/pb_*")
+
+    config.sass.load_paths ||= []
+    config.sass.load_paths << Playbook::Engine.root.join("app/pb_kits/playbook")
+
+    initializer "webpacker.proxy" do |app|
+      insert_middleware = begin
+                          Playbook.webpacker.config.dev_server.present?
+                          rescue
+                            nil
+                        end
+      next unless insert_middleware
 
-    if config.respond_to?(:sass)
-      config.sass.load_paths ||= []
-      config.sass.load_paths << Playbook::Engine.root.join("app/pb_kits/playbook")
+      app.middleware.insert_before(
+        0, Webpacker::DevServerProxy,
+        ssl_verify_none: true,
+        webpacker: Playbook.webpacker
+      )
     end
   end
 end