@camunda/camunda-composite-components 0.1.1 → 0.1.2

package/lib/esm/api/notifications.js

@@ -1,170 +1,161 @@
-import { EventSourcePolyfill } from "event-source-polyfill"
-import { request } from "./api"
-import { getEndpointByOptions, NOTIFICATIONS } from "./endpoints.const"
+import { EventSourcePolyfill } from "event-source-polyfill";
+import { request } from "./api";
+import { getEndpointByOptions, NOTIFICATIONS } from "./endpoints.const";
 export class NotificationService {
-	static async getNotifications(options) {
-		let notifications = []
-		try {
-			notifications = await request({
-				method: "get",
-				base: "notifications",
-				stage: options.stage,
-				endpoints: options.endpoints,
-				camundaAuth: {
-					token: options.userToken,
-					refreshTokenMethod: options.getNewUserToken,
-				},
-				url: `notifications/orgs/${options.activeOrganizationId}`,
-			})
-			return notifications
-		} catch (error) {
-			console.error(error)
-		}
-		return notifications
-	}
-	static sendAnalyticsEvent(options, eventOptions) {
-		request({
-			method: "post",
-			base: "notifications",
-			stage: options.stage,
-			endpoints: options.endpoints,
-			camundaAuth: {
-				token: options.userToken,
-				refreshTokenMethod: options.getNewUserToken,
-			},
-			url: `analytics/${options.activeOrganizationId}/${eventOptions.event}`,
-			body: {
-				id: eventOptions.id,
-			},
-			responseType: "text",
-		})
-			.then(() => {
-				// do nothing
-			})
-			.catch((error) => {
-				console.error(error)
-			})
-	}
-	static changeState(options, notificationId, operation) {
-		request({
-			method: "patch",
-			base: "notifications",
-			stage: options.stage,
-			endpoints: options.endpoints,
-			camundaAuth: {
-				token: options.userToken,
-				refreshTokenMethod: options.getNewUserToken,
-			},
-			url: `notifications/${notificationId}/${operation}`,
-		})
-			.then(() => {
-				// do nothing
-			})
-			.catch((error) => {
-				console.error(error)
-			})
-	}
-	static changeManyStates(options, notificationIds, operation) {
-		if (notificationIds.length === 0) {
-			return
-		}
-		request({
-			method: "patch",
-			base: "notifications",
-			stage: options.stage,
-			endpoints: options.endpoints,
-			camundaAuth: {
-				token: options.userToken,
-				refreshTokenMethod: options.getNewUserToken,
-			},
-			url: `notifications/batch/state/${operation}`,
-			body: {
-				uuids: notificationIds,
-			},
-		})
-			.then(() => {
-				// do nothing
-			})
-			.catch((error) => {
-				console.error(error)
-			})
-	}
-	static notificationsStream(options, handler) {
-		const baseUrl = getEndpointByOptions({
-			...options,
-			endpoint: NOTIFICATIONS,
-		})
-		const source = new EventSourcePolyfill(`${baseUrl}/notifications/events`, {
-			headers: {
-				authorization: `Bearer ${options.userToken}`,
-			},
-			heartbeatTimeout: 1000 * 60 * 60,
-		})
-		source.onmessage = function (event) {
-			try {
-				const notification = JSON.parse(event.data)
-				if (!notification.keepAlive) {
-					handler(notification)
-				}
-			} catch (error) {
-				console.error(`Failed to handle SSE event`, { error })
-			}
-		}
-	}
-	// updates <allNotifications> with <newNotification>
-	// if <newNotification> is read or new, it will be added to <allNotifications>
-	// if <newNotification> is dismissed, it will be removed from <allNotifications>
-	static updateNotifications(allNotifications, newNotification) {
-		const updatedNotifications = allNotifications
-			.slice()
-			.filter(
-				(currentNotification) =>
-					currentNotification.uuid !== newNotification.uuid,
-			)
-		if (newNotification.state === "read" || newNotification.state === "new") {
-			updatedNotifications.push(newNotification)
-		}
-		updatedNotifications.sort((a, b) => b.timestamp - a.timestamp)
-		return updatedNotifications
-	}
-	static updateNotificationState(allNotifications, notificationId, newState) {
-		let updatedNotifications = allNotifications.slice()
-		let foundNotification
-		switch (newState) {
-			case "dismiss":
-				updatedNotifications = updatedNotifications.filter(
-					(notification) => notification.uuid !== notificationId,
-				)
-				break
-			case "read":
-				foundNotification = updatedNotifications.find(
-					(currentNotification) => currentNotification.uuid === notificationId,
-				)
-				if (foundNotification) {
-					foundNotification.state = newState
-				}
-				break
-		}
-		return updatedNotifications
-	}
-	static updateNotificationStates(allNotifications, notificationIds, newState) {
-		let updatedNotifications = allNotifications.slice()
-		let foundNotifications = []
-		switch (newState) {
-			case "dismiss":
-				updatedNotifications = updatedNotifications.filter(
-					(notification) => !notificationIds.includes(notification.uuid),
-				)
-				break
-			case "read":
-				foundNotifications = updatedNotifications.filter((notification) =>
-					notificationIds.includes(notification.uuid),
-				)
-				foundNotifications.forEach((foundNotification) => {
-					foundNotification.state = newState
-				})
-				break
-		}
-		return updatedNotifications
-	}
+    static async getNotifications(options) {
+        let notifications = [];
+        try {
+            notifications = await request({
+                method: "get",
+                base: "notifications",
+                stage: options.stage,
+                endpoints: options.endpoints,
+                camundaAuth: {
+                    token: options.userToken,
+                    refreshTokenMethod: options.getNewUserToken,
+                },
+                url: `notifications/orgs/${options.activeOrganizationId}`,
+            });
+            return notifications;
+        }
+        catch (error) {
+            console.error(error);
+        }
+        return notifications;
+    }
+    static sendAnalyticsEvent(options, eventOptions) {
+        request({
+            method: "post",
+            base: "notifications",
+            stage: options.stage,
+            endpoints: options.endpoints,
+            camundaAuth: {
+                token: options.userToken,
+                refreshTokenMethod: options.getNewUserToken,
+            },
+            url: `analytics/${options.activeOrganizationId}/${eventOptions.event}`,
+            body: {
+                id: eventOptions.id,
+            },
+            responseType: "text",
+        })
+            .then(() => {
+            // do nothing
+        })
+            .catch((error) => {
+            console.error(error);
+        });
+    }
+    static changeState(options, notificationId, operation) {
+        request({
+            method: "patch",
+            base: "notifications",
+            stage: options.stage,
+            endpoints: options.endpoints,
+            camundaAuth: {
+                token: options.userToken,
+                refreshTokenMethod: options.getNewUserToken,
+            },
+            url: `notifications/${notificationId}/${operation}`,
+        })
+            .then(() => {
+            // do nothing
+        })
+            .catch((error) => {
+            console.error(error);
+        });
+    }
+    static changeManyStates(options, notificationIds, operation) {
+        if (notificationIds.length === 0) {
+            return;
+        }
+        request({
+            method: "patch",
+            base: "notifications",
+            stage: options.stage,
+            endpoints: options.endpoints,
+            camundaAuth: {
+                token: options.userToken,
+                refreshTokenMethod: options.getNewUserToken,
+            },
+            url: `notifications/batch/state/${operation}`,
+            body: {
+                uuids: notificationIds,
+            },
+        })
+            .then(() => {
+            // do nothing
+        })
+            .catch((error) => {
+            console.error(error);
+        });
+    }
+    static notificationsStream(options, handler) {
+        const baseUrl = getEndpointByOptions({
+            ...options,
+            endpoint: NOTIFICATIONS,
+        });
+        const source = new EventSourcePolyfill(`${baseUrl}/notifications/events`, {
+            headers: {
+                authorization: `Bearer ${options.userToken}`,
+            },
+            heartbeatTimeout: 1000 * 60 * 60,
+        });
+        source.onmessage = function (event) {
+            try {
+                const notification = JSON.parse(event.data);
+                if (!notification.keepAlive) {
+                    handler(notification);
+                }
+            }
+            catch (error) {
+                console.error(`Failed to handle SSE event`, { error });
+            }
+        };
+    }
+    // updates <allNotifications> with <newNotification>
+    // if <newNotification> is read or new, it will be added to <allNotifications>
+    // if <newNotification> is dismissed, it will be removed from <allNotifications>
+    static updateNotifications(allNotifications, newNotification) {
+        const updatedNotifications = allNotifications
+            .slice()
+            .filter((currentNotification) => currentNotification.uuid !== newNotification.uuid);
+        if (newNotification.state === "read" || newNotification.state === "new") {
+            updatedNotifications.push(newNotification);
+        }
+        updatedNotifications.sort((a, b) => b.timestamp - a.timestamp);
+        return updatedNotifications;
+    }
+    static updateNotificationState(allNotifications, notificationId, newState) {
+        let updatedNotifications = allNotifications.slice();
+        let foundNotification;
+        switch (newState) {
+            case "dismiss":
+                updatedNotifications = updatedNotifications.filter((notification) => notification.uuid !== notificationId);
+                break;
+            case "read":
+                foundNotification = updatedNotifications.find((currentNotification) => currentNotification.uuid === notificationId);
+                if (foundNotification) {
+                    foundNotification.state = newState;
+                }
+                break;
+        }
+        return updatedNotifications;
+    }
+    static updateNotificationStates(allNotifications, notificationIds, newState) {
+        let updatedNotifications = allNotifications.slice();
+        let foundNotifications = [];
+        switch (newState) {
+            case "dismiss":
+                updatedNotifications = updatedNotifications.filter((notification) => !notificationIds.includes(notification.uuid));
+                break;
+            case "read":
+                foundNotifications = updatedNotifications.filter((notification) => notificationIds.includes(notification.uuid));
+                foundNotifications.forEach((foundNotification) => {
+                    foundNotification.state = newState;
+                });
+                break;
+        }
+        return updatedNotifications;
+    }
 }

package/lib/esm/components/c3-empty-state/c3-empty-state.d.ts

@@ -1,9 +1,2 @@
-/// <reference types="react" />
-import { C3EmptyStateProps } from "./c3-empty-state.types"
-export declare const C3EmptyState: ({
-	icon,
-	heading,
-	description,
-	button,
-	link,
-}: C3EmptyStateProps) => JSX.Element
+import { C3EmptyStateProps } from "./c3-empty-state.types";
+export declare const C3EmptyState: ({ icon, heading, description, button, link, }: C3EmptyStateProps) => JSX.Element;

package/lib/esm/components/c3-empty-state/c3-empty-state.js

@@ -1,58 +1,17 @@
-import { Stack, Tile, Button, Link } from "@carbon/react"
-import React from "react"
-export const C3EmptyState = ({ icon, heading, description, button, link }) =>
-	React.createElement(
-		Tile,
-		{
-			style: {
-				paddingLeft: "5rem",
-				paddingTop: "3rem",
-				paddingBottom: "3rem",
-			},
-		},
-		React.createElement(
-			Stack,
-			{ orientation: "horizontal", gap: 6 },
-			icon && React.createElement("img", { src: icon.path, alt: icon.altText }),
-			React.createElement(
-				Stack,
-				{ gap: 3 },
-				React.createElement("h2", null, heading),
-				React.createElement(
-					Stack,
-					{ gap: 6 },
-					React.createElement(
-						"p",
-						{ style: { maxWidth: "400px" } },
-						description,
-					),
-					React.createElement(
-						Stack,
-						{ gap: 5 },
-						button &&
-							React.createElement(
-								Button,
-								{
-									id: button.id,
-									size: "md",
-									onClick: button.onClick,
-									renderIcon: button.icon,
-									disabled: button.disabled,
-								},
-								button.label,
-							),
-						link &&
-							React.createElement(
-								"div",
-								null,
-								React.createElement(
-									Link,
-									{ target: "_blank", href: link.href, onClick: link.onClick },
-									link.label,
-								),
-							),
-					),
-				),
-			),
-		),
-	)
+import { Stack, Tile, Button, Link } from "@carbon/react";
+import React from "react";
+export const C3EmptyState = ({ icon, heading, description, button, link, }) => (React.createElement(Tile, { style: {
+        paddingLeft: "5rem",
+        paddingTop: "3rem",
+        paddingBottom: "3rem",
+    } },
+    React.createElement(Stack, { orientation: "horizontal", gap: 6 },
+        icon && React.createElement("img", { src: icon.path, alt: icon.altText }),
+        React.createElement(Stack, { gap: 3 },
+            React.createElement("h2", null, heading),
+            React.createElement(Stack, { gap: 6 },
+                React.createElement("p", { style: { maxWidth: "400px" } }, description),
+                React.createElement(Stack, { gap: 5 },
+                    button && (React.createElement(Button, { id: button.id, size: "md", onClick: button.onClick, renderIcon: button.icon, disabled: button.disabled }, button.label)),
+                    link && (React.createElement("div", null,
+                        React.createElement(Link, { target: "_blank", href: link.href, onClick: link.onClick }, link.label)))))))));

package/lib/esm/components/c3-empty-state/c3-empty-state.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/esm/components/c3-empty-state/c3-empty-state.test.js

@@ -0,0 +1,12 @@
+import { expect, test } from "@playwright/test";
+import { getStory } from "../test-utils";
+test.describe("Empty State", () => {
+    test("Basic", async ({ page }) => {
+        await getStory(page, "components-c3emptystate--basic");
+        await expect(page).toHaveScreenshot();
+    });
+    test("No icon", async ({ page }) => {
+        await getStory(page, "components-c3emptystate--no-icon");
+        await expect(page).toHaveScreenshot();
+    });
+});

package/lib/esm/components/c3-empty-state/c3-empty-state.types.d.ts

@@ -1,21 +1,21 @@
-import { ReactElement } from "react"
+import { ReactElement } from "react";
 export interface C3EmptyStateProps {
-	heading: string
-	description: string | ReactElement
-	icon?: {
-		path: string
-		altText: string
-	}
-	button?: {
-		onClick: () => void
-		disabled?: boolean
-		label: string
-		icon?: any
-		id?: string
-	}
-	link?: {
-		href: string
-		label: string
-		onClick?: () => void
-	}
+    heading: string;
+    description: string | ReactElement;
+    icon?: {
+        path: string;
+        altText: string;
+    };
+    button?: {
+        onClick: () => void;
+        disabled?: boolean;
+        label: string;
+        icon?: any;
+        id?: string;
+    };
+    link?: {
+        href: string;
+        label: string;
+        onClick?: () => void;
+    };
 }

package/lib/esm/components/c3-empty-state/c3-empty-state.types.js

@@ -1 +1 @@
-export {}
+export {};

package/lib/esm/components/c3-navigation/c3-info-button.d.ts

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import { FC } from "react";
 export declare const InfoButton: FC<{
-	onClick: () => void
-}>
+    onClick: () => void;
+}>;

package/lib/esm/components/c3-navigation/c3-info-button.js

@@ -1,13 +1,5 @@
-import React from "react"
-import { HeaderGlobalAction } from "@carbon/react"
-import { Help } from "@carbon/react/icons"
-export const InfoButton = ({ onClick }) =>
-	React.createElement(
-		HeaderGlobalAction,
-		{
-			"aria-label": "Open Help Center",
-			tooltipAlignment: "center",
-			onClick: onClick,
-		},
-		React.createElement(Help, { size: 20 }),
-	)
+import React from "react";
+import { HeaderGlobalAction } from "@carbon/react";
+import { Help } from "@carbon/react/icons";
+export const InfoButton = ({ onClick }) => (React.createElement(HeaderGlobalAction, { "aria-label": "Open Help Center", tooltipAlignment: "center", onClick: onClick },
+    React.createElement(Help, { size: 20 })));

package/lib/esm/components/c3-navigation/c3-navigation-actions/c3-action-buttons.d.ts

@@ -1,6 +1,6 @@
-import { FC } from "react"
-import { C3ActionButtonsProps } from "./c3-action-buttons.types"
+import { FC } from "react";
+import { C3ActionButtonsProps } from "./c3-action-buttons.types";
 declare const C3ActionButtons: FC<{
-	elements: C3ActionButtonsProps
-}>
-export default C3ActionButtons
+    elements: C3ActionButtonsProps;
+}>;
+export default C3ActionButtons;

package/lib/esm/components/c3-navigation/c3-navigation-actions/c3-action-buttons.js

@@ -1,21 +1,13 @@
-import React from "react"
-import { HeaderGlobalAction } from "@carbon/react"
-const C3ActionButtons = ({ elements }) => {
-	return React.createElement(
-		React.Fragment,
-		null,
-		elements.map((actionButton) => {
-			return React.createElement(
-				HeaderGlobalAction,
-				{
-					"aria-label": `Open ${actionButton.label}`,
-					onClick: actionButton.action,
-					isActive: false,
-					key: `${actionButton.label}-key`,
-				},
-				actionButton.icon,
-			)
-		}),
-	)
-}
-export default C3ActionButtons
+import { HeaderGlobalAction } from "@carbon/react";
+import React from "react";
+const C3ActionButtons = ({ elements, }) => {
+    return (React.createElement(React.Fragment, null, elements.map((actionButton) => {
+        if ("element" in actionButton) {
+            return actionButton.element;
+        }
+        else {
+            return (React.createElement(HeaderGlobalAction, { "aria-label": `Open ${actionButton.label}`, onClick: actionButton.action, isActive: false, key: `${actionButton.label}-key` }, actionButton.icon));
+        }
+    })));
+};
+export default C3ActionButtons;

package/lib/esm/components/c3-navigation/c3-navigation-actions/c3-action-buttons.types.d.ts

@@ -1,6 +1,10 @@
-import { ReactElement } from "react"
-export declare type C3ActionButtonsProps = Array<{
-	label: string
-	icon: ReactElement
-	action: () => void
-}>
+import { ReactElement } from "react";
+export interface C3ActionButtonElement {
+    element: JSX.Element;
+}
+export interface C3ActionButtonSimple {
+    label: string;
+    icon: ReactElement;
+    action: () => void;
+}
+export declare type C3ActionButtonsProps = Array<C3ActionButtonElement | C3ActionButtonSimple>;

package/lib/esm/components/c3-navigation/c3-navigation-actions/c3-action-buttons.types.js

@@ -1 +1 @@
-export {}
+export {};

package/lib/esm/components/c3-navigation/c3-navigation-appbar.d.ts

@@ -1,3 +1,3 @@
-import React from "react"
-import { C3NavigationProps } from "./c3-navigation.types"
-export declare const C3NavigationAppBar: React.FC<C3NavigationProps>
+import React from "react";
+import { C3NavigationProps } from "./c3-navigation.types";
+export declare const C3NavigationAppBar: React.FC<C3NavigationProps>;