@camunda/camunda-composite-components 0.22.3 → 0.22.5

package/lib/esm/src/components/c3-app-teaser/c3-app-teaser.d.ts

@@ -0,0 +1,14 @@
+import type { FC } from 'react';
+import type { StartingPrice } from '../../api/organizations';
+export declare const teaserApps: readonly ["tasklist", "operate", "optimize"];
+export type TeaserApp = (typeof teaserApps)[number];
+export type C3AppTeaserProps = {
+    appName: TeaserApp;
+    canCreateCluster: boolean;
+    canUpgradePlan: boolean;
+    hasTrialExpired: boolean;
+    hasSleepingCluster: boolean;
+    onClickCta: () => void;
+    pricing: StartingPrice | null;
+};
+export declare const C3AppTeaser: FC<C3AppTeaserProps>;

package/lib/esm/src/components/c3-app-teaser/c3-app-teaser.js

@@ -0,0 +1,53 @@
+import { Fragment as _Fragment, jsx as _jsx } 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 { Add, Settings } from '@carbon/react/icons/index.esm.js';
+import { getReadableAppName } from '../../utils/camunda.js';
+import { DefaultStyleWrapper } from '../styles.js';
+import { AppTeaserCards } from './app-teaser-cards.js';
+import { appTeaserCardsConfig } from './app-teaser-cards-config.js';
+export const teaserApps = ['tasklist', 'operate', 'optimize'];
+export const C3AppTeaser = ({ appName: app, hasTrialExpired, hasSleepingCluster, canUpgradePlan, canCreateCluster, onClickCta, }) => {
+    const appName = app ? getReadableAppName(app) : '';
+    const variants = {
+        upgrade: {
+            title: `Upgrade your plan${appName ? ` to use ${appName}` : ''}`,
+            subtitle: `Creating a cluster and accessing the ${appName} app and features
+			are not available with the Modeling plan`,
+            ctaText: 'Contact us',
+            ctaIcon: null,
+            disabledMessage: 'Contact your admin to upgrade',
+        },
+        manageClusters: {
+            title: `Resume your cluster${appName ? ` to use ${appName}` : ''}`,
+            subtitle: `The ${appName} app requires an active
+			cluster to run.`,
+            ctaText: 'Manage clusters',
+            ctaIcon: Settings,
+            disabledMessage: 'Contact your admin to unpause your cluster',
+        },
+        createClusters: {
+            title: `Create a cluster${appName ? ` to use ${appName}` : ''}`,
+            subtitle: `The ${appName} app requires a cluster to run.
+			Begin by creating your cluster.`,
+            ctaText: 'Create Cluster',
+            ctaIcon: Add,
+            disabledMessage: 'Contact your admin to create a cluster',
+        },
+    };
+    const variant = hasTrialExpired
+        ? variants.upgrade
+        : hasSleepingCluster
+            ? variants.manageClusters
+            : variants.createClusters;
+    return (_jsx(_Fragment, { children: _jsx(DefaultStyleWrapper, { children: _jsx(AppTeaserCards, { title: variant.title, subtitle: _jsx(_Fragment, { children: variant.subtitle }), subtext: '', cta: {
+                    action: onClickCta,
+                    text: variant.ctaText,
+                    renderIcon: variant.ctaIcon,
+                    disabled: hasTrialExpired ? !canUpgradePlan : !canCreateCluster,
+                    disabledMessage: variant.disabledMessage,
+                }, cards: appTeaserCardsConfig[app] }) }) }));
+};

package/lib/esm/src/components/c3-cluster-tag/c3-cluster-tag.d.ts

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+import type { C3ClusterTagProps, C3ClusterTagWithClusterNameProps, CamundaClusterStage } from './c3-cluster-tag.types';
+export type TagColor = 'green' | 'blue' | 'purple' | 'red' | 'cool-gray' | 'magenta' | 'cyan' | 'teal' | 'gray' | 'warm-gray' | 'high-contrast' | 'outline';
+export declare const C3ClusterTagWithClusterName: FC<C3ClusterTagWithClusterNameProps>;
+export declare const C3ClusterTag: FC<C3ClusterTagProps>;
+export declare function getColorForStage(stage: CamundaClusterStage): TagColor | undefined;

package/lib/esm/src/components/c3-cluster-tag/c3-cluster-tag.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, 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 { Tag } from '@carbon/react';
+import { useC3Profile } from '../c3-user-configuration/c3-profile-provider/c3-profile-provider.js';
+export const C3ClusterTagWithClusterName = (props) => {
+    const conditionalRendering = props.conditionalRendering || (() => true);
+    const { clusters } = useC3Profile();
+    let clustername;
+    if ('clusterName' in props) {
+        clustername = props.clusterName;
+    }
+    else if ('clusterUuid' in props) {
+        const foundCluster = clusters?.find((cluster) => cluster.uuid === props.clusterUuid);
+        clustername = foundCluster?.name;
+    }
+    let color;
+    let stage;
+    if ('stage' in props) {
+        stage = props.stage;
+    }
+    else if ('clusterUuid' in props) {
+        const foundCluster = clusters?.find((cluster) => cluster.uuid === props.clusterUuid);
+        if (foundCluster?.labels?.camunda &&
+            foundCluster?.labels?.camunda?.length > 0) {
+            stage = foundCluster.labels.camunda[0];
+        }
+    }
+    color = getColorForStage(stage);
+    if (!color) {
+        color = 'cool-gray';
+    }
+    let label;
+    if (clustername && stage) {
+        label = `${clustername} : ${stage}`;
+    }
+    else if (clustername) {
+        label = clustername;
+    }
+    else if (stage) {
+        label = stage;
+    }
+    if (label && conditionalRendering(stage)) {
+        return _jsx(Tag, { type: color, children: label });
+    }
+    else {
+        return _jsx(_Fragment, {});
+    }
+};
+export const C3ClusterTag = (props) => {
+    const { clusters } = useC3Profile();
+    return 'stage' in props ? (_jsx(Tag, { type: getColorForStage(props.stage), children: props.stage })) : 'clusterUuid' in props ? (generateFromInput({
+        clusterUuid: props.clusterUuid,
+        allClusters: clusters,
+        conditionalRendering: props.conditionalRendering || (() => true),
+    })) : (_jsx(_Fragment, {}));
+};
+function generateFromInput(props) {
+    const foundCluster = props.allClusters?.find((cluster) => cluster.uuid === props.clusterUuid);
+    if (foundCluster?.labels?.camunda &&
+        foundCluster?.labels?.camunda?.length > 0) {
+        const label = foundCluster.labels.camunda[0];
+        return getColorForStage(label) &&
+            props.conditionalRendering(label) ? (_jsx(Tag, { type: getColorForStage(label), children: label })) : (_jsx(_Fragment, {}));
+    }
+    return _jsx(_Fragment, {});
+}
+export function getColorForStage(stage) {
+    switch (stage) {
+        case 'dev':
+            return 'green';
+        case 'test':
+            return 'blue';
+        case 'stage':
+            return 'purple';
+        case 'prod':
+            return 'red';
+        default:
+            return undefined;
+    }
+}

package/lib/esm/src/components/c3-cluster-tag/c3-cluster-tag.test.d.ts

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

package/lib/esm/src/components/c3-cluster-tag/c3-cluster-tag.test.js

@@ -0,0 +1,13 @@
+/*
+ * 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 { expect, test } from '@playwright/test';
+import { getStory } from '../test-utils.js';
+test.describe('Cluster tag', () => {
+    test('Basic', async ({ page }) => {
+        await getStory(page, 'components-c3clustertag--basic');
+        await expect(page).toHaveScreenshot();
+    });
+});

package/lib/esm/src/components/c3-cluster-tag/c3-cluster-tag.types.d.ts

@@ -0,0 +1,26 @@
+export declare const StageClusterLabels: {
+    readonly dev: "dev";
+    readonly test: "test";
+    readonly stage: "stage";
+    readonly prod: "prod";
+};
+export type CamundaClusterStage = keyof typeof StageClusterLabels;
+export type CamundaClusterStageLabel = (typeof StageClusterLabels)[CamundaClusterStage];
+export type C3ClusterTagProps = ({
+    clusterUuid: string;
+} | {
+    stage: CamundaClusterStage;
+}) & {
+    conditionalRendering?: (stage: CamundaClusterStage) => boolean;
+};
+export type C3ClusterTagWithClusterNameProps = ({
+    clusterUuid: string;
+} | {
+    clusterName?: string;
+    stage: CamundaClusterStage;
+} | {
+    clusterName: string;
+    stage?: CamundaClusterStage;
+}) & {
+    conditionalRendering?: (stage: CamundaClusterStage) => boolean;
+};

package/lib/esm/src/components/c3-cluster-tag/c3-cluster-tag.types.js

@@ -0,0 +1,11 @@
+/*
+ * 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 const StageClusterLabels = {
+    dev: 'dev',
+    test: 'test',
+    stage: 'stage',
+    prod: 'prod',
+};

package/lib/esm/src/components/c3-data-table/c3-data-table.d.ts

@@ -0,0 +1,3 @@
+import { type JSX } from 'react';
+import type { C3DataTableProps, RowBaseProps } from './c3-data-table.types';
+export declare const C3DataTable: <T extends RowBaseProps>({ data, headers, options, toolbar: singleToolbar, toolbars, isLoading, title, description, actions, id, queryPrefix, }: C3DataTableProps<T>) => JSX.Element;