@camunda/ccma-saas-frontend 0.0.31

package/lib/esm/components/c4-search/c4-search-results.d.ts

@@ -0,0 +1,2 @@
+import type { C4SearchResultsProps } from './c4-search-results.types';
+export declare const C4SearchResults: (props: C4SearchResultsProps) => import("react/jsx-runtime").JSX.Element;

package/lib/esm/components/c4-search/c4-search-results.js

@@ -0,0 +1,235 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { InlineLoading, Link, Stack, Tile } from '@carbon/react';
+import { Activity, AddAlt, Alarm, Analytics, ArrowRight, CaretRight, Checkmark, DataBackup, Document, Enterprise, FlowConnection, Forum, Help, IbmToolchain, Launch, LogoGithub, Password, Settings, User, UserFollow, Wallet, WatsonHealthStackedMove, } from '@carbon/react/icons/index.esm.js';
+import { useState } from 'react';
+import { C4Divider } from '../c4-divider/c4-divider.js';
+import { SearchUtils } from './search.utils';
+const KBD = ({ label }) => {
+    return (_jsx("kbd", { style: {
+            borderRadius: '0.25rem',
+            border: '1px solid var(--cds-text-helper)',
+            boxShadow: '0 2px 0 1px var(--cds-text-helper)',
+            fontFamily: 'var(--font-family-sans-serif)',
+            fontSize: '0.75rem',
+            lineHeight: 1,
+            minWidth: '0.75rem',
+            textAlign: 'center',
+            padding: '2px 5px',
+            position: 'relative',
+            top: '-1px',
+            marginLeft: '2px',
+            marginRight: '2px',
+        }, children: label }));
+};
+const SearchHelp = () => {
+    return (_jsxs(Stack, { gap: 5, children: [_jsx("p", { children: "This search offers more than just basic searches. By using additional commands, you can discover and accomplish more." }), _jsxs("p", { children: ["Type ", _jsx(KBD, { label: '>' }), " to execute an action in Console. By using", ' ', _jsx(KBD, { label: '#' }), " as prefix you search only in docs."] }), _jsxs("p", { children: ["Use ", _jsx(KBD, { label: '\u25C0' }), _jsx(KBD, { label: '\u25B2' }), _jsx(KBD, { label: '\u25BC' }), _jsx(KBD, { label: '\u25B6' }), " to navigate results. If you see a \u25B6 symbol on the right hand side there is more to see."] }), _jsxs("p", { children: ["If you want to select a result, just press ", _jsx(KBD, { label: 'Enter' }), "."] }), _jsxs("p", { children: ["You can open the quick search by pressing ", _jsx(KBD, { label: 'ctrl' }), "+", _jsx(KBD, { label: 'k' }), " or ", _jsx(KBD, { label: '\u2318' }), "+", _jsx(KBD, { label: 'k' }), "."] })] }));
+};
+const SearchResultHeader = () => {
+    return (_jsx("div", { children: _jsx("div", { className: 'cds--label', style: {
+                color: 'var(--cds-text-helper)',
+                display: 'grid',
+                gridTemplateColumns: '1fr',
+            }, children: _jsxs("span", { children: [_jsx("strong", { children: "Tip:" }), " Type ", _jsx(KBD, { label: '>' }), " to execute an action, or type ", _jsx(KBD, { label: '?' }), " for more search tips."] }) }) }));
+};
+const SearchResultCategoryHeader = (props) => {
+    let title = props.title;
+    let jumpTo = _jsx(_Fragment, {});
+    if (props.url) {
+        jumpTo = (_jsxs(Link, { href: props.url, target: '_blank', style: { fontSize: '12px' }, children: ["Go to ", props.title] }));
+    }
+    if (props.parentTitles && props.parentTitles.length > 0) {
+        title = `${props.parentTitles.join(' > ')} > ${title}`;
+        if (props.searchHooks) {
+            jumpTo = (_jsx(Link, { style: { fontSize: '12px', cursor: 'pointer' }, onClick: () => SearchUtils.navigate({
+                    direction: 'left',
+                    searchHooks: props.searchHooks,
+                }), children: "Go back" }));
+        }
+    }
+    return (_jsxs("div", { className: 'cds--label', style: {
+            color: 'var(--cds-text-helper)',
+            marginBottom: '-5px',
+            display: 'grid',
+            gridTemplateColumns: '1fr 1fr',
+        }, children: [_jsx("span", { children: title }), _jsx("span", { style: { justifySelf: 'end' }, children: jumpTo })] }));
+};
+const SearchResultCategoryEntry = (props) => {
+    const [isHover, setIsHover] = useState(false);
+    let icon = _jsx("div", {});
+    switch (props.type) {
+        case 'add':
+            icon = _jsx(AddAlt, {});
+            break;
+        case 'add-user':
+            icon = _jsx(UserFollow, {});
+            break;
+        case 'docs':
+            icon = _jsx(Document, {});
+            break;
+        case 'app':
+            icon = _jsx(ArrowRight, {});
+            break;
+        case 'helpcenter':
+            icon = _jsx(Help, {});
+            break;
+        case 'forum':
+            icon = _jsx(Forum, {});
+            break;
+        case 'page':
+            icon = _jsx(WatsonHealthStackedMove, {});
+            break;
+        case 'api':
+            icon = _jsx(IbmToolchain, {});
+            break;
+        case 'activity':
+            icon = _jsx(Activity, {});
+            break;
+        case 'secret':
+            icon = _jsx(Password, {});
+            break;
+        case 'alert':
+            icon = _jsx(Alarm, {});
+            break;
+        case 'backup':
+            icon = _jsx(DataBackup, {});
+            break;
+        case 'settings':
+            icon = _jsx(Settings, {});
+            break;
+        case 'user':
+            icon = _jsx(User, {});
+            break;
+        case 'billing':
+            icon = _jsx(Wallet, {});
+            break;
+        case 'tasklist':
+            icon = _jsx(Checkmark, {});
+            break;
+        case 'optimize':
+            icon = _jsx(Analytics, {});
+            break;
+        case 'operate':
+            icon = _jsx(Activity, {});
+            break;
+        case 'org':
+            icon = _jsx(Enterprise, {});
+            break;
+        case 'github':
+            icon = _jsx(LogoGithub, {});
+            break;
+        case 'modeler':
+            icon = _jsx(FlowConnection, {});
+            break;
+    }
+    let meta = _jsx("div", {});
+    switch (props.meta) {
+        case 'external':
+            meta = _jsx(Launch, {});
+            break;
+    }
+    if (props.more) {
+        meta = _jsx(CaretRight, {});
+    }
+    const onClickMain = () => {
+        if (props.onClick) {
+            props.onClick();
+        }
+        else if (props.url) {
+            window.open(props.url, '_blank');
+        }
+        else if (props.more && props.searchHooks) {
+            SearchUtils.navigate({
+                direction: 'right',
+                searchHooks: props.searchHooks,
+            });
+        }
+    };
+    const onClickSub = () => {
+        if (props.more && props.searchHooks) {
+            SearchUtils.navigate({
+                direction: 'right',
+                searchHooks: props.searchHooks,
+            });
+        }
+    };
+    return (_jsxs("div", { children: [_jsxs("div", { id: props.elementId, style: {
+                    backgroundColor: props.selected || isHover ? 'var(--cds-layer-hover' : undefined,
+                    padding: '5px',
+                    display: 'grid',
+                    gridTemplateColumns: '25px 1fr auto',
+                    cursor: 'pointer',
+                }, onMouseEnter: () => {
+                    setIsHover(true);
+                    if (props.searchHooks) {
+                        SearchUtils.updateSelectedIndexByElementId({
+                            searchHooks: props.searchHooks,
+                            elementId: props.elementId,
+                        });
+                    }
+                }, onMouseLeave: () => {
+                    setIsHover(false);
+                    if (props.searchHooks) {
+                        SearchUtils.updateSelectedIndexByElementId({
+                            searchHooks: props.searchHooks,
+                            elementId: 'unknown',
+                        });
+                    }
+                }, children: [_jsx("span", { onClick: () => onClickMain(), children: icon }), _jsx("p", { onClick: () => onClickMain(), style: { width: '100%' }, children: props.title }), _jsx("span", { style: { justifySelf: 'end' }, onClick: () => onClickSub(), children: meta })] }), props.moreAvailable && (_jsx("span", { className: 'cds--label', style: { color: 'var(--cds-text-helper)', paddingLeft: '27px' }, children: "more available" }))] }));
+};
+const SearchResultCategory = (props) => {
+    let component = _jsx(_Fragment, {});
+    if (props.entries.length > 0) {
+        component = (_jsxs(Stack, { gap: 1, children: [props.id !== 'more' && _jsx(SearchResultCategoryHeader, { ...props }), _jsx(C4Divider, {}), _jsx("div", { style: { maxHeight: '180px', overflow: 'auto' }, children: props.entries
+                        .filter((entry) => {
+                        const isVisible = entry.visible === undefined || entry.visible === true;
+                        return isVisible;
+                    })
+                        .filter((_entry, index) => {
+                        const isEntryCap = props.entryCap === undefined || index < props.entryCap;
+                        return isEntryCap;
+                    })
+                        .map((result, index) => {
+                        return (_jsx(SearchResultCategoryEntry, { ...result, selected: props.selectedId === `${props.id}-${result.id}`, elementId: `${props.id}-${result.id}`, moreAvailable: props.entryCap !== undefined && index === props.entryCap - 1, searchHooks: props.searchHooks }, result.id));
+                    }) })] }));
+    }
+    return component;
+};
+export const C4SearchResults = (props) => {
+    let component = _jsx(_Fragment, {});
+    if (props.loading) {
+        component = (_jsx(InlineLoading, { status: 'active', iconDescription: 'Loading', description: 'Loading data...' }));
+    }
+    else {
+        component = (_jsxs(_Fragment, { children: [props.results.length === 0 ||
+                    (props.results.length === 1 && props.results[0].id === 'more' && (_jsx("p", { children: "No results found for your request." }))), props.results.map((result) => {
+                    const selectedId = props.selectedIndex >= 0 &&
+                        props.selectedIndex < props.allIds.length
+                        ? props.allIds[props.selectedIndex]
+                        : undefined;
+                    return (_jsx(SearchResultCategory, { id: result.id, title: result.title, entries: result.entries, url: result.url, selectedId: selectedId, parentTitles: props.parentTitles, entryCap: result.entryCap, searchHooks: props.searchHooks }, result.id));
+                })] }));
+    }
+    let content = (_jsxs(_Fragment, { children: [_jsx(SearchResultHeader, {}), component] }));
+    if (props.showHelp) {
+        content = _jsx(SearchHelp, {});
+    }
+    return (_jsx(Tile, { style: {
+            position: 'relative',
+            borderLeft: '1px solid var(--cds-border-subtle-01)',
+            borderBottom: '1px solid var(--cds-border-subtle-01)',
+            boxShadow: '0 2px 6px 0 rgba(0,0,0,.2)',
+        }, onMouseEnter: () => {
+            if (props.onMouseEnter) {
+                props.onMouseEnter();
+            }
+        }, onMouseLeave: () => {
+            if (props.onMouseLeave) {
+                props.onMouseLeave();
+            }
+        }, children: _jsx(Stack, { gap: 5, children: content }) }));
+};

package/lib/esm/components/c4-search/c4-search-results.types.d.ts

@@ -0,0 +1,33 @@
+import type { SearchHooks } from './c4-search';
+export interface SearchResultEntry {
+    id: string;
+    title: string;
+    url?: string;
+    onClick?: () => void;
+    selected?: boolean;
+    meta?: 'external';
+    more?: SearchResults[];
+    type?: 'add' | 'add-user' | 'page' | 'docs' | 'forum' | 'helpcenter' | 'app' | 'api' | 'alert' | 'activity' | 'settings' | 'backup' | 'secret' | 'user' | 'billing' | 'tasklist' | 'operate' | 'optimize' | 'org' | 'github' | 'modeler';
+    visible?: boolean;
+    tags?: string[];
+}
+export interface SearchResults {
+    selectedId?: string;
+    id: string;
+    title: string;
+    parentTitles?: string[];
+    url?: string;
+    entries: SearchResultEntry[];
+    entryCap?: number;
+}
+export interface C4SearchResultsProps {
+    parentTitles?: string[];
+    results: SearchResults[];
+    allIds: string[];
+    selectedIndex: number;
+    loading: boolean;
+    showHelp?: boolean;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    searchHooks?: SearchHooks;
+}

package/lib/esm/components/c4-search/c4-search-results.types.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+export {};

package/lib/esm/components/c4-search/c4-search.d.ts

@@ -0,0 +1,35 @@
+import { type JSX } from 'react';
+import type { C4SearchProps } from './c4-search.types';
+import type { SearchResults } from './c4-search-results.types';
+export type SearchState = 'init' | 'search' | 'actions' | 'help';
+export interface SearchHooks {
+    open: boolean;
+    setOpen: (newState: boolean) => void;
+    expanded: boolean;
+    setExpanded: (newState: boolean) => void;
+    value: string;
+    setValue: (newValue: string) => void;
+    results: SearchResults[];
+    setResults: (newResults: SearchResults[]) => void;
+    allIds: string[];
+    setAllIds: (newAllIds: string[]) => void;
+    selectedIndex: number;
+    setSelectedIndex: (newIndex: number) => void;
+    keyListenerSet: boolean;
+    setKeyListenerSet: (newState: boolean) => void;
+    valueChangeTimestamp: number;
+    setValueChangeTimestamp: (newTimestamp: number) => void;
+    valueChangeTimeout: any;
+    setValueChangeTimeout: (newTimeout: any) => void;
+    loading: boolean;
+    setLoading: (newState: boolean) => void;
+    searchState: SearchState;
+    setSearchState: (newState: SearchState) => void;
+    parentResults: SearchResults[][];
+    setParentResults: (newResults: SearchResults[][]) => void;
+    shouldBlur: boolean;
+    setShouldBlur: (newState: boolean) => void;
+    parentTitles: string[];
+    setParentTitles: (newParentIds: string[]) => void;
+}
+export declare const C4Search: ({ search, init, actions, changeOpenState, isExpanded, options, analytics, keylistener, }: C4SearchProps) => JSX.Element;

package/lib/esm/components/c4-search/c4-search.js

@@ -0,0 +1,134 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { ExpandableSearch, HeaderGlobalAction } from '@carbon/react';
+import { Search } from '@carbon/react/icons/index.esm.js';
+import { useState } from 'react';
+import styled from 'styled-components';
+import { C4SearchResults } from './c4-search-results.js';
+import { SearchUtils } from './search.utils';
+const SearchWrapper = styled.div `
+  position: absolute;
+  animation: fadeIn 1s;
+  ${({ width }) => typeof width === 'undefined'
+    ? ''
+    : `width: min(100vw, ${typeof width === 'number' ? `${width}px)` : width});`}
+`;
+export const C4Search = ({ search, init, actions, changeOpenState, isExpanded, options, analytics, keylistener, }) => {
+    // ///////////////////////
+    // HOOKS
+    const [open, setOpen] = useState(init.length > 0);
+    const [expanded, setExpanded] = useState(isExpanded ?? false);
+    const [value, setValue] = useState('');
+    const [results, setResults] = useState(init);
+    const [allIds, setAllIds] = useState(SearchUtils.getAllIdsByResults(init));
+    const [selectedIndex, setSelectedIndex] = useState(-1);
+    const [keyListenerSet, setKeyListenerSet] = useState(keylistener ? keylistener.keyListenerSet : false);
+    const [valueChangeTimestamp, setValueChangeTimestamp] = useState(0);
+    const [valueChangeTimeout, setValueChangeTimeout] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [searchState, setSearchState] = useState('init');
+    const [parentResults, setParentResults] = useState([]);
+    const [shouldBlur, setShouldBlur] = useState(true);
+    const [parentTitles, setParentTitles] = useState([]);
+    const searchHooks = {
+        open,
+        setOpen,
+        expanded,
+        setExpanded,
+        value,
+        setValue,
+        results,
+        setResults,
+        allIds,
+        setAllIds,
+        selectedIndex,
+        setSelectedIndex,
+        keyListenerSet,
+        setKeyListenerSet,
+        valueChangeTimestamp,
+        setValueChangeTimestamp,
+        valueChangeTimeout,
+        setValueChangeTimeout,
+        loading,
+        setLoading,
+        searchState,
+        setSearchState,
+        parentResults,
+        setParentResults,
+        shouldBlur,
+        setShouldBlur,
+        parentTitles,
+        setParentTitles,
+    };
+    const input = {
+        search,
+        init,
+        actions,
+        changeOpenState,
+        isExpanded,
+        options,
+        analytics,
+        keylistener,
+    };
+    const inputOptions = SearchUtils.getOptions({ input });
+    SearchUtils.handleShortCut({
+        searchHooks,
+        input,
+    });
+    setTimeout(() => {
+        SearchUtils.searchFocus();
+    }, 100);
+    // ///////////////////////
+    // COMPONENT
+    const component = (_jsxs(SearchWrapper, { width: expanded ? inputOptions.searchWidth : undefined, children: [_jsx(ExpandableSearch, { id: 'mighty-search', className: expanded ? 'cds--search--expanded' : undefined, size: 'lg', labelText: 'search', isExpanded: expanded, placeholder: 'Type anything to search docs, forum, help center, and github.', onChange: (event) => {
+                    SearchUtils.handleValueChange({
+                        newValue: event.target.value,
+                        searchHooks,
+                        input,
+                    });
+                }, onExpand: (_event) => {
+                    SearchUtils.handleExpanded({ newState: true, searchHooks, input });
+                }, onBlur: (_event) => {
+                    if (shouldBlur) {
+                        setTimeout(() => {
+                            SearchUtils.handleExpanded({
+                                newState: false,
+                                searchHooks,
+                                input,
+                            });
+                        }, 300);
+                    }
+                }, onKeyDown: (event) => {
+                    SearchUtils.handleKeyDown({
+                        event,
+                        searchHooks,
+                        input,
+                    });
+                } }), open && expanded && (_jsx(C4SearchResults, { loading: loading, results: results, allIds: allIds, selectedIndex: selectedIndex, parentTitles: parentTitles, showHelp: searchState === 'help', onMouseEnter: () => {
+                    setShouldBlur(false);
+                }, onMouseLeave: () => {
+                    setShouldBlur(true);
+                }, searchHooks: searchHooks }))] }));
+    if (expanded) {
+        return component;
+    }
+    else {
+        return (_jsx(HeaderGlobalAction, { "aria-label": 'Search', onClick: () => {
+                SearchUtils.handleExpanded({ newState: true, searchHooks, input });
+                if (analytics) {
+                    analytics({
+                        event: 'search-open',
+                        payload: {
+                            properties: {
+                                source: 'click',
+                            },
+                        },
+                    });
+                }
+            }, children: _jsx(Search, { size: 20 }) }));
+    }
+};

package/lib/esm/components/c4-search/c4-search.types.d.ts

@@ -0,0 +1,20 @@
+import type { SearchResults } from './c4-search-results.types';
+export interface C4SearchProps {
+    search: (query: string) => Promise<SearchResults[]>;
+    init: SearchResults[];
+    actions: SearchResults[];
+    changeOpenState: (isOpen: boolean) => void;
+    isExpanded?: boolean;
+    options?: {
+        valueChangeTimeoutThreshold?: number;
+        searchWidth?: string;
+    };
+    analytics?: (options: {
+        event: string;
+        payload: any;
+    }) => void;
+    keylistener?: {
+        updateKeyListenerSet: () => void;
+        keyListenerSet: boolean;
+    };
+}

package/lib/esm/components/c4-search/c4-search.types.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+export {};

package/lib/esm/components/c4-search/search.utils.d.ts

@@ -0,0 +1,61 @@
+import type { SearchHooks } from './c4-search';
+import type { C4SearchProps } from './c4-search.types';
+import type { C4SearchResultsProps, SearchResultEntry, SearchResults } from './c4-search-results.types';
+export declare class SearchUtils {
+    static getAllIdsByResults(results: SearchResults[]): string[];
+    static generateSearchResultProps(results: SearchResults[]): C4SearchResultsProps;
+    static getSearchResults(options: {
+        query: string;
+        input: C4SearchProps;
+    }): Promise<C4SearchResultsProps>;
+    static handleExpanded(options: {
+        newState: boolean;
+        searchHooks: SearchHooks;
+        input: C4SearchProps;
+    }): void;
+    static handleOpen(options: {
+        newState: boolean;
+        searchHooks: SearchHooks;
+        input: C4SearchProps;
+    }): void;
+    static searchFocus(): void;
+    static handleKeyDown(options: {
+        event: React.KeyboardEvent<HTMLInputElement>;
+        searchHooks: SearchHooks;
+        input: C4SearchProps;
+    }): void;
+    static updateSelectedIndexByElementId(options: {
+        elementId: string;
+        searchHooks: SearchHooks;
+    }): void;
+    static navigate(options: {
+        direction: 'up' | 'down' | 'left' | 'right';
+        searchHooks: SearchHooks;
+    }): void;
+    static scrollIntoViewOfSelectedElement(options: {
+        searchHooks: SearchHooks;
+        direction: 'up' | 'down';
+    }): void;
+    static findElementSelectedElement(options: {
+        searchHooks: SearchHooks;
+    }): {
+        foundElement: SearchResultEntry | undefined;
+        foundElementParentTitle: string;
+    };
+    static getOptions(options: {
+        input: C4SearchProps;
+    }): {
+        valueChangeTimeoutThreshold: number;
+        searchWidth: string;
+    };
+    static handleValueChange(options: {
+        newValue: string;
+        searchHooks: SearchHooks;
+        input: C4SearchProps;
+    }): void;
+    static handleShortCut(options: {
+        searchHooks: SearchHooks;
+        input: C4SearchProps;
+    }): void;
+    static findInSearchResult(query: string, result: SearchResults): SearchResults | undefined;
+}