playbook_ui 10.23.0.pre.alpha1 → 10.23.0.pre.cachetest

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

@@ -1,12 +1,11 @@
 /* @flow */
-/* eslint-disable react-hooks/rules-of-hooks */
 
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef } from 'react'
 import classnames from 'classnames'
 import inlineFocus from './inlineFocus'
 import useFocus from './useFocus'
 import { globalProps } from '../utilities/globalProps'
-import { buildAriaProps, buildDataProps, noop } from '../utilities/props'
+import { buildAriaProps, buildDataProps } from '../utilities/props'
 
 try {
   const Trix = require('trix')
@@ -16,8 +15,6 @@ try {
   }
 } catch (_e) { /* do nothing */ }
 
-import { TrixEditor } from "react-trix"
-
 type RichTextEditorProps = {
   aria?: object,
   toolbarBottom?: Boolean,
@@ -27,7 +24,7 @@ type RichTextEditorProps = {
   id?: string,
   inline?: boolean,
   name?: string,
-  onChange: (html: string, text: string) => void,
+  onChange: (string) => void,
   placeholder?: string,
   simple?: boolean,
   sticky?: boolean,
@@ -42,117 +39,130 @@ const RichTextEditor = (props: RichTextEditorProps) => {
     className,
     data = {},
     focus = false,
+    id,
     inline = false,
     name,
-    onChange = noop,
+    onChange,
     placeholder,
     simple = false,
     sticky = false,
     template = '',
     value = '',
   } = props
+  const trixRef = useRef()
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
 
-  const ariaProps = buildAriaProps(aria),
-  dataProps = buildDataProps(data),
-  [editor, setEditor] = useState()
+  useEffect(() => {
+    trixRef.current.addEventListener('trix-initialize', (event) => {
+      const element = event.target
 
-  const handleOnEditorReady = (editorInstance) => setEditor(editorInstance),
-  element = editor?.element
+      const { toolbarElement, editor } = element
 
-  // DOM manipulation must wait for editor to be ready
-  if (editor) {
-    const toolbarElement = element.parentElement.querySelector('trix-toolbar'),
-    blockCodeButton = toolbarElement.querySelector('[data-trix-attribute=code]')
+      const blockCodeButton = toolbarElement.querySelector(
+        '[data-trix-attribute=code]'
+      )
+      const inlineCodeButton = blockCodeButton.cloneNode(true)
 
-    let inlineCodeButton = toolbarElement.querySelector('[data-trix-attribute=inlineCode]')
-    if (!inlineCodeButton) inlineCodeButton = blockCodeButton.cloneNode(true)
+      inlineCodeButton.hidden = true
+      inlineCodeButton.dataset.trixAttribute = 'inlineCode'
+      blockCodeButton.insertAdjacentElement('afterend', inlineCodeButton)
 
-    // set button attributes
-    inlineCodeButton.dataset.trixAttribute = 'inlineCode'
-    blockCodeButton.insertAdjacentElement('afterend', inlineCodeButton)
+      const getCodeFormattingType = () => {
+        if (editor.attributeIsActive('code')) return 'block'
+        if (editor.attributeIsActive('inlineCode')) return 'inline'
 
-    if (toolbarBottom) editor.element.after(toolbarElement)
+        const range = editor.getSelectedRange()
+        if (range[0] == range[1]) return 'block'
 
-    const getCodeFormattingType = (): string => {
-      if (editor.attributeIsActive('code')) return 'block'
-      if (editor.attributeIsActive('inlineCode')) return 'inline'
+        const text = editor.getSelectedDocument().toString().trim()
+        return /\n/.test(text) ? 'block' : 'inline'
+      }
 
-      const range = editor.getSelectedRange()
-      if (range[0] == range[1]) return 'block'
+      element.addEventListener('trix-selection-change', () => {
+        const type = getCodeFormattingType()
+        blockCodeButton.hidden = type == 'inline'
+        inlineCodeButton.hidden = type == 'block'
+      })
 
-      const text = editor.getSelectedDocument().toString().trim()
-      return /\n/.test(text) ? 'block' : 'inline'
-    }
+      if (toolbarBottom) editor.element.after(toolbarElement)
+    })
 
-    // DOM event listeners
-    element.addEventListener('trix-selection-change', () => {
-      const type = getCodeFormattingType()
-      blockCodeButton.hidden = type == 'inline'
-      inlineCodeButton.hidden = type == 'block'
+    trixRef.current.addEventListener('trix-change', (event) => {
+      onChange && onChange(event.target.innerHTML)
     })
+  }, [trixRef])
+
+  useEffect(() => {
+    const editor = trixRef.current.editorController.editor
+    if (template) {
+      editor.loadHTML('')
+      editor.setSelectedRange([0, 0])
+      editor.insertHTML(template)
+    }
+  }, [template])
+
+  focus
+    ? (document.addEventListener('trix-focus', useFocus),
+    document.addEventListener('trix-blur', useFocus),
+    useFocus())
+    : null
+
+  document.addEventListener('trix-focus', inlineFocus)
+  document.addEventListener('trix-blur', inlineFocus)
 
-    focus
-      ? (document.addEventListener('trix-focus', useFocus),
-      document.addEventListener('trix-blur', useFocus),
-      useFocus())
-      : null
+  const handleAnchorElementClick = (clickedElement) => {
+    const trixEditorContainer = clickedElement.closest('.pb_rich_text_editor_kit')
+    if (!trixEditorContainer) return
 
-    document.addEventListener('trix-focus', inlineFocus)
-    document.addEventListener('trix-blur', inlineFocus)
+    const anchorElement = clickedElement.closest('a')
+    if (!anchorElement) return
+
+    if (anchorElement.hasAttribute('href')) window.open(anchorElement.href)
   }
 
-  useEffect(() => {
-    if (!editor || !template) return
-    editor.loadHTML('')
-    editor.setSelectedRange([0, 0])
-    editor.insertHTML(template)
-  }, [editor, template])
+  const handleClick = (event) => {
+    handleAnchorElementClick(event.target)
+  }
 
   useEffect(() => {
-    if (!element) return
-    element.addEventListener('click', ({target}) => {
-      const trixEditorContainer = target.closest('.pb_rich_text_editor_kit')
-      if (!trixEditorContainer) return
+    trixRef.current.addEventListener('click', handleClick)
+  }, [])
 
-      const anchorElement = target.closest('a')
-      if (!anchorElement) return
-
-      if (anchorElement.hasAttribute('href')) window.open(anchorElement.href)
-    })
-  }, [element])
-
-  const richTextEditorClass = 'pb_rich_text_editor_kit',
-  simpleClass = simple ? 'simple' : '',
-  focusClass = focus ? 'focus-editor-targets' : '',
-  stickyClass = sticky ? 'sticky' : '',
-  inlineClass = inline ? 'inline' : '',
-  toolbarBottomClass = toolbarBottom ? 'toolbar-bottom' : ''
-
-  let css = classnames(globalProps(props), className)
-  css = classnames(
-    richTextEditorClass,
-    simpleClass,
-    focusClass,
-    stickyClass,
-    inlineClass,
-    toolbarBottomClass,
-    css
-  )
+  const RichTextEditorClass = 'pb_rich_text_editor_kit'
+  const SimpleClass = simple ? 'simple' : ''
+  const FocusClass = focus ? 'focus-editor-targets' : ''
+  const StickyClass = sticky ? 'sticky' : ''
+  const InlineClass = inline ? 'inline' : ''
+  const ToolbarBottomClass = toolbarBottom ? 'toolbar-bottom' : ''
+  const css = classnames(globalProps(props), className)
 
   return (
     <div
         {...ariaProps}
         {...dataProps}
-        className={css}
+        className={classnames(
+        RichTextEditorClass,
+        SimpleClass,
+        FocusClass,
+        StickyClass,
+        InlineClass,
+        ToolbarBottomClass,
+        css
+      )}
     >
-      <TrixEditor
-          className=""
-          fileParamName={name}
-          onChange={onChange}
-          onEditorReady={handleOnEditorReady}
-          placeholder={placeholder}
+      <input
+          id={id}
+          name={name}
+          type="hidden"
           value={value}
       />
+      <trix-editor
+          input={id}
+          name={name}
+          placeholder={placeholder}
+          ref={trixRef}
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.html.erb

@@ -1 +1 @@
-<%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here. You can format your text, add links, quotes, and bullets."}) %>
+<%= pb_rails("rich_text_editor", props: {id: "default"}) %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.jsx

@@ -1,19 +1,12 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { RichTextEditor } from '../../'
 
-const RichTextEditorDefault = (props) => {
-  const [value, setValue] = useState('Add your text here. You can format your text, add links, quotes, and bullets.'),
-  handleOnChange = (html) => setValue(html)
-
-  return (
-    <div>
-      <RichTextEditor
-          onChange={handleOnChange}
-          value={value}
-          {...props}
-      />
-    </div>
-  )
-}
+const RichTextEditorDefault = (props) => (
+  <div>
+    <RichTextEditor
+        {...props}
+    />
+  </div>
+)
 
 export default RichTextEditorDefault

data/app/pb_kits/playbook/pb_table/_table.jsx

@@ -3,7 +3,7 @@
 import React, { type Node } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps.js'
 import PbTable from './'
 
 type TableProps = {

data/app/pb_kits/playbook/pb_table/_table_row.jsx

@@ -2,7 +2,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps.js'
 
 type TableRowPropTypes = {
   aria?: object,

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

@@ -2,7 +2,7 @@
 import React, { forwardRef } from 'react'
 import classnames from 'classnames'
 
-import { globalProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps.js'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
 
 import Flex from '../pb_flex/_flex'

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

@@ -4,12 +4,12 @@
 
 
 [class^=pb_text_input_kit] {
-  margin-bottom: $space_sm;
   .pb_text_input_kit_label {
     margin-bottom: $space_xs;
     display: block;
   }
   .text_input_wrapper {
+    margin-bottom: $space_sm;
     display: block;
     input::placeholder,
     .text_input .placeholder {

data/app/pb_kits/playbook/pb_text_input/text_input.test.js

@@ -75,17 +75,3 @@ test('returns additional class name', () => {
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveClass(`${kitClass} dark error`)
 })
-
-test('returns additional class name', () => {
-  render(
-    <TextInput
-        data={{ testid: testId }}
-        label="First Name"
-        marginBottom="lg"
-        placeholder="Enter first name"
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass(`${kitClass} mb_lg`)
-})

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

@@ -1,5 +1,4 @@
 /* @flow */
-/* eslint-disable react-hooks/rules-of-hooks */
 
 import React, { forwardRef, useEffect, useRef } from 'react'
 import classnames from 'classnames'

data/app/pb_kits/playbook/pb_time/_time.jsx

@@ -5,7 +5,7 @@ import classnames from 'classnames'
 
 import DateTime from '../pb_kit/dateTime.js'
 import { buildCss } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps.js'
 
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'

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

@@ -3,7 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { deprecatedProps, globalProps } from '../utilities/globalProps'
+import { deprecatedProps, globalProps } from '../utilities/globalProps.js'
 
 type TitleProps = {
   aria?: object,

data/app/pb_kits/playbook/pb_toggle/_toggle.jsx

@@ -10,7 +10,7 @@ import {
   buildDataProps,
 } from '../utilities/props'
 
-import { globalProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps.js'
 
 type Props = {
   aria?: object,

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

@@ -6,7 +6,7 @@ import AsyncSelect from 'react-select/async'
 import CreateableSelect from 'react-select/creatable'
 import AsyncCreateableSelect from 'react-select/async-creatable'
 import { get, isString, uniqueId } from 'lodash'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps.js'
 import classnames from 'classnames'
 
 import Control from './components/Control'

data/app/pb_kits/playbook/pb_user_badge/_user_badge.jsx

@@ -2,7 +2,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps.js'
 
 type UserBadgeProps = {
   aria?: object,

data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.jsx

@@ -6,7 +6,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps.js'
 import Joyride from 'react-joyride'
 import Button from '../pb_button/_button'
 import Flex from '../pb_flex/_flex'

data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.jsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps.js'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
 import Caption from '../pb_caption/_caption'

data/app/pb_kits/playbook/plugins/pb_chart.js

@@ -1,7 +1,6 @@
 import Highcharts from 'highcharts'
 
 import { highchartsTheme } from '../pb_dashboard/pbChartsLightTheme'
-import { highchartsDarkTheme } from '../pb_dashboard/pbChartsDarkTheme'
 import colors from '../tokens/exports/_colors.scss'
 
 import pie from 'highcharts/modules/variable-pie'
@@ -68,14 +67,10 @@ class pbChart {
     }
   }
 
-  setupTheme() {
-    this.options.dark ? Highcharts.setOptions(highchartsDarkTheme) :  Highcharts.setOptions(highchartsTheme)
-  }
-
   setupGauge(options) {
     highchartsMore(Highcharts)
     solidGauge(Highcharts)
-    this.setupTheme()
+    Highcharts.setOptions(highchartsTheme)
 
     Highcharts.chart(this.defaults.id, {
       chart: {
@@ -145,7 +140,7 @@ class pbChart {
   }
 
   setupPieChart(options) {
-    this.setupTheme()
+    Highcharts.setOptions(highchartsTheme)
     Highcharts.chart(this.defaults.id, {
       title: {
         text: this.defaults.title,
@@ -192,7 +187,8 @@ class pbChart {
   }
 
   setupChart(options) {
-    this.setupTheme()
+    Highcharts.setOptions(highchartsTheme)
+
     const configOptions = {
       title: {
         text: this.defaults.title,

data/app/pb_kits/playbook/types.js

@@ -0,0 +1,4 @@
+// @flow
+
+export type Callback<T, K> = T => K
+export type InputCallback<T> = Callback<SyntheticEvent<T>, void>

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

@@ -0,0 +1,97 @@
+// Prop categories
+const spacingProps = ({
+  marginRight,
+  marginLeft,
+  marginTop,
+  marginBottom,
+  marginX,
+  marginY,
+  margin,
+  paddingRight,
+  paddingLeft,
+  paddingTop,
+  paddingBottom,
+  paddingX,
+  paddingY,
+  padding,
+}) => {
+  let css = ''
+  css += marginRight ? `mr_${marginRight} ` : ''
+  css += marginLeft ? `ml_${marginLeft} ` : ''
+  css += marginTop ? `mt_${marginTop} ` : ''
+  css += marginBottom ? `mb_${marginBottom} ` : ''
+  css += marginX ? `mx_${marginX} ` : ''
+  css += marginY ? `my_${marginY} ` : ''
+  css += margin ? `m_${margin} ` : ''
+  css += paddingRight ? `pr_${paddingRight} ` : ''
+  css += paddingLeft ? `pl_${paddingLeft} ` : ''
+  css += paddingTop ? `pt_${paddingTop} ` : ''
+  css += paddingBottom ? `pb_${paddingBottom} ` : ''
+  css += paddingX ? `px_${paddingX} ` : ''
+  css += paddingY ? `py_${paddingY} ` : ''
+  css += padding ? `p_${padding} ` : ''
+  return css
+}
+
+const darkProps = ({ dark }) => {
+  let css = ''
+  css += dark ? 'dark' : ''
+  return css
+}
+
+const numberSpacingProps = ({ numberSpacing }) => {
+  let css = ''
+  css += numberSpacing ? `ns_${numberSpacing} ` : ''
+  return css
+}
+
+const maxWidthProps = ({ maxWidth }) => {
+  let css = ''
+  css += maxWidth ? `max_width_${maxWidth } ` : ''
+  return css
+}
+
+const zIndexProps = ({ zIndex }) => {
+  let css = ''
+  css += zIndex ? `z_index_${zIndex } ` : ''
+  return css
+}
+
+const shadowProps = ({ shadow }) => {
+  let css = ''
+  css += shadow ? `shadow_${shadow} ` : ''
+  return css
+}
+
+const lineHeightProps = ({ lineHeight }) => {
+  let css = ''
+  css += lineHeight ? `line_height_${lineHeight} ` : ''
+  return css
+}
+
+const displayProps = ({ display }) => {
+  let css = ''
+  css += display ? `display_${display} ` : ''
+  return css
+}
+
+const cursorProps = ({ cursor }) => {
+  let css = ''
+  css += cursor ? `cursor_${cursor} ` : ''
+  return css
+}
+
+// All Exported as a single function
+export const globalProps = (props, defaultProps = {}) => {
+  const allProps = { ...props, ...defaultProps }
+  return spacingProps(allProps) + darkProps(allProps) + maxWidthProps(allProps) + zIndexProps(allProps) + numberSpacingProps(allProps) + shadowProps(allProps) + lineHeightProps(allProps) + cursorProps(allProps) + displayProps(allProps)
+}
+
+export const deprecatedProps = (kit, props = []) => {
+  if (process.env.NODE_ENV === 'development') {
+    /* eslint no-console: ["error", { allow: ["warn", "error"] }] */
+    props.forEach((prop) => {
+      console.warn(`${kit} Kit: The prop '${prop}' is deprecated and will be removed in a future release!`)
+    })
+  }
+}

data/app/pb_kits/playbook/utilities/{props.ts → props.js}

@@ -10,11 +10,10 @@ import classnames from 'classnames'
  * @param {Object} data the object containing the data to derive the props from.
  * @returns {Object} an object whose keys have the prefix added to them.
  */
-const buildPrefixedProps = (prefix: string, data: {[key: string]: any}) => 
-  Object.keys(data).reduce((props: {[key: string]: any}, key: string) => {
-    props[`${prefix}-${key}`] = data[key]
-    return props
-  }, {})
+const buildPrefixedProps = (prefix, data) => Object.keys(data).reduce((props, key) => {
+  props[`${prefix}-${key}`] = data[key]
+  return props
+}, {})
 
 /**
  * Represent a "No-Operation" function that can be used as a sensible
@@ -30,8 +29,7 @@ export const noop = () => {}
  * @param {Object} aria the object containing the aria prop values.
  * @returns {Object} an object holding the HTML valid aria props and their values.
  */
-export const buildAriaProps = (aria: {[key: string]: string}): {[key: string]: string} => 
-  buildPrefixedProps('aria', aria)
+export const buildAriaProps = (aria) => buildPrefixedProps('aria', aria)
 
 /**
  * Maps a given data object into HTML valid data attribtues and their values.
@@ -39,7 +37,7 @@ export const buildAriaProps = (aria: {[key: string]: string}): {[key: string]: s
  * @param {Object} data the object containing the data prop values.
  * @returns {Object} an object holding the HTML valid data props and their values.
  */
-export const buildDataProps = (data: {[key: string]: any}) => buildPrefixedProps('data', data)
+export const buildDataProps = (data) => buildPrefixedProps('data', data)
 
 /**
  * Builds a Playbook valid root className off of the incoming css rules.
@@ -47,5 +45,5 @@ export const buildDataProps = (data: {[key: string]: any}) => buildPrefixedProps
  * @param {Object} rules a 'classnames' compliant rules object, used to derive the root className.
  * @returns {String} the derived root className value.
  */
-export const buildCss = (...rules: string[]) => classnames(rules).replace(/\s/g, '_')
+export const buildCss = (...rules) => classnames(rules).replace(/\s/g, '_')
 

data/lib/playbook/classnames.rb

@@ -20,17 +20,6 @@ module Playbook
         line_height_props,
         display_props,
         cursor_props,
-        flex_direction_props,
-        flex_wrap_props,
-        justify_content_props,
-        justify_self_props,
-        align_items_props,
-        align_content_props,
-        align_self_props,
-        flex_props,
-        flex_grow_props,
-        flex_shrink_props,
-        order_props,
       ].compact.join(" ")
     end
 

data/lib/playbook/kit_base.rb

@@ -8,17 +8,6 @@ require "playbook/shadow"
 require "playbook/line_height"
 require "playbook/display"
 require "playbook/cursor"
-require "playbook/flex_direction"
-require "playbook/flex_wrap"
-require "playbook/justify_content"
-require "playbook/justify_self"
-require "playbook/align_items"
-require "playbook/align_content"
-require "playbook/align_self"
-require "playbook/flex"
-require "playbook/flex_grow"
-require "playbook/flex_shrink"
-require "playbook/order"
 
 module Playbook
   class KitBase < ViewComponent::Base
@@ -32,17 +21,6 @@ module Playbook
     include Playbook::LineHeight
     include Playbook::Display
     include Playbook::Cursor
-    include Playbook::FlexDirection
-    include Playbook::FlexWrap
-    include Playbook::JustifyContent
-    include Playbook::JustifySelf
-    include Playbook::AlignItems
-    include Playbook::AlignContent
-    include Playbook::AlignSelf
-    include Playbook::Flex
-    include Playbook::FlexGrow
-    include Playbook::FlexShrink
-    include Playbook::Order
 
     prop :id
     prop :data, type: Playbook::Props::Hash, default: {}