playbook_ui 14.14.0.pre.rc.5 → 14.15.0.pre.alpha.PBNTR477draggabledropzone6743

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx

@@ -1,6 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Collapsible, useCollapsible, Flex, Title, List, ListItem } from 'playbook-ui'
+
+import Collapsible from '../../pb_collapsible/_collapsible'
+import useCollapsible from '../../pb_collapsible/useCollapsible'
+import Flex from '../../pb_flex/_flex'
+import Title from '../../pb_title/_title'
+import List from '../../pb_list/_list'
+import ListItem from '../../pb_list/_list_item'
 
 const CollapsibleCustomMainWithIcon = (props) => {
   const [isCollapsed, setIsCollapsed] = useCollapsible(true)

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Collapsible } from 'playbook-ui'
+import Collapsible from "../../pb_collapsible/_collapsible"
 
 const CollapsibleDefault = (props) => (
   <Collapsible >

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Collapsible } from 'playbook-ui'
+import Collapsible from "../../pb_collapsible/_collapsible"
 
 const CollapsibleIcons = (props) => {
 

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_no_icon.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Collapsible } from 'playbook-ui'
+import Collapsible from "../../pb_collapsible/_collapsible"
 
 const CollapsibleNoIcon = (props) => (
   <Collapsible 

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Collapsible } from 'playbook-ui'
+import Collapsible from "../../pb_collapsible/_collapsible"
 
 const CollapsibleSize = (props) => (
   <div>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx

@@ -1,6 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types';
-import { Collapsible, useCollapsible, Button } from 'playbook-ui'
+
+import Collapsible from '../../pb_collapsible/_collapsible'
+import useCollapsible from '../../pb_collapsible/useCollapsible'
+import Button from '../../pb_button/_button'
 
 const CollapsibleState = (props) => {
   const [isCollapsed, setIsCollapsed] = useCollapsible(true)

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Contact } from 'playbook-ui'
+import Contact from "../../pb_contact/_contact"
 
 const ContactDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Contact } from 'playbook-ui'
+import Contact from "../../pb_contact/_contact"
 
 const ContactDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
-import { CopyButton, Textarea } from 'playbook-ui'
+
+import CopyButton from '../../pb_copy_button/_copy_button'
+import Textarea from '../../pb_textarea/_textarea'
 
 const CopyButtonDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx

@@ -1,5 +1,9 @@
 import React, { useState } from 'react'
-import { CopyButton, Body, TextInput, Textarea } from 'playbook-ui'
+
+import CopyButton from '../../pb_copy_button/_copy_button'
+import Body from '../../pb_body/_body'
+import TextInput from '../../pb_text_input/_text_input'
+import Textarea from '../../pb_textarea/_textarea'
 
 const CopyButtonFrom = (props) => {
   const [text, setText] = useState("Copy this text input text")

data/app/pb_kits/playbook/pb_currency/_currency.tsx

@@ -21,6 +21,7 @@ type CurrencyProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   label?: string,
+  nullDisplay?: string,
   size?: 'sm' | 'md' | 'lg',
   symbol?: string,
   variant?: 'default' | 'light' | 'bold',
@@ -49,6 +50,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     unit,
     className,
     label = '',
+    nullDisplay = '',
     size = 'sm',
     symbol = '$',
     variant = 'default',
@@ -118,44 +120,57 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
         id={id}
     >
       <Caption dark={dark}>{label}</Caption>
-
       <div className={`pb_currency_wrapper${variantClass || emphasizedClass}`}>
         {unstyled ? (
-          <>
-            <div>{handleNegative}{symbol}</div>
-            <div>{getAmount}</div>
-            <div>
-              {getAbbreviation}
-              {unit ? unit : getDecimalValue}
-            </div>
-          </>
+          nullDisplay && !amount ? (
+            <div>{nullDisplay}</div>
+          ) : (
+            <>
+              <div>{handleNegative}{symbol}</div>
+              <div>{getAmount}</div>
+              <div>
+                {getAbbreviation}
+                {unit ? unit : getDecimalValue}
+              </div>
+            </>
+          )
         ) : (
-          <>
-            <Body
-                className="dollar_sign"
-                color="light"
-                dark={dark}
-            >
-              {handleNegative}{symbol}
-            </Body>
-
+          nullDisplay && !amount ? (
             <Title
                 className="pb_currency_value"
                 dark={dark}
                 size={sizes[size]}
-            >
-              {getAmount}
-            </Title>
-
-            <Body
-                className="unit"
-                color="light"
-                dark={dark}
-            >
-              {getAbbreviation}
-              {unit ? unit : getDecimalValue}
-            </Body>
-          </>
+          >
+            {nullDisplay}
+          </Title>
+          ) : (
+            <>
+              <Body
+                  className="dollar_sign"
+                  color="light"
+                  dark={dark}
+              >
+                {handleNegative}{symbol}
+              </Body>
+      
+              <Title
+                  className="pb_currency_value"
+                  dark={dark}
+                  size={sizes[size]}
+              >
+                {getAmount}
+              </Title>
+      
+              <Body
+                  className="unit"
+                  color="light"
+                  dark={dark}
+              >
+                {getAbbreviation}
+                {unit ? unit : getDecimalValue}
+              </Body>
+            </>
+          )
         )}
       </div>
     </div>

data/app/pb_kits/playbook/pb_currency/currency.html.erb

@@ -1,17 +1,24 @@
 <%= pb_content_tag do %>
   <%= pb_rails("caption", props: object.caption_props) %>
-
   <div class=<%= "pb_currency_wrapper#{object.variant_class || object.emphasized_class}" %>>
     <% if object.unstyled %>
-      <div><%= object.negative_sign %><%= object.symbol %></div>
-      <div><%= object.title_props[:text] %></div>
-      <div><%= object.body_props[:text] %></div>
+      <% if object.null_display && object.amount.blank? %>
+        <div><%= object.null_display %></div>
+      <% else %>
+        <div><%= object.negative_sign %><%= object.symbol %></div>
+        <div><%= object.title_props[:text] %></div>
+        <div><%= object.body_props[:text] %></div>
+      <% end %>
     <% else %>
-      <%= pb_rails("body", props: object.currency_wrapper_props) do %>
-        <%= object.negative_sign %><%= object.symbol %>
+     <% if object.null_display && object.amount.blank? %>
+        <%= pb_rails("title", props: object.title_props) %>
+      <% else %>
+        <%= pb_rails("body", props: object.currency_wrapper_props) do %>
+          <%= object.negative_sign %><%= object.symbol %>
+        <% end %>
+          <%= pb_rails("title", props: object.title_props) %>
+          <%= pb_rails("body", props: object.body_props) %>
       <% end %>
-      <%= pb_rails("title", props: object.title_props) %>
-      <%= pb_rails("body", props: object.body_props) %>
     <% end %>
   </div>
 <% end %>

data/app/pb_kits/playbook/pb_currency/currency.rb

@@ -46,6 +46,9 @@ module Playbook
       prop :comma_separator, type: Playbook::Props::Boolean,
                              default: false
 
+      prop :null_display, type: Playbook::Props::String,
+                          required: false
+
       def classname
         generate_classname("pb_currency_kit", align, size, dark_class)
       end
@@ -65,10 +68,20 @@ module Playbook
         }
       end
 
+      def title_text
+        if null_display
+          null_display
+        elsif swap_negative
+          absolute_amount(abbr_or_format_amount)
+        else
+          abbr_or_format_amount
+        end
+      end
+
       def title_props
         {
           size: size_value,
-          text: swap_negative ? absolute_amount(abbr_or_format_amount) : abbr_or_format_amount,
+          text: title_text,
           classname: "pb_currency_value",
           dark: dark,
         }
@@ -145,8 +158,10 @@ module Playbook
           1
         when "md"
           3
-        else
+        when "sm"
           4
+        else
+          3
         end
       end
 

data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.html.erb

@@ -0,0 +1,22 @@
+<%= pb_rails("currency", props: {
+    amount: "",
+    label: "Nil",
+    margin_bottom: "md",
+    null_display: "--",
+    size: "sm"
+}) %>
+
+<%= pb_rails("currency", props: {
+    amount: "",
+    label: "Nil",
+    margin_bottom: "md",
+    null_display: "$0.00",
+    size: "sm"
+}) %>
+
+<%= pb_rails("currency", props: {
+    amount: "",
+    label: "Nil",
+    null_display: " ",
+    size: "sm"
+}) %>

data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import Currency from "../../pb_currency/_currency"
+
+const CurrencyNullDisplay = (props) => {
+  return (
+    <>
+      <Currency
+          amount=""
+          label="Null"
+          marginBottom="md"
+          nullDisplay="--"
+          {...props}
+      />
+
+      <Currency
+          amount=""
+          label="Null"
+          marginBottom="md"
+          nullDisplay="$0.00"
+          {...props}
+      />
+    
+      <Currency
+          amount=""
+          label="Null"
+          marginBottom="md"
+          nullDisplay=" "
+          {...props}
+      />
+    </>
+  )
+}
+
+export default CurrencyNullDisplay

data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display_rails.md

@@ -0,0 +1 @@
+To customize how the `amount` field appears when it is empty, use the `null_display` prop and set it to the desired value you want to display.

data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display_react.md

@@ -0,0 +1 @@
+To customize how the `amount` field appears when it is empty, use the `nullDisplay` prop and set it to the desired value you want to display.

data/app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
-import { Currency, Title } from 'playbook-ui'
+
+import Currency from '../../pb_currency/_currency'
+import Title from '../../pb_title/_title'
 
 const CurrencyUnstyled = (props) => {
   return (

data/app/pb_kits/playbook/pb_currency/docs/example.yml

@@ -10,6 +10,7 @@ examples:
   - currency_unstyled: Unstyled
   - currency_comma_separator: Comma Separator
   - currency_negative: Negative
+  - currency_null_display: Null Display
   
   react:
   - currency_variants: Variants
@@ -21,6 +22,7 @@ examples:
   - currency_unstyled: Unstyled
   - currency_comma_separator: Comma Separator
   - currency_negative: Negative
+  - currency_null_display: Null Display
 
   swift:
   - currency_size_swift: Size

data/app/pb_kits/playbook/pb_currency/docs/index.js

@@ -6,4 +6,5 @@ export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx'
 export { default as CurrencyMatchingDecimals } from './_currency_matching_decimals.jsx'
 export { default as CurrencyUnstyled } from './_currency_unstyled.jsx'
 export { default as CurrencyCommaSeparator } from './_currency_comma_separator.jsx'
-export { default as CurrencyNegative } from './_currency_negative.jsx'
+export { default as CurrencyNegative } from './_currency_negative.jsx'
+export { default as CurrencyNullDisplay } from './_currency_null_display.jsx'

data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Date as FormattedDate } from 'playbook-ui'
+
+import FormattedDate from '../../pb_date/_date'
 
 const DateAlignment = (props) => {
   return (

data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import { Date as FormattedDate, Caption, Title } from 'playbook-ui'
+
+import FormattedDate from '../../pb_date/_date'
+import Caption from '../../pb_caption/_caption'
+import Title from '../../pb_title/_title'
 
 const DateDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import { Caption, Date as FormattedDate, Title } from 'playbook-ui'
+
+import Caption from '../../pb_caption/_caption'
+import FormattedDate from '../../pb_date/_date'
+import Title from '../../pb_title/_title'
 
 const DateUnstyled = (props) => {
   return (

data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Date as FormattedDate } from 'playbook-ui'
+
+import FormattedDate from '../../pb_date/_date'
 
 const DateVariants = (props) => {
   return (

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -1,5 +1,8 @@
 <%= pb_content_tag(:div,
-    class: object.classname + object.error_class) do %>
+    class: object.classname + object.error_class,
+    'data-pb-date-picker' => true,
+    'data-validation-message' => object.validation_message,
+      ) do %>
   <div class="input_wrapper">
     <% if content.present? %>
       <%= content %>

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -75,6 +75,8 @@ module Playbook
                         default: [1900, 2100]
       prop :custom_event_type, type: Playbook::Props::String,
                                default: ""
+      prop :validation_message, type: Playbook::Props::String,
+                                default: ""
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.md

@@ -1 +1,3 @@
-You can find a full list of flatpickr events and hooks in their [documentation](https://flatpickr.js.org/events/).
+You can find a full list of flatpickr events and hooks in their [documentation](https://flatpickr.js.org/events/).
+
+Use `window.addEventListener("DOMContentLoaded", () => {})`, not `document.addEventListener("DOMContentLoaded", () => {})`.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.html.erb

@@ -0,0 +1,39 @@
+<%= pb_rails("date_picker", props: {
+  label: "Date Picker",
+  picker_id: "date-picker-onchange",
+  margin_bottom: "lg"
+}) %>
+<%= pb_rails("caption", props: { text: "Date Object" }) %>
+<%= pb_rails("body", props: {
+  label: "Date Object",
+  text: "Select Date",
+  margin_bottom: "lg",
+  id: "date-picker-onchange-object",
+}) %>
+<%= pb_rails("caption", props: { text: "Date String" }) %>
+<%= pb_rails("body", props: {
+  label: "Date String",
+  text: "Select Date",
+  margin_bottom: "lg",
+  id: "date-picker-onchange-string",
+}) %>
+
+
+<%= javascript_tag do %>
+  window.addEventListener("DOMContentLoaded", () => {
+    <%# Access flatpickr instance with picker id and assign it a variable %>
+    const fp = document.querySelector("#date-picker-onchange")._flatpickr
+
+    <%# Define Hook %>
+    const changeHook = (selectedDates, dateStr) => {
+      const object = document.querySelector('#date-picker-onchange-object')
+      object.textContent = selectedDates[0] ? selectedDates[0].toString() : ''
+
+      const string = document.querySelector('#date-picker-onchange-string')
+      string.textContent = dateStr
+    }
+    
+    <%# Push one or more hooks to onChange config array %>
+    fp.config.onChange.push(changeHook)
+  })
+<% end %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.jsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react'
-import { DatePicker, LabelValue } from 'playbook-ui'
+
+import DatePicker from '../../pb_date_picker/_date_picker'
+import LabelValue from '../../pb_label_value/_label_value'
 
 const DatePickerOnChange = (props) => {
   const today = new Date()

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.html.erb

@@ -0,0 +1,39 @@
+<%= pb_rails("date_picker", props: {
+  label: "Date Picker",
+  picker_id: "date-picker-onclose",
+  margin_bottom: "lg"
+}) %>
+<%= pb_rails("caption", props: { text: "Date Object" }) %>
+<%= pb_rails("body", props: {
+  label: "Date Object",
+  text: "Select Date",
+  margin_bottom: "lg",
+  id: "date-picker-onclose-object",
+}) %>
+<%= pb_rails("caption", props: { text: "Date String" }) %>
+<%= pb_rails("body", props: {
+  label: "Date String",
+  text: "Select Date",
+  margin_bottom: "lg",
+  id: "date-picker-onclose-string",
+}) %>
+
+
+<%= javascript_tag do %>
+  window.addEventListener("DOMContentLoaded", () => {
+    <%# Access flatpickr instance with picker id and assign it a variable %>
+    const fp = document.querySelector("#date-picker-onclose")._flatpickr
+
+    <%# Define Hook %>
+    const closeHook = (selectedDates, dateStr) => {
+      const object = document.querySelector('#date-picker-onclose-object')
+      object.textContent = selectedDates[0] ? selectedDates[0].toString() : ''
+
+      const string = document.querySelector('#date-picker-onclose-string')
+      string.textContent = dateStr
+    }
+    
+    <%# Push one or more hooks to onClose config array %>
+    fp.config.onClose.push(closeHook)
+  })
+<% end %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.jsx

@@ -1,6 +1,8 @@
 /* eslint-disable react/no-multi-comp */
 import React, { useState } from 'react'
-import { DatePicker,LabelValue } from 'playbook-ui'
+
+import DatePicker from '../../pb_date_picker/_date_picker'
+import LabelValue from '../../pb_label_value/_label_value'
 
 
 const DatePickerOnClose = (props) => {

data/app/pb_kits/playbook/pb_date_picker/docs/example.yml

@@ -7,6 +7,8 @@ examples:
   - date_picker_allow_input: Allow Input
   - date_picker_input: Input Field
   - date_picker_label: Label
+  - date_picker_on_change: onChange
+  - date_picker_on_close: onClose
   # - date_picker_range: Range
   - date_picker_quick_pick_rails: Range (Quick Pick)
   - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)

data/app/pb_kits/playbook/pb_date_picker/index.ts

@@ -0,0 +1,38 @@
+import PbEnhancedElement from "../pb_enhanced_element";
+
+const DATE_PICKER_WRAPPER_SELECTOR = '[data-pb-date-picker]';
+const SELECT_VALIDATION_MESSAGE_CLASS = '.pb_body_kit_negative';
+
+export default class PbDatePicker extends PbEnhancedElement {
+  static get selector() {
+    return DATE_PICKER_WRAPPER_SELECTOR;
+  }
+
+  connect() {
+    this.setValidationMessage();
+  }
+
+  setValidationMessage() {
+    const validationMessage = this.element.dataset?.validationMessage;
+    const inputElement = this.element.querySelector("input");
+
+    if (validationMessage) {
+      const setErrorTextContent = (text, timeout) => {
+        setTimeout(() => {
+          const errorMessageElement = this.element.querySelector(SELECT_VALIDATION_MESSAGE_CLASS);
+          if (errorMessageElement) {
+            errorMessageElement.textContent = text;
+          } else {
+            setErrorTextContent(text, 100);
+          }
+        }, timeout);
+      };
+
+      inputElement.addEventListener("change", (e) => {
+        if (!e.target.checkValidity()) {
+          setErrorTextContent(validationMessage, 300);
+        }
+      });
+    }
+  }
+}

data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { DateRangeStacked } from 'playbook-ui'
+import DateRangeStacked from '../../pb_date_range_stacked/_date_range_stacked'
 
 const DateRangeStackedDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { DateYearStacked } from 'playbook-ui'
+import DateYearStacked from '../../pb_date_year_stacked/_date_year_stacked'
 
 const DateYearStackedDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_detail/docs/_detail_bold.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Detail } from 'playbook-ui'
+import Detail from '../../pb_detail/_detail'
 
 const DetailBold = (props) => (
   <div>

data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Detail } from 'playbook-ui'
+import Detail from '../../pb_detail/_detail'
 
 const DetailColors = (props) => (
   <div>

data/app/pb_kits/playbook/pb_detail/docs/_detail_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Detail } from 'playbook-ui'
+import Detail from '../../pb_detail/_detail'
 
 const DetailDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_detail/docs/_detail_styled.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Detail } from 'playbook-ui'
+import Detail from '../../pb_detail/_detail'
 
 const DetailStyled = (props) => (
   <>