@vanillabp/bc-shared 0.0.3

package/dist/components/DefaultListHeader.js

@@ -0,0 +1,110 @@
+import "../chunk-YH4NJHER.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, CheckBox, Text, Tip } from "grommet";
+import { Ascend, ContactInfo, Descend, Unsorted } from "grommet-icons";
+const DefaultListHeader = ({
+  column,
+  currentLanguage,
+  sort,
+  sortAscending,
+  setSort,
+  setSortAscending,
+  allSelected,
+  selectAll
+}) => {
+  if (column.path === "id") {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        fill: true,
+        pad: "xsmall",
+        align: "center",
+        children: /* @__PURE__ */ jsx(
+          CheckBox,
+          {
+            checked: allSelected,
+            onChange: (event) => selectAll(event.currentTarget.checked)
+          }
+        )
+      }
+    );
+  }
+  if (column.path === "candidateUsers") {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        pad: "xsmall",
+        fill: true,
+        align: "center",
+        children: /* @__PURE__ */ jsx(
+          Tip,
+          {
+            content: column.title[currentLanguage] || column.title["en"],
+            children: /* @__PURE__ */ jsx(ContactInfo, {})
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      fill: true,
+      direction: "row",
+      justify: "between",
+      pad: "xsmall",
+      children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            truncate: "tip",
+            children: column.title[currentLanguage] || column.title["en"]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            align: "center",
+            direction: "row",
+            justify: "end",
+            style: { maxHeight: "1.5rem", minWidth: "2rem" },
+            children: !column.sortable ? void 0 : !Boolean(sort) ? /* @__PURE__ */ jsx(
+              Box,
+              {
+                overflow: "hidden",
+                focusIndicator: false,
+                width: "1.6rem",
+                onClick: (event) => setSort(column),
+                children: /* @__PURE__ */ jsx(
+                  Unsorted,
+                  {
+                    size: "32rem"
+                  }
+                )
+              }
+            ) : sortAscending ? /* @__PURE__ */ jsx(
+              Box,
+              {
+                focusIndicator: false,
+                onClick: (event) => setSortAscending(false),
+                pad: { right: "0.5rem" },
+                children: /* @__PURE__ */ jsx(Ascend, { size: "16rem" })
+              }
+            ) : /* @__PURE__ */ jsx(
+              Box,
+              {
+                focusIndicator: false,
+                onClick: (event) => setSort(void 0),
+                pad: { right: "0.5rem" },
+                children: /* @__PURE__ */ jsx(Descend, { size: "16rem" })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  DefaultListHeader
+};

package/dist/components/Link.d.ts

@@ -0,0 +1,10 @@
+import { TextProps } from 'grommet';
+import { PropsWithChildren } from 'react';
+
+interface LinkProps extends PropsWithChildren<TextProps> {
+    href?: string;
+    target?: string;
+}
+declare const Link: ({ ...props }: LinkProps) => JSX.Element;
+
+export { Link };

package/dist/components/Link.js

@@ -0,0 +1,34 @@
+import {
+  __objRest,
+  __spreadValues
+} from "../chunk-YH4NJHER.js";
+import { jsx } from "react/jsx-runtime";
+import { Text } from "grommet";
+import styled from "styled-components";
+;
+const StyledLink = styled(Text)`
+  text-decoration: none;
+  color: ${(props) => props.theme.global.colors["accent-3"]};
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+    color: black;
+  }
+
+  &:visited {
+    color: ${(props) => props.theme.global.colors["accent-3"]};
+  }
+`;
+const Link = (_a) => {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx(
+    StyledLink,
+    __spreadValues({
+      as: "a"
+    }, props)
+  );
+};
+export {
+  Link
+};

package/dist/components/LoadingIndicator.d.ts

@@ -0,0 +1,4 @@
+declare type ShowLoadingIndicatorFunction = (show: boolean) => void;
+declare const LoadingIndicator: () => JSX.Element;
+
+export { LoadingIndicator, ShowLoadingIndicatorFunction };

package/dist/components/LoadingIndicator.js

@@ -0,0 +1,48 @@
+import "../chunk-YH4NJHER.js";
+import { jsx } from "react/jsx-runtime";
+import { Box, Layer, Spinner } from "grommet";
+import styled from "styled-components";
+const NoFocusIndicatorLayer = styled(Layer)`
+  a:focus {
+    outline: none;
+  }
+`;
+const LoadingIndicator = () => /* @__PURE__ */ jsx(
+  NoFocusIndicatorLayer,
+  {
+    plain: true,
+    animate: false,
+    background: { color: "rgba(0, 0, 0, 0)" },
+    responsive: false,
+    modal: true,
+    children: /* @__PURE__ */ jsx(
+      Box,
+      {
+        round: "medium",
+        background: { color: "rgba(0, 0, 0, 0.3)" },
+        children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            animation: "rotateRight",
+            pad: "medium",
+            children: /* @__PURE__ */ jsx(
+              Spinner,
+              {
+                size: "medium",
+                border: [
+                  { side: "all", color: "rgba(0, 0, 0, 0)", size: "medium" },
+                  { side: "right", color: "white", size: "medium" },
+                  { side: "top", color: "white", size: "medium" },
+                  { side: "left", color: "white", size: "medium" }
+                ]
+              }
+            )
+          }
+        )
+      }
+    )
+  }
+);
+export {
+  LoadingIndicator
+};

package/dist/components/ModalDialog.d.ts

@@ -0,0 +1,16 @@
+import { PropsWithChildren } from 'react';
+import { BoxProps } from 'grommet';
+import { TFunction } from 'i18next';
+
+interface ModalProperties extends BoxProps {
+    show: boolean;
+    header?: string | JSX.Element;
+    abort?: () => void;
+    action?: () => void;
+    t: TFunction;
+    actionLabel?: string;
+    abortLabel?: string;
+}
+declare const Modal: ({ show, header, abort, abortLabel, action, actionLabel, t, children, ...props }: PropsWithChildren<ModalProperties>) => JSX.Element;
+
+export { Modal };

package/dist/components/ModalDialog.js

@@ -0,0 +1,108 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-YH4NJHER.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Box, Button, Heading, Layer } from "grommet";
+;
+const Modal = (_a) => {
+  var _b = _a, {
+    show,
+    header,
+    abort,
+    abortLabel = "abort",
+    action,
+    actionLabel,
+    t,
+    children
+  } = _b, props = __objRest(_b, [
+    "show",
+    "header",
+    "abort",
+    "abortLabel",
+    "action",
+    "actionLabel",
+    "t",
+    "children"
+  ]);
+  if (!show)
+    return /* @__PURE__ */ jsx(Fragment, {});
+  return /* @__PURE__ */ jsx(
+    Layer,
+    {
+      full: true,
+      animation: "fadeIn",
+      background: { color: "dark-1", opacity: true },
+      onEsc: abort,
+      responsive: true,
+      modal: true,
+      children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          height: "100%",
+          justify: "center",
+          direction: "column",
+          children: /* @__PURE__ */ jsx(
+            Box,
+            {
+              justify: "center",
+              direction: "row",
+              pad: "medium",
+              children: /* @__PURE__ */ jsx(
+                Box,
+                __spreadProps(__spreadValues({
+                  pad: "large",
+                  background: "white"
+                }, props), {
+                  children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                    header === void 0 ? void 0 : typeof header === "string" ? /* @__PURE__ */ jsx(
+                      Heading,
+                      {
+                        margin: { vertical: "xsmall" },
+                        level: "2",
+                        children: t(header)
+                      }
+                    ) : header,
+                    children,
+                    action || abort ? /* @__PURE__ */ jsxs(
+                      Box,
+                      {
+                        direction: "row",
+                        gap: "small",
+                        margin: { bottom: "medium" },
+                        align: "center",
+                        justify: "around",
+                        children: [
+                          action && actionLabel ? /* @__PURE__ */ jsx(
+                            Button,
+                            {
+                              label: t(actionLabel),
+                              onClick: action,
+                              primary: true
+                            }
+                          ) : void 0,
+                          abort ? /* @__PURE__ */ jsx(
+                            Button,
+                            {
+                              label: t(abortLabel),
+                              onClick: abort,
+                              secondary: true
+                            }
+                          ) : void 0
+                        ]
+                      }
+                    ) : /* @__PURE__ */ jsx(Fragment, {})
+                  ] })
+                })
+              )
+            }
+          )
+        }
+      )
+    }
+  );
+};
+export {
+  Modal
+};

package/dist/components/SseProvider.d.ts

@@ -0,0 +1,46 @@
+import { FetchEventSourceInit } from '@microsoft/fetch-event-source';
+import React, { Context } from 'react';
+
+declare type SseURL = string;
+declare type SseConnectionID = string;
+interface EventMessage<T> {
+    source: string;
+    timestamp: number;
+    event: T;
+}
+interface EventSourceMessage<T> {
+    id: string;
+    event: string;
+    data: T;
+    retry?: number;
+}
+/**
+ * If SSE connection is lost (e.g. due to unreliable mobile network)
+ * then reconnect is retried every 15 seconds. In case of having
+ * a successful REST-call during that period, an SSE potentially
+ * caused by this REST-call would be lost. To avoid this situation
+ * the wakeup-callback can be used by REST-clients to trigger
+ * SSE reconnect immediately instead of waiting to the end of the
+ * 15 seconds period. If network is available the SSE connection
+ * will be established before doing the REST-call and therefore
+ * any potentially triggered SSE can be received and processed.
+ */
+declare type WakeupSseCallback = (() => void) | undefined;
+declare type OnMessageFunction<T> = (ev: EventSourceMessage<T>) => void;
+declare type GuiSseHook = <T>(onMessage: OnMessageFunction<T>, messageName?: string | RegExp) => WakeupSseCallback;
+declare type GetConnectionFunction = (onMessage: OnMessageFunction<any>, messageName?: string | RegExp) => SseConnectionID;
+declare type ReleaseConnectionFunction = (connectionId: SseConnectionID) => void;
+declare type SseContextInterface = {
+    wakeupSseCallback: WakeupSseCallback;
+    getConnection: GetConnectionFunction;
+    releaseConnection: ReleaseConnectionFunction;
+};
+interface SseProviderProps extends Omit<FetchEventSourceInit, 'fetch'> {
+    Context: Context<SseContextInterface>;
+    buildFetchApi: () => WindowOrWorkerGlobalScope['fetch'];
+    url: SseURL;
+}
+declare const SseProvider: ({ url, Context, buildFetchApi, children, ...rest }: React.PropsWithChildren<SseProviderProps>) => JSX.Element;
+declare const useSse: <T>(Context: React.Context<SseContextInterface>, onMessage: OnMessageFunction<T>, messageName?: string | RegExp) => WakeupSseCallback;
+
+export { EventMessage, EventSourceMessage, GuiSseHook, OnMessageFunction, SseContextInterface, SseProvider, WakeupSseCallback, useSse };

package/dist/components/SseProvider.js

@@ -0,0 +1,134 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-YH4NJHER.js";
+import { jsx } from "react/jsx-runtime";
+import {
+  fetchEventSource
+} from "@microsoft/fetch-event-source";
+import { useContext, useEffect, useRef } from "react";
+;
+const onmessage = (ev, connections) => {
+  Object.keys(connections).map((connectionId) => connections[connectionId]).filter((onMessageSignature) => onMessageSignature === void 0 ? false : typeof onMessageSignature.messageName === "string" ? onMessageSignature.messageName === ev.event : onMessageSignature.messageName instanceof RegExp ? onMessageSignature.messageName.test(ev.event) : true).forEach((onMessageSignature) => {
+    try {
+      onMessageSignature.onMessage(
+        __spreadProps(__spreadValues({}, ev), {
+          data: parseJSONData(ev.data)
+        })
+      );
+    } catch (e) {
+      console.error("Error on processing event", ev, e);
+    }
+  });
+};
+const parseJSONData = (data) => {
+  if (!Boolean(data)) {
+    return void 0;
+  }
+  return JSON.parse(data);
+};
+const SseProvider = (_a) => {
+  var _b = _a, { url, Context: Context2, buildFetchApi, children } = _b, rest = __objRest(_b, ["url", "Context", "buildFetchApi", "children"]);
+  const connections = useRef({});
+  const abortController = useRef(void 0);
+  const closeConnectionTimer = useRef(void 0);
+  const retryConnectTimer = useRef(void 0);
+  const lastConnectionId = useRef(0);
+  const releaseConnection = (connectionId) => {
+    delete connections.current[connectionId];
+    if (Object.keys(connections.current).length === 0) {
+      if (closeConnectionTimer.current !== void 0) {
+        window.clearTimeout(closeConnectionTimer.current);
+      }
+      closeConnectionTimer.current = window.setTimeout(() => {
+        var _a2;
+        (_a2 = abortController.current) == null ? void 0 : _a2.abort();
+        abortController.current = void 0;
+        closeConnectionTimer.current = void 0;
+      }, 5e3);
+    }
+  };
+  const buildEventSource = () => {
+    abortController.current = new AbortController();
+    fetchEventSource(
+      url,
+      __spreadValues({
+        // since we use locking fetch-api the server has to sent an
+        // ping-message immediatelly, to make the client release the lock
+        fetch: buildFetchApi(),
+        headers: {
+          "cache-control": "no-cache"
+        },
+        signal: abortController.current.signal,
+        onmessage: (ev) => onmessage(ev, connections.current),
+        openWhenHidden: true,
+        onclose: () => {
+          throw new Error();
+        },
+        onerror: (error) => {
+          throw new Error("retry", { cause: error });
+        }
+      }, rest)
+    ).catch((reason) => {
+      if (reason.message === "retry") {
+        console.warn("Lost server connection, will rety in 15 seconds", reason.cause);
+        retryConnectTimer.current = window.setTimeout(buildEventSource, 15e3);
+        return;
+      }
+      console.log("Lost server connection reason and won't retry", reason);
+    });
+  };
+  const getConnection = (onMessage, messageName) => {
+    if (closeConnectionTimer.current !== void 0) {
+      window.clearTimeout(closeConnectionTimer.current);
+      closeConnectionTimer.current = void 0;
+    }
+    if (abortController.current === void 0) {
+      buildEventSource();
+    }
+    const connectionId = lastConnectionId.current.toString();
+    ++lastConnectionId.current;
+    connections.current = __spreadProps(__spreadValues({}, connections.current), {
+      [connectionId]: {
+        onMessage,
+        messageName
+      }
+    });
+    return connectionId;
+  };
+  const wakeupSseCallback = () => {
+    if (retryConnectTimer.current === void 0) {
+      return;
+    }
+    window.clearTimeout(retryConnectTimer.current);
+    retryConnectTimer.current = void 0;
+    buildEventSource();
+  };
+  return /* @__PURE__ */ jsx(
+    Context2.Provider,
+    {
+      value: {
+        wakeupSseCallback,
+        getConnection,
+        releaseConnection
+      },
+      children
+    }
+  );
+};
+const useSse = (Context2, onMessage, messageName) => {
+  const sseContext = useContext(Context2);
+  useEffect(
+    () => {
+      const connectionId = sseContext.getConnection(onMessage, messageName);
+      return () => sseContext.releaseConnection(connectionId);
+    },
+    [sseContext, onMessage, messageName]
+  );
+  return sseContext.wakeupSseCallback;
+};
+export {
+  SseProvider,
+  useSse
+};

package/dist/components/Toast.d.ts

@@ -0,0 +1,22 @@
+import { StatusType } from 'grommet';
+import { Dispatch } from 'react';
+
+declare type Toast = {
+    namespace: string;
+    title: string | undefined | null;
+    message: string;
+    status?: StatusType;
+    timeout?: number;
+};
+declare type ToastAction = {
+    type: 'toast';
+    toast: Toast | undefined;
+};
+declare type ToastFunction = (toast: Toast) => void;
+interface MessageToastProps {
+    dispatch: Dispatch<ToastAction>;
+    msg: Toast;
+}
+declare const MessageToast: ({ dispatch, msg }: MessageToastProps) => JSX.Element;
+
+export { MessageToast, Toast, ToastAction, ToastFunction };

package/dist/components/Toast.js

@@ -0,0 +1,30 @@
+import "../chunk-YH4NJHER.js";
+import { jsx } from "react/jsx-runtime";
+import { Notification } from "grommet";
+import { useCallback, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+;
+const MessageToast = ({ dispatch, msg }) => {
+  const { t, i18n } = useTranslation(msg.namespace);
+  const close = useCallback(() => dispatch({ type: "toast", toast: void 0 }), [dispatch]);
+  useEffect(() => {
+    let timeout = msg.timeout !== void 0 ? msg.timeout : msg.message.length * 50;
+    if (timeout < 3e3)
+      timeout = 3e3;
+    const timer = window.setTimeout(close, timeout);
+    return () => window.clearTimeout(timer);
+  }, [msg, close]);
+  return /* @__PURE__ */ jsx(
+    Notification,
+    {
+      toast: { autoClose: false },
+      title: msg.title ? t(msg.title) : void 0,
+      message: t(msg.message),
+      status: msg.status ? msg.status : "unknown",
+      onClose: close
+    }
+  );
+};
+export {
+  MessageToast
+};

package/dist/components/UserTaskAppLayout.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren, ReactNode } from 'react';
+
+interface FrameProps {
+    header?: ReactNode | undefined;
+    footer?: ReactNode | undefined;
+}
+declare const UserTaskAppLayout: ({ header, footer, children }: PropsWithChildren<FrameProps>) => JSX.Element;
+
+export { UserTaskAppLayout };

package/dist/components/UserTaskAppLayout.js

@@ -0,0 +1,47 @@
+import "../chunk-YH4NJHER.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box } from "grommet";
+;
+const UserTaskAppLayout = ({
+  header,
+  footer,
+  children
+}) => {
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      direction: "column",
+      fill: true,
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            flex: "grow",
+            background: "light-4",
+            fill: "horizontal",
+            children: header
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            fill: true,
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            flex: "grow",
+            background: "light-4",
+            fill: "horizontal",
+            children: footer
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  UserTaskAppLayout
+};

package/dist/components/WarningListCell.d.ts

@@ -0,0 +1,6 @@
+declare const WarningListCell: ({ message, error, }: {
+    message: string;
+    error?: boolean | undefined;
+}) => JSX.Element;
+
+export { WarningListCell };

package/dist/components/WarningListCell.js

@@ -0,0 +1,39 @@
+import "../chunk-YH4NJHER.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, Text } from "grommet";
+import { Alert, StatusCritical } from "grommet-icons";
+import { useResponsiveScreen } from "../utils/index.js";
+const WarningListCell = ({
+  message,
+  error = false
+}) => {
+  const { isNotPhone } = useResponsiveScreen();
+  const Icon = error ? StatusCritical : Alert;
+  const color = error ? "status-critical" : "status-warning";
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      fill: true,
+      align: "center",
+      direction: "row",
+      background: { color, opacity: "medium" },
+      justify: "start",
+      pad: "xxsmall",
+      gap: "xsmall",
+      children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            color,
+            size: "15rem",
+            a11yTitle: message
+          }
+        ),
+        isNotPhone ? /* @__PURE__ */ jsx(Text, { truncate: "tip", children: message }) : void 0
+      ]
+    }
+  );
+};
+export {
+  WarningListCell
+};