@bigbinary/neeto-molecules 1.0.17 → 1.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-molecules",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "description": "A package of reusable molecular components for neeto products.",
   "repository": "git@github.com:bigbinary/neeto-molecules.git",
   "author": "Amaljith K <amaljith.k@bigbinary.com>",
@@ -84,6 +84,7 @@
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
     "babel-preset-react": "6.24.1",
     "babel-preset-typescript": "^7.0.0-alpha.19",
+    "countries-list": "^2.6.1",
     "css-loader": "4.3.0",
     "cypress": "11.2.0",
     "dayjs": "1.11.1",
@@ -105,6 +106,7 @@
     "jest": "27.5.1",
     "js-logger": "^1.6.1",
     "json-server": "0.17.1",
+    "libphonenumber-js": "^1.10.26",
     "lint-staged": "^12.3.7",
     "mixpanel-browser": "^2.45.0",
     "mousetrap": "^1.6.5",

package/src/translations/en.json

@@ -329,6 +329,12 @@
           "emailAddress": "Please enter at least one email address"
         }
       }
+    },
+    "phoneNumberInput": {
+      "placeholder": "{{prefix}} type phone number",
+      "validations": {
+        "invalid": "Phone number is invalid"
+      }
     }
   }
 }

package/types/PhoneNumber.d.ts

@@ -0,0 +1,110 @@
+import React from "react";
+import { InputProps, SelectProps, TypographyProps } from "@bigbinary/neetoui";
+import { CountryCode } from "libphonenumber-js";
+import { StringSchema } from "yup";
+export interface PhoneNumberInputProps extends InputProps {
+  value?: string;
+  onChange?: (value: string) => any;
+  className?: string;
+  selectProps?: SelectProps;
+  error?: string;
+  defaultCountry?: string;
+}
+export interface FormikPhoneNumberInputProps extends PhoneNumberInputProps {
+  name: string;
+}
+export interface PhoneNumberProps extends TypographyProps {
+  className?: string;
+  defaultCountry?: string;
+  children?: React.ReactNode;
+  showEmoji?: boolean;
+  value?: string;
+}
+export const PhoneNumberInput: React.ForwardRefExoticComponent<PhoneNumberInputProps>;
+export const FormikPhoneNumberInput: React.ForwardRefExoticComponent<FormikPhoneNumberInputProps>;
+export
+/**
+ *
+ * An input component to input and validate phone numbers with a country code
+ *
+ * picker.
+ *
+ * ![PhoneNumberInput](https://user-images.githubusercontent.com/35297280/231367938-93aa94b0-2a8c-44b3-b1c7-8c60843e40c4.png|height=200|width=300)
+ *
+ * Props:
+ *
+ * @example 
+ *
+ * import React, { useState } from "react";
+ * 
+ * import { PhoneNumberInput } from "@bigbinary/neeto-molecules/PhoneNumber";
+ * 
+ * const App = () => {
+ *   const [phoneNumber, setPhoneNumber] = useState("");
+ * 
+ *   return <PhoneNumberInput value={phoneNumber} onChange={setPhoneNumber} />;
+ * };
+ * @endexample
+ * A typography component to display phone numbers along with the flag of the
+ *
+ * country associated with it.
+ *
+ * ![PhoneNumber](https://user-images.githubusercontent.com/35297280/231367945-ee5f0921-92e3-4086-a8e2-f9ab63cf9a37.png|height=200|width=300)
+ *
+ * Props:
+ *
+ * @example 
+ *
+ * import { PhoneNumber } from "@bigbinary/neeto-molecules/PhoneNumber";
+ * 
+ * const App = () => <PhoneNumber showEmoji value="+919988776655" />;
+ * @endexample
+ * The PhoneNumberInput component wrapped in Formik.
+ *
+ * @example 
+ *
+ * import { FormikPhoneNumberInput, validation } from "@bigbinary/neeto-molecules/PhoneNumber";
+ * import { Form } from "@bigbinary/neetoui/formik";
+ * 
+ * const App = () => (
+ *   return (
+ *     <Form
+ *       formikProps={{
+ *         initialValues: { phoneNumber: "+919988776655" },
+ *         validationSchema: yup.object({ phoneNumber: validation().required() }),
+ *         onSubmit: ({ phoneNumber }) => alert(phoneNumber),
+ *       }}
+ *     >
+ *       <FormikPhoneNumberInput name="phoneNumber" />
+ *     </Form>
+ *   );
+ * );
+ * @endexample
+ * A utility function that exports a Yup validation schema to be used in Formik. It
+ *
+ * accepts a string as an optional argument to override the default validation
+ *
+ * message.
+ *
+ * @example 
+ *
+ * import { validation } from "@bigbinary/neeto-molecules/PhoneNumber";
+ * import * as yup from "yup";
+ * 
+ * const VALIDATION_SCHEMA = yup.object({
+ *   phoneNumber: validation("Phone number is invalid"),
+ * });
+ * @endexample
+ * A utility function to check whether a phone number is valid. It accepts a phone
+ *
+ * number and a default country as argument and returns a boolean value specifying
+ *
+ * whether the phone number is valid or not.
+ *
+*/
+const PhoneNumber: React.FC<PhoneNumberProps>;
+export const isPhoneNumberValid: (phoneNumber: string, defaultCountry?: CountryCode | {
+  defaultCountry?: CountryCode;
+  defaultCallingCode?: string;
+}) => boolean;
+export const validation: (message?: string) => StringSchema<any, any, any>;