@camunda/camunda-composite-components 0.22.8 → 0.23.1

package/lib/esm/src/components/c3-navigation-v2/index.d.ts

@@ -0,0 +1,18 @@
+export type { CamundaApp } from '../../utils/camunda.types';
+export { C3BreadcrumbBar } from './c3-breadcrumb-bar';
+export { C3NavigationV2 } from './c3-navigation-v2';
+export type { AppProps, BreadcrumbAction, BreadcrumbDropdownItem, BreadcrumbSegment, C3NavigationV2Props, GlobalActionButton, LinkComponent, LinkProps, SidebarGroup, SidebarGroupItem, SidebarItem, SidebarNode, SidebarProps, SidebarSection, ToolDescriptor, } from './c3-navigation-v2.types';
+export { C3Sidebar } from './c3-sidebar';
+export { C3ToolsArea } from './c3-tools-area';
+export type { C3InfoPanelProps, InfoPanelElement } from './tools/c3-info-panel';
+export { C3InfoPanel } from './tools/c3-info-panel';
+export type { C3NotificationsPanelProps } from './tools/c3-notifications-panel';
+export { C3NotificationsPanel } from './tools/c3-notifications-panel';
+export type { C3UserPanelProps, UserPanelElement, } from './tools/c3-user-panel';
+export { C3UserPanel } from './tools/c3-user-panel';
+export type { BreadcrumbDescriptor, BreadcrumbDropdownItemDescriptor, GroupDescriptor, GroupItemDescriptor, ItemDescriptor, SectionDescriptor, SidebarNodeDescriptor, UseC3NavigationV2Options, UseC3NavigationV2Return, } from './use-c3-navigation-v2';
+export { useC3NavigationV2 } from './use-c3-navigation-v2';
+export type { HelpToolOptions, InfoToolOptions, NotificationsToolOptions, UseCamundaToolsOptions, UserToolOptions, } from './use-camunda-tools';
+export { useCamundaTools } from './use-camunda-tools';
+export type { UseClusterWebappBreadcrumbsOptions } from './use-cluster-webapp-breadcrumbs';
+export { useClusterWebappBreadcrumbs } from './use-cluster-webapp-breadcrumbs';

package/lib/esm/src/components/c3-navigation-v2/index.js

@@ -0,0 +1,15 @@
+/*
+ * 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 { C3BreadcrumbBar } from './c3-breadcrumb-bar.js';
+export { C3NavigationV2 } from './c3-navigation-v2.js';
+export { C3Sidebar } from './c3-sidebar.js';
+export { C3ToolsArea } from './c3-tools-area.js';
+export { C3InfoPanel } from './tools/c3-info-panel.js';
+export { C3NotificationsPanel } from './tools/c3-notifications-panel.js';
+export { C3UserPanel } from './tools/c3-user-panel.js';
+export { useC3NavigationV2 } from './use-c3-navigation-v2.js';
+export { useCamundaTools } from './use-camunda-tools.js';
+export { useClusterWebappBreadcrumbs } from './use-cluster-webapp-breadcrumbs.js';

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

@@ -0,0 +1,10 @@
+import type { AppProps, BreadcrumbSegment, C3NavigationV2Props, GlobalActionButton, SidebarGroupItem, SidebarItem, SidebarNode, SidebarSection } from '../c3-navigation-v2.types';
+export declare const createAppProps: (overrides?: Partial<AppProps>) => AppProps;
+export declare const createGlobalActions: () => GlobalActionButton[];
+export declare const createOrgBreadcrumb: (overrides?: Partial<BreadcrumbSegment>) => BreadcrumbSegment;
+export declare const createOrgSidebarItems: () => SidebarItem[];
+export declare const createWorkspaceSidebarItems: () => SidebarItem[];
+export declare const createClusterGroupItems: (expandedClusters?: string[], onToggle?: (clusterId: string) => void) => SidebarGroupItem[];
+export declare const createClusterSection: (expandedClusters?: string[], onToggle?: (clusterId: string) => void) => SidebarSection;
+export declare const createDefaultSidebarChildren: (expandedClusters?: string[], onToggle?: (clusterId: string) => void) => SidebarNode[];
+export declare const createDefaultProps: (overrides?: Partial<C3NavigationV2Props>) => C3NavigationV2Props;

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

@@ -0,0 +1,231 @@
+import { 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 { Tag } from '@carbon/react';
+import { Building, CloudApp, Dashboard, Folder, Help, IbmKnowledgeCatalog, Notification, Play, Search, Settings, Task, UserAvatar, UserMultiple, Workspace, } from '@carbon/react/icons/index.esm.js';
+export const createAppProps = (overrides) => ({
+    ariaLabel: 'Camunda Console',
+    linkProps: { href: '#' },
+    ...overrides,
+});
+export const createGlobalActions = () => [
+    {
+        key: 'search',
+        label: 'Search',
+        icon: Search,
+        onClick: () => console.log('Search clicked'),
+    },
+    {
+        key: 'notifications',
+        label: 'Notifications',
+        icon: Notification,
+        onClick: () => console.log('Notifications clicked'),
+    },
+    {
+        key: 'help',
+        label: 'Help & Tutorials',
+        icon: Help,
+        onClick: () => console.log('Help clicked'),
+    },
+    {
+        key: 'user',
+        label: 'User Profile',
+        icon: UserAvatar,
+        onClick: () => console.log('User clicked'),
+    },
+];
+export const createOrgBreadcrumb = (overrides) => ({
+    key: 'org',
+    label: 'Acme Corp',
+    icon: Building,
+    onClick: () => console.log('Navigate to org dashboard'),
+    dropdownTitle: 'Switch Organization',
+    dropdownItems: [
+        {
+            key: 'org-1',
+            label: 'Acme Corp',
+            icon: Building,
+            isSelected: true,
+            onClick: () => console.log('Switch to Acme Corp'),
+        },
+        {
+            key: 'org-2',
+            label: 'Beta Inc',
+            icon: Building,
+            isSelected: false,
+            onClick: () => console.log('Switch to Beta Inc'),
+        },
+        {
+            key: 'org-3',
+            label: 'Gamma LLC',
+            icon: Building,
+            isSelected: false,
+            onClick: () => console.log('Switch to Gamma LLC'),
+        },
+    ],
+    dropdownAriaLabel: 'Switch organization',
+    ...overrides,
+});
+export const createOrgSidebarItems = () => [
+    {
+        type: 'item',
+        key: 'dashboard',
+        label: 'Dashboard',
+        icon: Dashboard,
+        isActive: true,
+        onClick: () => console.log('Navigate to Dashboard'),
+    },
+    {
+        type: 'item',
+        key: 'workspaces',
+        label: 'Workspaces',
+        icon: Workspace,
+        onClick: () => console.log('Navigate to Workspaces'),
+    },
+    {
+        type: 'item',
+        key: 'clusters',
+        label: 'Clusters',
+        icon: CloudApp,
+        onClick: () => console.log('Navigate to Clusters'),
+    },
+    {
+        type: 'item',
+        key: 'catalog',
+        label: 'Catalog',
+        icon: IbmKnowledgeCatalog,
+        onClick: () => console.log('Navigate to Catalog'),
+    },
+    {
+        type: 'item',
+        key: 'members',
+        label: 'Members',
+        icon: UserMultiple,
+        onClick: () => console.log('Navigate to Members'),
+    },
+    {
+        type: 'item',
+        key: 'settings',
+        label: 'Settings',
+        icon: Settings,
+        onClick: () => console.log('Navigate to Settings'),
+    },
+];
+export const createWorkspaceSidebarItems = () => [
+    {
+        type: 'item',
+        key: 'projects',
+        label: 'Projects',
+        icon: Folder,
+        isActive: true,
+        onClick: () => console.log('Navigate to Projects'),
+    },
+    {
+        type: 'item',
+        key: 'catalog',
+        label: 'Catalog',
+        icon: IbmKnowledgeCatalog,
+        onClick: () => console.log('Navigate to Catalog'),
+    },
+    {
+        type: 'item',
+        key: 'settings',
+        label: 'Settings',
+        icon: Settings,
+        onClick: () => console.log('Navigate to Settings'),
+    },
+];
+export const createClusterGroupItems = (expandedClusters = ['cluster-1'], onToggle) => [
+    {
+        type: 'group-item',
+        key: 'cluster-1',
+        label: 'Cluster A',
+        icon: CloudApp,
+        onClick: () => console.log('Navigate to Cluster A'),
+        trailingElement: (_jsx(Tag, { type: 'gray', size: 'sm', style: { marginLeft: '0.375rem', flexShrink: 0 }, children: "Prod" })),
+        isExpanded: expandedClusters.includes('cluster-1'),
+        onToggleExpand: () => onToggle?.('cluster-1'),
+        children: [
+            {
+                type: 'item',
+                key: 'cluster-1-operate',
+                label: 'Operate',
+                icon: Play,
+                onClick: () => console.log('Navigate to Operate on Cluster A'),
+            },
+            {
+                type: 'item',
+                key: 'cluster-1-tasklist',
+                label: 'Tasklist',
+                icon: Task,
+                onClick: () => console.log('Navigate to Tasklist on Cluster A'),
+            },
+            {
+                type: 'item',
+                key: 'cluster-1-admin',
+                label: 'Admin',
+                icon: Settings,
+                onClick: () => console.log('Navigate to Admin on Cluster A'),
+            },
+        ],
+    },
+    {
+        type: 'group-item',
+        key: 'cluster-2',
+        label: 'Cluster B',
+        icon: CloudApp,
+        onClick: () => console.log('Navigate to Cluster B'),
+        trailingElement: (_jsx(Tag, { type: 'gray', size: 'sm', style: { marginLeft: '0.375rem', flexShrink: 0 }, children: "Stage" })),
+        isExpanded: expandedClusters.includes('cluster-2'),
+        onToggleExpand: () => onToggle?.('cluster-2'),
+        children: [
+            {
+                type: 'item',
+                key: 'cluster-2-operate',
+                label: 'Operate',
+                icon: Play,
+                onClick: () => console.log('Navigate to Operate on Cluster B'),
+            },
+            {
+                type: 'item',
+                key: 'cluster-2-tasklist',
+                label: 'Tasklist',
+                icon: Task,
+                onClick: () => console.log('Navigate to Tasklist on Cluster B'),
+            },
+            {
+                type: 'item',
+                key: 'cluster-2-admin',
+                label: 'Admin',
+                icon: Settings,
+                onClick: () => console.log('Navigate to Admin on Cluster B'),
+            },
+        ],
+    },
+];
+export const createClusterSection = (expandedClusters = ['cluster-1'], onToggle) => ({
+    type: 'section',
+    key: 'clusters-section',
+    title: 'Clusters',
+    children: createClusterGroupItems(expandedClusters, onToggle),
+});
+export const createDefaultSidebarChildren = (expandedClusters = ['cluster-1'], onToggle) => [
+    ...createOrgSidebarItems(),
+    createClusterSection(expandedClusters, onToggle),
+];
+export const createDefaultProps = (overrides) => ({
+    app: createAppProps(),
+    skipToContentTargetId: 'main-content',
+    breadcrumbs: [createOrgBreadcrumb()],
+    globalActions: createGlobalActions(),
+    sidebar: {
+        ariaLabel: 'Main sidebar navigation',
+        children: createDefaultSidebarChildren(),
+        isExpanded: true,
+        onToggleExpanded: () => console.log('Toggle sidebar'),
+    },
+    ...overrides,
+});

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

@@ -0,0 +1,11 @@
+import type { StoryFn } from '@storybook/react';
+import { type FC } from 'react';
+import { C3NavigationV2 } from '../c3-navigation-v2';
+export declare const DefaultTemplate: StoryFn<typeof C3NavigationV2>;
+export declare const HookDrivenTemplate: FC;
+export declare const ComplexTreeTemplate: FC;
+export declare const ToolPanelsTemplate: FC;
+export declare const BreadcrumbActionsTemplate: FC;
+export declare const ClusterWebappTemplate: FC;
+export declare const HeaderTrailingContentTemplate: FC;
+export declare const CompactSectionTemplate: FC;