Hortiview Default Components

This is a component library that provides default components that possess default translations for the basic languages used in the HortiView Platform.

Supported languages are currently: English, spanish and turkish.

Install

npm i @hortiview/default-components

yarn add @hortiview/default-components

Important Note

To ensure that this library´s components always have access to the current platform language, it is mandatory to pass the language from the base props or from the i18n instance the components are wrapped in.

To do so please call the useChangeDefaultComponentsLanguage-hook in a place where you can access the current language. The current language has to be provided to the hook as a parameter. The hook only has to be called once inside of a module.

When using the current language from the base props this might look like shown in the following example:

import { useChangeDefaultComponentsLanguage } from '@hortiview/default-components';
import { useBasePropsStore } from './stores/BaseStore';

export const ModuleBase = () => {
  const currentLanguage = useBasePropsStore(state => state.currentLanguage);

  /**
   * needed to handle translations of the default components
   */
  useChangeDefaultComponentsLanguage(currentLanguage);

  return <AnyComponent />;
};

When using i18next this might look like shown in the following example:

import { useChangeDefaultComponentsLanguage } from '@hortiview/default-components';
import { AVAILABLE_LANGUAGE_CODES } from '@hortiview/shared-components';
import { useTranslation } from 'react-i18next';

export const ModuleBase = () => {
  const { i18n } = useTranslation();
  /**
   * needed to handle translations of the default components
   */
  useChangeDefaultComponentsLanguage(i18n.language as AVAILABLE_LANGUAGE_CODES);

  return <AnyComponent />;
};

Remarks

This library provides form components using react-hook-form. When you want to use these components please install react-hook-form before using them.

Available Components

1. DefaultFormNumber
2. DefaultLoadingSpinner
3. HealthCheckComponents
   1. DataBaseHealthCheck
   2. DefaultHealthCheck
   3. IotServiceHealthCheck
   4. PlatformHealthCheck
4. ImpatienceLoadingSpinner
5. OfflineView
6. DefaultAllowedComponent

Available Components

DefaultFormNumber

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.

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.

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.

If a custom text and type should be displayed please use the shared component <InfoCard /> and provide a custom title and subtitle.

DataBaseHealthCheck

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

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

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

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.

import { ImpatienceLoadingSpinner } from '@hortiview/default-components';

const [isLoading, setIsLoading] = useState(false);

/** add logic that changes state of isLoading */

if (isLoading) return <ImpatienceLoadingSpinner />;
return <DefaultComponent />;

GenericTable

The GenericTable is a component from @hortiview/shared-components including internationalized table strings, like Page or of in the pagination element. It has the same API, except the following properties: 'pageTranslation' | 'pageOfTranslation' | 'rowsPerPageTranslation'. These are omitted because the are set bei this component. As the other components in this library all languages supported by HortiView are included.

import { GenericTable } from '@hortiview/default-components';

<GenericTable<Hero>
  data={[
    {
      name: 'Peter Parker',
      alias: 'Spiderman',
    },
    {
      name: 'Clark Kent',
      alias: 'Superman',
    },
  ]}
  pagination={true}
/>;

OfflineView

Shows an offline state with icon, title, and subtitle. Use size 'small' inline and 'large' for full pages. If a custom text for title or subtitle should be displayed please use the shared component <OfflineView /> and pass your own values.

import { OfflineView } from '@hortiview/default-components';

<OfflineView />;

DefaultAllowedComponent

The DefaultAllowedComponent is a permission-aware wrapper that displays its children only if the user has the required permissions for a given entity. It uses the default disclaimer text with internationalization support. This component is useful for conditionally rendering content based on user rights in the HortiView platform.

Note: Wrap your usage in SharedComponentsPermissionProvider to provide the permission context. The default disclaimer text is automatically internationalized when useChangeDefaultComponentsLanguage is used.

Props:

• neededPermissions: Array of permissions required to view the content (e.g., [HVMainPermissions.FarmsRead]).
• entityIds: The entity ID for which permissions are checked (e.g., 'farm-org-123').
• disclaimer: If true, shows a disclaimer when permissions are missing.
• children: The content to render if the user has the required permissions.

Usage Example:

import { DefaultAllowedComponent } from '@hortiview/default-components';
import {
  InfoCard,
  HVMainPermissions,
  SharedComponentsPermissionProvider,
  ModulePadding,
} from '@hortiview/shared-components';

const userPermissions = {
  'farm-org-123': [HVMainPermissions.FarmsRead, HVMainPermissions.FarmsUpdate],
};
const activeOrganizationId = 'farm-org-123';

<SharedComponentsPermissionProvider
  userPermissions={userPermissions}
  activeOrganizationId={activeOrganizationId}
>
  <DefaultAllowedComponent
    neededPermissions={[HVMainPermissions.FarmsRead]}
    entityIds='farm-org-123'
    disclaimer={false}
  >
    <ModulePadding>
      <InfoCard
        title='You can see this content because you have the required FarmsRead permission!'
        subtitle='Permission Granted'
        type='done'
      />
    </ModulePadding>
  </DefaultAllowedComponent>
</SharedComponentsPermissionProvider>;