@camunda/camunda-composite-components 0.0.17-alpha-1

package/README.md

@@ -0,0 +1,44 @@
+# Camunda Composite Components
+
+Storybook: [Link](https://shiny-sniffle-e6e1a28f.pages.github.io/)
+
+## Dev
+
+```bash
+# install
+# yarn
+
+# start storybook
+yarn storybook
+
+# build components
+yarn build
+```
+
+## Release
+
+Bump version in `package.json` and create a [new release](https://github.com/camunda-cloud/camunda-composite-components/releases/new). This will start a github action to publish the package to the github package repository.
+
+Pushing to `main` will update the storybook available under [github page](https://shiny-sniffle-e6e1a28f.pages.github.io/).
+
+## Usage
+
+Example for navbar:
+
+```tsx
+import { C3NavigationElementProps } from "@camunda-cloud/camunda-composite-components"
+
+// ...
+
+return (
+	<C3Navigation
+		app={{
+			ariaLabel: "Camunda Console",
+			name: "Console",
+			prefix: "Camunda",
+			routeProps: { route: routes.home, router: router },
+		}}
+		// ...
+	/>
+)
+```

package/lib/esm/components/c3-empty-state/c3-empty-state.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { C3EmptyStateProps } from "./c3-empty-state.types";
+export declare const C3EmptyState: ({ icon, heading, description, button, link, }: C3EmptyStateProps) => JSX.Element;

package/lib/esm/components/c3-empty-state/c3-empty-state.js

@@ -0,0 +1,16 @@
+import { Stack, Tile, Button, Link } from "@carbon/react";
+import React from "react";
+export const C3EmptyState = ({ icon, heading, description, button, link, }) => (React.createElement(Tile, { style: {
+        paddingLeft: "5rem",
+        paddingTop: "3rem",
+        paddingBottom: "3rem",
+    } },
+    React.createElement(Stack, { orientation: "horizontal", gap: 6 },
+        React.createElement("img", { src: icon.path, alt: icon.altText }),
+        React.createElement(Stack, { gap: 3 },
+            React.createElement("h2", null, heading),
+            React.createElement(Stack, { gap: 6 },
+                React.createElement("p", { style: { maxWidth: "400px" } }, description),
+                React.createElement(Stack, { gap: 5 },
+                    button && (React.createElement(Button, { size: "md", onClick: button.onClick, renderIcon: button.icon, disabled: button.disabled }, button.label)),
+                    link && (React.createElement(Link, { target: "_blank", href: link.href, onClick: link.onClick }, link.label))))))));

package/lib/esm/components/c3-empty-state/c3-empty-state.types.d.ts

@@ -0,0 +1,19 @@
+export interface C3EmptyStateProps {
+    icon: {
+        path: string;
+        altText: string;
+    };
+    heading: string;
+    description: any;
+    button?: {
+        onClick: () => void;
+        disabled?: boolean;
+        label: string;
+        icon?: any;
+    };
+    link?: {
+        href: string;
+        label: string;
+        onClick?: () => void;
+    };
+}

package/lib/esm/components/c3-empty-state/c3-empty-state.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { C3NavigationProps } from "./c3-navigation.types";
+export declare const C3Navigation: ({ app, appBar, forwardRef, navbar, orgSideBar, infoSideBar, userSideBar, }: C3NavigationProps) => JSX.Element;

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

@@ -0,0 +1,246 @@
+import { Button, FormLabel, Header, HeaderContainer, HeaderGlobalAction, HeaderGlobalBar, HeaderMenuItem, HeaderName, HeaderNavigation, HeaderPanel, HeaderSideNavItems, RadioButton, RadioButtonGroup, SideNav, SideNavItems, SideNavLink, SideNavMenu, SideNavMenuItem, SkipToContent, Stack, SwitcherDivider, Tag, Toggle, } from "@carbon/react";
+import { Close, Enterprise, Help, Launch, UserAvatar, } from "@carbon/react/icons";
+import React, { useEffect, useState } from "react";
+import { C3AppMenuIcon } from "../../icons/c3-icons";
+const C3NavigationExternalLink = ({ label }) => (React.createElement(React.Fragment, null,
+    label,
+    React.createElement(Launch, { style: {
+            transform: `translate(2px, 1px)`,
+            verticalAlign: "top",
+        } })));
+const C3NavigationAppBar = ({ appBar, forwardRef, navbar, }) => {
+    const [appBarOpen, setAppBarOpen] = useState(appBar.isOpen);
+    const refPanel = React.createRef();
+    const refIcon = React.createRef();
+    useOnClickOutside(refPanel, refIcon, () => setAppBarOpen(false));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(HeaderGlobalAction, { ref: refIcon, "aria-label": "App Switcher", isActive: appBarOpen, onClick: () => {
+                setAppBarOpen(!appBarOpen);
+            }, tooltipAlignment: "start" }, appBarOpen ? React.createElement(Close, { size: 20 }) : React.createElement(C3AppMenuIcon, { size: 20 })),
+        React.createElement(SideNav, { ref: refPanel, "aria-label": appBar.ariaLabel, expanded: appBarOpen, isPersistent: false, style: {
+                display: "grid",
+                gridAutoFlow: "row",
+                gridAutoRows: "max-content 1fr",
+                borderRight: appBarOpen
+                    ? "1px solid var(--cds-border-subtle)"
+                    : undefined,
+            } },
+            React.createElement(SideNavItems, null,
+                navbar.elements.length > 0 && (React.createElement(HeaderSideNavItems, { hasDivider: true }, navbar.elements.map((element) => (React.createElement(HeaderMenuItem, { key: element.key, element: forwardRef, isCurrentPage: element.isCurrentPage, ...element.routeProps, onClick: () => {
+                        if (appBar.closeOnClick !== false) {
+                            setAppBarOpen(false);
+                        }
+                    } }, element.label))))),
+                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, { key: subElement.key, href: subElement.href, target: subElement.href ? subElement.target : undefined, onClick: () => {
+                                    if (subElement.onClick) {
+                                        subElement.onClick();
+                                    }
+                                    if (appBar.closeOnClick !== false) {
+                                        setAppBarOpen(false);
+                                    }
+                                    if (appBar.elementClicked) {
+                                        appBar.elementClicked(subElement.key);
+                                    }
+                                } },
+                                React.createElement(C3NavigationExternalLink, { label: subElement.label }))))));
+                        }
+                        else {
+                            return element.routeProps ? (React.createElement(SideNavLink, { element: forwardRef, key: element.key, large: true, isActive: element.active, ...element.routeProps, onClick: () => {
+                                    if (element.onClick) {
+                                        element.onClick();
+                                    }
+                                    if (appBar.closeOnClick !== false) {
+                                        setAppBarOpen(false);
+                                    }
+                                    if (appBar.elementClicked) {
+                                        appBar.elementClicked(element.key);
+                                    }
+                                } }, element.label)) : (React.createElement(SideNavLink, { key: element.key, large: true, onClick: () => {
+                                    if (element.onClick) {
+                                        element.onClick();
+                                    }
+                                    if (appBar.closeOnClick !== false) {
+                                        setAppBarOpen(false);
+                                    }
+                                    if (appBar.elementClicked) {
+                                        appBar.elementClicked(element.key);
+                                    }
+                                }, href: element.href, target: element.href ? element.target : undefined }, element.label));
+                        }
+                    })))));
+};
+const C3NavigationSideBar = (props) => {
+    const { sideBar } = props;
+    if (sideBar) {
+        const activeOrganization = sideBar.customElements?.activeOrganization;
+        const profile = sideBar.customElements?.profile;
+        const themeSelector = sideBar.customElements?.themeSelector;
+        const stageToggle = sideBar.customElements?.stageToggle;
+        let icon;
+        switch (sideBar.type) {
+            case "org":
+                icon = React.createElement(Enterprise, { size: 20 });
+                break;
+            case "info":
+                icon = React.createElement(Help, { size: 20 });
+                break;
+            case "user":
+                icon = React.createElement(UserAvatar, { size: 20 });
+                break;
+        }
+        const [sideBarOpen, setSideBarOpen] = useState(sideBar.isOpen);
+        const refPanel = React.createRef();
+        const refIcon = React.createRef();
+        useOnClickOutside(refPanel, refIcon, () => setSideBarOpen(false));
+        return (React.createElement(React.Fragment, null,
+            React.createElement(HeaderGlobalAction, { ref: refIcon, "aria-label": sideBar.ariaLabel, onClick: () => {
+                    setSideBarOpen(!sideBarOpen);
+                }, isActive: sideBarOpen, tooltipAlignment: sideBar.type === 'user' ? 'end' : 'center' }, icon),
+            React.createElement(HeaderPanel, { ref: refPanel, "aria-label": sideBar.ariaLabel, expanded: sideBarOpen, style: {
+                    display: "grid",
+                    gridAutoFlow: "row",
+                    gridAutoRows: "max-content 1fr",
+                } },
+                React.createElement(Stack, null,
+                    profile && (React.createElement("div", { style: {
+                            padding: "1rem",
+                            paddingTop: "1.5rem",
+                            paddingBottom: ".5rem",
+                        } },
+                        React.createElement(Stack, { gap: 2 },
+                            React.createElement(FormLabel, null, profile.label),
+                            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,
+                        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(RadioButton, { id: "light", labelText: "Light", value: "light" }),
+                                React.createElement(RadioButton, { id: "system", labelText: "System", value: "system" }),
+                                React.createElement(RadioButton, { id: "dark", labelText: "Dark", value: "dark" }))))),
+                    stageToggle && (React.createElement(React.Fragment, null,
+                        React.createElement(SwitcherDivider, null),
+                        React.createElement("div", { style: { padding: ".5rem 1rem" } },
+                            React.createElement(Toggle, { size: "sm", id: "toggle-productionfeatures", defaultToggled: stageToggle.prodFeaturesEnabled, onClick: stageToggle.toggle, labelText: "Simulate Production Features" })))),
+                    activeOrganization && (React.createElement(React.Fragment, null,
+                        React.createElement("div", { style: {
+                                padding: "1rem",
+                                paddingTop: "1.5rem",
+                                paddingBottom: ".5rem",
+                                display: "grid",
+                                gridAutoFlow: "column",
+                                gap: ".25rem",
+                            } },
+                            React.createElement("div", { style: {
+                                    overflow: "hidden",
+                                    display: "grid",
+                                    gap: "4px",
+                                } },
+                                React.createElement(FormLabel, null, activeOrganization.activeLabel),
+                                React.createElement("div", { className: "textPrimary", style: {
+                                        height: "20px",
+                                        lineHeight: "20px",
+                                        fontSize: "14px",
+                                        textOverflow: "ellipsis",
+                                        overflow: "hidden",
+                                        whiteSpace: "nowrap",
+                                    }, title: activeOrganization.orgName }, activeOrganization.orgName)),
+                            React.createElement(Button, { size: "md", kind: "ghost", key: "org-management", onClick: () => {
+                                    activeOrganization.action.onClick();
+                                    if (sideBar.closeOnClick !== false) {
+                                        setSideBarOpen(false);
+                                    }
+                                } }, activeOrganization.action.label)),
+                        sideBar.elements && sideBar.elements.length > 0 && (React.createElement(React.Fragment, null,
+                            React.createElement(SwitcherDivider, null),
+                            React.createElement(FormLabel, { style: {
+                                    paddingTop: ".5rem",
+                                    paddingLeft: "1rem",
+                                    paddingBottom: ".25rem",
+                                } }, activeOrganization.otherLabel))))),
+                    sideBar.elements &&
+                        sideBar.elements.length > 0 &&
+                        sideBar.customElements &&
+                        !sideBar.customElements?.activeOrganization && (React.createElement(SwitcherDivider, null)),
+                    sideBar.elements &&
+                        sideBar.elements.map((element, index) => (React.createElement(Button, { key: element.key, style: index === 0 && !sideBar.customElements
+                                ? { marginTop: "1.5rem", whiteSpace: "nowrap" }
+                                : { whiteSpace: "nowrap" }, size: "sm", kind: element.kind ?? "ghost", className: "cds--switcher__item", onClick: () => {
+                                if (element.onClick) {
+                                    element.onClick();
+                                }
+                                if (sideBar.closeOnClick !== false) {
+                                    setSideBarOpen(false);
+                                }
+                            } }, element.label)))),
+                sideBar.bottomElements &&
+                    sideBar.bottomElements.map((element) => (React.createElement(Button, { kind: element.kind, key: element.key, className: "cds--switcher__item", renderIcon: element.renderIcon, onClick: () => {
+                            if (element.onClick) {
+                                element.onClick();
+                            }
+                            if (sideBar.closeOnClick !== false) {
+                                setSideBarOpen(false);
+                            }
+                        }, style: { alignSelf: "end" } }, element.label))))));
+    }
+    return null;
+};
+export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, infoSideBar, userSideBar, }) => {
+    return (React.createElement(HeaderContainer, { render: () => {
+            return (React.createElement(Header, { "aria-label": "Camunda Console" },
+                React.createElement(SkipToContent, null),
+                React.createElement(C3NavigationAppBar, { app: app, appBar: appBar, forwardRef: forwardRef, navbar: navbar }),
+                React.createElement(HeaderName, { element: forwardRef, prefix: app.prefix, ...app.routeProps },
+                    React.createElement("span", null, app.name)),
+                React.createElement(HeaderNavigation, { "aria-label": app.ariaLabel }, navbar.elements.map((element) => (React.createElement(HeaderMenuItem, { key: element.key, element: forwardRef, isCurrentPage: element.isCurrentPage, ...element.routeProps },
+                    React.createElement("span", null, element.label))))),
+                React.createElement(HeaderGlobalBar, null,
+                    React.createElement("div", { style: {
+                            display: "grid",
+                            gridAutoFlow: "column",
+                            gap: ".5rem",
+                            paddingRight: ".5rem",
+                        } },
+                        navbar.tags &&
+                            navbar.tags.length > 0 &&
+                            navbar.tags.map((tag) => (React.createElement(Tag, { key: tag.key, className: "headerTag", type: tag.color }, tag.label))),
+                        navbar.orgName && (React.createElement("div", { className: "bodyText", style: {
+                                fontSize: "14px",
+                                lineHeight: "3rem",
+                                textOverflow: "ellipsis",
+                                whiteSpace: "nowrap",
+                                overflow: "hidden",
+                                maxWidth: "150px",
+                            } }, navbar.orgName))),
+                    React.createElement(C3NavigationSideBar, { sideBar: orgSideBar }),
+                    React.createElement(C3NavigationSideBar, { sideBar: infoSideBar }),
+                    React.createElement(C3NavigationSideBar, { sideBar: userSideBar }))));
+        } }));
+};
+function useOnClickOutside(refPanel, refIcon, handler) {
+    useEffect(() => {
+        const listener = (event) => {
+            if (!refPanel.current ||
+                !refIcon.current ||
+                refPanel.current.contains(event.target) ||
+                refIcon.current.contains(event.target)) {
+                return;
+            }
+            handler(event);
+        };
+        document.addEventListener("mousedown", listener);
+        document.addEventListener("touchstart", listener);
+        return () => {
+            document.removeEventListener("mousedown", listener);
+            document.removeEventListener("touchstart", listener);
+        };
+    }, [refPanel, handler]);
+}

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

@@ -0,0 +1,78 @@
+/// <reference types="react" />
+export interface C3NavigationAppProps {
+    prefix: string;
+    name: string;
+    ariaLabel: string;
+    routeProps: any;
+}
+export interface C3NavigationElementProps {
+    ariaLabel?: string;
+    key: string;
+    label: string;
+    kind?: "ghost" | "danger--ghost";
+    active?: boolean;
+    renderIcon?: any;
+    routeProps?: any;
+    href?: string;
+    target?: "_blank" | "_self" | "_parent" | "_top";
+    onClick?: () => void;
+    subElements?: C3NavigationElementProps[];
+}
+export interface C3NavigationSideBarBaseProps {
+    ariaLabel?: string;
+    isOpen?: boolean;
+    type: "org" | "info" | "user" | "app";
+    closeOnClick?: boolean;
+    elementClicked?: (key: string) => void;
+    customElements?: {
+        activeOrganization?: {
+            activeLabel: string;
+            otherLabel: string;
+            orgName: string;
+            action: {
+                label: string;
+                onClick: () => void;
+            };
+        };
+        profile?: {
+            label: string;
+            user: {
+                name: string;
+                email: string;
+            };
+        };
+        themeSelector?: {
+            currentTheme: string;
+            onChange: (newValue: string) => void;
+        };
+        stageToggle?: {
+            prodFeaturesEnabled: boolean;
+            toggle: () => void;
+        };
+    };
+    elements?: C3NavigationElementProps[];
+    bottomElements?: C3NavigationElementProps[];
+}
+export interface C3NavigationNavBarProps {
+    elements: Array<{
+        label: string;
+        key: string;
+        routeProps: any;
+        isCurrentPage: boolean;
+    }>;
+    tags?: Array<{
+        label: string;
+        key: string;
+        color?: "red" | "green" | "purple" | "teal";
+    }>;
+    orgName?: string;
+}
+export interface C3NavigationProps {
+    app: C3NavigationAppProps;
+    appBar: C3NavigationSideBarBaseProps;
+    orgSideBar?: C3NavigationSideBarBaseProps;
+    infoSideBar?: C3NavigationSideBarBaseProps;
+    userSideBar?: C3NavigationSideBarBaseProps;
+    navbar: C3NavigationNavBarProps;
+    forwardRef?: React.ForwardRefExoticComponent<any>;
+}

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

@@ -0,0 +1 @@
+export {};

package/lib/esm/icons/c3-icons.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { C3IconProps } from "./c3-icons.types";
+export declare const C3AppMenuIcon: ({ size }: C3IconProps) => JSX.Element;

package/lib/esm/icons/c3-icons.js

@@ -0,0 +1,4 @@
+import React from "react";
+export const C3AppMenuIcon = ({ size }) => (React.createElement("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, fill: "transparent", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("path", { fill: "transparent", style: { mixBlendMode: "multiply" }, d: "M0 0h20v20H0z" }),
+    React.createElement("path", { d: "M11.5 1h-3v3h3V1ZM4 1H1v3h3V1Zm15 0h-3v3h3V1Zm-7.5 7.5h-3v3h3v-3ZM4 8.5H1v3h3v-3Zm15 0h-3v3h3v-3ZM11.5 16h-3v3h3v-3ZM4 16H1v3h3v-3Zm15 0h-3v3h3v-3Z", fill: "$icon-primary" })));

package/lib/esm/icons/c3-icons.types.d.ts

@@ -0,0 +1,3 @@
+export interface C3IconProps {
+    size: number;
+}

package/lib/esm/icons/c3-icons.types.js

@@ -0,0 +1 @@
+export {};

package/lib/esm/index.d.ts

@@ -0,0 +1,6 @@
+export { C3EmptyState } from "./components/c3-empty-state/c3-empty-state";
+export { C3EmptyStateProps } from "./components/c3-empty-state/c3-empty-state.types";
+export { C3Navigation } from "./components/c3-navigation/c3-navigation";
+export { C3NavigationAppProps, C3NavigationElementProps, C3NavigationNavBarProps, C3NavigationProps, C3NavigationSideBarBaseProps, } from "./components/c3-navigation/c3-navigation.types";
+export { C3AppMenuIcon } from "./icons/c3-icons";
+export { C3IconProps } from "./icons/c3-icons.types";

package/lib/esm/index.js

@@ -0,0 +1,3 @@
+export { C3EmptyState } from "./components/c3-empty-state/c3-empty-state";
+export { C3Navigation } from "./components/c3-navigation/c3-navigation";
+export { C3AppMenuIcon } from "./icons/c3-icons";

package/package.json

@@ -0,0 +1,52 @@
+{
+	"name": "@camunda/camunda-composite-components",
+	"version": "0.0.17-alpha-1",
+	"scripts": {
+		"build": "tsc",
+		"storybook": "start-storybook -p 6006",
+		"build-storybook": "build-storybook"
+	},
+	"devDependencies": {
+		"@babel/core": "^7.19.6",
+		"@carbon/react": "1.11.0",
+		"@mdx-js/react": "^1.6.22",
+		"@storybook/addon-actions": "^6.5.13",
+		"@storybook/addon-docs": "^6.5.13",
+		"@storybook/addon-essentials": "^6.5.13",
+		"@storybook/addon-interactions": "^6.5.13",
+		"@storybook/addon-links": "^6.5.13",
+		"@storybook/builder-webpack4": "^6.5.13",
+		"@storybook/manager-webpack4": "^6.5.13",
+		"@storybook/preset-scss": "^1.0.3",
+		"@storybook/react": "^6.5.13",
+		"@storybook/testing-library": "^0.0.13",
+		"@types/carbon-components-react": "7.55.2",
+		"@types/event-source-polyfill": "1.0.0",
+		"@types/node": "18.11.5",
+		"@types/react": "18.0.22",
+		"@types/react-dom": "18.0.7",
+		"babel-loader": "^8.2.5",
+		"prettier": "2.7.1",
+		"react": "18.2.0",
+		"react-dom": "18.2.0",
+		"sass": "^1.55.0",
+		"sass-loader": "^13.1.0",
+		"storybook-addon-sass-postcss": "^0.1.3",
+		"style-loader": "^3.3.1",
+		"typescript": "4.8.4"
+	},
+	"peerDependencies": {
+		"@carbon/react": "1.x",
+		"react": "18.x",
+		"react-dom": "18.x"
+	},
+	"description": "Camunda Composite Components",
+	"main": "./lib/esm/index.js",
+	"types": "./lib/esm/index.d.ts",
+	"files": [
+		"/lib"
+	],
+	"author": "Camunda",
+	"license": "ISC",
+	"packageManager": "yarn@3.2.1"
+}