npm - @helpwave/hightide - Versions diffs - 0.1.9 → 0.1.11 - Mend

@helpwave/hightide 0.1.9 → 0.1.11

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 (137) hide show

package/dist/components/user-action/Select.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/user-action/Select.tsx","../../../src/components/user-action/Label.tsx","../../../src/components/layout-and-navigation/SearchableList.tsx","../../../src/localization/LanguageProvider.tsx","../../../src/hooks/useLocalStorage.ts","../../../src/localization/util.ts","../../../src/localization/useTranslation.ts","../../../src/components/user-action/Input.tsx","../../../src/hooks/useSaveDelay.ts","../../../src/util/noop.ts","../../../src/components/user-action/Button.tsx","../../../src/hooks/useSearch.ts","../../../src/util/simpleSearch.ts","../../../src/localization/defaults/form.ts","../../../src/components/layout-and-navigation/Tile.tsx","../../../src/hooks/useOutsideClick.ts"],"sourcesContent":["import { ChevronDown, ChevronUp } from 'lucide-react'\nimport type { ReactNode } from 'react'\nimport { useEffect, useRef, useState } from 'react'\nimport clsx from 'clsx'\nimport type { LabelProps } from './Label'\nimport { Label } from './Label'\nimport { SearchableList } from '../layout-and-navigation/SearchableList'\nimport { Tile } from '../layout-and-navigation/Tile'\nimport { useOutsideClick } from '../../hooks/useOutsideClick'\n\nexport type SelectOption<T> = {\n label: ReactNode,\n value: T,\n searchTags?: string[],\n disabled?: boolean,\n className?: string,\n}\n\nexport type SelectProps<T> = {\n value?: T,\n label?: LabelProps,\n options: SelectOption<T>[],\n onChange: (value: T) => void,\n hintText?: string,\n isDisabled?: boolean,\n isSearchEnabled?: boolean,\n selectedDisplayOverwrite?: ReactNode,\n className?: string,\n};\n\n/*\n A Select Component for selecting form a list of options\n \n The State is managed by the parent\n /\nexport const Select = <T, >({\n value,\n label,\n options,\n onChange,\n hintText = '',\n isDisabled,\n isSearchEnabled = false,\n className,\n selectedDisplayOverwrite,\n }: SelectProps<T>) => {\n const triggerRef = useRef<HTMLButtonElement>(null)\n const menuRef = useRef<HTMLDivElement>(null)\n const [isOpen, setIsOpen] = useState(false)\n useOutsideClick([triggerRef, menuRef], () => setIsOpen(false))\n const selectedOption = options.find(option => option.value === value)\n if (value !== undefined && selectedOption === undefined && selectedDisplayOverwrite === undefined) {\n console.warn('The selected value is not found in the options list. This might be an error on your part or' +\n ' default behavior if it is complex data type on which === does not work. In case of the latter' +\n ' use selectedDisplayOverwrite to set your selected text or component')\n }\n\n const isShowingHint = !selectedDisplayOverwrite && !selectedOption?.label\n\n return (\n <div className={clsx(className)}>\n {label && (\n <Label {...label} labelType={label.labelType ?? 'labelBig'} className={clsx('mb-1', label.className)}/>\n )}\n <div className=\"relative\">\n <button\n ref={triggerRef}\n className={clsx(\n 'btn-md justify-between w-full border-2',\n {\n 'rounded-b-lg': !open,\n 'bg-menu-background border-menu-border hover:border-primary': !isDisabled,\n 'bg-disabled-background text-disabled-text border-disabled-background cursor-not-allowed': isDisabled\n }\n )}\n onClick={() => setIsOpen(!isOpen)}\n disabled={isDisabled}\n >\n {!isShowingHint &&\n <span className=\"font-semibold text-menu-text\">{selectedDisplayOverwrite ?? selectedOption?.label}</span>}\n {isShowingHint && (<span className=\"textstyle-description\">{hintText}</span>)}\n {isOpen ? <ChevronUp/> : <ChevronDown/>}\n </button>\n {isOpen && (\n <div\n ref={menuRef}\n className=\"absolute w-full z-10 rounded-lg mt-0.5 bg-menu-background text-menu-text shadow-around-md max-h-[500px] overflow-y-auto p-2\"\n >\n <SearchableList\n list={options}\n minimumItemsForSearch={isSearchEnabled ? undefined : options.length}\n searchMapping={item => item.searchTags}\n itemMapper={(option, index) => (\n <Tile\n key={index}\n isSelected={selectedOption?.value === option.value}\n className=\"px-2 py-1 rounded-md\"\n disabledClassName=\"text-disabled-text cursor-not-allowed\"\n title={{ value: option.label, className: 'font-semibold' }}\n onClick={() => {\n onChange(option.value)\n setIsOpen(false)\n }}\n isDisabled={option.disabled}\n />\n )}\n />\n </div>\n )}\n </div>\n </div>\n )\n}\n\nexport const SelectUncontrolled = <T, >({\n options, onChange, value, hintText, ...props\n }: SelectProps<T>) => {\n const [selected, setSelected] = useState(value)\n\n useEffect(() => {\n if (options.find(options => options.value === value)) {\n setSelected(value)\n }\n }, [options, value])\n\n return (\n <Select\n value={selected}\n options={options}\n onChange={value => {\n setSelected(value)\n onChange(value)\n }}\n hintText={hintText}\n {...props}\n />\n )\n}","import type { LabelHTMLAttributes } from 'react'\nimport clsx from 'clsx'\n\nexport type LabelType = 'labelSmall' \| 'labelMedium' \| 'labelBig'\n\nconst styleMapping: Record<LabelType, string> = {\n labelSmall: 'textstyle-label-sm',\n labelMedium: 'textstyle-label-md',\n labelBig: 'textstyle-label-lg',\n}\n\nexport type LabelProps = {\n /* The text for the label /\n name?: string,\n /* The styling for the label /\n labelType?: LabelType,\n} & LabelHTMLAttributes<HTMLLabelElement>\n\n/\n A Label component\n /\nexport const Label = ({\n children,\n name,\n labelType = 'labelSmall',\n className,\n ...props\n }: LabelProps) => {\n return (\n <label {...props} className={clsx(styleMapping[labelType], className)}>\n {children ? children : name}\n </label>\n )\n}\n","import type { ReactNode } from 'react'\nimport { Search } from 'lucide-react'\nimport clsx from 'clsx'\nimport type { PropsForTranslation, Translation } from '../../localization/useTranslation'\nimport { useTranslation } from '../../localization/useTranslation'\nimport { Input } from '../user-action/Input'\nimport { IconButton } from '../user-action/Button'\nimport type { UseSearchProps } from '../../hooks/useSearch'\nimport { useSearch } from '../../hooks/useSearch'\nimport type { FormTranslationType } from '../../localization/defaults/form'\nimport { formTranslation } from '../../localization/defaults/form'\n\ntype SearchableListAddonTranslation = {\n nothingFound: string,\n}\n\ntype SearchableListTranslation = SearchableListAddonTranslation & FormTranslationType\n\nconst defaultSearchableListTranslation: Translation<SearchableListAddonTranslation> = {\n en: {\n nothingFound: 'Nothing found'\n },\n de: {\n nothingFound: 'Nichts gefunden'\n }\n}\n\nexport type SearchableListProps<T> = UseSearchProps<T> & {\n autoFocus?: boolean,\n minimumItemsForSearch?: number,\n itemMapper: (value: T, index: number) => ReactNode,\n className?: string,\n resultListClassName?: string,\n}\n\n/\n A component for searching a list\n /\nexport const SearchableList = <T, >({\n overwriteTranslation,\n list,\n initialSearch = '',\n searchMapping,\n autoFocus,\n minimumItemsForSearch = 6,\n itemMapper,\n className,\n resultListClassName\n }: PropsForTranslation<SearchableListTranslation, SearchableListProps<T>>) => {\n const translation = useTranslation([defaultSearchableListTranslation, formTranslation], overwriteTranslation)\n const { result, hasResult, search, setSearch } = useSearch<T>({ list, initialSearch, searchMapping })\n\n return (\n <div className={clsx('col gap-y-2', className)}>\n {list.length > minimumItemsForSearch && (\n <div className=\"row justify-between gap-x-4 items-center\">\n <Input\n value={search}\n onChangeText={setSearch}\n placeholder={translation('search')}\n autoFocus={autoFocus}\n className=\"w-full\"\n />\n <IconButton color=\"neutral\" disabled={search.length === 0}>\n <Search className=\"w-full h-full\"/>\n </IconButton>\n </div>\n )}\n {hasResult ? (\n <div className={clsx('col gap-y-1', resultListClassName)}>\n {result.map(itemMapper)}\n </div>\n ) : (\n <div className=\"row text-description py-2 px-2\">{translation('nothingFound')}</div>\n )}\n </div>\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 // TODO set locale of html tag here as well\n setStoredLanguage(language)\n }, [language, setStoredLanguage])\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 = Record<string, never>\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\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 <= 0 && value?.zero) {\n forProcessing = value.zero\n } else if (count === 1 && value?.one) {\n forProcessing = value.one\n } else if (count === 2 && value?.two) {\n forProcessing = value.two\n } else if (count <= 10 && value?.few) {\n forProcessing = value.few\n } else if (count > 10 && 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] ?? `{{${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 React, { forwardRef, type InputHTMLAttributes, useEffect, useRef, useState } from 'react'\nimport clsx from 'clsx'\nimport { useSaveDelay } from '../../hooks/useSaveDelay'\nimport { noop } from '../../util/noop'\nimport type { LabelProps } from './Label'\nimport { Label } from './Label'\n\nexport type InputProps = {\n /\n used for the label's `for` attribute\n /\n label?: Omit<LabelProps, 'id'>,\n /\n Callback for when the input's value changes\n * This is pretty much required but made optional for the rare cases where it actually isn't need such as when used with disabled\n * That could be enforced through a union type but that seems a bit overkill\n * @default noop\n /\n onChangeText?: (text: string) => void,\n className?: string,\n onEditCompleted?: (text: string) => void,\n expanded?: boolean,\n containerClassName?: string,\n} & Omit<InputHTMLAttributes<HTMLInputElement>, 'label'>\n\n/\n A Component for inputting text or other information\n \n Its state is managed must be managed by the parent\n /\nconst Input = ({\n id,\n type = 'text',\n value,\n label,\n onChange = noop,\n onChangeText = noop,\n onEditCompleted,\n className = '',\n expanded = true,\n autoFocus,\n onBlur,\n containerClassName,\n ...restProps\n }: InputProps) => {\n const {\n restartTimer,\n clearUpdateTimer\n } = useSaveDelay(() => undefined, 3000)\n const ref = useRef<HTMLInputElement>(null)\n\n useEffect(() => {\n if(autoFocus) {\n ref.current?.focus()\n }\n }, [autoFocus])\n\n return (\n <div className={clsx({ 'w-full': expanded }, containerClassName)}>\n {label && <Label {...label} htmlFor={id} className={clsx('mb-1', label.className)}/>}\n <input\n ref={ref}\n value={value}\n id={id}\n type={type}\n className={className}\n onBlur={event => {\n if (onBlur) {\n onBlur(event)\n }\n if (onEditCompleted) {\n onEditCompleted(event.target.value)\n clearUpdateTimer()\n }\n }}\n onChange={e => {\n const value = e.target.value\n if (onEditCompleted) {\n restartTimer(() => {\n onEditCompleted(value)\n clearUpdateTimer()\n })\n }\n onChange(e)\n onChangeText(value)\n }}\n {...restProps}\n />\n </div>\n )\n}\n\ntype InputUncontrolledProps = Omit<InputProps, 'value'> & {\n /\n @default ''\n /\n defaultValue?: string,\n}\n\n/\n A Component for inputting text or other information\n \n Its state is managed by the component itself\n /\nconst InputUncontrolled = ({\n defaultValue = '',\n onChangeText = noop,\n ...props\n }: InputUncontrolledProps) => {\n const [value, setValue] = useState(defaultValue)\n\n return (\n <Input\n {...props}\n value={value}\n onChangeText={text => {\n setValue(text)\n onChangeText(text)\n }}\n />\n )\n}\n\nexport type FormInputProps = InputHTMLAttributes<HTMLInputElement> & {\n id: string,\n labelText?: string,\n errorText?: string,\n labelClassName?: string,\n errorClassName?: string,\n containerClassName?: string,\n}\n\nconst FormInput = forwardRef<HTMLInputElement, FormInputProps>(function FormInput({\n id,\n labelText,\n errorText,\n className,\n labelClassName,\n errorClassName,\n containerClassName,\n required,\n ...restProps\n }, ref) {\n const input = (\n <input\n ref={ref}\n id={id}\n {...restProps}\n className={clsx(\n {\n 'focus:border-primary focus:ring-primary': !errorText,\n 'focus:border-negative focus:ring-negative text-negative': !!errorText,\n },\n className\n )}\n />\n )\n\n return (\n <div className={clsx('flex flex-col gap-y-1', containerClassName)}>\n {labelText && (\n <label htmlFor={id} className={clsx('textstyle-label-md', labelClassName)}>\n {labelText}\n {required && <span className=\"text-primary font-bold\"></span>}\n </label>\n )}\n {input}\n {errorText && <label htmlFor={id} className={clsx('text-negative', errorClassName)}>{errorText}</label>}\n </div>\n )\n})\n\nexport {\n InputUncontrolled,\n Input,\n FormInput\n}\n","import { useEffect, useState } from 'react'\n\nexport function useSaveDelay(setNotificationStatus: (isShowing: boolean) => void, delay: number) {\n const [updateTimer, setUpdateTimer] = useState<NodeJS.Timeout \| undefined>(undefined)\n const [notificationTimer, setNotificationTimer] = useState<NodeJS.Timeout \| undefined>(undefined)\n\n const restartTimer = (onSave: () => void) => {\n clearTimeout(updateTimer)\n setUpdateTimer(setTimeout(() => {\n onSave()\n setNotificationStatus(true)\n // Show Saved Notification for fade animation duration\n clearTimeout(notificationTimer)\n setNotificationTimer(setTimeout(() => {\n setNotificationStatus(false)\n clearTimeout(notificationTimer)\n }, delay))\n clearTimeout(updateTimer)\n }, delay))\n }\n\n const clearUpdateTimer = (hasSaved = true) => {\n clearTimeout(updateTimer)\n if (hasSaved) {\n setNotificationStatus(true)\n clearTimeout(notificationTimer)\n setNotificationTimer(setTimeout(() => {\n setNotificationStatus(false)\n clearTimeout(notificationTimer)\n }, delay))\n } else {\n setNotificationStatus(false)\n }\n }\n\n useEffect(() => {\n return () => {\n clearTimeout(updateTimer)\n clearTimeout(notificationTimer)\n }\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return { restartTimer, clearUpdateTimer }\n}","export const noop = () => undefined\n","import type { ButtonHTMLAttributes, PropsWithChildren, ReactNode } from 'react'\nimport clsx from 'clsx'\n\n\nexport const ButtonColorUtil = {\n solid: ['primary', 'secondary', 'tertiary', 'positive', 'warning', 'negative', 'neutral'] as const,\n text: ['primary', 'negative', 'neutral'] as const,\n outline: ['primary'] as const,\n}\n\n\n/*\n The allowed colors for the SolidButton and IconButton\n /\nexport type SolidButtonColor = typeof ButtonColorUtil.solid[number]\n/\n The allowed colors for the OutlineButton\n /\nexport type OutlineButtonColor = typeof ButtonColorUtil.outline[number]\n/\n The allowed colors for the TextButton\n /\nexport type TextButtonColor = typeof ButtonColorUtil.text[number]\n\n/\n The different sizes for a button\n /\ntype ButtonSizes = 'small' \| 'medium' \| 'large'\n\n/\n The shard properties between all button types\n /\nexport type ButtonProps = PropsWithChildren<{\n /\n @default 'medium'\n /\n size?: ButtonSizes,\n}> & ButtonHTMLAttributes<Element>\n\nconst paddingMapping: Record<ButtonSizes, string> = {\n small: 'btn-sm',\n medium: 'btn-md',\n large: 'btn-lg'\n}\n\nconst iconPaddingMapping: Record<ButtonSizes, string> = {\n small: 'icon-btn-sm',\n medium: 'icon-btn-md',\n large: 'icon-btn-lg'\n}\n\nexport const ButtonUtil = {\n paddingMapping,\n iconPaddingMapping\n}\n\ntype ButtonWithIconsProps = ButtonProps & {\n startIcon?: ReactNode,\n endIcon?: ReactNode,\n}\n\nexport type SolidButtonProps = ButtonWithIconsProps & {\n color?: SolidButtonColor,\n}\n\nexport type OutlineButtonProps = ButtonWithIconsProps & {\n color?: OutlineButtonColor,\n}\n\nexport type TextButtonProps = ButtonWithIconsProps & {\n color?: TextButtonColor,\n}\n\nexport type IconButtonProps = ButtonProps & {\n color?: SolidButtonColor,\n}\n\n/\n A button with a solid background and different sizes\n /\nconst SolidButton = ({\n children,\n disabled = false,\n color = 'primary',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n className,\n ...restProps\n }: SolidButtonProps) => {\n const colorClasses = {\n primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n neutral: 'bg-button-solid-neutral-background text-button-solid-neutral-text',\n }[color]\n\n const iconColorClasses = {\n primary: 'text-button-solid-primary-icon',\n secondary: 'text-button-solid-secondary-icon',\n tertiary: 'text-button-solid-tertiary-icon',\n positive: 'text-button-solid-positive-icon',\n warning: 'text-button-solid-warning-icon',\n negative: 'text-button-solid-negative-icon',\n neutral: 'text-button-solid-neutral-icon',\n }[color]\n\n return (\n <button\n onClick={disabled ? undefined : onClick}\n disabled={disabled \|\| onClick === undefined}\n className={clsx(\n {\n 'text-disabled-text bg-disabled-background cursor-not-allowed': disabled,\n [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n },\n ButtonUtil.paddingMapping[size],\n className\n )}\n {...restProps}\n >\n {startIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {startIcon}\n </span>\n )}\n {children}\n {endIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {endIcon}\n </span>\n )}\n </button>\n )\n}\n\n/\n A button with an outline border and different sizes\n /\nconst OutlineButton = ({\n children,\n disabled = false,\n color = 'primary',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n className,\n ...restProps\n }: OutlineButtonProps) => {\n const colorClasses = {\n primary: 'bg-transparent border-2 border-button-outline-primary-text text-button-outline-primary-text',\n }[color]\n\n const iconColorClasses = {\n primary: 'text-button-outline-primary-icon',\n }[color]\n return (\n <button\n onClick={disabled ? undefined : onClick}\n disabled={disabled \|\| onClick === undefined}\n className={clsx(\n {\n 'text-disabled-text border-disabled-outline cursor-not-allowed': disabled,\n [clsx(colorClasses, 'hover:brightness-80')]: !disabled,\n },\n ButtonUtil.paddingMapping[size],\n className\n )}\n {...restProps}\n >\n {startIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {startIcon}\n </span>\n )}\n {children}\n {endIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {endIcon}\n </span>\n )}\n </button>\n )\n}\n\n/\n A text that is a button that can have different sizes\n /\nconst TextButton = ({\n children,\n disabled = false,\n color = 'neutral',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n className,\n ...restProps\n }: TextButtonProps) => {\n const colorClasses = {\n primary: 'bg-transparent text-button-text-primary-text',\n negative: 'bg-transparent text-button-text-negative-text',\n neutral: 'bg-transparent text-button-text-neutral-text',\n }[color]\n\n const iconColorClasses = {\n primary: 'text-button-text-primary-icon',\n negative: 'text-button-text-negative-icon',\n neutral: 'text-button-text-neutral-icon',\n }[color]\n return (\n <button\n onClick={disabled ? undefined : onClick}\n disabled={disabled \|\| onClick === undefined}\n className={clsx(\n {\n 'text-disabled-text cursor-not-allowed': disabled,\n [clsx(colorClasses, 'hover:bg-button-text-hover-background rounded-full')]: !disabled,\n },\n ButtonUtil.paddingMapping[size],\n className\n )}\n {...restProps}\n >\n {startIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {startIcon}\n </span>\n )}\n {children}\n {endIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {endIcon}\n </span>\n )}\n </button>\n )\n}\n\n\n/\n A button for icons with a solid background and different sizes\n /\nconst IconButton = ({\n children,\n disabled = false,\n color = 'primary',\n size = 'medium',\n onClick,\n className,\n ...restProps\n }: IconButtonProps) => {\n const colorClasses = {\n primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n neutral: 'bg-button-solid-neutral-background text-button-solid-neutral-text',\n }[color]\n\n return (\n <button\n onClick={disabled ? undefined : onClick}\n disabled={disabled \|\| onClick === undefined}\n className={clsx(\n {\n 'text-disabled-text bg-disabled-background cursor-not-allowed': disabled,\n [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n },\n ButtonUtil.iconPaddingMapping[size],\n className\n )}\n {...restProps}\n >\n {children}\n </button>\n )\n}\n\nexport { SolidButton, OutlineButton, TextButton, IconButton }\n","import { useEffect, useMemo, useState } from 'react'\nimport { MultiSearchWithMapping } from '../util/simpleSearch'\n\nexport type UseSearchProps<T> = {\n list: T[],\n searchMapping: (item: T) => string[],\n initialSearch?: string,\n}\n\nexport const useSearch = <T>({\n list,\n initialSearch,\n searchMapping,\n }: UseSearchProps<T>) => {\n const [items, setItems] = useState<T[]>(list)\n const [search, setSearch] = useState<string>(initialSearch)\n\n useEffect(() => {\n setItems(list)\n }, [list])\n\n const result: T[] = useMemo(\n () => MultiSearchWithMapping(search, items, searchMapping),\n [search, items, searchMapping]\n )\n\n return {\n result,\n hasResult: result.length > 0,\n allItems: items,\n setItems,\n search,\n setSearch,\n }\n}","/\n Finds all values matching the search values by first mapping the values to a string array and then checking each entry for matches.\n * Returns the list of all matches.\n \n @param search The list of search strings e.g. `[name, type]`\n \n @param objects The list of objects to be searched in\n \n @param mapping The mapping of objects to the string properties they fulfil\n \n @return The list of objects that match all search strings\n /\nexport const MultiSubjectSearchWithMapping = <T>(search: string[], objects: T[], mapping: (value: T) => (string \| undefined)[]) => {\n return objects.filter(object => {\n const mappedSearchKeywords = mapping(object).map(value => value ? value.toLowerCase().trim() : undefined)\n return search.every(searchValue => !!mappedSearchKeywords.find(value => !!value && value.includes(searchValue.toLowerCase().trim())))\n })\n}\n\n/\n Finds all values matching the search value by first mapping the values to a string array and then checking each entry for matches.\n * Returns the list of all matches.\n \n @param search The search string e.g `name`\n \n @param objects The list of objects to be searched in\n \n @param mapping The mapping of objects to the string properties they fulfil, if undefined it is always fulfilled\n \n @return The list of objects that match the search string\n /\nexport const MultiSearchWithMapping = <T>(search: string, objects: T[], mapping: (value: T) => (string[] \| undefined)) => {\n return objects.filter(object => {\n const mappedSearchKeywords = mapping(object)?.map(value => value.toLowerCase().trim())\n if(!mappedSearchKeywords) {\n return true\n }\n return !!mappedSearchKeywords.find(value => value.includes(search.toLowerCase().trim()))\n })\n}\n\n/\n Finds all values matching the search value by first mapping the values to a string and returns the list of all matches.\n \n @param search The search string e.g `name`\n \n @param objects The list of objects to be searched in\n \n @param mapping The mapping of objects to a string that is compared to the search\n \n @return The list of objects that match the search string\n /\nexport const SimpleSearchWithMapping = <T>(search: string, objects: T[], mapping: (value: T) => string) => {\n return MultiSearchWithMapping(search, objects, value => [mapping(value)])\n}\n\n/\n Finds all values matching the search value and returns the list of all matches.\n \n @param search The search string e.g `name`\n \n @param objects The list of objects to be searched in\n \n @return The list of objects that match the search string\n /\nexport const SimpleSearch = (search: string, objects: string[]) => {\n return SimpleSearchWithMapping(search, objects, value => value)\n}\n","import type { Translation } from '../useTranslation'\n\nexport type FormTranslationType = {\n all: string,\n back: string,\n cancel: string,\n change: string,\n clear: string,\n close: string,\n confirm: string,\n decline: string,\n delete: string,\n discard: string,\n discardChanges: string,\n done: string,\n edit: string,\n enterText: string,\n error: string,\n exit: string,\n fieldRequiredError: string,\n invalidEmailError: string,\n less: string,\n loading: string,\n maxLengthError: string,\n minLengthError: string,\n more: string,\n next: string,\n no: string,\n none: string,\n of: string,\n optional: string,\n pleaseWait: string,\n previous: string,\n remove: string,\n required: string,\n reset: string,\n save: string,\n search: string,\n select: string,\n selectOption: string,\n show: string,\n showMore: string,\n showLess: string,\n submit: string,\n success: string,\n unsavedChanges: string,\n unsavedChangesSaveQuestion: string,\n update: string,\n yes: string,\n}\n\nexport const formTranslation: Translation<FormTranslationType> = {\n en: {\n all: 'All',\n back: 'Back',\n cancel: 'Cancel',\n change: 'Change',\n clear: 'Clear',\n close: 'Close',\n confirm: 'Confirm',\n decline: 'Decline',\n delete: 'Delete',\n discard: 'Discard',\n discardChanges: 'Discard Changes',\n done: 'Done',\n edit: 'Edit',\n enterText: 'Enter text here',\n error: 'Error',\n exit: 'Exit',\n fieldRequiredError: 'This field is required.',\n invalidEmailError: 'Please enter a valid email address.',\n less: 'Less',\n loading: 'Loading',\n maxLengthError: 'Maximum length exceeded.',\n minLengthError: 'Minimum length not met.',\n more: 'More',\n next: 'Next',\n no: 'No',\n none: 'None',\n of: 'of',\n optional: 'Optional',\n pleaseWait: 'Please wait...',\n previous: 'Previous',\n remove: 'Remove',\n required: 'Required',\n reset: 'Reset',\n save: 'Save',\n search: 'Search',\n select: 'Select',\n selectOption: 'Select an option',\n show: 'Show',\n showMore: 'Show more',\n showLess: 'Show less',\n submit: 'Submit',\n success: 'Success',\n update: 'Update',\n unsavedChanges: 'Unsaved Changes',\n unsavedChangesSaveQuestion: 'Do you want to save your changes?',\n yes: 'Yes',\n },\n de: {\n all: 'Alle',\n back: 'Zurück',\n cancel: 'Abbrechen',\n change: 'Ändern',\n clear: 'Löschen',\n close: 'Schließen',\n confirm: 'Bestätigen',\n decline: 'Ablehnen',\n delete: 'Löschen',\n discard: 'Verwerfen',\n discardChanges: 'Änderungen Verwerfen',\n done: 'Fertig',\n edit: 'Bearbeiten',\n enterText: 'Text hier eingeben',\n error: 'Fehler',\n exit: 'Beenden',\n fieldRequiredError: 'Dieses Feld ist erforderlich.',\n invalidEmailError: 'Bitte geben Sie eine gültige E-Mail-Adresse ein.',\n less: 'Weniger',\n loading: 'Lädt',\n maxLengthError: 'Maximale Länge überschritten.',\n minLengthError: 'Mindestlänge nicht erreicht.',\n more: 'Mehr',\n next: 'Weiter',\n no: 'Nein',\n none: 'Nichts',\n of: 'von',\n optional: 'Optional',\n pleaseWait: 'Bitte warten...',\n previous: 'Vorherige',\n remove: 'Entfernen',\n required: 'Erforderlich',\n reset: 'Zurücksetzen',\n save: 'Speichern',\n search: 'Suche',\n select: 'Select',\n selectOption: 'Option auswählen',\n show: 'Anzeigen',\n showMore: 'Mehr anzeigen',\n showLess: 'Weniger anzeigen',\n submit: 'Abschicken',\n success: 'Erfolg',\n update: 'Update',\n unsavedChanges: 'Ungespeicherte Änderungen',\n unsavedChangesSaveQuestion: 'Möchtest du die Änderungen speichern?',\n yes: 'Ja',\n }\n}\n","import type { ReactNode } from 'react'\nimport clsx from 'clsx'\nimport { Check } from 'lucide-react'\n\nexport type TileProps = {\n title: { value: ReactNode, className?: string },\n description?: { value: ReactNode, className?: string },\n onClick?: () => void,\n isDisabled?: boolean,\n isSelected?: boolean,\n prefix?: ReactNode,\n suffix?: ReactNode,\n className?: string,\n normalClassName?: string,\n selectedClassName?: string,\n disabledClassName?: string,\n}\n\n/\n A component for creating a tile similar to the flutter ListTile\n */\nexport const Tile = ({\n title,\n description,\n onClick,\n isSelected = false,\n isDisabled = false,\n prefix,\n suffix,\n normalClassName = 'hover:bg-primary/40 cursor-pointer',\n selectedClassName = ' bg-primary/20',\n disabledClassName = 'text-disabled-text bg-disabled-background cursor-not-allowed',\n className\n }: TileProps) => {\n return (\n <div\n className={clsx(\n 'row gap-x-2 w-full items-center',\n {\n [normalClassName]: !!onClick && !isDisabled,\n [selectedClassName]: isSelected && !isDisabled,\n [disabledClassName]: isDisabled,\n },\n className\n )}\n onClick={isDisabled ? undefined : onClick}\n >\n {prefix ?? (isSelected ? (<Check size={24}/>) : undefined)}\n <div className=\"col gap-y-0 w-full\">\n <h4 className={clsx(title.className ?? 'textstyle-title-normal')}>{title.value}</h4>\n {!!description &&\n <span className={clsx(description.className ?? 'textstyle-description')}>{description.value}</span>}\n </div>\n {suffix}\n </div>\n )\n}\n","import type { RefObject } from 'react'\nimport { useEffect } from 'react'\n\nexport const useOutsideClick = <Ts extends RefObject<HTMLElement>[]>(refs: Ts, handler: () => void) => {\n useEffect(() => {\n const listener = (event: MouseEvent \| TouchEvent) => {\n // returning means not \"not clicking outside\"\n\n // if no target exists, return\n if (event.target === null) return\n // if the target is a ref's element or descendent thereof, return\n if (refs.some((ref) => !ref.current \|\| ref.current.contains(event.target as Node))) {\n return\n }\n\n handler()\n }\n document.addEventListener('mousedown', listener)\n document.addEventListener('touchstart', listener)\n return () => {\n document.removeEventListener('mousedown', listener)\n document.removeEventListener('touchstart', listener)\n }\n }, [refs, handler])\n}\n"],"mappings":"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","names":["useEffect","useRef","useState","clsx","clsx","useEffect","useState","jsx","useEffect","useState","clsx","useEffect","useState","jsx","useEffect","clsx","value","FormInput","jsx","clsx","clsx","jsx","jsxs","jsx","clsx","useEffect","useState","useState","useEffect","jsx","jsxs","clsx","clsx","jsx","jsxs","useEffect","jsx","jsxs","useRef","useState","clsx","useEffect","options","value"]}
1	+ {"version":3,"sources":["../../../src/components/user-action/Select.tsx","../../../src/components/user-action/Label.tsx","../../../src/components/layout-and-navigation/SearchableList.tsx","../../../src/localization/LanguageProvider.tsx","../../../src/hooks/useLocalStorage.ts","../../../src/localization/util.ts","../../../src/localization/useTranslation.ts","../../../src/components/user-action/Input.tsx","../../../src/hooks/useSaveDelay.ts","../../../src/util/noop.ts","../../../src/components/user-action/Button.tsx","../../../src/hooks/useSearch.ts","../../../src/util/simpleSearch.ts","../../../src/localization/defaults/form.ts","../../../src/components/layout-and-navigation/Tile.tsx","../../../src/hooks/useOutsideClick.ts"],"sourcesContent":["import { ChevronDown, ChevronUp } from 'lucide-react'\nimport type { ReactNode } from 'react'\nimport { useEffect, useRef, useState } from 'react'\nimport clsx from 'clsx'\nimport type { LabelProps } from './Label'\nimport { Label } from './Label'\nimport { SearchableList } from '../layout-and-navigation/SearchableList'\nimport { Tile } from '../layout-and-navigation/Tile'\nimport { useOutsideClick } from '../../hooks/useOutsideClick'\n\nexport type SelectOption<T> = {\n label: ReactNode,\n value: T,\n searchTags?: string[],\n disabled?: boolean,\n className?: string,\n}\n\nexport type SelectProps<T> = {\n value?: T,\n label?: LabelProps,\n options: SelectOption<T>[],\n onChange: (value: T) => void,\n hintText?: string,\n isDisabled?: boolean,\n isSearchEnabled?: boolean,\n selectedDisplayOverwrite?: ReactNode,\n className?: string,\n};\n\n/*\n A Select Component for selecting form a list of options\n \n The State is managed by the parent\n /\nexport const Select = <T, >({\n value,\n label,\n options,\n onChange,\n hintText = '',\n isDisabled,\n isSearchEnabled = false,\n className,\n selectedDisplayOverwrite,\n }: SelectProps<T>) => {\n const triggerRef = useRef<HTMLButtonElement>(null)\n const menuRef = useRef<HTMLDivElement>(null)\n const [isOpen, setIsOpen] = useState(false)\n useOutsideClick([triggerRef, menuRef], () => setIsOpen(false))\n const selectedOption = options.find(option => option.value === value)\n if (value !== undefined && selectedOption === undefined && selectedDisplayOverwrite === undefined) {\n console.warn('The selected value is not found in the options list. This might be an error on your part or' +\n ' default behavior if it is complex data type on which === does not work. In case of the latter' +\n ' use selectedDisplayOverwrite to set your selected text or component')\n }\n\n const isShowingHint = !selectedDisplayOverwrite && !selectedOption?.label\n\n return (\n <div className={clsx(className)}>\n {label && (\n <Label {...label} labelType={label.labelType ?? 'labelBig'} className={clsx('mb-1', label.className)}/>\n )}\n <div className=\"relative\">\n <button\n ref={triggerRef}\n className={clsx(\n 'btn-md justify-between w-full border-2',\n {\n 'rounded-b-lg': !open,\n 'bg-menu-background border-menu-border hover:border-primary': !isDisabled,\n 'bg-disabled-background text-disabled-text border-disabled-background cursor-not-allowed': isDisabled\n }\n )}\n onClick={() => setIsOpen(!isOpen)}\n disabled={isDisabled}\n >\n {!isShowingHint &&\n <span className=\"font-semibold text-menu-text\">{selectedDisplayOverwrite ?? selectedOption?.label}</span>}\n {isShowingHint && (<span className=\"textstyle-description\">{hintText}</span>)}\n {isOpen ? <ChevronUp/> : <ChevronDown/>}\n </button>\n {isOpen && (\n <div\n ref={menuRef}\n className=\"absolute w-full z-10 rounded-lg mt-0.5 bg-menu-background text-menu-text shadow-around-lg max-h-[500px] overflow-y-auto p-2\"\n >\n <SearchableList\n list={options}\n minimumItemsForSearch={isSearchEnabled ? undefined : options.length}\n searchMapping={item => item.searchTags}\n itemMapper={(option, index) => (\n <Tile\n key={index}\n isSelected={selectedOption?.value === option.value}\n className=\"px-2 py-1 rounded-md\"\n disabledClassName=\"text-disabled-text cursor-not-allowed\"\n title={{ value: option.label, className: 'font-semibold' }}\n onClick={() => {\n onChange(option.value)\n setIsOpen(false)\n }}\n isDisabled={option.disabled}\n />\n )}\n />\n </div>\n )}\n </div>\n </div>\n )\n}\n\nexport const SelectUncontrolled = <T, >({\n options, onChange, value, hintText, ...props\n }: SelectProps<T>) => {\n const [selected, setSelected] = useState(value)\n\n useEffect(() => {\n if (options.find(options => options.value === value)) {\n setSelected(value)\n }\n }, [options, value])\n\n return (\n <Select\n value={selected}\n options={options}\n onChange={value => {\n setSelected(value)\n onChange(value)\n }}\n hintText={hintText}\n {...props}\n />\n )\n}","import type { LabelHTMLAttributes } from 'react'\nimport clsx from 'clsx'\n\nexport type LabelType = 'labelSmall' \| 'labelMedium' \| 'labelBig'\n\nconst styleMapping: Record<LabelType, string> = {\n labelSmall: 'textstyle-label-sm',\n labelMedium: 'textstyle-label-md',\n labelBig: 'textstyle-label-lg',\n}\n\nexport type LabelProps = {\n /* The text for the label /\n name?: string,\n /* The styling for the label /\n labelType?: LabelType,\n} & LabelHTMLAttributes<HTMLLabelElement>\n\n/\n A Label component\n /\nexport const Label = ({\n children,\n name,\n labelType = 'labelSmall',\n className,\n ...props\n }: LabelProps) => {\n return (\n <label {...props} className={clsx(styleMapping[labelType], className)}>\n {children ? children : name}\n </label>\n )\n}\n","import type { ReactNode } from 'react'\nimport { Search } from 'lucide-react'\nimport clsx from 'clsx'\nimport type { PropsForTranslation, Translation } from '../../localization/useTranslation'\nimport { useTranslation } from '../../localization/useTranslation'\nimport { Input } from '../user-action/Input'\nimport { IconButton } from '../user-action/Button'\nimport type { UseSearchProps } from '../../hooks/useSearch'\nimport { useSearch } from '../../hooks/useSearch'\nimport type { FormTranslationType } from '../../localization/defaults/form'\nimport { formTranslation } from '../../localization/defaults/form'\n\ntype SearchableListAddonTranslation = {\n nothingFound: string,\n}\n\ntype SearchableListTranslation = SearchableListAddonTranslation & FormTranslationType\n\nconst defaultSearchableListTranslation: Translation<SearchableListAddonTranslation> = {\n en: {\n nothingFound: 'Nothing found'\n },\n de: {\n nothingFound: 'Nichts gefunden'\n }\n}\n\nexport type SearchableListProps<T> = UseSearchProps<T> & {\n autoFocus?: boolean,\n minimumItemsForSearch?: number,\n itemMapper: (value: T, index: number) => ReactNode,\n className?: string,\n resultListClassName?: string,\n}\n\n/\n A component for searching a list\n /\nexport const SearchableList = <T, >({\n overwriteTranslation,\n list,\n initialSearch = '',\n searchMapping,\n autoFocus,\n minimumItemsForSearch = 6,\n itemMapper,\n className,\n resultListClassName\n }: PropsForTranslation<SearchableListTranslation, SearchableListProps<T>>) => {\n const translation = useTranslation([defaultSearchableListTranslation, formTranslation], overwriteTranslation)\n const { result, hasResult, search, setSearch } = useSearch<T>({ list, initialSearch, searchMapping })\n\n return (\n <div className={clsx('col gap-y-2', className)}>\n {list.length > minimumItemsForSearch && (\n <div className=\"row justify-between gap-x-4 items-center\">\n <Input\n value={search}\n onChangeText={setSearch}\n placeholder={translation('search')}\n autoFocus={autoFocus}\n className=\"w-full\"\n />\n <IconButton color=\"neutral\" disabled={search.length === 0}>\n <Search className=\"w-full h-full\"/>\n </IconButton>\n </div>\n )}\n {hasResult ? (\n <div className={clsx('col gap-y-1', resultListClassName)}>\n {result.map(itemMapper)}\n </div>\n ) : (\n <div className=\"row text-description py-2 px-2\">{translation('nothingFound')}</div>\n )}\n </div>\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 // TODO set locale of html tag here as well\n setStoredLanguage(language)\n }, [language, setStoredLanguage])\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}","import React, { forwardRef, type InputHTMLAttributes, useEffect, useRef, useState } from 'react'\nimport clsx from 'clsx'\nimport { useSaveDelay } from '../../hooks/useSaveDelay'\nimport { noop } from '../../util/noop'\nimport type { LabelProps } from './Label'\nimport { Label } from './Label'\n\nexport type InputProps = {\n /\n used for the label's `for` attribute\n /\n label?: Omit<LabelProps, 'id'>,\n /\n Callback for when the input's value changes\n * This is pretty much required but made optional for the rare cases where it actually isn't need such as when used with disabled\n * That could be enforced through a union type but that seems a bit overkill\n * @default noop\n /\n onChangeText?: (text: string) => void,\n className?: string,\n onEditCompleted?: (text: string) => void,\n expanded?: boolean,\n containerClassName?: string,\n} & Omit<InputHTMLAttributes<HTMLInputElement>, 'label'>\n\n/\n A Component for inputting text or other information\n \n Its state is managed must be managed by the parent\n /\nconst Input = ({\n id,\n type = 'text',\n value,\n label,\n onChange = noop,\n onChangeText = noop,\n onEditCompleted,\n className = '',\n expanded = true,\n autoFocus,\n onBlur,\n containerClassName,\n ...restProps\n }: InputProps) => {\n const {\n restartTimer,\n clearUpdateTimer\n } = useSaveDelay(() => undefined, 3000)\n const ref = useRef<HTMLInputElement>(null)\n\n useEffect(() => {\n if(autoFocus) {\n ref.current?.focus()\n }\n }, [autoFocus])\n\n return (\n <div className={clsx({ 'w-full': expanded }, containerClassName)}>\n {label && <Label {...label} htmlFor={id} className={clsx('mb-1', label.className)}/>}\n <input\n ref={ref}\n value={value}\n id={id}\n type={type}\n className={className}\n onBlur={event => {\n if (onBlur) {\n onBlur(event)\n }\n if (onEditCompleted) {\n onEditCompleted(event.target.value)\n clearUpdateTimer()\n }\n }}\n onChange={e => {\n const value = e.target.value\n if (onEditCompleted) {\n restartTimer(() => {\n onEditCompleted(value)\n clearUpdateTimer()\n })\n }\n onChange(e)\n onChangeText(value)\n }}\n {...restProps}\n />\n </div>\n )\n}\n\ntype InputUncontrolledProps = Omit<InputProps, 'value'> & {\n /\n @default ''\n /\n defaultValue?: string,\n}\n\n/\n A Component for inputting text or other information\n \n Its state is managed by the component itself\n /\nconst InputUncontrolled = ({\n defaultValue = '',\n onChangeText = noop,\n ...props\n }: InputUncontrolledProps) => {\n const [value, setValue] = useState(defaultValue)\n\n return (\n <Input\n {...props}\n value={value}\n onChangeText={text => {\n setValue(text)\n onChangeText(text)\n }}\n />\n )\n}\n\nexport type FormInputProps = InputHTMLAttributes<HTMLInputElement> & {\n id: string,\n labelText?: string,\n errorText?: string,\n labelClassName?: string,\n errorClassName?: string,\n containerClassName?: string,\n}\n\nconst FormInput = forwardRef<HTMLInputElement, FormInputProps>(function FormInput({\n id,\n labelText,\n errorText,\n className,\n labelClassName,\n errorClassName,\n containerClassName,\n required,\n ...restProps\n }, ref) {\n const input = (\n <input\n ref={ref}\n id={id}\n {...restProps}\n className={clsx(\n {\n 'focus:border-primary focus:ring-primary': !errorText,\n 'focus:border-negative focus:ring-negative text-negative': !!errorText,\n },\n className\n )}\n />\n )\n\n return (\n <div className={clsx('flex flex-col gap-y-1', containerClassName)}>\n {labelText && (\n <label htmlFor={id} className={clsx('textstyle-label-md', labelClassName)}>\n {labelText}\n {required && <span className=\"text-primary font-bold\"></span>}\n </label>\n )}\n {input}\n {errorText && <label htmlFor={id} className={clsx('text-negative', errorClassName)}>{errorText}</label>}\n </div>\n )\n})\n\nexport {\n InputUncontrolled,\n Input,\n FormInput\n}\n","import { useEffect, useState } from 'react'\n\nexport function useSaveDelay(setNotificationStatus: (isShowing: boolean) => void, delay: number) {\n const [updateTimer, setUpdateTimer] = useState<NodeJS.Timeout \| undefined>(undefined)\n const [notificationTimer, setNotificationTimer] = useState<NodeJS.Timeout \| undefined>(undefined)\n\n const restartTimer = (onSave: () => void) => {\n clearTimeout(updateTimer)\n setUpdateTimer(setTimeout(() => {\n onSave()\n setNotificationStatus(true)\n // Show Saved Notification for fade animation duration\n clearTimeout(notificationTimer)\n setNotificationTimer(setTimeout(() => {\n setNotificationStatus(false)\n clearTimeout(notificationTimer)\n }, delay))\n clearTimeout(updateTimer)\n }, delay))\n }\n\n const clearUpdateTimer = (hasSaved = true) => {\n clearTimeout(updateTimer)\n if (hasSaved) {\n setNotificationStatus(true)\n clearTimeout(notificationTimer)\n setNotificationTimer(setTimeout(() => {\n setNotificationStatus(false)\n clearTimeout(notificationTimer)\n }, delay))\n } else {\n setNotificationStatus(false)\n }\n }\n\n useEffect(() => {\n return () => {\n clearTimeout(updateTimer)\n clearTimeout(notificationTimer)\n }\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return { restartTimer, clearUpdateTimer }\n}","export const noop = () => undefined\n","import type { ButtonHTMLAttributes, PropsWithChildren, ReactNode } from 'react'\nimport clsx from 'clsx'\n\n\nexport const ButtonColorUtil = {\n solid: ['primary', 'secondary', 'tertiary', 'positive', 'warning', 'negative', 'neutral'] as const,\n text: ['primary', 'negative', 'neutral'] as const,\n outline: ['primary'] as const,\n}\n\n\n/*\n The allowed colors for the SolidButton and IconButton\n /\nexport type SolidButtonColor = typeof ButtonColorUtil.solid[number]\n/\n The allowed colors for the OutlineButton\n /\nexport type OutlineButtonColor = typeof ButtonColorUtil.outline[number]\n/\n The allowed colors for the TextButton\n /\nexport type TextButtonColor = typeof ButtonColorUtil.text[number]\n\n/\n The different sizes for a button\n /\ntype ButtonSizes = 'small' \| 'medium' \| 'large'\n\n/\n The shard properties between all button types\n /\nexport type ButtonProps = PropsWithChildren<{\n /\n @default 'medium'\n /\n size?: ButtonSizes,\n}> & ButtonHTMLAttributes<Element>\n\nconst paddingMapping: Record<ButtonSizes, string> = {\n small: 'btn-sm',\n medium: 'btn-md',\n large: 'btn-lg'\n}\n\nconst iconPaddingMapping: Record<ButtonSizes, string> = {\n small: 'icon-btn-sm',\n medium: 'icon-btn-md',\n large: 'icon-btn-lg'\n}\n\nexport const ButtonUtil = {\n paddingMapping,\n iconPaddingMapping\n}\n\ntype ButtonWithIconsProps = ButtonProps & {\n startIcon?: ReactNode,\n endIcon?: ReactNode,\n}\n\nexport type SolidButtonProps = ButtonWithIconsProps & {\n color?: SolidButtonColor,\n}\n\nexport type OutlineButtonProps = ButtonWithIconsProps & {\n color?: OutlineButtonColor,\n}\n\nexport type TextButtonProps = ButtonWithIconsProps & {\n color?: TextButtonColor,\n}\n\nexport type IconButtonProps = ButtonProps & {\n color?: SolidButtonColor,\n}\n\n/\n A button with a solid background and different sizes\n /\nconst SolidButton = ({\n children,\n disabled = false,\n color = 'primary',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n className,\n ...restProps\n }: SolidButtonProps) => {\n const colorClasses = {\n primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n neutral: 'bg-button-solid-neutral-background text-button-solid-neutral-text',\n }[color]\n\n const iconColorClasses = {\n primary: 'text-button-solid-primary-icon',\n secondary: 'text-button-solid-secondary-icon',\n tertiary: 'text-button-solid-tertiary-icon',\n positive: 'text-button-solid-positive-icon',\n warning: 'text-button-solid-warning-icon',\n negative: 'text-button-solid-negative-icon',\n neutral: 'text-button-solid-neutral-icon',\n }[color]\n\n return (\n <button\n onClick={disabled ? undefined : onClick}\n disabled={disabled \|\| onClick === undefined}\n className={clsx(\n {\n 'text-disabled-text bg-disabled-background cursor-not-allowed': disabled,\n [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n },\n ButtonUtil.paddingMapping[size],\n className\n )}\n {...restProps}\n >\n {startIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {startIcon}\n </span>\n )}\n {children}\n {endIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {endIcon}\n </span>\n )}\n </button>\n )\n}\n\n/\n A button with an outline border and different sizes\n /\nconst OutlineButton = ({\n children,\n disabled = false,\n color = 'primary',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n className,\n ...restProps\n }: OutlineButtonProps) => {\n const colorClasses = {\n primary: 'bg-transparent border-2 border-button-outline-primary-text text-button-outline-primary-text',\n }[color]\n\n const iconColorClasses = {\n primary: 'text-button-outline-primary-icon',\n }[color]\n return (\n <button\n onClick={disabled ? undefined : onClick}\n disabled={disabled \|\| onClick === undefined}\n className={clsx(\n {\n 'text-disabled-text border-disabled-outline cursor-not-allowed': disabled,\n [clsx(colorClasses, 'hover:brightness-80')]: !disabled,\n },\n ButtonUtil.paddingMapping[size],\n className\n )}\n {...restProps}\n >\n {startIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {startIcon}\n </span>\n )}\n {children}\n {endIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {endIcon}\n </span>\n )}\n </button>\n )\n}\n\n/\n A text that is a button that can have different sizes\n /\nconst TextButton = ({\n children,\n disabled = false,\n color = 'neutral',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n className,\n ...restProps\n }: TextButtonProps) => {\n const colorClasses = {\n primary: 'bg-transparent text-button-text-primary-text',\n negative: 'bg-transparent text-button-text-negative-text',\n neutral: 'bg-transparent text-button-text-neutral-text',\n }[color]\n\n const iconColorClasses = {\n primary: 'text-button-text-primary-icon',\n negative: 'text-button-text-negative-icon',\n neutral: 'text-button-text-neutral-icon',\n }[color]\n return (\n <button\n onClick={disabled ? undefined : onClick}\n disabled={disabled \|\| onClick === undefined}\n className={clsx(\n {\n 'text-disabled-text cursor-not-allowed': disabled,\n [clsx(colorClasses, 'hover:bg-button-text-hover-background rounded-full')]: !disabled,\n },\n ButtonUtil.paddingMapping[size],\n className\n )}\n {...restProps}\n >\n {startIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {startIcon}\n </span>\n )}\n {children}\n {endIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {endIcon}\n </span>\n )}\n </button>\n )\n}\n\n\n/\n A button for icons with a solid background and different sizes\n /\nconst IconButton = ({\n children,\n disabled = false,\n color = 'primary',\n size = 'medium',\n onClick,\n className,\n ...restProps\n }: IconButtonProps) => {\n const colorClasses = {\n primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n neutral: 'bg-button-solid-neutral-background text-button-solid-neutral-text',\n }[color]\n\n return (\n <button\n onClick={disabled ? undefined : onClick}\n disabled={disabled \|\| onClick === undefined}\n className={clsx(\n {\n 'text-disabled-text bg-disabled-background cursor-not-allowed': disabled,\n [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n },\n ButtonUtil.iconPaddingMapping[size],\n className\n )}\n {...restProps}\n >\n {children}\n </button>\n )\n}\n\nexport { SolidButton, OutlineButton, TextButton, IconButton }\n","import { useEffect, useMemo, useState } from 'react'\nimport { MultiSearchWithMapping } from '../util/simpleSearch'\n\nexport type UseSearchProps<T> = {\n list: T[],\n searchMapping: (item: T) => string[],\n initialSearch?: string,\n}\n\nexport const useSearch = <T>({\n list,\n initialSearch,\n searchMapping,\n }: UseSearchProps<T>) => {\n const [items, setItems] = useState<T[]>(list)\n const [search, setSearch] = useState<string>(initialSearch)\n\n useEffect(() => {\n setItems(list)\n }, [list])\n\n const result: T[] = useMemo(\n () => MultiSearchWithMapping(search, items, searchMapping),\n [search, items, searchMapping]\n )\n\n return {\n result,\n hasResult: result.length > 0,\n allItems: items,\n setItems,\n search,\n setSearch,\n }\n}","/\n Finds all values matching the search values by first mapping the values to a string array and then checking each entry for matches.\n * Returns the list of all matches.\n \n @param search The list of search strings e.g. `[name, type]`\n \n @param objects The list of objects to be searched in\n \n @param mapping The mapping of objects to the string properties they fulfil\n \n @return The list of objects that match all search strings\n /\nexport const MultiSubjectSearchWithMapping = <T>(search: string[], objects: T[], mapping: (value: T) => (string \| undefined)[]) => {\n return objects.filter(object => {\n const mappedSearchKeywords = mapping(object).map(value => value ? value.toLowerCase().trim() : undefined)\n return search.every(searchValue => !!mappedSearchKeywords.find(value => !!value && value.includes(searchValue.toLowerCase().trim())))\n })\n}\n\n/\n Finds all values matching the search value by first mapping the values to a string array and then checking each entry for matches.\n * Returns the list of all matches.\n \n @param search The search string e.g `name`\n \n @param objects The list of objects to be searched in\n \n @param mapping The mapping of objects to the string properties they fulfil, if undefined it is always fulfilled\n \n @return The list of objects that match the search string\n /\nexport const MultiSearchWithMapping = <T>(search: string, objects: T[], mapping: (value: T) => (string[] \| undefined)) => {\n return objects.filter(object => {\n const mappedSearchKeywords = mapping(object)?.map(value => value.toLowerCase().trim())\n if(!mappedSearchKeywords) {\n return true\n }\n return !!mappedSearchKeywords.find(value => value.includes(search.toLowerCase().trim()))\n })\n}\n\n/\n Finds all values matching the search value by first mapping the values to a string and returns the list of all matches.\n \n @param search The search string e.g `name`\n \n @param objects The list of objects to be searched in\n \n @param mapping The mapping of objects to a string that is compared to the search\n \n @return The list of objects that match the search string\n /\nexport const SimpleSearchWithMapping = <T>(search: string, objects: T[], mapping: (value: T) => string) => {\n return MultiSearchWithMapping(search, objects, value => [mapping(value)])\n}\n\n/\n Finds all values matching the search value and returns the list of all matches.\n \n @param search The search string e.g `name`\n \n @param objects The list of objects to be searched in\n \n @return The list of objects that match the search string\n /\nexport const SimpleSearch = (search: string, objects: string[]) => {\n return SimpleSearchWithMapping(search, objects, value => value)\n}\n","import type { Translation } from '../useTranslation'\n\nexport type FormTranslationType = {\n all: string,\n back: string,\n cancel: string,\n change: string,\n clear: string,\n close: string,\n confirm: string,\n decline: string,\n delete: string,\n discard: string,\n discardChanges: string,\n done: string,\n edit: string,\n enterText: string,\n error: string,\n exit: string,\n fieldRequiredError: string,\n invalidEmailError: string,\n less: string,\n loading: string,\n maxLengthError: string,\n minLengthError: string,\n more: string,\n next: string,\n no: string,\n none: string,\n of: string,\n optional: string,\n pleaseWait: string,\n previous: string,\n remove: string,\n required: string,\n reset: string,\n save: string,\n search: string,\n select: string,\n selectOption: string,\n show: string,\n showMore: string,\n showLess: string,\n submit: string,\n success: string,\n unsavedChanges: string,\n unsavedChangesSaveQuestion: string,\n update: string,\n yes: string,\n}\n\nexport const formTranslation: Translation<FormTranslationType> = {\n en: {\n all: 'All',\n back: 'Back',\n cancel: 'Cancel',\n change: 'Change',\n clear: 'Clear',\n close: 'Close',\n confirm: 'Confirm',\n decline: 'Decline',\n delete: 'Delete',\n discard: 'Discard',\n discardChanges: 'Discard Changes',\n done: 'Done',\n edit: 'Edit',\n enterText: 'Enter text here',\n error: 'Error',\n exit: 'Exit',\n fieldRequiredError: 'This field is required.',\n invalidEmailError: 'Please enter a valid email address.',\n less: 'Less',\n loading: 'Loading',\n maxLengthError: 'Maximum length exceeded.',\n minLengthError: 'Minimum length not met.',\n more: 'More',\n next: 'Next',\n no: 'No',\n none: 'None',\n of: 'of',\n optional: 'Optional',\n pleaseWait: 'Please wait...',\n previous: 'Previous',\n remove: 'Remove',\n required: 'Required',\n reset: 'Reset',\n save: 'Save',\n search: 'Search',\n select: 'Select',\n selectOption: 'Select an option',\n show: 'Show',\n showMore: 'Show more',\n showLess: 'Show less',\n submit: 'Submit',\n success: 'Success',\n update: 'Update',\n unsavedChanges: 'Unsaved Changes',\n unsavedChangesSaveQuestion: 'Do you want to save your changes?',\n yes: 'Yes',\n },\n de: {\n all: 'Alle',\n back: 'Zurück',\n cancel: 'Abbrechen',\n change: 'Ändern',\n clear: 'Löschen',\n close: 'Schließen',\n confirm: 'Bestätigen',\n decline: 'Ablehnen',\n delete: 'Löschen',\n discard: 'Verwerfen',\n discardChanges: 'Änderungen Verwerfen',\n done: 'Fertig',\n edit: 'Bearbeiten',\n enterText: 'Text hier eingeben',\n error: 'Fehler',\n exit: 'Beenden',\n fieldRequiredError: 'Dieses Feld ist erforderlich.',\n invalidEmailError: 'Bitte geben Sie eine gültige E-Mail-Adresse ein.',\n less: 'Weniger',\n loading: 'Lädt',\n maxLengthError: 'Maximale Länge überschritten.',\n minLengthError: 'Mindestlänge nicht erreicht.',\n more: 'Mehr',\n next: 'Weiter',\n no: 'Nein',\n none: 'Nichts',\n of: 'von',\n optional: 'Optional',\n pleaseWait: 'Bitte warten...',\n previous: 'Vorherige',\n remove: 'Entfernen',\n required: 'Erforderlich',\n reset: 'Zurücksetzen',\n save: 'Speichern',\n search: 'Suche',\n select: 'Select',\n selectOption: 'Option auswählen',\n show: 'Anzeigen',\n showMore: 'Mehr anzeigen',\n showLess: 'Weniger anzeigen',\n submit: 'Abschicken',\n success: 'Erfolg',\n update: 'Update',\n unsavedChanges: 'Ungespeicherte Änderungen',\n unsavedChangesSaveQuestion: 'Möchtest du die Änderungen speichern?',\n yes: 'Ja',\n }\n}\n","import type { ReactNode } from 'react'\nimport clsx from 'clsx'\nimport { Check } from 'lucide-react'\n\nexport type TileProps = {\n title: { value: ReactNode, className?: string },\n description?: { value: ReactNode, className?: string },\n onClick?: () => void,\n isDisabled?: boolean,\n isSelected?: boolean,\n prefix?: ReactNode,\n suffix?: ReactNode,\n className?: string,\n normalClassName?: string,\n selectedClassName?: string,\n disabledClassName?: string,\n}\n\n/\n A component for creating a tile similar to the flutter ListTile\n */\nexport const Tile = ({\n title,\n description,\n onClick,\n isSelected = false,\n isDisabled = false,\n prefix,\n suffix,\n normalClassName = 'hover:bg-primary/40 cursor-pointer',\n selectedClassName = ' bg-primary/20',\n disabledClassName = 'text-disabled-text bg-disabled-background cursor-not-allowed',\n className\n }: TileProps) => {\n return (\n <div\n className={clsx(\n 'row gap-x-2 w-full items-center',\n {\n [normalClassName]: !!onClick && !isDisabled,\n [selectedClassName]: isSelected && !isDisabled,\n [disabledClassName]: isDisabled,\n },\n className\n )}\n onClick={isDisabled ? undefined : onClick}\n >\n {prefix}\n <div className=\"col gap-y-0 w-full\">\n <h4 className={clsx(title.className ?? 'textstyle-title-normal')}>{title.value}</h4>\n {!!description &&\n <span className={clsx(description.className ?? 'textstyle-description')}>{description.value}</span>}\n </div>\n {suffix ?? (isSelected ? (<Check size={24}/>) : undefined)}\n </div>\n )\n}\n","import type { RefObject } from 'react'\nimport { useEffect } from 'react'\n\nexport const useOutsideClick = <Ts extends RefObject<HTMLElement>[]>(refs: Ts, handler: () => void) => {\n useEffect(() => {\n const listener = (event: MouseEvent \| TouchEvent) => {\n // returning means not \"not clicking outside\"\n\n // if no target exists, return\n if (event.target === null) return\n // if the target is a ref's element or descendent thereof, return\n if (refs.some((ref) => !ref.current \|\| ref.current.contains(event.target as Node))) {\n return\n }\n\n handler()\n }\n document.addEventListener('mousedown', listener)\n document.addEventListener('touchstart', listener)\n return () => {\n document.removeEventListener('mousedown', listener)\n document.removeEventListener('touchstart', listener)\n }\n }, [refs, handler])\n}\n"],"mappings":"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","names":["useEffect","useRef","useState","clsx","clsx","useEffect","useState","jsx","useEffect","useState","clsx","useEffect","useState","jsx","useEffect","clsx","value","FormInput","jsx","clsx","clsx","jsx","jsxs","jsx","clsx","useEffect","useState","useState","useEffect","jsx","jsxs","clsx","clsx","jsx","jsxs","useEffect","jsx","jsxs","useRef","useState","clsx","useEffect","options","value"]}

package/dist/css/globals.css CHANGED Viewed

@@ -12,7 +12,6 @@
     --color-red-300: #F4A3A7;
     --color-red-400: #E3798A;
     --color-red-500: #DC576D;
-    --color-red-700: oklch(50.5% 0.213 27.518);
     --color-yellow-200: oklch(94.5% 0.129 101.54);
     --color-yellow-500: oklch(79.5% 0.184 86.047);
     --color-green-200: oklch(92.5% 0.084 155.995);
@@ -614,6 +613,12 @@
   .max-w-64 {
     max-width: calc(var(--spacing) * 64);
   }
+  .max-w-96 {
+    max-width: calc(var(--spacing) * 96);
+  }
+  .max-w-128 {
+    max-width: calc(var(--spacing) * 128);
+  }
   .max-w-xs {
     max-width: var(--container-xs);
   }
@@ -1882,7 +1887,7 @@
   &:where([data-theme=dark], [data-theme=dark] *) {
     --color-primary: var(--color-purple-400);
     --color-positive: var(--color-green-700);
-    --color-negative: var(--color-red-700);
+    --color-negative: var(--color-red-500);
     --color-text-default: var(--color-text-light);
     --color-surface: #333333;
     --color-on-surface: var(--color-text-light);

package/dist/css/uncompiled/globals.css CHANGED Viewed

@@ -391,7 +391,7 @@
      */
     --color-primary: var(--color-purple-400);
     --color-positive: var(--color-green-700);
-    --color-negative: var(--color-red-700);
+    --color-negative: var(--color-red-500);
     /*
      * Semantic Colors

package/dist/index.d.mts CHANGED Viewed

@@ -62,7 +62,7 @@ export { useOutsideClick } from './hooks/useOutsideClick.mjs';
 export { useSaveDelay } from './hooks/useSaveDelay.mjs';
 export { UseSearchProps, useSearch } from './hooks/useSearch.mjs';
 export { LanguageContext, LanguageContextValue, LanguageProvider, useLanguage, useLocale } from './localization/LanguageProvider.mjs';
-export { PropsForTranslation, Translation, TranslationPlural, TranslationType, useTranslation } from './localization/useTranslation.mjs';
+export { PropsForTranslation, Translation, TranslationPlural, TranslationPluralCount, TranslationType, useTranslation } from './localization/useTranslation.mjs';
 export { Language, LanguageUtil } from './localization/util.mjs';
 export { FormTranslationType, formTranslation } from './localization/defaults/form.mjs';
 export { MonthTranslationType, TimeTranslationType, monthTranslation, timeTranslation } from './localization/defaults/time.mjs';

package/dist/index.d.ts CHANGED Viewed

@@ -62,7 +62,7 @@ export { useOutsideClick } from './hooks/useOutsideClick.js';
 export { useSaveDelay } from './hooks/useSaveDelay.js';
 export { UseSearchProps, useSearch } from './hooks/useSearch.js';
 export { LanguageContext, LanguageContextValue, LanguageProvider, useLanguage, useLocale } from './localization/LanguageProvider.js';
-export { PropsForTranslation, Translation, TranslationPlural, TranslationType, useTranslation } from './localization/useTranslation.js';
+export { PropsForTranslation, Translation, TranslationPlural, TranslationPluralCount, TranslationType, useTranslation } from './localization/useTranslation.js';
 export { Language, LanguageUtil } from './localization/util.js';
 export { FormTranslationType, formTranslation } from './localization/defaults/form.js';
 export { MonthTranslationType, TimeTranslationType, monthTranslation, timeTranslation } from './localization/defaults/time.js';

package/dist/index.js CHANGED Viewed

@@ -2938,6 +2938,7 @@ __export(index_exports, {
   ToggleableInput: () => ToggleableInput,
   ToggleableInputUncontrolled: () => ToggleableInputUncontrolled,
   Tooltip: () => Tooltip,
+  TranslationPluralCount: () => TranslationPluralCount,
   VerticalDivider: () => VerticalDivider,
   YearMonthPicker: () => YearMonthPicker,
   YearMonthPickerUncontrolled: () => YearMonthPickerUncontrolled,
@@ -3072,12 +3073,12 @@ var Tile = ({
       ),
       onClick: isDisabled ? void 0 : onClick,
       children: [
-        prefix ?? (isSelected ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Check, { size: 24 }) : void 0),
+        prefix,
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "col gap-y-0 w-full", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { className: (0, import_clsx.default)(title.className ?? "textstyle-title-normal"), children: title.value }),
           !!description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_clsx.default)(description.className ?? "textstyle-description"), children: description.value })
         ] }),
-        suffix
+        suffix ?? (isSelected ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Check, { size: 24 }) : void 0)
       ]
     }
   );
@@ -3304,6 +3305,14 @@ var LanguageProvider = ({ initialLanguage, children }) => {
 };
 // src/localization/useTranslation.ts
+var TranslationPluralCount = {
+  zero: 0,
+  one: 1,
+  two: 2,
+  few: 3,
+  many: 11,
+  other: -1
+};
 var useTranslation = (translations, overwriteTranslation = {}) => {
   const { language: languageProp, translation: overwrite } = overwriteTranslation;
   const { language: inferredLanguage } = useLanguage();
@@ -3327,15 +3336,15 @@ var useTranslation = (translations, overwriteTranslation = {}) => {
         }
         let forProcessing;
         if (typeof value !== "string") {
-          if (count <= 0 && value?.zero) {
+          if (count === TranslationPluralCount.zero && value?.zero) {
             forProcessing = value.zero;
-          } else if (count === 1 && value?.one) {
+          } else if (count === TranslationPluralCount.one && value?.one) {
             forProcessing = value.one;
-          } else if (count === 2 && value?.two) {
+          } else if (count === TranslationPluralCount.two && value?.two) {
             forProcessing = value.two;
-          } else if (count <= 10 && value?.few) {
+          } else if (TranslationPluralCount.few <= count && count < TranslationPluralCount.many && value?.few) {
             forProcessing = value.few;
-          } else if (count > 10 && value?.many) {
+          } else if (count > TranslationPluralCount.many && value?.many) {
             forProcessing = value.many;
           } else {
             forProcessing = value.other;
@@ -3344,7 +3353,7 @@ var useTranslation = (translations, overwriteTranslation = {}) => {
           forProcessing = value;
         }
         forProcessing = forProcessing.replace(/\{\{(\w+)}}/g, (_, placeholder) => {
-          return replacements[placeholder] ?? `{{${placeholder}}}`;
+          return replacements[placeholder] ?? `{{key:${placeholder}}}`;
         });
         return forProcessing;
       }
@@ -7262,7 +7271,7 @@ var Select = ({
         "div",
         {
           ref: menuRef,
-          className: "absolute w-full z-10 rounded-lg mt-0.5 bg-menu-background text-menu-text shadow-around-md max-h-[500px] overflow-y-auto p-2",
+          className: "absolute w-full z-10 rounded-lg mt-0.5 bg-menu-background text-menu-text shadow-around-lg max-h-[500px] overflow-y-auto p-2",
           children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             SearchableList,
             {
@@ -7359,7 +7368,7 @@ var LanguageModal = ({
           {
             className: "mt-2",
             value: language,
-            options: LanguageUtil.languages.map((language2) => ({ label: translation[language2], value: language2 })),
+            options: LanguageUtil.languages.map((language2) => ({ label: translation(language2), value: language2 })),
             onChange: (language2) => setLanguage(language2)
           }
         ),
@@ -7448,7 +7457,7 @@ var ThemeModal = ({
           {
             className: "mt-2",
             value: theme,
-            options: ThemeUtil.themes.map((theme2) => ({ label: translation[theme2], value: theme2 })),
+            options: ThemeUtil.themes.map((theme2) => ({ label: translation(theme2), value: theme2 })),
             onChange: (theme2) => setTheme(theme2)
           }
         ),
@@ -7669,7 +7678,7 @@ var MultiSelect = ({
         "div",
         {
           ref: menuRef,
-          className: "absolute w-full z-10 rounded-lg mt-0.5 bg-menu-background text-menu-text shadow-around-md max-h-[500px] overflow-y-auto p-2",
+          className: "absolute w-full z-10 rounded-lg mt-0.5 bg-menu-background text-menu-text shadow-around-lg max-h-[500px] overflow-y-auto p-2",
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
               SearchableList,
@@ -8208,7 +8217,7 @@ var Menu = ({
             ref: menuRef,
             onClick: (e) => e.stopPropagation(),
             className: (0, import_clsx43.default)(
-              "absolute top-full mt-1 min-w-40 rounded-lg bg-menu-background text-menu-text shadow-around-md z-10",
+              "absolute top-full mt-1 min-w-40 rounded-lg bg-menu-background text-menu-text shadow-around-lg z-10",
               {
                 "top-0": alignment[0] === "t",
                 "bottom-0": alignment[0] === "b",
@@ -8668,6 +8677,7 @@ var filterNews = (localizedNews, requiredKeys) => {
   ToggleableInput,
   ToggleableInputUncontrolled,
   Tooltip,
+  TranslationPluralCount,
   VerticalDivider,
   YearMonthPicker,
   YearMonthPickerUncontrolled,