playbook_ui 12.17.1 → 12.18.0.pre.alpha.PLAY785typeaheadts607

data/app/pb_kits/playbook/pb_typeahead/{_typeahead.jsx → _typeahead.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import Select from 'react-select'
 import AsyncSelect from 'react-select/async'
@@ -19,6 +17,7 @@ import Placeholder from './components/Placeholder'
 import ValueContainer from './components/ValueContainer'
 
 import { noop, buildDataProps } from '../utilities/props'
+import { Noop } from '../types'
 
 /**
  * @typedef {object} Props
@@ -33,16 +32,28 @@ type TypeaheadProps = {
   components?: object,
   createable?: boolean,
   dark?: boolean,
-  data?: object,
+  data?: { [key: string]: string },
   error?: string,
   id?: string,
   label?: string,
-  loadOptions?: string,
+  loadOptions?: string | Noop,
   getOptionLabel?: string | (() => any),
   getOptionValue?: string | (() => any),
   name?: string,
 }
 
+export type SelectValueType = {
+  label: string,
+  value: string,
+  imageUrl?: string,
+}
+
+type TagOnChangeValues = {
+  action?: string,
+  option?: SelectValueType,
+  removedValue?: string,
+}
+
 /**
  * @constant {React.ReactComponent} Typeahead
  * @param {TypeaheadProps} props - props as described at https://react-select.com/props
@@ -67,7 +78,6 @@ const Typeahead = ({
       Control,
       ClearIndicator,
       IndicatorsContainer,
-      IndicatorSeparator: null,
       MenuList,
       MultiValue,
       Option,
@@ -85,8 +95,8 @@ const Typeahead = ({
     isSearchable: true,
     name,
     multiKit: '',
-    onCreateOption: null,
     plusIcon: false,
+    onMultiValueClick: (_option: SelectValueType) => { },
     ...props,
   }
 
@@ -96,7 +106,7 @@ const Typeahead = ({
       : (async ? AsyncSelect : Select)
   )
 
-  const handleOnChange = (_data, { action, option, removedValue }) => {
+  const handleOnChange = (_data: SelectValueType, { action, option, removedValue }: TagOnChangeValues) => {
     if (action === 'select-option') {
       if (selectProps.onMultiValueClick) selectProps.onMultiValueClick(option)
       const multiValueClearEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-option-select`, { detail: option ? option : _data })
@@ -123,13 +133,13 @@ const Typeahead = ({
 
   return (
     <div {...dataProps}
-        className={classnames(classes, inlineClass)}
+      className={classnames(classes, inlineClass)}
     >
       <Tag
-          classNamePrefix="typeahead-kit-select"
-          error={error}
-          onChange={handleOnChange}
-          {...selectProps}
+        classNamePrefix="typeahead-kit-select"
+        error={error}
+        onChange={handleOnChange}
+        {...selectProps}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_typeahead/components/{ClearIndicator.jsx → ClearIndicator.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React, { useEffect } from 'react'
 import { components } from 'react-select'
 
@@ -11,8 +9,8 @@ const ClearContainer = (props: any) => {
 
   return (
     <components.ClearIndicator
-        className="clear_indicator"
-        {...props}
+      className="clear_indicator"
+      {...props}
     />
   )
 }

data/app/pb_kits/playbook/pb_typeahead/components/{Control.jsx → Control.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import { components } from 'react-select'
 
@@ -13,14 +11,14 @@ type Props = {
 const TypeaheadControl = (props: Props) => (
   <div className="pb_typeahead_wrapper">
     <TextInput
-        dark={props.selectProps.dark}
-        error={props.selectProps.error}
-        label={props.selectProps.label}
+      dark={props.selectProps.dark}
+      error={props.selectProps.error}
+      label={props.selectProps.label}
     >
       <Flex>
         <components.Control
-            className="text_input"
-            {...props}
+          className="text_input"
+          {...props}
         />
       </Flex>
     </TextInput>

data/app/pb_kits/playbook/pb_typeahead/components/{IndicatorsContainer.jsx → IndicatorsContainer.tsx}

@@ -1,12 +1,10 @@
-/* @flow */
-
 import React from 'react'
 import { components } from 'react-select'
 
 const IndicatorsContainer = (props: any) => (
   <components.IndicatorsContainer
-      className="text_input_indicators"
-      {...props}
+    className="text_input_indicators"
+    {...props}
   />
 )
 

data/app/pb_kits/playbook/pb_typeahead/components/{MenuList.jsx → MenuList.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import { components } from 'react-select'
 

data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import { components } from 'react-select'
+
+import Badge from '../../pb_badge/_badge'
+import FormPill from '../../pb_form_pill/_form_pill'
+import { SelectValueType } from '../_typeahead'
+
+type Props = {
+  data: SelectValueType,
+  multiValueTemplate: any,
+  removeProps: any,
+  selectProps: any,
+}
+
+const MultiValue = (props: Props) => {
+  const { removeProps } = props
+  const { imageUrl, label } = props.data
+  const { multiKit } = props.selectProps
+
+  const formPillProps = {
+    marginRight: 'xs',
+    name: label,
+    avatarUrl: '',
+  }
+
+  if (typeof imageUrl === 'string') formPillProps.avatarUrl = imageUrl
+
+  return (
+    <components.MultiValueContainer
+      className="text_input_multivalue_container"
+      {...props}
+    >
+      {multiKit === 'badge' &&
+        <Badge
+          closeProps={removeProps}
+          removeIcon
+          text={label}
+          variant="primary"
+        />
+      }
+
+      {multiKit !== 'badge' && imageUrl &&
+        <FormPill
+          avatarUrl={imageUrl}
+          closeProps={removeProps}
+          marginRight="xs"
+          name={label}
+          size={multiKit === 'smallPill' ? 'small' : ''}
+          text=''
+        />
+      }
+
+      {multiKit !== 'badge' && !imageUrl &&
+        <FormPill
+          closeProps={removeProps}
+          marginRight="xs"
+          name=''
+          size={multiKit === 'smallPill' ? 'small' : ''}
+          text={label}
+        />
+      }
+    </components.MultiValueContainer>
+  )
+}
+
+export default MultiValue

data/app/pb_kits/playbook/pb_typeahead/components/Option.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { components } from 'react-select'
+
+import User from '../../pb_user/_user'
+
+const Option = (props: any) => {
+  const {
+    imageUrl,
+  } = props.data
+  const { valueComponent } = props.selectProps
+
+  return (
+    <components.Option {...props}>
+      <>
+        {!valueComponent && imageUrl &&
+          <User
+            align="left"
+            avatarUrl={imageUrl}
+            dark={props.selectProps.dark}
+            name={props.label}
+            orientation="horizontal"
+          />
+        }
+
+        {valueComponent &&
+          valueComponent(props.data)
+        }
+
+        {!valueComponent && !imageUrl &&
+          props.label
+        }
+      </>
+    </components.Option>
+  )
+}
+
+export default Option

data/app/pb_kits/playbook/pb_typeahead/components/{Placeholder.jsx → Placeholder.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import { components } from 'react-select'
 
@@ -9,18 +7,18 @@ import Icon from '../../pb_icon/_icon'
 const Placeholder = (props: any) => (
   <>
     <Flex
-        align="center"
-        className="placeholder"
+      align="center"
+      className="placeholder"
     >
       <components.IndicatorsContainer
-          {...props}
+        {...props}
       />
-      <If condition={props.selectProps.plusIcon}>
+      {props.selectProps.plusIcon &&
         <Icon
-            className="typeahead-plus-icon"
-            icon="plus"
+          className="typeahead-plus-icon"
+          icon="plus"
         />
-      </If>
+      }
     </Flex>
   </>
 )

data/app/pb_kits/playbook/pb_typeahead/components/{ValueContainer.jsx → ValueContainer.tsx}

@@ -1,12 +1,10 @@
-/* @flow */
-
 import React from 'react'
 import { components } from 'react-select'
 
-const ValueContainer = (props: Props) => (
+const ValueContainer = (props: any) => (
   <components.ValueContainer
-      className="text_input_value_container"
-      {...props}
+    className="text_input_value_container"
+    {...props}
   />
 )
 

data/app/pb_kits/playbook/pb_typeahead/{index.js → index.ts}

@@ -2,18 +2,26 @@ import PbEnhancedElement from '../pb_enhanced_element'
 import { debounce } from 'lodash'
 
 export default class PbTypeahead extends PbEnhancedElement {
+  _searchInput: HTMLInputElement
+  _resultsElement: HTMLElement
+  _debouncedSearch: Function
+  _resultsLoadingIndicator: HTMLElement
+  _resultOptionTemplate: HTMLElement
+  _resultsOptionCache: Map<string, Array<DocumentFragment>>
+  _searchContext: string
+
   static get selector() {
     return '[data-pb-typeahead-kit]'
   }
 
   connect() {
-    this.element.addEventListener('keydown', (event) => this.handleKeydown(event))
+    this.element.addEventListener('keydown', (event: KeyboardEvent) => this.handleKeydown(event))
     this.searchInput.addEventListener('focus', () => this.debouncedSearch())
     this.searchInput.addEventListener('input', () => this.debouncedSearch())
-    this.resultsElement.addEventListener('click', (event) => this.optionSelected(event))
+    this.resultsElement.addEventListener('click', (event: MouseEvent) => this.optionSelected(event))
   }
 
-  handleKeydown(event) {
+  handleKeydown(event: KeyboardEvent) {
     if (event.key === 'ArrowUp') {
       event.preventDefault()
       this.focusPreviousOption()
@@ -24,7 +32,7 @@ export default class PbTypeahead extends PbEnhancedElement {
   }
 
   search() {
-    if (this.searchTerm.length < this.searchTermMinimumLength) return this.clearResults()
+    if (this.searchTerm.length < parseInt(this.searchTermMinimumLength)) return this.clearResults()
 
     this.toggleResultsLoadingIndicator(true)
     this.showResults()
@@ -34,17 +42,17 @@ export default class PbTypeahead extends PbEnhancedElement {
     const search = {
       searchingFor: searchTerm,
       searchingContext: searchContext,
-      setResults: (results) => {
+      setResults: (results: Array<DocumentFragment>) => {
         this.resultsCacheUpdate(searchTerm, searchContext, results)
       },
     }
     this.element.dispatchEvent(new CustomEvent('pb-typeahead-kit-search', { bubbles: true, detail: search }))
   }
 
-  resultsCacheUpdate(searchTerm, searchContext, results) {
+  resultsCacheUpdate(searchTerm: string, searchContext: string, results: Array<DocumentFragment>) {
     const searchTermAndContext = this.cacheKeyFor(searchTerm, searchContext)
     if (this.resultsOptionCache.has(searchTermAndContext)) this.resultsOptionCache.delete(searchTermAndContext)
-    if (this.resultsOptionCache.size > 32) this.resultsOptionCache.delete(this.resultsOptionCache.keys[0])
+    if (this.resultsOptionCache.size > 32) this.resultsOptionCache.delete(this.resultsOptionCache.keys().next().value)
 
     this.resultsOptionCache.set(searchTermAndContext, results)
     this.showResults()
@@ -57,7 +65,7 @@ export default class PbTypeahead extends PbEnhancedElement {
   get debouncedSearch() {
     return this._debouncedSearch = (
       this._debouncedSearch ||
-        debounce(this.search, this.searchDebounceTimeout).bind(this)
+      debounce(this.search, parseInt(this.searchDebounceTimeout)).bind(this)
     )
   }
 
@@ -70,12 +78,12 @@ export default class PbTypeahead extends PbEnhancedElement {
       this.resultsElement.appendChild(this.newResultOption(result.cloneNode(true)))
     }
     for (const result of this.resultsElement.querySelectorAll('[data-result-option-item]')) {
-      result.addEventListener('mousedown', (event) => this.optionSelected(event))
+      result.addEventListener('mousedown', (event: MouseEvent) => this.optionSelected(event))
     }
   }
 
-  optionSelected(event) {
-    const resultOption = event.target.closest('[data-result-option-item]')
+  optionSelected(event: MouseEvent) {
+    const resultOption = (event.target as Element).closest('[data-result-option-item]')
     if (!resultOption) return
 
     this.resultsCacheClear()
@@ -89,8 +97,8 @@ export default class PbTypeahead extends PbEnhancedElement {
     this.resultsElement.innerHTML = ''
   }
 
-  newResultOption(content) {
-    const resultOption = this.resultOptionTemplate.content.cloneNode(true)
+  newResultOption(content: DocumentFragment) {
+    const resultOption = (this.resultOptionTemplate as HTMLTemplateElement).content.cloneNode(true) as Element
     resultOption.querySelector('slot[name="content"]').replaceWith(content)
     return resultOption
   }
@@ -100,9 +108,9 @@ export default class PbTypeahead extends PbEnhancedElement {
     const previousIndex = currentIndex - 1
     const previousOptionItem = (
       this.resultOptionItems[previousIndex] ||
-        this.resultOptionItems[this.resultOptionItems.length - 1]
-    )
-    previousOptionItem.focus()
+      this.resultOptionItems[this.resultOptionItems.length - 1]
+    );
+    (previousOptionItem as HTMLElement).focus()
   }
 
   focusNextOption() {
@@ -110,9 +118,9 @@ export default class PbTypeahead extends PbEnhancedElement {
     const nextIndex = currentIndex + 1
     const nextOptionItem = (
       this.resultOptionItems[nextIndex] ||
-        this.resultOptionItems[0]
-    )
-    nextOptionItem.focus()
+      this.resultOptionItems[0]
+    );
+    (nextOptionItem as HTMLElement).focus()
   }
 
   get resultOptionItems() {
@@ -134,11 +142,11 @@ export default class PbTypeahead extends PbEnhancedElement {
   get searchContext() {
     if (this._searchContext) return this._searchContext
 
-    const selector = this.element.dataset.searchContextValueSelector
-    if (selector) return (
+    const selector = (this.element as HTMLElement).dataset.searchContextValueSelector
+    if (selector) return ((
       this.element.parentNode.querySelector(selector) ||
-        this.element.closest(selector)
-    ).value
+      this.element.closest(selector)
+    ) as HTMLInputElement).value
 
     return null
   }
@@ -151,7 +159,7 @@ export default class PbTypeahead extends PbEnhancedElement {
     return this.cacheKeyFor(this.searchTerm, this.searchContext)
   }
 
-  cacheKeyFor(searchTerm, searchContext) {
+  cacheKeyFor(searchTerm: string, searchContext: string) {
     return [searchTerm, JSON.stringify(searchContext)].join()
   }
 
@@ -160,11 +168,11 @@ export default class PbTypeahead extends PbEnhancedElement {
   }
 
   get searchTermMinimumLength() {
-    return this.element.dataset.pbTypeaheadKitSearchTermMinimumLength
+    return (this.element as HTMLElement).dataset.pbTypeaheadKitSearchTermMinimumLength
   }
 
   get searchDebounceTimeout() {
-    return this.element.dataset.pbTypeaheadKitSearchDebounceTimeout
+    return (this.element as HTMLElement).dataset.pbTypeaheadKitSearchDebounceTimeout
   }
 
   get resultsElement() {
@@ -192,9 +200,9 @@ export default class PbTypeahead extends PbEnhancedElement {
     )
   }
 
-  toggleResultsLoadingIndicator(visible) {
-    var visibilityProperty = 0
-    if (visible) visibilityProperty = 1
+  toggleResultsLoadingIndicator(visible: boolean) {
+    var visibilityProperty = '0'
+    if (visible) visibilityProperty = '1'
     this.resultsLoadingIndicator.style.opacity = visibilityProperty
   }
 }

data/app/pb_kits/playbook/pb_typeahead/types.d.ts

@@ -0,0 +1,2 @@
+declare module 'react-select'
+declare module 'react-select/*'

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

@@ -18,7 +18,7 @@ type UserProps = {
   data?: {[key: string]: string},
   id?: string,
   name?: string,
-  orientation?: "horiztonal" | "vertical",
+  orientation?: "horizontal" | "vertical",
   size?: "sm" | "md" | "lg",
   subtitle?: string | Array<Node> | Node,
   territory?: string,
@@ -49,7 +49,7 @@ const User = (props: UserProps) => {
   const classes = classnames(
     buildCss('pb_user_kit', align, orientation, size),
     globalProps(props),
-    className,
+    className
   )
 
   const avatarPresent = avatar || avatarUrl

data/lib/playbook/markdown/helper.rb

@@ -8,7 +8,17 @@ require "action_view"
 module Playbook
   module Markdown
     module Helper
-      def markdown(text)
+      def self.call(template, _source)
+        markdown(template.source)
+      end
+
+      def render_markdown(text)
+        # rubocop:disable Security/Eval
+        eval(Playbook::Markdown::Helper.markdown(text))
+        # rubocop:enable Security/Eval
+      end
+
+      def self.markdown(text)
         options = {
           filter_html: false,
           hard_wrap: true,
@@ -20,6 +30,8 @@ module Playbook
         }
 
         extensions = {
+          lax_spacing: true,
+          no_intra_emphasis: true,
           autolink: true,
           superscript: true,
           fenced_code_blocks: true,
@@ -33,9 +45,11 @@ module Playbook
         }
 
         renderer = HTMLBlockCode.new(options)
+        # toc_renderer = Redcarpet::Render::HTML_TOC.new(with_toc_data: true)
+        # @TOC = Redcarpet::Markdown.new(toc_renderer)
+        # puts "TOC: #{@TOC.inspect}"
         markdown = Redcarpet::Markdown.new(renderer, extensions)
-
-        markdown.render(text).html_safe
+        "#{markdown.render(text).inspect}.html_safe;"
       end
 
       def rouge(text, language)
@@ -44,6 +58,10 @@ module Playbook
         formatter.format(lexer.lex(text))
       end
 
+      class HTML < Redcarpet::Render::HTML
+        include Rouge::Plugins::Redcarpet
+      end
+
       def rouge_markdown(text)
         render_options = {
           filter_html: true,
@@ -65,88 +83,49 @@ module Playbook
       end
     end
 
+    class HTMLWithPants < Redcarpet::Render::HTML
+      include Redcarpet::Render::SmartyPants
+    end
+
     class HTML < Redcarpet::Render::HTML
       include Rouge::Plugins::Redcarpet
     end
 
     class HTMLBlockCode < Redcarpet::Render::HTML
       include ActionView::Helpers::AssetTagHelper
-      def header(title, level)
-        if level == 7
-          @headers ||= []
-          permalink = title.gsub(/\W+/, "-")
-          if @headers.include?(permalink)
-            permalink += "_1"
-            loop do
-              break unless @headers.include?(permalink)
-
-              permalink.gsub!(/_(\d+)$/, "_#{Regexp.last_match(1).to_i + 1}")
-            end
-          end
-          @headers << permalink
-          %(\n<a name="#{permalink}" class="markdown-header-anchor anchor" href="##{permalink}"><span class="fa fa-link anchor-icon"></span></a><h#{level} id=\"#{permalink}\">#{title}</h#{level}>\n)
-        else
-          %(\n<h#{level}>#{title}</h#{level}>\n)
-        end
-      end
 
-      def image(link, title, alt_text)
-        image_tag(link, title: title, alt: alt_text, class: "imageloader lazyload")
-      end
-
-      def preprocess(full_document)
-        full_document.gsub(/\[component (.*)\]/) do
-          @string = Regexp.last_match(1)
-          @default_height = "160"
-          @attr = ["", @default_height]
+      # def block_code(code, language)
+      #   "\n.nf\n#{normal_text(rouge(code, language))}\n.fi\n"
+      # end
 
-          # Set src from attributes
-          @string.gsub(/src="(.*?)"/) do
-            @attr[0] = Regexp.last_match(1)
-          end
+      def table(header, body)
+        "<table class='pb_table table-sm table-responsive-collapse table-card table-collapse-sm'>" \
+          "<thead>#{header}</thead>" \
+          "<tbody>#{body}</tbody>" \
+        "</table>"
+      end
 
-          # Set height from attributes
-          @string.gsub(/height="(.*?)"/) do
-            @attr[1] = (Regexp.last_match(1) || @default_height)
+      def header(title, level)
+        @headers ||= []
+        permalink = title.gsub(/\W+/, "-")
+        if @headers.include?(permalink)
+          permalink += "_1"
+          loop do
+            break unless @headers.include?(permalink)
+
+            permalink.gsub!(/_(\d+)$/, "_#{Regexp.last_match(1).to_i + 1}")
           end
-
-          %(\n<div class="uix-component-frame"><iframe scrolling="no" id="component-preview" src="#{@attr[0]}" width="100%" height="#{@attr[1]}"></iframe><a href="#{@attr[0]}" target="_blank" class="uix-component-link">View component</a></div>\n)
         end
+        @headers << permalink
+        permalink_markup = %(<a name="#{permalink}" class="markdown-header-anchor" )
+        permalink_markup += %(href="##{permalink}"><span class="far fa-link markdown-header-anchor-icon"></span></a>)
+        %(\n<h#{level} id="#{permalink}">#{title} #{permalink_markup}</h#{level}>\n)
       end
 
-      def list(contents, _list_type)
-        @contents = contents
-        @list_items = contents.split("\n")
-
-        if @list_items[0].include?("[do]") || @list_items[0].include?("[dont]")
-          @element_items = []
-          @list_items.each do |item, _index|
-            item.gsub(%r{<li>(.*)</li>}) do
-              @element_items.push(Regexp.last_match(1))
-            end
-          end
-
-          # Doing both because we could have either/both
-          # clean up
-          @dont_items, @trash_items_dont = @element_items.partition { |x, _i| x.include? "[dont]" }
-          @do_items, @trash_items_do = @element_items.partition { |x, _i| x.include? "[do]" }
-
-          @do_list = []
-          @do_items.each do |item, _index|
-            @do_list.push("<li>#{item.sub('[do] ', '')}</li>")
-          end
-          @do_list = "<ul class='uix-ruleset do-list'>#{@do_list.join('')}</ul>"
-
-          @dont_list = []
-          @dont_items.each do |item, _index|
-            @dont_list.push("<li>#{item.sub('[dont] ', '')}</li>")
-          end
-          @dont_list = "<ul class='uix-ruleset dont-list'>#{@dont_list.join('')}</ul>"
+      def image(link, title, alt_text)
+        return nil if link.nil?
 
-          "<div class='row uix-ruleset-block'><div class='col-sm-6'>#{@do_list}</div><div class='col-sm-6'>#{@dont_list}</div></div>"
-        else
-          @contents
-        end
+        %(<a href="#{link}" target="_blank">#{image_tag(link, title: title, alt: alt_text, class: 'imageloader lazyload')}</a>)
       end
     end
   end

data/lib/playbook/markdown.rb

@@ -1,4 +1,3 @@
 # frozen_string_literal: true
 
-require "playbook/markdown/template_handler"
 require "playbook/markdown/helper"