@hortiview/default-components 0.0.11924 → 0.0.11935

package/README.md

@@ -31,10 +31,46 @@ This library provides form components using [react-hook-form](https://react-hook
 
 Number input field that formats the users input depending on the input language. The component automatically sets the language specific thousand separators and only allows the language specific decimal separator.
 
+```tsx
+import { DefaultFormNumber } from '@hortiview/default-components';
+import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
+
+const formMethods = useForm<{ birthday: string }>({
+  mode: 'onSubmit',
+});
+
+const { handleSubmit } = formMethods;
+
+<FormProvider {...formMethods}>
+  <form onSubmit={handleSubmit(onSubmit)}>
+    <DefaultFormNumber<{ price: number }>
+      propertyName='price'
+      label='module.price'
+      decimalScale={5}
+      fixedDecimalScale={true}
+      allowNegative={false}
+      allowLeadingZeros={false}
+      prefix=' €'
+    />
+  </form>
+</FormProvider>;
+```
+
 ### DefaultLoadingSpinner
 
 Renders a loading spinner. The loading spinner can be customized in size and color. It can also be centered.
 
+```TSX
+import { DefaultLoadingSpinner } from  '@hortiview/default-components';
+
+const [isLoading, setIsLoading] = useState(false)
+
+/** add logic that changes state of isLoading */
+
+if (isLoading) return <DefaultLoadingSpinner />
+return <DefaultComponent />
+```
+
 ### HealthCheckComponents
 
 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 default components provided here to ensure a consistent user experience for the HV platform.
@@ -43,13 +79,68 @@ If a custom text and type should be displayed please use the shared component `<
 
 #### DataBaseHealthCheck
 
-#### DefaultHealthCheck
+```TSX
+import { DataBaseHealthCheck } from  '@hortiview/default-components';
+
+const [isHealthy, setIsHealthy] = useState(false)
+
+/** add logic that changes state of isHealthy */
+
+if (!isHealthy) return <DataBaseHealthCheck />
+return <DefaultComponent />
+```
+
+#### DataBaseHealthCheck
+
+```TSX
+import { DataBaseHealthCheck } from  '@hortiview/default-components';
+
+const [isHealthy, setIsHealthy] = useState(false)
+
+/** add logic that changes state of isHealthy */
+
+if (!isHealthy) return <DataBaseHealthCheck />
+return <DefaultComponent />
+```
 
 #### IotServiceHealthCheck
 
+```TSX
+import { IotServiceHealthCheck } from  '@hortiview/default-components';
+
+const [isHealthy, setIsHealthy] = useState(false)
+
+/** add logic that changes state of isHealthy */
+
+if (!isHealthy) return <IotServiceHealthCheck />
+return <DefaultComponent />
+```
+
 #### PlatformHealthCheck
 
+```TSX
+import { PlatformHealthCheck } from  '@hortiview/default-components';
+
+const [isHealthy, setIsHealthy] = useState(false)
+
+/** add logic that changes state of isHealthy */
+
+if (!isHealthy) return <PlatformHealthCheck />
+return <DefaultComponent />
+```
+
 ### ImpatienceLoadingSpinner
 
 This Loading spinner will automatically change to a specific text, after a certain waiting time, the time is adjustable.
 The default waiting time are 10 seconds.
+
+```TSX
+import { ImpatienceLoadingSpinner } from  '@hortiview/default-components';
+
+const [isLoading, setIsLoading] = useState(false)
+
+/** add logic that changes state of isLoading */
+
+if (isLoading) return <ImpatienceLoadingSpinner />
+return <DefaultComponent />
+```

package/dist/{HealthCheckFailed-D-HxxKaW.js → HealthCheckFailed-j1XFU5px.js}

@@ -1,8 +1,8 @@
 import { jsx as W, jsxs as We } from "react/jsx-runtime";
-import { _ as y, N, R as e, b as A, L as Z, r as me, h as Ie, f as je, p as Ae, a as Fe, q as ee, d as Be, I as xe } from "./useTranslation-DCJK5-ax.js";
+import { _ as y, N, R as e, b as A, L as Z, r as me, h as Ie, f as je, p as Ae, a as Fe, q as ee, d as Be, I as xe } from "./useTranslation-Bh0VR1ML.js";
 import i, { forwardRef as k, useRef as D, useImperativeHandle as j, useEffect as G, useCallback as Le, useState as ue, useMemo as ne, createContext as Me, useLayoutEffect as qe } from "react";
-import { U as ye } from "./component-DsB0poTj-DaqoXt8b.js";
-import { a as Pe, n as He, f as we, l as Ve } from "./index.es-D-CKRzIB-DytY6U2C.js";
+import { U as ye } from "./component-DsB0poTj-B4NF-JCy.js";
+import { a as Pe, n as He, f as we, l as Ve } from "./index.es-D-CKRzIB-Cv9zF1oG.js";
 import './assets/HealthCheckFailed.css';const Ge = {
   /**
    * The css class name to be passed through to the component markup.

package/dist/{InternationalizationWrapper-f8wtvSQv.js → InternationalizationWrapper-BtWuzVFG.js}

@@ -1,6 +1,6 @@
 import { jsx as r } from "react/jsx-runtime";
 import { createContext as n, useMemo as c, createElement as m, useEffect as i } from "react";
-import { i as t } from "./i18n-BfBMXJfT.js";
+import { i as t } from "./i18n-DIprVS_u.js";
 const p = n();
 class N {
   constructor() {

package/dist/{LoadingSpinner-cKWdZk2k.js → LoadingSpinner-BxqY1o89.js}

@@ -1,7 +1,7 @@
 import { jsx as c, jsxs as R } from "react/jsx-runtime";
-import { U as M, N as j, _ as W, h as P, p as I, a as U, f as F, R as l, b as H } from "./useTranslation-DCJK5-ax.js";
+import { U as M, N as j, _ as W, h as P, p as I, a as U, f as F, R as l, b as H } from "./useTranslation-Bh0VR1ML.js";
 import t, { useState as V, useEffect as k, useMemo as K, forwardRef as q, useRef as O, useImperativeHandle as Y, useCallback as Z } from "react";
-import { l as G, f as B, n as J, a as Q } from "./index.es-D-CKRzIB-DytY6U2C.js";
+import { l as G, f as B, n as J, a as Q } from "./index.es-D-CKRzIB-Cv9zF1oG.js";
 import './assets/LoadingSpinner.css';const X = "_loadingBigOverlay_7dxo1_1", ee = "_bigLoadSpinnerCard_7dxo1_12", re = "_bigLoadSpinnerCardText_7dxo1_27", te = "_logo_7dxo1_33", x = {
   loadingBigOverlay: X,
   bigLoadSpinnerCard: ee,

package/dist/{component-DsB0poTj-DaqoXt8b.js → component-DsB0poTj-B4NF-JCy.js}

@@ -1,4 +1,4 @@
-import { h as T, f as b, p as v, a as E } from "./useTranslation-DCJK5-ax.js";
+import { h as T, f as b, p as v, a as E } from "./useTranslation-Bh0VR1ML.js";
 function I(r, i) {
   var t = r.matches || r.webkitMatchesSelector || r.msMatchesSelector;
   return t.call(r, i);