@hortiview/shared-components 0.0.9178 → 0.0.9183

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -21,7 +21,7 @@ For the best experience use [react-router](https://reactrouter.com/en/main) in y
21
21
 
22
22
  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.
23
23
 
24
- ## Available packages:
24
+ ## Available Components:
25
25
 
26
26
  1. [AlertBanner](#alertbanner)
27
27
  1. [BaseView](#baseview)
@@ -53,6 +53,14 @@ Additionally the library provides form components using [react-hook-form](https:
53
53
  1. [SearchBar](#searchbar)
54
54
  1. [VerticalDivider](#verticaldivider)
55
55
 
56
+ ## Available Utility Functions:
57
+
58
+ 1. [useBreakpoints](#usebreakpoints)
59
+ 1. [capitalizeFirstLetters](#capitalizefirstletters)
60
+ 1. [trimLeadingAndTrailingSpaces](#trimleadingandtrailingspaces)
61
+
62
+ ## Available Components:
63
+
56
64
  ### AlertBanner
57
65
 
58
66
  Presents an Banner containing important messages. Can used in different colors and you can add an optional action.
@@ -773,3 +781,56 @@ import { VerticalDivider } from '@hortiview/shared-components';
773
781
 
774
782
  <VerticalDivider className={'custom'} height='3rem' />;
775
783
  ```
784
+
785
+ ## Available Utility Functions:
786
+
787
+ ### useBreakpoints
788
+
789
+ Hook that returns the current breakpoint. It uses the following breakpoints:
790
+
791
+ - xs: 0-599px
792
+ - sm: 600-719px
793
+ - md: 720-839px
794
+ - lg: 840-1023px
795
+ - xl: 1024-1439px
796
+ - xxl: 1440px and up
797
+
798
+ Additional breakpoints considering the navbar width
799
+
800
+ - lg-nav: (840 + 256) - (1023 + 256)px
801
+ - xl-nav: (1024 + 256) - (1439 + 256)px
802
+ - xxl-nav: (1440 + 256)px and up
803
+
804
+ They are combined as follows:
805
+
806
+ - isMobile: xs
807
+ - isTablet: sm, md
808
+ - isDesktop: lg, xl, xxl
809
+ - isDesktopNavbar: lg-nav, xl-nav, xxl-nav
810
+
811
+ ### capitalizeFirstLetters
812
+
813
+ Capitalizes the first letter of every word in a given text string
814
+
815
+ ### trimLeadingAndTrailingSpaces
816
+
817
+ This function can be used when sending form data to the BE (see the example below).
818
+ It removes leading and trailing spaces from all object properties that are typeof string.
819
+
820
+ ```typescript
821
+ const onSubmit = async (data: Record<string, string>) => {
822
+ const trimmedData = trimLeadingAndTrailingSpaces(data);
823
+
824
+ const loginResponse = await login(trimmedData.email, trimmedData.password);
825
+ if (loginResponse.ok) {
826
+ console.log('logged in');
827
+ }
828
+ };
829
+ ```
830
+
831
+ Important note: If the type from the data is an interface the data need to be spread to avoid the following error.
832
+ https://github.com/microsoft/TypeScript/issues/15300
833
+
834
+ ```typescript
835
+ const trimmedData = trimLeadingAndTrailingSpaces({ ...data });
836
+ ```
package/dist/main.d.ts CHANGED
@@ -29,7 +29,7 @@ export { FormText } from './components/FormComponents/FormText/FormText';
29
29
  export { AvailableCustomIcons } from './enums/AvailableCustomIcons';
30
30
  export { ThemeColor } from './enums/ThemeColor';
31
31
  export { useBreakpoints } from './hooks/useBreakpoints';
32
- export { capitalizeFirstLetters } from './services/UtilService';
32
+ export { capitalizeFirstLetters, trimLeadingAndTrailingSpaces } from './services/UtilService';
33
33
  export type { ActionProps } from './components/ContextMenu/ContextMenu';
34
34
  export type { FormSelectOption } from './components/FormComponents/FormSelect/FormSelect';
35
35
  export type { FormTextProps } from './components/FormComponents/FormText/FormText';
package/dist/main.js CHANGED
@@ -3,18 +3,18 @@ import { AlertBanner as t } from "./components/AlertBanner/AlertBanner.js";
3
3
  import { BaseView as p } from "./components/BaseView/BaseView.js";
4
4
  import { BasicHeading as x } from "./components/BasicHeading/BasicHeading.js";
5
5
  import { BlockView as a } from "./components/BlockView/BlockView.js";
6
- import { ChipCard as c } from "./components/ChipCard/ChipCard.js";
6
+ import { ChipCard as n } from "./components/ChipCard/ChipCard.js";
7
7
  import { ContextMenu as s } from "./components/ContextMenu/ContextMenu.js";
8
8
  import { DeleteModal as F } from "./components/DeleteModal/DeleteModal.js";
9
- import { Disclaimer as C } from "./components/Disclaimer/Disclaimer.js";
10
- import { EmptyView as b } from "./components/EmptyView/EmptyView.js";
11
- import { Filter as u } from "./components/Filter/Filter.js";
12
- import { GenericTable as T } from "./components/GenericTable/GenericTable.js";
13
- import { HashTabView as k } from "./components/HashTabView/HashTabView.js";
14
- import { HeaderFilter as I } from "./components/HeaderFilter/HeaderFilter.js";
15
- import { I as A } from "./Iconify-DV7QhHmp.js";
16
- import { InfoGroup as L } from "./components/InfoGroup/InfoGroup.js";
17
- import { ListArea as g } from "./components/ListArea/ListArea.js";
9
+ import { Disclaimer as S } from "./components/Disclaimer/Disclaimer.js";
10
+ import { EmptyView as T } from "./components/EmptyView/EmptyView.js";
11
+ import { Filter as h } from "./components/Filter/Filter.js";
12
+ import { GenericTable as w } from "./components/GenericTable/GenericTable.js";
13
+ import { HashTabView as g } from "./components/HashTabView/HashTabView.js";
14
+ import { HeaderFilter as A } from "./components/HeaderFilter/HeaderFilter.js";
15
+ import { I } from "./Iconify-DV7QhHmp.js";
16
+ import { InfoGroup as v } from "./components/InfoGroup/InfoGroup.js";
17
+ import { ListArea as M } from "./components/ListArea/ListArea.js";
18
18
  import { LoadingSpinner as G } from "./components/LoadingSpinner/Default/LoadingSpinner.js";
19
19
  import { Modal as E } from "./components/Modal/Modal.js";
20
20
  import { OverflowTooltip as P } from "./components/OverflowTooltip/OverflowTooltip.js";
@@ -30,31 +30,31 @@ import { FormText as mr } from "./components/FormComponents/FormText/FormText.js
30
30
  import { AvailableCustomIcons as fr } from "./enums/AvailableCustomIcons.js";
31
31
  import { ThemeColor as ir } from "./enums/ThemeColor.js";
32
32
  import { u as lr } from "./useBreakpoints-MzTZ0tCT.js";
33
- import { capitalizeFirstLetters as nr } from "./services/UtilService.js";
33
+ import { capitalizeFirstLetters as cr, trimLeadingAndTrailingSpaces as sr } from "./services/UtilService.js";
34
34
  export {
35
35
  t as AlertBanner,
36
36
  fr as AvailableCustomIcons,
37
37
  p as BaseView,
38
38
  x as BasicHeading,
39
39
  a as BlockView,
40
- c as ChipCard,
40
+ n as ChipCard,
41
41
  s as ContextMenu,
42
42
  F as DeleteModal,
43
- C as Disclaimer,
44
- b as EmptyView,
45
- u as Filter,
43
+ S as Disclaimer,
44
+ T as EmptyView,
45
+ h as Filter,
46
46
  Q as FormCheckBox,
47
47
  W as FormDatePicker,
48
48
  _ as FormRadio,
49
49
  rr as FormSelect,
50
50
  er as FormSlider,
51
51
  mr as FormText,
52
- T as GenericTable,
53
- k as HashTabView,
54
- I as HeaderFilter,
55
- A as Iconify,
56
- L as InfoGroup,
57
- g as ListArea,
52
+ w as GenericTable,
53
+ g as HashTabView,
54
+ A as HeaderFilter,
55
+ I as Iconify,
56
+ v as InfoGroup,
57
+ M as ListArea,
58
58
  G as LoadingSpinner,
59
59
  E as Modal,
60
60
  P as OverflowTooltip,
@@ -63,6 +63,7 @@ export {
63
63
  q as SearchBar,
64
64
  ir as ThemeColor,
65
65
  K as VerticalDivider,
66
- nr as capitalizeFirstLetters,
66
+ cr as capitalizeFirstLetters,
67
+ sr as trimLeadingAndTrailingSpaces,
67
68
  lr as useBreakpoints
68
69
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@hortiview/shared-components",
3
3
  "description": "This is a shared component library. It should used in the HortiView platform and its modules.",
4
- "version": "0.0.9178",
4
+ "version": "0.0.9183",
5
5
  "type": "module",
6
6
  "repository": "https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared",
7
7
  "author": "Falk Menge <falk.menge.ext@bayer.com>",