@nova-design-system/nova-react 3.14.0 → 3.15.0

package/dist/index.js

@@ -1,3 +1,4 @@
 export * from './generated/components';
 export * from '@nova-design-system/nova-webcomponents/constants';
 export { defineCustomElements } from '@nova-design-system/nova-webcomponents/loader';
+export { useNotifications, NotificationProvider, } from './providers/NotificationProvider';

package/dist/providers/NotificationProvider.js

@@ -0,0 +1,83 @@
+import React, { createContext, useContext, useState, useCallback, createRef, useEffect, useRef, } from 'react';
+import { createPortal } from 'react-dom';
+import { NvNotificationcontainer, NvNotification, NvButton, } from '../generated/components';
+const NotificationContext = createContext(null);
+const DEFAULT_POSITION = 'top-right';
+const DEFAULT_MAX_NOTIFICATIONS = 50;
+const generateId = () => {
+    return `notification-${Date.now()}-${Math.random()
+        .toString(36)
+        .substr(2, 9)}`;
+};
+export const NotificationProvider = ({ children, position = DEFAULT_POSITION, maxNotifications = DEFAULT_MAX_NOTIFICATIONS, className, }) => {
+    const [notifications, setNotifications] = useState([]);
+    const notificationsRef = useRef([]);
+    useEffect(() => {
+        notificationsRef.current = notifications;
+    }, [notifications]);
+    const show = useCallback((options) => {
+        const id = options.id || generateId();
+        const ref = createRef();
+        const notification = {
+            id,
+            heading: options.heading,
+            message: options.message,
+            dismissible: options.dismissible ?? true,
+            emphasis: options.emphasis ?? 'medium',
+            feedback: options.feedback ?? 'information',
+            icon: options.icon,
+            actions: options.actions ?? [],
+            actionSlot: options.actionSlot,
+            createdAt: Date.now(),
+            ref,
+        };
+        setNotifications((prev) => {
+            const newNotifications = [notification, ...prev];
+            if (newNotifications.length > maxNotifications) {
+                return newNotifications.slice(0, maxNotifications);
+            }
+            return newNotifications;
+        });
+        setTimeout(() => {
+            notification.ref.current?.show();
+        }, 0);
+        return id;
+    }, [maxNotifications]);
+    const dismiss = useCallback((id) => {
+        const n = notificationsRef.current.find((item) => item.id === id);
+        n?.ref.current?.dismiss();
+    }, []);
+    const remove = useCallback((id) => {
+        setNotifications((prev) => prev.filter((notification) => notification.id !== id));
+    }, []);
+    const removeAll = useCallback(() => {
+        setNotifications([]);
+    }, []);
+    const handleNotificationClose = useCallback((id) => {
+        remove(id);
+    }, [remove]);
+    const contextValue = {
+        notifications,
+        show,
+        dismiss,
+        remove,
+        removeAll,
+    };
+    return (React.createElement(NotificationContext.Provider, { value: contextValue },
+        children,
+        createPortal(React.createElement(NvNotificationcontainer, { position: position, className: className, "data-testid": "notification-container" }, notifications.map((notification) => (React.createElement(NvNotification, { key: notification.id, heading: notification.heading, message: notification.message, dismissible: notification.dismissible, emphasis: notification.emphasis, feedback: notification.feedback, icon: notification.icon, onHiddenChanged: (event) => {
+                if (event.detail) {
+                    handleNotificationClose(notification.id);
+                }
+            }, initiallyHidden: true, ref: notification.ref }, (Boolean(notification.actionSlot) ||
+            Boolean(notification.actions.length)) && (React.createElement("div", { slot: "actions" },
+            notification.actions.map((action) => (React.createElement(NvButton, { key: action.label, emphasis: "low", size: "md", onClick: action.onClick }, action.label))),
+            notification.actionSlot)))))), document.body)));
+};
+export const useNotifications = () => {
+    const context = useContext(NotificationContext);
+    if (!context) {
+        throw new Error('useNotifications must be used within a NotificationProvider');
+    }
+    return context;
+};

package/dist/types/generated/components.d.ts

@@ -36,6 +36,7 @@ import { NvLoader as NvLoaderElement } from "@nova-design-system/nova-webcompone
 import { NvMenu as NvMenuElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-menu.js";
 import { NvMenuitem as NvMenuitemElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-menuitem.js";
 import { NvNotification as NvNotificationElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-notification.js";
+import { NvNotificationcontainer as NvNotificationcontainerElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-notificationcontainer.js";
 import { NvPopover as NvPopoverElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-popover.js";
 import { NvRow as NvRowElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-row.js";
 import { NvStack as NvStackElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-stack.js";
@@ -210,6 +211,8 @@ export type NvNotificationEvents = {
     onHiddenChanged: EventName<CustomEvent<boolean>>;
 };
 export declare const NvNotification: StencilReactComponent<NvNotificationElement, NvNotificationEvents>;
+export type NvNotificationcontainerEvents = NonNullable<unknown>;
+export declare const NvNotificationcontainer: StencilReactComponent<NvNotificationcontainerElement, NvNotificationcontainerEvents>;
 export type NvPopoverEvents = {
     onOpenChanged: EventName<CustomEvent<boolean>>;
 };

package/dist/types/generated/components.server.d.ts

@@ -36,6 +36,7 @@ import { NvLoader as NvLoaderElement } from "@nova-design-system/nova-webcompone
 import { NvMenu as NvMenuElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-menu.js";
 import { NvMenuitem as NvMenuitemElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-menuitem.js";
 import { NvNotification as NvNotificationElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-notification.js";
+import { NvNotificationcontainer as NvNotificationcontainerElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-notificationcontainer.js";
 import { NvPopover as NvPopoverElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-popover.js";
 import { NvRow as NvRowElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-row.js";
 import { NvStack as NvStackElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-stack.js";
@@ -212,6 +213,8 @@ export type NvNotificationEvents = {
     onHiddenChanged: EventName<CustomEvent<boolean>>;
 };
 export declare const NvNotification: StencilReactComponent<NvNotificationElement, NvNotificationEvents>;
+export type NvNotificationcontainerEvents = NonNullable<unknown>;
+export declare const NvNotificationcontainer: StencilReactComponent<NvNotificationcontainerElement, NvNotificationcontainerEvents>;
 export type NvPopoverEvents = {
     onOpenChanged: EventName<CustomEvent<boolean>>;
 };

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
 export * from './generated/components';
 export * from '@nova-design-system/nova-webcomponents/constants';
 export { defineCustomElements } from '@nova-design-system/nova-webcomponents/loader';
+export { useNotifications, NotificationProvider, type NotificationOptions, type NotificationContextValue, type NotificationProviderProps, type Notification, } from './providers/NotificationProvider';

package/dist/types/providers/NotificationProvider.d.ts

@@ -0,0 +1,36 @@
+import React, { ReactNode } from 'react';
+import { type NotificationPosition, type NotificationEmphasis, FeedbackColors } from '../index';
+export interface NotificationAction {
+    label: string;
+    onClick: () => void;
+}
+export interface NotificationOptions {
+    id?: string;
+    heading?: string;
+    message?: string;
+    dismissible?: boolean;
+    emphasis?: `${NotificationEmphasis}`;
+    feedback?: `${FeedbackColors}`;
+    icon?: string;
+    actions?: NotificationAction[];
+    actionSlot?: React.ReactElement;
+}
+export interface Notification extends NotificationOptions {
+    createdAt: number;
+    ref: React.RefObject<HTMLNvNotificationElement>;
+}
+export interface NotificationContextValue {
+    notifications: Notification[];
+    show: (options: NotificationOptions) => string;
+    dismiss: (id: string) => void;
+    remove: (id: string) => void;
+    removeAll: () => void;
+}
+export interface NotificationProviderProps {
+    children: ReactNode;
+    position?: `${NotificationPosition}`;
+    maxNotifications?: number;
+    className?: string;
+}
+export declare const NotificationProvider: React.FC<NotificationProviderProps>;
+export declare const useNotifications: () => NotificationContextValue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-react",
-  "version": "3.14.0",
+  "version": "3.15.0",
   "description": "Nova is a design system created by Elia Group to empower creators to efficiently build solutions that people love to use.",
   "author": "Elia Group",
   "homepage": "https://nova.eliagroup.io",
@@ -27,7 +27,10 @@
   "scripts": {
     "build": "npm run build:cjs && npm run tsc",
     "build:cjs": "rollup -c",
+    "build:watch": "npm run build:cjs:watch & npm run tsc:watch",
+    "build:cjs:watch": "rollup -c --watch",
     "tsc": "tsc -p . --outDir ./dist --declarationDir ./dist/types --declaration true",
+    "tsc:watch": "tsc -p . --outDir ./dist --declarationDir ./dist/types --declaration true --watch",
     "storybook": "storybook dev -p 6006",
     "storybook.build": "storybook build -o ../../storybook-static/react",
     "clean": "rimraf dist lib/generated",