@hortiview/shared-components 2.27.4 → 2.28.0-alpha.fb31ea7e.1

package/README.md

@@ -1,1387 +0,0 @@
-# HortiView Shared Components
-
-This is a shared components library. It should be used in the HortiView platform and its modules.
-
-## Install
-
-`npm i @hortiview/shared-components`
-
-`yarn add @hortiview/shared-components`
-
-## Prerequisites
-
-This library is based on a public version of Bayer's Element component library.
-
-Use `yarn add @element-public/react-components @element-public/themes` or `npm i @element-public/react-components @element-public/themes` to add the packages to your solution.
-
-## Remarks
-
-For the best experience use [react-router](https://reactrouter.com/en/main) in your solution, because some of the component rely on properties like pathname, hash or components like `Link` out of `react-router`.
-
-Additionally the library provides form components using [react-hook-form](https://react-hook-form.com/get-started). When you want to use these components please install `react-hook-form` before using them.
-
-## Available Components:
-
-1. [AlertBanner](#alertbanner)
-1. [BaseView](#baseview)
-1. [BasicHeading](#basicheading)
-1. [BlockView](#blockview)
-1. [ChipCard](#chipcard)
-1. [ContextMenu](#contextmenu)
-1. [DeleteModal](#deletemodal)
-1. [Disclaimer](#disclaimer)
-1. [EmptyView](#emptyview)
-1. [ErrorBanner] (#errorbanner)
-1. [Filter](#filter)
-1. [FloatingActionButton](#floatingactionbutton)
-1. [FormattedNumberDisplay](#formattednumberdisplay)
-1. [FormComponents](#formcomponents)
-    1. [FormCheckBox](#formcheckbox)
-    1. [FormDatePicker](#formdatepicker)
-    1. [FormNumber](#formnumber)
-    1. [FormRadio](#formradio)
-    1. [FormSelect](#formselect)
-    1. [FormSlider](#formslider)
-    1. [FormText](#formtext)
-1. [GenericTable](#generictable)
-1. [HashTabView](#hashtabview)
-1. [HeaderFilter](#headerfilter)
-1. [InfoCard](#infocard)
-1. [InfoGroup](#infogroup)
-1. [Iconify](#iconify)
-1. [ListArea](#listarea)
-1. [LoadingSpinner](#loadingspinner)
-1. [Modal](#modal)
-1. [ModulePadding](#modulepadding)
-1. [OfflineView](#offlineview)
-1. [OnboardingBanner](#onboardingbanner)
-1. [OverflowTooltip](#overflowtooltip)
-1. [Permissions](#permissions)
-1. [SafeForm](#safeform)
-1. [ScrollBar](#scrollbar)
-1. [SearchBar](#searchbar)
-1. [Select](#select)
-1. [Stepper](#stepper)
-1. [VerticalDivider](#verticaldivider)
-
-## Available Utility Functions:
-
-1. [useBreakpoints](#usebreakpoints)
-1. [capitalizeFirstLetters](#capitalizefirstletters)
-1. [trimLeadingAndTrailingSpaces](#trimleadingandtrailingspaces)
-1. [getNumberAsLocaleString](#getnumberaslocalestring)
-1. [getFormattedDateTime](#getformatteddatetime)
-
-## Available constants
-
-1. [Languages and countries](#languages-and-countries)
-
-## Changelog
-
-[Changelog](./Changelog.md)
-
-## Available Components:
-
-### AlertBanner
-
-Presents an Banner containing important messages. Can used in different colors and you can add an optional action.
-
-```jsx
-import { AlertBanner } from '@hortiview/shared-components';
-
-<AlertBanner
-  text='My Alert'
-  color='danger' // | 'info' | 'success'
-  action={<MyButton />}
-/>;
-```
-
-### BaseView
-
-Can be used to show a kind off main and detail view. On the left side you will have a list of elements and on the right a detail section of the element selected.
-
-```jsx
-import { BaseListElement, BaseView } from '@hortiview/shared-components';
-import { Link, useLocation } from 'react-router-dom';
-
-const { pathname } = useLocation();
-
-const elements: BaseListElement[] = [
-  {
-    id: '1',
-    title: 'First',
-    subTitle: 'First Subtilte',
-    type: 'Primary',
-    icon: 'grid_view',
-    route: '/first',
-    component: <MyComponentToShowOnClick />,
-  },
-  {
-    id: '2',
-    title: 'Second',
-    subTitle: 'Second Subtilte',
-    type: 'Primary',
-    icon: 'add',
-    route: '/second',
-    component: <MyComponentToShowOnClickSecond />,
-  },
-];
-
-return (
-  <BaseView
-    routerLinkElement={Link}
-    pathname={pathname}
-    elements={elements}
-    heading='Header'
-    hasSearch
-    emptyText='Empty'
-  />
-);
-```
-
-### BasicHeading
-
-Provides a heading component with optional children which are rendered on the right side of the heading.
-
-```jsx
-import { BasicHeading } from '@hortiview/shared-components';
-
-<BasicHeading heading={'Header'}>
-  <button>Test</button>
-</BasicHeading>;
-```
-
-### BlockView
-
-This is a component showing blocks in a row/column view.
-
-```jsx
-import { BlockView, BlockDto } from '@hortiview/shared-components';
-
-const blocks: BlockDto = [
-  {
-    position: { row: 1, column: 1 },
-    fieldId: '1',
-  },
-];
-
-<BlockView blocks={blocks} columns={1} rows={1} />;
-```
-
-### ChipCard
-
-A card with a chip inside, used for displaying entities. The chip displays an icon and a label. Furthermore, it is wrapped by [OverflowTooltip](#overflowtooltip) to truncate long labels. The card takes per default the width of the parent container. You can also provide custom CSS via the `className` property.
-
-```jsx
-import { ChipCard } form '@hortiview/shared-components'
-
-<ChipCard icon='domain' label='Example Label' className='custom' />
-```
-
-### ContextMenu
-
-This is a component to render a menu button, that opens several action-points in a context-menu
-
-```jsx
-import { ContextMenu } from '@hortiview/shared-components';
-
-const actions = [
-  {
-    primaryText: 'Edit',
-    secondaryText: 'Open the edit dialog',
-    onClick: () => openEdit(param),
-    leadingBlock: 'edit',
-  },
-  {
-    primaryText: 'Delete',
-    secondaryText: 'Delete the item'
-    onClick: deleteItem,
-    leadingBlock: 'delete',
-  },
-];
-
-<ContextMenu actions={actions} />;
-```
-
-### DeleteModal
-
-A modal to confirm a deletion.
-
-It provides a loading state for the delete button to prevent multiple deletion attempts in a row. In this case, the button is disabled and a spinner is shown in the button.
-
-If a deletion is not possible, the button is also disabled and the specified `impossibleDeleteHeader` is shown.
-
-The button is also disabled when the user is offline, indicated by the `isOnline` prop. In this case, the [OfflineView](#offlineview) is shown.
-
-```jsx
-import { DeleteModal } from '@hortiview/shared-components';
-
-const [open, setOpen] = useState<string>();
-const onDelete = () => {
-  console.log('deleted');
-};
-
-<DeleteModal
-  icon='block'
-  open={open}
-  setOpen={setOpen}
-  onDelete={onDelete}
-  title={'DELETE'}
-  confirmButtonLabel={'Remove'}
-  cancelButtonLabel={'Cancel'}
-  deleteHeader={'Delete my block'}
-  impossibleDeleteHeader={'Block cannot be deleted'}
-  deleteBody={['block 1', 'block 2', 'block 3']}
-  isDeletePossible
-  isDeletePending={isDeleteRequestPending}
-  isOnline={isOnline}
-/>;
-```
-
-### Disclaimer
-
-A red notice or hint with to show in the ui.
-
-```jsx
-
-import { Disclaimer } form '@hortiview/shared-components'
-
-<Disclaimer text='Currently not available' subtext='Please try again later' icon='wifi_off' />
-
-```
-
-### EmptyView
-
-A basic view if no content is available.
-
-```jsx
-import { EmptyView } from '@hortiview/shared-components';
-
-<EmptyView title='No Content' subtitle='nothing' icon='grass' />;
-```
-
-### ErrorBanner
-
-Displays an error message with optional actions. Can be used below a header (default) or as a standalone banner (e.g., in a modal).
-
-```jsx
-import { ErrorBanner } from '@hortiview/shared-components';
-
-<ErrorBanner
-  title='Something went wrong'
-  description='An unexpected error occurred. Please try again or contact support.'
-  showBanner={true}
-  isOpen={true}
-  isStandalone={false} // set true for standalone usage
-  primaryActionLabel='Retry'
-  onPrimaryAction={() => alert('Retry clicked')}
-  secondaryActionLabel='Contact Support'
-  onSecondaryAction={() => alert('Support clicked')}
-/>;
-```
-
-**Usage notes:**
-
-- Use `isStandalone` for modal usage. Default style is for inline placement below a header.
-- Both action buttons are optional; omit their labels to hide them.
-
-### Filter
-
-A filter component, which provides a well designed filter experience. It contains a filter button and a modal for different select inputs.
-You need to provide some filter options in a `FilterData` array and handle the current filter selections.
-
-```jsx
-import { Filter } from '@hortiview/shared-components';
-import { useState } from 'react';
-
-const MyComponent = () => {
-  const [selectedFilters, setSelectedFilters] = useState([]);
-
-  const options = [
-    {
-      id: 'cars',
-      title: 'Cars',
-      availableOptions: [
-        {
-          id: 'bmw';
-          text: 'BMW';
-          icon: 'car';
-        },
-        {
-          id: 'vw';
-          text: 'Volkswagen';
-          icon: 'car';
-        }
-      ],
-    },
-    {
-      id: 'food',
-      title: 'Food',
-      availableOptions: [
-        {
-          id: 'icecream';
-          text: 'Icecream';
-          icon: 'food';
-        },
-        {
-          id: 'burger';
-          text: 'Burger';
-          icon: 'food';
-        }
-      ],
-    },
-  ];
-
-  return (
-    <Filter
-      modalCancelButtonText={'cancel'}
-      modalConfirmButtonText={'useFilter'}
-      clearFilterText={'clearFilter'}
-      closeCallback={filter => setSelectedFilters(filter)}
-      currentFilter={selectedFilters}
-      filterButtonText={'filterButton'}
-      filterModalTitle={'filterResults'}
-      filters={options}
-    />
-  );
-};
-
-export default MyComponent;
-```
-
-### FloatingActionButton
-
-A component to show a floating action button for mobile and tablet views, giving users quick access to one or 
-more contextual actions without taking permanent space in layout. 
-
-It automatically hides when no visible/allowed actions exist, 
-can trigger a single action directly or open a menu for multiple actions, 
-supports an offline fallback view.
-
-You can control the offset from the screen edges using `floatingButtonScreenOffsetType`, which includes
-presets for full-screen implementations and screens with a BottomAppBar.
-
-To prevent the FAB from blocking any elements in the rendered view, provide a DOM element selector to
-`floatingButtonPaddingInsertTarget`. A spacer element will be attached to this target, increasing its
-height by the appropriate amount.
-
-```jsx
-import { FloatingActionButton } from '@hortiview/shared-components';
-
-const actions = [...];
-
-<FloatingActionButton
-     actions={actions}
-     floatingButtonPaddingInsertTarget={'#fab-padding-target'}
-     isSingleActionTriggeredOnClick={false}
-     hasActionIconForSingleAction={false}
-/>;
-```
-
-### FormattedNumberDisplay
-
-A component to display a formatted number based on the given language code, wrapped in a given typography component to style it as needed.
-
-The typography component that is passed to the FormattedNumberDisplay needs the "children" property to which the formatted number will be added.
-
-```jsx
-import { FormattedNumberDisplay } from '@hortiview/shared-components';
-
-const TypoDisplay3 = (props: { children: React.ReactNode }) => {
-  return <TypoDisplay level={3}>{props.children}</TypoDisplay>;
-};
-
-<FormattedNumberDisplay typographyComponent={TypoDisplay3} languageCode='en-MX' value={12345.67} />;
-```
-
-### FormComponents
-
-The library provides some form components based on [react-hook-form](https://react-hook-form.com/). The components can only be use within a form provided by react-hook-form.
-So please add the package before you use the components.
-
-```
-yarn add react-hook-form
-```
-
-or
-
-```
-npm install react-hook-form
-```
-
-#### FormCheckBox
-
-Provides a checkbox form component
-
-```jsx
-import { FormCheckBox } from '@hortiview/shared-components';
-import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
-
-const formMethods = useForm<{ check: boolean }>({
-  mode: 'onSubmit',
-});
-
-const { handleSubmit } = formMethods;
-
-<FormProvider {...formMethods}>
-  <SafeForm onSubmit={handleSubmit(onSubmit)}>
-    <FormCheckBox<{ check: boolean }>
-      propertyName={`check`}
-      label={'My Checkbox'}
-      onChange={() => additionalOnChange()}
-      validate={validateFn}
-    />
-  </SafeForm>
-</FormProvider>;
-```
-
-#### FormDatePicker
-
-Provides a datepicker form component
-
-```jsx
-import { FormDatePicker } from '@hortiview/shared-components';
-import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
-
-const formMethods = useForm<{ birthday: string }>({
-  mode: 'onSubmit',
-});
-
-const { handleSubmit } = formMethods;
-
-<FormProvider {...formMethods}>
-  <SafeForm onSubmit={handleSubmit(onSubmit)}>
-    <FormDatePicker<{ birthday: string }>
-      propertyName={'birthday'}
-      label={'user.date-of-birth'}
-      maxRangeYear={0}
-    />
-  </SafeForm>
-</FormProvider>;
-```
-
-#### FormNumber
-
-Number input field that formats the users input depending on the user language. The component automatically sets the language specific thousand separators and only allows the language specific decimal separators.
-
-```jsx
-import { FormNumber } from '@hortiview/shared-components';
-import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
-
-const formMethods = useForm<{ birthday: string }>({
-  mode: 'onSubmit',
-});
-
-const { handleSubmit } = formMethods;
-
-<FormProvider {...formMethods}>
-  <SafeForm onSubmit={handleSubmit(onSubmit)}>
-    <FormNumber<{ price: number }>
-      propertyName='price'
-      label='module.price'
-      languageCode="es-MX"
-      decimalScale={5}
-      fixedDecimalScale={true}
-      allowNegative={false}
-      allowLeadingZeros={false}
-      prefix=" €"
-    />
-  </SafeForm>
-</FormProvider>;
-```
-
-#### FormRadio
-
-Provides a radio button form component
-
-```jsx
-import { FormRadio } from '@hortiview/shared-components';
-import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
-
-const formMethods = useForm<{ radioValue: string }>({
-  mode: 'onSubmit',
-});
-
-const { handleSubmit } = formMethods;
-
-<FormProvider {...formMethods}>
-  <SafeForm onSubmit={handleSubmit(onSubmit)}>
-     <FormRadio<{ radioValue: string }>
-        propertyName='radioValue'
-        options={[
-          { value: 'priced', label: 'Priced' },
-          { value: 'free', label: 'Free },
-        ]}
-      />
-  </SafeForm>
-</FormProvider>;
-```
-
-#### FormSelect
-
-Provides a select form component.
-
-> **Warning**: Don't set `menuPosition` when `hoisted` is true.
-
-```jsx
-import { FormSelect } from '@hortiview/shared-components';
-import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
-
-const formMethods = useForm<{ type: string }>({
-  mode: 'onSubmit',
-});
-
-const { handleSubmit } = formMethods;
-
-const typeOptions = [
-  {
-    id: 1,
-    value: 'Car',
-  },
-  {
-    id: 2,
-    value: 'Bike',
-  },
-];
-
-<FormProvider {...formMethods}>
-  <SafeForm onSubmit={handleSubmit(onSubmit)}>
-    <FormSelect<{ type: string }>
-      propertyName='type'
-      label='Type'
-      options={typeOptions}
-      valueKey='id'
-      textKey='value'
-      requiredText='required'
-      required
-    />
-  </SafeForm>
-</FormProvider>;
-```
-
-#### FormSlider
-
-Provides a slider form component
-
-```jsx
-import { FormSlider } from '@hortiview/shared-components';
-import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
-
-const formMethods = useForm<{ range: string }>({
-  mode: 'onSubmit',
-});
-
-const { handleSubmit } = formMethods;
-
-<FormProvider {...formMethods}>
-  <SafeForm onSubmit={handleSubmit(onSubmit)}>
-    <FormSlider<{ range: string }> propertyName='range' minValue={30} maxValue={90} step={30} />
-  </SafeForm>
-</FormProvider>;
-```
-
-#### FormText
-
-Provides a text form component
-
-```jsx
-import { FormText } from '@hortiview/shared-components';
-import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
-
-const formMethods = useForm<{ address: string }>({
-  mode: 'onSubmit',
-});
-
-const { handleSubmit } = formMethods;
-
-<FormProvider {...formMethods}>
-  <SafeForm onSubmit={handleSubmit(onSubmit)}>
-    <FormText<{ address: string }>
-      maxLength={200}
-      label='address'
-      propertyName='address'
-      required
-      requiredText='required'
-      textarea
-    />
-  </SafeForm>
-</FormProvider>;
-```
-
-### GenericTable
-
-A dynamic table, that renders a table based on a type and an array of data (of the specified type). It renders a card list if your are in mobile or tablet mode.
-
-```jsx
-import { GenericTable, CellTemplateProps, CellTemplate } from '@hortiview/shared-components';
-import {useTranslation} from 'react-router-dom';
-
-type DataType = {
-  id: string;
-  name: string;
-  users: User[];
-  description: string
-  field1: Date;
-}
-
-const filterArea = [
-      <Select onClick={filterLogic} />
-];
-
-const templates: CellTemplate = {
-  field1: (props: CellTemplateProps<DataType>) => {
-    const { field1 } = props.row.original;
-    return <Badge text={field1.toLocaleString()}/>
-  }
-}
-
-const getAction = (dataObject: DataType) => {
-  return [
-    {
-      primaryText: 'Edit Element',
-      secondaryText: 'in Modal',
-      onClick: () => openEdit(dataObject.id),
-      leadingBlock: 'edit',
-    },
-  ]
-}
-
-const { t } = useTranslation();
-const data: DataType[] = LoadData();
-
-const filteredData = useMemo(() => {
-  return filterLogic(data)
-})
-
-
-return <GenericTable<DataType>
-  data={filteredData}
-  tableActions={filterArea}
-  hiddenColumns={['id', 'users']}
-  order={[
-    'name',
-    'description',
-    'field1'
-  ]}
-  cellTemplates={templates}
-  headerTranslation={key => t(`overview.${key}`)}
-  noContentText={t('noText')}
-  pagination
-  getRowActions={getActions}
-/>
-```
-
-### HashTabView
-
-A tab view component, which can use the hash value in the url to render the tab regarding to the hash.
-Pass `window.location.hash` as hash prop as it is the most reliable hash value.
-When navigating back from a page with a `HashTabView`, the last page without hash will be shown.
-
-```jsx
-import { HashTabView, HashTab } from '@hortiview/shared-components';
-
-const tabs: HashTab[] = [
-  {
-    title: 'My Map',
-    hash: 'map',
-    leadingIcon: 'map',
-    component: <>My map Component to show in the tab</>,
-  },
-];
-
-<HashTabView tabs={tabs} elevation={1} />;
-```
-
-### HeaderFilter
-
-A filter dropdown component which can be used in headers like a tabview header. It supports a single filter value only.
-
-```jsx
-import { HeaderFilter } from '@hortiview/shared-components';
-
-const [filterValue, setFilterValue] = useState<string>();
-
-<HeaderFilter
-  heading={'Test'}
-  setFilter={setFilterValue}
-  filterValue={filterValue}
-  filterOptions={[
-    { value: 'test', label: 'Test' },
-    { value: 'different', label: 'Different' },
-  ]}
-/>
-```
-
-### InfoCard
-
-A screen that can be used to inform the user about the status of a process. 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.
-
-Note: These specific titles have been included in the default components.
-
-```jsx
-import { InfoCard } from '@hortiview/shared-components';
-
-if (isPlatformHealthy === false) {
-  return (
-    <InfoCard
-      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 (
-    <InfoCard
-      title='The data for this module is loading!'
-      subtitle='Please wait or come back later.'
-      type='database'
-    />
-  );
-}
-
-if (isIotServiceHealthy === false) {
-  return (
-    <InfoCard
-      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>
-  <InfoCard
-    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>
-  <InfoCard
-    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
-
-Renders a section with several information rendered next to each other (or below for mobile view)
-
-```jsx
-import { InfoGroup } from '@hortiview/shared-components';
-
-const fields: FieldItem[] = [
-  { label: 'FieldTitle', value: 'Value' },
-  { label: 'AnotherFieldTitle', value: 'ValueButInPrimaryColor', themeColor: 'primary' },
-  //render a component below the label
-  { label: 'StatusBadge', variant: 'embedded', component: <LabelBadge label='redLabel' themeColor='red'>}
-  //render a complex component without label
-  { label: 'ComplexComponent', component: <ComplexComponent />}
-]
-
-<InfoGroup fields={fields} />
-```
-
-You can also render a multiline section, that receives an array if FieldItem-Arrays instead of a single FieldItem-Array
-
-```jsx
-import { InfoGroup } from '@hortiview/shared-components';
-
-const multiLineFields: FieldItem[][] = [
-  [
-    { label: 'FieldTitle', value: 'Value' },
-    { label: 'AnotherFieldTitle', value: 'ValueButInPrimaryColor', themeColor: 'primary' }
-  ],
-  [
-    { label: 'LongField', value: 'VeryLongValueThatNeedsToBeDisplayedInANewLine'}
-  ],
-  [
-    { label: 'ComplexComponent', component: <ComplexComponent />},
-    { label: 'FieldTitle2', value: 'Value2' },
-    { label: 'FieldTitle3', value: 'Value3' },
-    { label: 'FieldTitle4', value: 'Value4' },
-  ]
-]
-
-<InfoGroup fields={multiLineFields} />
-
-```
-
-### Iconify
-
-Provides some custom icons based on the elements Icon API. Currently supported:
-
-- battery_0 | battery_20 | battery_50 | battery_80 | battery_100
-- block
-- block-delete
-- cloud-rain
-- cloud-sunny
-- cloud
-- farm-delete
-- farm
-- greenhouse-delete
-- subscription
-- wind
-
-```jsx
-import { Iconify } from '@hortiview/shared-components';
-
-<Iconify icon='wind' iconSize='large' />;
-```
-
-### ListArea
-
-Shows some items in a list. The list can be used as a navigation list and provides search. For the best experience use `react-router`.
-
-```jsx
-import { BaseListElement, ListArea } from '@hortiview/shared-components';
-import { Link, useLocation } from 'react-router-dom';
-
-const { pathname } = useLocation();
-
-const elements: BaseListElement[] = [{
-  route: `/my/route/${1}`,
-  id: 1,
-  title: 'name',
-  subTitle: 'sub-name',
-  icon: <Icon icon={'grass'} />,
-}]
-
-<ListArea
-  hasSearch
-  searchPlaceholder={'Search....'}
-  elements={elements}
-  isSorted={false}
-  pathname={pathname}
-  routerLinkElement={Link}
-/>;
-```
-
-### LoadingSpinner
-
-Renders a loading spinner. The loading spinner can be customized in size, text and color. It can also be centered.
-
-```JSX
-import { LoadingSpinner } from  '@hortiview/shared-components';
-
-const [loading, setLoading] = useState(false)
-
-//logic that changes state of loading to true
-
-if(loading) return <LoadingSpinner />
-return <DefaultComponent />
-```
-
-There is also a big loading spinner, that blurs the background and renders an spinning hortiview-logo.
-
-```JSX
-import { LoadingSpinner } from  '@hortiview/shared-components';
-
-const [loading, setLoading] = useState(false)
-
-const onSubmit = () => {
-  setLoading(true);
-  await someComplexLogic();
-  setLoading(false);
-}
-return <>
-  {loading && <LoadingSpinner size='big' text='Loading something ...' />}
-  <Form obSubmit={onSubmit} />
-  <Button type='submit' />
-</>
-```
-
-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
-import { LoadingSpinner } from  '@hortiview/shared-components';
-
-const [loading, setLoading] = useState(false)
-
-const onSubmit = () => {
-  setLoading(true);
-  await someComplexLogicThatTakesVeryLong();
-  setLoading(false);
-}
-return <>
-  {loading && <LoadingSpinner text='Loading something ...' impatienceTimeout={20} impatienceMessage={'Something takes longer than expected'} />}
-  <Form obSubmit={onSubmit} />
-  <Button type='submit' />
-</>
-```
-
-### Modal
-
-Provides the normal Element 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).
-This will set the modal size on an area between the mobile controls.
-
-The modal also includes a custom header, which has a close button of type `button`.
-The base Element design button has type `submit`, which breaks forms inside of the modal.
-Please provide `onClose` and `title` props to get it work properly.
-
-```jsx
-import { Modal } from '@hortiview/shared-components';
-
-<Modal modalSize='fullscreen'>
-  <div>Content</div>
-</Modal>;
-```
-
-### ModulePadding
-
-Provides a responsive padding component for modules according to the HV platform UI guidelines, based on the Bayer Element padding component.
-
-Currently, the padding is set to 8px on mobile/tablet and 16px on desktop.
-
-> **Strong recommendation**: If your module does not require any fullscreen features, we highly encourage you to add the `ModulePadding` around your module content to ensure a consistent user experience within the rest of the platform.
-
-```jsx
-import { ModulePadding } from '@hortiview/shared-components';
-
-<ModulePadding>
-  <div>Content</div>
-</ModulePadding>;
-```
-
-### OfflineView
-
-Shows an offline state with icon, title, and optional subtitle. Use `size` 'small' inline and 'large' for full pages.
-
-```jsx
-import { OfflineView } from '@hortiview/shared-components';
-
-<OfflineView title='Title' subtitle='Subtitle' />;
-```
-
-### OnboardingBanner
-
-A responsive onboarding banner that adapts its layout for desktop and mobile.
-
-- **Desktop:** Media content is displayed to the _right_ of the description
-- **Mobile:** Media content appears _above_ the description
-
-```jsx
-import { OnboardingBanner } from '@hortiview/shared-components';
-
-<OnboardingBanner headline='Hello' />;
-```
-
-### OverflowTooltip
-
-Provides a tooltip and overflow behavior of a given text value.
-
-```jsx
-import { OverflowTooltip } from '@hortiview/shared-components';
-import { TypoBody } from '@element-public/react-components';
-
-const longText =
-  'This is a very long text that needs to be truncated and shown with a tooltip when it overflows.';
-
-<OverflowTooltip text={longText}>
-  <TypoBody>{longText}</TypoBody>
-</OverflowTooltip>;
-```
-
-### Permissions
-
-This shared library provides different hooks and component that can be used to check wether a user is allowed to proceed with an action, view a component or not.
-
-In order for this component to correctly determine whether a user has the appropriate permissions, a basic setup must be implemented. The following section explains how:
-
-#### Setup
-
-#### 1. Wrap your app with the SharedComponentsPermissionProvider
-
-In your main application file (e.g., `App.tsx` or `main.tsx`), wrap your app with the `PermissionProvider`:
-
-```tsx
-import { SharedComponentsPermissionProvider } from '@hortiview/shared-components';
-
-function App() {
-  // Get these values from your store or state management
-  // In this example `Zustand` stores are used
-  const userPermissions = useClaimsIdentityStore(state => state.userPermissions);
-  const activeOrganizationId = useActiveOrganizationStore(state => state.activeOrganization?.id);
-
-  return (
-    <SharedComponentsPermissionProvider
-      userPermissions={userPermissions}
-      activeOrganizationId={activeOrganizationId}
-    >
-      <YourAppComponents />
-    </SharedComponentsPermissionProvider>
-  );
-}
-```
-
-#### 2.1 Use the Allowed component anywhere in your app
-
-Once the provider is set up, you can use `<Allowed />` anywhere in your component tree without passing props. The wrapped component is conditionally rendered depending on the user permissions:
-
-```tsx
-import { Allowed } from '@hortiview/shared-components';
-
-function MyComponent() {
-  return (
-    <Allowed neededPermissions={["organization-read", "organization-edit"]} entityId={organizationId}>
-      <OrganizationSettings />
-    <Allowed/>
-  );
-}
-```
-
-#### 2.2 Use the useIsAllowed-hook anywhere in your app
-
-The `useIsAllowed`-hook works similar to the `<Allowed />` component. Instead of being used as a wrapper it returns a boolean. That value can be used to conditionally render components or control application logic based on user permissions.
-
-```tsx
-import { useIsAllowed } from '@hortiview/shared-components';
-
-function MyComponent() {
-  const isAllowed = useIsAllowed();
-
-  // Check if user has permission to edit members for the current organization
-  const canEditMembers = isAllowed(['member-edit', 'member-create'], orgId);
-
-  return <MembersList isDisabled={!canEditMembers} />;
-}
-```
-
-#### 2.3 Use the AllowedButton or AllowedIconButton anywhere in your app
-
-Once the provider is set up, you can use `AllowedButton` and `AllowedIconButton` anywhere in your component tree without passing props. Both buttons expect a permissions array and call the `useIsAllowed` under the hood.
-
-> **Note:** Both components will automatically hide (return `null`) if the user doesn't have the required permissions. The button will only render when the user is authorized.
-
-**AllowedButton Example:**
-
-```jsx
-import { AllowedButton, Permission } from '@hortiview/shared-components';
-
-function FarmActions({ farmId }) {
-  return (
-    <div>
-      <AllowedButton
-        data-testid='edit-season-button'
-        label='Edit Season'
-        permissions={['season-edit']}
-        entityId={organizationId}
-        buttonVariant='filled'
-        onClick={() => handleEditSeason(seasonId)}
-      />
-
-      <AllowedButton
-        data-testid='delete-season-button'
-        label='Delete Season'
-        permissions={['season-delete']}
-        entityId={organizationId}
-        buttonVariant='danger'
-        onClick={() => handleDeleteSeason(seasonId)}
-      />
-    </div>
-  );
-}
-```
-
-**AllowedIconButton Example:**
-
-```jsx
-import { AllowedIconButton, Permission } from '@hortiview/shared-components';
-
-function BlockActions({ blockId, farmId }) {
-  return (
-    <div>
-      <AllowedIconButton
-        data-testid='edit-block-icon'
-        icon='edit'
-        permissions={['block-edit', 'block-create']}
-        entityId={farmId}
-        iconButtonVariant='filled-primary'
-        onClick={() => handleEditBlock(blockId)}
-      />
-
-      <AllowedIconButton
-        data-testid='delete-block-icon'
-        icon='delete'
-        permissions={['block-delete']}
-        entityId={farmId}
-        iconButtonVariant='filled-danger'
-        onClick={() => handleDeleteBlock(blockId)}
-      />
-    </div>
-  );
-}
-```
-
-### SafeForm
-
-A wrapper around a form that prevents accidental submission when pressing Enter in input fields.
-
-- It handles the 'keydown' event and intercepts the Enter key press.
-- If the focused element is a button, submit button or text area, it allows the default behavior.
-- Otherwise, it prevents the default action to avoid unintended submissions.
-
-```jsx
-import { SafeForm } from '@hortiview/shared-components';
-
-<FormProvider {...formMethods}>
-  <SafeForm onSubmit={handleSubmit(onSubmitForm)}>
-    <Group direction='vertical' primaryAlign='space-between'>
-      {children}
-      <Button type='submit'>Submit</Button>
-    </Group>
-  </SafeForm>
-</FormProvider>;
-```
-
-### ScrollBar
-
-Provides a scrollbar in hortiview styling. Add it a classname on your component.
-
-```jsx
-
-import { ScrollbarY, ScrollbarX } from '@hortiview/shared-components';
-
-<div className={`${ScrollbarY}`}>
-  Height content
-<div>
-
-<div className={`${ScrollbarX}`}>
-  Wide content
-<div>
-
-```
-
-### SearchBar
-
-Provides a searchbar component.
-
-```jsx
-import { SearchBar } from '@hortiview/shared-components';
-
-const [searchValue, setSearchValue] = useState('');
-<SearchBar
-  searchTerm={searchValue}
-  setSearchTerm={setSearchValue}
-  dense
-  placeholder={'Search....'}
-/>;
-```
-
-### Select
-
-Provides the normal Element select with some additional presets and props:
-
-- `menuMaxHeight` has a default value of `15rem` (can be overwritten)
-- custom styles are applied that improve the `hoisted` select menu behavior and avoid two scrolling bars on multi select menus
-- custom portal styles can be passed via the `portalClassName` prop - only works when `portalContainer` is not set
-
-> **Warning**: Don't set `menuPosition` when `hoisted` is true.
-
-```jsx
-import { Select } from '@hortiview/shared-components';
-...
-
-<Select
-  label='Contact during review'
-  options={contacts}
-  hoisted
-  textKey='text'
-  valueKey='id'
-  onChange={handleContactSelect}
-  value={contact}
-  helperText='required'
-  variant='outlined'
-  portalClassName={styles.portal}
-/>;
-```
-
-### Stepper
-
-Provides a simple stepper component, which contains the step indicators, a title text and buttons to navigate forwards and backwards.
-The component is available in two types:
-
-- 'default' (steps as dots and a centered step title below them)
-- 'description' (n/n numerical progress, description/title right of it)
-
-**Be aware that you need to control the Stepper flow by your own, like:**
-
-```jsx
-import { Step, Stepper } from '@hortiview/shared-components';
-
-const [currentStep, setCurrentStep] = useState(0);
-
-const steps: Step[] = [
-  {
-    name: 'first',
-    step: 0,
-    title: 'First Step',
-    optional: false,
-    nextButtonProps: {
-      onClick: () => { setCurrentStep(1)},
-      label: 'Next',
-      showArrowIcon: true,
-    },
-    prevButtonProps: {
-      onClick: () => { // handle cancel action },
-      label: 'Cancel',
-      showArrowIcon: false,
-    },
-  },
-  {
-    name: 'second',
-    step: 1,
-    title: 'Second Step',
-    optional: true,
-    nextButtonProps: {
-      onClick: () => { // handle finish action },
-      label: 'Send',
-      showArrowIcon: false,
-    },
-    prevButtonProps: {
-      onClick: () => { setCurrentStep(0)},
-      label: 'Back',
-      showArrowIcon: false,
-    },
-  },
-];
-
-<Stepper
-  type={'default'}
-  steps={steps}
-  currentStep={currentStep}
-/>;
-```
-
-### VerticalDivider
-
-Provides a simple vertical divider.
-
-```jsx
-import { VerticalDivider } from '@hortiview/shared-components';
-
-<VerticalDivider className={'custom'} height='3rem' />;
-```
-
-## Available Utility Functions:
-
-### useBreakpoints
-
-Hook that returns the current breakpoint. It uses the following breakpoints:
-
-- xs: 0-599px
-- sm: 600-719px
-- md: 720-839px
-- lg: 840-1023px
-- xl: 1024-1439px
-- xxl: 1440px and up
-
-Additional breakpoints considering the navbar width
-
-- lg-nav: (840 + 256) - (1023 + 256)px
-- xl-nav: (1024 + 256) - (1439 + 256)px
-- xxl-nav: (1440 + 256)px and up
-
-They are combined as follows:
-
-- isMobile: xs
-- isTablet: sm, md
-- isDesktop: lg, xl, xxl
-- isDesktopNavbar: lg-nav, xl-nav, xxl-nav
-
-### capitalizeFirstLetters
-
-Capitalizes the first letter of every word in a given text string
-
-### trimLeadingAndTrailingSpaces
-
-This function can be used when sending form data to the BE (see the example below).
-It removes leading and trailing spaces from all object properties that are typeof string.
-
-```typescript
-const onSubmit = async (data: Record<string, string>) => {
-  const trimmedData = trimLeadingAndTrailingSpaces(data);
-
-  const loginResponse = await login(trimmedData.email, trimmedData.password);
-  if (loginResponse.ok) {
-    console.log('logged in');
-  }
-};
-```
-
-Important note: If the type from the data is an interface the data need to be spread to avoid the following error.
-https://github.com/microsoft/TypeScript/issues/15300
-
-```typescript
-const trimmedData = trimLeadingAndTrailingSpaces({ ...data });
-```
-
-### getNumberAsLocaleString
-
-Receives a number and returns the value as a locale string.
-Note: Should only be used for displaying numbers, not for calculations or values that are supposed to be send to the backend.
-
-```typescript
-const userLocale = 'es-MX';
-
-const overlineTitle = `${getNumberAsLocaleString(userLocale, totalArea, 5)} ${t(
-  'squaremeter-unit'
-)}`;
-```
-
-### getFormattedDateTime
-
-Formats a date (string) with Intl.DateTimeFormat.
-If locale is a plain code ("en" | "es" | "tr"), it’s mapped to a regional tag ("en-US", "es-MX", "tr-TR").
-
-For consistency, please use `DATE_FORMAT`, `TIME_FORMAT` and `DATE_TIME_FORMAT`.
-
-```typescript
-import { DATE_FORMAT, TIME_FORMAT, DATE_TIME_FORMAT } from '@hortiview/shared-components';
-
-getFormattedDateTime('2025-10-02T14:30:00Z', 'en-US', DATE_FORMAT);
-// -> 10/02/2025
-getFormattedDateTime('2025-10-02T14:30:00Z', 'es-MX', TIME_FORMAT);
-// -> 04:30 p.m.
-getFormattedDateTime('2025-10-02T14:30:00Z', 'tr-TR', DATE_TIME_FORMAT);
-// -> 02.10.2025 ÖS 04:30
-```
-
-## Available constants
-
-### Languages and countries
-
-The file contains different languages and country constants as well as language ids, which represents the available languages and countries of the hortiview platform.
-
-The supported languages are:
-
-- English (en)
-- Spanish (es)
-- Turkish (tr)
-
-The supported countries are:
-
-- Spain (esp)
-- Mexico (mex)
-- Turkey (tur)
-
-```typescript
-const languageCode = 'en' as AVAILABLE_LANGUAGE_CODES;
-const languageCountryCode = LANGUAGE_CODES_MAPPER[languageCode];
-console.log(languageCountryCode); // 'en-US'
-```