@camunda/camunda-composite-components 0.1.1 → 0.1.2

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

@@ -1,30 +1,24 @@
-/// <reference types="react" />
-import {
-	C3NavigationAppProps,
-	C3NavigationElementProps,
-	C3NavigationNavBarProps,
-	C3NavigationProps,
-} from "./c3-navigation.types"
-export declare function createAppProps(): C3NavigationAppProps
+import { C3NavigationAppProps, C3NavigationElementProps, C3NavigationNavBarProps, C3NavigationProps } from "./c3-navigation.types";
+export declare function createAppProps(): C3NavigationAppProps;
 export declare function createAppBarProps(options?: {
-	isOpen?: boolean
-	elements?: Array<C3NavigationElementProps>
-}): C3NavigationProps["appBar"]
+    isOpen?: boolean;
+    elements?: Array<C3NavigationElementProps>;
+}): C3NavigationProps["appBar"];
 export declare function createNavBarBarProps(options?: {
-	elements?: C3NavigationNavBarProps["elements"]
-}): C3NavigationNavBarProps
+    elements?: C3NavigationNavBarProps["elements"];
+}): C3NavigationNavBarProps;
 export declare function createInfoSideBarProps(options: {
-	isOpen: boolean
-	preceedingDividerOn2ndElement?: boolean
-}): C3NavigationProps["infoSideBar"]
+    isOpen: boolean;
+    preceedingDividerOn2ndElement?: boolean;
+}): C3NavigationProps["infoSideBar"];
 export declare function createOrgSideBarProps(options: {
-	isOpen: boolean
-	orgCount: number
-}): C3NavigationProps["orgSideBar"]
+    isOpen: boolean;
+    orgCount: number;
+}): C3NavigationProps["orgSideBar"];
 export declare function createUserSideBarProps(options: {
-	isOpen: boolean
-	customSection?: JSX.Element
-}): C3NavigationProps["userSideBar"]
+    isOpen: boolean;
+    customSection?: JSX.Element;
+}): C3NavigationProps["userSideBar"];
 export declare function createNotificationSideBarProps(options: {
-	isOpen: boolean
-}): C3NavigationProps["notificationSideBar"]
+    isOpen: boolean;
+}): C3NavigationProps["notificationSideBar"];

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

@@ -1,214 +1,211 @@
-import React from "react"
-import { Link } from "@carbon/react"
-import { ArrowRight, TrashCan, Add } from "@carbon/react/icons"
+import React from "react";
+import { Link } from "@carbon/react";
+import { ArrowRight, TrashCan, Add } from "@carbon/react/icons";
 export function createAppProps() {
-	return {
-		name: "Console",
-		ariaLabel: "Camunda Console",
-		routeProps: {
-			href: "https://www.camunda.com",
-		},
-	}
+    return {
+        name: "Console",
+        ariaLabel: "Camunda Console",
+        routeProps: {
+            href: "https://www.camunda.com",
+        },
+    };
 }
 export function createAppBarProps(options = {}) {
-	return {
-		isOpen: Boolean(options?.isOpen),
-		elements: options?.elements ?? [
-			{
-				key: "console",
-				label: "Console",
-				active: true,
-			},
-			{
-				key: "modeler",
-				label: "Modeler",
-				active: false,
-				routeProps: { onClick: () => console.log("Redirecting to Modeler...") },
-			},
-			{
-				key: "operate",
-				label: "Operate",
-				active: false,
-				target: "_blank",
-				href: "https://camunda.com/",
-			},
-			{
-				key: "tasklist",
-				label: "Task List",
-				active: false,
-				subElements: [
-					{
-						key: "cluster-a",
-						label: "Cluster A",
-						href: "https://camunda.com/",
-						target: "_blank",
-					},
-					{
-						key: "cluster-b",
-						label: "Cluster B",
-						onClick: () => console.log("Redirecting to Tasklist..."),
-					},
-					{
-						key: "cluster-c",
-						label: "Cluster C",
-						routeProps: {
-							onClick: () => console.log("Redirecting to Tasklist..."),
-						},
-					},
-				],
-			},
-		],
-	}
+    return {
+        isOpen: Boolean(options?.isOpen),
+        elements: options?.elements ?? [
+            {
+                key: "console",
+                label: "Console",
+                active: true,
+            },
+            {
+                key: "modeler",
+                label: "Modeler",
+                active: false,
+                routeProps: { onClick: () => console.log("Redirecting to Modeler...") },
+            },
+            {
+                key: "operate",
+                label: "Operate",
+                active: false,
+                target: "_blank",
+                href: "https://camunda.com/",
+            },
+            {
+                key: "tasklist",
+                label: "Task List",
+                active: false,
+                subElements: [
+                    {
+                        key: "cluster-a",
+                        label: "Cluster A",
+                        href: "https://camunda.com/",
+                        target: "_blank",
+                    },
+                    {
+                        key: "cluster-b",
+                        label: "Cluster B",
+                        onClick: () => console.log("Redirecting to Tasklist..."),
+                    },
+                    {
+                        key: "cluster-c",
+                        label: "Cluster C",
+                        routeProps: {
+                            onClick: () => console.log("Redirecting to Tasklist..."),
+                        },
+                    },
+                ],
+            },
+        ],
+    };
 }
 export function createNavBarBarProps(options = {}) {
-	return {
-		elements: options?.elements ?? [
-			{
-				key: "dashboard",
-				label: "Dashboard",
-				isCurrentPage: true,
-				routeProps: {},
-			},
-			{
-				key: "clusters",
-				label: "Clusters",
-				isCurrentPage: false,
-				routeProps: {
-					onClick: () => console.log("Redirecting to clusters..."),
-				},
-			},
-		],
-		orgName: "Camunda",
-		tags: [
-			{
-				key: "stage",
-				label: "Production",
-				color: "red",
-			},
-			{
-				key: "githash",
-				label: "abcdefg",
-				color: "teal",
-			},
-			{
-				key: "fooTooltip",
-				label: "I am a tooltip pill",
-				color: "cool-gray",
-				tooltip: {
-					content: React.createElement(
-						"p",
-						null,
-						"tooltip popover with a",
-						" ",
-						React.createElement(Link, { href: "http://camunda.com/" }, "link"),
-					),
-					buttonLabel: "open the tooltip",
-				},
-			},
-		],
-	}
+    return {
+        elements: options?.elements ?? [
+            {
+                key: "dashboard",
+                label: "Dashboard",
+                isCurrentPage: true,
+                routeProps: {},
+            },
+            {
+                key: "clusters",
+                label: "Clusters",
+                isCurrentPage: false,
+                routeProps: {
+                    onClick: () => console.log("Redirecting to clusters..."),
+                },
+            },
+        ],
+        orgName: "Camunda",
+        tags: [
+            {
+                key: "stage",
+                label: "Production",
+                color: "red",
+            },
+            {
+                key: "githash",
+                label: "abcdefg",
+                color: "teal",
+            },
+            {
+                key: "fooTooltip",
+                label: "I am a tooltip pill",
+                color: "cool-gray",
+                tooltip: {
+                    content: (React.createElement("p", null,
+                        "tooltip popover with a",
+                        " ",
+                        React.createElement(Link, { href: "http://camunda.com/" }, "link"))),
+                    buttonLabel: "open the tooltip",
+                },
+            },
+        ],
+    };
 }
 export function createInfoSideBarProps(options) {
-	return {
-		isOpen: options.isOpen,
-		onOpen: () => console.log("Opened info sidebar"),
-		elements: [
-			{
-				key: "info1",
-				label: "Info 1",
-			},
-			{
-				key: "info2",
-				label: "Info 2",
-				preceedingDivider: options.preceedingDividerOn2ndElement,
-			},
-		],
-	}
+    return {
+        isOpen: options.isOpen,
+        onOpen: () => console.log("Opened info sidebar"),
+        elements: [
+            {
+                key: "info1",
+                label: "Info 1",
+            },
+            {
+                key: "info2",
+                label: "Info 2",
+                preceedingDivider: options.preceedingDividerOn2ndElement,
+            },
+        ],
+    };
 }
 export function createOrgSideBarProps(options) {
-	const elements = []
-	for (let i = 0; i < options.orgCount; i++) {
-		elements.push({
-			key: `org-${i}`,
-			label: `Organization ${i}`,
-		})
-	}
-	return {
-		isOpen: options.isOpen,
-		customElements: {
-			activeOrganization: {
-				activeLabel: "Active Organization",
-				otherLabel: "Other Organization",
-				orgName: "Camunda",
-				action: {
-					label: "Manage",
-					onClick: () => console.log("Manage organization"),
-				},
-			},
-		},
-		elements,
-		bottomElements: [
-			{
-				key: "createTrial",
-				label: "Create new Trial Org",
-				renderIcon: Add,
-				onClick: () => {
-					console.log("clicked")
-				},
-			},
-		],
-	}
+    const elements = [];
+    for (let i = 0; i < options.orgCount; i++) {
+        elements.push({
+            key: `org-${i}`,
+            label: `Organization ${i}`,
+        });
+    }
+    return {
+        isOpen: options.isOpen,
+        customElements: {
+            activeOrganization: {
+                activeLabel: "Active Organization",
+                otherLabel: "Other Organization",
+                orgName: "Camunda",
+                action: {
+                    label: "Manage",
+                    onClick: () => console.log("Manage organization"),
+                },
+            },
+        },
+        elements,
+        bottomElements: [
+            {
+                key: "createTrial",
+                label: "Create new Trial Org",
+                renderIcon: Add,
+                onClick: () => {
+                    console.log("clicked");
+                },
+            },
+        ],
+    };
 }
 export function createUserSideBarProps(options) {
-	return {
-		isOpen: options.isOpen,
-		version: "8.3.0-alpha4",
-		customElements: {
-			customSection: options.customSection,
-			profile: {
-				label: "Profile",
-				user: {
-					email: "teamcloud@camunda.com",
-					name: "Team Cloud",
-				},
-			},
-			themeSelector: {
-				currentTheme: "dark",
-				onChange: () => console.log("Selected dark theme"),
-			},
-			stageToggle: {
-				prodFeaturesEnabled: true,
-				toggle: () => console.log("Toggle stage"),
-			},
-		},
-		elements: [
-			{
-				key: "cookie",
-				label: "Cookie Preferences",
-			},
-			{
-				key: "terms",
-				label: "Terms of use",
-			},
-			{
-				key: "logout",
-				label: "Log out",
-				kind: "ghost",
-				renderIcon: ArrowRight,
-			},
-		],
-		bottomElements: [
-			{
-				key: "delete",
-				label: "Delete account",
-				kind: "danger--ghost",
-				renderIcon: TrashCan,
-			},
-		],
-	}
+    return {
+        isOpen: options.isOpen,
+        version: "8.3.0-alpha4",
+        customElements: {
+            customSection: options.customSection,
+            profile: {
+                label: "Profile",
+                user: {
+                    email: "teamcloud@camunda.com",
+                    name: "Team Cloud",
+                },
+            },
+            themeSelector: {
+                currentTheme: "dark",
+                onChange: () => console.log("Selected dark theme"),
+            },
+            stageToggle: {
+                prodFeaturesEnabled: true,
+                toggle: () => console.log("Toggle stage"),
+            },
+        },
+        elements: [
+            {
+                key: "cookie",
+                label: "Cookie Preferences",
+            },
+            {
+                key: "terms",
+                label: "Terms of use",
+            },
+            {
+                key: "logout",
+                label: "Log out",
+                kind: "ghost",
+                renderIcon: ArrowRight,
+            },
+        ],
+        bottomElements: [
+            {
+                key: "delete",
+                label: "Delete account",
+                kind: "danger--ghost",
+                renderIcon: TrashCan,
+            },
+        ],
+    };
 }
 export function createNotificationSideBarProps(options) {
-	return {
-		isOpen: options.isOpen,
-	}
+    return {
+        isOpen: options.isOpen,
+    };
 }

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

@@ -1,9 +1,9 @@
-import { FC } from "react"
-import { C3Navigation } from "./c3-navigation"
-import { ComponentStory } from "@storybook/react"
-export declare const DefaultTemplate: ComponentStory<typeof C3Navigation>
+import { FC } from "react";
+import { C3Navigation } from "./c3-navigation";
+import { ComponentStory } from "@storybook/react";
+export declare const DefaultTemplate: ComponentStory<typeof C3Navigation>;
 export declare const SuperUserToggle: FC<{
-	isActive?: boolean
-	onChange?: (newValue: boolean) => void
-}>
-export declare const NavbarWithCustomSection: FC
+    isActive?: boolean;
+    onChange?: (newValue: boolean) => void;
+}>;
+export declare const NavbarWithCustomSection: FC;

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

@@ -1,68 +1,35 @@
-import React, { useState } from "react"
-import { C3Navigation } from "./c3-navigation"
-import {
-	createAppBarProps,
-	createAppProps,
-	createNavBarBarProps,
-	createUserSideBarProps,
-} from "./story-helpers"
-import { SwitcherDivider, Toggle } from "@carbon/react"
-export const DefaultTemplate = (args) =>
-	React.createElement(
-		React.Fragment,
-		null,
-		React.createElement(C3Navigation, { ...args }),
-		React.createElement("div", { id: "main-content" }),
-	)
+import React, { useState } from "react";
+import { C3Navigation } from "./c3-navigation";
+import { createAppBarProps, createAppProps, createNavBarBarProps, createUserSideBarProps, } from "./story-helpers";
+import { SwitcherDivider, Toggle } from "@carbon/react";
+export const DefaultTemplate = (args) => (React.createElement(React.Fragment, null,
+    React.createElement(C3Navigation, { ...args }),
+    React.createElement("div", { id: "main-content" })));
 export const SuperUserToggle = ({ isActive, onChange }) => {
-	return React.createElement(
-		React.Fragment,
-		null,
-		React.createElement(SwitcherDivider, null),
-		React.createElement(
-			"div",
-			{ style: { padding: ".5rem 1rem" } },
-			React.createElement(Toggle, {
-				size: "sm",
-				id: "toggle-super-admin-mode",
-				defaultToggled: isActive,
-				onToggle: (superAdminModeActive) => onChange?.(superAdminModeActive),
-				labelText: "Enter super-admin mode",
-				"aria-label": "Enter super-admin mode",
-			}),
-		),
-	)
-}
+    return (React.createElement(React.Fragment, null,
+        React.createElement(SwitcherDivider, null),
+        React.createElement("div", { style: { padding: ".5rem 1rem" } },
+            React.createElement(Toggle, { size: "sm", id: "toggle-super-admin-mode", defaultToggled: isActive, onToggle: (superAdminModeActive) => onChange?.(superAdminModeActive), labelText: "Enter super-admin mode", "aria-label": "Enter super-admin mode" }))));
+};
 export const NavbarWithCustomSection = () => {
-	const [isSuperAdminModeActive, setIsSuperAdminModeActive] = useState(true)
-	return React.createElement(
-		React.Fragment,
-		null,
-		React.createElement(C3Navigation, {
-			app: createAppProps(),
-			appBar: createAppBarProps(),
-			navbar: {
-				...createNavBarBarProps(),
-				tags: isSuperAdminModeActive
-					? [
-							{
-								key: "superUserMode",
-								label: "Super-user mode",
-								color: "high-contrast",
-							},
-					  ]
-					: undefined,
-			},
-			userSideBar: {
-				...createUserSideBarProps({ isOpen: false }),
-				customElements: {
-					customSection: React.createElement(SuperUserToggle, {
-						isActive: isSuperAdminModeActive,
-						onChange: setIsSuperAdminModeActive,
-					}),
-				},
-			},
-		}),
-		React.createElement("div", { id: "main-content" }),
-	)
-}
+    const [isSuperAdminModeActive, setIsSuperAdminModeActive] = useState(true);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(C3Navigation, { app: createAppProps(), appBar: createAppBarProps(), navbar: {
+                ...createNavBarBarProps(),
+                tags: isSuperAdminModeActive
+                    ? [
+                        {
+                            key: "superUserMode",
+                            label: "Super-user mode",
+                            color: "high-contrast",
+                        },
+                    ]
+                    : undefined,
+            }, userSideBar: {
+                ...createUserSideBarProps({ isOpen: false }),
+                customElements: {
+                    customSection: (React.createElement(SuperUserToggle, { isActive: isSuperAdminModeActive, onChange: setIsSuperAdminModeActive })),
+                },
+            } }),
+        React.createElement("div", { id: "main-content" })));
+};

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

@@ -1,23 +1,19 @@
-import React, { FC, ReactNode } from "react"
-import { Endpoints, Stage } from "../../api/endpoints.const"
+import React, { FC, ReactNode } from "react";
+import { Endpoints, Stage } from "../../api/endpoints.const";
 declare type C3UserConfigurationBase = {
-	activeOrganizationId: string
-	userToken: string
-	getNewUserToken: () => Promise<string>
-}
+    activeOrganizationId: string;
+    userToken: string;
+    getNewUserToken: () => Promise<string>;
+};
 declare type C3UserConfigurationWithEndpoints = C3UserConfigurationBase & {
-	endpoints: Endpoints
-}
+    endpoints: Endpoints;
+};
 declare type C3UserConfigurationWithStage = C3UserConfigurationBase & {
-	stage: Stage
-}
-export declare type C3UserConfiguration =
-	| C3UserConfigurationWithEndpoints
-	| C3UserConfigurationWithStage
-export declare const C3UserConfigurationContext: React.Context<C3UserConfiguration | null>
-declare const C3UserConfigurationProvider: FC<
-	C3UserConfiguration & {
-		children?: ReactNode
-	}
->
-export default C3UserConfigurationProvider
+    stage: Stage;
+};
+export declare type C3UserConfiguration = C3UserConfigurationWithEndpoints | C3UserConfigurationWithStage;
+export declare const C3UserConfigurationContext: React.Context<C3UserConfiguration | null>;
+declare const C3UserConfigurationProvider: FC<C3UserConfiguration & {
+    children?: ReactNode;
+}>;
+export default C3UserConfigurationProvider;

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

@@ -1,9 +1,4 @@
-import React from "react"
-export const C3UserConfigurationContext = React.createContext(null)
-const C3UserConfigurationProvider = ({ children, ...config }) =>
-	React.createElement(
-		C3UserConfigurationContext.Provider,
-		{ value: config },
-		children,
-	)
-export default C3UserConfigurationProvider
+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/components/test-utils.d.ts

@@ -0,0 +1,3 @@
+import * as Playwright from "@playwright/test";
+/** Load Storybook story for Playwright testing */
+export declare function getStory(page: Playwright.Page, storyID: string): Promise<void>;