@invoicebox/ui 0.1.0-alpha.117 → 0.1.0-alpha.119

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

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+export type TProps = {
+    value: string;
+    bgColor?: string;
+    size?: number;
+    id?: string;
+};
+export declare const QRCode: FC<TProps>;

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

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.QRCode = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _qrcode = _interopRequireDefault(require("qrcode.react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var invoiceboxIcon = "/public/a77a71d71b649b5aad848487ac3936b1.png";
+var QRCode = exports.QRCode = function QRCode(props) {
+  return /*#__PURE__*/_react["default"].createElement(_qrcode["default"], _extends({}, props, {
+    renderAs: "canvas",
+    level: "M",
+    imageSettings: {
+      src: invoiceboxIcon,
+      height: 39,
+      width: 39,
+      excavate: false
+    }
+  }));
+};

package/dist/components/common/QRCode/index.stories.d.ts

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

package/dist/components/common/QRCode/index.stories.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _ = require(".");
+var meta = {
+  title: 'common/QRCode',
+  component: _.QRCode,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var Default = exports.Default = {
+  args: {
+    value: 'https://www.invoicebox.ru/ru/',
+    size: 132
+  }
+};

package/dist/components/payment/PaymentCard/index.stories.d.ts

@@ -5,3 +5,5 @@ declare const meta: Meta<typeof PaymentCard>;
 export default meta;
 export declare const Default: StoryObj<typeof PaymentCard>;
 export declare const WithChildren: StoryObj<typeof PaymentCard>;
+export declare const OverflowText: StoryObj<typeof PaymentCard>;
+export declare const OverflowTextWithChildren: StoryObj<typeof PaymentCard>;

package/dist/components/payment/PaymentCard/index.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithChildren = exports.Default = void 0;
+exports["default"] = exports.WithChildren = exports.OverflowTextWithChildren = exports.OverflowText = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _ = require(".");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
@@ -35,4 +35,27 @@ var WithChildren = exports.WithChildren = {
     }),
     comment: 'Комиссия 10 руб'
   }
+};
+var OverflowText = exports.OverflowText = {
+  args: {
+    title: 'Длинное наименование длинное наименование длинное наименование длинное наименование длинное наименование длинное наименование длинное наименование длинное наименование длинное наименование длинное наименование длинное наименование ',
+    isActive: false,
+    isDisabled: false,
+    comment: 'Комиссия 10 руб'
+  }
+};
+var OverflowTextWithChildren = exports.OverflowTextWithChildren = {
+  args: {
+    title: 'Длинное наименование длинное наименование длинное наименование длинное наименование длинное наименование длинное наименование длинное наименование длинное наименование длинное наименование длинное наименование длинное наименование ',
+    isActive: false,
+    isDisabled: false,
+    comment: 'Комиссия 10 руб',
+    children: /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        height: 22,
+        width: 121,
+        background: 'green'
+      }
+    })
+  }
 };

package/dist/components/payment/PaymentCard/styles.js

@@ -33,32 +33,35 @@ var Content = exports.Content = _styledComponents["default"].div.withConfig({
 var Title = exports.Title = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
   displayName: "styles__Title",
   componentId: "sc-ykxt4t-3"
-})(["white-space:", ";overflow:hidden;text-overflow:ellipsis;max-width:100%;color:", ";"], function (_ref3) {
+})(["white-space:", ";text-overflow:ellipsis;overflow:hidden;", " max-width:100%;color:", ";"], function (_ref3) {
   var $ellipsis = _ref3.$ellipsis;
   return $ellipsis ? 'normal' : 'nowrap';
 }, function (_ref4) {
-  var $pallete = _ref4.$pallete;
+  var $ellipsis = _ref4.$ellipsis;
+  return $ellipsis && "\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n    ";
+}, function (_ref5) {
+  var $pallete = _ref5.$pallete;
   return $pallete.title;
 });
 var IconWrapper = exports.IconWrapper = _styledComponents["default"].div.withConfig({
   displayName: "styles__IconWrapper",
   componentId: "sc-ykxt4t-4"
-})(["flex-shrink:0;flex-grow:0;width:36px;height:36px;border-radius:50%;background-color:", ";display:flex;align-items:center;justify-content:center;"], function (_ref5) {
-  var $isActive = _ref5.$isActive,
-    $pallete = _ref5.$pallete;
+})(["flex-shrink:0;flex-grow:0;width:36px;height:36px;border-radius:50%;background-color:", ";display:flex;align-items:center;justify-content:center;"], function (_ref6) {
+  var $isActive = _ref6.$isActive,
+    $pallete = _ref6.$pallete;
   return $isActive ? 'transparent' : $pallete.iconBg;
 });
 var Comment = exports.Comment = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
   displayName: "styles__Comment",
   componentId: "sc-ykxt4t-5"
-})(["color:", ";position:absolute;bottom:0;right:0;padding:0 8px;box-sizing:border-box;background:", ";border-radius:6px 0px 0px 0px;", ""], function (_ref6) {
-  var $pallete = _ref6.$pallete;
-  return $pallete.comment;
-}, function (_ref7) {
+})(["color:", ";position:absolute;bottom:0;right:0;padding:0 8px;box-sizing:border-box;background:", ";border-radius:6px 0px 0px 0px;", ""], function (_ref7) {
   var $pallete = _ref7.$pallete;
-  return $pallete.commentBg;
+  return $pallete.comment;
 }, function (_ref8) {
-  var $isActive = _ref8.$isActive,
-    $pallete = _ref8.$pallete;
+  var $pallete = _ref8.$pallete;
+  return $pallete.commentBg;
+}, function (_ref9) {
+  var $isActive = _ref9.$isActive,
+    $pallete = _ref9.$pallete;
   return $isActive ? (0, _styledComponents.css)(["border-top:1px solid ", ";border-left:1px solid ", ";"], $pallete.borderActive, $pallete.borderActive) : (0, _styledComponents.css)(["border-top:1px solid ", ";border-left:1px solid ", ";"], $pallete.borderInactive, $pallete.borderInactive);
 });

package/dist/declarations.d.js

@@ -0,0 +1 @@
+"use strict";

package/dist/index.d.ts

@@ -39,6 +39,7 @@ export { AppCardLink } from './components/common/AppCardLink';
 export { InvoiceboxLogo } from './components/common/InvoiceboxLogo';
 export type { TProps as TAutocompleteProps } from './components/form/Autocomplete/index';
 export { Autocomplete, AutocompleteDefaultOption, OrganizationAutocompleteItem, } from './components/form/Autocomplete/index';
+export { QRCode } from './components/common/QRCode';
 export { PaletteProvider, defaultAbstractPalette } from './palette';
 export type { TAbstractPalette } from './palette';
 export { useOutsideClick } from './hooks/useOutsideClick';

package/dist/index.js

@@ -129,6 +129,12 @@ Object.defineProperty(exports, "PureInput", {
     return _PureInput.PureInput;
   }
 });
+Object.defineProperty(exports, "QRCode", {
+  enumerable: true,
+  get: function get() {
+    return _QRCode.QRCode;
+  }
+});
 Object.defineProperty(exports, "Scrollbar", {
   enumerable: true,
   get: function get() {
@@ -277,6 +283,7 @@ var _PaymentCard = require("./components/payment/PaymentCard");
 var _AppCardLink = require("./components/common/AppCardLink");
 var _InvoiceboxLogo = require("./components/common/InvoiceboxLogo");
 var _index = require("./components/form/Autocomplete/index");
+var _QRCode = require("./components/common/QRCode");
 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.117",
+    "version": "0.1.0-alpha.119",
     "description": "Invoicebox UI",
     "license": "Apache License 2.0",
     "scripts": {
@@ -32,6 +32,7 @@
         "@storybook/test": "^7.6.13",
         "@typescript-eslint/eslint-plugin": "^5.62.0",
         "@typescript-eslint/parser": "^5.62.0",
+        "babel-plugin-file-loader": "^2.0.0",
         "babel-plugin-inline-json-import": "^0.3.2",
         "babel-plugin-styled-components": "^2.1.4",
         "eslint": "^8.56.0",
@@ -54,6 +55,7 @@
         "lottie-react": "^2.4.0",
         "object.entries": "^1.1.8",
         "object.fromentries": "^2.0.8",
+        "qrcode.react": "^3.1.0",
         "react-calendar": "^4.8.0",
         "react-responsive": "^9.0.2",
         "react-scrollbars-custom": "^4.1.1",