@availity/phone 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,411 @@
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+# 1.0.0 (2024-08-22)
+
+
+### Bug Fixes
+
+* **phone:** remove yup.number validation method, remove async from test ([b346896](https://github.com/Availity/availity-react/commit/b346896414fc71c208be4f39cf6ac77412c5fea0))
+* **phone:** typings for PhoneProps and ExtensionProps should extend FieldProps ([cdd467b](https://github.com/Availity/availity-react/commit/cdd467b3158dead419c3bfa6f551e5badf6edf3c))
+* **phone:** update types ([30c7fc8](https://github.com/Availity/availity-react/commit/30c7fc885b1b91b04a5153fbf796e8c136692be4))
+* upgrade yup and update sb stories ([68aeafe](https://github.com/Availity/availity-react/commit/68aeafe4fd7d90d7c88dbb24636ba7770fe87aa3))
+
+
+* feat(phone)!: upgrade to yup 0.32.0 ([dadde41](https://github.com/Availity/availity-react/commit/dadde41e7535ee444a0737a7ba31d5467a34133f))
+
+
+### Features
+
+* **form:** add currency input ([fa9eea6](https://github.com/Availity/availity-react/commit/fa9eea6a3b3dd2ef741a0658c102e36c6db5288c))
+* move storybook, stories, and fix hmr ([2f65f71](https://github.com/Availity/availity-react/commit/2f65f71769d2d981e22700b87a09516833588f64))
+* **phone:** add types ([b5cf0e6](https://github.com/Availity/availity-react/commit/b5cf0e62871266cc2e5689258912b1ba533bceb5))
+* **phone:** initial commit for phone package ([76b7227](https://github.com/Availity/availity-react/commit/76b7227adee750265daa4e65486606d102a1e5c2))
+* **phone:** initial format value ([#1447](https://github.com/Availity/availity-react/issues/1447)) ([3398a65](https://github.com/Availity/availity-react/commit/3398a65973bc46152ccd302f14b458e0af4d59d1))
+
+
+### BREAKING CHANGES
+
+* must be using yup 0.32.0
+
+
+
+# [2.2.0](https://github.com/Availity/availity-react/compare/@availity/phone@2.1.4...@availity/phone@2.2.0) (2024-08-01)
+
+
+### Features
+
+* **phone:** initial format value ([#1447](https://github.com/Availity/availity-react/issues/1447)) ([3398a65](https://github.com/Availity/availity-react/commit/3398a65973bc46152ccd302f14b458e0af4d59d1))
+
+
+
+## [2.1.4](https://github.com/Availity/availity-react/compare/@availity/phone@2.1.3...@availity/phone@2.1.4) (2023-10-30)
+
+
+
+## [2.1.3](https://github.com/Availity/availity-react/compare/@availity/phone@2.1.2...@availity/phone@2.1.3) (2023-10-09)
+
+
+
+## [2.1.2](https://github.com/Availity/availity-react/compare/@availity/phone@2.1.1...@availity/phone@2.1.2) (2023-02-22)
+
+
+
+## [2.1.1](https://github.com/Availity/availity-react/compare/@availity/phone@2.1.0...@availity/phone@2.1.1) (2022-06-14)
+
+
+
+# [2.1.0](https://github.com/Availity/availity-react/compare/@availity/phone@2.0.1...@availity/phone@2.1.0) (2022-06-14)
+
+
+### Features
+
+* **form:** add currency input ([fa9eea6](https://github.com/Availity/availity-react/commit/fa9eea6a3b3dd2ef741a0658c102e36c6db5288c))
+
+
+
+## [2.0.1](https://github.com/Availity/availity-react/compare/@availity/phone@2.0.0...@availity/phone@2.0.1) (2022-06-10)
+
+
+
+# [2.0.0](https://github.com/Availity/availity-react/compare/@availity/phone@1.2.5...@availity/phone@2.0.0) (2022-05-24)
+
+
+### Bug Fixes
+
+* upgrade yup and update sb stories ([68aeafe](https://github.com/Availity/availity-react/commit/68aeafe4fd7d90d7c88dbb24636ba7770fe87aa3))
+
+
+* feat(phone)!: upgrade to yup 0.32.0 ([dadde41](https://github.com/Availity/availity-react/commit/dadde41e7535ee444a0737a7ba31d5467a34133f))
+
+
+### BREAKING CHANGES
+
+* must be using yup 0.32.0
+
+
+
+## 1.2.5 (2022-03-09)
+
+**Note:** Version bump only for package @availity/phone
+
+
+
+
+
+## [1.2.4](https://github.com/Availity/availity-react/compare/@availity/phone@1.2.3...@availity/phone@1.2.4) (2022-02-11)
+
+**Note:** Version bump only for package @availity/phone
+
+
+
+
+
+## [1.2.3](https://github.com/Availity/availity-react/compare/@availity/phone@1.2.2...@availity/phone@1.2.3) (2021-12-20)
+
+**Note:** Version bump only for package @availity/phone
+
+
+
+
+
+## 1.2.2 (2021-12-14)
+
+**Note:** Version bump only for package @availity/phone
+
+
+
+
+
+## 1.2.1 (2021-11-30)
+
+**Note:** Version bump only for package @availity/phone
+
+
+
+
+
+# [1.2.0](https://github.com/Availity/availity-react/compare/@availity/phone@1.1.31...@availity/phone@1.2.0) (2021-11-15)
+
+
+### Features
+
+* move storybook, stories, and fix hmr ([2f65f71](https://github.com/Availity/availity-react/commit/2f65f71769d2d981e22700b87a09516833588f64))
+
+
+
+
+
+## [1.1.32](https://github.com/Availity/availity-react/compare/@availity/phone@1.1.31...@availity/phone@1.1.32) (2021-11-12)
+
+**Note:** Version bump only for package @availity/phone
+
+
+
+
+
+## [1.1.31](https://github.com/Availity/availity-react/compare/@availity/phone@1.1.29...@availity/phone@1.1.31) (2021-11-05)
+
+**Note:** Version bump only for package @availity/phone
+
+
+
+
+
+## [1.1.30](https://github.com/Availity/availity-react/compare/@availity/phone@1.1.29...@availity/phone@1.1.30) (2021-10-28)
+
+**Note:** Version bump only for package @availity/phone
+
+
+
+
+
+## 1.1.29 (2021-10-28)
+
+**Note:** Version bump only for package @availity/phone
+
+
+
+
+
+## 1.1.28 (2021-10-19)
+
+**Note:** Version bump only for package @availity/phone
+
+
+
+
+
+## [1.1.27](https://github.com/Availity/availity-react/compare/@availity/phone@1.1.26...@availity/phone@1.1.27) (2021-10-19)
+
+**Note:** Version bump only for package @availity/phone
+
+
+
+
+
+## [1.1.26](https://github.com/Availity/availity-react/compare/@availity/phone@1.1.25...@availity/phone@1.1.26) (2021-10-19)
+
+**Note:** Version bump only for package @availity/phone
+
+
+
+
+
+## 1.1.25 (2021-10-19)
+
+
+### Bug Fixes
+
+* **phone:** update types ([30c7fc8](https://github.com/Availity/availity-react/commit/30c7fc885b1b91b04a5153fbf796e8c136692be4))
+
+
+
+
+
+## [1.1.24](https://github.com/Availity/availity-react/compare/@availity/phone@1.1.23...@availity/phone@1.1.24) (2021-10-04)
+
+**Note:** Version bump only for package @availity/phone
+
+
+
+
+
+## [1.1.23](https://github.com/Availity/availity-react/compare/@availity/phone@1.1.22...@availity/phone@1.1.23) (2021-10-01)
+
+**Note:** Version bump only for package @availity/phone
+
+
+
+
+
+## 1.1.22 (2021-09-28)
+
+**Note:** Version bump only for package @availity/phone
+
+
+
+
+
+## 1.1.21 (2021-06-01)
+
+**Note:** Version bump only for package @availity/phone
+
+
+
+
+
+## 1.1.20 (2021-04-20)
+
+**Note:** Version bump only for package @availity/phone
+
+
+
+
+
+## 1.1.19 (2020-11-17)
+
+**Note:** Version bump only for package @availity/phone
+
+
+
+
+
+## 1.1.18 (2020-04-30)
+
+**Note:** Version bump only for package @availity/phone
+
+
+
+
+
+## 1.1.17 (2020-04-30)
+
+**Note:** Version bump only for package @availity/phone
+
+
+
+
+
+## 1.1.16 (2020-04-28)
+
+**Note:** Version bump only for package @availity/phone
+
+
+
+
+
+## 1.1.15 (2020-04-17)
+
+**Note:** Version bump only for package @availity/phone
+
+
+
+
+
+## 1.1.14 (2020-04-09)
+
+**Note:** Version bump only for package @availity/phone
+
+
+
+
+
+## 1.1.13 (2020-04-08)
+
+**Note:** Version bump only for package @availity/phone
+
+
+
+
+
+## 1.1.12 (2020-04-08)
+
+**Note:** Version bump only for package @availity/phone
+
+
+
+
+
+## 1.1.11 (2020-04-07)
+
+**Note:** Version bump only for package @availity/phone
+
+
+
+
+
+## 1.1.10 (2020-04-07)
+
+**Note:** Version bump only for package @availity/phone
+
+
+
+
+
+## 1.1.9 (2020-04-06)
+
+**Note:** Version bump only for package @availity/phone
+
+
+
+
+
+## 1.1.8 (2020-04-06)
+
+**Note:** Version bump only for package @availity/phone
+
+
+
+
+
+## 1.1.7 (2020-04-06)
+
+**Note:** Version bump only for package @availity/phone
+
+
+
+
+
+## 1.1.6 (2020-04-06)
+
+**Note:** Version bump only for package @availity/phone
+
+
+
+
+
+## 1.1.5 (2020-04-03)
+
+**Note:** Version bump only for package @availity/phone
+
+
+
+
+
+## 1.1.4 (2020-04-03)
+
+**Note:** Version bump only for package @availity/phone
+
+
+
+
+
+## 1.1.3 (2020-04-02)
+
+**Note:** Version bump only for package @availity/phone
+
+
+
+
+
+## 1.1.2 (2020-04-02)
+
+**Note:** Version bump only for package @availity/phone
+
+
+
+
+
+## [1.1.1](https://github.com/Availity/availity-react/compare/@availity/phone@1.1.0...@availity/phone@1.1.1) (2020-02-24)
+
+**Note:** Version bump only for package @availity/phone
+
+
+
+
+
+# 1.1.0 (2020-02-11)
+
+
+### Bug Fixes
+
+* **phone:** remove yup.number validation method, remove async from test ([b346896](https://github.com/Availity/availity-react/commit/b346896414fc71c208be4f39cf6ac77412c5fea0))
+* **phone:** typings for PhoneProps and ExtensionProps should extend FieldProps ([cdd467b](https://github.com/Availity/availity-react/commit/cdd467b3158dead419c3bfa6f551e5badf6edf3c))
+
+
+### Features
+
+* **phone:** add types ([b5cf0e6](https://github.com/Availity/availity-react/commit/b5cf0e62871266cc2e5689258912b1ba533bceb5))
+* **phone:** initial commit for phone package ([76b7227](https://github.com/Availity/availity-react/commit/76b7227adee750265daa4e65486606d102a1e5c2))

package/README.md

@@ -0,0 +1,25 @@
+# @availity/phone
+
+> Availity Phone component using Formik and Yup
+
+[![Version](https://img.shields.io/npm/v/@availity/phone.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/phone)
+[![NPM Downloads](https://img.shields.io/npm/dt/@availity/phone.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/phone)
+[![Dependecy Status](https://img.shields.io/librariesio/release/npm/@availity/phone?style=for-the-badge)](https://github.com/Availity/availity-react/blob/master/packages/phone/package.json)
+
+## Installation
+
+### NPM
+
+```bash
+npm install @availity/phone
+```
+
+### Yarn
+
+```bash
+yarn add @availity/phone
+```
+
+## Documentation
+
+Check out more documentation at [availity.github.io](https://availity.github.io/availity-react/form/phone/index)

package/index.d.ts

@@ -0,0 +1,15 @@
+export { default as Phone, PhoneProps } from './src/Phone';
+export { default as validatePhone } from './src/validatePhone';
+
+declare module 'yup' {
+  import { AnyObject, Maybe } from 'yup/lib/types';
+  import BaseSchema from 'yup/lib/schema';
+
+  interface StringSchema<
+    TType extends Maybe<string> = string | undefined,
+    TContext extends AnyObject = AnyObject,
+    TOut extends TType = TType
+  > extends BaseSchema<TType, TContext, TOut> {
+    validatePhone(message?: string, strict?: boolean, country?: string): StringSchema<TType, TContext>;
+  }
+}

package/index.js

@@ -0,0 +1,2 @@
+export { default as Phone } from './src/Phone';
+export { default as validatePhone } from './src/validatePhone';

package/jest.config.js

@@ -0,0 +1,7 @@
+const global = require('../../jest/global-config');
+
+module.exports = {
+  ...global,
+  displayName: 'phone',
+  coverageDirectory: '../../coverage/phone',
+};

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@availity/phone",
+  "version": "1.0.0",
+  "description": "Availity Phone component using Formik and Yup",
+  "keywords": [
+    "availity",
+    "yup",
+    "formik"
+  ],
+  "homepage": "https://availity.github.io/availity-react/form/phone/index",
+  "bugs": {
+    "url": "https://github.com/Availity/availity-react/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Availity/availity-react.git",
+    "directory": "packages/phone"
+  },
+  "license": "MIT",
+  "author": "Christopher Havekost <Christopher.Havekost@availity.com>",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "scripts": {
+    "publish": "yarn npm publish --tolerate-republish --access public",
+    "publish:canary": "yarn npm publish --access public --tag canary"
+  },
+  "dependencies": {
+    "libphonenumber-js": "^1.11.5",
+    "prop-types": "^15.8.1"
+  },
+  "devDependencies": {
+    "@availity/form": "1.0.0",
+    "formik": "^2.4.6",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "reactstrap": "^8.10.1",
+    "yup": "^0.32.11"
+  },
+  "peerDependencies": {
+    "@availity/form": "^1.1.0",
+    "formik": "^2.0.1",
+    "react": ">=16.8.3",
+    "reactstrap": "^8.0.0",
+    "yup": "^0.32.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/project.json

@@ -0,0 +1,38 @@
+{
+  "name": "@availity/phone",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "library",
+  "targets": {
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/phone"],
+      "options": {
+        "jestConfig": "packages/phone/jest.config.js"
+      }
+    },
+    "version": {
+      "executor": "@jscutlery/semver:version",
+      "options": {
+        "preset": "angular",
+        "commitMessageFormat": "chore({projectName}): release version ${version} [skip ci]",
+        "tagPrefix": "@availity/{projectName}@",
+        "baseBranch": "master"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "options": {
+        "eslintConfig": ".eslintrc.yaml",
+        "silent": false,
+        "fix": false,
+        "cache": true,
+        "cacheLocation": "./node_modules/.cache/phone/.eslintcache",
+        "maxWarnings": -1,
+        "quiet": false,
+        "noEslintrc": false,
+        "hasTypeAwareRules": true,
+        "cacheStrategy": "metadata"
+      }
+    }
+  }
+}

package/src/Phone.d.ts

@@ -0,0 +1,21 @@
+import { FieldProps } from '@availity/form';
+
+interface ExtensionProps extends FieldProps {
+  name: string;
+  id?: string;
+  extColProps?: object;
+}
+
+export interface PhoneProps extends FieldProps {
+  name: string;
+  id?: string;
+  country?: string;
+  showExtension?: boolean;
+  phoneColProps?: object;
+  extProps?: ExtensionProps;
+  formatInitialValue?: boolean;
+}
+
+declare const Phone: (props: PhoneProps) => JSX.Element;
+
+export default Phone;

package/src/Phone.js

@@ -0,0 +1,83 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Field } from '@availity/form';
+import { useFormikContext } from 'formik';
+import { AsYouType } from 'libphonenumber-js';
+import { Row, Col } from 'reactstrap';
+
+const Phone = ({
+  name,
+  label,
+  country = 'US',
+  showExtension = false,
+  extProps,
+  phoneColProps,
+  formatInitialValue,
+  ...restPhoneProps
+}) => {
+  const { setFieldValue, setFieldTouched, values } = useFormikContext();
+
+  let ext = null;
+  if (showExtension) {
+    const { name, label, extColProps, ...restExtProps } = extProps;
+
+    ext = (
+      <Col {...extColProps}>
+        <Field name={name} label={label} {...restExtProps} />
+      </Col>
+    );
+  }
+
+  const asYouFormat = (phoneString) => {
+    // Use AsYouType instead of parsePhoneNumberFromString.format() so partial values can still be formatted
+    const asYouType = new AsYouType(country);
+    asYouType.input(phoneString);
+
+    return asYouType.formattedOutput;
+  };
+
+  useEffect(() => {
+    if (formatInitialValue) {
+      setFieldValue(name, asYouFormat(values[name]), false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const formatPhoneOnBlur = ({ target: { value } }) => {
+    setFieldValue(name, asYouFormat(value), true);
+    setFieldTouched(name, true, true);
+  };
+
+  return (
+    <Row>
+      <Col xs={showExtension ? 10 : 12} {...phoneColProps}>
+        <Field name={name} label={label} onBlur={formatPhoneOnBlur} {...restPhoneProps} />
+      </Col>
+      {ext}
+    </Row>
+  );
+};
+
+Phone.propTypes = {
+  /** Identifies the field and matches the validation schema. */
+  name: PropTypes.string.isRequired,
+  /** Used to pass props to the extension field when it is enabled. */
+  extProps: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    label: PropTypes.string,
+    /** Used to control props on `<Col />` for the extension field, if needed. The extension column has no default size value, so it's default will effectively be size: { 12 - phoneColSize } unless otherwise specified. */
+    extColProps: PropTypes.object,
+  }),
+  /** Displays a Reactstrap `<Label />` for the field. */
+  label: PropTypes.string,
+  /** Enable the phone extension field. */
+  showExtension: PropTypes.bool,
+  /** Default country for parsing national numbers. [This is the two letter ISO country code](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2). */
+  country: PropTypes.string,
+  /** Used to control props on the `<Col />` for the phone field, if needed. The phone column defaults to xs: { size: 12 } when not rendering an extension field, and defaults to xs: { size: 10 } when rendering an extension field. */
+  phoneColProps: PropTypes.object,
+  /** When true, when the field is first rendered, it will trigger the formatter to update the value. */
+  formatInitialValue: PropTypes.bool,
+};
+
+export default Phone;

package/src/validatePhone.js

@@ -0,0 +1,22 @@
+import { addMethod, string } from 'yup';
+import { AsYouType } from 'libphonenumber-js';
+
+export default function validatePhone(msg, strict = false, country = 'US') {
+  return this.test({
+    name: 'validatePhone',
+    exclusive: true,
+    message: msg || 'This field is invalid.',
+    test(phoneValue) {
+      if (!phoneValue) return true;
+
+      const asYouType = new AsYouType(country);
+      asYouType.input(phoneValue);
+      if (strict) {
+        return asYouType.getNumber() && asYouType.getNumber().isValid();
+      }
+      return asYouType.getNumber() && asYouType.getNumber().isPossible();
+    },
+  });
+}
+
+addMethod(string, 'validatePhone', validatePhone);

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}

package/tsconfig.spec.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node", "@testing-library/jest-dom"],
+    "allowJs": true
+  },
+  "include": ["**/*.test.js", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"]
+}