@invoicebox/ui 0.1.0-alpha.70 → 0.1.0-alpha.71

package/dist/components/common/Flag/components/RusFlag/index.js

@@ -8,8 +8,8 @@ var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var RusFlag = exports.RusFlag = function RusFlag() {
   return /*#__PURE__*/_react["default"].createElement("svg", {
-    width: "22px",
-    height: "16px",
+    width: "100%",
+    height: "100%",
     viewBox: "0 0 22 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"

package/dist/components/common/Flag/components/UnknownFlag/index.d.ts

@@ -0,0 +1 @@
+export declare const UnknownFlag: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/common/Flag/components/UnknownFlag/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UnknownFlag = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var UnknownFlag = exports.UnknownFlag = function UnknownFlag() {
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    width: "100%",
+    height: "100%",
+    viewBox: "0 0 22 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react["default"].createElement("rect", {
+    width: "22",
+    height: "16",
+    rx: "2",
+    fill: "#353F47",
+    fillOpacity: "0.4"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M11.1816 9.59766H10.0918C10.0957 9.22266 10.1289 8.91602 10.1914 8.67773C10.2578 8.43555 10.3652 8.21484 10.5137 8.01562C10.6621 7.81641 10.8594 7.58984 11.1055 7.33594C11.2852 7.15234 11.4492 6.98047 11.5977 6.82031C11.75 6.65625 11.873 6.48047 11.9668 6.29297C12.0605 6.10156 12.1074 5.87305 12.1074 5.60742C12.1074 5.33789 12.0586 5.10547 11.9609 4.91016C11.8672 4.71484 11.7266 4.56445 11.5391 4.45898C11.3555 4.35352 11.127 4.30078 10.8535 4.30078C10.627 4.30078 10.4121 4.3418 10.209 4.42383C10.0059 4.50586 9.8418 4.63281 9.7168 4.80469C9.5918 4.97266 9.52734 5.19336 9.52344 5.4668H8.43945C8.44727 5.02539 8.55664 4.64648 8.76758 4.33008C8.98242 4.01367 9.27148 3.77148 9.63477 3.60352C9.99805 3.43555 10.4043 3.35156 10.8535 3.35156C11.3496 3.35156 11.7715 3.44141 12.1191 3.62109C12.4707 3.80078 12.7383 4.05859 12.9219 4.39453C13.1055 4.72656 13.1973 5.12109 13.1973 5.57812C13.1973 5.92969 13.125 6.25391 12.9805 6.55078C12.8398 6.84375 12.6582 7.11914 12.4355 7.37695C12.2129 7.63477 11.9766 7.88086 11.7266 8.11523C11.5117 8.31445 11.3672 8.53906 11.293 8.78906C11.2188 9.03906 11.1816 9.30859 11.1816 9.59766ZM10.0449 11.4551C10.0449 11.2793 10.0996 11.1309 10.209 11.0098C10.3184 10.8887 10.4766 10.8281 10.6836 10.8281C10.8945 10.8281 11.0547 10.8887 11.1641 11.0098C11.2734 11.1309 11.3281 11.2793 11.3281 11.4551C11.3281 11.623 11.2734 11.7676 11.1641 11.8887C11.0547 12.0098 10.8945 12.0703 10.6836 12.0703C10.4766 12.0703 10.3184 12.0098 10.209 11.8887C10.0996 11.7676 10.0449 11.623 10.0449 11.4551Z",
+    fill: "#FAFAFA"
+  }));
+};

package/dist/components/common/Flag/components/UnknownFlag/index.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { UnknownFlag } from '.';
+declare const meta: Meta<typeof UnknownFlag>;
+export default meta;
+export declare const Default: StoryObj<typeof UnknownFlag>;

package/dist/components/common/Flag/components/UnknownFlag/index.stories.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _ = require(".");
+var meta = {
+  title: 'common/Flag/_components/UnknownFlag',
+  component: _.UnknownFlag,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var Default = exports.Default = {};

package/dist/components/common/Flag/index.d.ts

@@ -1,4 +1,4 @@
-declare const flagKeys: readonly ["RUS", "BLR", "KAZ", "AZE", "ARM", "KGZ", "MDA", "TJK", "UZB", "CHN", "ENG", "ESP"];
+declare const flagKeys: readonly ["RUS", "BLR", "KAZ", "AZE", "ARM", "KGZ", "MDA", "TJK", "UZB", "CHN", "ENG", "ESP", "UNKNOWN"];
 export type TFlagKey = (typeof flagKeys)[number];
 export type TProps = {
     flag: TFlagKey;
@@ -7,6 +7,6 @@ export type TProps = {
 };
 export declare const Flag: {
     ({ flag, width, height }: TProps): import("react/jsx-runtime").JSX.Element;
-    flags: readonly ["RUS", "BLR", "KAZ", "AZE", "ARM", "KGZ", "MDA", "TJK", "UZB", "CHN", "ENG", "ESP"];
+    flags: readonly ["RUS", "BLR", "KAZ", "AZE", "ARM", "KGZ", "MDA", "TJK", "UZB", "CHN", "ENG", "ESP", "UNKNOWN"];
 };
 export {};

package/dist/components/common/Flag/index.js

@@ -19,10 +19,11 @@ var _UzbFlag = require("./components/UzbFlag");
 var _ChnFlag = require("./components/ChnFlag");
 var _EngFlag = require("./components/EngFlag");
 var _EspFlag = require("./components/EspFlag");
+var _UnknownFlag = require("./components/UnknownFlag");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var flagKeys = ['RUS', 'BLR', 'KAZ', 'AZE', 'ARM', 'KGZ', 'MDA', 'TJK', 'UZB', 'CHN', 'ENG', 'ESP'];
+var flagKeys = ['RUS', 'BLR', 'KAZ', 'AZE', 'ARM', 'KGZ', 'MDA', 'TJK', 'UZB', 'CHN', 'ENG', 'ESP', 'UNKNOWN'];
 var map = {
   RUS: /*#__PURE__*/_react["default"].createElement(_RusFlag.RusFlag, null),
   KAZ: /*#__PURE__*/_react["default"].createElement(_KazFlag.KazFlag, null),
@@ -35,7 +36,8 @@ var map = {
   UZB: /*#__PURE__*/_react["default"].createElement(_UzbFlag.UzbFlag, null),
   CHN: /*#__PURE__*/_react["default"].createElement(_ChnFlag.ChnFlag, null),
   ENG: /*#__PURE__*/_react["default"].createElement(_EngFlag.EngFlag, null),
-  ESP: /*#__PURE__*/_react["default"].createElement(_EspFlag.EspFlag, null)
+  ESP: /*#__PURE__*/_react["default"].createElement(_EspFlag.EspFlag, null),
+  UNKNOWN: /*#__PURE__*/_react["default"].createElement(_UnknownFlag.UnknownFlag, null)
 };
 var Flag = exports.Flag = function Flag(_ref) {
   var flag = _ref.flag,

package/dist/components/form/PhoneInput/constants.js

@@ -41,6 +41,13 @@ var allCountriesPhoneRules = exports.allCountriesPhoneRules = {
     regexp: /^(\+?7|8)?7\d{9}$/,
     flag: 'KAZ'
   },
+  KGZ: {
+    placeholder: '+996 XXX-XX-XX-XX',
+    mask: '+999 999-99-99-99',
+    startSubsequence: '996',
+    regexp: /\+?996\d{9}/,
+    flag: 'KGZ'
+  },
   TJK: {
     placeholder: '+992-XX-XXX-XXXX',
     mask: '+999-99-999-9999',
@@ -54,5 +61,13 @@ var allCountriesPhoneRules = exports.allCountriesPhoneRules = {
     startSubsequence: '998',
     regexp: /\+?998\d{9}/,
     flag: 'UZB'
+  },
+  // для всех непредусмотренных стран
+  UNKNOWN: {
+    placeholder: '',
+    mask: '+999999999999999999',
+    startSubsequence: '',
+    regexp: /^\d+$/,
+    flag: 'UNKNOWN'
   }
 };

package/dist/components/form/PhoneInput/hooks/useValidateInitialValue.js

@@ -27,7 +27,7 @@ var useValidateInitialValue = exports.useValidateInitialValue = function useVali
         return _phoneInputLogic.phoneInputLogic.getIsHaveStartSequenceInString(notFormattedValue, item[1].startSubsequence);
       });
       var _countryCode = currentCountry ? currentCountry[0] : _types.RUS_COUNTRY_CODE;
-      var isValidInputValue = _phoneInputLogic.phoneInputLogic.getIsValidPhoneInput(notFormattedValue, currentCountry ? currentCountry[1] : _constants.allCountriesPhoneRules.RUS);
+      var isValidInputValue = _phoneInputLogic.phoneInputLogic.getIsValidPhoneInputByCountry(notFormattedValue, currentCountry ? currentCountry[1] : _constants.allCountriesPhoneRules.RUS);
       if (isValidInputValue) {
         onValid(notFormattedValue, _countryCode);
       } else {

package/dist/components/form/PhoneInput/index.js

@@ -99,14 +99,14 @@ var PhoneInput = exports.PhoneInput = function PhoneInput(_ref) {
   var getIsValidValue = (0, _react.useCallback)(function (currentValue) {
     var currentCountry = currentCountriesPhoneRules[country];
     var newCountry = Object.entries(currentCountriesPhoneRules).find(function (item) {
-      return _phoneInputLogic.phoneInputLogic.getIsHaveStartSequenceInString(currentValue, item[1].startSubsequence) && currentCountry.flag !== item[1].flag;
+      return _phoneInputLogic.phoneInputLogic.getIsHaveStartSequenceInString(currentValue, item[1].startSubsequence) && currentCountry.flag !== item[1].flag && item[1].flag !== 'UNKNOWN';
     });
     var isNeedChangeCountry = newCountry && currentCountry.startSubsequence !== newCountry[1].startSubsequence;
     var isNeedAndCanChangeCountry = isNeedChangeCountry && !!newCountry;
     if (isNeedAndCanChangeCountry) {
       handleChangeCountry(newCountry[0]);
     }
-    return _phoneInputLogic.phoneInputLogic.getIsValidPhoneInput(currentValue, isNeedAndCanChangeCountry ? newCountry[1] : currentCountry);
+    return _phoneInputLogic.phoneInputLogic.getIsValidPhoneInputByCountry(currentValue, isNeedAndCanChangeCountry ? newCountry[1] : currentCountry);
   }, [country, currentCountriesPhoneRules, handleChangeCountry]);
   var handleInputValueChange = (0, _react.useCallback)(function (currentInputValue, event) {
     var notFormattedValue = _phoneInputLogic.phoneInputLogic.getOnlyNumbersFromString(currentInputValue);
@@ -129,7 +129,7 @@ var PhoneInput = exports.PhoneInput = function PhoneInput(_ref) {
   var handleCountryChange = (0, _react.useCallback)(function (countryValue) {
     handleChangeCountry(countryValue);
     var currentCountry = currentCountriesPhoneRules[countryValue];
-    var isValidInputValue = _phoneInputLogic.phoneInputLogic.getIsValidPhoneInput(inputValue, currentCountry);
+    var isValidInputValue = _phoneInputLogic.phoneInputLogic.getIsValidPhoneInputByCountry(inputValue, currentCountry);
     setIsFirstBlur(false);
     setIsHaveInputError(!isValidInputValue);
     setTimeout(function () {

package/dist/components/form/PhoneInput/index.stories.d.ts

@@ -3,4 +3,5 @@ import { TProps, PhoneInput } from '.';
 declare const meta: Meta<typeof PhoneInput>;
 export default meta;
 export declare const MultiCountry: StoryObj<TProps>;
+export declare const MultiCountryWithUnknown: StoryObj<TProps>;
 export declare const DefaultRusCountry: StoryObj<TProps>;

package/dist/components/form/PhoneInput/index.stories.js

@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.MultiCountry = exports.DefaultRusCountry = void 0;
+exports["default"] = exports.MultiCountryWithUnknown = exports.MultiCountry = exports.DefaultRusCountry = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _ = require(".");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -74,6 +74,9 @@ var MultiCountry = exports.MultiCountry = {
     }, {
       label: 'Казахстан',
       value: 'KAZ'
+    }, {
+      label: 'Кыргызстан',
+      value: 'KGZ'
     }, {
       label: 'Азербайджан',
       value: 'AZE'
@@ -87,6 +90,24 @@ var MultiCountry = exports.MultiCountry = {
   }),
   render: Component
 };
+var MultiCountryWithUnknown = exports.MultiCountryWithUnknown = {
+  args: _objectSpread(_objectSpread({}, commonProps), {}, {
+    countries: [{
+      label: 'Россия',
+      value: 'RUS'
+    }, {
+      label: 'Армения',
+      value: 'ARM'
+    }, {
+      label: 'Белорусь',
+      value: 'BLR'
+    }, {
+      label: 'Другая',
+      value: 'UNKNOWN'
+    }]
+  }),
+  render: Component
+};
 var DefaultRusCountry = exports.DefaultRusCountry = {
   args: commonProps,
   render: Component

package/dist/components/form/PhoneInput/phoneInputLogic.d.ts

@@ -1,13 +1,17 @@
 import { TCountryRule, TCountrySelectOption, TSupportedCountries } from './types';
 declare class PhoneInputLogic {
     private getCaretPositionByRusValue;
-    getIsValidPhoneInput(value: string, country: TCountryRule): boolean;
+    getIsValidPhoneInputByCountry(value: string, country: TCountryRule): boolean;
+    getIsValidPhone(value: string, countries?: Array<{
+        label: string;
+        value: TSupportedCountries;
+    }>): boolean;
     getCountriesSelectOptions(countries?: Array<{
         label: string;
         value: TSupportedCountries;
     }>): {
         description: string;
-        flag: "RUS" | "BLR" | "KAZ" | "AZE" | "ARM" | "KGZ" | "MDA" | "TJK" | "UZB" | "CHN" | "ENG" | "ESP";
+        flag: "RUS" | "BLR" | "KAZ" | "AZE" | "ARM" | "KGZ" | "MDA" | "TJK" | "UZB" | "CHN" | "ENG" | "ESP" | "UNKNOWN";
         label: string;
         value: TSupportedCountries;
     }[] | undefined;
@@ -20,4 +24,8 @@ declare class PhoneInputLogic {
     getOnlyNumbersFromString(value: string): string;
 }
 export declare const phoneInputLogic: PhoneInputLogic;
+export declare const getIsValidPhone: (value: string, countries?: {
+    label: string;
+    value: TSupportedCountries;
+}[] | undefined) => boolean;
 export {};

package/dist/components/form/PhoneInput/phoneInputLogic.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.phoneInputLogic = void 0;
+exports.phoneInputLogic = exports.getIsValidPhone = void 0;
 var _constants = require("./constants");
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -35,10 +35,21 @@ var PhoneInputLogic = /*#__PURE__*/function () {
       return position;
     }
   }, {
-    key: "getIsValidPhoneInput",
-    value: function getIsValidPhoneInput(value, country) {
+    key: "getIsValidPhoneInputByCountry",
+    value: function getIsValidPhoneInputByCountry(value, country) {
       return !!value.match(country.regexp);
     }
+  }, {
+    key: "getIsValidPhone",
+    value: function getIsValidPhone(value, countries) {
+      var notFormattedValue = this.getOnlyNumbersFromString(value);
+      var countrySelectOptions = this.getCountriesSelectOptions(countries);
+      var currentCountriesPhoneRules = this.getCountriesPhoneRules(countrySelectOptions);
+      var country = Object.entries(currentCountriesPhoneRules).find(function (item) {
+        return phoneInputLogic.getIsHaveStartSequenceInString(notFormattedValue, item[1].startSubsequence);
+      });
+      return this.getIsValidPhoneInputByCountry(notFormattedValue, country ? country[1] : _constants.allCountriesPhoneRules.RUS);
+    }
   }, {
     key: "getCountriesSelectOptions",
     value: function getCountriesSelectOptions(countries) {
@@ -48,7 +59,7 @@ var PhoneInputLogic = /*#__PURE__*/function () {
       return supportedCountries === null || supportedCountries === void 0 ? void 0 : supportedCountries.map(function (country) {
         var countryRules = _constants.allCountriesPhoneRules[country.value];
         return _objectSpread(_objectSpread({}, country), {}, {
-          description: "+".concat(countryRules.startSubsequence),
+          description: countryRules.startSubsequence ? "+".concat(countryRules.startSubsequence) : '',
           flag: countryRules.flag
         });
       });
@@ -102,4 +113,5 @@ var PhoneInputLogic = /*#__PURE__*/function () {
   }]);
   return PhoneInputLogic;
 }();
-var phoneInputLogic = exports.phoneInputLogic = new PhoneInputLogic();
+var phoneInputLogic = exports.phoneInputLogic = new PhoneInputLogic();
+var getIsValidPhone = exports.getIsValidPhone = phoneInputLogic.getIsValidPhone;

package/dist/components/form/PhoneInput/types.d.ts

@@ -1,12 +1,13 @@
+import { TFlagKey } from '../../common/Flag';
 export declare const RUS_COUNTRY_CODE = "RUS";
-export declare const supportedCountries: readonly ["RUS", "BLR", "AZE", "ARM", "KAZ", "TJK", "UZB"];
+export declare const supportedCountries: readonly ["RUS", "BLR", "AZE", "ARM", "KAZ", "TJK", "UZB", "KGZ", "UNKNOWN"];
 export type TSupportedCountries = (typeof supportedCountries)[number];
 export type TCountryRule = {
     placeholder: string;
     mask: string;
     startSubsequence: string;
     regexp: RegExp;
-    flag: string;
+    flag: TFlagKey;
 };
 export type TCountrySelectOption = {
     description: string;

package/dist/components/form/PhoneInput/types.js

@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.supportedCountries = exports.RUS_COUNTRY_CODE = void 0;
 var RUS_COUNTRY_CODE = exports.RUS_COUNTRY_CODE = 'RUS';
-var supportedCountries = exports.supportedCountries = [RUS_COUNTRY_CODE, 'BLR', 'AZE', 'ARM', 'KAZ', 'TJK', 'UZB'];
+var supportedCountries = exports.supportedCountries = [RUS_COUNTRY_CODE, 'BLR', 'AZE', 'ARM', 'KAZ', 'TJK', 'UZB', 'KGZ', 'UNKNOWN'];

package/dist/index.d.ts

@@ -28,6 +28,7 @@ export type { TProps as TFlagProps, TFlagKey } from './components/common/Flag';
 export { CountrySelect } from './components/form/CountrySelect';
 export type { TProps as TCountrySelectProps } from './components/form/CountrySelect';
 export { PhoneInput } from './components/form/PhoneInput';
+export { getIsValidPhone } from './components/form/PhoneInput/phoneInputLogic';
 export type { TProps as TPhoneInputProps } from './components/form/PhoneInput';
 export { PaletteProvider } from './palette';
 export type { TAbstractPalette } from './palette';

package/dist/index.js

@@ -129,6 +129,12 @@ Object.defineProperty(exports, "WarningIcon", {
     return _WarningIcon.WarningIcon;
   }
 });
+Object.defineProperty(exports, "getIsValidPhone", {
+  enumerable: true,
+  get: function get() {
+    return _phoneInputLogic.getIsValidPhone;
+  }
+});
 Object.defineProperty(exports, "useInputFocus", {
   enumerable: true,
   get: function get() {
@@ -161,6 +167,7 @@ var _SearchInput = require("./components/form/SearchInput");
 var _Flag = require("./components/common/Flag");
 var _CountrySelect = require("./components/form/CountrySelect");
 var _PhoneInput = require("./components/form/PhoneInput");
+var _phoneInputLogic = require("./components/form/PhoneInput/phoneInputLogic");
 var _palette = require("./palette");
 var _useOutsideClick = require("./hooks/useOutsideClick");
 var _useInputFocus = require("./hooks/useInputFocus");

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@invoicebox/ui",
-    "version": "0.1.0-alpha.70",
+    "version": "0.1.0-alpha.71",
     "description": "Invoicebox UI",
     "license": "Apache License 2.0",
     "scripts": {