@helpwave/hightide 0.1.21 → 0.1.23

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 (231) hide show
  1. package/README.md +5 -0
  2. package/dist/components/branding/HelpwaveBadge.js +8 -5
  3. package/dist/components/branding/HelpwaveBadge.js.map +1 -1
  4. package/dist/components/branding/HelpwaveBadge.mjs +8 -5
  5. package/dist/components/branding/HelpwaveBadge.mjs.map +1 -1
  6. package/dist/components/date/DatePicker.js +11 -1
  7. package/dist/components/date/DatePicker.js.map +1 -1
  8. package/dist/components/date/DatePicker.mjs +11 -1
  9. package/dist/components/date/DatePicker.mjs.map +1 -1
  10. package/dist/components/date/DayPicker.js.map +1 -1
  11. package/dist/components/date/DayPicker.mjs.map +1 -1
  12. package/dist/components/date/TimeDisplay.js.map +1 -1
  13. package/dist/components/date/TimeDisplay.mjs.map +1 -1
  14. package/dist/components/date/YearMonthPicker.js +1 -0
  15. package/dist/components/date/YearMonthPicker.js.map +1 -1
  16. package/dist/components/date/YearMonthPicker.mjs +1 -0
  17. package/dist/components/date/YearMonthPicker.mjs.map +1 -1
  18. package/dist/components/dialogs/ConfirmDialog.js +2 -1
  19. package/dist/components/dialogs/ConfirmDialog.js.map +1 -1
  20. package/dist/components/dialogs/ConfirmDialog.mjs +2 -1
  21. package/dist/components/dialogs/ConfirmDialog.mjs.map +1 -1
  22. package/dist/components/icons-and-geometry/Avatar.d.mts +17 -7
  23. package/dist/components/icons-and-geometry/Avatar.d.ts +17 -7
  24. package/dist/components/icons-and-geometry/Avatar.js +2982 -42
  25. package/dist/components/icons-and-geometry/Avatar.js.map +1 -1
  26. package/dist/components/icons-and-geometry/Avatar.mjs +3010 -40
  27. package/dist/components/icons-and-geometry/Avatar.mjs.map +1 -1
  28. package/dist/components/icons-and-geometry/Tag.js +2912 -1
  29. package/dist/components/icons-and-geometry/Tag.js.map +1 -1
  30. package/dist/components/icons-and-geometry/Tag.mjs +2931 -1
  31. package/dist/components/icons-and-geometry/Tag.mjs.map +1 -1
  32. package/dist/components/layout-and-navigation/BreadCrumb.d.mts +2 -1
  33. package/dist/components/layout-and-navigation/BreadCrumb.d.ts +2 -1
  34. package/dist/components/layout-and-navigation/BreadCrumb.js +15 -11
  35. package/dist/components/layout-and-navigation/BreadCrumb.js.map +1 -1
  36. package/dist/components/layout-and-navigation/BreadCrumb.mjs +15 -11
  37. package/dist/components/layout-and-navigation/BreadCrumb.mjs.map +1 -1
  38. package/dist/components/layout-and-navigation/Carousel.js +1 -0
  39. package/dist/components/layout-and-navigation/Carousel.js.map +1 -1
  40. package/dist/components/layout-and-navigation/Carousel.mjs +1 -0
  41. package/dist/components/layout-and-navigation/Carousel.mjs.map +1 -1
  42. package/dist/components/layout-and-navigation/Chip.d.mts +6 -2
  43. package/dist/components/layout-and-navigation/Chip.d.ts +6 -2
  44. package/dist/components/layout-and-navigation/Chip.js +10 -4
  45. package/dist/components/layout-and-navigation/Chip.js.map +1 -1
  46. package/dist/components/layout-and-navigation/Chip.mjs +8 -3
  47. package/dist/components/layout-and-navigation/Chip.mjs.map +1 -1
  48. package/dist/components/layout-and-navigation/Overlay.js +3 -2
  49. package/dist/components/layout-and-navigation/Overlay.js.map +1 -1
  50. package/dist/components/layout-and-navigation/Overlay.mjs +3 -2
  51. package/dist/components/layout-and-navigation/Overlay.mjs.map +1 -1
  52. package/dist/components/layout-and-navigation/Pagination.js +3 -2
  53. package/dist/components/layout-and-navigation/Pagination.js.map +1 -1
  54. package/dist/components/layout-and-navigation/Pagination.mjs +3 -2
  55. package/dist/components/layout-and-navigation/Pagination.mjs.map +1 -1
  56. package/dist/components/layout-and-navigation/SearchableList.js +2 -1
  57. package/dist/components/layout-and-navigation/SearchableList.js.map +1 -1
  58. package/dist/components/layout-and-navigation/SearchableList.mjs +2 -1
  59. package/dist/components/layout-and-navigation/SearchableList.mjs.map +1 -1
  60. package/dist/components/layout-and-navigation/StepperBar.js +1 -0
  61. package/dist/components/layout-and-navigation/StepperBar.js.map +1 -1
  62. package/dist/components/layout-and-navigation/StepperBar.mjs +1 -0
  63. package/dist/components/layout-and-navigation/StepperBar.mjs.map +1 -1
  64. package/dist/components/layout-and-navigation/TextImage.js.map +1 -1
  65. package/dist/components/layout-and-navigation/TextImage.mjs.map +1 -1
  66. package/dist/components/layout-and-navigation/Tile.d.mts +9 -10
  67. package/dist/components/layout-and-navigation/Tile.d.ts +9 -10
  68. package/dist/components/layout-and-navigation/Tile.js +21 -4
  69. package/dist/components/layout-and-navigation/Tile.js.map +1 -1
  70. package/dist/components/layout-and-navigation/Tile.mjs +20 -4
  71. package/dist/components/layout-and-navigation/Tile.mjs.map +1 -1
  72. package/dist/components/loading-states/ErrorComponent.js.map +1 -1
  73. package/dist/components/loading-states/ErrorComponent.mjs.map +1 -1
  74. package/dist/components/loading-states/LoadingAndErrorComponent.js +1 -1
  75. package/dist/components/loading-states/LoadingAndErrorComponent.js.map +1 -1
  76. package/dist/components/loading-states/LoadingAndErrorComponent.mjs +1 -1
  77. package/dist/components/loading-states/LoadingAndErrorComponent.mjs.map +1 -1
  78. package/dist/components/loading-states/LoadingAnimation.js.map +1 -1
  79. package/dist/components/loading-states/LoadingAnimation.mjs.map +1 -1
  80. package/dist/components/loading-states/LoadingButton.js +1 -0
  81. package/dist/components/loading-states/LoadingButton.js.map +1 -1
  82. package/dist/components/loading-states/LoadingButton.mjs +1 -0
  83. package/dist/components/loading-states/LoadingButton.mjs.map +1 -1
  84. package/dist/components/modals/ConfirmModal.js +2 -1
  85. package/dist/components/modals/ConfirmModal.js.map +1 -1
  86. package/dist/components/modals/ConfirmModal.mjs +2 -1
  87. package/dist/components/modals/ConfirmModal.mjs.map +1 -1
  88. package/dist/components/modals/DiscardChangesModal.js +2 -1
  89. package/dist/components/modals/DiscardChangesModal.js.map +1 -1
  90. package/dist/components/modals/DiscardChangesModal.mjs +2 -1
  91. package/dist/components/modals/DiscardChangesModal.mjs.map +1 -1
  92. package/dist/components/modals/InputModal.js +3 -2
  93. package/dist/components/modals/InputModal.js.map +1 -1
  94. package/dist/components/modals/InputModal.mjs +3 -2
  95. package/dist/components/modals/InputModal.mjs.map +1 -1
  96. package/dist/components/modals/LanguageModal.js +26 -26
  97. package/dist/components/modals/LanguageModal.js.map +1 -1
  98. package/dist/components/modals/LanguageModal.mjs +27 -31
  99. package/dist/components/modals/LanguageModal.mjs.map +1 -1
  100. package/dist/components/modals/ThemeModal.js +32 -29
  101. package/dist/components/modals/ThemeModal.js.map +1 -1
  102. package/dist/components/modals/ThemeModal.mjs +31 -32
  103. package/dist/components/modals/ThemeModal.mjs.map +1 -1
  104. package/dist/components/properties/CheckboxProperty.js +14 -4
  105. package/dist/components/properties/CheckboxProperty.js.map +1 -1
  106. package/dist/components/properties/CheckboxProperty.mjs +14 -4
  107. package/dist/components/properties/CheckboxProperty.mjs.map +1 -1
  108. package/dist/components/properties/DateProperty.js +14 -4
  109. package/dist/components/properties/DateProperty.js.map +1 -1
  110. package/dist/components/properties/DateProperty.mjs +14 -4
  111. package/dist/components/properties/DateProperty.mjs.map +1 -1
  112. package/dist/components/properties/MultiSelectProperty.d.mts +0 -1
  113. package/dist/components/properties/MultiSelectProperty.d.ts +0 -1
  114. package/dist/components/properties/MultiSelectProperty.js +663 -648
  115. package/dist/components/properties/MultiSelectProperty.js.map +1 -1
  116. package/dist/components/properties/MultiSelectProperty.mjs +779 -768
  117. package/dist/components/properties/MultiSelectProperty.mjs.map +1 -1
  118. package/dist/components/properties/NumberProperty.js +14 -4
  119. package/dist/components/properties/NumberProperty.js.map +1 -1
  120. package/dist/components/properties/NumberProperty.mjs +14 -4
  121. package/dist/components/properties/NumberProperty.mjs.map +1 -1
  122. package/dist/components/properties/PropertyBase.js +13 -3
  123. package/dist/components/properties/PropertyBase.js.map +1 -1
  124. package/dist/components/properties/PropertyBase.mjs +13 -3
  125. package/dist/components/properties/PropertyBase.mjs.map +1 -1
  126. package/dist/components/properties/SelectProperty.d.mts +0 -1
  127. package/dist/components/properties/SelectProperty.d.ts +0 -1
  128. package/dist/components/properties/SelectProperty.js +39 -30
  129. package/dist/components/properties/SelectProperty.js.map +1 -1
  130. package/dist/components/properties/SelectProperty.mjs +40 -35
  131. package/dist/components/properties/SelectProperty.mjs.map +1 -1
  132. package/dist/components/properties/TextProperty.js +16 -6
  133. package/dist/components/properties/TextProperty.js.map +1 -1
  134. package/dist/components/properties/TextProperty.mjs +16 -6
  135. package/dist/components/properties/TextProperty.mjs.map +1 -1
  136. package/dist/components/table/Table.js +6 -5
  137. package/dist/components/table/Table.js.map +1 -1
  138. package/dist/components/table/Table.mjs +7 -10
  139. package/dist/components/table/Table.mjs.map +1 -1
  140. package/dist/components/table/TableFilterButton.js +3 -2
  141. package/dist/components/table/TableFilterButton.js.map +1 -1
  142. package/dist/components/table/TableFilterButton.mjs +4 -7
  143. package/dist/components/table/TableFilterButton.mjs.map +1 -1
  144. package/dist/components/table/TableSortButton.js +1 -0
  145. package/dist/components/table/TableSortButton.js.map +1 -1
  146. package/dist/components/table/TableSortButton.mjs +1 -0
  147. package/dist/components/table/TableSortButton.mjs.map +1 -1
  148. package/dist/components/user-action/Button.d.mts +2 -1
  149. package/dist/components/user-action/Button.d.ts +2 -1
  150. package/dist/components/user-action/Button.js +12 -1
  151. package/dist/components/user-action/Button.js.map +1 -1
  152. package/dist/components/user-action/Button.mjs +12 -1
  153. package/dist/components/user-action/Button.mjs.map +1 -1
  154. package/dist/components/user-action/Checkbox.js +1 -1
  155. package/dist/components/user-action/Checkbox.js.map +1 -1
  156. package/dist/components/user-action/Checkbox.mjs +1 -1
  157. package/dist/components/user-action/Checkbox.mjs.map +1 -1
  158. package/dist/components/user-action/CopyToClipboardWrapper.js.map +1 -1
  159. package/dist/components/user-action/CopyToClipboardWrapper.mjs.map +1 -1
  160. package/dist/components/user-action/DateAndTimePicker.js +11 -1
  161. package/dist/components/user-action/DateAndTimePicker.js.map +1 -1
  162. package/dist/components/user-action/DateAndTimePicker.mjs +11 -1
  163. package/dist/components/user-action/DateAndTimePicker.mjs.map +1 -1
  164. package/dist/components/user-action/Input.js +1 -1
  165. package/dist/components/user-action/Input.js.map +1 -1
  166. package/dist/components/user-action/Input.mjs +1 -1
  167. package/dist/components/user-action/Input.mjs.map +1 -1
  168. package/dist/components/user-action/Menu.js +2 -2
  169. package/dist/components/user-action/Menu.js.map +1 -1
  170. package/dist/components/user-action/Menu.mjs +3 -7
  171. package/dist/components/user-action/Menu.mjs.map +1 -1
  172. package/dist/components/user-action/MultiSelect.d.mts +0 -1
  173. package/dist/components/user-action/MultiSelect.d.ts +0 -1
  174. package/dist/components/user-action/MultiSelect.js +622 -616
  175. package/dist/components/user-action/MultiSelect.js.map +1 -1
  176. package/dist/components/user-action/MultiSelect.mjs +641 -639
  177. package/dist/components/user-action/MultiSelect.mjs.map +1 -1
  178. package/dist/components/user-action/ScrollPicker.js +1 -1
  179. package/dist/components/user-action/ScrollPicker.js.map +1 -1
  180. package/dist/components/user-action/ScrollPicker.mjs +1 -1
  181. package/dist/components/user-action/ScrollPicker.mjs.map +1 -1
  182. package/dist/components/user-action/SearchBar.js +2 -1
  183. package/dist/components/user-action/SearchBar.js.map +1 -1
  184. package/dist/components/user-action/SearchBar.mjs +2 -1
  185. package/dist/components/user-action/SearchBar.mjs.map +1 -1
  186. package/dist/components/user-action/Select.d.mts +1 -4
  187. package/dist/components/user-action/Select.d.ts +1 -4
  188. package/dist/components/user-action/Select.js +25 -27
  189. package/dist/components/user-action/Select.js.map +1 -1
  190. package/dist/components/user-action/Select.mjs +26 -31
  191. package/dist/components/user-action/Select.mjs.map +1 -1
  192. package/dist/components/user-action/Textarea.js +3 -3
  193. package/dist/components/user-action/Textarea.js.map +1 -1
  194. package/dist/components/user-action/Textarea.mjs +3 -3
  195. package/dist/components/user-action/Textarea.mjs.map +1 -1
  196. package/dist/css/globals.css +431 -212
  197. package/dist/css/uncompiled/globals.css +5 -5
  198. package/dist/css/uncompiled/textstyles.css +5 -5
  199. package/dist/css/uncompiled/theme/colors-basic.css +13 -5
  200. package/dist/css/uncompiled/theme/colors-component.css +60 -49
  201. package/dist/css/uncompiled/theme/colors-semantic.css +76 -78
  202. package/dist/css/uncompiled/utitlity/shadow.css +45 -16
  203. package/dist/hooks/useLocalStorage.js +8 -3
  204. package/dist/hooks/useLocalStorage.js.map +1 -1
  205. package/dist/hooks/useLocalStorage.mjs +8 -3
  206. package/dist/hooks/useLocalStorage.mjs.map +1 -1
  207. package/dist/hooks/useLogOnce.d.mts +8 -0
  208. package/dist/hooks/useLogOnce.d.ts +8 -0
  209. package/dist/hooks/useLogOnce.js +53 -0
  210. package/dist/hooks/useLogOnce.js.map +1 -0
  211. package/dist/hooks/useLogOnce.mjs +29 -0
  212. package/dist/hooks/useLogOnce.mjs.map +1 -0
  213. package/dist/index.d.mts +5 -4
  214. package/dist/index.d.ts +5 -4
  215. package/dist/index.js +3301 -435
  216. package/dist/index.js.map +1 -1
  217. package/dist/index.mjs +3185 -324
  218. package/dist/index.mjs.map +1 -1
  219. package/dist/localization/LanguageProvider.js +8 -3
  220. package/dist/localization/LanguageProvider.js.map +1 -1
  221. package/dist/localization/LanguageProvider.mjs +8 -3
  222. package/dist/localization/LanguageProvider.mjs.map +1 -1
  223. package/dist/localization/useTranslation.js.map +1 -1
  224. package/dist/localization/useTranslation.mjs.map +1 -1
  225. package/dist/theming/useTheme.d.mts +2 -2
  226. package/dist/theming/useTheme.d.ts +2 -2
  227. package/dist/theming/useTheme.js +26 -22
  228. package/dist/theming/useTheme.js.map +1 -1
  229. package/dist/theming/useTheme.mjs +21 -17
  230. package/dist/theming/useTheme.mjs.map +1 -1
  231. package/package.json +1 -1
@@ -59,6 +59,11 @@ var LocalStorageService = class extends StorageService {
59
59
  }
60
60
  };
61
61
 
62
+ // src/util/resolveSetState.ts
63
+ function resolveSetState(action, prev) {
64
+ return typeof action === "function" ? action(prev) : action;
65
+ }
66
+
62
67
  // src/hooks/useLocalStorage.ts
63
68
  var useLocalStorage = (key, initValue) => {
64
69
  const get = (0, import_react.useCallback)(() => {
@@ -70,10 +75,10 @@ var useLocalStorage = (key, initValue) => {
70
75
  return value || initValue;
71
76
  }, [initValue, key]);
72
77
  const [storedValue, setStoredValue] = (0, import_react.useState)(get);
73
- const setValue = (0, import_react.useCallback)((value) => {
74
- const newValue = value instanceof Function ? value(storedValue) : value;
78
+ const setValue = (0, import_react.useCallback)((action) => {
79
+ const newValue = resolveSetState(action, storedValue);
75
80
  const storageService = new LocalStorageService();
76
- storageService.set(key, value);
81
+ storageService.set(key, newValue);
77
82
  setStoredValue(newValue);
78
83
  }, [storedValue, setStoredValue, key]);
79
84
  (0, import_react.useEffect)(() => {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/localization/LanguageProvider.tsx","../../src/hooks/useLocalStorage.ts","../../src/util/storage.ts","../../src/localization/util.ts"],"sourcesContent":["import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport { useLocalStorage } from '../hooks/useLocalStorage'\nimport type { Language } from './util'\nimport { LanguageUtil } from './util'\n\nexport type LanguageContextValue = {\n language: Language,\n setLanguage: Dispatch<SetStateAction<Language>>,\n}\n\nexport const LanguageContext = createContext<LanguageContextValue>({\n language: LanguageUtil.DEFAULT_LANGUAGE,\n setLanguage: (v) => v\n})\n\nexport const useLanguage = () => useContext(LanguageContext)\n\nexport const useLocale = (overWriteLanguage?: Language) => {\n const { language } = useLanguage()\n const mapping: Record<Language, string> = {\n en: 'en-US',\n de: 'de-DE'\n }\n return mapping[overWriteLanguage ?? language]\n}\n\ntype LanguageProviderProps = {\n initialLanguage?: Language,\n}\n\nexport const LanguageProvider = ({ initialLanguage, children }: PropsWithChildren<LanguageProviderProps>) => {\n const [language, setLanguage] = useState<Language>(initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n const [storedLanguage, setStoredLanguage] = useLocalStorage<Language>('language', initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n\n useEffect(() => {\n if (language !== initialLanguage && initialLanguage) {\n console.warn('LanguageProvider initial state changed: Prefer using languageProvider\\'s setLanguage instead')\n setLanguage(initialLanguage)\n }\n }, [initialLanguage]) // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n document.documentElement.setAttribute('lang', language)\n setStoredLanguage(language)\n }, [language]) // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n if (storedLanguage !== null) {\n setLanguage(storedLanguage)\n return\n }\n\n const LanguageToTestAgainst = Object.values(LanguageUtil.languages)\n\n const matchingBrowserLanguage = window.navigator.languages\n .map(language => LanguageToTestAgainst.find((test) => language === test || language.split('-')[0] === test))\n .filter(entry => entry !== undefined)\n\n if (matchingBrowserLanguage.length === 0) return\n\n const firstMatch = matchingBrowserLanguage[0] as Language\n setLanguage(firstMatch)\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return (\n <LanguageContext.Provider value={{\n language,\n setLanguage\n }}>\n {children}\n </LanguageContext.Provider>\n )\n}","import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const useLocalStorage = <T>(key: string, initValue: T): [T, SetValue<T>] => {\n const get = useCallback((): T => {\n if (typeof window === 'undefined') {\n return initValue\n }\n const storageService = new LocalStorageService()\n const value = storageService.get<T>(key)\n return value || initValue\n }, [initValue, key])\n\n const [storedValue, setStoredValue] = useState<T>(get)\n\n const setValue: SetValue<T> = useCallback(value => {\n const newValue = value instanceof Function ? value(storedValue) : value\n const storageService = new LocalStorageService()\n storageService.set(key, value)\n\n setStoredValue(newValue)\n }, [storedValue, setStoredValue, key])\n\n useEffect(() => {\n setStoredValue(get())\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return [storedValue, setValue]\n}","class StorageService {\n // this seems to be a bug in eslint as 'paramter-properties' is a special syntax of typescript\n\n constructor(private storage: Storage) {\n }\n\n public get<T>(key: string): T | null {\n const value = this.storage.getItem(key)\n if (value === null) {\n return null\n }\n return JSON.parse(value)\n }\n\n public set<T>(key: string, value: T) {\n this.storage.setItem(key, JSON.stringify(value))\n }\n\n public delete(key: string) {\n this.storage.removeItem(key)\n }\n\n public deleteAll() {\n this.storage.clear()\n }\n}\n\nexport class LocalStorageService extends StorageService {\n constructor() {\n super(window.localStorage)\n }\n}\n\nexport class SessionStorageService extends StorageService {\n constructor() {\n super(window.sessionStorage)\n }\n}\n","/**\n * The supported languages\n */\nconst languages = ['en', 'de'] as const\n\n/**\n * The supported languages\n */\nexport type Language = typeof languages[number]\n\n/**\n * The supported languages' names in their respective language\n */\nconst languagesLocalNames: Record<Language, string> = {\n en: 'English',\n de: 'Deutsch',\n}\n\n/**\n * The default language\n */\nconst DEFAULT_LANGUAGE: Language = 'en'\n\n/**\n * A constant definition for holding data regarding languages\n */\nexport const LanguageUtil = {\n languages,\n DEFAULT_LANGUAGE,\n languagesLocalNames,\n}"],"mappings":"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","names":["import_react","language"]}
1
+ {"version":3,"sources":["../../src/localization/LanguageProvider.tsx","../../src/hooks/useLocalStorage.ts","../../src/util/storage.ts","../../src/util/resolveSetState.ts","../../src/localization/util.ts"],"sourcesContent":["import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport { useLocalStorage } from '../hooks/useLocalStorage'\nimport type { Language } from './util'\nimport { LanguageUtil } from './util'\n\nexport type LanguageContextValue = {\n language: Language,\n setLanguage: Dispatch<SetStateAction<Language>>,\n}\n\nexport const LanguageContext = createContext<LanguageContextValue>({\n language: LanguageUtil.DEFAULT_LANGUAGE,\n setLanguage: (v) => v\n})\n\nexport const useLanguage = () => useContext(LanguageContext)\n\nexport const useLocale = (overWriteLanguage?: Language) => {\n const { language } = useLanguage()\n const mapping: Record<Language, string> = {\n en: 'en-US',\n de: 'de-DE'\n }\n return mapping[overWriteLanguage ?? language]\n}\n\ntype LanguageProviderProps = {\n initialLanguage?: Language,\n}\n\nexport const LanguageProvider = ({ initialLanguage, children }: PropsWithChildren<LanguageProviderProps>) => {\n const [language, setLanguage] = useState<Language>(initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n const [storedLanguage, setStoredLanguage] = useLocalStorage<Language>('language', initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n\n useEffect(() => {\n if (language !== initialLanguage && initialLanguage) {\n console.warn('LanguageProvider initial state changed: Prefer using languageProvider\\'s setLanguage instead')\n setLanguage(initialLanguage)\n }\n }, [initialLanguage]) // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n document.documentElement.setAttribute('lang', language)\n setStoredLanguage(language)\n }, [language]) // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n if (storedLanguage !== null) {\n setLanguage(storedLanguage)\n return\n }\n\n const LanguageToTestAgainst = Object.values(LanguageUtil.languages)\n\n const matchingBrowserLanguage = window.navigator.languages\n .map(language => LanguageToTestAgainst.find((test) => language === test || language.split('-')[0] === test))\n .filter(entry => entry !== undefined)\n\n if (matchingBrowserLanguage.length === 0) return\n\n const firstMatch = matchingBrowserLanguage[0] as Language\n setLanguage(firstMatch)\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return (\n <LanguageContext.Provider value={{\n language,\n setLanguage\n }}>\n {children}\n </LanguageContext.Provider>\n )\n}","import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\nimport { resolveSetState } from '../util/resolveSetState'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const useLocalStorage = <T>(key: string, initValue: T): [T, SetValue<T>] => {\n const get = useCallback((): T => {\n if (typeof window === 'undefined') {\n return initValue\n }\n const storageService = new LocalStorageService()\n const value = storageService.get<T>(key)\n return value || initValue\n }, [initValue, key])\n\n const [storedValue, setStoredValue] = useState<T>(get)\n\n const setValue: SetValue<T> = useCallback(action => {\n const newValue = resolveSetState(action, storedValue)\n const storageService = new LocalStorageService()\n storageService.set(key, newValue)\n\n setStoredValue(newValue)\n }, [storedValue, setStoredValue, key])\n\n useEffect(() => {\n setStoredValue(get())\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return [storedValue, setValue]\n}","class StorageService {\n // this seems to be a bug in eslint as 'paramter-properties' is a special syntax of typescript\n\n constructor(private storage: Storage) {\n }\n\n public get<T>(key: string): T | null {\n const value = this.storage.getItem(key)\n if (value === null) {\n return null\n }\n return JSON.parse(value)\n }\n\n public set<T>(key: string, value: T) {\n this.storage.setItem(key, JSON.stringify(value))\n }\n\n public delete(key: string) {\n this.storage.removeItem(key)\n }\n\n public deleteAll() {\n this.storage.clear()\n }\n}\n\nexport class LocalStorageService extends StorageService {\n constructor() {\n super(window.localStorage)\n }\n}\n\nexport class SessionStorageService extends StorageService {\n constructor() {\n super(window.sessionStorage)\n }\n}\n","import type { SetStateAction } from 'react'\n\nexport function resolveSetState<T>(action: SetStateAction<T>, prev: T): T {\n return typeof action === 'function' ? (action as (prev: T) => T)(prev) : action\n}","/**\n * The supported languages\n */\nconst languages = ['en', 'de'] as const\n\n/**\n * The supported languages\n */\nexport type Language = typeof languages[number]\n\n/**\n * The supported languages' names in their respective language\n */\nconst languagesLocalNames: Record<Language, string> = {\n en: 'English',\n de: 'Deutsch',\n}\n\n/**\n * The default language\n */\nconst DEFAULT_LANGUAGE: Language = 'en'\n\n/**\n * A constant definition for holding data regarding languages\n */\nexport const LanguageUtil = {\n languages,\n DEFAULT_LANGUAGE,\n languagesLocalNames,\n}"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,IAAAA,gBAA+D;;;ACA/D,mBAAiD;;;ACDjD,IAAM,iBAAN,MAAqB;AAAA;AAAA,EAGnB,YAAoB,SAAkB;AAAlB;AAAA,EACpB;AAAA,EAEO,IAAO,KAAuB;AACnC,UAAM,QAAQ,KAAK,QAAQ,QAAQ,GAAG;AACtC,QAAI,UAAU,MAAM;AAClB,aAAO;AAAA,IACT;AACA,WAAO,KAAK,MAAM,KAAK;AAAA,EACzB;AAAA,EAEO,IAAO,KAAa,OAAU;AACnC,SAAK,QAAQ,QAAQ,KAAK,KAAK,UAAU,KAAK,CAAC;AAAA,EACjD;AAAA,EAEO,OAAO,KAAa;AACzB,SAAK,QAAQ,WAAW,GAAG;AAAA,EAC7B;AAAA,EAEO,YAAY;AACjB,SAAK,QAAQ,MAAM;AAAA,EACrB;AACF;AAEO,IAAM,sBAAN,cAAkC,eAAe;AAAA,EACtD,cAAc;AACZ,UAAM,OAAO,YAAY;AAAA,EAC3B;AACF;;;AC7BO,SAAS,gBAAmB,QAA2B,MAAY;AACxE,SAAO,OAAO,WAAW,aAAc,OAA0B,IAAI,IAAI;AAC3E;;;AFEO,IAAM,kBAAkB,CAAI,KAAa,cAAmC;AACjF,QAAM,UAAM,0BAAY,MAAS;AAC/B,QAAI,OAAO,WAAW,aAAa;AACjC,aAAO;AAAA,IACT;AACA,UAAM,iBAAiB,IAAI,oBAAoB;AAC/C,UAAM,QAAQ,eAAe,IAAO,GAAG;AACvC,WAAO,SAAS;AAAA,EAClB,GAAG,CAAC,WAAW,GAAG,CAAC;AAEnB,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAY,GAAG;AAErD,QAAM,eAAwB,0BAAY,YAAU;AAClD,UAAM,WAAW,gBAAgB,QAAQ,WAAW;AACpD,UAAM,iBAAiB,IAAI,oBAAoB;AAC/C,mBAAe,IAAI,KAAK,QAAQ;AAEhC,mBAAe,QAAQ;AAAA,EACzB,GAAG,CAAC,aAAa,gBAAgB,GAAG,CAAC;AAErC,8BAAU,MAAM;AACd,mBAAe,IAAI,CAAC;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,SAAO,CAAC,aAAa,QAAQ;AAC/B;;;AG5BA,IAAM,YAAY,CAAC,MAAM,IAAI;AAU7B,IAAM,sBAAgD;AAAA,EACpD,IAAI;AAAA,EACJ,IAAI;AACN;AAKA,IAAM,mBAA6B;AAK5B,IAAM,eAAe;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACF;;;AJoCI;AAvDG,IAAM,sBAAkB,6BAAoC;AAAA,EACjE,UAAU,aAAa;AAAA,EACvB,aAAa,CAAC,MAAM;AACtB,CAAC;AAEM,IAAM,cAAc,UAAM,0BAAW,eAAe;AAEpD,IAAM,YAAY,CAAC,sBAAiC;AACzD,QAAM,EAAE,SAAS,IAAI,YAAY;AACjC,QAAM,UAAoC;AAAA,IACxC,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AACA,SAAO,QAAQ,qBAAqB,QAAQ;AAC9C;AAMO,IAAM,mBAAmB,CAAC,EAAE,iBAAiB,SAAS,MAAgD;AAC3G,QAAM,CAAC,UAAU,WAAW,QAAI,wBAAmB,mBAAmB,aAAa,gBAAgB;AACnG,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,gBAA0B,YAAY,mBAAmB,aAAa,gBAAgB;AAElI,+BAAU,MAAM;AACd,QAAI,aAAa,mBAAmB,iBAAiB;AACnD,cAAQ,KAAK,6FAA8F;AAC3G,kBAAY,eAAe;AAAA,IAC7B;AAAA,EACF,GAAG,CAAC,eAAe,CAAC;AAEpB,+BAAU,MAAM;AACd,aAAS,gBAAgB,aAAa,QAAQ,QAAQ;AACtD,sBAAkB,QAAQ;AAAA,EAC5B,GAAG,CAAC,QAAQ,CAAC;AAEb,+BAAU,MAAM;AACd,QAAI,mBAAmB,MAAM;AAC3B,kBAAY,cAAc;AAC1B;AAAA,IACF;AAEA,UAAM,wBAAwB,OAAO,OAAO,aAAa,SAAS;AAElE,UAAM,0BAA0B,OAAO,UAAU,UAC9C,IAAI,CAAAC,cAAY,sBAAsB,KAAK,CAAC,SAASA,cAAa,QAAQA,UAAS,MAAM,GAAG,EAAE,CAAC,MAAM,IAAI,CAAC,EAC1G,OAAO,WAAS,UAAU,MAAS;AAEtC,QAAI,wBAAwB,WAAW,EAAG;AAE1C,UAAM,aAAa,wBAAwB,CAAC;AAC5C,gBAAY,UAAU;AAAA,EACxB,GAAG,CAAC,CAAC;AAEL,SACE,4CAAC,gBAAgB,UAAhB,EAAyB,OAAO;AAAA,IAC/B;AAAA,IACA;AAAA,EACF,GACG,UACH;AAEJ;","names":["import_react","language"]}
@@ -33,6 +33,11 @@ var LocalStorageService = class extends StorageService {
33
33
  }
34
34
  };
35
35
 
36
+ // src/util/resolveSetState.ts
37
+ function resolveSetState(action, prev) {
38
+ return typeof action === "function" ? action(prev) : action;
39
+ }
40
+
36
41
  // src/hooks/useLocalStorage.ts
37
42
  var useLocalStorage = (key, initValue) => {
38
43
  const get = useCallback(() => {
@@ -44,10 +49,10 @@ var useLocalStorage = (key, initValue) => {
44
49
  return value || initValue;
45
50
  }, [initValue, key]);
46
51
  const [storedValue, setStoredValue] = useState(get);
47
- const setValue = useCallback((value) => {
48
- const newValue = value instanceof Function ? value(storedValue) : value;
52
+ const setValue = useCallback((action) => {
53
+ const newValue = resolveSetState(action, storedValue);
49
54
  const storageService = new LocalStorageService();
50
- storageService.set(key, value);
55
+ storageService.set(key, newValue);
51
56
  setStoredValue(newValue);
52
57
  }, [storedValue, setStoredValue, key]);
53
58
  useEffect(() => {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/localization/LanguageProvider.tsx","../../src/hooks/useLocalStorage.ts","../../src/util/storage.ts","../../src/localization/util.ts"],"sourcesContent":["import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport { useLocalStorage } from '../hooks/useLocalStorage'\nimport type { Language } from './util'\nimport { LanguageUtil } from './util'\n\nexport type LanguageContextValue = {\n language: Language,\n setLanguage: Dispatch<SetStateAction<Language>>,\n}\n\nexport const LanguageContext = createContext<LanguageContextValue>({\n language: LanguageUtil.DEFAULT_LANGUAGE,\n setLanguage: (v) => v\n})\n\nexport const useLanguage = () => useContext(LanguageContext)\n\nexport const useLocale = (overWriteLanguage?: Language) => {\n const { language } = useLanguage()\n const mapping: Record<Language, string> = {\n en: 'en-US',\n de: 'de-DE'\n }\n return mapping[overWriteLanguage ?? language]\n}\n\ntype LanguageProviderProps = {\n initialLanguage?: Language,\n}\n\nexport const LanguageProvider = ({ initialLanguage, children }: PropsWithChildren<LanguageProviderProps>) => {\n const [language, setLanguage] = useState<Language>(initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n const [storedLanguage, setStoredLanguage] = useLocalStorage<Language>('language', initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n\n useEffect(() => {\n if (language !== initialLanguage && initialLanguage) {\n console.warn('LanguageProvider initial state changed: Prefer using languageProvider\\'s setLanguage instead')\n setLanguage(initialLanguage)\n }\n }, [initialLanguage]) // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n document.documentElement.setAttribute('lang', language)\n setStoredLanguage(language)\n }, [language]) // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n if (storedLanguage !== null) {\n setLanguage(storedLanguage)\n return\n }\n\n const LanguageToTestAgainst = Object.values(LanguageUtil.languages)\n\n const matchingBrowserLanguage = window.navigator.languages\n .map(language => LanguageToTestAgainst.find((test) => language === test || language.split('-')[0] === test))\n .filter(entry => entry !== undefined)\n\n if (matchingBrowserLanguage.length === 0) return\n\n const firstMatch = matchingBrowserLanguage[0] as Language\n setLanguage(firstMatch)\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return (\n <LanguageContext.Provider value={{\n language,\n setLanguage\n }}>\n {children}\n </LanguageContext.Provider>\n )\n}","import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const useLocalStorage = <T>(key: string, initValue: T): [T, SetValue<T>] => {\n const get = useCallback((): T => {\n if (typeof window === 'undefined') {\n return initValue\n }\n const storageService = new LocalStorageService()\n const value = storageService.get<T>(key)\n return value || initValue\n }, [initValue, key])\n\n const [storedValue, setStoredValue] = useState<T>(get)\n\n const setValue: SetValue<T> = useCallback(value => {\n const newValue = value instanceof Function ? value(storedValue) : value\n const storageService = new LocalStorageService()\n storageService.set(key, value)\n\n setStoredValue(newValue)\n }, [storedValue, setStoredValue, key])\n\n useEffect(() => {\n setStoredValue(get())\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return [storedValue, setValue]\n}","class StorageService {\n // this seems to be a bug in eslint as 'paramter-properties' is a special syntax of typescript\n\n constructor(private storage: Storage) {\n }\n\n public get<T>(key: string): T | null {\n const value = this.storage.getItem(key)\n if (value === null) {\n return null\n }\n return JSON.parse(value)\n }\n\n public set<T>(key: string, value: T) {\n this.storage.setItem(key, JSON.stringify(value))\n }\n\n public delete(key: string) {\n this.storage.removeItem(key)\n }\n\n public deleteAll() {\n this.storage.clear()\n }\n}\n\nexport class LocalStorageService extends StorageService {\n constructor() {\n super(window.localStorage)\n }\n}\n\nexport class SessionStorageService extends StorageService {\n constructor() {\n super(window.sessionStorage)\n }\n}\n","/**\n * The supported languages\n */\nconst languages = ['en', 'de'] as const\n\n/**\n * The supported languages\n */\nexport type Language = typeof languages[number]\n\n/**\n * The supported languages' names in their respective language\n */\nconst languagesLocalNames: Record<Language, string> = {\n en: 'English',\n de: 'Deutsch',\n}\n\n/**\n * The default language\n */\nconst DEFAULT_LANGUAGE: Language = 'en'\n\n/**\n * A constant definition for holding data regarding languages\n */\nexport const LanguageUtil = {\n languages,\n DEFAULT_LANGUAGE,\n languagesLocalNames,\n}"],"mappings":"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","names":["useEffect","useState","useState","useEffect","language"]}
1
+ {"version":3,"sources":["../../src/localization/LanguageProvider.tsx","../../src/hooks/useLocalStorage.ts","../../src/util/storage.ts","../../src/util/resolveSetState.ts","../../src/localization/util.ts"],"sourcesContent":["import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport { useLocalStorage } from '../hooks/useLocalStorage'\nimport type { Language } from './util'\nimport { LanguageUtil } from './util'\n\nexport type LanguageContextValue = {\n language: Language,\n setLanguage: Dispatch<SetStateAction<Language>>,\n}\n\nexport const LanguageContext = createContext<LanguageContextValue>({\n language: LanguageUtil.DEFAULT_LANGUAGE,\n setLanguage: (v) => v\n})\n\nexport const useLanguage = () => useContext(LanguageContext)\n\nexport const useLocale = (overWriteLanguage?: Language) => {\n const { language } = useLanguage()\n const mapping: Record<Language, string> = {\n en: 'en-US',\n de: 'de-DE'\n }\n return mapping[overWriteLanguage ?? language]\n}\n\ntype LanguageProviderProps = {\n initialLanguage?: Language,\n}\n\nexport const LanguageProvider = ({ initialLanguage, children }: PropsWithChildren<LanguageProviderProps>) => {\n const [language, setLanguage] = useState<Language>(initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n const [storedLanguage, setStoredLanguage] = useLocalStorage<Language>('language', initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n\n useEffect(() => {\n if (language !== initialLanguage && initialLanguage) {\n console.warn('LanguageProvider initial state changed: Prefer using languageProvider\\'s setLanguage instead')\n setLanguage(initialLanguage)\n }\n }, [initialLanguage]) // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n document.documentElement.setAttribute('lang', language)\n setStoredLanguage(language)\n }, [language]) // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n if (storedLanguage !== null) {\n setLanguage(storedLanguage)\n return\n }\n\n const LanguageToTestAgainst = Object.values(LanguageUtil.languages)\n\n const matchingBrowserLanguage = window.navigator.languages\n .map(language => LanguageToTestAgainst.find((test) => language === test || language.split('-')[0] === test))\n .filter(entry => entry !== undefined)\n\n if (matchingBrowserLanguage.length === 0) return\n\n const firstMatch = matchingBrowserLanguage[0] as Language\n setLanguage(firstMatch)\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return (\n <LanguageContext.Provider value={{\n language,\n setLanguage\n }}>\n {children}\n </LanguageContext.Provider>\n )\n}","import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\nimport { resolveSetState } from '../util/resolveSetState'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const useLocalStorage = <T>(key: string, initValue: T): [T, SetValue<T>] => {\n const get = useCallback((): T => {\n if (typeof window === 'undefined') {\n return initValue\n }\n const storageService = new LocalStorageService()\n const value = storageService.get<T>(key)\n return value || initValue\n }, [initValue, key])\n\n const [storedValue, setStoredValue] = useState<T>(get)\n\n const setValue: SetValue<T> = useCallback(action => {\n const newValue = resolveSetState(action, storedValue)\n const storageService = new LocalStorageService()\n storageService.set(key, newValue)\n\n setStoredValue(newValue)\n }, [storedValue, setStoredValue, key])\n\n useEffect(() => {\n setStoredValue(get())\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return [storedValue, setValue]\n}","class StorageService {\n // this seems to be a bug in eslint as 'paramter-properties' is a special syntax of typescript\n\n constructor(private storage: Storage) {\n }\n\n public get<T>(key: string): T | null {\n const value = this.storage.getItem(key)\n if (value === null) {\n return null\n }\n return JSON.parse(value)\n }\n\n public set<T>(key: string, value: T) {\n this.storage.setItem(key, JSON.stringify(value))\n }\n\n public delete(key: string) {\n this.storage.removeItem(key)\n }\n\n public deleteAll() {\n this.storage.clear()\n }\n}\n\nexport class LocalStorageService extends StorageService {\n constructor() {\n super(window.localStorage)\n }\n}\n\nexport class SessionStorageService extends StorageService {\n constructor() {\n super(window.sessionStorage)\n }\n}\n","import type { SetStateAction } from 'react'\n\nexport function resolveSetState<T>(action: SetStateAction<T>, prev: T): T {\n return typeof action === 'function' ? (action as (prev: T) => T)(prev) : action\n}","/**\n * The supported languages\n */\nconst languages = ['en', 'de'] as const\n\n/**\n * The supported languages\n */\nexport type Language = typeof languages[number]\n\n/**\n * The supported languages' names in their respective language\n */\nconst languagesLocalNames: Record<Language, string> = {\n en: 'English',\n de: 'Deutsch',\n}\n\n/**\n * The default language\n */\nconst DEFAULT_LANGUAGE: Language = 'en'\n\n/**\n * A constant definition for holding data regarding languages\n */\nexport const LanguageUtil = {\n languages,\n DEFAULT_LANGUAGE,\n languagesLocalNames,\n}"],"mappings":";AACA,SAAS,eAAe,YAAY,aAAAA,YAAW,YAAAC,iBAAgB;;;ACA/D,SAAS,aAAa,WAAW,gBAAgB;;;ACDjD,IAAM,iBAAN,MAAqB;AAAA;AAAA,EAGnB,YAAoB,SAAkB;AAAlB;AAAA,EACpB;AAAA,EAEO,IAAO,KAAuB;AACnC,UAAM,QAAQ,KAAK,QAAQ,QAAQ,GAAG;AACtC,QAAI,UAAU,MAAM;AAClB,aAAO;AAAA,IACT;AACA,WAAO,KAAK,MAAM,KAAK;AAAA,EACzB;AAAA,EAEO,IAAO,KAAa,OAAU;AACnC,SAAK,QAAQ,QAAQ,KAAK,KAAK,UAAU,KAAK,CAAC;AAAA,EACjD;AAAA,EAEO,OAAO,KAAa;AACzB,SAAK,QAAQ,WAAW,GAAG;AAAA,EAC7B;AAAA,EAEO,YAAY;AACjB,SAAK,QAAQ,MAAM;AAAA,EACrB;AACF;AAEO,IAAM,sBAAN,cAAkC,eAAe;AAAA,EACtD,cAAc;AACZ,UAAM,OAAO,YAAY;AAAA,EAC3B;AACF;;;AC7BO,SAAS,gBAAmB,QAA2B,MAAY;AACxE,SAAO,OAAO,WAAW,aAAc,OAA0B,IAAI,IAAI;AAC3E;;;AFEO,IAAM,kBAAkB,CAAI,KAAa,cAAmC;AACjF,QAAM,MAAM,YAAY,MAAS;AAC/B,QAAI,OAAO,WAAW,aAAa;AACjC,aAAO;AAAA,IACT;AACA,UAAM,iBAAiB,IAAI,oBAAoB;AAC/C,UAAM,QAAQ,eAAe,IAAO,GAAG;AACvC,WAAO,SAAS;AAAA,EAClB,GAAG,CAAC,WAAW,GAAG,CAAC;AAEnB,QAAM,CAAC,aAAa,cAAc,IAAI,SAAY,GAAG;AAErD,QAAM,WAAwB,YAAY,YAAU;AAClD,UAAM,WAAW,gBAAgB,QAAQ,WAAW;AACpD,UAAM,iBAAiB,IAAI,oBAAoB;AAC/C,mBAAe,IAAI,KAAK,QAAQ;AAEhC,mBAAe,QAAQ;AAAA,EACzB,GAAG,CAAC,aAAa,gBAAgB,GAAG,CAAC;AAErC,YAAU,MAAM;AACd,mBAAe,IAAI,CAAC;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,SAAO,CAAC,aAAa,QAAQ;AAC/B;;;AG5BA,IAAM,YAAY,CAAC,MAAM,IAAI;AAU7B,IAAM,sBAAgD;AAAA,EACpD,IAAI;AAAA,EACJ,IAAI;AACN;AAKA,IAAM,mBAA6B;AAK5B,IAAM,eAAe;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACF;;;AJoCI;AAvDG,IAAM,kBAAkB,cAAoC;AAAA,EACjE,UAAU,aAAa;AAAA,EACvB,aAAa,CAAC,MAAM;AACtB,CAAC;AAEM,IAAM,cAAc,MAAM,WAAW,eAAe;AAEpD,IAAM,YAAY,CAAC,sBAAiC;AACzD,QAAM,EAAE,SAAS,IAAI,YAAY;AACjC,QAAM,UAAoC;AAAA,IACxC,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AACA,SAAO,QAAQ,qBAAqB,QAAQ;AAC9C;AAMO,IAAM,mBAAmB,CAAC,EAAE,iBAAiB,SAAS,MAAgD;AAC3G,QAAM,CAAC,UAAU,WAAW,IAAIC,UAAmB,mBAAmB,aAAa,gBAAgB;AACnG,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,gBAA0B,YAAY,mBAAmB,aAAa,gBAAgB;AAElI,EAAAC,WAAU,MAAM;AACd,QAAI,aAAa,mBAAmB,iBAAiB;AACnD,cAAQ,KAAK,6FAA8F;AAC3G,kBAAY,eAAe;AAAA,IAC7B;AAAA,EACF,GAAG,CAAC,eAAe,CAAC;AAEpB,EAAAA,WAAU,MAAM;AACd,aAAS,gBAAgB,aAAa,QAAQ,QAAQ;AACtD,sBAAkB,QAAQ;AAAA,EAC5B,GAAG,CAAC,QAAQ,CAAC;AAEb,EAAAA,WAAU,MAAM;AACd,QAAI,mBAAmB,MAAM;AAC3B,kBAAY,cAAc;AAC1B;AAAA,IACF;AAEA,UAAM,wBAAwB,OAAO,OAAO,aAAa,SAAS;AAElE,UAAM,0BAA0B,OAAO,UAAU,UAC9C,IAAI,CAAAC,cAAY,sBAAsB,KAAK,CAAC,SAASA,cAAa,QAAQA,UAAS,MAAM,GAAG,EAAE,CAAC,MAAM,IAAI,CAAC,EAC1G,OAAO,WAAS,UAAU,MAAS;AAEtC,QAAI,wBAAwB,WAAW,EAAG;AAE1C,UAAM,aAAa,wBAAwB,CAAC;AAC5C,gBAAY,UAAU;AAAA,EACxB,GAAG,CAAC,CAAC;AAEL,SACE,oBAAC,gBAAgB,UAAhB,EAAyB,OAAO;AAAA,IAC/B;AAAA,IACA;AAAA,EACF,GACG,UACH;AAEJ;","names":["useEffect","useState","useState","useEffect","language"]}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/localization/useTranslation.ts","../../src/localization/LanguageProvider.tsx","../../src/hooks/useLocalStorage.ts","../../src/localization/util.ts"],"sourcesContent":["import { useLanguage } from './LanguageProvider'\nimport type { Language } from './util'\n\n/**\n * A type describing the pluralization of a word\n */\nexport type TranslationPlural = {\n zero?: string,\n one?: string,\n two?: string,\n few?: string,\n many?: string,\n other: string,\n}\n\n/**\n * The type describing all values of a translation\n */\nexport type TranslationType = Record<string, string | TranslationPlural>\n\n/**\n * The type of translations\n */\nexport type Translation<T extends TranslationType> = Record<Language, T>\n\ntype OverwriteTranslationType<T extends TranslationType> = {\n language?: Language,\n translation?: Translation<Partial<T>>,\n}\n\n/**\n * Adds the `language` prop to the component props.\n *\n * @param Translation the type of the translation object\n *\n * @param Props the type of the component props, defaults to `Record<string, never>`,\n * if you don't expect any other props other than `language` and get an\n * error when using your component (because it uses `forwardRef` etc.)\n * you can try out `Record<string, unknown>`, this might resolve your\n * problem as `SomeType & never` is still `never` but `SomeType & unknown`\n * is `SomeType` which means that adding back props (like `ref` etc.)\n * works properly\n */\nexport type PropsForTranslation<\n Translation extends TranslationType,\n Props = unknown\n> = Props & {\n overwriteTranslation?: OverwriteTranslationType<Translation>,\n}\n\ntype StringKeys<T> = Extract<keyof T, string>;\n\ntype TranslationFunctionOptions = {\n replacements?: Record<string, string>,\n count?: number,\n}\ntype TranslationFunction<T extends TranslationType> = (key: StringKeys<T>, options?: TranslationFunctionOptions) => string\n\nexport const TranslationPluralCount = {\n zero: 0,\n one: 1,\n two: 2,\n few: 3,\n many: 11,\n other: -1,\n}\n\n\nexport const useTranslation = <T extends TranslationType>(\n translations: Translation<Partial<TranslationType>>[],\n overwriteTranslation: OverwriteTranslationType<T> = {}\n): TranslationFunction<T> => {\n const { language: languageProp, translation: overwrite } = overwriteTranslation\n const { language: inferredLanguage } = useLanguage()\n const usedLanguage = languageProp ?? inferredLanguage\n const usedTranslations = [...translations]\n if (overwrite) {\n usedTranslations.push(overwrite)\n }\n\n return (key: StringKeys<T>, options?: TranslationFunctionOptions): string => {\n const { count, replacements } = { ...{ count: 0, replacements: {} }, ...options }\n\n try {\n for (let i = translations.length - 1; i >= 0; i--) {\n const translation = translations[i]\n const localizedTranslation = translation[usedLanguage]\n if (!localizedTranslation) {\n continue\n }\n const value = localizedTranslation[key]\n if(!value) {\n continue\n }\n\n let forProcessing: string\n if (typeof value !== 'string') {\n if (count === TranslationPluralCount.zero && value?.zero) {\n forProcessing = value.zero\n } else if (count === TranslationPluralCount.one && value?.one) {\n forProcessing = value.one\n } else if (count === TranslationPluralCount.two && value?.two) {\n forProcessing = value.two\n } else if (TranslationPluralCount.few <= count && count < TranslationPluralCount.many && value?.few) {\n forProcessing = value.few\n } else if (count > TranslationPluralCount.many && value?.many) {\n forProcessing = value.many\n } else {\n forProcessing = value.other\n }\n } else {\n forProcessing = value\n }\n forProcessing = forProcessing.replace(/\\{\\{(\\w+)}}/g, (_, placeholder) => {\n return replacements[placeholder] ?? `{{key:${placeholder}}}` // fallback if key is missing\n })\n return forProcessing\n }\n } catch (e) {\n console.error(e)\n }\n return `{{${usedLanguage}:${key}}}`\n }\n}","import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport { useLocalStorage } from '../hooks/useLocalStorage'\nimport type { Language } from './util'\nimport { LanguageUtil } from './util'\n\nexport type LanguageContextValue = {\n language: Language,\n setLanguage: Dispatch<SetStateAction<Language>>,\n}\n\nexport const LanguageContext = createContext<LanguageContextValue>({\n language: LanguageUtil.DEFAULT_LANGUAGE,\n setLanguage: (v) => v\n})\n\nexport const useLanguage = () => useContext(LanguageContext)\n\nexport const useLocale = (overWriteLanguage?: Language) => {\n const { language } = useLanguage()\n const mapping: Record<Language, string> = {\n en: 'en-US',\n de: 'de-DE'\n }\n return mapping[overWriteLanguage ?? language]\n}\n\ntype LanguageProviderProps = {\n initialLanguage?: Language,\n}\n\nexport const LanguageProvider = ({ initialLanguage, children }: PropsWithChildren<LanguageProviderProps>) => {\n const [language, setLanguage] = useState<Language>(initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n const [storedLanguage, setStoredLanguage] = useLocalStorage<Language>('language', initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n\n useEffect(() => {\n if (language !== initialLanguage && initialLanguage) {\n console.warn('LanguageProvider initial state changed: Prefer using languageProvider\\'s setLanguage instead')\n setLanguage(initialLanguage)\n }\n }, [initialLanguage]) // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n document.documentElement.setAttribute('lang', language)\n setStoredLanguage(language)\n }, [language]) // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n if (storedLanguage !== null) {\n setLanguage(storedLanguage)\n return\n }\n\n const LanguageToTestAgainst = Object.values(LanguageUtil.languages)\n\n const matchingBrowserLanguage = window.navigator.languages\n .map(language => LanguageToTestAgainst.find((test) => language === test || language.split('-')[0] === test))\n .filter(entry => entry !== undefined)\n\n if (matchingBrowserLanguage.length === 0) return\n\n const firstMatch = matchingBrowserLanguage[0] as Language\n setLanguage(firstMatch)\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return (\n <LanguageContext.Provider value={{\n language,\n setLanguage\n }}>\n {children}\n </LanguageContext.Provider>\n )\n}","import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const useLocalStorage = <T>(key: string, initValue: T): [T, SetValue<T>] => {\n const get = useCallback((): T => {\n if (typeof window === 'undefined') {\n return initValue\n }\n const storageService = new LocalStorageService()\n const value = storageService.get<T>(key)\n return value || initValue\n }, [initValue, key])\n\n const [storedValue, setStoredValue] = useState<T>(get)\n\n const setValue: SetValue<T> = useCallback(value => {\n const newValue = value instanceof Function ? value(storedValue) : value\n const storageService = new LocalStorageService()\n storageService.set(key, value)\n\n setStoredValue(newValue)\n }, [storedValue, setStoredValue, key])\n\n useEffect(() => {\n setStoredValue(get())\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return [storedValue, setValue]\n}","/**\n * The supported languages\n */\nconst languages = ['en', 'de'] as const\n\n/**\n * The supported languages\n */\nexport type Language = typeof languages[number]\n\n/**\n * The supported languages' names in their respective language\n */\nconst languagesLocalNames: Record<Language, string> = {\n en: 'English',\n de: 'Deutsch',\n}\n\n/**\n * The default language\n */\nconst DEFAULT_LANGUAGE: Language = 'en'\n\n/**\n * A constant definition for holding data regarding languages\n */\nexport const LanguageUtil = {\n languages,\n DEFAULT_LANGUAGE,\n languagesLocalNames,\n}"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,IAAAA,gBAA+D;;;ACA/D,mBAAiD;;;ACEjD,IAAM,YAAY,CAAC,MAAM,IAAI;AAU7B,IAAM,sBAAgD;AAAA,EACpD,IAAI;AAAA,EACJ,IAAI;AACN;AAKA,IAAM,mBAA6B;AAK5B,IAAM,eAAe;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACF;;;AFoCI;AAvDG,IAAM,sBAAkB,6BAAoC;AAAA,EACjE,UAAU,aAAa;AAAA,EACvB,aAAa,CAAC,MAAM;AACtB,CAAC;AAEM,IAAM,cAAc,UAAM,0BAAW,eAAe;;;AD0CpD,IAAM,yBAAyB;AAAA,EACpC,MAAM;AAAA,EACN,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AACT;AAGO,IAAM,iBAAiB,CAC5B,cACA,uBAAoD,CAAC,MAC1B;AAC3B,QAAM,EAAE,UAAU,cAAc,aAAa,UAAU,IAAI;AAC3D,QAAM,EAAE,UAAU,iBAAiB,IAAI,YAAY;AACnD,QAAM,eAAe,gBAAgB;AACrC,QAAM,mBAAmB,CAAC,GAAG,YAAY;AACzC,MAAI,WAAW;AACb,qBAAiB,KAAK,SAAS;AAAA,EACjC;AAEA,SAAO,CAAC,KAAoB,YAAiD;AAC3E,UAAM,EAAE,OAAO,aAAa,IAAI,EAAE,GAAG,EAAE,OAAO,GAAG,cAAc,CAAC,EAAE,GAAG,GAAG,QAAQ;AAEhF,QAAI;AACF,eAAS,IAAI,aAAa,SAAS,GAAG,KAAK,GAAG,KAAK;AACjD,cAAM,cAAc,aAAa,CAAC;AAClC,cAAM,uBAAuB,YAAY,YAAY;AACrD,YAAI,CAAC,sBAAsB;AACzB;AAAA,QACF;AACA,cAAM,QAAQ,qBAAqB,GAAG;AACtC,YAAG,CAAC,OAAO;AACT;AAAA,QACF;AAEA,YAAI;AACJ,YAAI,OAAO,UAAU,UAAU;AAC7B,cAAI,UAAU,uBAAuB,QAAQ,OAAO,MAAM;AACxD,4BAAgB,MAAM;AAAA,UACxB,WAAW,UAAU,uBAAuB,OAAO,OAAO,KAAK;AAC7D,4BAAgB,MAAM;AAAA,UACxB,WAAW,UAAU,uBAAuB,OAAO,OAAO,KAAK;AAC7D,4BAAgB,MAAM;AAAA,UACxB,WAAW,uBAAuB,OAAO,SAAS,QAAQ,uBAAuB,QAAQ,OAAO,KAAK;AACnG,4BAAgB,MAAM;AAAA,UACxB,WAAW,QAAQ,uBAAuB,QAAQ,OAAO,MAAM;AAC7D,4BAAgB,MAAM;AAAA,UACxB,OAAO;AACL,4BAAgB,MAAM;AAAA,UACxB;AAAA,QACF,OAAO;AACL,0BAAgB;AAAA,QAClB;AACA,wBAAgB,cAAc,QAAQ,gBAAgB,CAAC,GAAG,gBAAgB;AACxE,iBAAO,aAAa,WAAW,KAAK,SAAS,WAAW;AAAA,QAC1D,CAAC;AACD,eAAO;AAAA,MACT;AAAA,IACF,SAAS,GAAG;AACV,cAAQ,MAAM,CAAC;AAAA,IACjB;AACA,WAAO,KAAK,YAAY,IAAI,GAAG;AAAA,EACjC;AACF;","names":["import_react"]}
1
+ {"version":3,"sources":["../../src/localization/useTranslation.ts","../../src/localization/LanguageProvider.tsx","../../src/hooks/useLocalStorage.ts","../../src/localization/util.ts"],"sourcesContent":["import { useLanguage } from './LanguageProvider'\nimport type { Language } from './util'\n\n/**\n * A type describing the pluralization of a word\n */\nexport type TranslationPlural = {\n zero?: string,\n one?: string,\n two?: string,\n few?: string,\n many?: string,\n other: string,\n}\n\n/**\n * The type describing all values of a translation\n */\nexport type TranslationType = Record<string, string | TranslationPlural>\n\n/**\n * The type of translations\n */\nexport type Translation<T extends TranslationType> = Record<Language, T>\n\ntype OverwriteTranslationType<T extends TranslationType> = {\n language?: Language,\n translation?: Translation<Partial<T>>,\n}\n\n/**\n * Adds the `language` prop to the component props.\n *\n * @param Translation the type of the translation object\n *\n * @param Props the type of the component props, defaults to `Record<string, never>`,\n * if you don't expect any other props other than `language` and get an\n * error when using your component (because it uses `forwardRef` etc.)\n * you can try out `Record<string, unknown>`, this might resolve your\n * problem as `SomeType & never` is still `never` but `SomeType & unknown`\n * is `SomeType` which means that adding back props (like `ref` etc.)\n * works properly\n */\nexport type PropsForTranslation<\n Translation extends TranslationType,\n Props = unknown\n> = Props & {\n overwriteTranslation?: OverwriteTranslationType<Translation>,\n}\n\ntype StringKeys<T> = Extract<keyof T, string>;\n\ntype TranslationFunctionOptions = {\n replacements?: Record<string, string>,\n count?: number,\n}\ntype TranslationFunction<T extends TranslationType> = (key: StringKeys<T>, options?: TranslationFunctionOptions) => string\n\nexport const TranslationPluralCount = {\n zero: 0,\n one: 1,\n two: 2,\n few: 3,\n many: 11,\n other: -1,\n}\n\n\nexport const useTranslation = <T extends TranslationType>(\n translations: Translation<Partial<TranslationType>>[],\n overwriteTranslation: OverwriteTranslationType<T> = {}\n): TranslationFunction<T> => {\n const { language: languageProp, translation: overwrite } = overwriteTranslation\n const { language: inferredLanguage } = useLanguage()\n const usedLanguage = languageProp ?? inferredLanguage\n const usedTranslations = [...translations]\n if (overwrite) {\n usedTranslations.push(overwrite)\n }\n\n return (key: StringKeys<T>, options?: TranslationFunctionOptions): string => {\n const { count, replacements } = { ...{ count: 0, replacements: {} }, ...options }\n\n try {\n for (let i = translations.length - 1; i >= 0; i--) {\n const translation = translations[i]\n const localizedTranslation = translation[usedLanguage]\n if (!localizedTranslation) {\n continue\n }\n const value = localizedTranslation[key]\n if(!value) {\n continue\n }\n\n let forProcessing: string\n if (typeof value !== 'string') {\n if (count === TranslationPluralCount.zero && value?.zero) {\n forProcessing = value.zero\n } else if (count === TranslationPluralCount.one && value?.one) {\n forProcessing = value.one\n } else if (count === TranslationPluralCount.two && value?.two) {\n forProcessing = value.two\n } else if (TranslationPluralCount.few <= count && count < TranslationPluralCount.many && value?.few) {\n forProcessing = value.few\n } else if (count > TranslationPluralCount.many && value?.many) {\n forProcessing = value.many\n } else {\n forProcessing = value.other\n }\n } else {\n forProcessing = value\n }\n forProcessing = forProcessing.replace(/\\{\\{(\\w+)}}/g, (_, placeholder) => {\n return replacements[placeholder] ?? `{{key:${placeholder}}}` // fallback if key is missing\n })\n return forProcessing\n }\n } catch (e) {\n console.error(e)\n }\n return `{{${usedLanguage}:${key}}}`\n }\n}","import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport { useLocalStorage } from '../hooks/useLocalStorage'\nimport type { Language } from './util'\nimport { LanguageUtil } from './util'\n\nexport type LanguageContextValue = {\n language: Language,\n setLanguage: Dispatch<SetStateAction<Language>>,\n}\n\nexport const LanguageContext = createContext<LanguageContextValue>({\n language: LanguageUtil.DEFAULT_LANGUAGE,\n setLanguage: (v) => v\n})\n\nexport const useLanguage = () => useContext(LanguageContext)\n\nexport const useLocale = (overWriteLanguage?: Language) => {\n const { language } = useLanguage()\n const mapping: Record<Language, string> = {\n en: 'en-US',\n de: 'de-DE'\n }\n return mapping[overWriteLanguage ?? language]\n}\n\ntype LanguageProviderProps = {\n initialLanguage?: Language,\n}\n\nexport const LanguageProvider = ({ initialLanguage, children }: PropsWithChildren<LanguageProviderProps>) => {\n const [language, setLanguage] = useState<Language>(initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n const [storedLanguage, setStoredLanguage] = useLocalStorage<Language>('language', initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n\n useEffect(() => {\n if (language !== initialLanguage && initialLanguage) {\n console.warn('LanguageProvider initial state changed: Prefer using languageProvider\\'s setLanguage instead')\n setLanguage(initialLanguage)\n }\n }, [initialLanguage]) // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n document.documentElement.setAttribute('lang', language)\n setStoredLanguage(language)\n }, [language]) // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n if (storedLanguage !== null) {\n setLanguage(storedLanguage)\n return\n }\n\n const LanguageToTestAgainst = Object.values(LanguageUtil.languages)\n\n const matchingBrowserLanguage = window.navigator.languages\n .map(language => LanguageToTestAgainst.find((test) => language === test || language.split('-')[0] === test))\n .filter(entry => entry !== undefined)\n\n if (matchingBrowserLanguage.length === 0) return\n\n const firstMatch = matchingBrowserLanguage[0] as Language\n setLanguage(firstMatch)\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return (\n <LanguageContext.Provider value={{\n language,\n setLanguage\n }}>\n {children}\n </LanguageContext.Provider>\n )\n}","import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\nimport { resolveSetState } from '../util/resolveSetState'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const useLocalStorage = <T>(key: string, initValue: T): [T, SetValue<T>] => {\n const get = useCallback((): T => {\n if (typeof window === 'undefined') {\n return initValue\n }\n const storageService = new LocalStorageService()\n const value = storageService.get<T>(key)\n return value || initValue\n }, [initValue, key])\n\n const [storedValue, setStoredValue] = useState<T>(get)\n\n const setValue: SetValue<T> = useCallback(action => {\n const newValue = resolveSetState(action, storedValue)\n const storageService = new LocalStorageService()\n storageService.set(key, newValue)\n\n setStoredValue(newValue)\n }, [storedValue, setStoredValue, key])\n\n useEffect(() => {\n setStoredValue(get())\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return [storedValue, setValue]\n}","/**\n * The supported languages\n */\nconst languages = ['en', 'de'] as const\n\n/**\n * The supported languages\n */\nexport type Language = typeof languages[number]\n\n/**\n * The supported languages' names in their respective language\n */\nconst languagesLocalNames: Record<Language, string> = {\n en: 'English',\n de: 'Deutsch',\n}\n\n/**\n * The default language\n */\nconst DEFAULT_LANGUAGE: Language = 'en'\n\n/**\n * A constant definition for holding data regarding languages\n */\nexport const LanguageUtil = {\n languages,\n DEFAULT_LANGUAGE,\n languagesLocalNames,\n}"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,IAAAA,gBAA+D;;;ACA/D,mBAAiD;;;ACEjD,IAAM,YAAY,CAAC,MAAM,IAAI;AAU7B,IAAM,sBAAgD;AAAA,EACpD,IAAI;AAAA,EACJ,IAAI;AACN;AAKA,IAAM,mBAA6B;AAK5B,IAAM,eAAe;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACF;;;AFoCI;AAvDG,IAAM,sBAAkB,6BAAoC;AAAA,EACjE,UAAU,aAAa;AAAA,EACvB,aAAa,CAAC,MAAM;AACtB,CAAC;AAEM,IAAM,cAAc,UAAM,0BAAW,eAAe;;;AD0CpD,IAAM,yBAAyB;AAAA,EACpC,MAAM;AAAA,EACN,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AACT;AAGO,IAAM,iBAAiB,CAC5B,cACA,uBAAoD,CAAC,MAC1B;AAC3B,QAAM,EAAE,UAAU,cAAc,aAAa,UAAU,IAAI;AAC3D,QAAM,EAAE,UAAU,iBAAiB,IAAI,YAAY;AACnD,QAAM,eAAe,gBAAgB;AACrC,QAAM,mBAAmB,CAAC,GAAG,YAAY;AACzC,MAAI,WAAW;AACb,qBAAiB,KAAK,SAAS;AAAA,EACjC;AAEA,SAAO,CAAC,KAAoB,YAAiD;AAC3E,UAAM,EAAE,OAAO,aAAa,IAAI,EAAE,GAAG,EAAE,OAAO,GAAG,cAAc,CAAC,EAAE,GAAG,GAAG,QAAQ;AAEhF,QAAI;AACF,eAAS,IAAI,aAAa,SAAS,GAAG,KAAK,GAAG,KAAK;AACjD,cAAM,cAAc,aAAa,CAAC;AAClC,cAAM,uBAAuB,YAAY,YAAY;AACrD,YAAI,CAAC,sBAAsB;AACzB;AAAA,QACF;AACA,cAAM,QAAQ,qBAAqB,GAAG;AACtC,YAAG,CAAC,OAAO;AACT;AAAA,QACF;AAEA,YAAI;AACJ,YAAI,OAAO,UAAU,UAAU;AAC7B,cAAI,UAAU,uBAAuB,QAAQ,OAAO,MAAM;AACxD,4BAAgB,MAAM;AAAA,UACxB,WAAW,UAAU,uBAAuB,OAAO,OAAO,KAAK;AAC7D,4BAAgB,MAAM;AAAA,UACxB,WAAW,UAAU,uBAAuB,OAAO,OAAO,KAAK;AAC7D,4BAAgB,MAAM;AAAA,UACxB,WAAW,uBAAuB,OAAO,SAAS,QAAQ,uBAAuB,QAAQ,OAAO,KAAK;AACnG,4BAAgB,MAAM;AAAA,UACxB,WAAW,QAAQ,uBAAuB,QAAQ,OAAO,MAAM;AAC7D,4BAAgB,MAAM;AAAA,UACxB,OAAO;AACL,4BAAgB,MAAM;AAAA,UACxB;AAAA,QACF,OAAO;AACL,0BAAgB;AAAA,QAClB;AACA,wBAAgB,cAAc,QAAQ,gBAAgB,CAAC,GAAG,gBAAgB;AACxE,iBAAO,aAAa,WAAW,KAAK,SAAS,WAAW;AAAA,QAC1D,CAAC;AACD,eAAO;AAAA,MACT;AAAA,IACF,SAAS,GAAG;AACV,cAAQ,MAAM,CAAC;AAAA,IACjB;AACA,WAAO,KAAK,YAAY,IAAI,GAAG;AAAA,EACjC;AACF;","names":["import_react"]}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/localization/LanguageProvider.tsx","../../src/hooks/useLocalStorage.ts","../../src/localization/util.ts","../../src/localization/useTranslation.ts"],"sourcesContent":["import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport { useLocalStorage } from '../hooks/useLocalStorage'\nimport type { Language } from './util'\nimport { LanguageUtil } from './util'\n\nexport type LanguageContextValue = {\n language: Language,\n setLanguage: Dispatch<SetStateAction<Language>>,\n}\n\nexport const LanguageContext = createContext<LanguageContextValue>({\n language: LanguageUtil.DEFAULT_LANGUAGE,\n setLanguage: (v) => v\n})\n\nexport const useLanguage = () => useContext(LanguageContext)\n\nexport const useLocale = (overWriteLanguage?: Language) => {\n const { language } = useLanguage()\n const mapping: Record<Language, string> = {\n en: 'en-US',\n de: 'de-DE'\n }\n return mapping[overWriteLanguage ?? language]\n}\n\ntype LanguageProviderProps = {\n initialLanguage?: Language,\n}\n\nexport const LanguageProvider = ({ initialLanguage, children }: PropsWithChildren<LanguageProviderProps>) => {\n const [language, setLanguage] = useState<Language>(initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n const [storedLanguage, setStoredLanguage] = useLocalStorage<Language>('language', initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n\n useEffect(() => {\n if (language !== initialLanguage && initialLanguage) {\n console.warn('LanguageProvider initial state changed: Prefer using languageProvider\\'s setLanguage instead')\n setLanguage(initialLanguage)\n }\n }, [initialLanguage]) // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n document.documentElement.setAttribute('lang', language)\n setStoredLanguage(language)\n }, [language]) // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n if (storedLanguage !== null) {\n setLanguage(storedLanguage)\n return\n }\n\n const LanguageToTestAgainst = Object.values(LanguageUtil.languages)\n\n const matchingBrowserLanguage = window.navigator.languages\n .map(language => LanguageToTestAgainst.find((test) => language === test || language.split('-')[0] === test))\n .filter(entry => entry !== undefined)\n\n if (matchingBrowserLanguage.length === 0) return\n\n const firstMatch = matchingBrowserLanguage[0] as Language\n setLanguage(firstMatch)\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return (\n <LanguageContext.Provider value={{\n language,\n setLanguage\n }}>\n {children}\n </LanguageContext.Provider>\n )\n}","import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const useLocalStorage = <T>(key: string, initValue: T): [T, SetValue<T>] => {\n const get = useCallback((): T => {\n if (typeof window === 'undefined') {\n return initValue\n }\n const storageService = new LocalStorageService()\n const value = storageService.get<T>(key)\n return value || initValue\n }, [initValue, key])\n\n const [storedValue, setStoredValue] = useState<T>(get)\n\n const setValue: SetValue<T> = useCallback(value => {\n const newValue = value instanceof Function ? value(storedValue) : value\n const storageService = new LocalStorageService()\n storageService.set(key, value)\n\n setStoredValue(newValue)\n }, [storedValue, setStoredValue, key])\n\n useEffect(() => {\n setStoredValue(get())\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return [storedValue, setValue]\n}","/**\n * The supported languages\n */\nconst languages = ['en', 'de'] as const\n\n/**\n * The supported languages\n */\nexport type Language = typeof languages[number]\n\n/**\n * The supported languages' names in their respective language\n */\nconst languagesLocalNames: Record<Language, string> = {\n en: 'English',\n de: 'Deutsch',\n}\n\n/**\n * The default language\n */\nconst DEFAULT_LANGUAGE: Language = 'en'\n\n/**\n * A constant definition for holding data regarding languages\n */\nexport const LanguageUtil = {\n languages,\n DEFAULT_LANGUAGE,\n languagesLocalNames,\n}","import { useLanguage } from './LanguageProvider'\nimport type { Language } from './util'\n\n/**\n * A type describing the pluralization of a word\n */\nexport type TranslationPlural = {\n zero?: string,\n one?: string,\n two?: string,\n few?: string,\n many?: string,\n other: string,\n}\n\n/**\n * The type describing all values of a translation\n */\nexport type TranslationType = Record<string, string | TranslationPlural>\n\n/**\n * The type of translations\n */\nexport type Translation<T extends TranslationType> = Record<Language, T>\n\ntype OverwriteTranslationType<T extends TranslationType> = {\n language?: Language,\n translation?: Translation<Partial<T>>,\n}\n\n/**\n * Adds the `language` prop to the component props.\n *\n * @param Translation the type of the translation object\n *\n * @param Props the type of the component props, defaults to `Record<string, never>`,\n * if you don't expect any other props other than `language` and get an\n * error when using your component (because it uses `forwardRef` etc.)\n * you can try out `Record<string, unknown>`, this might resolve your\n * problem as `SomeType & never` is still `never` but `SomeType & unknown`\n * is `SomeType` which means that adding back props (like `ref` etc.)\n * works properly\n */\nexport type PropsForTranslation<\n Translation extends TranslationType,\n Props = unknown\n> = Props & {\n overwriteTranslation?: OverwriteTranslationType<Translation>,\n}\n\ntype StringKeys<T> = Extract<keyof T, string>;\n\ntype TranslationFunctionOptions = {\n replacements?: Record<string, string>,\n count?: number,\n}\ntype TranslationFunction<T extends TranslationType> = (key: StringKeys<T>, options?: TranslationFunctionOptions) => string\n\nexport const TranslationPluralCount = {\n zero: 0,\n one: 1,\n two: 2,\n few: 3,\n many: 11,\n other: -1,\n}\n\n\nexport const useTranslation = <T extends TranslationType>(\n translations: Translation<Partial<TranslationType>>[],\n overwriteTranslation: OverwriteTranslationType<T> = {}\n): TranslationFunction<T> => {\n const { language: languageProp, translation: overwrite } = overwriteTranslation\n const { language: inferredLanguage } = useLanguage()\n const usedLanguage = languageProp ?? inferredLanguage\n const usedTranslations = [...translations]\n if (overwrite) {\n usedTranslations.push(overwrite)\n }\n\n return (key: StringKeys<T>, options?: TranslationFunctionOptions): string => {\n const { count, replacements } = { ...{ count: 0, replacements: {} }, ...options }\n\n try {\n for (let i = translations.length - 1; i >= 0; i--) {\n const translation = translations[i]\n const localizedTranslation = translation[usedLanguage]\n if (!localizedTranslation) {\n continue\n }\n const value = localizedTranslation[key]\n if(!value) {\n continue\n }\n\n let forProcessing: string\n if (typeof value !== 'string') {\n if (count === TranslationPluralCount.zero && value?.zero) {\n forProcessing = value.zero\n } else if (count === TranslationPluralCount.one && value?.one) {\n forProcessing = value.one\n } else if (count === TranslationPluralCount.two && value?.two) {\n forProcessing = value.two\n } else if (TranslationPluralCount.few <= count && count < TranslationPluralCount.many && value?.few) {\n forProcessing = value.few\n } else if (count > TranslationPluralCount.many && value?.many) {\n forProcessing = value.many\n } else {\n forProcessing = value.other\n }\n } else {\n forProcessing = value\n }\n forProcessing = forProcessing.replace(/\\{\\{(\\w+)}}/g, (_, placeholder) => {\n return replacements[placeholder] ?? `{{key:${placeholder}}}` // fallback if key is missing\n })\n return forProcessing\n }\n } catch (e) {\n console.error(e)\n }\n return `{{${usedLanguage}:${key}}}`\n }\n}"],"mappings":";AACA,SAAS,eAAe,YAAY,aAAAA,YAAW,YAAAC,iBAAgB;;;ACA/D,SAAS,aAAa,WAAW,gBAAgB;;;ACEjD,IAAM,YAAY,CAAC,MAAM,IAAI;AAU7B,IAAM,sBAAgD;AAAA,EACpD,IAAI;AAAA,EACJ,IAAI;AACN;AAKA,IAAM,mBAA6B;AAK5B,IAAM,eAAe;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACF;;;AFoCI;AAvDG,IAAM,kBAAkB,cAAoC;AAAA,EACjE,UAAU,aAAa;AAAA,EACvB,aAAa,CAAC,MAAM;AACtB,CAAC;AAEM,IAAM,cAAc,MAAM,WAAW,eAAe;;;AG0CpD,IAAM,yBAAyB;AAAA,EACpC,MAAM;AAAA,EACN,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AACT;AAGO,IAAM,iBAAiB,CAC5B,cACA,uBAAoD,CAAC,MAC1B;AAC3B,QAAM,EAAE,UAAU,cAAc,aAAa,UAAU,IAAI;AAC3D,QAAM,EAAE,UAAU,iBAAiB,IAAI,YAAY;AACnD,QAAM,eAAe,gBAAgB;AACrC,QAAM,mBAAmB,CAAC,GAAG,YAAY;AACzC,MAAI,WAAW;AACb,qBAAiB,KAAK,SAAS;AAAA,EACjC;AAEA,SAAO,CAAC,KAAoB,YAAiD;AAC3E,UAAM,EAAE,OAAO,aAAa,IAAI,EAAE,GAAG,EAAE,OAAO,GAAG,cAAc,CAAC,EAAE,GAAG,GAAG,QAAQ;AAEhF,QAAI;AACF,eAAS,IAAI,aAAa,SAAS,GAAG,KAAK,GAAG,KAAK;AACjD,cAAM,cAAc,aAAa,CAAC;AAClC,cAAM,uBAAuB,YAAY,YAAY;AACrD,YAAI,CAAC,sBAAsB;AACzB;AAAA,QACF;AACA,cAAM,QAAQ,qBAAqB,GAAG;AACtC,YAAG,CAAC,OAAO;AACT;AAAA,QACF;AAEA,YAAI;AACJ,YAAI,OAAO,UAAU,UAAU;AAC7B,cAAI,UAAU,uBAAuB,QAAQ,OAAO,MAAM;AACxD,4BAAgB,MAAM;AAAA,UACxB,WAAW,UAAU,uBAAuB,OAAO,OAAO,KAAK;AAC7D,4BAAgB,MAAM;AAAA,UACxB,WAAW,UAAU,uBAAuB,OAAO,OAAO,KAAK;AAC7D,4BAAgB,MAAM;AAAA,UACxB,WAAW,uBAAuB,OAAO,SAAS,QAAQ,uBAAuB,QAAQ,OAAO,KAAK;AACnG,4BAAgB,MAAM;AAAA,UACxB,WAAW,QAAQ,uBAAuB,QAAQ,OAAO,MAAM;AAC7D,4BAAgB,MAAM;AAAA,UACxB,OAAO;AACL,4BAAgB,MAAM;AAAA,UACxB;AAAA,QACF,OAAO;AACL,0BAAgB;AAAA,QAClB;AACA,wBAAgB,cAAc,QAAQ,gBAAgB,CAAC,GAAG,gBAAgB;AACxE,iBAAO,aAAa,WAAW,KAAK,SAAS,WAAW;AAAA,QAC1D,CAAC;AACD,eAAO;AAAA,MACT;AAAA,IACF,SAAS,GAAG;AACV,cAAQ,MAAM,CAAC;AAAA,IACjB;AACA,WAAO,KAAK,YAAY,IAAI,GAAG;AAAA,EACjC;AACF;","names":["useEffect","useState"]}
1
+ {"version":3,"sources":["../../src/localization/LanguageProvider.tsx","../../src/hooks/useLocalStorage.ts","../../src/localization/util.ts","../../src/localization/useTranslation.ts"],"sourcesContent":["import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport { useLocalStorage } from '../hooks/useLocalStorage'\nimport type { Language } from './util'\nimport { LanguageUtil } from './util'\n\nexport type LanguageContextValue = {\n language: Language,\n setLanguage: Dispatch<SetStateAction<Language>>,\n}\n\nexport const LanguageContext = createContext<LanguageContextValue>({\n language: LanguageUtil.DEFAULT_LANGUAGE,\n setLanguage: (v) => v\n})\n\nexport const useLanguage = () => useContext(LanguageContext)\n\nexport const useLocale = (overWriteLanguage?: Language) => {\n const { language } = useLanguage()\n const mapping: Record<Language, string> = {\n en: 'en-US',\n de: 'de-DE'\n }\n return mapping[overWriteLanguage ?? language]\n}\n\ntype LanguageProviderProps = {\n initialLanguage?: Language,\n}\n\nexport const LanguageProvider = ({ initialLanguage, children }: PropsWithChildren<LanguageProviderProps>) => {\n const [language, setLanguage] = useState<Language>(initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n const [storedLanguage, setStoredLanguage] = useLocalStorage<Language>('language', initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n\n useEffect(() => {\n if (language !== initialLanguage && initialLanguage) {\n console.warn('LanguageProvider initial state changed: Prefer using languageProvider\\'s setLanguage instead')\n setLanguage(initialLanguage)\n }\n }, [initialLanguage]) // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n document.documentElement.setAttribute('lang', language)\n setStoredLanguage(language)\n }, [language]) // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n if (storedLanguage !== null) {\n setLanguage(storedLanguage)\n return\n }\n\n const LanguageToTestAgainst = Object.values(LanguageUtil.languages)\n\n const matchingBrowserLanguage = window.navigator.languages\n .map(language => LanguageToTestAgainst.find((test) => language === test || language.split('-')[0] === test))\n .filter(entry => entry !== undefined)\n\n if (matchingBrowserLanguage.length === 0) return\n\n const firstMatch = matchingBrowserLanguage[0] as Language\n setLanguage(firstMatch)\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return (\n <LanguageContext.Provider value={{\n language,\n setLanguage\n }}>\n {children}\n </LanguageContext.Provider>\n )\n}","import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\nimport { resolveSetState } from '../util/resolveSetState'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const useLocalStorage = <T>(key: string, initValue: T): [T, SetValue<T>] => {\n const get = useCallback((): T => {\n if (typeof window === 'undefined') {\n return initValue\n }\n const storageService = new LocalStorageService()\n const value = storageService.get<T>(key)\n return value || initValue\n }, [initValue, key])\n\n const [storedValue, setStoredValue] = useState<T>(get)\n\n const setValue: SetValue<T> = useCallback(action => {\n const newValue = resolveSetState(action, storedValue)\n const storageService = new LocalStorageService()\n storageService.set(key, newValue)\n\n setStoredValue(newValue)\n }, [storedValue, setStoredValue, key])\n\n useEffect(() => {\n setStoredValue(get())\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return [storedValue, setValue]\n}","/**\n * The supported languages\n */\nconst languages = ['en', 'de'] as const\n\n/**\n * The supported languages\n */\nexport type Language = typeof languages[number]\n\n/**\n * The supported languages' names in their respective language\n */\nconst languagesLocalNames: Record<Language, string> = {\n en: 'English',\n de: 'Deutsch',\n}\n\n/**\n * The default language\n */\nconst DEFAULT_LANGUAGE: Language = 'en'\n\n/**\n * A constant definition for holding data regarding languages\n */\nexport const LanguageUtil = {\n languages,\n DEFAULT_LANGUAGE,\n languagesLocalNames,\n}","import { useLanguage } from './LanguageProvider'\nimport type { Language } from './util'\n\n/**\n * A type describing the pluralization of a word\n */\nexport type TranslationPlural = {\n zero?: string,\n one?: string,\n two?: string,\n few?: string,\n many?: string,\n other: string,\n}\n\n/**\n * The type describing all values of a translation\n */\nexport type TranslationType = Record<string, string | TranslationPlural>\n\n/**\n * The type of translations\n */\nexport type Translation<T extends TranslationType> = Record<Language, T>\n\ntype OverwriteTranslationType<T extends TranslationType> = {\n language?: Language,\n translation?: Translation<Partial<T>>,\n}\n\n/**\n * Adds the `language` prop to the component props.\n *\n * @param Translation the type of the translation object\n *\n * @param Props the type of the component props, defaults to `Record<string, never>`,\n * if you don't expect any other props other than `language` and get an\n * error when using your component (because it uses `forwardRef` etc.)\n * you can try out `Record<string, unknown>`, this might resolve your\n * problem as `SomeType & never` is still `never` but `SomeType & unknown`\n * is `SomeType` which means that adding back props (like `ref` etc.)\n * works properly\n */\nexport type PropsForTranslation<\n Translation extends TranslationType,\n Props = unknown\n> = Props & {\n overwriteTranslation?: OverwriteTranslationType<Translation>,\n}\n\ntype StringKeys<T> = Extract<keyof T, string>;\n\ntype TranslationFunctionOptions = {\n replacements?: Record<string, string>,\n count?: number,\n}\ntype TranslationFunction<T extends TranslationType> = (key: StringKeys<T>, options?: TranslationFunctionOptions) => string\n\nexport const TranslationPluralCount = {\n zero: 0,\n one: 1,\n two: 2,\n few: 3,\n many: 11,\n other: -1,\n}\n\n\nexport const useTranslation = <T extends TranslationType>(\n translations: Translation<Partial<TranslationType>>[],\n overwriteTranslation: OverwriteTranslationType<T> = {}\n): TranslationFunction<T> => {\n const { language: languageProp, translation: overwrite } = overwriteTranslation\n const { language: inferredLanguage } = useLanguage()\n const usedLanguage = languageProp ?? inferredLanguage\n const usedTranslations = [...translations]\n if (overwrite) {\n usedTranslations.push(overwrite)\n }\n\n return (key: StringKeys<T>, options?: TranslationFunctionOptions): string => {\n const { count, replacements } = { ...{ count: 0, replacements: {} }, ...options }\n\n try {\n for (let i = translations.length - 1; i >= 0; i--) {\n const translation = translations[i]\n const localizedTranslation = translation[usedLanguage]\n if (!localizedTranslation) {\n continue\n }\n const value = localizedTranslation[key]\n if(!value) {\n continue\n }\n\n let forProcessing: string\n if (typeof value !== 'string') {\n if (count === TranslationPluralCount.zero && value?.zero) {\n forProcessing = value.zero\n } else if (count === TranslationPluralCount.one && value?.one) {\n forProcessing = value.one\n } else if (count === TranslationPluralCount.two && value?.two) {\n forProcessing = value.two\n } else if (TranslationPluralCount.few <= count && count < TranslationPluralCount.many && value?.few) {\n forProcessing = value.few\n } else if (count > TranslationPluralCount.many && value?.many) {\n forProcessing = value.many\n } else {\n forProcessing = value.other\n }\n } else {\n forProcessing = value\n }\n forProcessing = forProcessing.replace(/\\{\\{(\\w+)}}/g, (_, placeholder) => {\n return replacements[placeholder] ?? `{{key:${placeholder}}}` // fallback if key is missing\n })\n return forProcessing\n }\n } catch (e) {\n console.error(e)\n }\n return `{{${usedLanguage}:${key}}}`\n }\n}"],"mappings":";AACA,SAAS,eAAe,YAAY,aAAAA,YAAW,YAAAC,iBAAgB;;;ACA/D,SAAS,aAAa,WAAW,gBAAgB;;;ACEjD,IAAM,YAAY,CAAC,MAAM,IAAI;AAU7B,IAAM,sBAAgD;AAAA,EACpD,IAAI;AAAA,EACJ,IAAI;AACN;AAKA,IAAM,mBAA6B;AAK5B,IAAM,eAAe;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACF;;;AFoCI;AAvDG,IAAM,kBAAkB,cAAoC;AAAA,EACjE,UAAU,aAAa;AAAA,EACvB,aAAa,CAAC,MAAM;AACtB,CAAC;AAEM,IAAM,cAAc,MAAM,WAAW,eAAe;;;AG0CpD,IAAM,yBAAyB;AAAA,EACpC,MAAM;AAAA,EACN,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AACT;AAGO,IAAM,iBAAiB,CAC5B,cACA,uBAAoD,CAAC,MAC1B;AAC3B,QAAM,EAAE,UAAU,cAAc,aAAa,UAAU,IAAI;AAC3D,QAAM,EAAE,UAAU,iBAAiB,IAAI,YAAY;AACnD,QAAM,eAAe,gBAAgB;AACrC,QAAM,mBAAmB,CAAC,GAAG,YAAY;AACzC,MAAI,WAAW;AACb,qBAAiB,KAAK,SAAS;AAAA,EACjC;AAEA,SAAO,CAAC,KAAoB,YAAiD;AAC3E,UAAM,EAAE,OAAO,aAAa,IAAI,EAAE,GAAG,EAAE,OAAO,GAAG,cAAc,CAAC,EAAE,GAAG,GAAG,QAAQ;AAEhF,QAAI;AACF,eAAS,IAAI,aAAa,SAAS,GAAG,KAAK,GAAG,KAAK;AACjD,cAAM,cAAc,aAAa,CAAC;AAClC,cAAM,uBAAuB,YAAY,YAAY;AACrD,YAAI,CAAC,sBAAsB;AACzB;AAAA,QACF;AACA,cAAM,QAAQ,qBAAqB,GAAG;AACtC,YAAG,CAAC,OAAO;AACT;AAAA,QACF;AAEA,YAAI;AACJ,YAAI,OAAO,UAAU,UAAU;AAC7B,cAAI,UAAU,uBAAuB,QAAQ,OAAO,MAAM;AACxD,4BAAgB,MAAM;AAAA,UACxB,WAAW,UAAU,uBAAuB,OAAO,OAAO,KAAK;AAC7D,4BAAgB,MAAM;AAAA,UACxB,WAAW,UAAU,uBAAuB,OAAO,OAAO,KAAK;AAC7D,4BAAgB,MAAM;AAAA,UACxB,WAAW,uBAAuB,OAAO,SAAS,QAAQ,uBAAuB,QAAQ,OAAO,KAAK;AACnG,4BAAgB,MAAM;AAAA,UACxB,WAAW,QAAQ,uBAAuB,QAAQ,OAAO,MAAM;AAC7D,4BAAgB,MAAM;AAAA,UACxB,OAAO;AACL,4BAAgB,MAAM;AAAA,UACxB;AAAA,QACF,OAAO;AACL,0BAAgB;AAAA,QAClB;AACA,wBAAgB,cAAc,QAAQ,gBAAgB,CAAC,GAAG,gBAAgB;AACxE,iBAAO,aAAa,WAAW,KAAK,SAAS,WAAW;AAAA,QAC1D,CAAC;AACD,eAAO;AAAA,MACT;AAAA,IACF,SAAS,GAAG;AACV,cAAQ,MAAM,CAAC;AAAA,IACjB;AACA,WAAO,KAAK,YAAY,IAAI,GAAG;AAAA,EACjC;AACF;","names":["useEffect","useState"]}
@@ -4,13 +4,13 @@ import { Dispatch, SetStateAction, PropsWithChildren } from 'react';
4
4
  import { TranslationPlural, Translation } from '../localization/useTranslation.mjs';
5
5
  import '../localization/util.mjs';
6
6
 
7
- declare const themes: readonly ["light", "dark"];
7
+ declare const themes: readonly ["light", "dark", "system"];
8
8
  type ThemeType = typeof themes[number];
9
9
  type ThemeTypeTranslation = Record<ThemeType, string> & {
10
10
  theme: TranslationPlural;
11
11
  };
12
12
  declare const ThemeUtil: {
13
- themes: readonly ["light", "dark"];
13
+ themes: readonly ["light", "dark", "system"];
14
14
  translation: Translation<ThemeTypeTranslation>;
15
15
  };
16
16
  type ThemeContextType = {
@@ -4,13 +4,13 @@ import { Dispatch, SetStateAction, PropsWithChildren } from 'react';
4
4
  import { TranslationPlural, Translation } from '../localization/useTranslation.js';
5
5
  import '../localization/util.js';
6
6
 
7
- declare const themes: readonly ["light", "dark"];
7
+ declare const themes: readonly ["light", "dark", "system"];
8
8
  type ThemeType = typeof themes[number];
9
9
  type ThemeTypeTranslation = Record<ThemeType, string> & {
10
10
  theme: TranslationPlural;
11
11
  };
12
12
  declare const ThemeUtil: {
13
- themes: readonly ["light", "dark"];
13
+ themes: readonly ["light", "dark", "system"];
14
14
  translation: Translation<ThemeTypeTranslation>;
15
15
  };
16
16
  type ThemeContextType = {
@@ -26,6 +26,7 @@ __export(useTheme_exports, {
26
26
  });
27
27
  module.exports = __toCommonJS(useTheme_exports);
28
28
  var import_react2 = require("react");
29
+ var import_react3 = require("react");
29
30
 
30
31
  // src/util/noop.ts
31
32
  var noop = () => void 0;
@@ -62,6 +63,11 @@ var LocalStorageService = class extends StorageService {
62
63
  }
63
64
  };
64
65
 
66
+ // src/util/resolveSetState.ts
67
+ function resolveSetState(action, prev) {
68
+ return typeof action === "function" ? action(prev) : action;
69
+ }
70
+
65
71
  // src/hooks/useLocalStorage.ts
66
72
  var useLocalStorage = (key, initValue) => {
67
73
  const get = (0, import_react.useCallback)(() => {
@@ -73,10 +79,10 @@ var useLocalStorage = (key, initValue) => {
73
79
  return value || initValue;
74
80
  }, [initValue, key]);
75
81
  const [storedValue, setStoredValue] = (0, import_react.useState)(get);
76
- const setValue = (0, import_react.useCallback)((value) => {
77
- const newValue = value instanceof Function ? value(storedValue) : value;
82
+ const setValue = (0, import_react.useCallback)((action) => {
83
+ const newValue = resolveSetState(action, storedValue);
78
84
  const storageService = new LocalStorageService();
79
- storageService.set(key, value);
85
+ storageService.set(key, newValue);
80
86
  setStoredValue(newValue);
81
87
  }, [storedValue, setStoredValue, key]);
82
88
  (0, import_react.useEffect)(() => {
@@ -87,11 +93,12 @@ var useLocalStorage = (key, initValue) => {
87
93
 
88
94
  // src/theming/useTheme.tsx
89
95
  var import_jsx_runtime = require("react/jsx-runtime");
90
- var themes = ["light", "dark"];
96
+ var themes = ["light", "dark", "system"];
91
97
  var defaultThemeTypeTranslation = {
92
98
  en: {
93
99
  dark: "Dark",
94
100
  light: "Light",
101
+ system: "System",
95
102
  theme: {
96
103
  one: "Theme",
97
104
  other: "Themes"
@@ -100,6 +107,7 @@ var defaultThemeTypeTranslation = {
100
107
  de: {
101
108
  dark: "Dunkel",
102
109
  light: "Hell",
110
+ system: "System",
103
111
  theme: {
104
112
  one: "Farbschema",
105
113
  other: "Farbschemas"
@@ -110,34 +118,30 @@ var ThemeUtil = {
110
118
  themes,
111
119
  translation: defaultThemeTypeTranslation
112
120
  };
113
- var ThemeContext = (0, import_react2.createContext)({
121
+ var ThemeContext = (0, import_react3.createContext)({
114
122
  theme: "light",
115
123
  setTheme: noop
116
124
  });
117
- var ThemeProvider = ({ children, initialTheme = "light" }) => {
118
- const [theme, setTheme] = (0, import_react2.useState)(initialTheme);
125
+ var ThemeProvider = ({ children, initialTheme = "system" }) => {
119
126
  const [storedTheme, setStoredTheme] = useLocalStorage("theme", initialTheme);
120
- (0, import_react2.useEffect)(() => {
121
- if (theme !== initialTheme) {
127
+ const [userTheme, setUserTheme] = (0, import_react3.useState)();
128
+ (0, import_react3.useEffect)(() => {
129
+ if (storedTheme !== initialTheme) {
122
130
  console.warn("ThemeProvider initial state changed: Prefer using useTheme's setTheme instead");
123
- setTheme(initialTheme);
131
+ setStoredTheme(initialTheme);
124
132
  }
125
133
  }, [initialTheme]);
126
- (0, import_react2.useEffect)(() => {
127
- document.documentElement.setAttribute("data-theme", theme);
128
- setStoredTheme(theme);
129
- }, [theme]);
130
- (0, import_react2.useEffect)(() => {
131
- if (storedTheme !== null) {
132
- setTheme(storedTheme);
133
- return;
134
- }
134
+ const usedTheme = (0, import_react2.useMemo)(() => storedTheme !== "system" ? storedTheme : userTheme, [storedTheme, userTheme]);
135
+ (0, import_react3.useEffect)(() => {
136
+ document.documentElement.setAttribute("data-theme", usedTheme);
137
+ }, [usedTheme]);
138
+ (0, import_react3.useEffect)(() => {
135
139
  const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
136
- setTheme(prefersDark ? "dark" : "light");
140
+ setUserTheme(prefersDark ? "dark" : "light");
137
141
  }, []);
138
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: { theme, setTheme }, children });
142
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: { theme: storedTheme, setTheme: setStoredTheme }, children });
139
143
  };
140
- var useTheme = () => (0, import_react2.useContext)(ThemeContext);
144
+ var useTheme = () => (0, import_react3.useContext)(ThemeContext);
141
145
  // Annotate the CommonJS export names for ESM import in node:
142
146
  0 && (module.exports = {
143
147
  ThemeContext,
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/theming/useTheme.tsx","../../src/util/noop.ts","../../src/hooks/useLocalStorage.ts","../../src/util/storage.ts"],"sourcesContent":["import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport type { Translation, TranslationPlural } from '../localization/useTranslation'\nimport { noop } from '../util/noop'\nimport { useLocalStorage } from '../hooks/useLocalStorage'\n\nconst themes = ['light', 'dark'] as const\n\nexport type ThemeType = typeof themes[number]\n\nexport type ThemeTypeTranslation = Record<ThemeType, string> & {\n theme: TranslationPlural,\n}\n\nconst defaultThemeTypeTranslation: Translation<ThemeTypeTranslation> = {\n en: {\n dark: 'Dark',\n light: 'Light',\n theme: {\n one: 'Theme',\n other: 'Themes'\n }\n },\n de: {\n dark: 'Dunkel',\n light: 'Hell',\n theme: {\n one: 'Farbschema',\n other: 'Farbschemas'\n }\n }\n}\n\nexport const ThemeUtil = {\n themes,\n translation: defaultThemeTypeTranslation,\n}\n\ntype ThemeContextType = {\n theme: ThemeType,\n setTheme: Dispatch<SetStateAction<ThemeType>>,\n}\n\nexport const ThemeContext = createContext<ThemeContextType>({\n theme: 'light',\n setTheme: noop\n})\n\ntype ThemeProviderProps = {\n initialTheme?: ThemeType,\n}\n\nexport const ThemeProvider = ({ children, initialTheme = 'light' }: PropsWithChildren<ThemeProviderProps>) => {\n const [theme, setTheme] = useState<ThemeType>(initialTheme)\n const [storedTheme, setStoredTheme] = useLocalStorage<ThemeType>('theme', initialTheme)\n\n useEffect(() => {\n if (theme !== initialTheme) {\n console.warn('ThemeProvider initial state changed: Prefer using useTheme\\'s setTheme instead')\n setTheme(initialTheme)\n }\n }, [initialTheme]) // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n document.documentElement.setAttribute('data-theme', theme)\n setStoredTheme(theme)\n }, [theme]) // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n if (storedTheme !== null) {\n setTheme(storedTheme)\n return\n }\n\n const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches\n setTheme(prefersDark ? 'dark' : 'light')\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return (\n <ThemeContext.Provider value={{ theme, setTheme }}>\n {children}\n </ThemeContext.Provider>\n )\n}\n\n\nexport const useTheme = () => useContext(ThemeContext)\n","export const noop = () => undefined\n","import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const useLocalStorage = <T>(key: string, initValue: T): [T, SetValue<T>] => {\n const get = useCallback((): T => {\n if (typeof window === 'undefined') {\n return initValue\n }\n const storageService = new LocalStorageService()\n const value = storageService.get<T>(key)\n return value || initValue\n }, [initValue, key])\n\n const [storedValue, setStoredValue] = useState<T>(get)\n\n const setValue: SetValue<T> = useCallback(value => {\n const newValue = value instanceof Function ? value(storedValue) : value\n const storageService = new LocalStorageService()\n storageService.set(key, value)\n\n setStoredValue(newValue)\n }, [storedValue, setStoredValue, key])\n\n useEffect(() => {\n setStoredValue(get())\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return [storedValue, setValue]\n}","class StorageService {\n // this seems to be a bug in eslint as 'paramter-properties' is a special syntax of typescript\n\n constructor(private storage: Storage) {\n }\n\n public get<T>(key: string): T | null {\n const value = this.storage.getItem(key)\n if (value === null) {\n return null\n }\n return JSON.parse(value)\n }\n\n public set<T>(key: string, value: T) {\n this.storage.setItem(key, JSON.stringify(value))\n }\n\n public delete(key: string) {\n this.storage.removeItem(key)\n }\n\n public deleteAll() {\n this.storage.clear()\n }\n}\n\nexport class LocalStorageService extends StorageService {\n constructor() {\n super(window.localStorage)\n }\n}\n\nexport class SessionStorageService extends StorageService {\n constructor() {\n super(window.sessionStorage)\n }\n}\n"],"mappings":"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","names":["import_react"]}
1
+ {"version":3,"sources":["../../src/theming/useTheme.tsx","../../src/util/noop.ts","../../src/hooks/useLocalStorage.ts","../../src/util/storage.ts","../../src/util/resolveSetState.ts"],"sourcesContent":["import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { useMemo } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport type { Translation, TranslationPlural } from '../localization/useTranslation'\nimport { noop } from '../util/noop'\nimport { useLocalStorage } from '../hooks/useLocalStorage'\n\nconst themes = ['light', 'dark', 'system'] as const\n\nexport type ThemeType = typeof themes[number]\n\nexport type ThemeTypeTranslation = Record<ThemeType, string> & {\n theme: TranslationPlural,\n}\n\nconst defaultThemeTypeTranslation: Translation<ThemeTypeTranslation> = {\n en: {\n dark: 'Dark',\n light: 'Light',\n system: 'System',\n theme: {\n one: 'Theme',\n other: 'Themes'\n }\n },\n de: {\n dark: 'Dunkel',\n light: 'Hell',\n system: 'System',\n theme: {\n one: 'Farbschema',\n other: 'Farbschemas'\n }\n }\n}\n\nexport const ThemeUtil = {\n themes,\n translation: defaultThemeTypeTranslation,\n}\n\ntype ThemeContextType = {\n theme: ThemeType,\n setTheme: Dispatch<SetStateAction<ThemeType>>,\n}\n\nexport const ThemeContext = createContext<ThemeContextType>({\n theme: 'light',\n setTheme: noop\n})\n\ntype ThemeProviderProps = {\n initialTheme?: ThemeType,\n}\n\nexport const ThemeProvider = ({ children, initialTheme = 'system' }: PropsWithChildren<ThemeProviderProps>) => {\n const [storedTheme, setStoredTheme] = useLocalStorage<ThemeType>('theme', initialTheme)\n const [userTheme, setUserTheme] = useState<ThemeType>()\n\n useEffect(() => {\n if (storedTheme !== initialTheme) {\n console.warn('ThemeProvider initial state changed: Prefer using useTheme\\'s setTheme instead')\n setStoredTheme(initialTheme)\n }\n }, [initialTheme]) // eslint-disable-line react-hooks/exhaustive-deps\n\n const usedTheme = useMemo(() => storedTheme !== 'system' ? storedTheme : userTheme, [storedTheme, userTheme])\n\n useEffect(() => {\n document.documentElement.setAttribute('data-theme', usedTheme)\n }, [usedTheme])\n\n useEffect(() => {\n const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches\n setUserTheme(prefersDark ? 'dark' : 'light')\n }, [])\n\n return (\n <ThemeContext.Provider value={{ theme: storedTheme, setTheme: setStoredTheme }}>\n {children}\n </ThemeContext.Provider>\n )\n}\n\n\nexport const useTheme = () => useContext(ThemeContext)\n","export const noop = () => undefined\n","import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\nimport { resolveSetState } from '../util/resolveSetState'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const useLocalStorage = <T>(key: string, initValue: T): [T, SetValue<T>] => {\n const get = useCallback((): T => {\n if (typeof window === 'undefined') {\n return initValue\n }\n const storageService = new LocalStorageService()\n const value = storageService.get<T>(key)\n return value || initValue\n }, [initValue, key])\n\n const [storedValue, setStoredValue] = useState<T>(get)\n\n const setValue: SetValue<T> = useCallback(action => {\n const newValue = resolveSetState(action, storedValue)\n const storageService = new LocalStorageService()\n storageService.set(key, newValue)\n\n setStoredValue(newValue)\n }, [storedValue, setStoredValue, key])\n\n useEffect(() => {\n setStoredValue(get())\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return [storedValue, setValue]\n}","class StorageService {\n // this seems to be a bug in eslint as 'paramter-properties' is a special syntax of typescript\n\n constructor(private storage: Storage) {\n }\n\n public get<T>(key: string): T | null {\n const value = this.storage.getItem(key)\n if (value === null) {\n return null\n }\n return JSON.parse(value)\n }\n\n public set<T>(key: string, value: T) {\n this.storage.setItem(key, JSON.stringify(value))\n }\n\n public delete(key: string) {\n this.storage.removeItem(key)\n }\n\n public deleteAll() {\n this.storage.clear()\n }\n}\n\nexport class LocalStorageService extends StorageService {\n constructor() {\n super(window.localStorage)\n }\n}\n\nexport class SessionStorageService extends StorageService {\n constructor() {\n super(window.sessionStorage)\n }\n}\n","import type { SetStateAction } from 'react'\n\nexport function resolveSetState<T>(action: SetStateAction<T>, prev: T): T {\n return typeof action === 'function' ? (action as (prev: T) => T)(prev) : action\n}"],"mappings":"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","names":["import_react"]}
@@ -1,4 +1,5 @@
1
1
  // src/theming/useTheme.tsx
2
+ import { useMemo } from "react";
2
3
  import { createContext, useContext, useEffect as useEffect2, useState as useState2 } from "react";
3
4
 
4
5
  // src/util/noop.ts
@@ -36,6 +37,11 @@ var LocalStorageService = class extends StorageService {
36
37
  }
37
38
  };
38
39
 
40
+ // src/util/resolveSetState.ts
41
+ function resolveSetState(action, prev) {
42
+ return typeof action === "function" ? action(prev) : action;
43
+ }
44
+
39
45
  // src/hooks/useLocalStorage.ts
40
46
  var useLocalStorage = (key, initValue) => {
41
47
  const get = useCallback(() => {
@@ -47,10 +53,10 @@ var useLocalStorage = (key, initValue) => {
47
53
  return value || initValue;
48
54
  }, [initValue, key]);
49
55
  const [storedValue, setStoredValue] = useState(get);
50
- const setValue = useCallback((value) => {
51
- const newValue = value instanceof Function ? value(storedValue) : value;
56
+ const setValue = useCallback((action) => {
57
+ const newValue = resolveSetState(action, storedValue);
52
58
  const storageService = new LocalStorageService();
53
- storageService.set(key, value);
59
+ storageService.set(key, newValue);
54
60
  setStoredValue(newValue);
55
61
  }, [storedValue, setStoredValue, key]);
56
62
  useEffect(() => {
@@ -61,11 +67,12 @@ var useLocalStorage = (key, initValue) => {
61
67
 
62
68
  // src/theming/useTheme.tsx
63
69
  import { jsx } from "react/jsx-runtime";
64
- var themes = ["light", "dark"];
70
+ var themes = ["light", "dark", "system"];
65
71
  var defaultThemeTypeTranslation = {
66
72
  en: {
67
73
  dark: "Dark",
68
74
  light: "Light",
75
+ system: "System",
69
76
  theme: {
70
77
  one: "Theme",
71
78
  other: "Themes"
@@ -74,6 +81,7 @@ var defaultThemeTypeTranslation = {
74
81
  de: {
75
82
  dark: "Dunkel",
76
83
  light: "Hell",
84
+ system: "System",
77
85
  theme: {
78
86
  one: "Farbschema",
79
87
  other: "Farbschemas"
@@ -88,28 +96,24 @@ var ThemeContext = createContext({
88
96
  theme: "light",
89
97
  setTheme: noop
90
98
  });
91
- var ThemeProvider = ({ children, initialTheme = "light" }) => {
92
- const [theme, setTheme] = useState2(initialTheme);
99
+ var ThemeProvider = ({ children, initialTheme = "system" }) => {
93
100
  const [storedTheme, setStoredTheme] = useLocalStorage("theme", initialTheme);
101
+ const [userTheme, setUserTheme] = useState2();
94
102
  useEffect2(() => {
95
- if (theme !== initialTheme) {
103
+ if (storedTheme !== initialTheme) {
96
104
  console.warn("ThemeProvider initial state changed: Prefer using useTheme's setTheme instead");
97
- setTheme(initialTheme);
105
+ setStoredTheme(initialTheme);
98
106
  }
99
107
  }, [initialTheme]);
108
+ const usedTheme = useMemo(() => storedTheme !== "system" ? storedTheme : userTheme, [storedTheme, userTheme]);
100
109
  useEffect2(() => {
101
- document.documentElement.setAttribute("data-theme", theme);
102
- setStoredTheme(theme);
103
- }, [theme]);
110
+ document.documentElement.setAttribute("data-theme", usedTheme);
111
+ }, [usedTheme]);
104
112
  useEffect2(() => {
105
- if (storedTheme !== null) {
106
- setTheme(storedTheme);
107
- return;
108
- }
109
113
  const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
110
- setTheme(prefersDark ? "dark" : "light");
114
+ setUserTheme(prefersDark ? "dark" : "light");
111
115
  }, []);
112
- return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: { theme, setTheme }, children });
116
+ return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: { theme: storedTheme, setTheme: setStoredTheme }, children });
113
117
  };
114
118
  var useTheme = () => useContext(ThemeContext);
115
119
  export {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/theming/useTheme.tsx","../../src/util/noop.ts","../../src/hooks/useLocalStorage.ts","../../src/util/storage.ts"],"sourcesContent":["import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport type { Translation, TranslationPlural } from '../localization/useTranslation'\nimport { noop } from '../util/noop'\nimport { useLocalStorage } from '../hooks/useLocalStorage'\n\nconst themes = ['light', 'dark'] as const\n\nexport type ThemeType = typeof themes[number]\n\nexport type ThemeTypeTranslation = Record<ThemeType, string> & {\n theme: TranslationPlural,\n}\n\nconst defaultThemeTypeTranslation: Translation<ThemeTypeTranslation> = {\n en: {\n dark: 'Dark',\n light: 'Light',\n theme: {\n one: 'Theme',\n other: 'Themes'\n }\n },\n de: {\n dark: 'Dunkel',\n light: 'Hell',\n theme: {\n one: 'Farbschema',\n other: 'Farbschemas'\n }\n }\n}\n\nexport const ThemeUtil = {\n themes,\n translation: defaultThemeTypeTranslation,\n}\n\ntype ThemeContextType = {\n theme: ThemeType,\n setTheme: Dispatch<SetStateAction<ThemeType>>,\n}\n\nexport const ThemeContext = createContext<ThemeContextType>({\n theme: 'light',\n setTheme: noop\n})\n\ntype ThemeProviderProps = {\n initialTheme?: ThemeType,\n}\n\nexport const ThemeProvider = ({ children, initialTheme = 'light' }: PropsWithChildren<ThemeProviderProps>) => {\n const [theme, setTheme] = useState<ThemeType>(initialTheme)\n const [storedTheme, setStoredTheme] = useLocalStorage<ThemeType>('theme', initialTheme)\n\n useEffect(() => {\n if (theme !== initialTheme) {\n console.warn('ThemeProvider initial state changed: Prefer using useTheme\\'s setTheme instead')\n setTheme(initialTheme)\n }\n }, [initialTheme]) // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n document.documentElement.setAttribute('data-theme', theme)\n setStoredTheme(theme)\n }, [theme]) // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n if (storedTheme !== null) {\n setTheme(storedTheme)\n return\n }\n\n const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches\n setTheme(prefersDark ? 'dark' : 'light')\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return (\n <ThemeContext.Provider value={{ theme, setTheme }}>\n {children}\n </ThemeContext.Provider>\n )\n}\n\n\nexport const useTheme = () => useContext(ThemeContext)\n","export const noop = () => undefined\n","import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const useLocalStorage = <T>(key: string, initValue: T): [T, SetValue<T>] => {\n const get = useCallback((): T => {\n if (typeof window === 'undefined') {\n return initValue\n }\n const storageService = new LocalStorageService()\n const value = storageService.get<T>(key)\n return value || initValue\n }, [initValue, key])\n\n const [storedValue, setStoredValue] = useState<T>(get)\n\n const setValue: SetValue<T> = useCallback(value => {\n const newValue = value instanceof Function ? value(storedValue) : value\n const storageService = new LocalStorageService()\n storageService.set(key, value)\n\n setStoredValue(newValue)\n }, [storedValue, setStoredValue, key])\n\n useEffect(() => {\n setStoredValue(get())\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return [storedValue, setValue]\n}","class StorageService {\n // this seems to be a bug in eslint as 'paramter-properties' is a special syntax of typescript\n\n constructor(private storage: Storage) {\n }\n\n public get<T>(key: string): T | null {\n const value = this.storage.getItem(key)\n if (value === null) {\n return null\n }\n return JSON.parse(value)\n }\n\n public set<T>(key: string, value: T) {\n this.storage.setItem(key, JSON.stringify(value))\n }\n\n public delete(key: string) {\n this.storage.removeItem(key)\n }\n\n public deleteAll() {\n this.storage.clear()\n }\n}\n\nexport class LocalStorageService extends StorageService {\n constructor() {\n super(window.localStorage)\n }\n}\n\nexport class SessionStorageService extends StorageService {\n constructor() {\n super(window.sessionStorage)\n }\n}\n"],"mappings":"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","names":["useEffect","useState","useState","useEffect"]}
1
+ {"version":3,"sources":["../../src/theming/useTheme.tsx","../../src/util/noop.ts","../../src/hooks/useLocalStorage.ts","../../src/util/storage.ts","../../src/util/resolveSetState.ts"],"sourcesContent":["import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { useMemo } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport type { Translation, TranslationPlural } from '../localization/useTranslation'\nimport { noop } from '../util/noop'\nimport { useLocalStorage } from '../hooks/useLocalStorage'\n\nconst themes = ['light', 'dark', 'system'] as const\n\nexport type ThemeType = typeof themes[number]\n\nexport type ThemeTypeTranslation = Record<ThemeType, string> & {\n theme: TranslationPlural,\n}\n\nconst defaultThemeTypeTranslation: Translation<ThemeTypeTranslation> = {\n en: {\n dark: 'Dark',\n light: 'Light',\n system: 'System',\n theme: {\n one: 'Theme',\n other: 'Themes'\n }\n },\n de: {\n dark: 'Dunkel',\n light: 'Hell',\n system: 'System',\n theme: {\n one: 'Farbschema',\n other: 'Farbschemas'\n }\n }\n}\n\nexport const ThemeUtil = {\n themes,\n translation: defaultThemeTypeTranslation,\n}\n\ntype ThemeContextType = {\n theme: ThemeType,\n setTheme: Dispatch<SetStateAction<ThemeType>>,\n}\n\nexport const ThemeContext = createContext<ThemeContextType>({\n theme: 'light',\n setTheme: noop\n})\n\ntype ThemeProviderProps = {\n initialTheme?: ThemeType,\n}\n\nexport const ThemeProvider = ({ children, initialTheme = 'system' }: PropsWithChildren<ThemeProviderProps>) => {\n const [storedTheme, setStoredTheme] = useLocalStorage<ThemeType>('theme', initialTheme)\n const [userTheme, setUserTheme] = useState<ThemeType>()\n\n useEffect(() => {\n if (storedTheme !== initialTheme) {\n console.warn('ThemeProvider initial state changed: Prefer using useTheme\\'s setTheme instead')\n setStoredTheme(initialTheme)\n }\n }, [initialTheme]) // eslint-disable-line react-hooks/exhaustive-deps\n\n const usedTheme = useMemo(() => storedTheme !== 'system' ? storedTheme : userTheme, [storedTheme, userTheme])\n\n useEffect(() => {\n document.documentElement.setAttribute('data-theme', usedTheme)\n }, [usedTheme])\n\n useEffect(() => {\n const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches\n setUserTheme(prefersDark ? 'dark' : 'light')\n }, [])\n\n return (\n <ThemeContext.Provider value={{ theme: storedTheme, setTheme: setStoredTheme }}>\n {children}\n </ThemeContext.Provider>\n )\n}\n\n\nexport const useTheme = () => useContext(ThemeContext)\n","export const noop = () => undefined\n","import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\nimport { resolveSetState } from '../util/resolveSetState'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const useLocalStorage = <T>(key: string, initValue: T): [T, SetValue<T>] => {\n const get = useCallback((): T => {\n if (typeof window === 'undefined') {\n return initValue\n }\n const storageService = new LocalStorageService()\n const value = storageService.get<T>(key)\n return value || initValue\n }, [initValue, key])\n\n const [storedValue, setStoredValue] = useState<T>(get)\n\n const setValue: SetValue<T> = useCallback(action => {\n const newValue = resolveSetState(action, storedValue)\n const storageService = new LocalStorageService()\n storageService.set(key, newValue)\n\n setStoredValue(newValue)\n }, [storedValue, setStoredValue, key])\n\n useEffect(() => {\n setStoredValue(get())\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return [storedValue, setValue]\n}","class StorageService {\n // this seems to be a bug in eslint as 'paramter-properties' is a special syntax of typescript\n\n constructor(private storage: Storage) {\n }\n\n public get<T>(key: string): T | null {\n const value = this.storage.getItem(key)\n if (value === null) {\n return null\n }\n return JSON.parse(value)\n }\n\n public set<T>(key: string, value: T) {\n this.storage.setItem(key, JSON.stringify(value))\n }\n\n public delete(key: string) {\n this.storage.removeItem(key)\n }\n\n public deleteAll() {\n this.storage.clear()\n }\n}\n\nexport class LocalStorageService extends StorageService {\n constructor() {\n super(window.localStorage)\n }\n}\n\nexport class SessionStorageService extends StorageService {\n constructor() {\n super(window.sessionStorage)\n }\n}\n","import type { SetStateAction } from 'react'\n\nexport function resolveSetState<T>(action: SetStateAction<T>, prev: T): T {\n return typeof action === 'function' ? (action as (prev: T) => T)(prev) : action\n}"],"mappings":"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","names":["useEffect","useState","useState","useEffect"]}
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "url": "git+https://github.com/helpwave/hightide.git"
8
8
  },
9
9
  "license": "MPL-2.0",
10
- "version": "0.1.21",
10
+ "version": "0.1.23",
11
11
  "files": [
12
12
  "dist"
13
13
  ],