@camunda/camunda-composite-components 0.7.2-rc.0 → 0.8.0

package/lib/esm/package.json

@@ -4,7 +4,7 @@
         "type": "git",
         "url": "git+https://github.com/camunda-cloud/camunda-composite-components.git"
     },
-    "version": "0.7.1",
+    "version": "0.7.2-rc.1",
     "scripts": {
         "clean": "rimraf lib/",
         "build": "yarn clean && tsc",
@@ -30,28 +30,28 @@
         "test": "yarn test:ts && yarn test:storybook && yarn test:visual-regression:docker"
     },
     "devDependencies": {
-        "@babel/core": "7.24.5",
-        "@babel/preset-env": "7.24.5",
-        "@babel/preset-react": "7.24.1",
-        "@babel/preset-typescript": "7.24.1",
+        "@babel/core": "7.24.6",
+        "@babel/preset-env": "7.24.6",
+        "@babel/preset-react": "7.24.6",
+        "@babel/preset-typescript": "7.24.6",
         "@carbon/react": "1.55.0",
         "@mdx-js/react": "3.0.1",
         "@playwright/test": "1.42.1",
         "@semantic-release/changelog": "6.0.3",
         "@semantic-release/git": "10.0.1",
-        "@storybook/addon-a11y": "8.1.2",
-        "@storybook/addon-actions": "8.1.2",
-        "@storybook/addon-docs": "8.1.2",
-        "@storybook/addon-essentials": "8.1.2",
-        "@storybook/addon-interactions": "8.1.2",
-        "@storybook/addon-links": "8.1.2",
-        "@storybook/addon-mdx-gfm": "8.1.2",
+        "@storybook/addon-a11y": "8.1.4",
+        "@storybook/addon-actions": "8.1.4",
+        "@storybook/addon-docs": "8.1.4",
+        "@storybook/addon-essentials": "8.1.4",
+        "@storybook/addon-interactions": "8.1.4",
+        "@storybook/addon-links": "8.1.4",
+        "@storybook/addon-mdx-gfm": "8.1.4",
         "@storybook/addon-webpack5-compiler-babel": "3.0.3",
-        "@storybook/blocks": "8.1.2",
+        "@storybook/blocks": "8.1.4",
         "@storybook/preset-scss": "1.0.3",
-        "@storybook/react": "8.1.2",
-        "@storybook/react-webpack5": "8.1.2",
-        "@storybook/test": "8.1.2",
+        "@storybook/react": "8.1.4",
+        "@storybook/react-webpack5": "8.1.4",
+        "@storybook/test": "8.1.4",
         "@storybook/test-runner": "0.18.1",
         "@types/carbon-components-react": "7.55.10",
         "@types/event-source-polyfill": "1.0.5",
@@ -86,7 +86,7 @@
         "sass-loader": "14.1.1",
         "semantic-release": "23.0.7",
         "serve": "14.2.1",
-        "storybook": "8.1.2",
+        "storybook": "8.1.4",
         "style-loader": "4.0.0",
         "styled-components": "6.1.8",
         "typescript": "5.4.4",
@@ -95,6 +95,7 @@
     },
     "dependencies": {
         "jwt-decode": "4.0.0",
+        "react-error-boundary": "4.0.13",
         "react-markdown": "8.0.7"
     },
     "peerDependencies": {

package/lib/esm/src/components/c3-help-center/c3-help-center.js

@@ -1,4 +1,4 @@
-import { ComposedModal, Layer } from "@carbon/react";
+import { ActionableNotification, ComposedModal, Layer, ModalBody, ModalHeader, } from "@carbon/react";
 import React, { useEffect, useRef, useState } from "react";
 import { HelpCenter } from "./help-center";
 import { defaultHelpCenterConfig } from "./defaultHelpCenterConfig";
@@ -9,6 +9,7 @@ import { defaultTheme, useC3Profile, } from "../c3-user-configuration/c3-profile
 import { resolveTheme, } from "../c3-user-configuration/c3-profile-provider/carbon-theme-provider";
 import { useC3HelpCenter } from "./c3-help-center-provider";
 import styled from "styled-components";
+import { ErrorBoundary } from "react-error-boundary";
 const StyledComposedModal = styled(ComposedModal) `
 	.cds--modal-scroll-content {
 		mask-image: none;
@@ -206,5 +207,9 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, m
     return (React.createElement(Layer, null,
         React.createElement(StyledComposedModal, { open: isOpen, size: "lg", onClose: closeFn, className: "help-center", "aria-label": "HelpCenter", style: showSurvey || !persona?.wasShown
                 ? { backgroundColor: "rgba(22,22,22, 0.8)" }
-                : {} }, showSurvey || !persona?.wasShown ? (React.createElement(C3OnboardingSurvey, { personaCallback: personaCallback, persona: persona, mixpanelTrack: mixpanelTrack, onRequestClose: closeFn, onRequestSkip: onRequestSkipSurvey, theme: resolvedTheme, origin: hostApp, modal: true })) : (React.createElement(HelpCenter, { configuration: helpCenterConfig, persona: persona, audience: decodedAudience || "", flags: flags, onRequestResumeSurvey: onRequestResumeSurvey, onRequestRetakeSurvey: onRequestRetakeSurvey, onRequestClose: closeFn, mixpanelTrack: mixpanelTrack, email: email, theme: resolvedTheme, origin: hostApp, initialTab: activeTab })))));
+                : {} },
+            React.createElement(ErrorBoundary, { fallbackRender: () => (React.createElement(React.Fragment, null,
+                    React.createElement(ModalHeader, { title: "Help Center", closeModal: closeFn }),
+                    React.createElement(ModalBody, null,
+                        React.createElement(ActionableNotification, { inline: true, hideCloseButton: true, lowContrast: true, kind: "error", title: "Something went wrong.", subtitle: "Try reloading the page.", actionButtonLabel: "Reload", onActionButtonClick: () => window.location.reload() })))) }, showSurvey || !persona?.wasShown ? (React.createElement(C3OnboardingSurvey, { personaCallback: personaCallback, persona: persona, mixpanelTrack: mixpanelTrack, onRequestClose: closeFn, onRequestSkip: onRequestSkipSurvey, theme: resolvedTheme, origin: hostApp, modal: true })) : (React.createElement(HelpCenter, { configuration: helpCenterConfig, persona: persona, audience: decodedAudience || "", flags: flags, onRequestResumeSurvey: onRequestResumeSurvey, onRequestRetakeSurvey: onRequestRetakeSurvey, onRequestClose: closeFn, mixpanelTrack: mixpanelTrack, email: email, theme: resolvedTheme, origin: hostApp, initialTab: activeTab }))))));
 };

package/lib/esm/src/components/c3-page/c3-breadcrumb/c3-breadcrumb.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { C3BreadcrumbProps } from "./c3-breadcrumb.types";
+export declare const C3Breadcrumb: FC<C3BreadcrumbProps>;

package/lib/esm/src/components/c3-page/c3-breadcrumb/c3-breadcrumb.js

@@ -0,0 +1,32 @@
+import { Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton, Link, OverflowMenu, OverflowMenuItem, SkeletonText, Stack, Tag, } from "@carbon/react";
+import React from "react";
+const breadCrumbWrapperStyles = {
+    minHeight: "40px",
+    display: "grid",
+    gridAutoFlow: "column",
+    gridAutoColumns: "max-content",
+    alignItems: "center",
+};
+export const C3Breadcrumb = ({ loading, noTrailingSlash, elements, title, menu, tag, forwardRef, }) => {
+    let breadcrumb = null;
+    if (loading) {
+        breadcrumb = (React.createElement(Stack, null,
+            React.createElement(BreadcrumbSkeleton, null),
+            title && React.createElement(SkeletonText, null)));
+    }
+    else {
+        breadcrumb = (React.createElement(Stack, { gap: 1 },
+            React.createElement(Breadcrumb, { noTrailingSlash: noTrailingSlash ?? false }, elements.map((element) => {
+                return (React.createElement(BreadcrumbItem, { key: element.key },
+                    React.createElement(Link, { as: forwardRef, style: { cursor: "pointer" }, ...element.routeProps }, element.label)));
+            })),
+            (menu || title || tag) && (React.createElement("div", { style: breadCrumbWrapperStyles },
+                React.createElement(Stack, { orientation: "horizontal", gap: 4 },
+                    title && React.createElement("h2", null, title),
+                    tag && React.createElement(Tag, { type: "blue" }, tag)),
+                menu && (React.createElement(OverflowMenu, { style: { float: "right" }, "aria-label": "breadcrumb menu" }, menu.map((item) => {
+                    return (React.createElement(OverflowMenuItem, { key: item.key, id: item.key, onClick: () => item.onClick(), itemText: item.label, isDelete: item.isDelete }));
+                })))))));
+    }
+    return React.createElement("div", { style: breadCrumbWrapperStyles }, breadcrumb);
+};

package/lib/esm/src/components/c3-page/c3-breadcrumb/c3-breadcrumb.types.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+export interface C3BreadcrumbProps {
+    elements: Array<{
+        key: string;
+        label: string;
+        routeProps: any;
+    }>;
+    loading?: boolean;
+    noTrailingSlash?: boolean;
+    title?: string;
+    tag?: string;
+    menu?: Array<{
+        key: string;
+        label: string;
+        onClick: () => void;
+        isDelete?: boolean;
+    }>;
+    forwardRef?: React.ForwardRefExoticComponent<any>;
+}

package/lib/esm/src/components/c3-page/c3-breadcrumb/c3-breadcrumb.types.js

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

package/lib/esm/src/components/c3-page/c3-page.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { C3PageProps } from "./c3-page.types";
+declare const C3Page: FC<C3PageProps>;
+export { C3Page };

package/lib/esm/src/components/c3-page/c3-page.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { Grid, Column, Stack } from "@carbon/react";
+import { C3Tabs } from "./c3-tabs/c3-tabs";
+import { C3Breadcrumb } from "./c3-breadcrumb/c3-breadcrumb";
+import { DefaultStyleWrapper } from "../styles";
+const gridStyles = { paddingRight: 0, paddingLeft: 0 };
+const gridColumnStyles = { marginInline: 0 };
+const C3Page = ({ header, tabs, children, isLoading = false, breadcrumbs = { elements: [] }, }) => {
+    return (React.createElement(DefaultStyleWrapper, null,
+        React.createElement(Grid, { style: gridStyles },
+            React.createElement(Column, { span: 16, style: gridColumnStyles },
+                React.createElement(Stack, { orientation: "vertical", gap: 7 },
+                    (breadcrumbs.elements?.length || header) && (React.createElement(C3Breadcrumb, { ...breadcrumbs, title: header?.title, menu: header?.menuItems, tag: header?.tag, loading: isLoading })),
+                    tabs && (React.createElement(Stack, { orientation: "vertical", gap: 5 },
+                        React.createElement(C3Tabs, { tabs: tabs.list, desiredTabId: tabs?.activeTabId, onTabChange: tabs?.onChange, loading: isLoading }))),
+                    children)))));
+};
+export { C3Page };

package/lib/esm/src/components/c3-page/c3-page.test.d.ts

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

package/lib/esm/src/components/c3-page/c3-page.test.js

@@ -0,0 +1,20 @@
+import { expect, test } from "@playwright/test";
+import { getStory } from "../test-utils";
+test.describe("C3Page", () => {
+    test("Basic", async ({ page }) => {
+        await getStory(page, "components-c3page--basic");
+        await expect(page).toHaveScreenshot();
+    });
+    test("Loading", async ({ page }) => {
+        await getStory(page, "components-c3page--loading");
+        await expect(page).toHaveScreenshot();
+    });
+    test("With tag", async ({ page }) => {
+        await getStory(page, "components-c3page--with-tag");
+        await expect(page).toHaveScreenshot();
+    });
+    test("Without tabs", async ({ page }) => {
+        await getStory(page, "components-c3page--without-tabs");
+        await expect(page).toHaveScreenshot();
+    });
+});

package/lib/esm/src/components/c3-page/c3-page.types.d.ts

@@ -0,0 +1,18 @@
+import { C3BreadcrumbProps } from "./c3-breadcrumb/c3-breadcrumb.types";
+import { C3TabsProps } from "./c3-tabs/c3-tabs.types";
+import React from "react";
+export type C3PageProps = {
+    breadcrumbs?: Omit<C3BreadcrumbProps, "title" | "menu" | "tag">;
+    header?: {
+        title: string;
+        tag?: string;
+        menuItems?: C3BreadcrumbProps["menu"];
+    };
+    tabs?: {
+        list: C3TabsProps["tabs"];
+        activeTabId?: C3TabsProps["desiredTabId"];
+        onChange?: C3TabsProps["onTabChange"];
+    };
+    children?: React.ReactNode;
+    isLoading?: boolean;
+};

package/lib/esm/src/components/c3-page/c3-page.types.js

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

package/lib/esm/src/components/c3-page/c3-tabs/c3-tabs.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { C3TabsProps } from "./c3-tabs.types";
+export declare const C3Tabs: FC<C3TabsProps>;

package/lib/esm/src/components/c3-page/c3-tabs/c3-tabs.js

@@ -0,0 +1,33 @@
+import { Tab, TabList, TabPanel, TabPanels, Tabs, TabsSkeleton, } from "@carbon/react";
+import React from "react";
+const TabPanelStyles = { paddingLeft: 0, paddingRight: 0 };
+export const C3Tabs = ({ tabs, desiredTabId, onTabChange, loading = false, }) => {
+    const initializedTabs = React.useRef([]);
+    const visibleTabs = tabs.filter((tab) => tab.visible === undefined || tab.visible);
+    visibleTabs.forEach((tab) => {
+        if (tab.initializeTab && !initializedTabs.current.includes(tab.id)) {
+            initializedTabs.current = [...initializedTabs.current, tab.id];
+            tab.initializeTab();
+        }
+    });
+    const foundTab = desiredTabId
+        ? visibleTabs.findIndex((tab) => tab.id === desiredTabId)
+        : -1;
+    const selectedTab = foundTab === -1 ? 0 : foundTab;
+    const [activeTabIndex, setActiveTabIndex] = React.useState(selectedTab);
+    React.useEffect(() => {
+        setActiveTabIndex(selectedTab);
+    }, [selectedTab]);
+    if (loading) {
+        return React.createElement(TabsSkeleton, { key: "tabs-skeleton" });
+    }
+    return (React.createElement(Tabs, { selectedIndex: activeTabIndex, onChange: (event) => {
+            setActiveTabIndex(event.selectedIndex);
+            const newDesiredTab = visibleTabs[event.selectedIndex].id;
+            if (event.selectedIndex !== activeTabIndex && onTabChange) {
+                onTabChange(newDesiredTab);
+            }
+        } },
+        React.createElement(TabList, { "aria-label": "tabs" }, visibleTabs.map((tab) => (React.createElement(Tab, { key: `${tab.id}-label` }, tab.label)))),
+        React.createElement(TabPanels, null, visibleTabs.map((tab) => (React.createElement(TabPanel, { key: tab.id, style: TabPanelStyles }, tab.content))))));
+};

package/lib/esm/src/components/c3-page/c3-tabs/c3-tabs.types.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export interface C3TabsProps {
+    tabs: C3TabProps[];
+    desiredTabId?: string;
+    onTabChange?: (tabId: string) => void;
+    loading?: boolean;
+}
+export interface C3TabProps {
+    id: string;
+    label: string;
+    content: React.JSX.Element;
+    visible?: boolean;
+    initializeTab?: () => void;
+}

package/lib/esm/src/components/c3-page/c3-tabs/c3-tabs.types.js

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

package/lib/esm/src/index.d.ts

@@ -20,3 +20,7 @@ export * from "./assets/app-teaser-images/optimize-3-reports";
 export * from "./assets/app-teaser-images/tasklist-1-task-manager";
 export * from "./assets/app-teaser-images/tasklist-2-form";
 export * from "./assets/app-teaser-images/tasklist-3-api";
+export { C3Page } from "./components/c3-page/c3-page";
+export { C3PageProps } from "./components/c3-page/c3-page.types";
+export { C3BreadcrumbProps } from "./components/c3-page/c3-breadcrumb/c3-breadcrumb.types";
+export { C3TabsProps } from "./components/c3-page/c3-tabs/c3-tabs.types";

package/lib/esm/src/index.js

@@ -16,3 +16,4 @@ export * from "./assets/app-teaser-images/optimize-3-reports";
 export * from "./assets/app-teaser-images/tasklist-1-task-manager";
 export * from "./assets/app-teaser-images/tasklist-2-form";
 export * from "./assets/app-teaser-images/tasklist-3-api";
+export { C3Page } from "./components/c3-page/c3-page";

package/package.json

@@ -4,7 +4,7 @@
 		"type": "git",
 		"url": "git+https://github.com/camunda-cloud/camunda-composite-components.git"
 	},
-	"version": "0.7.2-rc.0",
+	"version": "0.8.0",
 	"scripts": {
 		"clean": "rimraf lib/",
 		"build": "yarn clean && tsc",
@@ -30,28 +30,28 @@
 		"test": "yarn test:ts && yarn test:storybook && yarn test:visual-regression:docker"
 	},
 	"devDependencies": {
-		"@babel/core": "7.24.5",
-		"@babel/preset-env": "7.24.5",
-		"@babel/preset-react": "7.24.1",
-		"@babel/preset-typescript": "7.24.1",
+		"@babel/core": "7.24.6",
+		"@babel/preset-env": "7.24.6",
+		"@babel/preset-react": "7.24.6",
+		"@babel/preset-typescript": "7.24.6",
 		"@carbon/react": "1.55.0",
 		"@mdx-js/react": "3.0.1",
 		"@playwright/test": "1.42.1",
 		"@semantic-release/changelog": "6.0.3",
 		"@semantic-release/git": "10.0.1",
-		"@storybook/addon-a11y": "8.1.2",
-		"@storybook/addon-actions": "8.1.2",
-		"@storybook/addon-docs": "8.1.2",
-		"@storybook/addon-essentials": "8.1.2",
-		"@storybook/addon-interactions": "8.1.2",
-		"@storybook/addon-links": "8.1.2",
-		"@storybook/addon-mdx-gfm": "8.1.2",
+		"@storybook/addon-a11y": "8.1.4",
+		"@storybook/addon-actions": "8.1.4",
+		"@storybook/addon-docs": "8.1.4",
+		"@storybook/addon-essentials": "8.1.4",
+		"@storybook/addon-interactions": "8.1.4",
+		"@storybook/addon-links": "8.1.4",
+		"@storybook/addon-mdx-gfm": "8.1.4",
 		"@storybook/addon-webpack5-compiler-babel": "3.0.3",
-		"@storybook/blocks": "8.1.2",
+		"@storybook/blocks": "8.1.4",
 		"@storybook/preset-scss": "1.0.3",
-		"@storybook/react": "8.1.2",
-		"@storybook/react-webpack5": "8.1.2",
-		"@storybook/test": "8.1.2",
+		"@storybook/react": "8.1.4",
+		"@storybook/react-webpack5": "8.1.4",
+		"@storybook/test": "8.1.4",
 		"@storybook/test-runner": "0.18.1",
 		"@types/carbon-components-react": "7.55.10",
 		"@types/event-source-polyfill": "1.0.5",
@@ -86,7 +86,7 @@
 		"sass-loader": "14.1.1",
 		"semantic-release": "23.0.7",
 		"serve": "14.2.1",
-		"storybook": "8.1.2",
+		"storybook": "8.1.4",
 		"style-loader": "4.0.0",
 		"styled-components": "6.1.8",
 		"typescript": "5.4.4",
@@ -95,6 +95,7 @@
 	},
 	"dependencies": {
 		"jwt-decode": "4.0.0",
+		"react-error-boundary": "4.0.13",
 		"react-markdown": "8.0.7"
 	},
 	"peerDependencies": {