@vanillabp/bc-ui 0.0.3

package/dist/components/NoElementGivenByModule.d.ts

@@ -0,0 +1,10 @@
+import { ShowLoadingIndicatorFunction, TranslationFunction } from '@vanillabp/bc-shared';
+
+declare const NoElementGivenByModule: ({ loading, retry, showLoadingIndicator, t, }: {
+    loading?: boolean | undefined;
+    retry?: ((callback?: () => void) => void) | undefined;
+    showLoadingIndicator: ShowLoadingIndicatorFunction;
+    t: TranslationFunction;
+}) => JSX.Element;
+
+export { NoElementGivenByModule };

package/dist/components/NoElementGivenByModule.js

@@ -0,0 +1,54 @@
+import "../chunk-YH4NJHER.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { Box, Button, Text } from "grommet";
+const NoElementGivenByModule = ({
+  loading = false,
+  retry,
+  showLoadingIndicator,
+  t
+}) => {
+  useEffect(() => {
+    showLoadingIndicator(loading);
+  }, [showLoadingIndicator, loading]);
+  const retryLoadingModule = () => {
+    showLoadingIndicator(true);
+    if (retry) {
+      retry(() => showLoadingIndicator(false));
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      fill: "horizontal",
+      margin: { top: "large" },
+      align: "center",
+      children: loading ? void 0 : retry ? /* @__PURE__ */ jsxs(
+        Box,
+        {
+          direction: "column",
+          gap: "medium",
+          children: [
+            /* @__PURE__ */ jsx(Box, { children: t("retry-loading-module-hint") }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                label: t("retry-loading-module"),
+                onClick: retryLoadingModule
+              }
+            )
+          ]
+        }
+      ) : /* @__PURE__ */ jsx(
+        Text,
+        {
+          weight: "bold",
+          children: t("module-unknown")
+        }
+      )
+    }
+  );
+};
+export {
+  NoElementGivenByModule
+};

package/dist/components/NoUserTaskGiven.d.ts

@@ -0,0 +1,10 @@
+import { ShowLoadingIndicatorFunction, TranslationFunction } from '@vanillabp/bc-shared';
+
+declare const NoUserTaskGiven: ({ loading, retry, showLoadingIndicator, t, }: {
+    loading?: boolean | undefined;
+    retry?: ((callback?: () => void) => void) | undefined;
+    showLoadingIndicator: ShowLoadingIndicatorFunction;
+    t: TranslationFunction;
+}) => JSX.Element;
+
+export { NoUserTaskGiven };

package/dist/components/NoUserTaskGiven.js

@@ -0,0 +1,23 @@
+import "../chunk-YH4NJHER.js";
+import { jsx } from "react/jsx-runtime";
+import { UserTaskAppLayout } from "@vanillabp/bc-shared";
+import { NoElementGivenByModule } from "./index.js";
+const NoUserTaskGiven = ({
+  loading = false,
+  retry,
+  showLoadingIndicator,
+  t
+}) => {
+  return /* @__PURE__ */ jsx(UserTaskAppLayout, { children: /* @__PURE__ */ jsx(
+    NoElementGivenByModule,
+    {
+      loading,
+      t,
+      showLoadingIndicator,
+      retry
+    }
+  ) });
+};
+export {
+  NoUserTaskGiven
+};

package/dist/components/NoWorkflowGiven.d.ts

@@ -0,0 +1,10 @@
+import { ShowLoadingIndicatorFunction, TranslationFunction } from '@vanillabp/bc-shared';
+
+declare const NoWorkflowGiven: ({ loading, retry, showLoadingIndicator, t, }: {
+    loading?: boolean | undefined;
+    retry?: ((callback?: () => void) => void) | undefined;
+    showLoadingIndicator: ShowLoadingIndicatorFunction;
+    t: TranslationFunction;
+}) => JSX.Element;
+
+export { NoWorkflowGiven };

package/dist/components/NoWorkflowGiven.js

@@ -0,0 +1,22 @@
+import "../chunk-YH4NJHER.js";
+import { jsx } from "react/jsx-runtime";
+import { NoElementGivenByModule } from "./index.js";
+const NoWorkflowGiven = ({
+  loading = false,
+  retry,
+  showLoadingIndicator,
+  t
+}) => {
+  return /* @__PURE__ */ jsx(
+    NoElementGivenByModule,
+    {
+      loading,
+      showLoadingIndicator,
+      retry,
+      t
+    }
+  );
+};
+export {
+  NoWorkflowGiven
+};

package/dist/components/SearchableAndSortableUpdatingList.d.ts

@@ -0,0 +1,49 @@
+import React__default, { MutableRefObject, ReactNode } from 'react';
+import { ColumnConfig } from 'grommet';
+import { ListItemStatus, ShowLoadingIndicatorFunction } from '@vanillabp/bc-shared';
+import { BackgroundType, ColorType } from 'grommet/utils';
+
+declare type ListItemData = {
+    id: string;
+    version?: number;
+    createdAt: Date;
+    updatedAt: Date;
+    endedAt?: Date;
+    read?: Date;
+};
+interface ListItem<T extends ListItemData> {
+    id: string;
+    number: number;
+    data: T;
+    status: ListItemStatus;
+    selected: boolean;
+    read?: Date;
+}
+interface ListItems<T extends ListItemData> {
+    serverTimestamp: Date;
+    items: Array<T>;
+}
+declare type RetrieveItemsFunction = <T extends ListItemData>(pageNumber: number, pageSize: number, initialTimestamp: Date | undefined) => Promise<ListItems<T>>;
+declare type ReloadItemsFunction = <T extends ListItemData>(numberOfItems: number, knownItemsIds: Array<string>, initialTimestamp: Date | undefined) => Promise<ListItems<T>>;
+declare type RefreshNecessaryFunction = () => void;
+declare type ReloadCallbackFunction = (updatedItemsIds: Array<string>) => Promise<void>;
+declare type RefreshItemCallbackFunction = (itemIds: Array<string>) => void;
+declare const SearchableAndSortableUpdatingList: <T extends ListItemData>({ itemsRef, updateListRef, refreshItemRef, retrieveItems, reloadItems, refreshNecessaryCallback, columns, showLoadingIndicator, additionalHeader, minWidthOfAutoColumn, rowSeparator, applyBackgroundColor, showColumnHeaders, columnHeaderBackground, columnHeaderSeparator, }: {
+    itemsRef: React__default.MutableRefObject<ListItem<T>[] | undefined>;
+    updateListRef: MutableRefObject<ReloadCallbackFunction | undefined>;
+    refreshItemRef?: React__default.MutableRefObject<RefreshItemCallbackFunction | undefined> | undefined;
+    retrieveItems: RetrieveItemsFunction;
+    reloadItems: ReloadItemsFunction;
+    refreshNecessaryCallback?: RefreshNecessaryFunction | undefined;
+    columns: ColumnConfig<any>[];
+    showLoadingIndicator: ShowLoadingIndicatorFunction;
+    additionalHeader?: ReactNode;
+    minWidthOfAutoColumn?: string | undefined;
+    rowSeparator?: string | boolean | undefined;
+    applyBackgroundColor?: boolean | undefined;
+    showColumnHeaders?: boolean | undefined;
+    columnHeaderBackground?: BackgroundType | undefined;
+    columnHeaderSeparator?: ColorType | null;
+}) => JSX.Element;
+
+export { ListItem, ListItemData, ListItems, RefreshItemCallbackFunction, ReloadCallbackFunction, SearchableAndSortableUpdatingList };

package/dist/components/SearchableAndSortableUpdatingList.js

@@ -0,0 +1,200 @@
+import {
+  __async,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-YH4NJHER.js";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Box } from "grommet";
+import { SnapScrollingDataTable } from "./SnapScrollingDataTable.js";
+import { keepOldItemsInArray, ListItemStatus } from "@vanillabp/bc-shared";
+const itemsBatchSize = 30;
+;
+;
+const loadItems = (retrieveItems, setItems, items, initialTimestamp) => __async(void 0, null, function* () {
+  const result = yield retrieveItems(
+    items === void 0 ? 0 : items.length % itemsBatchSize === 0 ? Math.floor(items.length / itemsBatchSize) : Math.floor(items.length / itemsBatchSize) + 1,
+    itemsBatchSize,
+    initialTimestamp.current
+  );
+  const currentNumberOfItems = items === void 0 ? 1 : items.length + 1;
+  const newItems = result.items.map((item, index) => ({
+    id: item.id,
+    data: item,
+    number: currentNumberOfItems + index,
+    selected: false,
+    status: item.endedAt === void 0 ? ListItemStatus.INITIAL : ListItemStatus.ENDED,
+    read: item.read
+  }));
+  setItems(
+    items === void 0 ? newItems : items.concat(newItems)
+  );
+  return result.serverTimestamp;
+});
+const reloadData = (reloadItems, setItems, items, updatedItemsIds, initialTimestamp, refreshNecessaryCallback) => __async(void 0, null, function* () {
+  const prefill = 2;
+  const size = (items.length === 0 ? prefill : Math.floor(items.length / itemsBatchSize) + prefill) * itemsBatchSize;
+  const result = yield reloadItems(
+    size,
+    items.filter((item) => !updatedItemsIds.includes(item.id)).map((item) => item.id),
+    initialTimestamp.current
+  );
+  const mappedResult = result.items.map((item, index) => ({
+    id: item.id,
+    data: item,
+    number: 1 + index,
+    selected: false,
+    status: item.version === 0 ? void 0 : Boolean(item.endedAt) && item.endedAt.getTime() > initialTimestamp.current.getTime() ? ListItemStatus.ENDED : item.createdAt.getTime() > initialTimestamp.current.getTime() ? ListItemStatus.NEW : item.updatedAt.getTime() > initialTimestamp.current.getTime() ? ListItemStatus.UPDATED : ListItemStatus.INITIAL,
+    read: item.read
+  }));
+  let anyUpdate = false;
+  const mergedItems = keepOldItemsInArray(
+    mappedResult,
+    items,
+    (item) => item.id,
+    (newItem, oldItem, index) => {
+      const itemInUpdateResponse = (newItem == null ? void 0 : newItem.status) !== void 0;
+      const result2 = itemInUpdateResponse ? newItem : oldItem;
+      if (newItem === void 0) {
+        if (result2 !== void 0) {
+          result2.status = ListItemStatus.REMOVED_FROM_LIST;
+          result2.number = index + 1;
+        }
+        anyUpdate = true;
+      } else if (itemInUpdateResponse) {
+        result2.number = index + 1;
+        anyUpdate = true;
+      }
+      return result2;
+    },
+    (first, second) => {
+      if ((first == null ? void 0 : first.id) === void 0) {
+        return (second == null ? void 0 : second.id) === void 0;
+      }
+      if ((second == null ? void 0 : second.id) === void 0) {
+        return true;
+      }
+      return first.number < second.number;
+    }
+  );
+  setItems(mergedItems);
+  if (anyUpdate && refreshNecessaryCallback) {
+    refreshNecessaryCallback();
+  }
+});
+const SearchableAndSortableUpdatingList = ({
+  itemsRef,
+  updateListRef,
+  refreshItemRef,
+  retrieveItems,
+  reloadItems,
+  refreshNecessaryCallback,
+  columns,
+  showLoadingIndicator,
+  additionalHeader,
+  minWidthOfAutoColumn,
+  rowSeparator,
+  applyBackgroundColor = true,
+  showColumnHeaders = true,
+  columnHeaderBackground = "dark-3",
+  columnHeaderSeparator
+}) => {
+  const [items, _setItems] = useState(void 0);
+  const initialTimestamp = useRef(void 0);
+  const setItems = useCallback((newItems) => {
+    itemsRef.current = newItems;
+    _setItems(newItems);
+  }, [_setItems, itemsRef]);
+  const setSelected = useCallback(
+    (itemId, selected) => {
+      _setItems(items == null ? void 0 : items.map((item) => {
+        if (item.id === itemId) {
+          item.selected = selected;
+        }
+        return item;
+      }));
+    },
+    [_setItems, items]
+  );
+  useEffect(() => {
+    if (refreshItemRef) {
+      refreshItemRef.current = (itemIds) => setItems(items.map((item) => itemIds.includes(item.id) ? __spreadValues({}, item) : item));
+    }
+    updateListRef.current = (updatedItemsIds) => __async(void 0, null, function* () {
+      return yield reloadData(
+        reloadItems,
+        setItems,
+        items,
+        updatedItemsIds,
+        initialTimestamp,
+        refreshNecessaryCallback
+      );
+    });
+    if (initialTimestamp.current) {
+      return;
+    }
+    initialTimestamp.current = /* @__PURE__ */ new Date();
+    const initList = () => __async(void 0, null, function* () {
+      showLoadingIndicator(true);
+      const result = yield loadItems(
+        retrieveItems,
+        setItems,
+        items,
+        initialTimestamp
+      );
+      initialTimestamp.current = result;
+      showLoadingIndicator(false);
+    });
+    initList();
+  }, [showLoadingIndicator, items, retrieveItems, reloadItems, setItems, initialTimestamp, updateListRef]);
+  const headerHeight = "auto";
+  const colorRowAccordingToUpdateStatus = items == null ? void 0 : items.reduce((props, item) => {
+    if (item === void 0) {
+      return props;
+    }
+    if (item.status === void 0) {
+      return __spreadProps(__spreadValues({}, props), {
+        [item.id]: {
+          background: { color: "light-2", opacity: 0.5 }
+        }
+      });
+    }
+    if (item.status !== ListItemStatus.INITIAL) {
+      return __spreadProps(__spreadValues({}, props), {
+        [item.id]: {
+          background: item.status === ListItemStatus.NEW ? { color: "accent-3", opacity: 0.1 } : item.status === ListItemStatus.UPDATED ? { color: "accent-1", opacity: 0.15 } : item.status === ListItemStatus.ENDED ? { color: "light-2", opacity: 0.5 } : item.status === ListItemStatus.REMOVED_FROM_LIST ? { color: "light-2", opacity: 0.5 } : void 0
+        }
+      });
+    }
+    return props;
+  }, {});
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      fill: true,
+      children: /* @__PURE__ */ jsx(
+        SnapScrollingDataTable,
+        {
+          pin: true,
+          minWidthOfAutoColumn,
+          additionalHeader,
+          border: rowSeparator ? { body: { side: "bottom", color: typeof rowSeparator === "string" ? rowSeparator : "light-3" } } : void 0,
+          rowProps: applyBackgroundColor ? colorRowAccordingToUpdateStatus : void 0,
+          size: "100%",
+          columns,
+          step: itemsBatchSize,
+          headerHeight,
+          showColumnHeaders,
+          columnHeaderBackground,
+          columnHeaderSeparator,
+          onMore: () => loadItems(retrieveItems, setItems, items, initialTimestamp),
+          data: items,
+          replace: true
+        }
+      )
+    }
+  );
+};
+export {
+  SearchableAndSortableUpdatingList
+};

package/dist/components/SnapScrolling.d.ts

@@ -0,0 +1,15 @@
+import * as styled_components from 'styled-components';
+import * as React from 'react';
+import { GridExtendedProps, BoxExtendedProps } from 'grommet';
+import * as CSS from 'csstype';
+
+interface SnapScrollingGridProps extends GridExtendedProps {
+    snapDirection: 'horizontal' | 'vertical';
+}
+declare const SnapScrollingGrid: styled_components.StyledComponent<React.FC<GridExtendedProps>, any, SnapScrollingGridProps, never>;
+interface SnapAlignBoxProps extends BoxExtendedProps {
+    snapAlign: CSS.Property.ScrollSnapAlign;
+}
+declare const SnapAlignBox: styled_components.StyledComponent<React.FC<BoxExtendedProps>, any, SnapAlignBoxProps, never>;
+
+export { SnapAlignBox, SnapScrollingGrid };

package/dist/components/SnapScrolling.js

@@ -0,0 +1,17 @@
+import "../chunk-YH4NJHER.js";
+import { Box, Grid } from "grommet";
+import styled from "styled-components";
+;
+const SnapScrollingGrid = styled(Grid)`
+    overflow-${(props) => props.snapDirection === "horizontal" ? "x" : "y"}: auto;
+    scroll-snap-type: ${(props) => props.snapDirection === "horizontal" ? "x" : "y"} mandatory;
+    scroll-behavior: smooth;
+  `;
+;
+const SnapAlignBox = styled(Box)`
+    scroll-snap-align: ${(props) => props.snapAlign ? props.snapAlign : "start"};
+  `;
+export {
+  SnapAlignBox,
+  SnapScrollingGrid
+};

package/dist/components/SnapScrollingDataTable.d.ts

@@ -0,0 +1,17 @@
+import { DataTableExtendedProps, ColumnConfig } from 'grommet';
+import React__default, { PropsWithChildren, ReactNode, UIEventHandler } from 'react';
+import { BackgroundType, ColorType } from 'grommet/utils';
+
+interface SnapScrollingDataTableProps<TRowType = any> extends PropsWithChildren<Omit<DataTableExtendedProps<TRowType>, 'columns' | 'ref'>> {
+    additionalHeader?: ReactNode | undefined;
+    headerHeight: string;
+    onScroll?: UIEventHandler<any> | undefined;
+    columns: ColumnConfig<TRowType>[];
+    minWidthOfAutoColumn?: string;
+    showColumnHeaders?: boolean;
+    columnHeaderBackground?: BackgroundType;
+    columnHeaderSeparator?: ColorType | null;
+}
+declare const SnapScrollingDataTable: React__default.ForwardRefExoticComponent<SnapScrollingDataTableProps<any> & React__default.RefAttributes<unknown>>;
+
+export { SnapScrollingDataTable };

package/dist/components/SnapScrollingDataTable.js

@@ -0,0 +1,113 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-YH4NJHER.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Box, DataTable, Grid, Text } from "grommet";
+import { SnapAlignBox, SnapScrollingGrid } from "./SnapScrolling.js";
+import { forwardRef } from "react";
+;
+const calculateColumWidth = (minWidthOfAutoColumn, width, column) => {
+  const columnSize = column.size ? column.size : minWidthOfAutoColumn;
+  return width !== "" ? width + " + " + columnSize : columnSize;
+};
+const SnapScrollingDataTable = forwardRef((_a, ref) => {
+  var _b = _a, {
+    headerHeight,
+    additionalHeader,
+    columns,
+    onScroll,
+    children,
+    minWidthOfAutoColumn,
+    showColumnHeaders = true,
+    columnHeaderBackground = "dark-3",
+    columnHeaderSeparator
+  } = _b, props = __objRest(_b, [
+    "headerHeight",
+    "additionalHeader",
+    "columns",
+    "onScroll",
+    "children",
+    "minWidthOfAutoColumn",
+    "showColumnHeaders",
+    "columnHeaderBackground",
+    "columnHeaderSeparator"
+  ]);
+  const columnsWidth = columns.reduce((width, column) => calculateColumWidth(minWidthOfAutoColumn, width, column), "");
+  const dataTableColumns = columns.map((column) => __spreadProps(__spreadValues({}, column), { header: void 0 }));
+  return columns ? /* @__PURE__ */ jsxs(
+    SnapScrollingGrid,
+    {
+      fill: true,
+      rows: ["max-content", "auto"],
+      style: { overflow: "auto" },
+      snapDirection: "horizontal",
+      onScroll,
+      children: [
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            width: "100%",
+            style: {
+              position: "sticky",
+              top: "0",
+              zIndex: 2,
+              minWidth: "auto"
+            },
+            background: columnHeaderBackground,
+            align: "center",
+            children: [
+              additionalHeader,
+              showColumnHeaders ? /* @__PURE__ */ jsx(
+                Grid,
+                {
+                  fill: true,
+                  columns: columns.map((column) => column.size ? column.size : "auto"),
+                  style: {
+                    maxHeight: headerHeight,
+                    minHeight: headerHeight,
+                    marginLeft: "auto",
+                    marginRight: "auto",
+                    zIndex: "2"
+                  },
+                  children: columns.map((column, index) => /* @__PURE__ */ jsx(
+                    SnapAlignBox,
+                    {
+                      style: column.size === void 0 ? { minWidth: columnHeaderSeparator === null ? minWidthOfAutoColumn : `calc(${minWidthOfAutoColumn} - 1px)` } : { width: columnHeaderSeparator === null ? column.size : `calc(${column.size} - 1px)` },
+                      align: "left",
+                      justify: "center",
+                      height: "100%",
+                      border: index === 0 || columnHeaderSeparator === null ? void 0 : { side: "left", color: columnHeaderSeparator },
+                      snapAlign: "center",
+                      children: column.header instanceof String ? /* @__PURE__ */ jsx(
+                        Text,
+                        {
+                          color: "light-2",
+                          truncate: "tip",
+                          children: column.header
+                        }
+                      ) : column.header
+                    },
+                    `column${index}`
+                  ))
+                }
+              ) : void 0
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DataTable,
+          __spreadValues({
+            pad: "none",
+            width: columnsWidth,
+            columns: dataTableColumns
+          }, props)
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ jsx(Fragment, {});
+});
+export {
+  SnapScrollingDataTable
+};

package/dist/components/User.d.ts

@@ -0,0 +1,11 @@
+import { User as User$1 } from '@vanillabp/bc-official-gui-client';
+
+declare type CurrentUserProps = {
+    user: User$1;
+    isUserLoggedIn?: boolean;
+    size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | string;
+    iconSize?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | string;
+};
+declare const User: ({ user, isUserLoggedIn, size, iconSize, }: CurrentUserProps) => JSX.Element;
+
+export { User };

package/dist/components/User.js

@@ -0,0 +1,39 @@
+import "../chunk-YH4NJHER.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Grid, Text } from "grommet";
+import { UserAvatar } from "./UserAvatar.js";
+const User = ({
+  user,
+  isUserLoggedIn = false,
+  size = "medium",
+  iconSize
+}) => /* @__PURE__ */ jsxs(
+  Grid,
+  {
+    fill: "horizontal",
+    gap: "small",
+    columns: ["auto", "auto", "flex"],
+    align: "center",
+    children: [
+      /* @__PURE__ */ jsx(
+        UserAvatar,
+        {
+          user,
+          isUserLoggedIn,
+          size: iconSize !== void 0 ? iconSize : size
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          size,
+          truncate: "tip",
+          children: !Boolean(user.lastName) ? !Boolean(user.email) ? user.id : user.email : Boolean(user.firstName) ? `${user.firstName} ${user.lastName}` : user.lastName
+        }
+      )
+    ]
+  }
+);
+export {
+  User
+};

package/dist/components/UserAvatar.d.ts

@@ -0,0 +1,12 @@
+import { User } from '@vanillabp/bc-official-gui-client';
+import { BorderType } from 'grommet/utils';
+
+declare type UserAvatarProps = {
+    user: User;
+    isUserLoggedIn?: boolean;
+    border?: BorderType;
+    size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | string;
+};
+declare const UserAvatar: ({ user, isUserLoggedIn, border, size, }: UserAvatarProps) => JSX.Element;
+
+export { UserAvatar };