@camunda/camunda-composite-components 0.3.1-rc.9 → 0.4.1-rc.0

package/README.md

@@ -25,7 +25,7 @@ yarn build
 
 ## Release
 
-Just create a [new release](https://github.com/camunda-cloud/camunda-composite-components/releases/new). This will start a github action to bump the version in `package.json` and publish the package to the github package repository.
+Simply run our [release workflow](https://github.com/camunda-cloud/camunda-composite-components/actions/workflows/release.yml) in the GitHub Actions tab. This will create a new release, publish the package to npm and update the changelog automatically.
 
 Pushing to `main` will update the storybook available under [cloudflare page](https://camunda-composite-components.pages.dev/).
 

package/lib/esm/package.json

@@ -0,0 +1,114 @@
+{
+    "name": "@camunda/camunda-composite-components",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/camunda-cloud/camunda-composite-components.git"
+    },
+    "version": "0.4.0",
+    "scripts": {
+        "clean": "rimraf lib/",
+        "build": "yarn clean && tsc",
+        "storybook": "storybook dev -p 6006",
+        "start": "yarn storybook",
+        "build:storybook": "storybook build",
+        "build:all": "yarn build && yarn build:storybook",
+        "serve:storybook": "serve ./storybook-static -p 6006 -n -L",
+        "prepare": "husky install",
+        "format": "prettier --write .",
+        "lint": "eslint src/",
+        "lint:fix": "eslint --fix src/",
+        "test:ts": "tsc --noEmit --project ./tsconfig.json",
+        "test:storybook": "TEST_A11Y=true test-storybook",
+        "test:storybook:smoke": "test-storybook",
+        "start:docker-storybook": "yarn build:storybook && docker-compose up -d && docker-compose exec c3-visual-regression yarn serve:storybook",
+        "test:visual-regression": "wait-on http://localhost:6006 && PWTEST_SKIP_TEST_OUTPUT=1 yarn playwright test",
+        "test:visual-regression:ui": "yarn test:playwright --ui",
+        "report:visual-regression": "yarn playwright show-report",
+        "update:visual-regression": "yarn playwright test --update-snapshots",
+        "test:visual-regression:docker": "docker exec -it -t c3-visual-regression yarn test:visual-regression",
+        "update:visual-regression:docker": "docker exec -it -t c3-visual-regression yarn update:visual-regression",
+        "test": "yarn test:ts && yarn test:storybook && yarn test:visual-regression:docker"
+    },
+    "devDependencies": {
+        "@babel/core": "7.23.7",
+        "@babel/preset-env": "7.23.8",
+        "@babel/preset-react": "7.23.3",
+        "@babel/preset-typescript": "7.23.3",
+        "@carbon/react": "1.48.1",
+        "@mdx-js/react": "3.0.0",
+        "@playwright/test": "1.41.1",
+        "@semantic-release/changelog": "6.0.3",
+        "@semantic-release/git": "10.0.1",
+        "@storybook/addon-a11y": "7.6.8",
+        "@storybook/addon-actions": "7.6.8",
+        "@storybook/addon-docs": "7.6.8",
+        "@storybook/addon-essentials": "7.6.8",
+        "@storybook/addon-interactions": "7.6.8",
+        "@storybook/addon-links": "7.6.8",
+        "@storybook/blocks": "7.6.8",
+        "@storybook/preset-scss": "1.0.3",
+        "@storybook/react": "7.6.8",
+        "@storybook/react-webpack5": "7.6.8",
+        "@storybook/test-runner": "0.16.0",
+        "@storybook/testing-library": "0.2.2",
+        "@types/carbon-components-react": "7.55.10",
+        "@types/event-source-polyfill": "1.0.5",
+        "@types/mixpanel-browser": "2.48.1",
+        "@types/node": "20.11.10",
+        "@types/react": "18.2.48",
+        "@types/react-dom": "18.2.18",
+        "@types/styled-components": "5.1.34",
+        "@typescript-eslint/eslint-plugin": "6.9.0",
+        "@typescript-eslint/parser": "6.9.0",
+        "axe-playwright": "1.2.3",
+        "babel-loader": "9.1.3",
+        "conventional-changelog-conventionalcommits": "7.0.2",
+        "copyfiles": "2.4.1",
+        "css-loader": "6.9.1",
+        "eslint": "8.52.0",
+        "eslint-config-prettier": "9.0.0",
+        "eslint-import-resolver-typescript": "3.6.1",
+        "eslint-plugin-import": "2.29.0",
+        "eslint-plugin-prettier": "5.0.1",
+        "eslint-plugin-react": "7.33.2",
+        "eslint-plugin-react-hooks": "4.6.0",
+        "eslint-plugin-storybook": "0.6.15",
+        "event-source-polyfill": "1.0.31",
+        "husky": "8.0.3",
+        "mixpanel-browser": "2.48.1",
+        "prettier": "3.0.3",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "rimraf": "5.0.5",
+        "sass": "1.70.0",
+        "sass-loader": "13.3.3",
+        "semantic-release": "22.0.12",
+        "serve": "14.2.1",
+        "storybook": "7.6.8",
+        "style-loader": "3.3.4",
+        "styled-components": "6.1.8",
+        "typescript": "5.3.3",
+        "wait-on": "7.2.0",
+        "webpack": "5.90.0"
+    },
+    "dependencies": {
+        "jwt-decode": "4.0.0",
+        "react-markdown": "8.0.7"
+    },
+    "peerDependencies": {
+        "@carbon/react": "1.x",
+        "event-source-polyfill": "1.0.x",
+        "react": "18.x",
+        "react-dom": "18.x",
+        "styled-components": "5.x || 6.x"
+    },
+    "description": "Camunda Composite Components",
+    "main": "./lib/esm/src/index.js",
+    "types": "./lib/esm/src/index.d.ts",
+    "files": [
+        "/lib"
+    ],
+    "author": "Camunda",
+    "license": "Apache-2.0",
+    "packageManager": "yarn@4.0.2"
+}

package/lib/esm/{api → src/api}/help-center.d.ts

@@ -2,7 +2,7 @@ import { HelpCenterConfig } from "../components/c3-help-center/defaultHelpCenter
 import { Persona, TileConfig, WpCardType } from "../components/c3-help-center/c3-help-center.types";
 import { OnboardingConfig } from "../components/c3-onboarding-survey/defaultOnboardingConfig";
 import { RequestPayload } from "./api";
-export declare const getConfig: (accessToken: string, audience: string) => Promise<HelpCenterConfig | null>;
+export declare const getConfig: (accessToken: string, audience: string, orgId: string) => Promise<HelpCenterConfig | null>;
 export declare const getTiles: ({ accessToken, tileConfig, salesPlanType, clusterIds, currentOrgId, persona, flags, email, cloudAudience, }: {
     accessToken: string;
     tileConfig: TileConfig[];
@@ -16,9 +16,10 @@ export declare const getTiles: ({ accessToken, tileConfig, salesPlanType, cluste
     salesPlanType: string;
     flags: string[];
 }) => Promise<WpCardType[]>;
-export declare const getOnboardingConfig: ({ camundaAuth, audience, }: {
+export declare const getOnboardingConfig: ({ camundaAuth, audience, orgId, }: {
     audience: string;
     camundaAuth: RequestPayload["camundaAuth"];
+    orgId: string;
 }) => Promise<OnboardingConfig>;
 export declare const updatePersona: ({ newPersona, audience, accessToken, orgId, userId, }: {
     newPersona: Persona;

package/lib/esm/{api → src/api}/help-center.js

@@ -1,8 +1,8 @@
 import { recommendations } from "../components/c3-help-center/recommendations";
 import { request } from "./api";
-export const getConfig = async (accessToken, audience) => {
+export const getConfig = async (accessToken, audience, orgId) => {
     try {
-        const response = await fetch(`https://helpcenter.${audience}/helpcenter/config`, {
+        const response = await fetch(`https://helpcenter.${audience}/helpcenter/config/${orgId}`, {
             headers: {
                 authorization: `Bearer ${accessToken}`,
                 "Content-Type": "application/json",
@@ -31,8 +31,8 @@ export const getTiles = async ({ accessToken, tileConfig, salesPlanType, cluster
     });
     return cards;
 };
-export const getOnboardingConfig = ({ camundaAuth, audience, }) => request({
-    url: `https://helpcenter.${audience}/survey/config`,
+export const getOnboardingConfig = ({ camundaAuth, audience, orgId, }) => request({
+    url: `https://helpcenter.${audience}/survey/config/${orgId}`,
     camundaAuth,
     type: "json",
 });

package/lib/esm/{api → src/api}/profile.js

@@ -1,9 +1,9 @@
-import jwt from "jwt-decode";
+import { jwtDecode } from "jwt-decode";
 import { request } from "./api";
 const decodeJWT = (userToken) => {
     let decodedToken = {};
     try {
-        decodedToken = jwt(userToken);
+        decodedToken = jwtDecode(userToken);
     }
     catch (error) {
         console.error("User token invalid");

package/lib/esm/src/components/c3-cluster-tag/c3-cluster-tag.test.js

@@ -0,0 +1,8 @@
+import { expect, test } from "@playwright/test";
+import { getStory } from "../test-utils";
+test.describe("Cluster tag", () => {
+    test("Basic", async ({ page }) => {
+        await getStory(page, "components-c3clustertag--basic");
+        await expect(page).toHaveScreenshot();
+    });
+});

package/lib/esm/{components → src/components}/c3-help-center/c3-help-center-provider.d.ts

@@ -1,5 +1,8 @@
 import React, { FC, PropsWithChildren } from "react";
-import { HelpCenterHintType } from "./help-center-hint";
+export declare enum HelpCenterHintType {
+    HelpCenter = "help-center",
+    Onboarding = "onboarding"
+}
 export type C3HelpCenterContextValue = {
     openHelpCenter: (showTabId?: string) => void;
     setIsHelpCenterOpen: (isOpen: boolean) => void;

package/lib/esm/{components → src/components}/c3-help-center/c3-help-center-provider.js

@@ -1,4 +1,9 @@
 import React, { useEffect, useState } from "react";
+export var HelpCenterHintType;
+(function (HelpCenterHintType) {
+    HelpCenterHintType["HelpCenter"] = "help-center";
+    HelpCenterHintType["Onboarding"] = "onboarding";
+})(HelpCenterHintType || (HelpCenterHintType = {}));
 export const C3HelpCenterContext = React.createContext({
     openHelpCenter: () => undefined,
     setIsHelpCenterOpen: () => undefined,
@@ -6,7 +11,7 @@ export const C3HelpCenterContext = React.createContext({
     showHint: false,
     setShowHint: () => undefined,
     setShowHintOnClose: () => undefined,
-    hintType: "onboarding",
+    hintType: HelpCenterHintType.Onboarding,
     setHintType: () => undefined,
 });
 export const C3HelpCenterProvider = ({ children }) => {
@@ -14,7 +19,7 @@ export const C3HelpCenterProvider = ({ children }) => {
     const [activeTabId, setActiveTabId] = useState(null);
     const [showHint, setShowHint] = useState(false);
     const [showHintOnClose, setShowHintOnClose] = useState(false);
-    const [hintType, setHintType] = useState("onboarding");
+    const [hintType, setHintType] = useState(HelpCenterHintType.Onboarding);
     const openHelpCenter = (showTabId) => {
         if (!isHelpCenterOpen) {
             setIsHelpCenterOpen(true);
@@ -27,17 +32,11 @@ export const C3HelpCenterProvider = ({ children }) => {
         if (!isHelpCenterOpen) {
             setActiveTabId(null);
             if (showHintOnClose) {
-                console.log("showing hint and hiding after");
                 setShowHintOnClose(false);
-                console.log("starting timeout for showing hint");
-                setTimeout(() => {
-                    console.log("timeout over, showing hint");
-                    setShowHint(true);
-                }, 240);
+                setTimeout(() => setShowHint(true), 240);
             }
         }
     }, [isHelpCenterOpen]);
-    console.log("showHintOnClose", showHintOnClose);
     return (React.createElement(C3HelpCenterContext.Provider, { value: {
             openHelpCenter,
             setIsHelpCenterOpen,

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

@@ -51,9 +51,10 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, m
     const fetchConfig = async () => {
         if (!userToken || !decodedAudience)
             return;
-        const onboardConfig = await getConfig(userToken, decodedAudience);
+        const onboardConfig = await getConfig(userToken, decodedAudience, activeOrganizationId);
         setHelpCenterConfig(onboardConfig || defaultHelpCenterConfig);
     };
+    const isFirstLoad = useRef(true);
     const fetchData = async () => {
         if (!userToken || !decodedToken || !decodedAudience)
             return;
@@ -76,23 +77,31 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, m
             onRequestOpen?.();
         }
         await fetchConfig();
+        isFirstLoad.current = false;
     };
     React.useEffect(() => {
         fetchData();
     }, [JSON.stringify(decodedToken), decodedAudience]);
     useEffect(() => {
-        if (!userToken || !decodedAudience || !persona?.complete)
+        if (isFirstLoad.current ||
+            !userToken ||
+            !decodedAudience ||
+            !persona?.complete)
             return;
         fetchConfig();
         reloadClusters();
     }, [persona?.complete]);
+    useEffect(() => {
+        if (isFirstLoad.current || !activeOrganizationId)
+            return;
+        fetchConfig();
+        reloadClusters();
+    }, [activeOrganizationId]);
     React.useEffect(() => {
         const tabs = helpCenterConfig.tabs;
         const firstTab = tabs[0].id;
         if (isOpen) {
-            console.log("opening hc");
             if (autoStartSurvey && !persona?.wasShown) {
-                console.log("show hint on close");
                 setShowHintOnClose(true);
             }
             if (persona && !persona.wasShown && decodedAudience) {

package/lib/esm/{components → src/components}/c3-help-center/help-center-hint.d.ts

@@ -1,3 +1,2 @@
 import React, { PropsWithChildren } from "react";
-export type HelpCenterHintType = "help-center" | "onboarding";
 export declare const HelpCenterHint: React.FC<PropsWithChildren>;

package/lib/esm/{components → src/components}/c3-help-center/help-center-hint.js

@@ -1,18 +1,17 @@
 import React from "react";
 import { Button, Toggletip, ToggletipActions, ToggletipContent, } from "@carbon/react";
-import { useC3HelpCenter } from "./c3-help-center-provider";
+import { HelpCenterHintType, useC3HelpCenter } from "./c3-help-center-provider";
 export const HelpCenterHint = ({ children }) => {
     const { showHint, setShowHint, hintType } = useC3HelpCenter();
-    console.log("showHint", showHint);
     return showHint ? (React.createElement(Toggletip, { defaultOpen: true, 
         // eslint-disable-next-line
         // @ts-ignore
         align: "bottom-right" },
         children,
         React.createElement(ToggletipContent, null,
-            React.createElement("p", null, hintType === "help-center"
-                ? "Access the help center at any time to see your recommendations, discover guides, tutorials, or to share feedback."
-                : "Access the onboarding survey to get personalized next steps and educational content"),
+            React.createElement("p", null, hintType === HelpCenterHintType.HelpCenter
+                ? "Access the Help Center at any time to see your recommendations, discover guides, tutorials, or to share feedback."
+                : "Access the onboarding survey from the Help Center to get personalized next steps and educational content."),
             React.createElement(ToggletipActions, null,
                 React.createElement(Button, { size: "sm", onClick: () => setShowHint(false) }, "Got it"))))) : (children);
 };

package/lib/esm/{components → src/components}/c3-help-center/help-center.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../../../../../src/carbon.d.ts" />
 import { ModalBodyProps, ModalHeaderProps } from "@carbon/react";
 import { Dict } from "mixpanel-browser";
 import { FC } from "react";

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

@@ -1,4 +1,4 @@
-import { Button, Loading, ModalBody, ModalFooter, ModalHeader, SideNav, SideNavItems, SideNavMenuItem, Stack, } from "@carbon/react";
+import { Button, ModalBody, ModalFooter, ModalHeader, SideNav, SideNavItems, SideNavMenuItem, Stack, } from "@carbon/react";
 import { Undo } from "@carbon/react/icons";
 import React, { useEffect, useState } from "react";
 import { Feedback } from "./tabs/feedback";
@@ -9,6 +9,7 @@ import { body01, headings } from "../styles";
 import styled from "styled-components";
 import { useC3HelpCenter } from "./c3-help-center-provider";
 import { useC3Profile } from "../c3-user-configuration/c3-profile-provider/c3-profile-provider";
+import { TabContentSkeleton } from "./tabs/tabContentSkeleton";
 export const StyledModalHeader = styled(ModalHeader) `
 	${headings}
 `;
@@ -52,8 +53,8 @@ export const HelpCenter = ({ configuration, persona, email, audience, flags = []
                     });
                 }
             }
-            setTabTiles(tiles);
             setIsLoadingTiles(false);
+            setTabTiles(tiles);
         })();
     }, [
         token,
@@ -78,7 +79,7 @@ export const HelpCenter = ({ configuration, persona, email, audience, flags = []
         Object.keys(tabTiles).length === 0 &&
         isLoadingTiles) {
         header = "Your recommendations";
-        content = React.createElement(Loading, { style: { marginLeft: "17rem" } });
+        content = React.createElement(TabContentSkeleton, null);
     }
     else if (activeTab === "recommendations" &&
         Object.keys(tabTiles).length === 0) {

package/lib/esm/{components → src/components}/c3-help-center/tabs/feedback.js

@@ -30,7 +30,7 @@ export const Feedback = (props) => {
         placeholder: Placeholder.Feedback,
     });
     const [suggestion, setSuggestion] = useState("");
-    const [allowContact, setAllowContact] = useState(false);
+    const [allowContact, setAllowContact] = useState(true);
     const [file, setFile] = useState(undefined);
     const [submitted, setSubmitted] = useState(false);
     const [isDoingAsyncWork, setisDoingAsyncWork] = useState(false);

package/lib/esm/{components → src/components}/c3-help-center/tabs/tabContent.d.ts

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import React, { FC } from "react";
 import { Dict } from "mixpanel-browser";
 import { WpCardType } from "../c3-help-center.types";
 export declare const TAB_TYPES: {
@@ -6,6 +6,7 @@ export declare const TAB_TYPES: {
     readonly Column: "column";
 };
 export type TabType = (typeof TAB_TYPES)[keyof typeof TAB_TYPES];
+export declare const TileWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
 export declare const TabContent: FC<{
     onboarding: {
         complete: boolean;

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

@@ -0,0 +1,20 @@
+import { ActionableNotification, Stack } from "@carbon/react";
+import React from "react";
+import { HelpCenterTile } from "../tile";
+import styled from "styled-components";
+export const TAB_TYPES = {
+    Grid: "grid",
+    Column: "column",
+};
+export const TileWrapper = styled.div `
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: flex-start;
+	gap: var(--cds-spacing-05);
+`;
+export const TabContent = ({ onboarding, type, origin, tiles, mixpanelTrack }) => {
+    return (React.createElement("div", null,
+        React.createElement(Stack, null,
+            onboarding && onboarding?.complete !== true && (React.createElement(ActionableNotification, { kind: "info", inline: true, lowContrast: true, hideCloseButton: true, style: { maxWidth: "100%", marginBottom: "1rem" }, actionButtonLabel: "Resume Survey", onActionButtonClick: onboarding.resumeSurvey, title: "Complete the new user survey to see more recommendations", subtitle: "" })),
+            React.createElement(TileWrapper, null, tiles.map((tile) => (React.createElement(HelpCenterTile, { origin: origin, tabType: type, tile: tile, mixpanelTrack: mixpanelTrack, key: tile.card_id })))))));
+};

package/lib/esm/src/components/c3-help-center/tabs/tabContentSkeleton.d.ts

@@ -0,0 +1,2 @@
+import { FC } from "react";
+export declare const TabContentSkeleton: FC;

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

@@ -0,0 +1,22 @@
+import React from "react";
+import { TileWrapper } from "./tabContent";
+import styled from "styled-components";
+import { SkeletonPlaceholder } from "@carbon/react";
+const TileOuter = styled.div `
+	background: var(--cds-layer-02, #f4f4f4);
+	display: flex;
+	width: 300px;
+	height: 300px;
+	padding: 16px;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 16px;
+`;
+const TileSkeleton = styled(SkeletonPlaceholder) `
+	width: 100%;
+	height: 100%;
+`;
+export const TabContentSkeleton = () => (React.createElement(TileWrapper, null, Array(6)
+    .fill("_")
+    .map((_, i) => (React.createElement(TileOuter, { key: `tile-skeleton-${i}-${Math.random() * 10000}` },
+    React.createElement(TileSkeleton, null))))));

package/lib/esm/{components → src/components}/c3-help-center/tile.js

@@ -3,6 +3,21 @@ import { ArrowRight } from "@carbon/react/icons";
 import React from "react";
 import { TAB_TYPES } from "./tabs/tabContent";
 import ReactMarkdown from "react-markdown";
+import styled from "styled-components";
+const TileHeading = styled.h6 `
+	font-size: var(--cds-heading-compact-01-font-size);
+	font-weight: var(--cds-heading-compact-01-font-weight);
+	line-height: var(--cds-heading-compact-01-line-height);
+	letter-spacing: var(--cds-heading-compact-01-letter-spacing);
+`;
+const TileDescription = styled.p `
+	height: 50px;
+	color: var(--cds-text-secondary);
+`;
+const TileStack = styled.div `
+	display: flex;
+	flex-direction: column;
+`;
 export const HelpCenterTile = ({ tile, tabType, origin, mixpanelTrack }) => {
     const { title, description, timeToComplete, cta, image, link, card_id } = tile;
     if (tabType === TAB_TYPES.Grid) {
@@ -12,17 +27,17 @@ export const HelpCenterTile = ({ tile, tabType, origin, mixpanelTrack }) => {
             }, className: "cds--layer-two" },
             React.createElement(Stack, { orientation: "vertical", gap: 3 },
                 React.createElement("img", { src: image, alt: title }),
-                React.createElement(Stack, null,
-                    React.createElement("h5", null, title),
-                    React.createElement("p", { style: { height: "50px" } }, description),
+                React.createElement(TileStack, null,
+                    React.createElement(TileHeading, null, title),
+                    React.createElement(TileDescription, null, description),
                     React.createElement("div", { style: { marginLeft: "-4px", marginTop: "12px" } }, (() => {
                         let content = React.createElement("div", { style: { height: "32px" } });
                         if (timeToComplete) {
-                            content = (React.createElement(Tag, { type: "gray", title: timeToComplete }, timeToComplete));
+                            content = (React.createElement(Tag, { type: "warm-gray", size: "sm", title: timeToComplete }, timeToComplete));
                         }
                         return content;
                     })()))),
-            React.createElement(Button, { as: "a", href: link, target: "_blank", onClick: () => {
+            React.createElement(Button, { size: "sm", as: "a", href: link, target: "_blank", onClick: () => {
                     mixpanelTrack?.(`helpcenter:click`, {
                         from: origin,
                         to: card_id,

package/lib/esm/{components → src/components}/c3-navigation/c3-navigation-sidebar/c3-org-sidebar.js

@@ -62,7 +62,7 @@ const C3OrgSidebar = ({ sideBar }) => {
                 } },
                 React.createElement(FormLabel, null, activeOrganization.activeLabel),
                 React.createElement("div", { className: "textPrimary", style: {
-                        height: "20px",
+                        height: "20px", // Set minimum height to allow decenders to be rendered
                         lineHeight: "20px",
                         fontSize: "14px",
                         textOverflow: "ellipsis",

package/lib/esm/{components → src/components}/c3-navigation/c3-navigation-sidebar/components.d.ts

@@ -1,2 +1,3 @@
+/// <reference path="../../../../../../src/carbon.d.ts" />
 import { SwitcherDivider as CarbonSwitcherDivider } from "@carbon/react";
 export declare const SwitcherDivider: typeof CarbonSwitcherDivider;

package/lib/esm/{components → src/components}/c3-navigation/c3-navigation.types.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../../../../../src/carbon.d.ts" />
 /// <reference types="react" />
 import { Tag } from "@carbon/react";
 import { Endpoints, Stage } from "../../api/endpoints.const";

package/lib/esm/src/components/c3-navigation/c3-notification-provider/c3-notification-container.d.ts

@@ -0,0 +1,13 @@
+import React, { FC } from "react";
+import { Notification as NotificationProps } from "../../../api/notifications";
+export declare const NotificationTitle: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>;
+export declare const NotificationDescription: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>;
+export declare const LinkContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+declare const C3NotificationContainer: FC<NotificationProps & {
+    onRead: () => void;
+    onDismiss: () => void;
+    onLinkClick?: (meta: NotificationProps["meta"]) => void;
+    originalOnLinkClick?: (meta: NotificationProps["meta"]) => void;
+    unread?: boolean;
+}>;
+export default C3NotificationContainer;

package/lib/esm/{components → src/components}/c3-navigation/c3-notification-provider/c3-notification-container.js

@@ -96,9 +96,13 @@ const C3NotificationContainer = ({ description, state, timestamp, title, onDismi
             (state === "new" || unread) && React.createElement(Dot, null),
             React.createElement(NotificationHeader, null,
                 React.createElement(Timestamp, null, getReadableTimestamp(timestamp)),
-                // eslint-disable-next-line
+                React.createElement(CloseButton
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-ignore
-                React.createElement(CloseButton, { kind: "ghost", hasIconOnly: true, iconDescription: "Dismiss", align: "bottom-right", renderIcon: Close, onClick: dismissNotification, size: "sm", "$show": isHovering }))),
+                , { 
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore
+                    kind: "ghost", hasIconOnly: true, iconDescription: "Dismiss", align: "bottom-right", renderIcon: Close, onClick: dismissNotification, size: "sm", "$show": isHovering }))),
         React.createElement(NotificationTitle, null, title),
         React.createElement(NotificationDescription, null, description),
         meta && (React.createElement(LinkContainer, null,

package/lib/esm/{components → src/components}/c3-navigation/story-helpers.js

@@ -225,5 +225,5 @@ export const createHelpCenterProps = (options) => ({
     origin: options?.origin || "console",
     theme: options?.theme,
     autoStartSurvey: options?.autoStartSurvey,
-    mixpanelTrack: (event, data) => console.log(`Mixpanel event ${event} tracked: ${data}`),
+    mixpanelTrack: (event, data) => console.log(`Mixpanel event ${event} tracked: ${JSON.stringify(data)}`),
 });

package/lib/esm/{components → src/components}/c3-onboarding-survey/c3-onboarding-survey.js

@@ -30,6 +30,7 @@ export const C3OnboardingSurvey = (props) => {
             const config = await getOnboardingConfig({
                 audience: decodedAudience,
                 camundaAuth: { token: userToken },
+                orgId: activeOrganizationId,
             });
             setOnboardConfig(config);
             setIsLoadingConfig(false);

package/lib/esm/{components → src/components}/c3-onboarding-survey/onboardingModal.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../../../../../src/carbon.d.ts" />
 import { ModalBodyProps } from "@carbon/react";
 import React, { FC } from "react";
 export declare const StyledModalBody: FC<ModalBodyProps>;

package/lib/esm/{components → src/components}/c3-onboarding-survey/onboardingSurvey.js

@@ -4,7 +4,7 @@ import { OnboardingModal } from "./onboardingModal";
 import { OnboardingPage } from "./onboardingPage";
 import { OnboardingStep } from "./step";
 import { Body01 } from "../styles";
-import { useC3HelpCenter } from "../c3-help-center/c3-help-center-provider";
+import { HelpCenterHintType, useC3HelpCenter, } from "../c3-help-center/c3-help-center-provider";
 export const OnboardingSurvey = ({ appTheme, persona, userFirstName, syncPersona, setPersona, mixpanelTrack, onRequestClose, onboardingConfiguration, isLoadingConfig, modal, origin, }) => {
     const { setHintType } = useC3HelpCenter();
     const [step, setStep] = useState(persona?.nextStep ?? 0);
@@ -22,8 +22,7 @@ export const OnboardingSurvey = ({ appTheme, persona, userFirstName, syncPersona
             },
         };
         if (committedStep >= onboardingConfiguration.steps.length) {
-            console.log("survey completed");
-            setHintType("help-center");
+            setHintType(HelpCenterHintType.HelpCenter);
             newPersona.nextStep = 0;
             newPersona.complete = true;
             await syncPersona(newPersona, true);

package/lib/esm/{components → src/components}/c3-onboarding-survey/step.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const OnboardingStep: ({ theme, config, generic, setGeneric, }: {
     theme: string;
     config: any;

package/lib/esm/{components → src/components}/c3-user-configuration/authToken.js

@@ -1,4 +1,4 @@
-import jwt from "jwt-decode";
+import { jwtDecode } from "jwt-decode";
 const AUTH0_BASE_CLAIM = `https://camunda.com`;
 const AUTH0_TOKEN_ATTRIBUTE_SETTINGS = "settings";
 const AUTH0_TOKEN_ATTRIBUTE_META = "meta";
@@ -8,7 +8,7 @@ export const getMeta = (token) => token[`${AUTH0_BASE_CLAIM}/${AUTH0_TOKEN_ATTRI
 export const decodeJWT = (userToken) => {
     let decodedToken = null;
     try {
-        decodedToken = jwt(userToken);
+        decodedToken = jwtDecode(userToken);
     }
     catch (error) {
         console.error("User token invalid");

package/lib/esm/src/components/styles.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const headings: import("styled-components").RuleSet<object>;
+export declare const body02: import("styled-components").RuleSet<object>;
+export declare const Body02: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>;
+export declare const body01: import("styled-components").RuleSet<object>;
+export declare const Body01: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>;

package/lib/esm/src/icons/c3-icons.types.js

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