@teambit/notifications 0.0.568 → 0.0.569

package/notification-reducer.tsx

@@ -0,0 +1,21 @@
+import { Message } from '@teambit/ui-foundation.ui.notifications.store';
+
+export type NotificationAction = {
+  type: 'add' | 'dismiss' | 'clear';
+  content?: Message;
+  id?: string;
+};
+
+export function notificationReducer(state: Message[], action: NotificationAction) {
+  switch (action.type) {
+    case 'dismiss':
+      return state.filter((x) => x.id !== action.id);
+    case 'add':
+      if (!action.content) return state;
+      return state.concat(action.content);
+    case 'clear':
+      return [];
+    default:
+      return state;
+  }
+}

package/notification.ui.runtime.tsx

@@ -0,0 +1,87 @@
+import { UIAspect, UIRuntime, UiUI } from '@teambit/ui';
+import React, { ReactNode, useReducer } from 'react';
+import { v1 } from 'uuid';
+
+import { NotificationContext } from '@teambit/ui-foundation.ui.notifications.notification-context';
+import {
+  NotificationCenter,
+  NotificationCenterProps,
+} from '@teambit/ui-foundation.ui.notifications.notification-center';
+import { MessageLevel, NotificationsStore } from '@teambit/ui-foundation.ui.notifications.store';
+import { NotificationAction, notificationReducer } from './notification-reducer';
+import { NotificationsAspect } from './notifications.aspect';
+
+/**
+ * extension
+ */
+export default class NotificationUI implements NotificationsStore {
+  static dependencies = [UIAspect];
+
+  static runtime = UIRuntime;
+
+  static async provider([uiRuntimeExtension]: [UiUI]) {
+    return new NotificationUI(uiRuntimeExtension);
+  }
+
+  constructor(uiRuntimeExtension: UiUI) {
+    uiRuntimeExtension.registerHudItem(<this.render key="NotificationUI" />);
+    uiRuntimeExtension.registerContext(this.renderContext);
+  }
+
+  private dispatch?: React.Dispatch<NotificationAction>;
+
+  /** adds a full message to the log */
+  add = (message: string, level: MessageLevel) => {
+    const id = v1();
+
+    this.dispatch?.({
+      type: 'add',
+      content: {
+        id,
+        message,
+        level,
+        time: new Date().toISOString(),
+      },
+    });
+
+    return id;
+  };
+
+  /** removes/archives a message from the log */
+  dismiss(id: string) {
+    this.dispatch?.({
+      type: 'dismiss',
+      id,
+    });
+  }
+
+  /** adds a message with level "info" to the log */
+  log = (message: string) => this.add(message, MessageLevel.info);
+  /** adds a message with level "warning" to the log */
+  warn = (message: string) => this.add(message, MessageLevel.warning);
+  /** adds a message with level "error" to the log */
+  error = (message: string) => this.add(message, MessageLevel.error);
+  /** adds a message with level "success" to the log */
+  success = (message: string) => this.add(message, MessageLevel.success);
+
+  /** removes all notifications */
+  clear = () => {
+    this.dispatch?.({
+      type: 'clear',
+    });
+  };
+
+  private render = (props: Omit<NotificationCenterProps, 'notifications'>) => {
+    // this code assumes a single place of render per instance of NotificationUI
+    const [messages, dispatch] = useReducer(notificationReducer, []);
+    this.dispatch = dispatch;
+
+    return <NotificationCenter {...props} notifications={messages} />;
+  };
+
+  private renderContext = ({ children }: { children: ReactNode }) => {
+    return <NotificationContext.Provider value={this}>{children}</NotificationContext.Provider>;
+  };
+}
+
+NotificationsAspect.addRuntime(NotificationUI);

package/package.json

@@ -1,22 +1,22 @@
 {
   "name": "@teambit/notifications",
-  "version": "0.0.568",
+  "version": "0.0.569",
   "homepage": "https://bit.dev/teambit/ui-foundation/notifications",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.ui-foundation",
     "name": "notifications",
-    "version": "0.0.568"
+    "version": "0.0.569"
   },
   "dependencies": {
     "uuid": "3.4.0",
     "@teambit/harmony": "0.2.11",
     "@babel/runtime": "7.12.18",
     "core-js": "^3.0.0",
-    "@teambit/ui-foundation.ui.notifications.store": "0.0.471",
-    "@teambit/ui-foundation.ui.notifications.notification-center": "0.0.476",
-    "@teambit/ui-foundation.ui.notifications.notification-context": "0.0.472",
-    "@teambit/ui": "0.0.568"
+    "@teambit/ui-foundation.ui.notifications.store": "0.0.472",
+    "@teambit/ui-foundation.ui.notifications.notification-center": "0.0.477",
+    "@teambit/ui-foundation.ui.notifications.notification-context": "0.0.473",
+    "@teambit/ui": "0.0.569"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
@@ -28,7 +28,7 @@
     "@types/node": "12.20.4"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.180",
+    "@teambit/legacy": "1.0.181",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -56,27 +56,12 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.180",
+        "@teambit/legacy": "1.0.181",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }
     }
   },
-  "files": [
-    "dist",
-    "!dist/tsconfig.tsbuildinfo",
-    "**/*.md",
-    "**/*.mdx",
-    "**/*.js",
-    "**/*.json",
-    "**/*.sass",
-    "**/*.scss",
-    "**/*.less",
-    "**/*.css",
-    "**/*.css",
-    "**/*.jpeg",
-    "**/*.gif"
-  ],
   "private": false,
   "engines": {
     "node": ">=12.22.0"

package/types/asset.d.ts

@@ -0,0 +1,29 @@
+declare module '*.png' {
+  const value: any;
+  export = value;
+}
+declare module '*.svg' {
+  import type { FunctionComponent, SVGProps } from 'react';
+
+  export const ReactComponent: FunctionComponent<SVGProps<SVGSVGElement> & { title?: string }>;
+  const src: string;
+  export default src;
+}
+
+// @TODO Gilad
+declare module '*.jpg' {
+  const value: any;
+  export = value;
+}
+declare module '*.jpeg' {
+  const value: any;
+  export = value;
+}
+declare module '*.gif' {
+  const value: any;
+  export = value;
+}
+declare module '*.bmp' {
+  const value: any;
+  export = value;
+}

package/types/style.d.ts

@@ -0,0 +1,42 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.mdx' {
+  const component: any;
+  export default component;
+}