@hortiview/shared-components 0.0.10012 → 0.0.10027

package/README.md

@@ -43,6 +43,7 @@ Additionally the library provides form components using [react-hook-form](https:
 1. [GenericTable](#generictable)
 1. [HashTabView](#hashtabview)
 1. [HeaderFilter](#headerfilter)
+1. [HealthCheckFailed](#healthcheckfailed)
 1. [InfoGroup](#infogroup)
 1. [Iconify](#iconify)
 1. [ListArea](#listarea)
@@ -578,7 +579,70 @@ const [filterValue, setFilterValue] = useState<string>();
     { value: 'test', label: 'Test' },
     { value: 'different', label: 'Different' },
   ]}
-/>;
+/>
+```
+
+### HealthCheckFailed
+
+A screen that shows a health check failed message. It can be used if the check for database health, iot health or HV platform health fails. Please use the following `title` and `subtitle` for each type to ensure a consistent user experience:
+
+```jsx
+import { HealthCheckFailed } from '@hortiview/shared-components';
+
+if (isPlatformHealthy === false) {
+  return (
+    <HealthCheckFailed
+      title='The platform data used by this module cannot be retrieved currently.'
+      subtitle='Please wait or come back later.'
+      type='platform'
+    />
+  );
+}
+
+if (isDbHealthy === false) {
+  return (
+    <HealthCheckFailed
+      title='The data for this module is loading!'
+      subtitle='Please wait or come back later.'
+      type='database'
+    />
+  );
+}
+
+if (isIotServiceHealthy === false) {
+  return (
+    <HealthCheckFailed
+      title='The data of your devices cannot be retrieved currently.'
+      subtitle='The problem is being addressed by our technical team. Please come back later.'
+      type='iot'
+    />
+  );
+}
+```
+
+Set the type to `other` to catch generic errors. Again, please use the `title` and `subtitle` as listed here to ensure a consistent user experience:
+
+```jsx
+<ParentWithVisibleBorders>
+  <HealthCheckFailed
+    title='Sorry, something went wrong!'
+    subtitle='The problem is being addressed by our technical team. Please come back later.'
+    type='other'
+  />
+</ParentWithVisibleBorders>
+```
+
+You can also control if the card is outlined or not, depending on the position in the UI. The card has a default outline. For design consistency, this prop should only be set to `false` if the card is embedded, e.g. in a table or any other parent that already has a border:
+
+```jsx
+<ParentWithVisibleBorders>
+  <HealthCheckFailed
+    title='Sorry, something went wrong!'
+    subtitle='The problem is being addressed by our technical team. Please come back later.'
+    type='other'
+    isOutlined={false}
+  />
+</ParentWithVisibleBorders>
 ```
 
 ### InfoGroup
@@ -709,8 +773,7 @@ return <>
 </>
 ```
 
-
-The Loading spinner will automatically change to another text, after a certain waiting time, the text and time are adjustable. 
+The Loading spinner will automatically change to another text, after a certain waiting time, the text and time are adjustable.
 This behavior is enabled per default (10 seconds) - it can be disabled by passing `null` to impatienceMessage.
 
 ```JSX
@@ -730,8 +793,6 @@ return <>
 </>
 ```
 
-
-
 ### Modal
 
 Provides the normal elements modal with one additional change. If you are on fullscreen modal size the max-height and max-width is set to 100svh/svw (Smallest ViewPort height/width).

package/dist/assets/healthCheckFailed.css

@@ -0,0 +1 @@
+._database_11ki8_1{color:var(--lmnt-theme-secondary);animation:_spin_11ki8_1 4s linear infinite}@keyframes _spin_11ki8_1{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}._iot_11ki8_16,._platform_11ki8_17,._other_11ki8_18{color:var(--lmnt-theme-danger)}._crossedOut_11ki8_22{position:relative;display:inline-block}._crossedOut_11ki8_22:after{content:"";position:absolute;width:3rem;height:.25rem;left:50%;top:50%;background:var(--lmnt-theme-danger-on-surface);box-shadow:0 0 0 .125rem var(--lmnt-theme-background);transform:translate(-50%,calc(-50% - .25rem)) rotate(45deg);transform-origin:center;z-index:2}

package/dist/components/Filter/Filter.js

@@ -26,6 +26,7 @@ import "../../disclaimer.module-BZydt-Q_.js";
 import "../../genericCard.module-DrQu86jX.js";
 import "../../HashTabView.module-ZhwSfDeQ.js";
 import "../../HeaderFilter.module-DiBmulr5.js";
+import "../../healthCheckFailed.module-B5P1ogjs.js";
 import "../../infoGroup.module-Cxw88dfC.js";
 import "../../bigLoadingSpinner.module-GgbFol8k.js";
 import "../../loadingSpinner.module-CLtqSMWA.js";
@@ -35,7 +36,7 @@ import "../../formDatePicker.module-BV3ma_7y.js";
 import "../../formSelect.module-C6cK23EF.js";
 import "../../formText.module-C0by6_DK.js";
 import "../../isPlainObject-BlCDf1Kc.js";
-const kt = ({
+const Nt = ({
   clearFilterText: f,
   closeCallback: m,
   currentFilter: i,
@@ -179,5 +180,5 @@ const kt = ({
   );
 };
 export {
-  kt as Filter
+  Nt as Filter
 };

package/dist/components/GenericTable/GenericTable.js

@@ -24,6 +24,7 @@ import "../../deleteModal.module-Ds3MDzdl.js";
 import "../../disclaimer.module-BZydt-Q_.js";
 import "../../HashTabView.module-ZhwSfDeQ.js";
 import "../../HeaderFilter.module-DiBmulr5.js";
+import "../../healthCheckFailed.module-B5P1ogjs.js";
 import "../../infoGroup.module-Cxw88dfC.js";
 import "../../bigLoadingSpinner.module-GgbFol8k.js";
 import "../../loadingSpinner.module-CLtqSMWA.js";
@@ -35,7 +36,7 @@ import "../../formText.module-C0by6_DK.js";
 import "../../isPlainObject-BlCDf1Kc.js";
 import { useGenerateColumns as x, useGenerateTableData as _ } from "./GenericTableService.js";
 import { GenericCardList as A } from "./Mobile/GenericCardList.js";
-const hr = ({
+const yr = ({
   data: p = [],
   hiddenColumns: l = [],
   order: f = [],
@@ -118,5 +119,5 @@ const hr = ({
   ) });
 };
 export {
-  hr as GenericTable
+  yr as GenericTable
 };

package/dist/components/HealthCheckFailed/HealthCheckFailed.d.ts

@@ -0,0 +1,22 @@
+type HealthCheckFailedProps = {
+    /**
+     * Please check the shared components README for the correct title for each type.
+     * Font size: 16px, font weight: 700
+     */
+    title: string;
+    /**
+     * Please check the shared components README for the correct subtitle for each type.
+     * Font size. 14px, font weight: 400, color: 'text-secondary-on-background'
+     */
+    subtitle: string;
+    /**
+     * Type of the failed health check. Depending on the type, a different icon of 3rem size will be displayed.
+     */
+    type: 'database' | 'iot' | 'platform' | 'other';
+    /**
+     * The card has a default outline. For design consistency, this prop should only be set to 'false' if the card is embedded, e.g. in a table.
+     */
+    isOutlined?: boolean;
+};
+export declare const HealthCheckFailed: ({ title, subtitle, type, isOutlined, }: HealthCheckFailedProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/HealthCheckFailed/HealthCheckFailed.js

@@ -0,0 +1,39 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { Card as c, CardContent as d, Padding as s, CardBody as h, Group as m, TypoBody as a } from "@element/react-components";
+import { I as u } from "../../Iconify-DoU6pP1o.js";
+import { s as t } from "../../healthCheckFailed.module-B5P1ogjs.js";
+const v = ({
+  title: r,
+  subtitle: i,
+  type: n,
+  isOutlined: o = !0
+}) => /* @__PURE__ */ e(
+  c,
+  {
+    variant: o ? "outlined" : "flat",
+    "data-testid": `${n}-health-check-failed-card`,
+    children: /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(s, { variant: "airy", children: /* @__PURE__ */ e(h, { children: /* @__PURE__ */ l(
+      m,
+      {
+        gap: "none",
+        primaryAlign: "center",
+        secondaryAlign: "center",
+        direction: "vertical",
+        fullWidth: !0,
+        children: [
+          /* @__PURE__ */ e(g, { type: n }),
+          /* @__PURE__ */ e(a, { level: 1, bold: !0, children: r }),
+          /* @__PURE__ */ e(a, { level: 2, themeColor: "text-secondary-on-background", children: i })
+        ]
+      }
+    ) }) }) })
+  }
+), f = {
+  database: "sync",
+  iot: "settings_input_antenna",
+  platform: "engineering",
+  other: "error"
+}, g = ({ type: r }) => /* @__PURE__ */ e("span", { className: r === "iot" ? t.crossedOut : "", children: /* @__PURE__ */ e(u, { icon: f[r], className: t[r], iconSize: "xlarge" }) });
+export {
+  v as HealthCheckFailed
+};

package/dist/components/HealthCheckFailed/HealthCheckFailed.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/HealthCheckFailed/HealthCheckFailed.test.js

@@ -0,0 +1,26 @@
+import { jsx as a } from "react/jsx-runtime";
+import { a as s, s as e } from "../../react.esm-CHvVvf3L.js";
+import { HealthCheckFailed as r } from "./HealthCheckFailed.js";
+import { d as h, t as i, g as t } from "../../vi.JYQecGiw-BpOAB4v6.js";
+h("HealthCheckFailed Component", () => {
+  const c = "Test Title", n = "Test Subtitle";
+  i("displays the correct title and subtitle", () => {
+    s(/* @__PURE__ */ a(r, { title: c, subtitle: n, type: "database" })), t(e.getByText(c)).toBeInTheDocument(), t(e.getByText(n)).toBeInTheDocument();
+  }), i('displays the correct icon for type "database"', () => {
+    s(/* @__PURE__ */ a(r, { title: c, subtitle: n, type: "database" }));
+    const o = e.getByText("sync");
+    t(o).toBeInTheDocument(), t(e.getByTestId("database-health-check-failed-card")).toBeInTheDocument();
+  }), i('displays the correct icon for type "iot"', () => {
+    s(/* @__PURE__ */ a(r, { title: c, subtitle: n, type: "iot" }));
+    const o = e.getByText("settings_input_antenna");
+    t(o).toBeInTheDocument(), t(e.getByTestId("iot-health-check-failed-card")).toBeInTheDocument();
+  }), i('displays the correct icon for type "platform"', () => {
+    s(/* @__PURE__ */ a(r, { title: c, subtitle: n, type: "platform" }));
+    const o = e.getByText("engineering");
+    t(o).toBeInTheDocument(), t(e.getByTestId("platform-health-check-failed-card")).toBeInTheDocument();
+  }), i('displays the correct icon for type "other"', () => {
+    s(/* @__PURE__ */ a(r, { title: c, subtitle: n, type: "other" }));
+    const o = e.getByText("error");
+    t(o).toBeInTheDocument(), t(e.getByTestId("other-health-check-failed-card")).toBeInTheDocument();
+  });
+});

package/dist/healthCheckFailed.module-B5P1ogjs.js

@@ -0,0 +1,12 @@
+import "./assets/healthCheckFailed.css";
+const t = "_database_11ki8_1", s = "_spin_11ki8_1", o = "_iot_11ki8_16", _ = "_platform_11ki8_17", a = "_other_11ki8_18", i = "_crossedOut_11ki8_22", r = {
+  database: t,
+  spin: s,
+  iot: o,
+  platform: _,
+  other: a,
+  crossedOut: i
+};
+export {
+  r as s
+};

package/dist/main.d.ts

@@ -11,6 +11,7 @@ export { Filter } from './components/Filter/Filter';
 export { GenericTable } from './components/GenericTable/GenericTable';
 export { HashTabView } from './components/HashTabView/HashTabView';
 export { HeaderFilter } from './components/HeaderFilter/HeaderFilter';
+export { HealthCheckFailed } from './components/HealthCheckFailed/HealthCheckFailed';
 export { Iconify } from './components/Iconify/Iconify';
 export { InfoGroup } from './components/InfoGroup/InfoGroup';
 export { ListArea } from './components/ListArea/ListArea';

package/dist/main.js

@@ -3,67 +3,69 @@ import { AlertBanner as t } from "./components/AlertBanner/AlertBanner.js";
 import { BaseView as p } from "./components/BaseView/BaseView.js";
 import { BasicHeading as x } from "./components/BasicHeading/BasicHeading.js";
 import { BlockView as a } from "./components/BlockView/BlockView.js";
-import { ChipCard as n } from "./components/ChipCard/ChipCard.js";
+import { ChipCard as c } from "./components/ChipCard/ChipCard.js";
 import { ContextMenu as s } from "./components/ContextMenu/ContextMenu.js";
 import { DeleteModal as F } from "./components/DeleteModal/DeleteModal.js";
-import { Disclaimer as S } from "./components/Disclaimer/Disclaimer.js";
-import { EmptyView as T } from "./components/EmptyView/EmptyView.js";
-import { Filter as h } from "./components/Filter/Filter.js";
-import { GenericTable as w } from "./components/GenericTable/GenericTable.js";
-import { HashTabView as g } from "./components/HashTabView/HashTabView.js";
+import { Disclaimer as B } from "./components/Disclaimer/Disclaimer.js";
+import { EmptyView as S } from "./components/EmptyView/EmptyView.js";
+import { Filter as b } from "./components/Filter/Filter.js";
+import { GenericTable as u } from "./components/GenericTable/GenericTable.js";
+import { HashTabView as V } from "./components/HashTabView/HashTabView.js";
 import { HeaderFilter as A } from "./components/HeaderFilter/HeaderFilter.js";
-import { I } from "./Iconify-DoU6pP1o.js";
-import { InfoGroup as v } from "./components/InfoGroup/InfoGroup.js";
-import { ListArea as M } from "./components/ListArea/ListArea.js";
-import { LoadingSpinner as G } from "./components/LoadingSpinner/Default/LoadingSpinner.js";
-import { Modal as E } from "./components/Modal/Modal.js";
-import { OverflowTooltip as P } from "./components/OverflowTooltip/OverflowTooltip.js";
-import { ScrollbarX as X, ScrollbarY as Y } from "./components/Scrollbar/Scrollbar.js";
-import { SearchBar as q } from "./components/SearchBar/SearchBar.js";
-import { VerticalDivider as K } from "./components/VerticalDivider/VerticalDivider.js";
-import { FormCheckBox as Q } from "./components/FormComponents/FormCheckBox/FormCheckBox.js";
-import { FormDatePicker as W } from "./components/FormComponents/FormDatePicker/FormDatePicker.js";
-import { FormRadio as _ } from "./components/FormComponents/FormRadio/FormRadio.js";
-import { FormSelect as rr } from "./components/FormComponents/FormSelect/FormSelect.js";
-import { FormSlider as er } from "./components/FormComponents/FormSlider/FormSlider.js";
-import { FormText as mr } from "./components/FormComponents/FormText/FormText.js";
-import { AvailableCustomIcons as fr } from "./enums/AvailableCustomIcons.js";
-import { ThemeColor as ir } from "./enums/ThemeColor.js";
-import { u as lr } from "./useBreakpoints-MzTZ0tCT.js";
-import { capitalizeFirstLetters as cr, trimLeadingAndTrailingSpaces as sr } from "./services/UtilService.js";
+import { HealthCheckFailed as H } from "./components/HealthCheckFailed/HealthCheckFailed.js";
+import { I as L } from "./Iconify-DoU6pP1o.js";
+import { InfoGroup as M } from "./components/InfoGroup/InfoGroup.js";
+import { ListArea as G } from "./components/ListArea/ListArea.js";
+import { LoadingSpinner as E } from "./components/LoadingSpinner/Default/LoadingSpinner.js";
+import { Modal as P } from "./components/Modal/Modal.js";
+import { OverflowTooltip as X } from "./components/OverflowTooltip/OverflowTooltip.js";
+import { ScrollbarX as j, ScrollbarY as q } from "./components/Scrollbar/Scrollbar.js";
+import { SearchBar as K } from "./components/SearchBar/SearchBar.js";
+import { VerticalDivider as Q } from "./components/VerticalDivider/VerticalDivider.js";
+import { FormCheckBox as W } from "./components/FormComponents/FormCheckBox/FormCheckBox.js";
+import { FormDatePicker as _ } from "./components/FormComponents/FormDatePicker/FormDatePicker.js";
+import { FormRadio as rr } from "./components/FormComponents/FormRadio/FormRadio.js";
+import { FormSelect as er } from "./components/FormComponents/FormSelect/FormSelect.js";
+import { FormSlider as mr } from "./components/FormComponents/FormSlider/FormSlider.js";
+import { FormText as fr } from "./components/FormComponents/FormText/FormText.js";
+import { AvailableCustomIcons as ir } from "./enums/AvailableCustomIcons.js";
+import { ThemeColor as lr } from "./enums/ThemeColor.js";
+import { u as nr } from "./useBreakpoints-MzTZ0tCT.js";
+import { capitalizeFirstLetters as dr, trimLeadingAndTrailingSpaces as Fr } from "./services/UtilService.js";
 export {
   t as AlertBanner,
-  fr as AvailableCustomIcons,
+  ir as AvailableCustomIcons,
   p as BaseView,
   x as BasicHeading,
   a as BlockView,
-  n as ChipCard,
+  c as ChipCard,
   s as ContextMenu,
   F as DeleteModal,
-  S as Disclaimer,
-  T as EmptyView,
-  h as Filter,
-  Q as FormCheckBox,
-  W as FormDatePicker,
-  _ as FormRadio,
-  rr as FormSelect,
-  er as FormSlider,
-  mr as FormText,
-  w as GenericTable,
-  g as HashTabView,
+  B as Disclaimer,
+  S as EmptyView,
+  b as Filter,
+  W as FormCheckBox,
+  _ as FormDatePicker,
+  rr as FormRadio,
+  er as FormSelect,
+  mr as FormSlider,
+  fr as FormText,
+  u as GenericTable,
+  V as HashTabView,
   A as HeaderFilter,
-  I as Iconify,
-  v as InfoGroup,
-  M as ListArea,
-  G as LoadingSpinner,
-  E as Modal,
-  P as OverflowTooltip,
-  X as ScrollbarX,
-  Y as ScrollbarY,
-  q as SearchBar,
-  ir as ThemeColor,
-  K as VerticalDivider,
-  cr as capitalizeFirstLetters,
-  sr as trimLeadingAndTrailingSpaces,
-  lr as useBreakpoints
+  H as HealthCheckFailed,
+  L as Iconify,
+  M as InfoGroup,
+  G as ListArea,
+  E as LoadingSpinner,
+  P as Modal,
+  X as OverflowTooltip,
+  j as ScrollbarX,
+  q as ScrollbarY,
+  K as SearchBar,
+  lr as ThemeColor,
+  Q as VerticalDivider,
+  dr as capitalizeFirstLetters,
+  Fr as trimLeadingAndTrailingSpaces,
+  nr as useBreakpoints
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hortiview/shared-components",
   "description": "This is a shared component library. It should used in the HortiView platform and its modules.",
-  "version": "0.0.10012",
+  "version": "0.0.10027",
   "type": "module",
   "repository": "https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared",
   "author": "Falk Menge <falk.menge.ext@bayer.com>",