@invoicebox/ui 0.1.0-alpha.85 → 0.1.0-alpha.87

package/dist/components/common/Toast/docs.stories.d.ts

@@ -0,0 +1,6 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+};
+export default meta;
+export declare const Installation: StoryObj;

package/dist/components/common/Toast/docs.stories.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Installation = void 0;
+var _markdownToJsx = _interopRequireDefault(require("markdown-to-jsx"));
+var _Typography = require("../Typography");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var meta = {
+  title: 'common/Toast'
+};
+var _default = exports["default"] = meta;
+var Installation = exports.Installation = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(_Typography.Typography, {
+      variant: "bodyL"
+    }, /*#__PURE__*/React.createElement(_markdownToJsx["default"], null, "\n### \u0423\u0441\u0442\u0430\u043D\u043E\u0432\u043A\u0430\n\n\u0418\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442\u0441\u044F \u0431\u0438\u0431\u043B\u0438\u043E\u0442\u0435\u043A\u0430 [react-toastify](https://github.com/fkhadra/react-toastify).\n\u0414\u043B\u044F \u043A\u043E\u0440\u0440\u0435\u043A\u0442\u043D\u043E\u0439 \u0440\u0430\u0431\u043E\u0442\u044B \u043D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u043E \u043F\u043E\u0434\u043A\u043B\u044E\u0447\u0438\u0442\u044C \u0441\u0442\u0438\u043B\u0438, \u0438 \u0434\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 ToastContainer \u0432 \u0434\u0435\u0440\u0435\u0432\u043E \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u043E\u0432.\n\n```ts\nimport { ToastContainer, toast } from '@invoicebox/ui';\nimport 'react-toastify/dist/ReactToastify.css';\n\nconst App = () => {\n    return (\n        <div>\n            <ToastContainer />\n            <button\n                onClick={() => {\n                    toast.success('Success');\n                }}\n            >\n                Success\n            </button>\n            <button\n                onClick={() => {\n                    toast.error('Success');\n                }}\n            >\n                Error\n            </button>\n        </div>\n    );\n}\n```\n"));
+  }
+};

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

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+export declare const toast: {
+    error: (message: string) => void;
+    success: (message: string) => void;
+};
+export declare const ToastContainer: FC;

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

@@ -0,0 +1,33 @@
+"use strict";
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toast = exports.ToastContainer = void 0;
+var S = _interopRequireWildcard(require("./styles"));
+var _palette = require("../../../palette");
+var _reactToastify = require("react-toastify");
+var _Typography = require("../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); }
+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; }
+var toast = exports.toast = {
+  error: function error(message) {
+    _reactToastify.toast.error( /*#__PURE__*/React.createElement(_Typography.Typography, {
+      variant: "bodyMRegular"
+    }, message));
+  },
+  success: function success(message) {
+    _reactToastify.toast.success( /*#__PURE__*/React.createElement(_Typography.Typography, {
+      variant: "bodyMRegular"
+    }, message));
+  }
+};
+var ToastContainer = exports.ToastContainer = function ToastContainer() {
+  var palette = (0, _palette.useComponentPalette)('toast');
+  return /*#__PURE__*/React.createElement(S.Container, {
+    autoClose: 3000,
+    position: "bottom-right",
+    $palette: palette
+  });
+};

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+import { ToastContainer } from '.';
+import 'react-toastify/dist/ReactToastify.css';
+declare const meta: {
+    title: string;
+    component: import("react").FC<{}>;
+    tags: string[];
+};
+export default meta;
+export declare const Default: StoryObj<typeof ToastContainer>;

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

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _ = require(".");
+require("react-toastify/dist/ReactToastify.css");
+var meta = {
+  title: 'common/Toast',
+  component: _.ToastContainer,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var Default = exports.Default = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_.ToastContainer, null), /*#__PURE__*/React.createElement("button", {
+      onClick: function onClick() {
+        _.toast.success('Success');
+      }
+    }, "Success"), /*#__PURE__*/React.createElement("button", {
+      onClick: function onClick() {
+        _.toast.error('Error');
+      }
+    }, "Error"));
+  }
+};

package/dist/components/common/Toast/palette.d.ts

@@ -0,0 +1,7 @@
+import { TAbstractPalette } from '../../../palette';
+export type TToastPalette = {
+    bg: string;
+    text: string;
+    shadow: string;
+};
+export declare const generateToastPalette: (abstractPalette: TAbstractPalette) => TToastPalette;

package/dist/components/common/Toast/palette.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateToastPalette = void 0;
+var generateToastPalette = exports.generateToastPalette = function generateToastPalette(abstractPalette) {
+  return {
+    bg: abstractPalette.base,
+    text: abstractPalette.primary,
+    shadow: abstractPalette.primary
+  };
+};

package/dist/components/common/Toast/styles.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ToastContainer } from 'react-toastify';
+import { TToastPalette } from './palette';
+export declare const Container: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react-toastify").ToastContainerProps, {
+    $palette: TToastPalette;
+}>> & Omit<typeof ToastContainer, keyof import("react").Component<any, {}, any>>;

package/dist/components/common/Toast/styles.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+var _reactToastify = require("react-toastify");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _breakpoints = require("../../../breakpoints");
+var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var Container = exports.Container = (0, _styledComponents["default"])(_reactToastify.ToastContainer).withConfig({
+  displayName: "styles__Container",
+  componentId: "sc-dzgrj6-0"
+})(["width:auto;max-width:407px;z-index:999999999;.Toastify__toast{padding:0;border-radius:10px;background-color:", ";box-shadow:0px 10px 30px ", ";color:", ";min-height:54px;@media ", "{min-height:38px;}}.Toastify__toast-body{padding:17px 30px;@media ", "{padding:10px;}}"], function (_ref) {
+  var $palette = _ref.$palette;
+  return $palette.bg;
+}, function (_ref2) {
+  var $palette = _ref2.$palette;
+  return (0, _hexToRgba["default"])($palette.shadow, 0.1);
+}, function (_ref3) {
+  var $palette = _ref3.$palette;
+  return $palette.text;
+}, _breakpoints.breakpoints.sm, _breakpoints.breakpoints.sm);

package/dist/index.d.ts

@@ -31,6 +31,7 @@ export { PhoneInput } from './components/form/PhoneInput';
 export type { TProps as TPhoneInputProps } from './components/form/PhoneInput';
 export { phoneLogic } from './components/form/PhoneInput/externalPhoneLogic';
 export { BgCard } from './components/common/BgCard';
+export { ToastContainer, toast } from './components/common/Toast';
 export { PaletteProvider, defaultAbstractPalette } from './palette';
 export type { TAbstractPalette } from './palette';
 export { useOutsideClick } from './hooks/useOutsideClick';

package/dist/index.js

@@ -123,6 +123,12 @@ Object.defineProperty(exports, "Skeleton", {
     return _Skeleton.Skeleton;
   }
 });
+Object.defineProperty(exports, "ToastContainer", {
+  enumerable: true,
+  get: function get() {
+    return _Toast.ToastContainer;
+  }
+});
 Object.defineProperty(exports, "Typography", {
   enumerable: true,
   get: function get() {
@@ -153,6 +159,12 @@ Object.defineProperty(exports, "phoneLogic", {
     return _externalPhoneLogic.phoneLogic;
   }
 });
+Object.defineProperty(exports, "toast", {
+  enumerable: true,
+  get: function get() {
+    return _Toast.toast;
+  }
+});
 Object.defineProperty(exports, "useInputFocus", {
   enumerable: true,
   get: function get() {
@@ -193,6 +205,7 @@ var _CountrySelect = require("./components/form/CountrySelect");
 var _PhoneInput = require("./components/form/PhoneInput");
 var _externalPhoneLogic = require("./components/form/PhoneInput/externalPhoneLogic");
 var _BgCard = require("./components/common/BgCard");
+var _Toast = require("./components/common/Toast");
 var _palette = require("./palette");
 var _useOutsideClick = require("./hooks/useOutsideClick");
 var _useInputFocus = require("./hooks/useInputFocus");

package/dist/palette/context.d.ts

@@ -15,6 +15,7 @@ import { TCalendarPalette } from '../components/common/Calendar/palette';
 import { TSearchInputPalette } from '../components/form/SearchInput/palette';
 import { TCountrySelectPalette } from '../components/form/CountrySelect/palette';
 import { TBgCardPalette } from '../components/common/BgCard/palette';
+import { TToastPalette } from '../components/common/Toast/palette';
 type TContext = {
     skeleton: TSkeletonPalette;
     invoiceboxSpinner: TInvoiceboxSpinnerPalette;
@@ -32,6 +33,7 @@ type TContext = {
     divider: TDividerPalette;
     calendar: TCalendarPalette;
     bgCard: TBgCardPalette;
+    toast: TToastPalette;
 };
 export declare const PaletteContext: import("react").Context<TContext>;
 export {};

package/dist/palette/context.js

@@ -22,6 +22,7 @@ var _palette13 = require("../components/common/Calendar/palette");
 var _palette14 = require("../components/form/SearchInput/palette");
 var _palette15 = require("../components/form/CountrySelect/palette");
 var _palette16 = require("../components/common/BgCard/palette");
+var _palette17 = require("../components/common/Toast/palette");
 var PaletteContext = exports.PaletteContext = /*#__PURE__*/(0, _react.createContext)({
   skeleton: (0, _palette.generateSkeletonPalette)(_constants.defaultAbstractPalette),
   invoiceboxSpinner: (0, _palette2.generateInvoiceboxSpinnerPalette)(_constants.defaultAbstractPalette),
@@ -38,5 +39,6 @@ var PaletteContext = exports.PaletteContext = /*#__PURE__*/(0, _react.createCont
   warningIcon: (0, _palette11.generateWarningIconPalette)(_constants.defaultAbstractPalette),
   divider: (0, _palette12.generateDividerPalette)(_constants.defaultAbstractPalette),
   calendar: (0, _palette13.generateCalendarPalette)(_constants.defaultAbstractPalette),
-  bgCard: (0, _palette16.generateBgCardPalette)(_constants.defaultAbstractPalette)
+  bgCard: (0, _palette16.generateBgCardPalette)(_constants.defaultAbstractPalette),
+  toast: (0, _palette17.generateToastPalette)(_constants.defaultAbstractPalette)
 });

package/dist/palette/provider.js

@@ -23,6 +23,7 @@ var _palette13 = require("../components/common/Calendar/palette");
 var _palette14 = require("../components/form/SearchInput/palette");
 var _palette15 = require("../components/form/CountrySelect/palette");
 var _palette16 = require("../components/common/BgCard/palette");
+var _palette17 = require("../components/common/Toast/palette");
 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 _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); }
@@ -58,7 +59,8 @@ var PaletteProvider = exports.PaletteProvider = function PaletteProvider(_ref) {
       warningIcon: (0, _palette11.generateWarningIconPalette)(mergedAbstractPalette),
       divider: (0, _palette12.generateDividerPalette)(mergedAbstractPalette),
       calendar: (0, _palette13.generateCalendarPalette)(mergedAbstractPalette),
-      bgCard: (0, _palette16.generateBgCardPalette)(mergedAbstractPalette)
+      bgCard: (0, _palette16.generateBgCardPalette)(mergedAbstractPalette),
+      toast: (0, _palette17.generateToastPalette)(mergedAbstractPalette)
     };
   }, [mergedSkeletonPalette, mergedAbstractPalette]);
   return /*#__PURE__*/_react["default"].createElement(_context.PaletteContext.Provider, {

package/dist/palette/usePalette.d.ts

@@ -15,4 +15,5 @@ export declare const usePalette: () => {
     divider: import("../components/common/Divider/palette").TDividerPalette;
     calendar: import("../components/common/Calendar/palette").TCalendarPalette;
     bgCard: import("../components/common/BgCard/palette").TBgCardPalette;
+    toast: import("../components/common/Toast/palette").TToastPalette;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@invoicebox/ui",
-    "version": "0.1.0-alpha.85",
+    "version": "0.1.0-alpha.87",
     "description": "Invoicebox UI",
     "license": "Apache License 2.0",
     "scripts": {
@@ -52,7 +52,8 @@
         "hex-to-rgba": "^2.0.1",
         "lottie-react": "^2.4.0",
         "react-calendar": "^4.8.0",
-        "react-scrollbars-custom": "^4.1.1"
+        "react-scrollbars-custom": "^4.1.1",
+        "react-toastify": "^10.0.5"
     },
     "peerDependencies": {
         "react": "^18.2.0",