@helpwave/hightide 0.0.9 → 0.0.12

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.
Files changed (301) hide show
  1. package/README.md +1 -1
  2. package/dist/coloring/shading.d.ts +2 -0
  3. package/dist/coloring/shading.js +40 -0
  4. package/dist/coloring/types.d.ts +11 -0
  5. package/dist/coloring/types.js +1 -0
  6. package/dist/components/Avatar.d.ts +14 -0
  7. package/dist/components/Avatar.js +35 -0
  8. package/dist/components/AvatarGroup.d.ts +10 -0
  9. package/dist/components/AvatarGroup.js +13 -0
  10. package/dist/components/BreadCrumb.d.ts +16 -0
  11. package/dist/components/BreadCrumb.js +12 -0
  12. package/dist/components/Button.d.ts +41 -0
  13. package/dist/components/Button.js +84 -0
  14. package/dist/components/ChipList.d.ts +21 -0
  15. package/dist/components/ChipList.js +38 -0
  16. package/dist/components/Circle.d.ts +6 -0
  17. package/dist/components/Circle.js +10 -0
  18. package/dist/components/ErrorComponent.d.ts +13 -0
  19. package/dist/components/ErrorComponent.js +19 -0
  20. package/dist/components/Expandable.d.ts +30 -0
  21. package/dist/components/Expandable.js +16 -0
  22. package/dist/components/HelpwaveBadge.d.ts +11 -0
  23. package/dist/components/HelpwaveBadge.js +14 -0
  24. package/dist/components/HideableContentSection.d.ts +10 -0
  25. package/dist/components/HideableContentSection.js +15 -0
  26. package/dist/components/InputGroup.d.ts +13 -0
  27. package/dist/components/InputGroup.js +33 -0
  28. package/dist/components/LoadingAndErrorComponent.d.ts +17 -0
  29. package/dist/components/LoadingAndErrorComponent.js +25 -0
  30. package/dist/components/LoadingAnimation.d.ts +13 -0
  31. package/dist/components/LoadingAnimation.js +19 -0
  32. package/dist/components/LoadingButton.d.ts +6 -0
  33. package/dist/components/LoadingButton.js +10 -0
  34. package/dist/components/MarkdownInterpreter.d.ts +25 -0
  35. package/dist/components/MarkdownInterpreter.js +190 -0
  36. package/dist/components/Pagination.d.ts +14 -0
  37. package/dist/components/Pagination.js +25 -0
  38. package/dist/components/Profile.d.ts +28 -0
  39. package/dist/components/Profile.js +45 -0
  40. package/dist/components/ProgressIndicator.d.ts +21 -0
  41. package/dist/components/ProgressIndicator.js +24 -0
  42. package/dist/components/Ring.d.ts +31 -0
  43. package/dist/components/Ring.js +113 -0
  44. package/dist/components/SearchableList.d.ts +18 -0
  45. package/dist/components/SearchableList.js +27 -0
  46. package/dist/components/SortButton.d.ts +10 -0
  47. package/dist/components/SortButton.js +9 -0
  48. package/dist/components/Span.js +1 -0
  49. package/dist/components/StepperBar.d.ts +23 -0
  50. package/dist/components/StepperBar.js +47 -0
  51. package/dist/components/Table.d.ts +87 -0
  52. package/dist/components/Table.js +187 -0
  53. package/dist/components/TechRadar.d.ts +36 -0
  54. package/dist/components/TechRadar.js +191 -0
  55. package/dist/components/TextImage.d.ts +20 -0
  56. package/dist/components/TextImage.js +31 -0
  57. package/dist/components/TimeDisplay.d.ts +30 -0
  58. package/dist/components/TimeDisplay.js +83 -0
  59. package/dist/components/Tooltip.d.ts +34 -0
  60. package/dist/components/Tooltip.js +38 -0
  61. package/dist/components/VerticalDivider.d.ts +11 -0
  62. package/dist/components/VerticalDivider.js +7 -0
  63. package/dist/components/date/DatePicker.d.ts +26 -0
  64. package/dist/components/date/DatePicker.js +58 -0
  65. package/dist/components/date/DayPicker.d.ts +16 -0
  66. package/dist/components/date/DayPicker.js +37 -0
  67. package/dist/components/date/TimePicker.d.ts +12 -0
  68. package/dist/components/date/TimePicker.js +79 -0
  69. package/dist/components/date/YearMonthPicker.d.ts +11 -0
  70. package/dist/components/date/YearMonthPicker.js +59 -0
  71. package/dist/components/examples/InputGroupExample.d.ts +6 -0
  72. package/dist/components/examples/InputGroupExample.js +21 -0
  73. package/dist/components/examples/MultiSelectExample.d.ts +7 -0
  74. package/dist/components/examples/MultiSelectExample.js +27 -0
  75. package/dist/components/examples/SearchableSelectExample.d.ts +6 -0
  76. package/dist/components/examples/SearchableSelectExample.js +17 -0
  77. package/dist/components/examples/SelectExample.d.ts +4 -0
  78. package/dist/components/examples/SelectExample.js +15 -0
  79. package/dist/components/examples/StackingModals.d.ts +4 -0
  80. package/dist/components/examples/StackingModals.js +15 -0
  81. package/dist/components/examples/TableExample.d.ts +9 -0
  82. package/dist/components/examples/TableExample.js +92 -0
  83. package/dist/components/examples/TextareaExample.d.ts +6 -0
  84. package/dist/components/examples/TextareaExample.js +10 -0
  85. package/dist/components/examples/TileExample.d.ts +9 -0
  86. package/dist/components/examples/TileExample.js +9 -0
  87. package/dist/components/examples/Title.js +1 -0
  88. package/dist/components/examples/date/DateTimePickerExample.d.ts +10 -0
  89. package/dist/components/examples/date/DateTimePickerExample.js +21 -0
  90. package/dist/components/examples/properties/CheckboxPropertyExample.d.ts +8 -0
  91. package/dist/components/examples/properties/CheckboxPropertyExample.js +13 -0
  92. package/dist/components/examples/properties/DatePropertyExample.d.ts +8 -0
  93. package/dist/components/examples/properties/DatePropertyExample.js +23 -0
  94. package/dist/components/examples/properties/MultiSelectPropertyExample.d.ts +8 -0
  95. package/dist/components/examples/properties/MultiSelectPropertyExample.js +16 -0
  96. package/dist/components/examples/properties/NumberPropertyExample.d.ts +6 -0
  97. package/dist/components/examples/properties/NumberPropertyExample.js +13 -0
  98. package/dist/components/examples/properties/SelectPropertyExample.d.ts +6 -0
  99. package/dist/components/examples/properties/SelectPropertyExample.js +18 -0
  100. package/dist/components/examples/properties/TextPropertyExample.d.ts +8 -0
  101. package/dist/components/examples/properties/TextPropertyExample.js +13 -0
  102. package/dist/components/icons/Helpwave.d.ts +10 -0
  103. package/dist/components/icons/Helpwave.js +20 -0
  104. package/dist/components/icons/Tag.d.ts +10 -0
  105. package/dist/components/icons/Tag.js +12 -0
  106. package/dist/components/layout/Carousel.d.ts +22 -0
  107. package/dist/components/layout/Carousel.js +233 -0
  108. package/dist/components/layout/DividerInserter.d.ts +11 -0
  109. package/dist/components/layout/DividerInserter.js +20 -0
  110. package/dist/components/layout/FAQSection.d.ts +23 -0
  111. package/dist/components/layout/FAQSection.js +14 -0
  112. package/dist/components/layout/Tile.d.ts +34 -0
  113. package/dist/components/layout/Tile.js +18 -0
  114. package/dist/components/modals/ConfirmDialog.d.ts +34 -0
  115. package/dist/components/modals/ConfirmDialog.js +31 -0
  116. package/dist/components/modals/DiscardChangesDialog.d.ts +19 -0
  117. package/dist/components/modals/DiscardChangesDialog.js +24 -0
  118. package/dist/components/modals/InputModal.d.ts +9 -0
  119. package/dist/components/modals/InputModal.js +9 -0
  120. package/dist/components/modals/LanguageModal.d.ts +17 -0
  121. package/dist/components/modals/LanguageModal.js +35 -0
  122. package/dist/components/modals/Modal.d.ts +38 -0
  123. package/dist/components/modals/Modal.js +57 -0
  124. package/dist/components/modals/ModalRegister.d.ts +11 -0
  125. package/dist/components/modals/ModalRegister.js +28 -0
  126. package/dist/components/properties/CheckboxProperty.d.ts +15 -0
  127. package/dist/components/properties/CheckboxProperty.js +27 -0
  128. package/dist/components/properties/DateProperty.d.ts +11 -0
  129. package/dist/components/properties/DateProperty.js +22 -0
  130. package/dist/components/properties/MultiSelectProperty.d.ts +12 -0
  131. package/dist/components/properties/MultiSelectProperty.js +33 -0
  132. package/dist/components/properties/NumberProperty.d.ts +16 -0
  133. package/dist/components/properties/NumberProperty.js +42 -0
  134. package/dist/components/properties/PropertyBase.d.ts +23 -0
  135. package/dist/components/properties/PropertyBase.js +27 -0
  136. package/dist/components/properties/SelectProperty.d.ts +12 -0
  137. package/dist/components/properties/SelectProperty.js +22 -0
  138. package/dist/components/properties/TextProperty.d.ts +15 -0
  139. package/dist/components/properties/TextProperty.js +37 -0
  140. package/dist/components/user-input/Checkbox.d.ts +37 -0
  141. package/dist/components/user-input/Checkbox.js +63 -0
  142. package/dist/components/user-input/DateAndTimePicker.d.ts +39 -0
  143. package/dist/components/user-input/DateAndTimePicker.js +65 -0
  144. package/dist/components/user-input/Input.d.ts +61 -0
  145. package/dist/components/user-input/Input.js +61 -0
  146. package/dist/components/user-input/Label.d.ts +12 -0
  147. package/dist/components/user-input/Label.js +12 -0
  148. package/dist/components/user-input/Menu.d.ts +21 -0
  149. package/dist/components/user-input/Menu.js +26 -0
  150. package/dist/components/user-input/MultiSelect.d.ts +39 -0
  151. package/dist/components/user-input/MultiSelect.js +57 -0
  152. package/dist/components/user-input/ScrollPicker.d.ts +11 -0
  153. package/dist/components/user-input/ScrollPicker.js +151 -0
  154. package/dist/components/user-input/SearchableSelect.d.ts +8 -0
  155. package/dist/components/user-input/SearchableSelect.js +14 -0
  156. package/dist/components/user-input/Select.d.ts +32 -0
  157. package/dist/components/user-input/Select.js +48 -0
  158. package/dist/components/user-input/Textarea.d.ts +20 -0
  159. package/dist/components/user-input/Textarea.js +33 -0
  160. package/dist/components/user-input/ToggleableInput.d.ts +32 -0
  161. package/dist/components/user-input/ToggleableInput.js +40 -0
  162. package/dist/css/globals.css +2450 -0
  163. package/dist/hooks/useHoverState.d.ts +40 -0
  164. package/dist/hooks/useHoverState.js +46 -0
  165. package/dist/hooks/useLanguage.d.ts +17 -0
  166. package/dist/hooks/useLanguage.js +51 -0
  167. package/dist/hooks/useLocalStorage.d.ts +4 -0
  168. package/dist/hooks/useLocalStorage.js +24 -0
  169. package/dist/hooks/useOutsideClick.d.ts +2 -0
  170. package/dist/hooks/useOutsideClick.js +22 -0
  171. package/dist/hooks/useSaveDelay.d.ts +5 -0
  172. package/dist/hooks/useSaveDelay.js +41 -0
  173. package/dist/hooks/useTheme.d.ts +16 -0
  174. package/dist/hooks/useTheme.js +32 -0
  175. package/dist/hooks/useTranslation.d.ts +24 -0
  176. package/dist/hooks/useTranslation.js +11 -0
  177. package/dist/util/array.d.ts +23 -0
  178. package/dist/util/array.js +103 -0
  179. package/{util/builder.ts → dist/util/builder.d.ts} +1 -4
  180. package/dist/util/builder.js +9 -0
  181. package/dist/util/date.d.ts +28 -0
  182. package/dist/util/date.js +133 -0
  183. package/dist/util/easeFunctions.d.ts +9 -0
  184. package/dist/util/easeFunctions.js +30 -0
  185. package/dist/util/emailValidation.d.ts +1 -0
  186. package/dist/util/emailValidation.js +3 -0
  187. package/dist/util/loopingArray.d.ts +23 -0
  188. package/dist/util/loopingArray.js +67 -0
  189. package/dist/util/math.d.ts +1 -0
  190. package/dist/util/math.js +3 -0
  191. package/dist/util/news.d.ts +98 -0
  192. package/dist/util/news.js +27 -0
  193. package/dist/util/noop.d.ts +1 -0
  194. package/dist/util/noop.js +1 -0
  195. package/{util/simpleSearch.ts → dist/util/simpleSearch.d.ts} +4 -21
  196. package/dist/util/simpleSearch.js +62 -0
  197. package/dist/util/storage.d.ts +15 -0
  198. package/dist/util/storage.js +32 -0
  199. package/dist/util/types.d.ts +1 -0
  200. package/dist/util/types.js +1 -0
  201. package/package.json +7 -8
  202. package/coloring/shading.ts +0 -46
  203. package/coloring/types.ts +0 -13
  204. package/components/Avatar.tsx +0 -58
  205. package/components/AvatarGroup.tsx +0 -48
  206. package/components/BreadCrumb.tsx +0 -35
  207. package/components/Button.tsx +0 -236
  208. package/components/ChipList.tsx +0 -89
  209. package/components/Circle.tsx +0 -27
  210. package/components/ErrorComponent.tsx +0 -40
  211. package/components/Expandable.tsx +0 -61
  212. package/components/HelpwaveBadge.tsx +0 -35
  213. package/components/HideableContentSection.tsx +0 -43
  214. package/components/InputGroup.tsx +0 -72
  215. package/components/LoadingAndErrorComponent.tsx +0 -47
  216. package/components/LoadingAnimation.tsx +0 -40
  217. package/components/LoadingButton.tsx +0 -27
  218. package/components/MarkdownInterpreter.tsx +0 -278
  219. package/components/Pagination.tsx +0 -65
  220. package/components/Profile.tsx +0 -124
  221. package/components/ProgressIndicator.tsx +0 -58
  222. package/components/Ring.tsx +0 -286
  223. package/components/SearchableList.tsx +0 -69
  224. package/components/SortButton.tsx +0 -33
  225. package/components/StepperBar.tsx +0 -124
  226. package/components/Table.tsx +0 -330
  227. package/components/TechRadar.tsx +0 -247
  228. package/components/TextImage.tsx +0 -86
  229. package/components/TimeDisplay.tsx +0 -121
  230. package/components/Tooltip.tsx +0 -92
  231. package/components/VerticalDivider.tsx +0 -51
  232. package/components/date/DatePicker.tsx +0 -164
  233. package/components/date/DayPicker.tsx +0 -95
  234. package/components/date/TimePicker.tsx +0 -167
  235. package/components/date/YearMonthPicker.tsx +0 -130
  236. package/components/examples/InputGroupExample.tsx +0 -58
  237. package/components/examples/MultiSelectExample.tsx +0 -57
  238. package/components/examples/SearchableSelectExample.tsx +0 -34
  239. package/components/examples/SelectExample.tsx +0 -28
  240. package/components/examples/StackingModals.tsx +0 -54
  241. package/components/examples/TableExample.tsx +0 -159
  242. package/components/examples/TextareaExample.tsx +0 -23
  243. package/components/examples/TileExample.tsx +0 -25
  244. package/components/examples/date/DateTimePickerExample.tsx +0 -53
  245. package/components/examples/properties/CheckboxPropertyExample.tsx +0 -29
  246. package/components/examples/properties/DatePropertyExample.tsx +0 -44
  247. package/components/examples/properties/MultiSelectPropertyExample.tsx +0 -39
  248. package/components/examples/properties/NumberPropertyExample.tsx +0 -28
  249. package/components/examples/properties/SelectPropertyExample.tsx +0 -39
  250. package/components/examples/properties/TextPropertyExample.tsx +0 -30
  251. package/components/icons/Helpwave.tsx +0 -51
  252. package/components/icons/Tag.tsx +0 -29
  253. package/components/layout/Carousel.tsx +0 -396
  254. package/components/layout/DividerInserter.tsx +0 -37
  255. package/components/layout/FAQSection.tsx +0 -57
  256. package/components/layout/Tile.tsx +0 -67
  257. package/components/modals/ConfirmDialog.tsx +0 -105
  258. package/components/modals/DiscardChangesDialog.tsx +0 -71
  259. package/components/modals/InputModal.tsx +0 -26
  260. package/components/modals/LanguageModal.tsx +0 -76
  261. package/components/modals/Modal.tsx +0 -149
  262. package/components/modals/ModalRegister.tsx +0 -45
  263. package/components/properties/CheckboxProperty.tsx +0 -62
  264. package/components/properties/DateProperty.tsx +0 -58
  265. package/components/properties/MultiSelectProperty.tsx +0 -82
  266. package/components/properties/NumberProperty.tsx +0 -86
  267. package/components/properties/PropertyBase.tsx +0 -84
  268. package/components/properties/SelectProperty.tsx +0 -67
  269. package/components/properties/TextProperty.tsx +0 -81
  270. package/components/user-input/Checkbox.tsx +0 -139
  271. package/components/user-input/DateAndTimePicker.tsx +0 -156
  272. package/components/user-input/Input.tsx +0 -192
  273. package/components/user-input/Label.tsx +0 -32
  274. package/components/user-input/Menu.tsx +0 -75
  275. package/components/user-input/MultiSelect.tsx +0 -158
  276. package/components/user-input/ScrollPicker.tsx +0 -240
  277. package/components/user-input/SearchableSelect.tsx +0 -36
  278. package/components/user-input/Select.tsx +0 -132
  279. package/components/user-input/Textarea.tsx +0 -86
  280. package/components/user-input/ToggleableInput.tsx +0 -115
  281. package/globals.css +0 -488
  282. package/hooks/useHoverState.ts +0 -88
  283. package/hooks/useLanguage.tsx +0 -78
  284. package/hooks/useLocalStorage.tsx +0 -33
  285. package/hooks/useOutsideClick.ts +0 -25
  286. package/hooks/useSaveDelay.ts +0 -46
  287. package/hooks/useTheme.tsx +0 -57
  288. package/hooks/useTranslation.ts +0 -43
  289. package/index.ts +0 -0
  290. package/util/array.ts +0 -115
  291. package/util/date.ts +0 -180
  292. package/util/easeFunctions.ts +0 -37
  293. package/util/emailValidation.ts +0 -3
  294. package/util/loopingArray.ts +0 -94
  295. package/util/math.ts +0 -3
  296. package/util/news.ts +0 -43
  297. package/util/noop.ts +0 -1
  298. package/util/storage.ts +0 -37
  299. package/util/types.ts +0 -4
  300. /package/{components/Span.tsx → dist/components/Span.d.ts} +0 -0
  301. /package/{components/examples/Title.tsx → dist/components/examples/Title.d.ts} +0 -0
@@ -0,0 +1,40 @@
1
+ import type { Dispatch, SetStateAction } from 'react';
2
+ type UseHoverStateProps = {
3
+ /**
4
+ * The delay after which the menu is closed in milliseconds
5
+ *
6
+ * default: 200ms
7
+ */
8
+ closingDelay: number;
9
+ /**
10
+ * Whether the hover state management should be disabled
11
+ *
12
+ * default: false
13
+ */
14
+ isDisabled: boolean;
15
+ };
16
+ type UseHoverStateReturnType = {
17
+ /**
18
+ * Whether the element is hovered
19
+ */
20
+ isHovered: boolean;
21
+ /**
22
+ * Function to change the current hover status
23
+ */
24
+ setIsHovered: Dispatch<SetStateAction<boolean>>;
25
+ /**
26
+ * Handlers to pass on to the component that should be hovered
27
+ */
28
+ handlers: {
29
+ onMouseEnter: () => void;
30
+ onMouseLeave: () => void;
31
+ };
32
+ };
33
+ /**
34
+ * @param props See UseHoverStateProps
35
+ *
36
+ * A react hook for managing the hover state of a component. The handlers provided should be
37
+ * forwarded to the component which should be hovered over
38
+ */
39
+ export declare const useHoverState: (props?: Partial<UseHoverStateProps> | undefined) => UseHoverStateReturnType;
40
+ export {};
@@ -0,0 +1,46 @@
1
+ import { useEffect, useState } from 'react';
2
+ const defaultUseHoverStateProps = {
3
+ closingDelay: 200,
4
+ isDisabled: false,
5
+ };
6
+ /**
7
+ * @param props See UseHoverStateProps
8
+ *
9
+ * A react hook for managing the hover state of a component. The handlers provided should be
10
+ * forwarded to the component which should be hovered over
11
+ */
12
+ export const useHoverState = (props = undefined) => {
13
+ const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props };
14
+ const [isHovered, setIsHovered] = useState(false);
15
+ const [timer, setTimer] = useState();
16
+ const onMouseEnter = () => {
17
+ if (isDisabled) {
18
+ return;
19
+ }
20
+ clearTimeout(timer);
21
+ setIsHovered(true);
22
+ };
23
+ const onMouseLeave = () => {
24
+ if (isDisabled) {
25
+ return;
26
+ }
27
+ setTimer(setTimeout(() => {
28
+ setIsHovered(false);
29
+ }, closingDelay));
30
+ };
31
+ useEffect(() => {
32
+ if (timer) {
33
+ return () => {
34
+ clearTimeout(timer);
35
+ };
36
+ }
37
+ });
38
+ useEffect(() => {
39
+ if (timer) {
40
+ clearTimeout(timer);
41
+ }
42
+ }, [isDisabled]); // eslint-disable-line react-hooks/exhaustive-deps
43
+ return {
44
+ isHovered, setIsHovered, handlers: { onMouseEnter, onMouseLeave }
45
+ };
46
+ };
@@ -0,0 +1,17 @@
1
+ import type { Dispatch, PropsWithChildren, SetStateAction } from 'react';
2
+ export declare const languages: readonly ["en", "de"];
3
+ export type Languages = typeof languages[number];
4
+ export declare const languagesLocalNames: Record<Languages, string>;
5
+ export declare const DEFAULT_LANGUAGE = "en";
6
+ export type LanguageContextValue = {
7
+ language: Languages;
8
+ setLanguage: Dispatch<SetStateAction<Languages>>;
9
+ };
10
+ export declare const LanguageContext: import("react").Context<LanguageContextValue>;
11
+ export declare const useLanguage: () => LanguageContextValue;
12
+ export declare const useLocale: (overWriteLanguage?: Languages) => string;
13
+ type ProvideLanguageProps = {
14
+ initialLanguage?: Languages;
15
+ };
16
+ export declare const ProvideLanguage: ({ initialLanguage, children }: PropsWithChildren<ProvideLanguageProps>) => import("react/jsx-runtime").JSX.Element;
17
+ export {};
@@ -0,0 +1,51 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { createContext, useContext, useEffect, useState } from 'react';
3
+ import useLocalStorage from './useLocalStorage';
4
+ export const languages = ['en', 'de'];
5
+ export const languagesLocalNames = {
6
+ en: 'English',
7
+ de: 'Deutsch',
8
+ };
9
+ export const DEFAULT_LANGUAGE = 'en';
10
+ export const LanguageContext = createContext({ language: DEFAULT_LANGUAGE, setLanguage: (v) => v });
11
+ export const useLanguage = () => useContext(LanguageContext);
12
+ export const useLocale = (overWriteLanguage) => {
13
+ const { language } = useLanguage();
14
+ const mapping = {
15
+ en: 'en-US',
16
+ de: 'de-DE'
17
+ };
18
+ return mapping[overWriteLanguage !== null && overWriteLanguage !== void 0 ? overWriteLanguage : language];
19
+ };
20
+ export const ProvideLanguage = ({ initialLanguage, children }) => {
21
+ const [language, setLanguage] = useState(initialLanguage !== null && initialLanguage !== void 0 ? initialLanguage : DEFAULT_LANGUAGE);
22
+ const [storedLanguage, setStoredLanguage] = useLocalStorage('language', initialLanguage !== null && initialLanguage !== void 0 ? initialLanguage : DEFAULT_LANGUAGE);
23
+ useEffect(() => {
24
+ if (language !== initialLanguage && initialLanguage) {
25
+ console.warn('LanguageProvider initial state changed: Prefer using useLanguages\'s setLanguage instead');
26
+ setLanguage(initialLanguage);
27
+ }
28
+ }, [initialLanguage]); // eslint-disable-line react-hooks/exhaustive-deps
29
+ useEffect(() => {
30
+ // TODO set locale of html tag here as well
31
+ setStoredLanguage(language);
32
+ }, [language, setStoredLanguage]);
33
+ useEffect(() => {
34
+ if (storedLanguage !== null) {
35
+ setLanguage(storedLanguage);
36
+ return;
37
+ }
38
+ const languagesToTestAgainst = Object.values(languages);
39
+ const matchingBrowserLanguages = window.navigator.languages
40
+ .map(language => languagesToTestAgainst.find((test) => language === test || language.split('-')[0] === test))
41
+ .filter(entry => entry !== undefined);
42
+ if (matchingBrowserLanguages.length === 0)
43
+ return;
44
+ const firstMatch = matchingBrowserLanguages[0];
45
+ setLanguage(firstMatch);
46
+ }, []); // eslint-disable-line react-hooks/exhaustive-deps
47
+ return (_jsx(LanguageContext.Provider, { value: {
48
+ language,
49
+ setLanguage
50
+ }, children: children }));
51
+ };
@@ -0,0 +1,4 @@
1
+ import type { Dispatch, SetStateAction } from 'react';
2
+ type SetValue<T> = Dispatch<SetStateAction<T>>;
3
+ declare const useLocalStorage: <T>(key: string, initValue: T) => [T, SetValue<T>];
4
+ export default useLocalStorage;
@@ -0,0 +1,24 @@
1
+ import { useCallback, useEffect, useState } from 'react';
2
+ import { LocalStorageService } from '../util/storage';
3
+ const useLocalStorage = (key, initValue) => {
4
+ const get = useCallback(() => {
5
+ if (typeof window === 'undefined') {
6
+ return initValue;
7
+ }
8
+ const storageService = new LocalStorageService();
9
+ const value = storageService.get(key);
10
+ return value || initValue;
11
+ }, [initValue, key]);
12
+ const [storedValue, setStoredValue] = useState(get);
13
+ const setValue = useCallback(value => {
14
+ const newValue = value instanceof Function ? value(storedValue) : value;
15
+ const storageService = new LocalStorageService();
16
+ storageService.set(key, value);
17
+ setStoredValue(newValue);
18
+ }, [storedValue, setStoredValue, key]);
19
+ useEffect(() => {
20
+ setStoredValue(get());
21
+ }, []); // eslint-disable-line react-hooks/exhaustive-deps
22
+ return [storedValue, setValue];
23
+ };
24
+ export default useLocalStorage;
@@ -0,0 +1,2 @@
1
+ import type { RefObject } from 'react';
2
+ export declare const useOutsideClick: <Ts extends RefObject<HTMLElement>[]>(refs: Ts, handler: () => void) => void;
@@ -0,0 +1,22 @@
1
+ import { useEffect } from 'react';
2
+ export const useOutsideClick = (refs, handler) => {
3
+ useEffect(() => {
4
+ const listener = (event) => {
5
+ // returning means not "not clicking outside"
6
+ // if no target exists, return
7
+ if (event.target === null)
8
+ return;
9
+ // if the target is a ref's element or descendent thereof, return
10
+ if (refs.some((ref) => !ref.current || ref.current.contains(event.target))) {
11
+ return;
12
+ }
13
+ handler();
14
+ };
15
+ document.addEventListener('mousedown', listener);
16
+ document.addEventListener('touchstart', listener);
17
+ return () => {
18
+ document.removeEventListener('mousedown', listener);
19
+ document.removeEventListener('touchstart', listener);
20
+ };
21
+ }, [refs, handler]);
22
+ };
@@ -0,0 +1,5 @@
1
+ declare function useSaveDelay(setNotificationStatus: (isShowing: boolean) => void, delay: number): {
2
+ restartTimer: (onSave: () => void) => void;
3
+ clearUpdateTimer: (hasSaved?: boolean) => void;
4
+ };
5
+ export default useSaveDelay;
@@ -0,0 +1,41 @@
1
+ import { useEffect, useState } from 'react';
2
+ function useSaveDelay(setNotificationStatus, delay) {
3
+ const [updateTimer, setUpdateTimer] = useState(undefined);
4
+ const [notificationTimer, setNotificationTimer] = useState(undefined);
5
+ const restartTimer = (onSave) => {
6
+ clearTimeout(updateTimer);
7
+ setUpdateTimer(setTimeout(() => {
8
+ onSave();
9
+ setNotificationStatus(true);
10
+ // Show Saved Notification for fade animation duration
11
+ clearTimeout(notificationTimer);
12
+ setNotificationTimer(setTimeout(() => {
13
+ setNotificationStatus(false);
14
+ clearTimeout(notificationTimer);
15
+ }, delay));
16
+ clearTimeout(updateTimer);
17
+ }, delay));
18
+ };
19
+ const clearUpdateTimer = (hasSaved = true) => {
20
+ clearTimeout(updateTimer);
21
+ if (hasSaved) {
22
+ setNotificationStatus(true);
23
+ clearTimeout(notificationTimer);
24
+ setNotificationTimer(setTimeout(() => {
25
+ setNotificationStatus(false);
26
+ clearTimeout(notificationTimer);
27
+ }, delay));
28
+ }
29
+ else {
30
+ setNotificationStatus(false);
31
+ }
32
+ };
33
+ useEffect(() => {
34
+ return () => {
35
+ clearTimeout(updateTimer);
36
+ clearTimeout(notificationTimer);
37
+ };
38
+ }, []); // eslint-disable-line react-hooks/exhaustive-deps
39
+ return { restartTimer, clearUpdateTimer };
40
+ }
41
+ export default useSaveDelay;
@@ -0,0 +1,16 @@
1
+ import type { Dispatch, SetStateAction, PropsWithChildren } from 'react';
2
+ import type { Translation } from './useTranslation';
3
+ export type ThemeType = 'light' | 'dark';
4
+ export type ThemeTypeTranslation = Record<ThemeType, string>;
5
+ export declare const defaultThemeTypeTranslation: Translation<ThemeTypeTranslation>;
6
+ type ThemeContextType = {
7
+ theme: ThemeType;
8
+ setTheme: Dispatch<SetStateAction<ThemeType>>;
9
+ };
10
+ export declare const ThemeContext: import("react").Context<ThemeContextType>;
11
+ type ThemeProviderProps = {
12
+ initialTheme?: ThemeType;
13
+ };
14
+ export declare const ThemeProvider: ({ children, initialTheme }: PropsWithChildren<ThemeProviderProps>) => import("react/jsx-runtime").JSX.Element;
15
+ export declare const useTheme: () => ThemeContextType;
16
+ export {};
@@ -0,0 +1,32 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { useContext } from 'react';
3
+ import { createContext, useState, useEffect } from 'react';
4
+ export const defaultThemeTypeTranslation = {
5
+ en: {
6
+ dark: 'Dark',
7
+ light: 'Light'
8
+ },
9
+ de: {
10
+ dark: 'Dunkel',
11
+ light: 'Hell'
12
+ }
13
+ };
14
+ export const ThemeContext = createContext({
15
+ theme: 'light',
16
+ setTheme: (_) => {
17
+ },
18
+ });
19
+ export const ThemeProvider = ({ children, initialTheme = 'light' }) => {
20
+ const [theme, setTheme] = useState(initialTheme);
21
+ useEffect(() => {
22
+ if (theme !== initialTheme) {
23
+ console.warn('ThemeProvider initial state changed: Prefer using useTheme\'s setTheme instead');
24
+ setTheme(initialTheme);
25
+ }
26
+ }, [initialTheme]); // eslint-disable-line react-hooks/exhaustive-deps
27
+ useEffect(() => {
28
+ document.documentElement.setAttribute('data-theme', theme);
29
+ }, [theme]);
30
+ return (_jsx(ThemeContext.Provider, { value: { theme, setTheme }, children: children }));
31
+ };
32
+ export const useTheme = () => useContext(ThemeContext);
@@ -0,0 +1,24 @@
1
+ import type { Languages } from './useLanguage';
2
+ export type Translation<T> = Record<Languages, T>;
3
+ type OverwriteTranslationType<Translation extends Record<string, unknown>> = {
4
+ language?: Languages;
5
+ translation?: Partial<Record<Languages, Partial<Translation>>>;
6
+ };
7
+ /**
8
+ * Adds the `language` prop to the component props.
9
+ *
10
+ * @param Translation the type of the translation object
11
+ *
12
+ * @param Props the type of the component props, defaults to `Record<string, never>`,
13
+ * if you don't expect any other props other than `language` and get an
14
+ * error when using your component (because it uses `forwardRef` etc.)
15
+ * you can try out `Record<string, unknown>`, this might resolve your
16
+ * problem as `SomeType & never` is still `never` but `SomeType & unknown`
17
+ * is `SomeType` which means that adding back props (like `ref` etc.)
18
+ * works properly
19
+ */
20
+ export type PropsForTranslation<Translation extends Record<string, unknown>, Props = Record<string, never>> = Props & {
21
+ overwriteTranslation?: OverwriteTranslationType<Translation>;
22
+ };
23
+ export declare const useTranslation: <Translation extends Record<string, unknown>>(defaults: Record<Languages, Translation>, translationOverwrite?: OverwriteTranslationType<Translation>) => Translation;
24
+ export {};
@@ -0,0 +1,11 @@
1
+ import { useLanguage } from './useLanguage';
2
+ export const useTranslation = (defaults, translationOverwrite = {}) => {
3
+ const { language: languageProp, translation: overwrite } = translationOverwrite;
4
+ const { language: inferredLanguage } = useLanguage();
5
+ const usedLanguage = languageProp !== null && languageProp !== void 0 ? languageProp : inferredLanguage;
6
+ let defaultValues = defaults[usedLanguage];
7
+ if (overwrite && overwrite[usedLanguage]) {
8
+ defaultValues = { ...defaultValues, ...overwrite[usedLanguage] };
9
+ }
10
+ return defaultValues;
11
+ };
@@ -0,0 +1,23 @@
1
+ export declare const equalSizeGroups: <T>(array: T[], groupSize: number) => T[][];
2
+ /**
3
+ * @param start
4
+ * @param end inclusive
5
+ * @param allowEmptyRange Whether the range can be defined empty via end < start
6
+ */
7
+ export declare const range: (start: number, end: number, allowEmptyRange?: boolean) => number[];
8
+ /** Finds the closest match
9
+ * @param list The list of all possible matches
10
+ * @param firstCloser Return whether item1 is closer than item2
11
+ */
12
+ export declare const closestMatch: <T>(list: T[], firstCloser: (item1: T, item2: T) => boolean) => T;
13
+ /**
14
+ * returns the item in middle of a list and its neighbours before and after
15
+ * e.g. [1,2,3,4,5,6] for item = 1 would return [5,6,1,2,3]
16
+ */
17
+ export declare const getNeighbours: <T>(list: T[], item: T, neighbourDistance?: number) => T[];
18
+ export declare const createLoopingListWithIndex: <T>(list: T[], startIndex?: number, length?: number, forwards?: boolean) => [number, T][];
19
+ export declare const createLoopingList: <T>(list: T[], startIndex?: number, length?: number, forwards?: boolean) => T[];
20
+ export declare const ArrayUtil: {
21
+ unique: <T>(list: T[]) => T[];
22
+ difference: <T>(list: T[], removeList: T[]) => T[];
23
+ };
@@ -0,0 +1,103 @@
1
+ export const equalSizeGroups = (array, groupSize) => {
2
+ if (groupSize <= 0) {
3
+ console.warn(`group size should be greater than 0: groupSize = ${groupSize}`);
4
+ return [[...array]];
5
+ }
6
+ const groups = [];
7
+ for (let i = 0; i < array.length; i += groupSize) {
8
+ groups.push(array.slice(i, Math.min(i + groupSize, array.length)));
9
+ }
10
+ return groups;
11
+ };
12
+ /**
13
+ * @param start
14
+ * @param end inclusive
15
+ * @param allowEmptyRange Whether the range can be defined empty via end < start
16
+ */
17
+ export const range = (start, end, allowEmptyRange = false) => {
18
+ if (end < start) {
19
+ if (!allowEmptyRange) {
20
+ console.warn(`range: end (${end}) < start (${start}) should be allowed explicitly, set allowEmptyRange to true`);
21
+ }
22
+ return [];
23
+ }
24
+ return Array.from({ length: end - start + 1 }, (_, index) => index + start);
25
+ };
26
+ /** Finds the closest match
27
+ * @param list The list of all possible matches
28
+ * @param firstCloser Return whether item1 is closer than item2
29
+ */
30
+ export const closestMatch = (list, firstCloser) => {
31
+ return list.reduce((item1, item2) => {
32
+ return firstCloser(item1, item2) ? item1 : item2;
33
+ });
34
+ };
35
+ /**
36
+ * returns the item in middle of a list and its neighbours before and after
37
+ * e.g. [1,2,3,4,5,6] for item = 1 would return [5,6,1,2,3]
38
+ */
39
+ export const getNeighbours = (list, item, neighbourDistance = 2) => {
40
+ const index = list.indexOf(item);
41
+ const totalItems = neighbourDistance * 2 + 1;
42
+ if (list.length < totalItems) {
43
+ console.warn('List is to short');
44
+ return list;
45
+ }
46
+ if (index === -1) {
47
+ console.error('item not found in list');
48
+ return list.splice(0, totalItems);
49
+ }
50
+ let start = index - neighbourDistance;
51
+ if (start < 0) {
52
+ start += list.length;
53
+ }
54
+ const end = (index + neighbourDistance + 1) % list.length;
55
+ const result = [];
56
+ let ignoreOnce = list.length === totalItems;
57
+ for (let i = start; i !== end || ignoreOnce; i = (i + 1) % list.length) {
58
+ result.push(list[i]);
59
+ if (end === i && ignoreOnce) {
60
+ ignoreOnce = false;
61
+ }
62
+ }
63
+ return result;
64
+ };
65
+ export const createLoopingListWithIndex = (list, startIndex = 0, length = 0, forwards = true) => {
66
+ if (length < 0) {
67
+ console.warn(`createLoopingList: length must be >= 0, given ${length}`);
68
+ }
69
+ else if (length === 0) {
70
+ length = list.length;
71
+ }
72
+ const returnList = [];
73
+ if (forwards) {
74
+ for (let i = startIndex; returnList.length < length; i = (i + 1) % list.length) {
75
+ returnList.push([i, list[i]]);
76
+ }
77
+ }
78
+ else {
79
+ for (let i = startIndex; returnList.length < length; i = i === 0 ? i = list.length - 1 : i - 1) {
80
+ returnList.push([i, list[i]]);
81
+ }
82
+ }
83
+ return returnList;
84
+ };
85
+ export const createLoopingList = (list, startIndex = 0, length = 0, forwards = true) => {
86
+ return createLoopingListWithIndex(list, startIndex, length, forwards).map(([_, item]) => item);
87
+ };
88
+ export const ArrayUtil = {
89
+ unique: (list) => {
90
+ const seen = new Set();
91
+ return list.filter((item) => {
92
+ if (seen.has(item)) {
93
+ return false;
94
+ }
95
+ seen.add(item);
96
+ return true;
97
+ });
98
+ },
99
+ difference: (list, removeList) => {
100
+ const remove = new Set(removeList);
101
+ return list.filter((item) => !remove.has(item));
102
+ }
103
+ };
@@ -3,7 +3,4 @@
3
3
  * @param value The value to update which gets return with the same reference
4
4
  * @param update The updates to apply on the object
5
5
  */
6
- export const builder = <T>(value: T, update: (value: T) => void): T => {
7
- update(value)
8
- return value
9
- }
6
+ export declare const builder: <T>(value: T, update: (value: T) => void) => T;
@@ -0,0 +1,9 @@
1
+ /**
2
+ * A simple function that implements the builder pattern
3
+ * @param value The value to update which gets return with the same reference
4
+ * @param update The updates to apply on the object
5
+ */
6
+ export const builder = (value, update) => {
7
+ update(value);
8
+ return value;
9
+ };
@@ -0,0 +1,28 @@
1
+ export declare const monthsList: readonly ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"];
2
+ export type Month = typeof monthsList[number];
3
+ export declare const weekDayList: readonly ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
4
+ export type WeekDay = typeof weekDayList[number];
5
+ export declare const formatDate: (date: Date) => string;
6
+ export declare const formatDateTime: (date: Date) => string;
7
+ export declare const getDaysInMonth: (year: number, month: number) => number;
8
+ export type Duration = {
9
+ years?: number;
10
+ months?: number;
11
+ days?: number;
12
+ hours?: number;
13
+ minutes?: number;
14
+ seconds?: number;
15
+ milliseconds?: number;
16
+ };
17
+ export declare const changeDuration: (date: Date, duration: Duration, isAdding?: boolean) => Date;
18
+ export declare const addDuration: (date: Date, duration: Duration) => Date;
19
+ export declare const subtractDuration: (date: Date, duration: Duration) => Date;
20
+ export declare const getBetweenDuration: (startDate: Date, endDate: Date) => Duration;
21
+ /** Checks if a given date is in the range of two dates
22
+ *
23
+ * An undefined value for startDate or endDate means no bound for the start or end respectively
24
+ */
25
+ export declare const isInTimeSpan: (value: Date, startDate?: Date, endDate?: Date) => boolean;
26
+ /** Compare two dates on the year, month, day */
27
+ export declare const equalDate: (date1: Date, date2: Date) => boolean;
28
+ export declare const getWeeksForCalenderMonth: (date: Date, weekStart: WeekDay, weeks?: number) => Date[][];
@@ -0,0 +1,133 @@
1
+ import { equalSizeGroups } from './array';
2
+ export const monthsList = ['january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december'];
3
+ export const weekDayList = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];
4
+ export const formatDate = (date) => {
5
+ const year = date.getFullYear().toString().padStart(4, '0');
6
+ const month = (date.getMonth() + 1).toString().padStart(2, '0');
7
+ const day = (date.getDate()).toString().padStart(2, '0');
8
+ return `${year}-${month}-${day}`;
9
+ };
10
+ export const formatDateTime = (date) => {
11
+ const dateString = formatDate(date);
12
+ const hours = date.getHours().toString().padStart(2, '0');
13
+ const minutes = date.getMinutes().toString().padStart(2, '0');
14
+ return `${dateString}T${hours}:${minutes}`;
15
+ };
16
+ export const getDaysInMonth = (year, month) => {
17
+ const lastDayOfMonth = new Date(year, month + 1, 0);
18
+ return lastDayOfMonth.getDate();
19
+ };
20
+ export const changeDuration = (date, duration, isAdding) => {
21
+ const { years = 0, months = 0, days = 0, hours = 0, minutes = 0, seconds = 0, milliseconds = 0, } = duration;
22
+ // Check ranges
23
+ if (years < 0) {
24
+ console.error(`Range error years must be greater than 0: received ${years}`);
25
+ return new Date(date);
26
+ }
27
+ if (months < 0 || months > 11) {
28
+ console.error(`Range error month must be 0 <= month <= 11: received ${months}`);
29
+ return new Date(date);
30
+ }
31
+ if (days < 0) {
32
+ console.error(`Range error days must be greater than 0: received ${days}`);
33
+ return new Date(date);
34
+ }
35
+ if (hours < 0 || hours > 23) {
36
+ console.error(`Range error hours must be 0 <= hours <= 23: received ${hours}`);
37
+ return new Date(date);
38
+ }
39
+ if (minutes < 0 || minutes > 59) {
40
+ console.error(`Range error minutes must be 0 <= minutes <= 59: received ${minutes}`);
41
+ return new Date(date);
42
+ }
43
+ if (seconds < 0 || seconds > 59) {
44
+ console.error(`Range error seconds must be 0 <= seconds <= 59: received ${seconds}`);
45
+ return new Date(date);
46
+ }
47
+ if (milliseconds < 0) {
48
+ console.error(`Range error seconds must be greater than 0: received ${milliseconds}`);
49
+ return new Date(date);
50
+ }
51
+ const multiplier = isAdding ? 1 : -1;
52
+ const newDate = new Date(date);
53
+ newDate.setFullYear(newDate.getFullYear() + multiplier * years);
54
+ newDate.setMonth(newDate.getMonth() + multiplier * months);
55
+ newDate.setDate(newDate.getDate() + multiplier * days);
56
+ newDate.setHours(newDate.getHours() + multiplier * hours);
57
+ newDate.setMinutes(newDate.getMinutes() + multiplier * minutes);
58
+ newDate.setSeconds(newDate.getSeconds() + multiplier * seconds);
59
+ newDate.setMilliseconds(newDate.getMilliseconds() + multiplier * milliseconds);
60
+ return newDate;
61
+ };
62
+ export const addDuration = (date, duration) => {
63
+ return changeDuration(date, duration, true);
64
+ };
65
+ export const subtractDuration = (date, duration) => {
66
+ return changeDuration(date, duration, false);
67
+ };
68
+ export const getBetweenDuration = (startDate, endDate) => {
69
+ const durationInMilliseconds = endDate.getTime() - startDate.getTime();
70
+ const millisecondsInSecond = 1000;
71
+ const millisecondsInMinute = 60 * millisecondsInSecond;
72
+ const millisecondsInHour = 60 * millisecondsInMinute;
73
+ const millisecondsInDay = 24 * millisecondsInHour;
74
+ const millisecondsInMonth = 30 * millisecondsInDay; // Rough estimation, can be adjusted
75
+ const years = Math.floor(durationInMilliseconds / (365.25 * millisecondsInDay));
76
+ const months = Math.floor(durationInMilliseconds / millisecondsInMonth);
77
+ const days = Math.floor(durationInMilliseconds / millisecondsInDay);
78
+ const hours = Math.floor((durationInMilliseconds % millisecondsInDay) / millisecondsInHour);
79
+ const seconds = Math.floor((durationInMilliseconds % millisecondsInHour) / millisecondsInSecond);
80
+ const milliseconds = durationInMilliseconds % millisecondsInSecond;
81
+ return {
82
+ years,
83
+ months,
84
+ days,
85
+ hours,
86
+ seconds,
87
+ milliseconds,
88
+ };
89
+ };
90
+ /** Checks if a given date is in the range of two dates
91
+ *
92
+ * An undefined value for startDate or endDate means no bound for the start or end respectively
93
+ */
94
+ export const isInTimeSpan = (value, startDate, endDate) => {
95
+ if (startDate && endDate) {
96
+ console.assert(startDate <= endDate);
97
+ return startDate <= value && value <= endDate;
98
+ }
99
+ else if (startDate) {
100
+ return startDate <= value;
101
+ }
102
+ else if (endDate) {
103
+ return endDate >= value;
104
+ }
105
+ else {
106
+ return true;
107
+ }
108
+ };
109
+ /** Compare two dates on the year, month, day */
110
+ export const equalDate = (date1, date2) => {
111
+ return date1.getFullYear() === date2.getFullYear()
112
+ && date1.getMonth() === date2.getMonth()
113
+ && date1.getDate() === date2.getDate();
114
+ };
115
+ export const getWeeksForCalenderMonth = (date, weekStart, weeks = 6) => {
116
+ const month = date.getMonth();
117
+ const year = date.getFullYear();
118
+ const dayList = [];
119
+ let currentDate = new Date(year, month, 1); // Start of month
120
+ const weekStartIndex = weekDayList.indexOf(weekStart);
121
+ // Move the current day to the week before
122
+ while (currentDate.getDay() !== weekStartIndex) {
123
+ currentDate = subtractDuration(currentDate, { days: 1 });
124
+ }
125
+ while (dayList.length < 7 * weeks) {
126
+ const date = new Date(currentDate);
127
+ date.setHours(date.getHours(), date.getMinutes()); // To make sure we are not overwriting the time
128
+ dayList.push(date);
129
+ currentDate = addDuration(currentDate, { days: 1 });
130
+ }
131
+ // weeks
132
+ return equalSizeGroups(dayList, 7);
133
+ };