@camunda/camunda-composite-components 0.0.34-rc1 → 0.0.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- import { Stage } from "./endpoints.const";
1
+ import { Endpoints, Stage } from "./endpoints.const";
2
2
  export declare class HttpError extends Error {
3
3
  status: number;
4
4
  constructor(message: string, status: number);
@@ -6,6 +6,7 @@ export declare class HttpError extends Error {
6
6
  export interface RequestPayload {
7
7
  base?: "notifications";
8
8
  stage?: Stage;
9
+ endpoints?: Endpoints;
9
10
  url: string;
10
11
  method: "get" | "post" | "put" | "delete" | "patch";
11
12
  headers?: {
@@ -31,10 +31,15 @@ export async function request(payload) {
31
31
  }
32
32
  const body = payload.body ? JSON.stringify(payload.body) : undefined;
33
33
  let base;
34
- if (payload.base && payload.stage) {
34
+ if (payload.base) {
35
35
  switch (payload.base) {
36
36
  case "notifications":
37
- base = getEndpoint(payload.stage, NOTIFICATIONS);
37
+ if (payload.endpoints?.notifications) {
38
+ base = payload.endpoints.notifications;
39
+ }
40
+ else if (payload.stage) {
41
+ base = getEndpoint(payload.stage, NOTIFICATIONS);
42
+ }
38
43
  break;
39
44
  }
40
45
  }
@@ -4,6 +4,14 @@ export interface Endpoint {
4
4
  int: string;
5
5
  prod: string;
6
6
  }
7
+ export interface Endpoints {
8
+ notifications?: string;
9
+ }
7
10
  export declare const NOTIFICATIONS: Endpoint;
8
11
  export declare type Stage = "dev" | "int" | "prod";
9
12
  export declare function getEndpoint(stage: Stage, endpoint: Endpoint): string;
13
+ export declare function getEndpointByOptions(options: {
14
+ stage?: Stage;
15
+ endpoints?: Endpoints;
16
+ endpoint: Endpoint;
17
+ }): string;
@@ -16,3 +16,15 @@ export function getEndpoint(stage, endpoint) {
16
16
  throw new Error(`Unknown stage: ${stage}`);
17
17
  }
18
18
  }
19
+ export function getEndpointByOptions(options) {
20
+ switch (options.endpoint.id) {
21
+ case "notifications":
22
+ if (options.endpoints?.notifications) {
23
+ return options.endpoints.notifications;
24
+ }
25
+ else if (options.stage) {
26
+ return getEndpoint(options.stage, options.endpoint);
27
+ }
28
+ }
29
+ throw new Error(`Missing stage or notifications endpoint`);
30
+ }
@@ -1,6 +1,6 @@
1
1
  import { EventSourcePolyfill } from "event-source-polyfill";
2
2
  import { request } from "./api";
3
- import { getEndpoint, NOTIFICATIONS } from "./endpoints.const";
3
+ import { getEndpointByOptions, NOTIFICATIONS } from "./endpoints.const";
4
4
  export class NotificationService {
5
5
  static async getNotifications(options) {
6
6
  let notifications = [];
@@ -9,6 +9,7 @@ export class NotificationService {
9
9
  method: "get",
10
10
  base: "notifications",
11
11
  stage: options.stage,
12
+ endpoints: options.endpoints,
12
13
  camundaAuth: {
13
14
  token: options.userToken,
14
15
  refreshTokenMethod: options.getNewUserToken,
@@ -27,6 +28,7 @@ export class NotificationService {
27
28
  method: "post",
28
29
  base: "notifications",
29
30
  stage: options.stage,
31
+ endpoints: options.endpoints,
30
32
  camundaAuth: {
31
33
  token: options.userToken,
32
34
  refreshTokenMethod: options.getNewUserToken,
@@ -49,6 +51,7 @@ export class NotificationService {
49
51
  method: "patch",
50
52
  base: "notifications",
51
53
  stage: options.stage,
54
+ endpoints: options.endpoints,
52
55
  camundaAuth: {
53
56
  token: options.userToken,
54
57
  refreshTokenMethod: options.getNewUserToken,
@@ -70,6 +73,7 @@ export class NotificationService {
70
73
  method: "patch",
71
74
  base: "notifications",
72
75
  stage: options.stage,
76
+ endpoints: options.endpoints,
73
77
  camundaAuth: {
74
78
  token: options.userToken,
75
79
  refreshTokenMethod: options.getNewUserToken,
@@ -87,7 +91,11 @@ export class NotificationService {
87
91
  });
88
92
  }
89
93
  static notificationsStream(options, handler) {
90
- const source = new EventSourcePolyfill(`${getEndpoint(options.stage, NOTIFICATIONS)}/notifications/events`, {
94
+ const baseUrl = getEndpointByOptions({
95
+ ...options,
96
+ endpoint: NOTIFICATIONS,
97
+ });
98
+ const source = new EventSourcePolyfill(`${baseUrl}/notifications/events`, {
91
99
  headers: {
92
100
  authorization: `Bearer ${options.userToken}`,
93
101
  },
@@ -1,4 +1,4 @@
1
- import { Button } from "@carbon/react";
1
+ import { Button, useTheme } from "@carbon/react";
2
2
  import { Notification as NotificationIcon } from "@carbon/react/icons";
3
3
  import React, { useContext, useEffect, useState } from "react";
4
4
  import styled from "styled-components";
@@ -41,6 +41,7 @@ const EmptyStateDescription = styled(NotificationDescription) `
41
41
  margin-top: 8px;
42
42
  `;
43
43
  export const C3NotificationSidebar = ({ sideBar }) => {
44
+ const { theme } = useTheme();
44
45
  const { isOpen, onLinkClick } = sideBar;
45
46
  const [isSidebarOpen, setIsSidebarOpen] = useState(isOpen);
46
47
  const { notifications, markAsRead, dismiss, markAllAsRead, dismissAll, analytics, enabled, } = useContext(C3NotificationContext);
@@ -85,7 +86,7 @@ export const C3NotificationSidebar = ({ sideBar }) => {
85
86
  ariaLabel: sideBar.ariaLabel || "Notification Sidebar",
86
87
  isOpen: isSidebarOpen,
87
88
  setIsOpen,
88
- }, icon: hasUnreadNotifications ? (React.createElement(C3NotificationsUnreadIcon, { size: 20 })) : (React.createElement(NotificationIcon, { size: 20, label: "Notifications" })) },
89
+ }, icon: hasUnreadNotifications ? (React.createElement(C3NotificationsUnreadIcon, { size: 20, theme: theme })) : (React.createElement(NotificationIcon, { size: 20, label: "Notifications" })) },
89
90
  React.createElement(PanelHeader, null,
90
91
  React.createElement(PanelTitle, null, "Notifications"),
91
92
  notifications.length > 0 && (
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import { Tag } from "@carbon/react";
3
- import { Stage } from "../../api/endpoints.const";
3
+ import { Endpoints, Stage } from "../../api/endpoints.const";
4
4
  import { C3NavigationAppBarProps, C3NavigationInfoSideBarProps, C3NavigationNotificationsSideBarProps, C3NavigationOrgSideBarProps, C3NavigationUserSideBarProps } from "./c3-navigation-sidebar/c3-navigation-sidebar.types";
5
5
  export interface C3NavigationAppProps {
6
6
  prefix: string;
@@ -41,7 +41,8 @@ export interface C3NavigationNavBarProps {
41
41
  orgName?: string;
42
42
  }
43
43
  export interface C3NotificationsProps {
44
- stage: Stage;
44
+ stage?: Stage;
45
+ endpoints?: Endpoints;
45
46
  activeOrganizationId: string;
46
47
  userToken: string;
47
48
  getNewUserToken: () => Promise<string>;
@@ -1,11 +1,17 @@
1
1
  import React, { FC, ReactNode } from "react";
2
- import { Stage } from "../../api/endpoints.const";
3
- export declare type C3UserConfiguration = {
4
- stage: Stage;
2
+ import { Endpoints, Stage } from "../../api/endpoints.const";
3
+ declare type C3UserConfigurationBase = {
5
4
  activeOrganizationId: string;
6
5
  userToken: string;
7
6
  getNewUserToken: () => Promise<string>;
8
7
  };
8
+ declare type C3UserConfigurationWithEndpoints = C3UserConfigurationBase & {
9
+ endpoints: Endpoints;
10
+ };
11
+ declare type C3UserConfigurationWithStage = C3UserConfigurationBase & {
12
+ stage: Stage;
13
+ };
14
+ export declare type C3UserConfiguration = C3UserConfigurationWithEndpoints | C3UserConfigurationWithStage;
9
15
  export declare const C3UserConfigurationContext: React.Context<C3UserConfiguration | null>;
10
16
  declare const C3UserConfigurationProvider: FC<C3UserConfiguration & {
11
17
  children?: ReactNode;
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
2
  import { C3IconProps } from "./c3-icons.types";
3
3
  export declare const C3AppMenuIcon: ({ size }: C3IconProps) => JSX.Element;
4
- export declare const C3NotificationsUnreadIcon: ({ size }: C3IconProps) => JSX.Element;
4
+ export declare const C3NotificationsUnreadIcon: ({ size, theme, }: C3IconProps) => JSX.Element;
5
5
  export declare const C3BellIcon: ({ size }: C3IconProps) => JSX.Element;
@@ -2,8 +2,8 @@ import React from "react";
2
2
  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" },
3
3
  React.createElement("path", { fill: "transparent", style: { mixBlendMode: "multiply" }, d: "M0 0h20v20H0z" }),
4
4
  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" })));
5
- export const C3NotificationsUnreadIcon = ({ size }) => (React.createElement("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, fill: "transparent", xmlns: "http://www.w3.org/2000/svg" },
6
- React.createElement("path", { style: { fill: "var(--cds-interactive)" }, d: "M15.25 7.5C16.6307 7.5 17.75 6.38071 17.75 5C17.75 3.61929 16.6307 2.5 15.25 2.5C13.8693 2.5 12.75 3.61929 12.75 5C12.75 6.38071 13.8693 7.5 15.25 7.5Z" }),
7
- React.createElement("path", { fill: "$icon-primary", d: "M15.25 10.3662V8.75H14V10.625C14 10.7907 14.0659 10.9497 14.1831 11.0669L15.875 12.7588V13.75H2.125V12.7588L3.81687 11.0669C3.93409 10.9497 3.99996 10.7907 4 10.625V8.125C3.99839 7.2468 4.22853 6.38373 4.66719 5.62293C5.10585 4.86213 5.73749 4.23055 6.49832 3.79196C7.25916 3.35337 8.12225 3.1233 9.00045 3.12498C9.87865 3.12667 10.7409 3.36005 11.5 3.80156V2.40419C10.9051 2.14078 10.2723 1.97291 9.625 1.90675V0.625H8.375V1.90675C6.83417 2.06352 5.4062 2.78605 4.36721 3.93462C3.32822 5.08319 2.75201 6.57622 2.75 8.125V10.3662L1.05812 12.0581C0.940907 12.1753 0.875035 12.3343 0.875 12.5V14.375C0.875 14.5408 0.940848 14.6997 1.05806 14.8169C1.17527 14.9342 1.33424 15 1.5 15H5.875V15.625C5.875 16.4538 6.20424 17.2487 6.79029 17.8347C7.37634 18.4208 8.1712 18.75 9 18.75C9.8288 18.75 10.6237 18.4208 11.2097 17.8347C11.7958 17.2487 12.125 16.4538 12.125 15.625V15H16.5C16.6658 15 16.8247 14.9342 16.9419 14.8169C17.0592 14.6997 17.125 14.5408 17.125 14.375V12.5C17.125 12.3343 17.0591 12.1753 16.9419 12.0581L15.25 10.3662ZM10.875 15.625C10.875 16.1223 10.6775 16.5992 10.3258 16.9508C9.9742 17.3025 9.49728 17.5 9 17.5C8.50272 17.5 8.0258 17.3025 7.67417 16.9508C7.32254 16.5992 7.125 16.1223 7.125 15.625V15H10.875V15.625Z", id: "unread-dot" })));
5
+ export const C3NotificationsUnreadIcon = ({ size, theme = "g10", }) => (React.createElement("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
6
+ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.625.857V.625h-1.25v1.282A6.258 6.258 0 0 0 3.75 8.125v2.241l-1.692 1.692a.625.625 0 0 0-.183.442v1.875A.625.625 0 0 0 2.5 15h4.375v.486a3.22 3.22 0 0 0 2.813 3.249 3.129 3.129 0 0 0 3.437-3.11V15H17.5a.624.624 0 0 0 .625-.625V12.5a.625.625 0 0 0-.183-.442l-.939-.939a6.174 6.174 0 0 1-1.46.308l1.332 1.332v.991H3.125v-.991l1.692-1.692A.625.625 0 0 0 5 10.625v-2.5a5 5 0 0 1 4.148-4.927A6.202 6.202 0 0 1 10.625.857Zm5.625 9.235V8.125a6.258 6.258 0 0 0-5.044-6.131 5.003 5.003 0 0 0-.743 1.152A5 5 0 0 1 15 8.125v2.125c.432 0 .85-.055 1.25-.158Zm-4.924 6.859c.351-.352.549-.829.549-1.326V15h-3.75v.625a1.875 1.875 0 0 0 3.2 1.326Z", fill: "$icon-primary" }),
7
+ React.createElement("path", { d: "M15 10.25a5 5 0 1 0 0-10 5 5 0 0 0 0 10Z", fill: theme === "g10" ? "#0F62FE" : "#78A9FF" })));
8
8
  export const C3BellIcon = ({ size }) => (React.createElement("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, fill: "transparent", xmlns: "http://www.w3.org/2000/svg" },
9
9
  React.createElement("path", { d: "M50.2373 33.7627L45.5 29.0253V22.75C45.4944 18.4134 43.881 14.2329 40.9718 11.0169C38.0626 7.80093 34.0643 5.77786 29.75 5.3389V1.75H26.25V5.3389C21.9357 5.77786 17.9374 7.80093 15.0282 11.0169C12.119 14.2329 10.5056 18.4134 10.5 22.75V29.0253L5.76275 33.7627C5.60018 33.9252 5.47122 34.118 5.38324 34.3303C5.29526 34.5426 5.24998 34.7702 5.25 35V40.25C5.25 40.7141 5.43437 41.1592 5.76256 41.4874C6.09075 41.8156 6.53587 42 7 42H19.25V43.75C19.25 46.0706 20.1719 48.2962 21.8128 49.9372C23.4538 51.5781 25.6794 52.5 28 52.5C30.3206 52.5 32.5462 51.5781 34.1872 49.9372C35.8281 48.2962 36.75 46.0706 36.75 43.75V42H49C49.4641 42 49.9092 41.8156 50.2374 41.4874C50.5656 41.1592 50.75 40.7141 50.75 40.25V35C50.75 34.7702 50.7047 34.5426 50.6168 34.3303C50.5288 34.118 50.3998 33.9252 50.2373 33.7627ZM33.25 43.75C33.25 45.1424 32.6969 46.4777 31.7123 47.4623C30.7277 48.4469 29.3924 49 28 49C26.6076 49 25.2723 48.4469 24.2877 47.4623C23.3031 46.4777 22.75 45.1424 22.75 43.75V42H33.25V43.75Z", fill: "#FF8201" })));
@@ -1,3 +1,4 @@
1
1
  export interface C3IconProps {
2
2
  size: number;
3
+ theme?: string;
3
4
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@camunda/camunda-composite-components",
3
- "version": "0.0.34-rc1",
3
+ "version": "0.0.34",
4
4
  "scripts": {
5
5
  "clean": "rimraf lib/",
6
6
  "copy-css-files": "copyfiles -u 1 src/components/**/*.css lib/esm",