@camunda/camunda-composite-components 0.2.0 → 0.2.1-rc.0

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

@@ -1,10 +1,11 @@
 import { FC } from "react";
 import { Persona } from "./c3-help-center.types";
 import { Dict } from "mixpanel-browser";
+import { Theme } from "../c3-user-configuration/c3-profile-provider/c3-profile-provider";
 export interface C3HelpCenterProps {
     isOpen: boolean;
     origin: "console" | "webmodeler" | "operate" | "tasklist" | "optimize";
-    theme?: "light" | "dark";
+    theme?: Theme;
     flags?: string[];
     activeTab?: string;
     autoStartSurvey?: boolean;

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

@@ -1,13 +1,19 @@
 import { ComposedModal, Layer } from "@carbon/react";
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { HelpCenter } from "./help-center";
 import { defaultHelpCenterConfig } from "./defaultHelpCenterConfig";
 import { C3OnboardingSurvey } from "../c3-onboarding-survey/c3-onboarding-survey";
 import { getClusters, getConfig, getOrg, updatePersona, } from "../../api/help-center";
 import { decodeJWT } from "../c3-user-configuration/authToken";
 import { useC3UserConfiguration } from "../c3-user-configuration/c3-user-configuration-provider";
-export const C3HelpCenter = ({ autoStartSurvey, origin, flags, isOpen, onRequestClose, mixpanelTrack, onRequestOpen, theme = "light", onPersonaChange, activeTab, }) => {
-    const { userToken, activeOrganizationId } = useC3UserConfiguration() || {};
+import { defaultTheme, useC3Profile, } from "../c3-user-configuration/c3-profile-provider/c3-profile-provider";
+import { resolveTheme, } from "../c3-user-configuration/c3-profile-provider/carbon-theme-provider";
+export const C3HelpCenter = ({ autoStartSurvey, origin, flags, isOpen, onRequestClose, mixpanelTrack, onRequestOpen, theme, onPersonaChange, activeTab, }) => {
+    const { userToken, activeOrganizationId, handleTheme } = useC3UserConfiguration() || {};
+    const { theme: themeConfig, isEnabled } = useC3Profile();
+    const themeHandlingEnabled = isEnabled && !!handleTheme && !!themeConfig;
+    const themeRef = useRef();
+    const [resolvedTheme, setResolvedTheme] = useState(defaultTheme);
     const [persona, setPersona] = useState(undefined);
     const [userId, setUserId] = useState("");
     const [token, setToken] = useState("");
@@ -17,6 +23,26 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, isOpen, onRequest
     const [helpCenterConfig, setHelpCenterConfig] = useState(defaultHelpCenterConfig);
     const [email, setEmail] = useState("");
     const [showSurvey, setShowSurvey] = useState(autoStartSurvey);
+    useEffect(() => {
+        const updateResolvedTheme = ({ matches }) => {
+            if (themeRef.current === "system") {
+                setResolvedTheme(matches ? "light" : "dark");
+            }
+        };
+        window
+            .matchMedia("(prefers-color-scheme: light)")
+            .addEventListener("change", updateResolvedTheme);
+        return () => {
+            window
+                .matchMedia("(prefers-color-scheme: light)")
+                .removeEventListener("change", updateResolvedTheme);
+        };
+    }, []);
+    useEffect(() => {
+        const newTheme = themeHandlingEnabled ? themeConfig : theme;
+        themeRef.current = newTheme;
+        setResolvedTheme(resolveTheme(newTheme || "light"));
+    }, [theme, themeConfig, isOpen]);
     const fetchData = async () => {
         const decodedToken = decodeJWT(userToken);
         if (!decodedToken)
@@ -133,5 +159,5 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, isOpen, onRequest
         onRequestClose?.();
     };
     return (React.createElement(Layer, null,
-        React.createElement(ComposedModal, { open: isOpen, size: "lg", onClose: closeFn, className: "help-center", "aria-label": "HelpCenter" }, showSurvey || !persona ? (React.createElement(C3OnboardingSurvey, { personaCallback: personaCallback, persona: persona, mixpanelTrack: mixpanelTrack, onRequestClose: closeFn, onRequestSkip: onRequestSkipSurvey, theme: theme, origin: origin, modal: true })) : (React.createElement(HelpCenter, { configuration: helpCenterConfig, persona: persona, audience: audience, organization: organization, clusters: clusters || [], flags: flags, onRequestResumeSurvey: onRequestResumeSurvey, onRequestRetakeSurvey: onRequestRetakeSurvey, onRequestClose: closeFn, mixpanelTrack: mixpanelTrack, email: email, theme: theme, origin: origin, initialTab: activeTab })))));
+        React.createElement(ComposedModal, { open: isOpen, size: "lg", onClose: closeFn, className: "help-center", "aria-label": "HelpCenter" }, showSurvey || !persona ? (React.createElement(C3OnboardingSurvey, { personaCallback: personaCallback, persona: persona, mixpanelTrack: mixpanelTrack, onRequestClose: closeFn, onRequestSkip: onRequestSkipSurvey, theme: resolvedTheme, origin: origin, modal: true })) : (React.createElement(HelpCenter, { configuration: helpCenterConfig, persona: persona, audience: audience, organization: organization, clusters: clusters || [], flags: flags, onRequestResumeSurvey: onRequestResumeSurvey, onRequestRetakeSurvey: onRequestRetakeSurvey, onRequestClose: closeFn, mixpanelTrack: mixpanelTrack, email: email, theme: resolvedTheme, origin: origin, initialTab: activeTab })))));
 };

package/lib/esm/components/c3-navigation/story-helpers.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { C3NavigationAppProps, C3NavigationElementProps, C3NavigationNavBarProps, C3NavigationProps } from "./c3-navigation.types";
+import { C3HelpCenterProps } from "../c3-help-center/c3-help-center";
 export declare function createAppProps(): C3NavigationAppProps;
 export declare function createAppBarProps(options?: {
     isOpen?: boolean;
@@ -24,3 +25,4 @@ export declare function createUserSideBarProps(options: {
 export declare function createNotificationSideBarProps(options: {
     isOpen: boolean;
 }): C3NavigationProps["notificationSideBar"];
+export declare const createHelpCenterProps: (options?: C3HelpCenterProps) => C3NavigationProps["helpCenter"];

package/lib/esm/components/c3-navigation/story-helpers.js

@@ -212,3 +212,8 @@ export function createNotificationSideBarProps(options) {
         isOpen: options.isOpen,
     };
 }
+export const createHelpCenterProps = (options) => ({
+    origin: options?.origin || "console",
+    theme: options?.theme,
+    mixpanelTrack: (event, data) => console.log(`Mixpanel event ${event} tracked: ${data}`),
+});

package/lib/esm/components/c3-user-configuration/c3-profile-provider/c3-profile-provider.d.ts

@@ -1,8 +1,11 @@
 import React, { FC, PropsWithChildren } from "react";
+import { ResolvedTheme } from "./carbon-theme-provider";
 export type Theme = "light" | "dark" | "system";
+export declare const defaultTheme: "light";
 export type C3ProfileContextValue = {
     isEnabled: boolean;
     theme: Theme;
+    resolvedTheme: ResolvedTheme;
     onThemeChange: (newTheme: Theme) => void;
 };
 export declare const C3ProfileContext: React.Context<C3ProfileContextValue>;

package/lib/esm/components/c3-user-configuration/c3-profile-provider/c3-profile-provider.js

@@ -1,33 +1,57 @@
-import React, { createContext, useContext, useEffect, useState, } from "react";
+import React, { createContext, useContext, useEffect, useRef, useState, } from "react";
 import { C3UserConfigurationContext } from "../c3-user-configuration-provider";
 import { getUserTheme, updateTheme } from "../../../api/profile";
-import { CarbonThemeProvider } from "./carbon-theme-provider";
-const defaultTheme = "light";
+import { CarbonThemeProvider, resolveTheme, } from "./carbon-theme-provider";
+export const defaultTheme = "light";
 export const C3ProfileContext = createContext({
     isEnabled: false,
     theme: defaultTheme,
+    resolvedTheme: defaultTheme,
     onThemeChange: () => undefined,
 });
 export const C3ProfileProvider = ({ children }) => {
     const config = useContext(C3UserConfigurationContext);
     const isEnabled = !!config;
-    const [theme, setTheme] = useState(getUserTheme(config.userToken) || defaultTheme);
+    const themeRef = useRef(getUserTheme(config.userToken) || defaultTheme);
+    const [resolvedTheme, setResolvedTheme] = useState(defaultTheme);
+    useEffect(() => {
+        const updateSystemTheme = ({ matches }) => {
+            if (themeRef.current === "system")
+                setResolvedTheme(matches ? "dark" : "light");
+        };
+        window
+            .matchMedia("(prefers-color-scheme: dark)")
+            .addEventListener("change", updateSystemTheme);
+        return () => {
+            window
+                .matchMedia("(prefers-color-scheme: dark)")
+                .removeEventListener("change", updateSystemTheme);
+        };
+    }, []);
     useEffect(() => {
         if (isEnabled && config.userToken && config.handleTheme) {
             const currentTheme = getUserTheme(config.userToken);
-            if (currentTheme)
-                setTheme(currentTheme);
+            if (currentTheme) {
+                themeRef.current = currentTheme;
+                setResolvedTheme(resolveTheme(currentTheme));
+            }
         }
     }, [config?.userToken]);
     const onThemeChange = (newTheme) => {
         if (isEnabled) {
-            setTheme(newTheme);
+            themeRef.current = newTheme;
+            setResolvedTheme(resolveTheme(newTheme));
             updateTheme({ ...config, theme: newTheme });
         }
     };
     if (!isEnabled)
         return children;
-    return config.handleTheme ? (React.createElement(C3ProfileContext.Provider, { value: { isEnabled, theme, onThemeChange } },
+    return config.handleTheme ? (React.createElement(C3ProfileContext.Provider, { value: {
+            isEnabled,
+            theme: themeRef.current,
+            resolvedTheme,
+            onThemeChange,
+        } },
         React.createElement(CarbonThemeProvider, null, children))) : (children);
 };
 export const useC3Profile = () => useContext(C3ProfileContext);

package/lib/esm/components/c3-user-configuration/c3-profile-provider/carbon-theme-provider.d.ts

@@ -1,3 +1,13 @@
 import { FC, PropsWithChildren } from "react";
+import { Theme } from "./c3-profile-provider";
 export type CarbonTheme = "white" | "g10" | "g90" | "g100";
+declare const THEMES: {
+    readonly light: "g10";
+    readonly dark: "g100";
+};
+export type ResolvedTheme = keyof typeof THEMES;
+export declare const getSystemTheme: () => ResolvedTheme;
+export declare const resolveTheme: (theme: Theme) => ResolvedTheme;
+export declare const setCarbonThemeAttribute: (theme: CarbonTheme) => void;
 export declare const CarbonThemeProvider: FC<PropsWithChildren>;
+export {};

package/lib/esm/components/c3-user-configuration/c3-profile-provider/carbon-theme-provider.js

@@ -1,43 +1,23 @@
-import React, { useEffect, useRef, useState, } from "react";
+import React, { useEffect, useState } from "react";
 import { useC3Profile } from "./c3-profile-provider";
 import { GlobalTheme } from "@carbon/react";
 const THEMES = {
     light: "g10",
     dark: "g100",
 };
-const getCarbonTheme = (theme) => {
-    if (theme === "light" ||
-        (theme === "system" &&
-            window.matchMedia("(prefers-color-scheme: light)").matches)) {
-        return THEMES.light;
-    }
-    return THEMES.dark;
-};
+export const getSystemTheme = () => window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+export const resolveTheme = (theme) => theme === "system" ? getSystemTheme() : theme;
+const getCarbonTheme = (theme) => THEMES[resolveTheme(theme)];
+export const setCarbonThemeAttribute = (theme) => document.documentElement.setAttribute("data-carbon-theme", theme);
 export const CarbonThemeProvider = ({ children }) => {
-    const { theme } = useC3Profile();
-    const themeRef = useRef();
-    const [carbonTheme, setCarbonTheme] = useState(getCarbonTheme(theme));
+    const { resolvedTheme } = useC3Profile();
+    const [carbonTheme, setCarbonTheme] = useState(getCarbonTheme(resolvedTheme));
     const updateCarbonTheme = (newTheme) => {
         setCarbonTheme(newTheme);
-        document.documentElement.setAttribute("data-carbon-theme", newTheme);
+        setCarbonThemeAttribute(newTheme);
     };
     useEffect(() => {
-        const updateSystemTheme = ({ matches }) => {
-            if (themeRef.current === "system")
-                updateCarbonTheme(matches ? THEMES.dark : THEMES.light);
-        };
-        window
-            .matchMedia("(prefers-color-scheme: dark)")
-            .addEventListener("change", updateSystemTheme);
-        return () => {
-            window
-                .matchMedia("(prefers-color-scheme: dark)")
-                .removeEventListener("change", updateSystemTheme);
-        };
-    }, []);
-    useEffect(() => {
-        themeRef.current = theme;
-        updateCarbonTheme(getCarbonTheme(theme));
-    }, [theme]);
+        updateCarbonTheme(getCarbonTheme(resolvedTheme));
+    }, [resolvedTheme]);
     return React.createElement(GlobalTheme, { theme: carbonTheme }, children);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@camunda/camunda-composite-components",
-	"version": "0.2.0",
+	"version": "0.2.1-rc.0",
 	"scripts": {
 		"clean": "rimraf lib/",
 		"build": "yarn clean && tsc",
@@ -55,7 +55,7 @@
 		"@typescript-eslint/eslint-plugin": "5.62.0",
 		"@typescript-eslint/parser": "5.62.0",
 		"axe-playwright": "1.2.3",
-		"babel-loader": "8.3.0",
+		"babel-loader": "9.1.3",
 		"copyfiles": "2.4.1",
 		"css-loader": "6.8.1",
 		"eslint": "8.47.0",