@vanillabp/bc-shared 0.0.3

package/README.md

@@ -0,0 +1,101 @@
+# Use in workflow modules
+
+Example:
+
+```js
+import { LoadingIndicator } from '@vanillabp/bc-shared';
+```
+
+Read the next sections for instructions of installation.
+
+## package.json
+
+```sh
+npm install @vanillabp/bc-shared
+```
+
+### Development
+
+For local development of user-task forms in workflow modules one can
+
+1. [build this package locally](#build)
+1. Link the package `npm link`
+1. Get current package-version `npm -g list` (e.g. `@vanillabp/bc-shared@0.0.1`)
+1. Change to webapp folder of the workflow module
+1. Link the global package `npm link @vanillabp/bc-shared@0.0.1` (this needs to be repeated after each `npm install`)
+
+### Webpack
+
+Also Webpack needs to learn about the module. If the project is using `create-react-app` scripts one can use the drop-in replacement `craco` instead which allows to modify Webpack configuration.
+
+```sh
+install craco --save-dev
+```
+
+In the scripts-section of `package.json` replace occurrences of `react-script` by `craco`.
+
+Add the file `craco.config.js` to your root-folder:
+
+```js
+const path = require("path");
+
+const aliases = {
+  '@vanillabp/bc-shared': path.join(path.resolve(__dirname, '.'), "node_modules", "@vanillabp", "bc-shared"),
+  'styled-components': path.join(path.resolve(__dirname, '.'), "node_modules", "styled-components"),
+  'react': path.join(path.resolve(__dirname, '.'), "node_modules", "react"),
+  'react-dom': path.join(path.resolve(__dirname, '.'), "node_modules", "react-dom")
+};
+
+module.exports = {
+  webpack: {
+    alias: aliases
+  },
+  plugins: [
+    {
+      plugin: {
+        overrideWebpackConfig: ({ webpackConfig, pluginOptions, context: { paths } }) => {
+          const moduleScopePlugin = webpackConfig.resolve.plugins.find(plugin => plugin.appSrcs && plugin.allowedFiles);
+          if (moduleScopePlugin) {
+            Object
+                .keys(aliases)
+                .map(key => aliases[key])
+                .forEach(path => moduleScopePlugin.appSrcs.push(path));
+          }
+          const ignoreWarnings = [
+              { module: /@microsoft\/fetch-event-source/ }
+            ];
+          return { ...webpackConfig, ignoreWarnings }
+        }
+      }
+    }
+  ]
+};
+```
+
+*Details:*
+
+In the exports section `webpack.alias` the alias to the module is defined. In addition it is necessary to define aliases for 'react' and 'react-dom' because otherwise Webpack would add these modules twice (one time for the original app and one time for the module we've added).
+
+Create-react-app scripts limit sources to the `./src` folder. Unfortunately, the new aliases point to the `node_modules` directory and will be rejected. In the exports section `plugins[].plugin{}.overrideWebpackConfig` a craco-plugin is defined which is able to modify the webpack configuration. The `ModuleScopePlugin` which is used to block other folders than `./src` is determined and the pathes of the aliases are added.
+
+Last but not least, the craco plugin is also used to suppress warnings regarding missing `.map` files.
+
+# Build
+
+```sh
+npm run build
+```
+
+## Development
+
+```sh
+npm start
+```
+
+does the same as normal building but also enters `watch` mode.
+
+## Storybook
+
+```sh
+npm storybook
+```

package/dist/chunk-YH4NJHER.js

@@ -0,0 +1,58 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+export {
+  __spreadValues,
+  __spreadProps,
+  __objRest,
+  __async
+};

package/dist/components/Badge.d.ts

@@ -0,0 +1,12 @@
+import { BackgroundType } from 'grommet/utils';
+
+declare type BadgeSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+interface BadgeProps {
+    background?: BackgroundType;
+    count: string | number;
+    size?: BadgeSize;
+    textSize?: BadgeSize;
+}
+declare const Badge: ({ count, size, textSize, ...props }: BadgeProps) => JSX.Element;
+
+export { Badge };

package/dist/components/Badge.js

@@ -0,0 +1,84 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-YH4NJHER.js";
+import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import styled from "styled-components";
+import { Box, ResponsiveContext, Text } from "grommet";
+const badgeSize = (size) => {
+  switch (size) {
+    case "xsmall":
+      return "1rem";
+    case "small":
+      return "1.25rem";
+    case "medium":
+      return "1.5rem";
+    case "large":
+      return "1.75rem";
+    case "xlarge":
+      return "2rem";
+    default:
+      throw new Error("Unknown size");
+  }
+};
+const textOffset = (size) => {
+  switch (size) {
+    case "xsmall":
+      return "0.02rem";
+    case "small":
+      return "0.035rem";
+    case "medium":
+      return "0.05rem";
+    case "large":
+      return "0.08rem";
+    case "xlarge":
+      return "0.12rem";
+    default:
+      throw new Error("Unknown size");
+  }
+};
+const CountText = styled(Text)`
+  font-size: ${(props) => badgeSize(props.textSize)};
+  line-height: ${(props) => badgeSize(props.size)};
+  font-weight: 700;
+  width: 5rem;
+  left: calc(-2.5rem + ${(props) => badgeSize(props.size)} / 2 - ${(props) => textOffset(props.size)} / 2);
+  text-align: center;
+  top: ${(props) => textOffset(props.size)};
+  position: absolute;
+`;
+const Badge = (_a) => {
+  var _b = _a, { count, size = "medium", textSize = "medium" } = _b, props = __objRest(_b, ["count", "size", "textSize"]);
+  const rc = useContext(ResponsiveContext);
+  return /* @__PURE__ */ jsx(
+    Box,
+    __spreadProps(__spreadValues({
+      align: "center",
+      justify: "center",
+      pad: rc === "small" ? "small" : "xsmall",
+      round: badgeSize(size)
+    }, props), {
+      children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          width: badgeSize(size),
+          height: badgeSize(size),
+          style: { position: "relative" },
+          children: /* @__PURE__ */ jsx(
+            CountText,
+            {
+              size,
+              textSize,
+              children: count
+            }
+          )
+        }
+      )
+    })
+  );
+};
+export {
+  Badge
+};

package/dist/components/CircleButton.d.ts

@@ -0,0 +1,5 @@
+import { ButtonType } from 'grommet';
+
+declare const CircleButton: ({ style, className, icon, onClick, color }: ButtonType) => JSX.Element;
+
+export { CircleButton };

package/dist/components/CircleButton.js

@@ -0,0 +1,47 @@
+import "../chunk-YH4NJHER.js";
+import { jsx } from "react/jsx-runtime";
+import { Box, Button } from "grommet";
+import { createRef } from "react";
+const CircleButton = ({
+  style,
+  className,
+  icon,
+  onClick,
+  color = "accent-3"
+}) => {
+  const buttonRef = createRef();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      style,
+      className,
+      margin: "medium",
+      round: "full",
+      height: "xxsmall",
+      width: "xxsmall",
+      overflow: "hidden",
+      background: color,
+      align: "center",
+      children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "large",
+          icon,
+          ref: buttonRef,
+          color,
+          hoverIndicator: true,
+          style: { border: "none", height: "4rem" },
+          onClick: (event) => {
+            var _a;
+            (_a = buttonRef.current) == null ? void 0 : _a.blur();
+            if (onClick)
+              onClick(event);
+          }
+        }
+      )
+    }
+  );
+};
+export {
+  CircleButton
+};

package/dist/components/CopyClipboard.d.ts

@@ -0,0 +1,21 @@
+import { PropsWithChildren } from 'react';
+import { BackgroundType, EdgeSizeType } from 'grommet/utils';
+
+declare type ButtonSizeType = 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | string;
+interface CopyClipbardButtonProps {
+    content?: string;
+    color?: string;
+    background?: BackgroundType;
+    onCopy?: () => any;
+    size?: ButtonSizeType;
+}
+declare const CopyClipboardButton: ({ content, color, background, onCopy, size, }: CopyClipbardButtonProps) => JSX.Element;
+interface CopyClipbardProps {
+    content?: string;
+    size?: EdgeSizeType | string;
+    color?: string;
+    background?: BackgroundType;
+}
+declare const CopyClipboard: ({ content, size, background, color, children, }: PropsWithChildren<CopyClipbardProps>) => JSX.Element;
+
+export { CopyClipboard, CopyClipboardButton };

package/dist/components/CopyClipboard.js

@@ -0,0 +1,110 @@
+import {
+  __async
+} from "../chunk-YH4NJHER.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Box, Drop } from "grommet";
+import React, { useRef, useState } from "react";
+import { Copy } from "grommet-icons";
+;
+const CopyClipboardButton = ({
+  content,
+  color = "white",
+  background = { color: "rgba(0, 0, 0, 0.45)" },
+  onCopy,
+  size = "medium"
+}) => {
+  const copyContent = (data) => __async(void 0, null, function* () {
+    try {
+      yield navigator.clipboard.writeText(data);
+    } catch (err) {
+      console.error("Failed to copy: ", err);
+    }
+    if (onCopy) {
+      onCopy();
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      flex: false,
+      round: "xsmall",
+      background,
+      margin: { left: "xsmall" },
+      pad: "xsmall",
+      children: /* @__PURE__ */ jsx(
+        Copy,
+        {
+          color,
+          size,
+          onClick: () => copyContent(content)
+        }
+      )
+    }
+  );
+};
+;
+const CopyClipboard = ({
+  content,
+  size = "medium",
+  background,
+  color = "white",
+  children
+}) => {
+  const targetRef = useRef(null);
+  const [over, _setOver] = useState(false);
+  const hideTimer = React.useRef(0);
+  if (!Boolean(content)) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  const setOver = (status) => {
+    if (Boolean(hideTimer.current)) {
+      window.clearTimeout(hideTimer.current);
+      hideTimer.current = 0;
+    }
+    if (status) {
+      _setOver(status);
+      return;
+    }
+    hideTimer.current = window.setTimeout(() => {
+      _setOver(false);
+      hideTimer.current = 0;
+    }, 200);
+  };
+  const sizeFactor = size === "xxsmall" ? 0.3 : size === "xsmall" ? 0.4 : size === "small" ? 0.5 : size === "medium" ? 0.6 : size === "large" ? 0.8 : size === "xlarge" ? 1 : size === "xxlarge" ? 1.2 : 0;
+  const iconSize = sizeFactor === 0 || !targetRef.current ? size : `${targetRef.current.clientHeight * sizeFactor}px`;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref: targetRef,
+      style: { display: "inline-block" },
+      onMouseLeave: (event) => setOver(false),
+      onMouseEnter: (event) => setOver(true),
+      children: [
+        children,
+        over && targetRef.current && /* @__PURE__ */ jsx(
+          Drop,
+          {
+            plain: true,
+            target: targetRef.current,
+            stretch: false,
+            align: { left: "right" },
+            children: /* @__PURE__ */ jsx(
+              CopyClipboardButton,
+              {
+                content,
+                color,
+                onCopy: () => setOver(false),
+                size: iconSize,
+                background
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  CopyClipboard,
+  CopyClipboardButton
+};

package/dist/components/DefaultListCell.d.ts

@@ -0,0 +1,44 @@
+import { BoxExtendedProps, TextExtendedProps } from 'grommet';
+import { ColorType } from 'grommet/utils/index.js';
+import React, { PropsWithChildren, FC } from 'react';
+import { BackgroundType } from 'grommet/utils';
+import { ListItem, Column } from '../types/ListCell.js';
+import { TranslationFunction } from '../types/translate.js';
+
+declare const ENDED_FONT_COLOR = "light-4";
+declare const ENDED_FONT_COLOR_ODD = "#b4b4b4";
+declare type Alignment = 'left' | 'center' | 'right';
+declare const colorForEndedItemsOrUndefined: (item: ListItem<any>) => ColorType;
+interface ListCellProps extends BoxExtendedProps {
+    background?: BackgroundType;
+    align?: Alignment;
+}
+declare const ListCell: React.FC<PropsWithChildren<ListCellProps>>;
+interface TextListCellProps extends TextExtendedProps {
+    item: ListItem<any>;
+    value?: string | String;
+    tip?: string;
+    showUnreadAsBold?: boolean;
+    background?: BackgroundType;
+    align?: Alignment;
+}
+declare const TextListCell: React.FC<TextListCellProps>;
+interface DefaultListCellProps<D> {
+    t: TranslationFunction;
+    item: ListItem<D>;
+    column: Column;
+    showUnreadAsBold?: boolean;
+    defaultLanguage?: string;
+    currentLanguage: string;
+    nameOfList?: string;
+    selectItem: (select: boolean) => void;
+    isPhone: boolean;
+    isTablet: boolean;
+}
+interface DefaultListCellAwareProps<T> extends DefaultListCellProps<T> {
+    defaultCell: FC<DefaultListCellProps<T>>;
+}
+declare const colorRowAccordingToUpdateStatus: <T extends ListItem<any>>(item: T) => BackgroundType | undefined;
+declare const DefaultListCell: FC<DefaultListCellProps<any>>;
+
+export { Alignment, DefaultListCell, DefaultListCellAwareProps, DefaultListCellProps, ENDED_FONT_COLOR, ENDED_FONT_COLOR_ODD, ListCell, TextListCell, colorForEndedItemsOrUndefined, colorRowAccordingToUpdateStatus };

package/dist/components/DefaultListCell.js

@@ -0,0 +1,179 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-YH4NJHER.js";
+import { jsx } from "react/jsx-runtime";
+import { Box, Text } from "grommet";
+import { ListItemStatus } from "../types/index.js";
+import {
+  getObjectProperty,
+  toLocaleDateString,
+  toLocaleStringWithoutSeconds,
+  toLocaleTimeStringWithoutSeconds
+} from "../utils/index.js";
+const DATE_REGEXP = /^(\d{4})-(\d{2})-(\d{2})/;
+const ENDED_FONT_COLOR = "light-4";
+const ENDED_FONT_COLOR_ODD = "#b4b4b4";
+const colorForEndedItemsOrUndefined = (item) => {
+  return item.status !== ListItemStatus.ENDED ? void 0 : ENDED_FONT_COLOR;
+};
+const ListCell = (_a) => {
+  var _b = _a, {
+    background,
+    align,
+    children
+  } = _b, props = __objRest(_b, [
+    "background",
+    "align",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsx(
+    Box,
+    __spreadProps(__spreadValues({
+      fill: true,
+      align: "center",
+      direction: "row",
+      justify: align === "left" ? "start" : align === "right" ? "end" : "center",
+      background,
+      pad: "xsmall",
+      gap: "xsmall"
+    }, props), {
+      children
+    })
+  );
+};
+const TextListCell = (_c) => {
+  var _d = _c, {
+    item,
+    value = "",
+    align = "left",
+    tip,
+    showUnreadAsBold = false,
+    background
+  } = _d, props = __objRest(_d, [
+    "item",
+    "value",
+    "align",
+    "tip",
+    "showUnreadAsBold",
+    "background"
+  ]);
+  const color = colorForEndedItemsOrUndefined(item);
+  return /* @__PURE__ */ jsx(
+    ListCell,
+    {
+      background,
+      align,
+      children: tip === void 0 ? /* @__PURE__ */ jsx(
+        Text,
+        __spreadProps(__spreadValues({
+          truncate: "tip",
+          color,
+          weight: showUnreadAsBold && item.read === void 0 ? "bold" : "normal"
+        }, props), {
+          children: value
+        })
+      ) : /* @__PURE__ */ jsx(
+        Text,
+        __spreadProps(__spreadValues({
+          truncate: true,
+          color,
+          weight: showUnreadAsBold && item.read === void 0 ? "bold" : "normal",
+          tip: { content: tip }
+        }, props), {
+          children: value
+        })
+      )
+    }
+  );
+};
+const render = (t, propertyValue, currentLanguage, defaultLanguage) => {
+  let align = "left";
+  let value;
+  let tip;
+  if (typeof propertyValue === "object") {
+    let langValue = propertyValue[currentLanguage];
+    if (langValue !== void 0) {
+      propertyValue = langValue;
+    } else if (defaultLanguage !== void 0) {
+      langValue = propertyValue[defaultLanguage];
+      if (langValue !== void 0) {
+        propertyValue = langValue;
+      }
+    }
+  }
+  if (propertyValue === void 0) {
+    value = "";
+  } else if (propertyValue instanceof Date) {
+    value = toLocaleTimeStringWithoutSeconds(propertyValue);
+  } else if (typeof propertyValue === "number") {
+    value = propertyValue.toLocaleString(window.navigator.language);
+    align = "right";
+  } else if (typeof propertyValue === "boolean") {
+    if (propertyValue) {
+      value = t("boolean-true");
+    } else {
+      value = t("boolean-false");
+    }
+  } else if (typeof propertyValue === "string") {
+    const dateMatch = DATE_REGEXP.exec(propertyValue);
+    if (dateMatch) {
+      if (propertyValue.length === 10) {
+        value = toLocaleDateString(new Date(Date.parse(propertyValue)));
+        align = "right";
+      } else {
+        const tmpDate = new Date(Date.parse(propertyValue));
+        value = toLocaleStringWithoutSeconds(tmpDate);
+      }
+    } else {
+      value = propertyValue;
+    }
+  }
+  return { value, align };
+};
+const colorRowAccordingToUpdateStatus = (item) => 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;
+const DefaultListCell = ({
+  item,
+  column,
+  showUnreadAsBold,
+  currentLanguage,
+  defaultLanguage,
+  t,
+  selectItem
+}) => {
+  let propertyValue = getObjectProperty(item.data, column.path);
+  let align = "left";
+  let value;
+  let tip;
+  if (column.path === "dueDate") {
+    value = toLocaleDateString(item.data.dueDate);
+    tip = toLocaleStringWithoutSeconds(item.data.dueDate);
+    align = "right";
+  } else {
+    const { value: v, align: a } = render(t, propertyValue, currentLanguage, defaultLanguage);
+    value = v;
+    align = a;
+  }
+  const background = colorRowAccordingToUpdateStatus(item);
+  return /* @__PURE__ */ jsx(
+    TextListCell,
+    {
+      item,
+      value,
+      tip,
+      showUnreadAsBold,
+      background,
+      align
+    }
+  );
+};
+export {
+  DefaultListCell,
+  ENDED_FONT_COLOR,
+  ENDED_FONT_COLOR_ODD,
+  ListCell,
+  TextListCell,
+  colorForEndedItemsOrUndefined,
+  colorRowAccordingToUpdateStatus
+};

package/dist/components/DefaultListHeader.d.ts

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+import { Column } from '../types/ListCell.js';
+
+interface DefaultListHeaderProps<D> {
+    column: Column;
+    currentLanguage: string;
+    nameOfList?: string;
+    isPhone: boolean;
+    isTablet: boolean;
+    selectAll: (select: boolean) => void;
+    allSelected: boolean;
+    sort?: boolean;
+    sortAscending?: boolean;
+    setSort: (column?: Column) => void;
+    setSortAscending: (ascending: boolean) => void;
+}
+interface DefaultListHeaderAwareProps<T> extends DefaultListHeaderProps<T> {
+    defaultHeader: FC<DefaultListHeaderProps<T>>;
+}
+declare const DefaultListHeader: FC<DefaultListHeaderProps<any>>;
+
+export { DefaultListHeader, DefaultListHeaderAwareProps, DefaultListHeaderProps };