@camunda/camunda-composite-components 0.1.4 → 0.1.5-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" | "accounts";
     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, ACCOUNTS, } 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 "accounts":
+                if (payload.endpoints?.accounts) {
+                    base = payload.endpoints.accounts;
+                }
+                else if (payload.stage) {
+                    base = getEndpoint(payload.stage, ACCOUNTS);
+                }
         }
     }
     const url = base ? `${base}/${payload.url}` : payload.url;
@@ -62,7 +69,7 @@ export async function request(payload) {
     const responseType = payload.responseType ?? type;
     switch (responseType) {
         case "json":
-            return response.json();
+            return response.text().then((text) => (text ? JSON.parse(text) : {}));
         case "text":
             return response.text();
         default:

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

@@ -6,8 +6,10 @@ export interface Endpoint {
 }
 export interface Endpoints {
     notifications?: string;
+    accounts?: string;
 }
 export declare const NOTIFICATIONS: Endpoint;
+export declare const ACCOUNTS: 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 ACCOUNTS = {
+    id: "accounts",
+    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 "accounts":
+            if (options.endpoints?.accounts) {
+                return options.endpoints.accounts;
+            }
+            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-user-configuration/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: "accounts",
+            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-user-sidebar.js

@@ -4,6 +4,8 @@ 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-user-configuration/c3-profile-provider/c3-profile-provider";
+import { useC3UserConfiguration } from "../../c3-user-configuration/c3-user-configuration-provider";
 const VersionWrapper = styled.div `
 	align-self: end;
 	padding: 0.5rem 1rem;
@@ -28,6 +30,8 @@ const C3UserSidebar = ({ sideBar }) => {
     const themeSelector = customElements?.themeSelector;
     const stageToggle = customElements?.stageToggle;
     const customSection = customElements?.customSection;
+    const { handleTheme } = useC3UserConfiguration();
+    const { theme, onThemeChange } = useC3Profile();
     const { isOpen } = useUserSidebarState();
     const itemTabIndex = isOpen ? undefined : -1;
     return (React.createElement(C3NavigationSideBar, { sideBar: {
@@ -51,14 +55,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 || handleTheme) && (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) => {
+                        handleTheme
+                            ? onThemeChange(newValue)
+                            : themeSelector?.onChange(newValue);
+                    }, valueSelected: handleTheme ? 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/story-helpers.d.ts

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

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

@@ -169,10 +169,12 @@ export function createUserSideBarProps(options) {
                     name: "Team Cloud",
                 },
             },
-            themeSelector: {
-                currentTheme: "dark",
-                onChange: () => console.log("Selected dark theme"),
-            },
+            themeSelector: options.hideThemeSelector
+                ? undefined
+                : {
+                    currentTheme: "dark",
+                    onChange: (newTheme) => console.log(`Selected ${newTheme} theme`),
+                },
             stageToggle: {
                 prodFeaturesEnabled: true,
                 toggle: () => console.log("Toggle stage"),

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

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

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

@@ -0,0 +1,33 @@
+import React, { createContext, useContext, useEffect, 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";
+export const C3ProfileContext = createContext({
+    isEnabled: false,
+    theme: defaultTheme,
+    onThemeChange: () => undefined,
+});
+export const C3ProfileProvider = ({ children }) => {
+    const config = useContext(C3UserConfigurationContext);
+    const isEnabled = !!config;
+    const [theme, setTheme] = useState(getUserTheme(config.userToken) || defaultTheme);
+    useEffect(() => {
+        if (isEnabled && config.userToken && config.handleTheme) {
+            const currentTheme = getUserTheme(config.userToken);
+            if (currentTheme)
+                setTheme(currentTheme);
+        }
+    }, [config?.userToken]);
+    const onThemeChange = (newTheme) => {
+        if (isEnabled) {
+            setTheme(newTheme);
+            updateTheme({ ...config, theme: newTheme });
+        }
+    };
+    if (!isEnabled)
+        return children;
+    return config.handleTheme ? (React.createElement(C3ProfileContext.Provider, { value: { isEnabled, theme, 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

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

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

@@ -0,0 +1,23 @@
+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) => theme === "light" ||
+    window.matchMedia("(prefers-color-scheme: light)").matches
+    ? THEMES.light
+    : THEMES.dark;
+const setThemeClass = (newTheme, currentTheme) => {
+    if (currentTheme) {
+        document.documentElement.classList.remove(`cds--${getCarbonTheme(currentTheme)}`);
+    }
+    document.documentElement.classList.add(`cds--${getCarbonTheme(newTheme)}`);
+};
+export const CarbonThemeProvider = ({ children }) => {
+    const { theme } = useC3Profile();
+    const [previousTheme, setPreviousTheme] = useState(theme);
+    useEffect(() => {
+        setThemeClass(theme, previousTheme);
+        setPreviousTheme(theme);
+    }, [theme]);
+    return React.createElement(GlobalTheme, { theme: getCarbonTheme(theme) }, children);
+};

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

@@ -7,13 +7,16 @@ type C3UserConfigurationBase = {
 };
 type C3UserConfigurationWithEndpoints = C3UserConfigurationBase & {
     endpoints: Endpoints;
+    handleTheme?: never;
 };
 type C3UserConfigurationWithStage = C3UserConfigurationBase & {
     stage: Stage;
+    handleTheme?: boolean;
 };
 export type C3UserConfiguration = C3UserConfigurationWithEndpoints | C3UserConfigurationWithStage;
-export declare const C3UserConfigurationContext: React.Context<C3UserConfiguration | null>;
+export declare const C3UserConfigurationContext: React.Context<C3UserConfiguration>;
 declare const C3UserConfigurationProvider: FC<C3UserConfiguration & {
     children?: ReactNode;
 }>;
+export declare const useC3UserConfiguration: () => C3UserConfiguration;
 export default C3UserConfigurationProvider;

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

@@ -1,4 +1,12 @@
-import React from "react";
-export const C3UserConfigurationContext = React.createContext(null);
-const C3UserConfigurationProvider = ({ children, ...config }) => (React.createElement(C3UserConfigurationContext.Provider, { value: config }, children));
+import React, { useContext } from "react";
+import { C3ProfileProvider } from "./c3-profile-provider/c3-profile-provider";
+export const C3UserConfigurationContext = React.createContext({
+    stage: "dev",
+    activeOrganizationId: "",
+    userToken: "",
+    getNewUserToken: () => Promise.resolve(""),
+});
+const C3UserConfigurationProvider = ({ children, ...config }) => (React.createElement(C3UserConfigurationContext.Provider, { value: config },
+    React.createElement(C3ProfileProvider, null, children)));
+export const useC3UserConfiguration = () => useContext(C3UserConfigurationContext);
 export default C3UserConfigurationProvider;

package/lib/esm/index.d.ts

@@ -7,3 +7,4 @@ export { C3AppMenuIcon } from "./icons/c3-icons";
 export { C3IconProps } from "./icons/c3-icons.types";
 export { default as C3UserConfigurationProvider } from "./components/c3-user-configuration/c3-user-configuration-provider";
 export { C3UserConfiguration } from "./components/c3-user-configuration/c3-user-configuration-provider";
+export { useC3Profile } from "./components/c3-user-configuration/c3-profile-provider/c3-profile-provider";

package/lib/esm/index.js

@@ -2,3 +2,4 @@ export { C3EmptyState } from "./components/c3-empty-state/c3-empty-state";
 export { default as C3Navigation } from "./components/c3-navigation";
 export { C3AppMenuIcon } from "./icons/c3-icons";
 export { default as C3UserConfigurationProvider } from "./components/c3-user-configuration/c3-user-configuration-provider";
+export { useC3Profile } from "./components/c3-user-configuration/c3-profile-provider/c3-profile-provider";

package/package.json

@@ -1,12 +1,13 @@
 {
 	"name": "@camunda/camunda-composite-components",
-	"version": "0.1.4",
+	"version": "0.1.5-rc.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 8081 -n -L",
 		"prepare": "husky install",
 		"format": "prettier --write .",
@@ -80,6 +81,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",