@camunda/camunda-composite-components 0.1.3 → 0.1.4-rc.0

package/lib/esm/api/api.d.ts

@@ -4,7 +4,7 @@ export declare class HttpError extends Error {
     constructor(message: string, status: number);
 }
 export interface RequestPayload {
-    base?: "notifications";
+    base?: "notifications" | "theme";
     stage?: Stage;
     endpoints?: Endpoints;
     url: string;
@@ -18,6 +18,8 @@ export interface RequestPayload {
         token: string;
         refreshTokenMethod: () => Promise<string>;
     };
-    body?: any;
+    body?: {
+        [key: string]: unknown;
+    };
 }
 export declare function request(payload: RequestPayload): Promise<any>;

package/lib/esm/api/api.js

@@ -1,4 +1,4 @@
-import { getEndpoint, NOTIFICATIONS } from "./endpoints.const";
+import { getEndpoint, NOTIFICATIONS, THEME, } from "./endpoints.const";
 import { JWTUtils } from "./jwt.utils";
 export class HttpError extends Error {
     status;
@@ -41,6 +41,13 @@ export async function request(payload) {
                     base = getEndpoint(payload.stage, NOTIFICATIONS);
                 }
                 break;
+            case "theme":
+                if (payload.endpoints?.theme) {
+                    base = payload.endpoints.theme;
+                }
+                else if (payload.stage) {
+                    base = getEndpoint(payload.stage, THEME);
+                }
         }
     }
     const url = base ? `${base}/${payload.url}` : payload.url;

package/lib/esm/api/endpoints.const.d.ts

@@ -6,8 +6,10 @@ export interface Endpoint {
 }
 export interface Endpoints {
     notifications?: string;
+    theme?: string;
 }
 export declare const NOTIFICATIONS: Endpoint;
+export declare const THEME: Endpoint;
 export type Stage = "dev" | "int" | "prod";
 export declare function getEndpoint(stage: Stage, endpoint: Endpoint): string;
 export declare function getEndpointByOptions(options: {

package/lib/esm/api/endpoints.const.js

@@ -4,6 +4,12 @@ export const NOTIFICATIONS = {
     int: "https://notifications.cloud.ultrawombat.com",
     prod: "https://notifications.cloud.camunda.io",
 };
+export const THEME = {
+    id: "theme",
+    dev: "https://accounts.cloud.dev.ultrawombat.com",
+    int: "https://accounts.cloud.ultrawombat.com",
+    prod: "https://accounts.cloud.camunda.io",
+};
 export function getEndpoint(stage, endpoint) {
     switch (stage) {
         case "dev":
@@ -25,6 +31,14 @@ export function getEndpointByOptions(options) {
             else if (options.stage) {
                 return getEndpoint(options.stage, options.endpoint);
             }
+            break;
+        case "theme":
+            if (options.endpoints?.theme) {
+                return options.endpoints.theme;
+            }
+            else if (options.stage) {
+                return getEndpoint(options.stage, options.endpoint);
+            }
     }
     throw new Error(`Missing stage or notifications endpoint`);
 }

package/lib/esm/api/profile.d.ts

@@ -0,0 +1,16 @@
+import { C3NotificationsProps } from "../components/c3-navigation/c3-navigation.types";
+import { Theme } from "../components/c3-navigation/c3-profile-provider/c3-profile-provider";
+export type Profile = {
+    theme: Theme;
+};
+export type Token = {
+    sub?: string;
+    "https://camunda.com/settings"?: {
+        theme?: Theme;
+    };
+};
+export declare const getUserTheme: (userToken: string) => Theme | null;
+export type UpdateThemeOptions = C3NotificationsProps & {
+    theme: Profile["theme"];
+};
+export declare const updateTheme: ({ endpoints, stage, userToken, getNewUserToken, theme, }: UpdateThemeOptions) => Promise<void>;

package/lib/esm/api/profile.js

@@ -0,0 +1,29 @@
+import jwt from "jwt-decode";
+import { request } from "./api";
+const decodeJWT = (userToken) => {
+    let decodedToken = {};
+    try {
+        decodedToken = jwt(userToken);
+    }
+    catch (error) {
+        console.error("User token invalid");
+    }
+    return decodedToken;
+};
+export const getUserTheme = (userToken) => decodeJWT(userToken)["https://camunda.com/settings"]?.theme || null;
+export const updateTheme = async ({ endpoints, stage, userToken, getNewUserToken, theme, }) => {
+    try {
+        await request({
+            method: "patch",
+            base: "theme",
+            stage,
+            endpoints,
+            camundaAuth: { token: userToken, refreshTokenMethod: getNewUserToken },
+            url: `external/user/theme`,
+            body: { theme },
+        });
+    }
+    catch (error) {
+        console.error(error);
+    }
+};

package/lib/esm/components/c3-navigation/c3-navigation-sidebar/c3-navigation-sidebar.types.d.ts

@@ -43,7 +43,7 @@ export type C3NavigationUserSideBarProps = C3NavigationSideBarBaseProps & {
         themeSelector?: {
             currentTheme: string;
             onChange: (newValue: string) => void;
-        };
+        } | true;
         stageToggle?: {
             prodFeaturesEnabled: boolean;
             toggle: () => void;

package/lib/esm/components/c3-navigation/c3-navigation-sidebar/c3-user-sidebar.js

@@ -4,6 +4,7 @@ import { FormLabel, RadioButton, RadioButtonGroup, Stack, SwitcherDivider, Toggl
 import { UserAvatar } from "@carbon/react/icons";
 import styled from "styled-components";
 import { useUserSidebarState } from "./c3-sidebar-state-provider";
+import { useC3Profile } from "../c3-profile-provider/c3-profile-provider";
 const VersionWrapper = styled.div `
 	align-self: end;
 	padding: 0.5rem 1rem;
@@ -28,6 +29,7 @@ const C3UserSidebar = ({ sideBar }) => {
     const themeSelector = customElements?.themeSelector;
     const stageToggle = customElements?.stageToggle;
     const customSection = customElements?.customSection;
+    const { theme, onThemeChange, enabled } = useC3Profile();
     const { isOpen } = useUserSidebarState();
     const itemTabIndex = isOpen ? undefined : -1;
     return (React.createElement(C3NavigationSideBar, { sideBar: {
@@ -51,14 +53,16 @@ const C3UserSidebar = ({ sideBar }) => {
                 React.createElement(Stack, null,
                     React.createElement("div", { className: "textPrimary", style: { fontSize: "14px" } }, profile.user.name),
                     React.createElement("div", { className: "textPrimary", style: { fontSize: "12px" } }, profile.user.email))))),
-        themeSelector && (React.createElement(React.Fragment, null,
+        themeSelector && (typeof themeSelector !== "boolean" || enabled) && (React.createElement(React.Fragment, null,
             React.createElement(SwitcherDivider, null),
             React.createElement("div", { style: {
                     padding: ".5rem 1rem",
                 } },
-                React.createElement(RadioButtonGroup, { name: "theme-radio-group", defaultSelected: themeSelector.currentTheme, legendText: "Theme", orientation: "vertical", onChange: (newValue) => {
-                        themeSelector.onChange(newValue);
-                    } },
+                React.createElement(RadioButtonGroup, { name: "theme-radio-group", legendText: "Theme", orientation: "vertical", onChange: (newValue) => {
+                        themeSelector === true
+                            ? onThemeChange(newValue)
+                            : themeSelector.onChange(newValue);
+                    }, valueSelected: themeSelector === true ? theme : themeSelector.currentTheme },
                     React.createElement(RadioButton, { id: "light", labelText: "Light", value: "light", tabIndex: itemTabIndex }),
                     React.createElement(RadioButton, { id: "system", labelText: "System", value: "system", tabIndex: itemTabIndex }),
                     React.createElement(RadioButton, { id: "dark", labelText: "Dark", value: "dark", tabIndex: itemTabIndex }))))),

package/lib/esm/components/c3-navigation/c3-notification-provider/c3-notification-provider.js

@@ -16,7 +16,7 @@ const C3NotificationProvider = ({ children, }) => {
     const [activeOrganizationId, setActiveOrganizationId] = useState("");
     const [isEventStreamAvailable, setEventStreamAvailable] = useState(false);
     const config = useContext(C3UserConfigurationContext);
-    const enabled = !!config;
+    const enabled = !!config && !!config.activeOrganizationId && !!config.userToken;
     // if the organization changes, we need to reset the state
     if (enabled && config.activeOrganizationId !== activeOrganizationId) {
         setActiveOrganizationId(config.activeOrganizationId);

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

@@ -0,0 +1,12 @@
+import React, { ComponentType, FC, PropsWithChildren } from "react";
+export type Theme = "light" | "dark" | "system";
+export type C3ProfileContextValue = {
+    enabled: boolean;
+    theme: Theme;
+    onThemeChange: (newTheme: Theme) => void;
+    isLoading: boolean;
+};
+export declare const C3ProfileContext: React.Context<C3ProfileContextValue>;
+export declare const C3ProfileProvider: FC<PropsWithChildren>;
+export declare function withProfile<P>(Component: ComponentType<P>): ComponentType<P>;
+export declare const useC3Profile: () => C3ProfileContextValue;

package/lib/esm/components/c3-navigation/c3-profile-provider/c3-profile-provider.js

@@ -0,0 +1,40 @@
+import React, { createContext, useContext, useEffect, useState, } from "react";
+import { C3UserConfigurationContext } from "../../c3-user-configuration/c3-user-configuration-provider";
+import { getUserTheme, updateTheme } from "../../../api/profile";
+import { ThemeProvider } from "./c3-theme-provider";
+const defaultTheme = "light";
+export const C3ProfileContext = createContext({
+    enabled: false,
+    theme: defaultTheme,
+    onThemeChange: () => undefined,
+    isLoading: false,
+});
+export const C3ProfileProvider = ({ children }) => {
+    const config = useContext(C3UserConfigurationContext);
+    const enabled = !!config;
+    const [theme, setTheme] = useState(defaultTheme);
+    const [isLoading, setIsLoading] = useState(true);
+    useEffect(() => {
+        if (enabled && config?.userToken) {
+            const currentTheme = getUserTheme(config.userToken);
+            if (currentTheme)
+                setTheme(currentTheme);
+            setIsLoading(false);
+        }
+    }, [config?.userToken]);
+    const onThemeChange = (newTheme) => {
+        if (enabled) {
+            setTheme(newTheme);
+            updateTheme({ ...config, theme: newTheme });
+        }
+    };
+    return (React.createElement(C3ProfileContext.Provider, { value: { enabled, theme, onThemeChange, isLoading } }, children));
+};
+export function withProfile(Component) {
+    return function WithNamespace(props) {
+        return (React.createElement(C3ProfileProvider, null,
+            React.createElement(ThemeProvider, null,
+                React.createElement(Component, { ...props }))));
+    };
+}
+export const useC3Profile = () => useContext(C3ProfileContext);

package/lib/esm/components/c3-navigation/c3-profile-provider/c3-theme-provider.d.ts

@@ -0,0 +1,3 @@
+import { FC, PropsWithChildren } from "react";
+export type CarbonTheme = "white" | "g10" | "g90" | "g100";
+export declare const ThemeProvider: FC<PropsWithChildren>;

package/lib/esm/components/c3-navigation/c3-profile-provider/c3-theme-provider.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { useC3Profile } from "./c3-profile-provider";
+import { Theme } from "@carbon/react";
+const THEMES = { light: "g10", dark: "g100" };
+export const ThemeProvider = ({ children }) => {
+    const { theme } = useC3Profile();
+    const carbonTheme = theme === "light" ||
+        window.matchMedia("(prefers-color-scheme: light)").matches
+        ? THEMES.light
+        : THEMES.dark;
+    return React.createElement(Theme, { theme: carbonTheme }, children);
+};

package/lib/esm/components/c3-navigation/index.js

@@ -1,3 +1,4 @@
 import { C3Navigation } from "./c3-navigation";
 import { withNotifications } from "./c3-notification-provider/c3-notification-provider";
-export default withNotifications(C3Navigation);
+import { withProfile } from "./c3-profile-provider/c3-profile-provider";
+export default withProfile(withNotifications(C3Navigation));

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

@@ -19,6 +19,7 @@ export declare function createOrgSideBarProps(options: {
 export declare function createUserSideBarProps(options: {
     isOpen: boolean;
     customSection?: React.JSX.Element;
+    themeSelector?: true;
 }): C3NavigationProps["userSideBar"];
 export declare function createNotificationSideBarProps(options: {
     isOpen: boolean;

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

@@ -169,7 +169,7 @@ export function createUserSideBarProps(options) {
                     name: "Team Cloud",
                 },
             },
-            themeSelector: {
+            themeSelector: options.themeSelector || {
                 currentTheme: "dark",
                 onChange: () => console.log("Selected dark theme"),
             },

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@camunda/camunda-composite-components",
-	"version": "0.1.3",
+	"version": "0.1.4-rc.0",
 	"scripts": {
 		"clean": "rimraf lib/",
 		"build": "yarn clean && tsc",
@@ -66,7 +66,6 @@
 		"eslint-plugin-storybook": "0.6.13",
 		"event-source-polyfill": "1.0.31",
 		"husky": "8.0.3",
-		"playwright": "1.37.1",
 		"prettier": "2.8.8",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
@@ -81,6 +80,9 @@
 		"wait-on": "7.0.1",
 		"webpack": "5.88.2"
 	},
+	"dependencies": {
+		"jwt-decode": "3.1.2"
+	},
 	"peerDependencies": {
 		"@carbon/react": "1.x",
 		"event-source-polyfill": "1.0.x",