@synerise/ds-alert 0.6.0 → 0.7.1

package/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.7.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.7.0...@synerise/ds-alert@0.7.1) (2022-04-05)
+
+
+### Bug Fixes
+
+* **alert:** Notification's notice border-radius ([1017519](https://github.com/Synerise/synerise-design/commit/1017519504de355667618737075adaf5b5bcb426))
+
+
+
+
+
+# [0.7.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.6.1...@synerise/ds-alert@0.7.0) (2022-04-01)
+
+
+### Bug Fixes
+
+* **alert:** linter Promise, async function returns Promise<void> ([5c1e54d](https://github.com/Synerise/synerise-design/commit/5c1e54d52a0897345cd88609adcbdcdcf5fd85bf))
+
+
+### Features
+
+* **alert:** notificationOpen to use Promise interface ([531b813](https://github.com/Synerise/synerise-design/commit/531b81318370f97d29c13d14510e602b861e20f4))
+
+
+
+
+
+## [0.6.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.6.0...@synerise/ds-alert@0.6.1) (2022-03-31)
+
+
+### Bug Fixes
+
+* **alert:** exporting NotificationProps typing ([985c994](https://github.com/Synerise/synerise-design/commit/985c994a516f0323e2903afddf9ca4bea33a594c))
+
+
+
+
+
 # [0.6.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.5.2...@synerise/ds-alert@0.6.0) (2022-03-30)
 
 

package/README.md

@@ -28,22 +28,31 @@ import Alert from '@synerise/ds-alert'
 
 ```
 
-### notifications api usage
+### Notifications
 
-#### Simple (`ant`-based)
+Notifications API offer three things:
+
+  * `<Notification/>` component for styled content,
+  * `notificationApi.useNotification()` for building a tunnel for the the right ContextApi (notifications use both `React.createPortal` plus they are mounted in container mounted in `document.body` for making it possible to position them correctly),
+    * *Pro-users*: change `getContainer` for sending notifications in other scrollable sections (`@synerise/ds-modal`, `@synerise/ds-section`).
+  * and `notificationOpen` for scheduling showing notificaitons.
+
+#### The simplest notification call
 
 ```jsx
-import notification from '@ant/notification'
+import notificationApi from '@synerise/ds-alert'
 
-notification.open({message: 'Message content', duration 4.5})
+notification.open({message: 'Message content'});
 ```
 
-#### A `synerise-design`-styled notification
+#### Styled notification
 ```jsx
-import Notification from '@ds-alert/Notification'
-import notification from '@ant/notification'
+import { Notification, notificationApi} from '@synerise/ds-alert'
 
-notification.open({message: <Notification>'Message content'</Notification>, duration: 4.5})
+notificationApi.open({
+  duration: 4.5,
+  message: <Notification>Message content</Notification>
+});
 ```
 
 #### Differently positioned notification
@@ -52,14 +61,21 @@ notification.open({message: <Notification>'Message content'</Notification>, dura
 `getContainer` has to be a `styled-components`-scoped element, this is done in `mountInstance`, see source code for more.
 
 ```jsx
-import open from '@ds-alert/Notification'
-
-const [api, contextHolder] = notification.useNotification();
-open({message: Message content, duration: 4.5}, api, contextHolder))
+import { Notification, notificationApi, notificationOpen } from '@synerise/ds-alert';
 
-console.log('@synerise/ds-alert notifications get mounted in this container', document.querySelector('.popup-container'))
+const [api, contextHolder] = notificationApi.useNotification();
+notificationOpen({
+  message: <Notification>You have new message.</Notification>,
+  placement: 'topLeft'
+}, api, contextHolder);
 ```
 
+### Usage recommendations
+
+It is recommended to call `notificationOpen` from `React.useEffect`.
+Of course you can mount styled `<Notification/>` component by yourself,
+but then you need to manage its rendering lifecycle.
+
 ## Demo
 
 <iframe src="/storybook-static/iframe.html?id=components-alert--default"></iframe>

package/dist/Notification/Notification.d.ts

@@ -2,6 +2,9 @@ import * as React from 'react';
 import { NotificationInstance } from 'antd/lib/notification';
 import type { ArgsProps, NotificationApi } from 'antd/es/notification';
 import 'antd/lib/notification/style/index.less';
+/**
+ * Typings for using better autocompletion for defining an argument for `notificationOpen`'s message property.
+ */
 export declare type NotificationProps = {
     /** content of the notification */
     children?: JSX.Element | React.ReactNode | React.ReactNode[];
@@ -14,11 +17,15 @@ export declare type NotificationProps = {
     /** close icon class */
     closeIconClassName?: string;
     /** where to position notification, `"{top,bottom}{Left,Right}" | "bottom"` */
-    placement: ArgsProps['placement'] | 'bottom';
+    placement?: ArgsProps['placement'] | 'bottom';
 } & Partial<Omit<ArgsProps, 'placement'>>;
 declare type NotificationApiHook = ReturnType<NotificationApi['useNotification']>;
 declare type ApiHook = NotificationApiHook[0];
 declare type ContextHolder = NotificationApiHook[1];
+/**
+ * Component with the content of the notification.
+ * Note that in order to show notification you need to use `notificationOpen`
+ */
 export declare function Notification({ buttonText, children, onButtonClick, onClose, icon, closeIconClassName, }: NotificationProps): JSX.Element;
 /**
  * creates a div, mounts it in getContainer and returns reference to it.
@@ -31,6 +38,28 @@ export declare function Notification({ buttonText, children, onButtonClick, onCl
 export declare function mountInstance(contextHolder?: ContextHolder, { getContainer, className }?: {
     getContainer?: (() => HTMLElement) | undefined;
     className?: string | undefined;
-}): [HTMLElement | null, Function];
-export declare function notificationOpen({ type, className, message, icon, onClick, onClose, closeIconClassName, placement, ...props }: NotificationProps, notificationApi?: ApiHook, contextHolder?: ContextHolder): void;
+}): [Promise<HTMLElement>, HTMLElement, () => void];
+/**
+ * Function for showing new notifications.
+ * It requires proper context to be injected (see `notificationApi.useNotification`)
+ * and `message` prop in its first argument.
+ * Below you will find an example usage.
+ * Please remember that it is on you to provide contextHolder in the right place.
+ * ```
+ *   import { notificationApi, Notification, notificationOpen } from '@synerise/ds-alert';
+ *   const [api, contextHolder] = notificationApi.useNotification();
+ *
+ *   function App() {
+ *     return (<div id="app">
+ *       {contextHolder}
+ *       <button onClick={() => notificationOpen({
+ *         message: <Notification>You have been notified.</Notification>
+ *       })}>
+ *         Show notification
+ *       </button>);
+ *
+ *    ReactDOM.render(<App/>, document.querySelector('#app'));
+ * ```
+ */
+export declare function notificationOpen({ type, className, message, icon, onClick, onClose, closeIconClassName, placement, ...props }: NotificationProps, notificationApi?: ApiHook, contextHolder?: ContextHolder): Promise<void>;
 export default Notification;

package/dist/Notification/Notification.js

@@ -8,6 +8,10 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { notification } from 'antd';
@@ -15,6 +19,14 @@ import "antd/lib/notification/style/index.css";
 import Button from '@synerise/ds-button';
 import Icon, { UserAddM, CloseM } from '@synerise/ds-icon';
 import * as S from './Notification.styles';
+/**
+ * Typings for using better autocompletion for defining an argument for `notificationOpen`'s message property.
+ */
+
+/**
+ * Component with the content of the notification.
+ * Note that in order to show notification you need to use `notificationOpen`
+ */
 export function Notification(_ref) {
   var buttonText = _ref.buttonText,
       _ref$children = _ref.children,
@@ -62,73 +74,112 @@ export function mountInstance(contextHolder, _temp) {
   var cont = getContainer();
   cont.appendChild(element);
   var jsxEl = /*#__PURE__*/React.createElement(S.NotificationsWrapper, null, contextHolder);
-  ReactDOM.render(jsxEl, element);
+  var renderPromsie = new Promise(function (resolve) {
+    ReactDOM.render(jsxEl, element, function () {
+      return resolve(element);
+    });
+  });
 
   var cleanUpFunction = function cleanUpFunction() {
     cont.removeChild(element);
   };
 
-  return [element, cleanUpFunction];
+  return [renderPromsie, element, cleanUpFunction];
 }
-export function notificationOpen(_ref3, notificationApi, contextHolder) {
-  var _ref3$type = _ref3.type,
-      type = _ref3$type === void 0 ? 'info' : _ref3$type,
-      _ref3$className = _ref3.className,
-      className = _ref3$className === void 0 ? 'popup-container' : _ref3$className,
-      message = _ref3.message,
-      icon = _ref3.icon,
-      onClick = _ref3.onClick,
-      onClose = _ref3.onClose,
-      _ref3$closeIconClassN = _ref3.closeIconClassName,
-      closeIconClassName = _ref3$closeIconClassN === void 0 ? 'ds-close-icon' : _ref3$closeIconClassN,
-      _ref3$placement = _ref3.placement,
-      placement = _ref3$placement === void 0 ? 'bottom' : _ref3$placement,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded);
-
-  var api = notificationApi || notification; // TODO: check if context is actually available
-
-  var el = document.body.querySelector("." + className);
-
-  if (!el) {
-    var _mountInstance = mountInstance(contextHolder, {
-      className: className
-    });
-
-    el = _mountInstance[0];
-  }
-
-  var getContainer = function getContainer() {
-    var _el;
-
-    return (_el = el) == null ? void 0 : _el.querySelector('div>div,.NotificationsBottomPlacementWrapper>.NotificationsWrapper');
-  };
-  /** a workaround for handling close clicks,
-   * since there's no way for injecting other element triggering onClose listener.
-   * It is set as a listener for all the clicks
-   * and fires onClose when close-icon was clicked */
-
-
-  var maybeCloseClick = function maybeCloseClick(ev) {
-    var _ev$currentTarget;
-
-    var isClickedElementChildOfCloseIcon = ev.target.closest("." + closeIconClassName);
-    var isThisCloseIcon = ev == null ? void 0 : (_ev$currentTarget = ev.currentTarget) == null ? void 0 : _ev$currentTarget.classList.contains("" + closeIconClassName);
-
-    if (isClickedElementChildOfCloseIcon || isThisCloseIcon) {
-      return onClose && onClose();
-    }
+/**
+ * Function for showing new notifications.
+ * It requires proper context to be injected (see `notificationApi.useNotification`)
+ * and `message` prop in its first argument.
+ * Below you will find an example usage.
+ * Please remember that it is on you to provide contextHolder in the right place.
+ * ```
+ *   import { notificationApi, Notification, notificationOpen } from '@synerise/ds-alert';
+ *   const [api, contextHolder] = notificationApi.useNotification();
+ *
+ *   function App() {
+ *     return (<div id="app">
+ *       {contextHolder}
+ *       <button onClick={() => notificationOpen({
+ *         message: <Notification>You have been notified.</Notification>
+ *       })}>
+ *         Show notification
+ *       </button>);
+ *
+ *    ReactDOM.render(<App/>, document.querySelector('#app'));
+ * ```
+ */
 
-    return onClick && onClick();
-  };
+export function notificationOpen(_x, _x2, _x3) {
+  return _notificationOpen.apply(this, arguments);
+}
 
-  return api.open(_objectSpread({
-    message: message,
-    type: type,
-    placement: placement,
-    getContainer: getContainer,
-    icon: icon,
-    onClick: maybeCloseClick,
-    bottom: 16
-  }, props));
+function _notificationOpen() {
+  _notificationOpen = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(_ref3, notificationApi, contextHolder) {
+    var _ref3$type, type, _ref3$className, className, message, icon, onClick, onClose, _ref3$closeIconClassN, closeIconClassName, _ref3$placement, placement, props, api, el, containerPromise, _mountInstance, getContainer, maybeCloseClick;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _ref3$type = _ref3.type, type = _ref3$type === void 0 ? 'info' : _ref3$type, _ref3$className = _ref3.className, className = _ref3$className === void 0 ? 'popup-container' : _ref3$className, message = _ref3.message, icon = _ref3.icon, onClick = _ref3.onClick, onClose = _ref3.onClose, _ref3$closeIconClassN = _ref3.closeIconClassName, closeIconClassName = _ref3$closeIconClassN === void 0 ? 'ds-close-icon' : _ref3$closeIconClassN, _ref3$placement = _ref3.placement, placement = _ref3$placement === void 0 ? 'bottom' : _ref3$placement, props = _objectWithoutPropertiesLoose(_ref3, _excluded);
+            api = notificationApi || notification; // TODO: check if context is actually available
+
+            el = document.body.querySelector("." + className);
+
+            if (!el) {
+              _mountInstance = mountInstance(contextHolder, {
+                className: className
+              });
+              containerPromise = _mountInstance[0];
+              el = _mountInstance[1];
+            }
+
+            _context.next = 6;
+            return containerPromise;
+
+          case 6:
+            getContainer = function getContainer() {
+              var _el;
+
+              return (_el = el) == null ? void 0 : _el.querySelector('div>div,.NotificationsBottomPlacementWrapper>.NotificationsWrapper');
+            };
+            /** a workaround for handling close clicks,
+             * since there's no way for injecting other element triggering onClose listener.
+             * It is set as a listener for all the clicks
+             * and fires onClose when close-icon was clicked */
+
+
+            maybeCloseClick = function maybeCloseClick(ev) {
+              var _ev$currentTarget;
+
+              var isClickedElementChildOfCloseIcon = ev.target.closest("." + closeIconClassName);
+              var isThisCloseIcon = ev == null ? void 0 : (_ev$currentTarget = ev.currentTarget) == null ? void 0 : _ev$currentTarget.classList.contains("" + closeIconClassName);
+
+              if (isClickedElementChildOfCloseIcon || isThisCloseIcon) {
+                return onClose && onClose();
+              }
+
+              return onClick && onClick();
+            };
+
+            return _context.abrupt("return", api.open(_objectSpread({
+              message: message,
+              type: type,
+              placement: placement,
+              getContainer: getContainer,
+              icon: icon,
+              onClick: maybeCloseClick,
+              bottom: 16
+            }, props)));
+
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _notificationOpen.apply(this, arguments);
 }
+
 export default Notification;

package/dist/Notification/Notification.styles.js

@@ -3,7 +3,7 @@ import theme from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
 export var NotificationsContainer = styled.div.withConfig({
   displayName: "Notificationstyles__NotificationsContainer",
   componentId: "sc-1ke52b0-0"
-})(["background-color:", ";color:white;min-width:588px;padding:8px;padding-left:16px;padding-right:8px;display:flex;align-items:center;width:100px;min-height:50px;"], function (props) {
+})(["background-color:", ";color:white;min-width:588px;padding:8px 8px 8px 16px;display:flex;align-items:center;width:100px;min-height:50px;"], function (props) {
   var _palette;
 
   return (_palette = ((props == null ? void 0 : props.theme) || theme).palette) == null ? void 0 : _palette['grey-800'];
@@ -19,7 +19,7 @@ export var TextLabel = styled.div.withConfig({
 export var NotificationsWrapper = styled.div.withConfig({
   displayName: "Notificationstyles__NotificationsWrapper",
   componentId: "sc-1ke52b0-3"
-})(["& .ant-notification-bottom .ant-notification-hook-holder{margin:0px;margin-top:0px;&:not(:first-child){margin-top:8px;}}& .ant-notification.ant-notification-bottom{right:0px;left:0px;margin:0 auto;width:588px;bottom:8px;}& .ant-notification-hook-holder{background-color:transparent;box-shadow:none;width:588px;}& .ant-notification-notice{padding:0px;background-color:transparent;margin:unset;}& .ant-notification-notice{background-color:transparent;width:588px;border-radius:3px;box-shadow:0 16px 32px 0 ", "1a,0 8px 16px 0 ", "1a;}.ant-notification-notice-icon{display:none;}.ant-notification-notice-with-icon{background-color:transparent;}.ant-notification-notice-close{display:none;}& .ant-notification-notice-message,& .ant-notification-notice-closable .ant-notification-notice-message{padding-right:0;}& .ant-notification-notice-message,& .ant-notification-notice-with-icon .ant-notification-notice-message{margin-left:0;margin-bottom:0;}}"], function (props) {
+})(["& .ant-notification-bottom .ant-notification-hook-holder{margin:0;&:not(:first-child){margin-top:8px;}}& .ant-notification.ant-notification-bottom{right:0;left:0;margin:0 auto;width:588px;bottom:8px;}& .ant-notification-hook-holder{background-color:transparent;box-shadow:none;width:588px;}& .ant-notification-notice{padding:0;background-color:transparent;margin:unset;}& .ant-notification-notice{background-color:transparent;width:588px;border-radius:6px;box-shadow:0 16px 32px 0 ", "1a,0 8px 16px 0 ", "1a;}.ant-notification-notice-icon{display:none;}.ant-notification-notice-with-icon{background-color:transparent;}.ant-notification-notice-close{display:none;}& .ant-notification-notice-message,& .ant-notification-notice-closable .ant-notification-notice-message{padding-right:0;}& .ant-notification-notice-message,& .ant-notification-notice-with-icon .ant-notification-notice-message{margin-left:0;margin-bottom:0;}}"], function (props) {
   var _palette2;
 
   return (_palette2 = ((props == null ? void 0 : props.theme) || theme).palette) == null ? void 0 : _palette2['grey-900'];

package/dist/Notification/__spec__/Notification.spec.js

@@ -24,4 +24,6 @@ describe('notification', function () {
   it.todo('sending notification with another placement handles it correctly');
   it.todo('getContainer should always point at NotificationsWrapper element');
   it.todo('.ant-notification-bottom should be properly styled even if e.g. .ant-notification-topLeft was added first (`.ant-notification{, }.ant-notification-bottom`)');
+  it.todo('notificationOpen works with useEffect');
+  it.todo('if running from useEffect handle it so works, do not force used to rely on useLayoutEffect');
 });

package/dist/index.d.ts

@@ -1,5 +1,10 @@
 export { default } from './Alert';
 export * as S from './Notification/Notification.styles';
+/**
+ * notificationApi is required for properly handling injecting ContextApi for styling and locales.
+ * It's a proxy to `antd`'s `notification` module.
+ */
+export declare const notificationsApi: import("antd/lib/notification").NotificationApi;
+export type { NotificationProps } from './Notification/Notification';
 export { default as Notification } from './Notification/Notification';
-export { NotificationProps } from './Notification/Notification';
 export { notificationOpen } from './Notification/Notification';

package/dist/index.js

@@ -1,6 +1,12 @@
+import { notification } from 'antd';
 export { default } from './Alert';
 import * as _S from './Notification/Notification.styles';
 export { _S as S };
+/**
+ * notificationApi is required for properly handling injecting ContextApi for styling and locales.
+ * It's a proxy to `antd`'s `notification` module.
+ */
+
+export var notificationsApi = notification;
 export { default as Notification } from './Notification/Notification';
-export { NotificationProps } from './Notification/Notification';
 export { notificationOpen } from './Notification/Notification';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-alert",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "Alert UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -47,5 +47,5 @@
   "devDependencies": {
     "@synerise/ds-utils": "^0.19.0"
   },
-  "gitHead": "93d7c60a7fe73188d715fd52b9701f81fcb4e60a"
+  "gitHead": "5793ce09feb88b36cc8ca1923ddfcb272b889cb0"
 }