@invoicebox/ui 0.1.0-alpha.180 → 0.1.0-alpha.182

package/dist/components/form/Select/index.d.ts

@@ -1,8 +1,10 @@
+import { ReactNode } from 'react';
 import { TProps as TInputProps } from './components/Input';
 export type TOption<TValue> = {
     label: string;
     value: TValue;
     groupId?: string;
+    entity?: unknown;
 };
 export type TGroup = {
     label: string;
@@ -14,5 +16,7 @@ export type TProps<TValue> = Pick<TInputProps, 'label' | 'hasError' | 'placehold
     options: TOption<TValue>[];
     groups?: TGroup[];
     isResetButtonEnabled?: boolean;
+    renderOption?: (entity?: any) => ReactNode;
+    dropdownHeader?: ReactNode;
 };
-export declare const Select: <TValue extends string | number>({ label, hasError, placeholder, onFocus, onBlur, name, value, onChange, options, groups, isResetButtonEnabled, size, }: TProps<TValue>) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: <TValue extends string | number>({ label, hasError, placeholder, onFocus, onBlur, name, value, onChange, options, groups, isResetButtonEnabled, size, renderOption, dropdownHeader, }: TProps<TValue>) => import("react/jsx-runtime").JSX.Element;

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

@@ -38,7 +38,9 @@ var Select = exports.Select = function Select(_ref) {
     groups = _ref$groups === void 0 ? [] : _ref$groups,
     _ref$isResetButtonEna = _ref.isResetButtonEnabled,
     isResetButtonEnabled = _ref$isResetButtonEna === void 0 ? false : _ref$isResetButtonEna,
-    size = _ref.size;
+    size = _ref.size,
+    renderOption = _ref.renderOption,
+    dropdownHeader = _ref.dropdownHeader;
   var palette = (0, _palette.useComponentPalette)('select');
   var _useInputFocus = (0, _useInputFocus2.useInputFocus)({
       onFocus: onFocus,
@@ -122,9 +124,9 @@ var Select = exports.Select = function Select(_ref) {
     isOpen: isOpen,
     isAutoPosition: true,
     width: "100%"
-  }, /*#__PURE__*/_react["default"].createElement(S.Options, null, /*#__PURE__*/_react["default"].createElement(_Scrollbar.Scrollbar, {
+  }, /*#__PURE__*/_react["default"].createElement(_Scrollbar.Scrollbar, {
     maxHeight: LIST_HEIGHT
-  }, optionGroups.map(function (_ref2) {
+  }, dropdownHeader, optionGroups.map(function (_ref2) {
     var group = _ref2.group,
       groupOptions = _ref2.options;
     return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
@@ -140,7 +142,7 @@ var Select = exports.Select = function Select(_ref) {
         "data-value": JSON.stringify(option.value),
         "data-option-identifier": OPTION_IDENTIFIER,
         $isGrouped: !!group
-      }, option.label);
+      }, renderOption ? renderOption(option.entity) : /*#__PURE__*/_react["default"].createElement(S.DefaultOptionWrapper, null, " ", option.label));
     }));
-  })))));
+  }))));
 };

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

@@ -3,4 +3,7 @@ import { Select, TProps } from '.';
 declare const meta: Meta<typeof Select>;
 export default meta;
 export declare const Default: StoryObj<TProps<string>>;
+export declare const WithDropdownHeader: StoryObj<TProps<string>>;
+export declare const RenderOption: StoryObj<TProps<string>>;
 export declare const WithGroups: StoryObj<TProps<string>>;
+export declare const RenderOptionWithGroups: StoryObj<TProps<string>>;

package/dist/components/form/Select/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.WithGroups = exports.Default = void 0;
+exports["default"] = exports.WithGroups = exports.WithDropdownHeader = exports.RenderOptionWithGroups = exports.RenderOption = exports.Default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _addonActions = require("@storybook/addon-actions");
 var _ = require(".");
@@ -52,49 +52,100 @@ var COMMON_ARGS = {
   options: [{
     label: 'Option 1',
     value: 'option-1',
-    groupId: '1'
+    groupId: '1',
+    entity: {
+      name: 'name option 1'
+    }
   }, {
     label: 'Option 2',
     value: 'option-2',
-    groupId: '1'
+    groupId: '1',
+    entity: {
+      name: 'name option 2'
+    }
   }, {
     label: 'Option 3',
     value: 'option-3',
-    groupId: '2'
+    groupId: '2',
+    entity: {
+      name: 'name option 3'
+    }
   }, {
     label: 'Option 4',
     value: 'option-4',
-    groupId: '2'
+    groupId: '2',
+    entity: {
+      name: 'name option 4'
+    }
   }, {
     label: 'Option 5',
-    value: 'option-5'
+    value: 'option-5',
+    entity: {
+      name: 'name option 5'
+    }
   }, {
     label: 'Option 6',
-    value: 'option-6'
+    value: 'option-6',
+    entity: {
+      name: 'name option 6'
+    }
   }, {
     label: 'Option 7',
-    value: 'option-7'
+    value: 'option-7',
+    entity: {
+      name: 'name option 7'
+    }
   }, {
     label: 'Option 8',
-    value: 'option-8'
+    value: 'option-8',
+    entity: {
+      name: 'name option 8'
+    }
   }, {
     label: 'Option 9',
-    value: 'option-9'
+    value: 'option-9',
+    entity: {
+      name: 'name option 9'
+    }
   }, {
     label: 'Option 10',
-    value: 'option-10'
+    value: 'option-10',
+    entity: {
+      name: 'name option 10'
+    }
   }, {
     label: 'Option 11',
-    value: 'option-11'
+    value: 'option-11',
+    entity: {
+      name: 'name option 11'
+    }
   }, {
     label: 'Option 12',
-    value: 'option-12'
+    value: 'option-12',
+    entity: {
+      name: 'name option 12'
+    }
   }]
 };
+var renderOption = function renderOption(entity) {
+  return /*#__PURE__*/_react["default"].createElement("div", null, "Hello ", entity.name, " ");
+};
 var Default = exports.Default = {
   args: _objectSpread({}, COMMON_ARGS),
   render: Component
 };
+var WithDropdownHeader = exports.WithDropdownHeader = {
+  args: _objectSpread(_objectSpread({}, COMMON_ARGS), {}, {
+    dropdownHeader: /*#__PURE__*/_react["default"].createElement("div", null, "Dropdown header")
+  }),
+  render: Component
+};
+var RenderOption = exports.RenderOption = {
+  args: _objectSpread(_objectSpread({}, COMMON_ARGS), {}, {
+    renderOption: renderOption
+  }),
+  render: Component
+};
 var WithGroups = exports.WithGroups = {
   args: _objectSpread(_objectSpread({}, COMMON_ARGS), {}, {
     groups: [{
@@ -106,4 +157,17 @@ var WithGroups = exports.WithGroups = {
     }]
   }),
   render: Component
+};
+var RenderOptionWithGroups = exports.RenderOptionWithGroups = {
+  args: _objectSpread(_objectSpread({}, COMMON_ARGS), {}, {
+    groups: [{
+      label: 'Group 1',
+      id: '1'
+    }, {
+      label: 'Group 2',
+      id: '2'
+    }],
+    renderOption: renderOption
+  }),
+  render: Component
 };

package/dist/components/form/Select/styles.d.ts

@@ -2,9 +2,9 @@
 import { TSelectPalette } from './palette';
 export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const InputWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Options: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const Option: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../../common/Typography").TTypographyProps & import("styled-components/dist/types").BaseObject, {
     $palette: TSelectPalette;
     $isGrouped: boolean;
 }>> & string & Omit<import("react").FC<import("../../common/Typography").TTypographyProps>, keyof import("react").Component<any, {}, any>>;
 export declare const Group: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../../common/Typography").TTypographyProps & import("styled-components/dist/types").BaseObject, import("styled-components/dist/types").BaseObject>> & string & Omit<import("react").FC<import("../../common/Typography").TTypographyProps>, keyof import("react").Component<any, {}, any>>;
+export declare const DefaultOptionWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/form/Select/styles.js

@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Wrapper = exports.Options = exports.Option = exports.InputWrapper = exports.Group = void 0;
+exports.Wrapper = exports.Option = exports.InputWrapper = exports.Group = exports.DefaultOptionWrapper = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _Typography = require("../../common/Typography");
 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); }
@@ -17,14 +17,10 @@ var InputWrapper = exports.InputWrapper = _styledComponents["default"].div.withC
   displayName: "styles__InputWrapper",
   componentId: "sc-1x9n0z5-1"
 })(["cursor:pointer;input{cursor:pointer;}"]);
-var Options = exports.Options = _styledComponents["default"].div.withConfig({
-  displayName: "styles__Options",
-  componentId: "sc-1x9n0z5-2"
-})(["display:flex;flex-direction:column;"]);
 var Option = exports.Option = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
   displayName: "styles__Option",
-  componentId: "sc-1x9n0z5-3"
-})(["overflow:hidden;display:flex;width:100%;text-align:left;flex-direction:column;padding:12px 20px;transition:all 0.2s ease-in-out 0s;box-sizing:border-box;cursor:pointer;&:hover{background-color:", ";}", ""], function (_ref) {
+  componentId: "sc-1x9n0z5-2"
+})(["overflow:hidden;width:100%;text-align:left;transition:all 0.2s ease-in-out 0s;box-sizing:border-box;cursor:pointer;&:hover{background-color:", ";}", ""], function (_ref) {
   var $palette = _ref.$palette;
   return $palette.bgHover;
 }, function (_ref2) {
@@ -33,5 +29,9 @@ var Option = exports.Option = (0, _styledComponents["default"])(_Typography.Typo
 });
 var Group = exports.Group = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
   displayName: "styles__Group",
+  componentId: "sc-1x9n0z5-3"
+})(["padding:12px 20px;"]);
+var DefaultOptionWrapper = exports.DefaultOptionWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "styles__DefaultOptionWrapper",
   componentId: "sc-1x9n0z5-4"
 })(["padding:12px 20px;"]);

package/dist/validate/index.d.ts

@@ -4,5 +4,7 @@ export declare class Validate {
     static website(value: string, createError: TCreateErrorFunc): any;
     static vatNumber(value: string, countryId: string, createError: TCreateErrorFunc): any;
     static taxRegistrationReasonCode(value: string, createError: TCreateErrorFunc): any;
+    static settlementAccount(value: string, bic: string, createError: TCreateErrorFunc): any;
+    static correspondentAccount(value: string, bic: string, createError: TCreateErrorFunc): any;
     static registrationNumber(value: string, vatNumber: string, countryId: string, createError: TCreateErrorFunc): any;
 }

package/dist/validate/index.js

@@ -95,6 +95,60 @@ var Validate = exports.Validate = /*#__PURE__*/function () {
       }
       return true;
     }
+  }, {
+    key: "settlementAccount",
+    value: function settlementAccount(value, bic, createError) {
+      if (!bic) {
+        // eslint-disable-next-line no-console
+        console.error('Form dont have bic');
+      }
+      if (value === '') {
+        return true;
+      }
+      if (/[^0-9]/.test(value)) {
+        return createError('Расчётный счёт может состоять только из цифр');
+      }
+      if (value.length !== 20) {
+        return createError('Расчётный счёт может состоять только из 20 цифр');
+      }
+      var checksum = 0;
+      var bikRs = bic.toString().slice(-3) + value;
+      var coefficients = [7, 1, 3, 7, 1, 3, 7, 1, 3, 7, 1, 3, 7, 1, 3, 7, 1, 3, 7, 1, 3, 7, 1];
+      coefficients.forEach(function (coefficient, i) {
+        checksum += coefficient * (Number(bikRs[i]) % 10);
+      });
+      if (checksum % 10 !== 0) {
+        return createError('Неправильное контрольное число');
+      }
+      return true;
+    }
+  }, {
+    key: "correspondentAccount",
+    value: function correspondentAccount(value, bic, createError) {
+      if (!bic) {
+        // eslint-disable-next-line no-console
+        console.error('Form dont have bic');
+      }
+      if (value === '') {
+        return true;
+      }
+      if (/[^0-9]/.test(value)) {
+        return createError('Кор. счёт может состоять только из цифр');
+      }
+      if (value.length !== 20) {
+        return createError('Кор. счёт может состоять только из 20 цифр');
+      }
+      var checksum = 0;
+      var bikKs = "0".concat(String(bic).slice(4, 6)).concat(value);
+      var coefficients = [7, 1, 3, 7, 1, 3, 7, 1, 3, 7, 1, 3, 7, 1, 3, 7, 1, 3, 7, 1, 3, 7, 1];
+      coefficients.forEach(function (coefficient, i) {
+        checksum += coefficient * (Number(bikKs[i]) % 10);
+      });
+      if (checksum % 10 !== 0) {
+        return createError('Неправильное контрольное число');
+      }
+      return true;
+    }
   }, {
     key: "registrationNumber",
     value: function registrationNumber(value, vatNumber, countryId, createError) {

package/package.json

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