playbook_ui 12.24.0.pre.alpha.play824753 → 12.24.0.pre.alpha.railsmultilevelimprovements739

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f2e3e2044042e62d066d48c17d7135165b8c174388b509a208f92f959cc6acf3
-  data.tar.gz: 40d8b2352a9fab721ca2e653bbd6adecba555feafc95c216f8186b04b7daed75
+  metadata.gz: ca13d82593114ee6fa9797c521e2e7da4b675f48923d7ad41c74fc14d5d224d6
+  data.tar.gz: 8f1309ad083e6e90c2a6278b7f3afb4cdcea79e06dcfbb7481ae9273d4f9f6ec
 SHA512:
-  metadata.gz: 9ef16718ea387d46da9e0c705c748e31c0283dac477d65d5ed7102ccdcad8c6de0d016a958c8e95f4500cba0535e01ce58408944c1e18c66b295bdd163477f93
-  data.tar.gz: c88b5a2fbeeacc2cb1d0cf33a9c46643ffecbcd617197df189167213ed8593c82b00c4c23d13a4c70619a614cf5359160d98f336c9efee81db709590d5f5fda3
+  metadata.gz: 8f1e03060911871628a3c79d92bb7c01fbedf754b705a2feefe065082b03dca4bde92bec88d390a508639a1e5ac1f157d0130775cf6056d55260beae9b149c18
+  data.tar.gz: 0ce1d542f2d0a41150fb52757501f9423392495c0554b5757330c178db347168973bb55f41fd86e017dee8475d27545f58332d60609667ec727d17da63241583

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

@@ -1,16 +1,11 @@
-import React, { forwardRef, useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import classnames from 'classnames'
-
-import intlTelInput from 'intl-tel-input'
-import 'intl-tel-input/build/css/intlTelInput.css'
-import 'intl-tel-input/build/js/utils.js'
-
 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 { Callback } from '../types'
-import { isEmpty } from '../utilities/object'
+import 'intl-tel-input/build/js/utils.js'
 
 declare global {
   interface Window {
@@ -24,25 +19,20 @@ type PhoneNumberInputProps = {
   dark?: boolean,
   data?: { [key: string]: string },
   disabled?: boolean,
-  error?: string,
   id?: string,
   initialCountry?: string,
   isValid?: (valid: boolean) => void,
   label?: string,
   name?: string,
   onChange?: (e: React.FormEvent<HTMLInputElement>) => void,
-  onValidate?: Callback<boolean, void>,
   onlyCountries: string[],
   preferredCountries?: string[],
-  required?: boolean,
   value?: string,
 }
 
 enum ValidationError {
   TooShort = 2,
   TooLong = 3,
-  MissingAreaCode = 4,
-  SomethingWentWrong = -99
 }
 
 const formatToGlobalCountryName = (countryName: string) => {
@@ -50,10 +40,10 @@ const formatToGlobalCountryName = (countryName: string) => {
 }
 
 const formatAllCountries = () => {
-  const countryData = window.intlTelInputGlobals.getCountryData()
+  let countryData = window.intlTelInputGlobals.getCountryData()
 
   for (let i = 0; i < countryData.length; i++) {
-    const country = countryData[i]
+    let country = countryData[i]
     country.name = formatToGlobalCountryName(country.name)
   }
 }
@@ -81,9 +71,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
     onChange = () => {
       void 0
     },
-    onValidate = () => null,
     onlyCountries = [],
-    required = false,
     preferredCountries = [],
     value = "",
   } = props
@@ -99,84 +87,39 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
   const inputRef = useRef<HTMLInputElement>()
   const [inputValue, setInputValue] = useState(value)
   const [itiInit, setItiInit] = useState<any>()
-  const [error, setError] = useState(props.error)
+  const [error, setError] = useState('')
   const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
   const [selectedData, setSelectedData] = useState()
 
-  useEffect(() => {
-    if (error?.length > 0) {
-      onValidate(false)
-    } else {
-      onValidate(true)
-    }
-  }, [error, onValidate])
-
-  if (itiInit) isValid(itiInit.isValidNumber())
-
-  const showFormattedError = (reason = '') => {
-    const countryName = itiInit.getSelectedCountryData().name
-    const reasonText = reason.length > 0 ? ` (${reason})` : ''
-    setError(`Invalid ${countryName} phone number${reasonText}`)
-    return true
-  }
-
   const validateTooLongNumber = (itiInit: any) => {
-    if (!itiInit) return
-    if (itiInit.getValidationError() === ValidationError.TooLong) {
-      return showFormattedError('too long')
-    } else {
-      setError('')
-    }
-  }
+    const error = itiInit.getValidationError()
 
-  const validateTooShortNumber = (itiInit: any) => {
-    if (!itiInit) return
-    if (itiInit.getValidationError() === ValidationError.TooShort) {
-      return showFormattedError('too short')
+    if (error === ValidationError.TooLong) {
+      const countryName = itiInit.getSelectedCountryData().name
+      setError(`Invalid ${countryName} phone number (too long)`)
     } else {
-      if (inputValue.length === 1) {
-        return showFormattedError('too short')
-      } else {
-        setError('')
-      }
+      setError("")
     }
   }
 
-  const validateOnlyNumbers = (itiInit: any) => {
-    if (!itiInit) return
-    if (inputValue && !containOnlyNumbers(inputValue)) {
-      return showFormattedError('enter numbers only')
-    }
-  }
+  const validateTooShortNumber = () => {
+    const error = itiInit.getValidationError()
 
-  const validateUnhandledError = (itiInit: any) => {
-    if (!required || !itiInit) return
-    if (itiInit.getValidationError() === ValidationError.SomethingWentWrong) {
-      if (inputValue.length === 1) {
-        return showFormattedError('too short')
-      } else if (inputValue.length === 0) {
-        setError('Missing phone number')
-        return true
-      } else {
-        return showFormattedError()
-      }
+    if (error === ValidationError.TooShort) {
+      const countryName = itiInit.getSelectedCountryData().name
+      setError(`Invalid ${countryName} phone number (too short)`)
     }
   }
 
-  const validateMissingAreaCode = (itiInit: any) => {
-    if (!required || !itiInit) return
-    if (itiInit.getValidationError() === ValidationError.MissingAreaCode) {
-      showFormattedError('missing area code')
-      return true
+  const validateOnlyNumbers = () => {
+    if (inputValue && !containOnlyNumbers(inputValue)) {
+      setError("Invalid phone number. Enter numbers only.")
     }
   }
 
   const validateErrors = () => {
-    if (validateOnlyNumbers(itiInit)) return
-    if (validateTooLongNumber(itiInit)) return
-    if (validateTooShortNumber(itiInit)) return
-    if (validateUnhandledError(itiInit)) return
-    if (validateMissingAreaCode(itiInit)) return
+    validateTooShortNumber()
+    validateOnlyNumbers()
   }
 
   const getCurrentSelectedData = (itiInit: any, inputValue: string) => {
@@ -185,31 +128,34 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
 
   const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(evt.target.value)
+    validateTooLongNumber(itiInit)
     const phoneNumberData = getCurrentSelectedData(itiInit, evt.target.value)
     setSelectedData(phoneNumberData)
     onChange(phoneNumberData)
+    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(() => {
+    formatAllCountries()
+  }, [])
 
   useEffect(() => {
-    const telInputInit = intlTelInput(inputRef.current, {
+    const telInputInit = new intlTelInput(inputRef.current, {
       separateDialCode: true,
       preferredCountries,
       allowDropdown: !disabled,
-      autoInsertDialCode: false,
       initialCountry,
       onlyCountries,
-      utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.1.6/js/utils.min.js"
-    })
+    }
+    )
 
     inputRef.current.addEventListener("countrychange", (evt: Event) => {
+      validateTooLongNumber(telInputInit)
       const phoneNumberData = getCurrentSelectedData(telInputInit, (evt.target as HTMLInputElement).value)
       setSelectedData(phoneNumberData)
       onChange(phoneNumberData)
-      validateErrors()
     })
 
     inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
@@ -218,35 +164,24 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
     setItiInit(telInputInit)
   }, [])
 
-  let textInputProps: {[key: string]: any} = {
-    className: dropDownIsOpen ? 'dropdown_open' : '',
-    dark,
-    "data-phone-number": JSON.stringify(selectedData),
-    disabled,
-    error,
-    type: 'tel',
-    id,
-    label,
-    name,
-    onBlur: validateErrors,
-    onChange: handleOnChange,
-    value: inputValue
-  }
-
-  let wrapperProps: Record<string, unknown> = { className: classes }
-
-  if (!isEmpty(aria)) textInputProps = {...textInputProps, ...ariaProps}
-  if (!isEmpty(data)) wrapperProps = {...wrapperProps, ...dataProps}
-  if (required) textInputProps.required = true
-
   return (
-    <div {...wrapperProps}>
+    <div {...ariaProps} {...dataProps} className={classes}>
       <TextInput
-          ref={inputRef}
-          {...textInputProps}
+        className={dropDownIsOpen ? 'dropdown_open' : ''}
+        dark={dark}
+        data-phone-number={JSON.stringify(selectedData)}
+        disabled={disabled}
+        error={error}
+        id={id}
+        label={label}
+        name={name}
+        onBlur={() => validateErrors()}
+        onChange={handleOnChange}
+        ref={inputRef}
+        value={inputValue}
       />
     </div>
   )
 }
 
-export default forwardRef(PhoneNumberInput)
+export default PhoneNumberInput

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

@@ -5,11 +5,9 @@ examples:
   - phone_number_input_preferred_countries: Preferred Countries
   - phone_number_input_initial_country: Initial Country
   - phone_number_input_only_countries: Limited Countries
-  - phone_number_input_validation: Form Validation
 
   rails:
   - phone_number_input_default: Default
   - phone_number_input_preferred_countries: Preferred Countries
   - phone_number_input_initial_country: Initial Country
-  - phone_number_input_only_countries: Limited Countries
-  - phone_number_input_validation: Form Validation
+  - phone_number_input_only_countries: Limited Countries

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

@@ -2,4 +2,3 @@ export { default as PhoneNumberInputDefault } from './_phone_number_input_defaul
 export { default as PhoneNumberInputPreferredCountries } from './_phone_number_input_preferred_countries'
 export { default as PhoneNumberInputInitialCountry } from './_phone_number_input_initial_country'
 export { default as PhoneNumberInputOnlyCountries } from './_phone_number_input_only_countries'
-export { default as PhoneNumberInputValidation } from './_phone_number_input_validation'

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb

@@ -5,8 +5,6 @@ module Playbook
     class PhoneNumberInput < Playbook::KitBase
       prop :disabled, type: Playbook::Props::Boolean,
                       default: false
-      prop :required, type: Playbook::Props::Boolean,
-                      default: false
       prop :initial_country, type: Playbook::Props::String,
                              default: ""
       prop :label, type: Playbook::Props::String,
@@ -17,8 +15,6 @@ module Playbook
                             default: []
       prop :preferred_countries, type: Playbook::Props::Array,
                                  default: []
-      prop :error, type: Playbook::Props::String,
-                   default: ""
       prop :value, type: Playbook::Props::String,
                    default: ""
 
@@ -31,13 +27,11 @@ module Playbook
           id: id,
           dark: dark,
           disabled: disabled,
-          error: error,
           initialCountry: initial_country,
           label: label,
           name: name,
           onlyCountries: only_countries,
           preferredCountries: preferred_countries,
-          required: required,
           value: value,
         }
       end

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js

@@ -1,122 +1,74 @@
-import React from "react";
-import { render, screen } from "../utilities/test-utils";
-import PhoneNumberInput from "./_phone_number_input";
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import PhoneNumberInput from './_phone_number_input'
 
-const testId = "phoneNumberInput";
+const testId = "phoneNumberInput"
 
-test("should be disabled", () => {
-    const props = {
-        disabled: true,
-        id: testId,
-    };
-
-    render(<PhoneNumberInput {...props} />);
-    const kit = screen.getByRole("textbox");
-    expect(kit).toBeDisabled();
-});
-
-test("should be enabled by default", () => {
-    const props = {
-        id: testId,
-    };
-
-    render(<PhoneNumberInput {...props} />);
-    const kit = screen.getByRole("textbox");
-    expect(kit).not.toBeDisabled();
-});
-
-test("should have label", () => {
-    const label = "Phone Number";
-    const props = {
-        id: testId,
-        label,
-    };
-
-    render(<PhoneNumberInput {...props} />);
-    const kit = screen.getByText(label);
-    expect(kit).toBeInTheDocument();
-});
-
-test("should pass data prop", () => {
-    const props = {
-        data: { testid: testId },
-        id: testId,
-    };
-
-    render(<PhoneNumberInput {...props} />);
-    const kit = screen.getByTestId(testId);
-    expect(kit).toBeInTheDocument();
-});
-
-test("should pass className prop", () => {
-    const className = "custom-class-name";
-    const props = {
-        className,
-        data: { testid: testId },
-        id: testId,
-    };
-
-    render(<PhoneNumberInput {...props} />);
-    const kit = screen.getByTestId(testId);
-    expect(kit).toHaveClass(className);
-});
-
-test("should pass value prop", () => {
-    const value = "1234567890";
-    const props = {
-        id: testId,
-        value,
-    };
+test('should be disabled', () => {
+  const props = {
+    disabled: true,
+    id: testId,
+  }
 
-    render(<PhoneNumberInput {...props} />);
-    const kit = screen.getByRole("textbox");
-    expect(kit).toHaveDisplayValue(value);
-});
+  render(<PhoneNumberInput {...props} />)
+  const kit = screen.getByRole("textbox")
+  expect(kit).toBeDisabled()
+})
 
-//TODO: test required field presence
-test("should pass required prop", () => {
-    const props = {
-        id: testId,
-    };
+test('should be enabled by default', () => {
+  const props = {
+    id: testId,
+  }
 
-    render(
-        <PhoneNumberInput
-            required
-            {...props}
-        />
-    );
-    const kit = screen.getByRole("textbox");
-    expect(kit).toHaveAttribute("required");
-});
+  render(<PhoneNumberInput {...props} />)
+  const kit = screen.getByRole("textbox")
+  expect(kit).not.toBeDisabled()
+})
 
-test("should have error attribute when invalid", () => {
+test('should have label', () => {
+  const label = 'Phone Number'
   const props = {
-      id: testId,
-      error: "Something isn't right here."
-  };
+    id: testId,
+    label,
+  }
 
-  render(
-      <PhoneNumberInput
-          {...props}
-      />
-  );
-  const kit = screen.getByRole("textbox");
-  expect(kit).toHaveAttribute("error");
-});
-
-test("should trigger callback", () => {
-  const handleOnValidate = jest.fn((valid) => valid)
+  render(<PhoneNumberInput {...props} />)
+  const kit = screen.getByText(label)
+  expect(kit).toBeInTheDocument()
+})
 
+test('should pass data prop', () => {
   const props = {
-      id: testId,
-      onValidate: handleOnValidate
-  };
+    data: { testid: testId },
+    id: testId,
+  }
 
-  render(
-      <PhoneNumberInput
-          {...props}
-      />
-  );
+  render(<PhoneNumberInput {...props} />)
+  const kit = screen.getByTestId(testId)
+  expect(kit).toBeInTheDocument()
+})
 
-  expect(handleOnValidate).toBeCalledWith(true)
-});
+test('should pass className prop', () => {
+  const className = 'custom-class-name'
+  const props = {
+    className,
+    data: { testid: testId },
+    id: testId,
+  }
+
+  render(<PhoneNumberInput {...props} />)
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(className)
+})
+
+test('should pass value prop', () => {
+  const value = '1234567890'
+  const props = {
+    id: testId,
+    value,
+  }
+
+  render(<PhoneNumberInput {...props} />)
+  const kit = screen.getByRole("textbox")
+  expect(kit).toHaveDisplayValue(value)
+})