playbook_ui 12.5.0 → 12.6.0

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -0,0 +1,81 @@
+import React, { useState, useEffect } from "react";
+import classnames from "classnames";
+import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
+import { globalProps } from "../utilities/globalProps";
+import { findItemById, checkIt, unCheckIt } from "./helper_functions";
+import MultiSelectHelper from "./_multi_select_helper";
+
+type MultiLevelSelectProps = {
+  aria?: { [key: string]: string };
+  className?: string;
+  data?: { [key: string]: string };
+  id?: string;
+  treeData?: { [key: string]: string }[];
+  onChange?: any;
+  onSelect?: (SelectedNodes: { [key: string]: any }) => void;
+};
+
+const MultiLevelSelect = (props: MultiLevelSelectProps) => {
+  const { aria = {}, className, data = {}, id, treeData, onSelect } = props;
+
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const classes = classnames(
+    buildCss("pb_multi_level_select"),
+    globalProps(props),
+    className
+  );
+
+  const [formattedData, setFormattedData] = useState(treeData);
+  const [selectedItems, setSelectedItems] = useState([]);
+
+  const onChange = (currentNode: { [key: string]: any }) => {
+    const updatedData = formattedData.map((item: any) => {
+      if (item.id === currentNode._id) {
+        if (currentNode.checked) {
+          checkIt(item, selectedItems, setSelectedItems);
+        } else {
+          unCheckIt(item, selectedItems, setSelectedItems);
+        }
+      } else if (item.children) {
+        const foundItem = findItemById(item.children, currentNode._id);
+        if (foundItem) {
+          if (currentNode.checked) {
+            checkIt(foundItem, selectedItems, setSelectedItems);
+          } else {
+            unCheckIt(foundItem, selectedItems, setSelectedItems);
+          }
+        }
+      }
+
+      return item;
+    });
+
+    setFormattedData(updatedData);
+  };
+
+  useEffect(() => {
+    const selected = selectedItems.filter(
+      (item: { [key: string]: any }) => item.checked
+    );
+    //filter to remove duplicate items
+    const uniqueSelected = selected.filter(
+      (obj, index, self) => index === self.findIndex((t) => t.id === obj.id)
+    );
+    onSelect(uniqueSelected);
+  }, [selectedItems]);
+
+  return (
+    <div {...ariaProps} {...dataProps} className={classes} id={id}>
+      <MultiSelectHelper
+        treeData={formattedData}
+        id={id}
+        onChange={onChange}
+        onSelect={onSelect}
+        {...props}
+      />
+    </div>
+  );
+};
+
+export default MultiLevelSelect;

data/app/pb_kits/playbook/pb_multi_level_select/_multi_select_helper.tsx

@@ -0,0 +1,30 @@
+import React from "react"
+import DropdownTreeSelect from "react-dropdown-tree-select"
+import "react-dropdown-tree-select/dist/styles.css"
+
+type HelperProps = {
+  id?: string
+  treeData?: { [key: string]: string }[]
+  onChange?: () => {}
+
+}
+
+const MultiSelectHelper = (props: HelperProps) => {
+  const { id, treeData, onChange } = props
+
+
+  return (
+      <DropdownTreeSelect
+        data={treeData}
+        id={id}
+        keepOpenOnSelect
+        keepTreeOnSearch
+        keepChildrenOnSearch
+        onChange={onChange}
+        texts={{ placeholder: "Select..." }}
+        mode='hierarchical'
+      />
+  )
+}
+
+export default MultiSelectHelper

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx

@@ -0,0 +1,86 @@
+import React from "react";
+import MultiLevelSelect from "../_multi_level_select";
+
+const treeData = [
+  {
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "powerhome1",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "people1",
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "talent1",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "business1",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "initiative1",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "development1",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "experience1",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "contact1",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "appointment1",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "customer1",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "energy1",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const MultiLevelSelectDefault = (props) => {
+  return (
+    <div>
+      <MultiLevelSelect
+          id="multiselect-default"
+          onSelect={(selectedNodes) =>
+          console.log("Selected Items", selectedNodes)
+          }
+          treeData={treeData}
+          {...props}
+      />
+    </div>
+  );
+};
+
+export default MultiLevelSelectDefault;

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md

@@ -0,0 +1,3 @@
+The MultiLevelSelect kit renders a multi leveled select dropdown based on data from the user. `treeData` is a required prop that is expected to contain the data in the form of an array of objects. See code snippet for an example data array.
+
+The `onSelect` prop returns an array of all checked items, irrespective of whether it is a parent, child or grandchild. Open the console on this example and check and uncheck checkboxes to see this is action!

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

@@ -0,0 +1,6 @@
+examples:
+  
+  
+  react:
+  - multi_level_select_default: Default
+  

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

@@ -0,0 +1 @@
+export { default as MultiLevelSelectDefault } from './_multi_level_select_default.jsx'

data/app/pb_kits/playbook/pb_multi_level_select/helper_functions.ts

@@ -0,0 +1,60 @@
+export const findItemById = (
+  items: { [key: string]: any }[],
+  id: string
+): any => {
+  for (const item of items) {
+    if (item.id === id) {
+      return item;
+    }
+    if (item.children) {
+      const found = findItemById(item.children, id);
+      if (found) {
+        return found;
+      }
+    }
+  }
+  return null;
+};
+
+export const checkIt = (
+  foundItem: { [key: string]: any },
+  selectedItems: any[],
+  setSelectedItems: Function
+) => {
+  if (!foundItem) {
+    return;
+  }
+
+  foundItem.checked = true;
+  foundItem.expanded = true;
+  selectedItems.push(foundItem);
+
+  if (foundItem.children) {
+    foundItem.children.map((x: any) => {
+      checkIt(x, selectedItems, setSelectedItems);
+    });
+  }
+
+  setSelectedItems([...selectedItems]);
+};
+
+export const unCheckIt = (
+  foundItem: { [key: string]: any },
+  selectedItems: any,
+  setSelectedItems: any
+) => {
+  if (!foundItem) {
+    return;
+  }
+
+  foundItem.checked = false;
+  const newSelectedItems = selectedItems.filter(
+    (item: any) => item.id !== foundItem.id
+  );
+  if (foundItem.children) {
+    foundItem.children.map((x: any) => {
+      unCheckIt(x, selectedItems, setSelectedItems);
+    });
+  }
+  setSelectedItems([...newSelectedItems]);
+};

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import { MultiLevelSelect } from '../'
+
+const treeData = {
+  label: 'search me',
+  value: 'searchme',
+  id:'default1',
+  children: [
+    {
+      label: 'search me too',
+      value: 'searchmetoo',
+      id:'default2',
+      children: [
+        {
+          label: 'No one can get me',
+          value: 'anonymous',
+          id:'default2',
+        },
+      ],
+    },
+  ],
+}
+
+const testId = "multiselect-test"
+test('should render custom class', () => {
+  render(
+      <MultiLevelSelect
+          className='custom-class'
+          data={{ testid: testId}}
+          onSelect={()=> console.log("hello")}
+          treeData={treeData}
+      /> 
+  ) 
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass('custom-class')
+})
+

data/app/pb_kits/playbook/pb_person_contact/{_person_contact.jsx → _person_contact.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 
@@ -17,14 +15,13 @@ type ContactItem = {
 }
 
 type PersonContactProps = {
-  aria?: object,
-  className?: string | array<string>,
-  dark?: boolean,
+  aria?: { [key: string]: string },
+  className?: string | string[],
   data?: object,
   firstName: string,
   id?: string,
   lastName: string,
-  contacts?: array<ContactItem>,
+  contacts?: ContactItem[],
 }
 
 const PersonContact = (props: PersonContactProps) => {
@@ -60,34 +57,34 @@ const PersonContact = (props: PersonContactProps) => {
 
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      className={classes}
+      id={id}
     >
       <Person
-          firstName={firstName}
-          lastName={lastName}
+        firstName={firstName}
+        lastName={lastName}
       />
       {validContacts().map((contactObject, index) => (
         <Contact
-            contactDetail={contactObject.contactDetail}
-            contactType={contactObject.contactType}
-            contactValue={contactObject.contactValue}
-            key={`valid-contact-${index}`}
+          contactDetail={contactObject.contactDetail}
+          contactType={contactObject.contactType}
+          contactValue={contactObject.contactValue}
+          key={`valid-contact-${index}`}
         />
       ))}
       {wrongContacts().map((contactObject, index) => (
         <div key={`wrong-contact-caption-wrapper-${index}`}>
           <Caption
-              className="wrong_numbers"
-              key={`wrong-contact-caption-${index}`}
-              text="wrong number"
+            className="wrong_numbers"
+            key={`wrong-contact-caption-${index}`}
+            text="wrong number"
           />
           <Contact
-              contactType={contactObject.contactType}
-              contactValue={contactObject.contactValue}
-              key={`wrong-contact-${index}`}
+            contactType={contactObject.contactType}
+            contactValue={contactObject.contactValue}
+            key={`wrong-contact-${index}`}
           />
         </div>
       ))}

data/app/pb_kits/playbook/pb_person_contact/person_contact.test.js

@@ -0,0 +1,112 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import PersonContact from './_person_contact'
+
+const testId = 'personContact'
+const multipleTestId = 'personContactMultiple'
+
+const PersonContactTest = (props) => {
+    return (
+        <>
+            <PersonContact
+                aria={{ label: testId }}
+                className={'custom-class'}
+                contacts={[
+                    {
+                        contactType: 'email',
+                        contactValue: 'email@example.com',
+                    },
+                    {
+                        contactValue: '5555555555',
+                        contactDetail: 'Home',
+                    },
+                    {
+                        contactType: 'work',
+                        contactValue: '3245627482',
+                        contactDetail: 'Work',
+                    },
+                ]}
+                data={{ testid: testId }}
+                firstName="Jose"
+                id={testId}
+                lastName="da Silva"
+                {...props}
+            />
+            <PersonContact
+                contacts={[
+                    {
+                        contactValue: '5555555555',
+                        contactType: 'wrong-phone',
+                    },
+                ]}
+                data={{ testid: multipleTestId }}
+                firstName="Brenda"
+                lastName="Walters"
+                {...props}
+            />
+        </>
+    )
+}
+
+test('should render custom class and data', () => {
+    render(<PersonContactTest />)
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('custom-class')
+})
+
+test('should render id', () => {
+    render(<PersonContactTest />)
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveProperty('id', testId)
+})
+
+test('should render aria-label', () => {
+    render(<PersonContactTest />)
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveAttribute('aria-label', testId)
+})
+
+test('should render firstName', () => {
+    render(<PersonContactTest />)
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveTextContent('Jose')
+})
+
+test('should render lastName', () => {
+    render(<PersonContactTest />)
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveTextContent('da Silva')
+})
+
+test('should render contact value', () => {
+    render(<PersonContactTest />)
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveTextContent('(555) 555-5555')
+})
+
+test('should render contact detail', () => {
+    render(<PersonContactTest />)
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveTextContent('Home')
+})
+
+test('should render multiple contacts', () => {
+    render(<PersonContactTest />)
+
+    const kit = screen.getByTestId(multipleTestId)
+    expect(kit).toHaveTextContent('Brenda Walters')
+})
+
+test('should render wrong number', () => {
+    render(<PersonContactTest />)
+
+    const kit = screen.getByTestId(multipleTestId)
+    expect(kit).toHaveTextContent('wrong number')
+})

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -1,32 +1,32 @@
 /* @flow */
-import React, { useEffect, useRef, useState } from 'react'
-import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
-import intlTelInput from 'intl-tel-input'
-import 'intl-tel-input/build/css/intlTelInput.css'
-import TextInput from '../pb_text_input/_text_input'
+import React, { useEffect, useRef, useState } from "react"
+import classnames from "classnames"
+import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props"
+import { globalProps } from "../utilities/globalProps"
+import intlTelInput from "intl-tel-input"
+import "intl-tel-input/build/css/intlTelInput.css"
+import TextInput from "../pb_text_input/_text_input"
 
 declare global {
   interface Window {
-    intlTelInputGlobals: any,
+    intlTelInputGlobals: any
   }
 }
 
 type PhoneNumberInputProps = {
-  aria?: { [key: string]: string },
-  className?: string,
-  data?: { [key: string]: string },
-  disabled?: boolean,
-  id?: string,
-  initialCountry?: string,
-  isValid?: (valid: boolean) => void,
-  label?: string,
-  name?: string,
-  onChange?: (e: React.FormEvent<HTMLInputElement>) => void,
-  onlyCountries: string[],
-  preferredCountries?: string[],
-  value?: string,
+  aria?: { [key: string]: string }
+  className?: string
+  data?: { [key: string]: string }
+  disabled?: boolean
+  id?: string
+  initialCountry?: string
+  isValid?: (valid: boolean) => void
+  label?: string
+  name?: string
+  onChange?: (e: React.FormEvent<HTMLInputElement>) => void
+  onlyCountries: string[]
+  preferredCountries?: string[]
+  value?: string
 }
 
 enum ValidationError {
@@ -35,17 +35,20 @@ enum ValidationError {
 }
 
 const formatToGlobalCountryName = (countryName: string) => {
-  return countryName.split('(')[0].trim()
+  return countryName.split("(")[0].trim()
 }
 
 const formatAllCountries = () => {
   let countryData = window.intlTelInputGlobals.getCountryData()
+
   for (let i = 0; i < countryData.length; i++) {
     let country = countryData[i]
     country.name = formatToGlobalCountryName(country.name)
   }
 }
 
+formatAllCountries()
+
 const containOnlyNumbers = (value: string) => {
   return /^(\++)*(\d+)$/.test(value)
 }
@@ -56,25 +59,33 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
     className,
     data = {},
     disabled = false,
-    id = '',
-    initialCountry = '',
-    isValid = () => {void 0 },
-    label = '',
-    name = '',
-    onChange = () => { void 0 },
+    id = "",
+    initialCountry = "",
+    isValid = () => {
+      void 0
+    },
+    label = "",
+    name = "",
+    onChange = () => {
+      void 0
+    },
     onlyCountries = [],
     preferredCountries = [],
-    value = '',
+    value = "",
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_phone_number_input'), globalProps(props), className)
+  const classes = classnames(
+    buildCss("pb_phone_number_input"),
+    globalProps(props),
+    className
+  )
 
   const inputRef = useRef<HTMLInputElement>()
   const [inputValue, setInputValue] = useState(value)
   const [itiInit, setItiInit] = useState<any>()
-  const [error, setError] = useState('')
+  const [error, setError] = useState("")
 
   const validateTooLongNumber = (itiInit: any) => {
     const error = itiInit.getValidationError()
@@ -83,7 +94,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
       const countryName = itiInit.getSelectedCountryData().name
       setError(`Invalid ${countryName} phone number (too long)`)
     } else {
-      setError('')
+      setError("")
     }
   }
 
@@ -98,7 +109,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
 
   const validateOnlyNumbers = () => {
     if (inputValue && !containOnlyNumbers(inputValue)) {
-      setError('Invalid phone number. Enter numbers only.')
+      setError("Invalid phone number. Enter numbers only.")
     }
   }
 
@@ -114,29 +125,32 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
     isValid(itiInit.isValidNumber())
   }
 
+  // Separating Concerns as React Docs Recommend
+  // This also Fixes things for our react_component rendering on the Rails Side
   useEffect(() => {
     formatAllCountries()
+  }, [])
 
+  useEffect(() => {
     const telInputInit = new intlTelInput(inputRef.current, {
-        utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/utils.js',
-        separateDialCode: true,
-        preferredCountries,
-        allowDropdown: !disabled,
-        initialCountry,
-        onlyCountries,
-      }
+      utilsScript:
+        "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/utils.js",
+      separateDialCode: true,
+      preferredCountries,
+      allowDropdown: !disabled,
+      initialCountry,
+      onlyCountries,
+    })
+
+    inputRef.current.addEventListener("countrychange", () =>
+      validateTooLongNumber(telInputInit)
     )
-    
-    inputRef.current.addEventListener("countrychange", () => validateTooLongNumber(telInputInit))
+
     setItiInit(telInputInit)
   }, [])
 
   return (
-    <div
-      {...ariaProps}
-      {...dataProps}
-      className={classes}
-    >
+    <div {...ariaProps} {...dataProps} className={classes}>
       <TextInput
         disabled={disabled}
         error={error}

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("phone_number_input", props: {
+    initial_country: "br"
+}) %>