playbook_ui 12.5.0.pre.alpha.phonerails1 → 12.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e827c4077969ef2258c6c650173ef5c8227d81aca0a0201c19ae0e136de1decb
-  data.tar.gz: aec0d42668e214f8a32b4220704c76af66a2b55a43fbeb0efb28eb6832c45d9a
+  metadata.gz: 92319a3771d2aa0a3198e988dc95b91e977ee532db2884cd6197912cb045caae
+  data.tar.gz: caaa026385dd1d94a65175ba00ef818caab6a901c5bb0da90cd24920158e885f
 SHA512:
-  metadata.gz: ed4ab9a7d46404031c54b2c4e22731d4260d00d2db11af3b280b03f92df607f1afd8a6f3b68d6b52aa6e8866605c5c7fa85c4598a4323b2dfbc6a9d5490ff196
-  data.tar.gz: 23d61876cc9d04ea7b378b9ecc896b5d4f0a8d04b336a2b3f0fbf81c24189cc8ac86cc2f0eb65b3760d2da51c9699798a8dbe38c20a98744c3076b6f450706ab
+  metadata.gz: 7469df006da7d11b70de500123a4d260db2a2c8c0b79ee80766dde6a760eaa81c71b59880aad14ee48a7d9ee91b2c6237e766b8c046a19b088b61830b0e5f2b6
+  data.tar.gz: 7e0f3a0e05f403da3b31e8b21ab01ee92fb4139a5223af663a62f9672ff381009a75cd1a9f30ea57289e28ffda043f23cab7364eae1e54973e9f4922d8884f28

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,20 +35,17 @@ 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)
 }
@@ -59,33 +56,25 @@ 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()
@@ -94,7 +83,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
       const countryName = itiInit.getSelectedCountryData().name
       setError(`Invalid ${countryName} phone number (too long)`)
     } else {
-      setError("")
+      setError('')
     }
   }
 
@@ -109,7 +98,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.')
     }
   }
 
@@ -125,32 +114,29 @@ 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,
-    })
-
-    inputRef.current.addEventListener("countrychange", () =>
-      validateTooLongNumber(telInputInit)
+        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))
     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/example.yml

@@ -7,7 +7,4 @@ examples:
   - phone_number_input_only_countries: Limited Countries
 
   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_default: Default

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.html.erb

@@ -1 +1,15 @@
-<%= react_component("PhoneNumberInput", object.phone_number_input_options) %>
+<%= react_component("PhoneNumberInput", object.phone_number_input_options) %>
+
+<script>
+  const formatToGlobalCountryName = () => {
+    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)
+    }
+  }
+  </script>

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "12.5.0"
-  VERSION = "12.5.0.pre.alpha.phonerails1"
+  PREVIOUS_VERSION = "12.4.0"
+  VERSION = "12.5.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.5.0.pre.alpha.phonerails1
+  version: 12.5.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-03-01 00:00:00.000000000 Z
+date: 2023-02-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1561,13 +1561,10 @@ files:
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.html.erb
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.md
-- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.html.erb
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.jsx
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.md
-- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.html.erb
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.jsx
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.md
-- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.html.erb
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
 - app/pb_kits/playbook/pb_phone_number_input/docs/example.yml
@@ -2431,9 +2428,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubygems_version: 3.3.7
 signing_key:

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

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

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

@@ -1,4 +0,0 @@
-<%= pb_rails("phone_number_input", props: {
-    initial_country: "br",
-    only_countries: ['us', 'br']
-}) %>

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

@@ -1,4 +0,0 @@
-<%= pb_rails("phone_number_input", props: {
-    initial_country: "br",
-    preferred_countries: ['us', 'br', 'ph', 'gb']
-}) %>