@hortiview/default-components 0.0.11924 → 0.0.11933

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hortiview/default-components",
   "description": "This is a component library that should be used in the HortiView platform and its modules. The components provided here have default translation strings.",
-  "version": "0.0.11924",
+  "version": "0.0.11933",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -15,6 +15,12 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
+  "keywords": [
+    "HortiView",
+    "React",
+    "TranslatedComponents",
+    "ComponentLibrary"
+  ],
   "scripts": {
     "dev": "vite",
     "build": "tsc --p ./tsconfig-build.json && vite build",
@@ -30,7 +36,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.51.2",
-    "react-router-dom": "^6.22.3"
+    "react-router-dom": "^6.22.3",
+    "@hortiview/shared-components": "^0.0.11881"
   },
   "devDependencies": {
     "@element-public/react-components": "2.0.0-alpha.1",