@camunda/camunda-composite-components 0.1.4-rc.1 → 0.1.4

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" | "theme";
+    base?: "notifications";
     stage?: Stage;
     endpoints?: Endpoints;
     url: string;
@@ -18,8 +18,6 @@ export interface RequestPayload {
         token: string;
         refreshTokenMethod: () => Promise<string>;
     };
-    body?: {
-        [key: string]: unknown;
-    };
+    body?: any;
 }
 export declare function request(payload: RequestPayload): Promise<any>;

package/lib/esm/api/api.js

@@ -1,4 +1,4 @@
-import { getEndpoint, NOTIFICATIONS, THEME, } from "./endpoints.const";
+import { getEndpoint, NOTIFICATIONS } from "./endpoints.const";
 import { JWTUtils } from "./jwt.utils";
 export class HttpError extends Error {
     status;
@@ -41,13 +41,6 @@ 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;
@@ -69,7 +62,7 @@ export async function request(payload) {
     const responseType = payload.responseType ?? type;
     switch (responseType) {
         case "json":
-            return response.text().then((text) => (text ? JSON.parse(text) : {}));
+            return response.json();
         case "text":
             return response.text();
         default:

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

@@ -6,10 +6,8 @@ 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,12 +4,6 @@ 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":
@@ -31,14 +25,6 @@ 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/components/c3-navigation/c3-navigation-appbar.js

@@ -30,7 +30,7 @@ export const C3NavigationAppBar = ({ appBar, forwardRef, navbar, }) => {
         React.createElement(NavWrapper, null,
             React.createElement(SideNav, { ref: panelRef, "aria-label": appBar.ariaLabel || "Side Navigation", expanded: appBarOpen, isPersistent: false },
                 React.createElement(SideNavItems, null,
-                    React.createElement("li", null, navbar.elements.length > 0 && (React.createElement(HeaderSideNavItems, { hasDivider: true }, navbar.elements.map((element) => (React.createElement(HeaderMenuItem, { key: element.key, element: element.routeProps && forwardRef, isActive: element.isCurrentPage, ...element.routeProps, onClick: () => {
+                    React.createElement("li", null, navbar.elements.length > 0 && (React.createElement(HeaderSideNavItems, { hasDivider: true }, navbar.elements.map((element) => (React.createElement(HeaderMenuItem, { key: element.key, as: element.routeProps && forwardRef, isActive: element.isCurrentPage, ...element.routeProps, onClick: () => {
                             if (element.routeProps.onClick) {
                                 element.routeProps.onClick();
                             }
@@ -41,7 +41,7 @@ export const C3NavigationAppBar = ({ appBar, forwardRef, navbar, }) => {
                     appBar.elements &&
                         appBar.elements.map((element) => {
                             if (element.subElements && element.subElements.length > 0) {
-                                return (React.createElement(SideNavMenu, { large: true, title: element.label, key: element.key }, element.subElements.map((subElement) => (React.createElement(SideNavMenuItem, { element: subElement.routeProps && forwardRef, key: subElement.key, href: subElement.href, target: subElement.href ? subElement.target : undefined, ...subElement.routeProps, onClick: () => {
+                                return (React.createElement(SideNavMenu, { large: true, title: element.label, key: element.key }, element.subElements.map((subElement) => (React.createElement(SideNavMenuItem, { as: subElement.routeProps && forwardRef, key: subElement.key, href: subElement.href, target: subElement.href ? subElement.target : undefined, ...subElement.routeProps, onClick: () => {
                                         if (subElement.onClick) {
                                             subElement.onClick();
                                         }
@@ -57,7 +57,7 @@ export const C3NavigationAppBar = ({ appBar, forwardRef, navbar, }) => {
                                     } }, subElement.label)))));
                             }
                             else {
-                                return (React.createElement(SideNavLink, { element: element.routeProps && forwardRef, key: element.key, large: true, isActive: element.active, ...element.routeProps, onClick: () => {
+                                return (React.createElement(SideNavLink, { as: element.routeProps && forwardRef, key: element.key, large: true, isActive: element.active, ...element.routeProps, onClick: () => {
                                         if (element.onClick) {
                                             element.onClick();
                                         }

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

@@ -4,8 +4,6 @@ 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;
@@ -30,8 +28,6 @@ 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: {
@@ -55,16 +51,14 @@ 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 || handleTheme) && (React.createElement(React.Fragment, null,
+        themeSelector && (React.createElement(React.Fragment, null,
             React.createElement(SwitcherDivider, null),
             React.createElement("div", { style: {
                     padding: ".5rem 1rem",
                 } },
-                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(RadioButtonGroup, { name: "theme-radio-group", defaultSelected: themeSelector.currentTheme, legendText: "Theme", orientation: "vertical", onChange: (newValue) => {
+                        themeSelector.onChange(newValue);
+                    } },
                     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-navigation.js

@@ -1,4 +1,4 @@
-import { Header, HeaderContainer, HeaderGlobalBar, HeaderMenuItem, HeaderName as CarbonHeaderName, HeaderNavigation, SkipToContent, Tag, Toggletip, ToggletipButton, ToggletipContent, } from "@carbon/react";
+import { Header, HeaderContainer, HeaderGlobalBar, HeaderMenuItem, HeaderName, HeaderNavigation, SkipToContent, Tag, Toggletip, ToggletipButton, ToggletipContent, Stack as CarbonStack, } from "@carbon/react";
 import React from "react";
 import C3InfoSidebar from "./c3-navigation-sidebar/c3-info-sidebar";
 import { C3NotificationSidebar } from "./c3-navigation-sidebar/c3-notification-sidebar";
@@ -16,10 +16,8 @@ import { C3SidebarStateProvider } from "./c3-navigation-sidebar/c3-sidebar-state
  * Docs: https://react.carbondesignsystem.com/?path=/story/components-ui-shell--fixed-side-nav
  */
 const BREAKPOINT_LG_WIDTH = "66rem"; // This is Carbon's breakpoint (lg) width https://github.com/carbon-design-system/carbon/blob/main/packages/layout/src/index.js#L56
-const HeaderName = styled(CarbonHeaderName) `
-	display: grid;
-	grid-auto-flow: column;
-	gap: 0.5rem;
+const Stack = styled(CarbonStack) `
+	align-items: center;
 `;
 const StyledToggletipContent = styled(ToggletipContent) `
 	.cds--link:visited {
@@ -41,10 +39,11 @@ export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, info
                 return (React.createElement(Header, { "aria-label": app.ariaLabel },
                     React.createElement(SkipToContent, null),
                     displayAppBar && (React.createElement(C3NavigationAppBar, { app: app, appBar: appBar, forwardRef: forwardRef, navbar: navbar })),
-                    React.createElement(HeaderName, { element: forwardRef, prefix: "", ...app.routeProps },
-                        React.createElement(CamundaLogo, { "aria-label": "Camunda" }),
-                        React.createElement("span", null, app.name)),
-                    React.createElement(HeaderNavigation, { "aria-label": app.ariaLabel }, navbar.elements.map((element) => (React.createElement(HeaderMenuItem, { key: element.key, element: element.routeProps && forwardRef, isActive: element.isCurrentPage, ...element.routeProps },
+                    React.createElement(HeaderName, { as: forwardRef, prefix: "", ...app.routeProps },
+                        React.createElement(Stack, { gap: 3, orientation: "horizontal" },
+                            React.createElement(CamundaLogo, { "aria-label": "Camunda" }),
+                            React.createElement("span", null, app.name))),
+                    React.createElement(HeaderNavigation, { "aria-label": app.ariaLabel }, navbar.elements.map((element) => (React.createElement(HeaderMenuItem, { key: element.key, as: element.routeProps && forwardRef, isActive: element.isCurrentPage, ...element.routeProps },
                         React.createElement("span", null, element.label))))),
                     React.createElement(HeaderGlobalBar, null,
                         React.createElement("div", { style: {

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Tag } from "@carbon/react";
 import { Endpoints, Stage } from "../../api/endpoints.const";
 import { C3NavigationAppBarProps, C3NavigationInfoSideBarProps, C3NavigationNotificationsSideBarProps, C3NavigationOrgSideBarProps, C3NavigationUserSideBarProps } from "./c3-navigation-sidebar/c3-navigation-sidebar.types";

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 && !!config.activeOrganizationId && !!config.userToken;
+    const enabled = !!config;
     // 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,7 +19,6 @@ 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,12 +169,10 @@ export function createUserSideBarProps(options) {
                     name: "Team Cloud",
                 },
             },
-            themeSelector: options.hideThemeSelector
-                ? undefined
-                : {
-                    currentTheme: "dark",
-                    onChange: (newTheme) => console.log(`Selected ${newTheme} theme`),
-                },
+            themeSelector: {
+                currentTheme: "dark",
+                onChange: () => console.log("Selected dark theme"),
+            },
             stageToggle: {
                 prodFeaturesEnabled: true,
                 toggle: () => console.log("Toggle stage"),

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

@@ -7,16 +7,13 @@ 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>;
+export declare const C3UserConfigurationContext: React.Context<C3UserConfiguration | null>;
 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,12 +1,4 @@
-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);
+import React from "react";
+export const C3UserConfigurationContext = React.createContext(null);
+const C3UserConfigurationProvider = ({ children, ...config }) => (React.createElement(C3UserConfigurationContext.Provider, { value: config }, children));
 export default C3UserConfigurationProvider;

package/lib/esm/index.d.ts

@@ -7,4 +7,3 @@ 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,4 +2,3 @@ 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,13 +1,12 @@
 {
 	"name": "@camunda/camunda-composite-components",
-	"version": "0.1.4-rc.1",
+	"version": "0.1.4",
 	"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 .",
@@ -47,8 +46,8 @@
 		"@storybook/testing-library": "0.2.0",
 		"@types/carbon-components-react": "7.55.2",
 		"@types/event-source-polyfill": "1.0.1",
-		"@types/node": "18.17.6",
-		"@types/react": "18.2.20",
+		"@types/node": "18.17.12",
+		"@types/react": "18.2.21",
 		"@types/react-dom": "18.2.7",
 		"@types/styled-components": "5.1.26",
 		"@typescript-eslint/eslint-plugin": "5.62.0",
@@ -73,17 +72,14 @@
 		"rimraf": "3.0.2",
 		"sass": "1.66.1",
 		"sass-loader": "13.3.2",
-		"serve": "14.2.0",
+		"serve": "14.2.1",
 		"storybook": "7.3.2",
 		"style-loader": "3.3.3",
 		"styled-components": "6.0.7",
-		"typescript": "5.1.6",
+		"typescript": "5.2.2",
 		"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",

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

@@ -1,16 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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-user-configuration/c3-profile-provider/c3-profile-provider.d.ts

@@ -1,10 +0,0 @@
-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

@@ -1,34 +0,0 @@
-import React, { createContext, useContext, useEffect, useState, } from "react";
-import { C3UserConfigurationContext } from "../c3-user-configuration-provider";
-import { getUserTheme, updateTheme } from "../../../api/profile";
-import { ThemeProvider } from "./c3-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) {
-            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 ("stage" in config && config.handleTheme) ||
-        ("endpoints" in config && config.endpoints.theme) ? (React.createElement(C3ProfileContext.Provider, { value: { isEnabled, theme, onThemeChange } },
-        React.createElement(ThemeProvider, null, children))) : (children);
-};
-export const useC3Profile = () => useContext(C3ProfileContext);

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

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

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

@@ -1,23 +0,0 @@
-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 ThemeProvider = ({ children }) => {
-    const { theme } = useC3Profile();
-    const [previousTheme, setPreviousTheme] = useState(theme);
-    useEffect(() => {
-        setThemeClass(theme, previousTheme);
-        setPreviousTheme(theme);
-    }, [theme]);
-    return React.createElement(GlobalTheme, { theme: getCarbonTheme(theme) }, children);
-};