UNPKG

@helpwave/hightide

Version:

helpwave's component and theming library

helpwave.de

1 lines • 350 kB
1
{"version":3,"sources":["../src/coloring/shading.ts","../src/coloring/types.ts","../src/components/Avatar.tsx","../src/components/AvatarGroup.tsx","../src/components/BreadCrumb.tsx","../src/components/Button.tsx","../src/components/ChipList.tsx","../src/components/Circle.tsx","../src/components/ErrorComponent.tsx","../src/hooks/useLanguage.tsx","../src/hooks/useLocalStorage.tsx","../src/util/storage.ts","../src/hooks/useTranslation.ts","../src/components/Expandable.tsx","../src/components/HelpwaveBadge.tsx","../src/components/icons/Helpwave.tsx","../src/components/layout/Tile.tsx","../src/components/HideableContentSection.tsx","../src/components/InputGroup.tsx","../src/util/noop.ts","../src/components/LoadingAndErrorComponent.tsx","../src/components/LoadingAnimation.tsx","../src/components/LoadingButton.tsx","../src/components/MarkdownInterpreter.tsx","../src/components/Pagination.tsx","../src/components/Profile.tsx","../src/components/ProgressIndicator.tsx","../src/components/Ring.tsx","../src/components/SearchableList.tsx","../src/util/simpleSearch.ts","../src/components/user-input/Input.tsx","../src/hooks/useSaveDelay.ts","../src/components/user-input/Label.tsx","../src/components/SortButton.tsx","../src/components/StepperBar.tsx","../src/util/array.ts","../src/components/Table.tsx","../src/components/user-input/Checkbox.tsx","../src/components/TechRadar.tsx","../src/components/TextImage.tsx","../src/components/TimeDisplay.tsx","../src/hooks/useHoverState.ts","../src/components/Tooltip.tsx","../src/components/VerticalDivider.tsx","../src/components/date/DatePicker.tsx","../src/util/date.ts","../src/components/date/YearMonthPicker.tsx","../src/components/date/DayPicker.tsx","../src/components/date/TimePicker.tsx","../src/components/icons/Tag.tsx","../src/components/layout/Carousel.tsx","../src/util/math.ts","../src/util/easeFunctions.ts","../src/util/loopingArray.ts","../src/components/layout/DividerInserter.tsx","../src/components/layout/FAQSection.tsx","../src/components/modals/Modal.tsx","../src/components/modals/ModalRegister.tsx","../src/components/modals/ConfirmDialog.tsx","../src/components/modals/DiscardChangesDialog.tsx","../src/components/modals/InputModal.tsx","../src/components/user-input/Select.tsx","../src/components/modals/LanguageModal.tsx","../src/components/properties/CheckboxProperty.tsx","../src/components/properties/PropertyBase.tsx","../src/components/properties/DateProperty.tsx","../src/components/properties/MultiSelectProperty.tsx","../src/components/user-input/MultiSelect.tsx","../src/components/user-input/Menu.tsx","../src/hooks/useOutsideClick.ts","../src/components/properties/NumberProperty.tsx","../src/components/properties/SelectProperty.tsx","../src/components/user-input/SearchableSelect.tsx","../src/components/properties/TextProperty.tsx","../src/components/user-input/Textarea.tsx","../src/components/user-input/DateAndTimePicker.tsx","../src/components/user-input/ScrollPicker.tsx","../src/components/user-input/ToggleableInput.tsx","../src/hooks/useTheme.tsx","../src/util/builder.ts","../src/util/emailValidation.ts","../src/util/news.ts"],"sourcesContent":["import tinycolor from 'tinycolor2'\nimport type { ShadedColors } from './types'\nimport { shadingColorValues } from './types'\n\n// Function to generate a full shading of several colors\nexport const generateShadingColors = (partialShading: Omit<Partial<ShadedColors>, '0' | '1000'>): ShadedColors => {\n const shading: ShadedColors = {\n 0: '#FFFFFF',\n 1000: '#000000'\n } as ShadedColors\n\n let index = 1\n while (index < shadingColorValues.length - 1) {\n const previous = shadingColorValues[index - 1]!\n const current = shadingColorValues[index]!\n\n if (partialShading[current] !== undefined) {\n shading[current] = partialShading[current]\n index++\n continue\n }\n\n let j: number = index + 1\n while (j < shadingColorValues.length) {\n if (partialShading[shadingColorValues[j]!] !== undefined) {\n break\n }\n j++\n }\n if (j === shadingColorValues.length) {\n j = shadingColorValues.length - 1\n }\n\n const nextFound = shadingColorValues[j]!\n const interval = nextFound - previous\n for (let k = index; k < j; k++) {\n const current = shadingColorValues[k]!\n const previousValue = partialShading[previous] ?? shading[previous]\n const nextValue = partialShading[nextFound] ?? shading[nextFound]\n shading[current] = tinycolor.mix(tinycolor(previousValue), tinycolor(nextValue), (current - previous) / interval * 100).toHexString()\n }\n index = j\n }\n\n return shading\n}\n","export const shadingColorValues = [0, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1000] as const\nexport type ColorShadingValue = typeof shadingColorValues[number]\nexport type ShadedColors = Record<ColorShadingValue, string>\n\nexport type ColoringStyle = 'background' | 'tonal' | 'tonal-opaque' | 'text' | 'text-border'\nexport type ColorMode = 'light' | 'dark'\n\nexport type Coloring = {\n color: '',\n style?: ColoringStyle,\n mode?: ColorMode,\n hover?: boolean,\n}\n","import Image from 'next/image'\nimport clsx from 'clsx'\n\nexport const avtarSizeList = ['tiny', 'small', 'medium', 'large'] as const\nexport type AvatarSize = typeof avtarSizeList[number]\nexport const avatarSizeMapping: Record<AvatarSize, number> = {\n tiny: 24,\n small: 32,\n medium: 48,\n large: 64\n}\n\nexport type AvatarProps = {\n avatarUrl: string,\n alt: string,\n size?: AvatarSize,\n className?: string,\n}\n\n/**\n * A component for showing a profile picture\n */\nconst Avatar = ({ avatarUrl, alt, size = 'medium', className = '' }: AvatarProps) => {\n // TODO remove later\n avatarUrl = 'https://cdn.helpwave.de/boringavatar.svg'\n\n const avtarSize = {\n tiny: 24,\n small: 32,\n medium: 48,\n large: 64,\n }[size]\n\n const style = {\n width: avtarSize + 'px',\n height: avtarSize + 'px',\n maxWidth: avtarSize + 'px',\n maxHeight: avtarSize + 'px',\n minWidth: avtarSize + 'px',\n minHeight: avtarSize + 'px',\n }\n\n return (\n // TODO transparent or white background later\n <div className={clsx(`rounded-full bg-primary`, className)} style={style}>\n <Image\n className=\"rounded-full border border-gray-200\"\n style={style}\n src={avatarUrl}\n alt={alt}\n width={avtarSize}\n height={avtarSize}\n />\n </div>\n )\n}\n\nexport { Avatar }\n","import type { AvatarProps, AvatarSize } from './Avatar'\nimport { Avatar, avatarSizeMapping } from './Avatar'\n\nexport type AvatarGroupProps = {\n avatars: Omit<AvatarProps, 'size'>[],\n maxShownProfiles?: number,\n size?: AvatarSize,\n}\n\n/**\n * A component for showing a group of Avatar's\n */\nexport const AvatarGroup = ({\n avatars,\n maxShownProfiles = 5,\n size = 'tiny'\n }: AvatarGroupProps) => {\n const displayedProfiles = avatars.length < maxShownProfiles ? avatars : avatars.slice(0, maxShownProfiles)\n const diameter = avatarSizeMapping[size]\n const stackingOverlap = 0.5 // given as a percentage\n const notDisplayedProfiles = avatars.length - maxShownProfiles\n const avatarGroupWidth = diameter * (stackingOverlap * (displayedProfiles.length - 1) + 1)\n return (\n <div className=\"row relative\" style={{ height: diameter + 'px' }}>\n <div style={{ width: avatarGroupWidth + 'px' }}>\n {displayedProfiles.map((avatar, index) => (\n <div\n key={index}\n className=\"absolute\"\n style={{ left: (index * diameter * stackingOverlap) + 'px', zIndex: maxShownProfiles - index }}\n >\n <Avatar avatarUrl={avatar.avatarUrl} alt={avatar.alt} size={size}/>\n </div>\n ))}\n </div>\n {\n notDisplayedProfiles > 0 && (\n <div\n className=\"truncate row items-center\"\n style={{ fontSize: (diameter / 2) + 'px', marginLeft: (1 + diameter / 16) + 'px' }}\n >\n <span>+ {notDisplayedProfiles}</span>\n </div>\n )\n }\n </div>\n )\n}\n","import Link from 'next/link'\nimport clsx from 'clsx'\n\nexport type Crumb = {\n display: string,\n link: string,\n}\n\ntype BreadCrumbProps = {\n crumbs: Crumb[],\n linkClassName?: string,\n containerClassName?: string,\n}\n\n/**\n * A component for showing a hierarchical link structure with an independent link on each element\n *\n * e.g. Organizations/Ward/<id>\n */\nexport const BreadCrumb = ({ crumbs, linkClassName, containerClassName }: BreadCrumbProps) => {\n const color = 'text-description'\n\n return (\n <div className={clsx('row', containerClassName)}>\n {crumbs.map((crumb, index) => (\n <div key={index}>\n <Link href={crumb.link} className={clsx(linkClassName, { [`${color} hover:brightness-60`]: index !== crumbs.length - 1 })}>\n {crumb.display}\n </Link>\n {index !== crumbs.length - 1 && <span className={clsx(`px-1`, color)}>/</span>}\n </div>\n ))}\n </div>\n )\n}\n","import type { PropsWithChildren, ButtonHTMLAttributes, ReactNode } from 'react'\nimport clsx from 'clsx'\n\nexport type SolidButtonColor = 'primary' | 'secondary' | 'tertiary' | 'positive' | 'warning'| 'negative'\nexport type OutlineButtonColor = 'primary'\nexport type TextButtonColor = 'negative' | 'neutral'\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\nexport const ButtonSizePaddings: Record<ButtonSizes, string> = {\n small: 'btn-sm',\n medium: 'btn-md',\n large: 'btn-lg'\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\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 }[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 }[color]\n\n return (\n <button\n onClick={disabled ? undefined : onClick}\n disabled={disabled || onClick === undefined}\n className={clsx(\n className,\n {\n 'text-disabled-text bg-disabled-background': disabled,\n [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n },\n ButtonSizePaddings[size]\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 className, {\n 'text-disabled-text border-disabled-outline)': disabled,\n [clsx(colorClasses, 'hover:brightness-80')]: !disabled,\n },\n ButtonSizePaddings[size]\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 negative: 'bg-transparent text-button-text-negative-text',\n neutral: 'bg-transparent text-button-text-neutral-text',\n }[color]\n\n const iconColorClasses = {\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 className, {\n 'text-disabled-text': disabled,\n [clsx(colorClasses, 'hover:bg-button-text-hover-background rounded-full')]: !disabled,\n },\n ButtonSizePaddings[size]\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// TODO Icon button\n\nexport { SolidButton, OutlineButton, TextButton }\n","import type { HTMLProps, PropsWithChildren, ReactNode } from 'react'\nimport clsx from 'clsx'\n\nexport type ChipColor = 'default' | 'dark'| 'red' | 'yellow' | 'green' | 'blue' | 'pink'\ntype ChipVariant = 'normal' | 'fullyRounded'\n\nexport type ChipProps = HTMLProps<HTMLDivElement> & PropsWithChildren<{\n color?: ChipColor,\n variant?: ChipVariant,\n trailingIcon?: ReactNode,\n}>\n\n/**\n * A component for displaying a single chip\n */\nexport const Chip = ({\n children,\n trailingIcon,\n color = 'default',\n variant = 'normal',\n className = '',\n ...restProps\n }: ChipProps) => {\n const colorMapping: string = {\n default: 'text-tag-default-text bg-tag-default-background',\n dark: 'text-tag-dark-text bg-tag-dark-background',\n red: 'text-tag-red-text bg-tag-red-background',\n yellow: 'text-tag-yellow-text bg-tag-yellow-background',\n green: 'text-tag-green-text bg-tag-green-background',\n blue: 'text-tag-blue-text bg-tag-blue-background',\n pink: 'text-tag-pink-text bg-tag-pink-background',\n }[color]\n\n const colorMappingIcon: string = {\n default: 'text-tag-default-icon',\n dark: 'text-tag-dark-icon',\n red: 'text-tag-red-icon',\n yellow: 'text-tag-yellow-icon',\n green: 'text-tag-green-icon',\n blue: 'text-tag-blue-icon',\n pink: 'text-tag-pink-icon',\n }[color]\n\n return (\n <div\n {...restProps}\n className={clsx(\n `row w-fit px-2 py-1`,\n colorMapping,\n {\n 'rounded-md': variant === 'normal',\n 'rounded-full': variant === 'fullyRounded',\n },\n className\n )}\n >\n {children}\n {trailingIcon && (<span className={colorMappingIcon}>{trailingIcon}</span>)}\n </div>\n )\n}\n\nexport type ChipListProps = {\n list: ChipProps[],\n className?: string,\n}\n\n/**\n * A component for displaying a list of chips\n */\nexport const ChipList = ({\n list,\n className = ''\n }: ChipListProps) => {\n return (\n <div className={clsx('flex flex-wrap gap-x-4 gap-y-2', className)}>\n {list.map((value, index) => (\n <Chip\n key={index}\n {...value}\n color={value.color ?? 'dark'}\n variant={value.variant ?? 'normal'}\n >\n {value.children}\n </Chip>\n ))}\n </div>\n )\n}\n","import type { HTMLAttributes } from 'react'\nimport clsx from 'clsx'\n\nexport type CircleProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'color'> & {\n radius: number,\n className?: string,\n}\n\nexport const Circle = ({\n radius = 20,\n className = 'bg-primary',\n style,\n ...restProps\n}: CircleProps) => {\n const size = radius * 2\n return (\n <div\n className={clsx(`rounded-full`, className)}\n style={{\n width: `${size}px`,\n height: `${size}px`,\n ...style,\n }}\n {...restProps}\n />\n )\n}\n","import { AlertOctagon } from 'lucide-react'\nimport type { Languages } from '../hooks/useLanguage'\nimport type { PropsForTranslation } from '../hooks/useTranslation'\nimport { useTranslation } from '../hooks/useTranslation'\nimport clsx from 'clsx'\n\ntype ErrorComponentTranslation = {\n errorOccurred: string,\n}\n\nconst defaultErrorComponentTranslation: Record<Languages, ErrorComponentTranslation> = {\n en: {\n errorOccurred: 'An error occurred'\n },\n de: {\n errorOccurred: 'Ein Fehler ist aufgetreten'\n }\n}\n\nexport type ErrorComponentProps = {\n errorText?: string,\n classname?: string,\n}\n\n/**\n * The Component to show when an error occurred\n */\nexport const ErrorComponent = ({\n overwriteTranslation,\n errorText,\n classname\n}: PropsForTranslation<ErrorComponentTranslation, ErrorComponentProps>) => {\n const translation = useTranslation(defaultErrorComponentTranslation, overwriteTranslation)\n return (\n <div className={clsx('col items-center justify-center gap-y-4 w-full h-24', classname)}>\n <AlertOctagon size={64} className=\"text-warning\"/>\n {errorText ?? `${translation.errorOccurred} :(`}\n </div>\n )\n}\n","import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport { useLocalStorage } from './useLocalStorage'\n\nexport const languages = ['en', 'de'] as const\nexport type Languages = typeof languages[number]\nexport const languagesLocalNames: Record<Languages, string> = {\n en: 'English',\n de: 'Deutsch',\n}\n\nexport const DEFAULT_LANGUAGE = 'en'\n\nexport type LanguageContextValue = {\n language: Languages,\n setLanguage: Dispatch<SetStateAction<Languages>>,\n}\n\nexport const LanguageContext = createContext<LanguageContextValue>({ language: DEFAULT_LANGUAGE, setLanguage: (v) => v })\n\nexport const useLanguage = () => useContext(LanguageContext)\n\nexport const useLocale = (overWriteLanguage?: Languages) => {\n const { language } = useLanguage()\n const mapping: Record<Languages, string> = {\n en: 'en-US',\n de: 'de-DE'\n }\n return mapping[overWriteLanguage ?? language]\n}\n\ntype ProvideLanguageProps = {\n initialLanguage?: Languages,\n}\n\nexport const ProvideLanguage = ({ initialLanguage, children }: PropsWithChildren<ProvideLanguageProps>) => {\n const [language, setLanguage] = useState<Languages>(initialLanguage ?? DEFAULT_LANGUAGE)\n const [storedLanguage, setStoredLanguage] = useLocalStorage<Languages>('language', initialLanguage ?? DEFAULT_LANGUAGE)\n\n useEffect(() => {\n if(language !== initialLanguage && initialLanguage){\n console.warn('LanguageProvider initial state changed: Prefer using useLanguages\\'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 languagesToTestAgainst = Object.values(languages)\n\n const matchingBrowserLanguages = window.navigator.languages\n .map(language => languagesToTestAgainst.find((test) => language === test || language.split('-')[0] === test))\n .filter(entry => entry !== undefined)\n\n if (matchingBrowserLanguages.length === 0) return\n\n const firstMatch = matchingBrowserLanguages[0] as Languages\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}\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 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 { Languages } from './useLanguage'\nimport { useLanguage } from './useLanguage'\n\nexport type Translation<T> = Record<Languages, T>\n\ntype OverwriteTranslationType<Translation extends Record<string, unknown>> = {\n language?: Languages,\n translation?: Partial<Record<Languages, Partial<Translation>>>,\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 Record<string, unknown>,\n Props = Record<string, never>\n> = Props & {\n overwriteTranslation?: OverwriteTranslationType<Translation>,\n};\n\nexport const useTranslation = <Translation extends Record<string, unknown>>(\n defaults: Record<Languages, Translation>,\n translationOverwrite: OverwriteTranslationType<Translation> = {}\n) : Translation => {\n const { language: languageProp, translation: overwrite } = translationOverwrite\n const { language: inferredLanguage } = useLanguage()\n const usedLanguage = languageProp ?? inferredLanguage\n let defaultValues: Translation = defaults[usedLanguage]\n if (overwrite && overwrite[usedLanguage]) {\n defaultValues = { ...defaultValues, ...overwrite[usedLanguage] }\n }\n return defaultValues\n}\n","import type { PropsWithChildren, ReactNode } from 'react'\nimport { forwardRef, useState } from 'react'\nimport { ChevronDown, ChevronUp } from 'lucide-react'\nimport clsx from 'clsx'\n\ntype IconBuilder = (expanded: boolean) => ReactNode\n\nexport type ExpandableProps = PropsWithChildren<{\n label: ReactNode,\n icon?: IconBuilder,\n initialExpansion?: boolean,\n /**\n * Whether the expansion should only happen when the header is clicked or on the entire component\n */\n clickOnlyOnHeader?: boolean,\n className?: string,\n headerClassName?: string,\n}>\n\nconst DefaultIcon: IconBuilder = (expanded) => expanded ?\n (<ChevronUp size={16} className=\"min-w-[16px]\"/>)\n : (<ChevronDown size={16} className=\"min-w-[16px]\"/>)\n\n/**\n * A Component for showing and hiding content\n */\nexport const Expandable = forwardRef<HTMLDivElement, ExpandableProps>(({\n children,\n label,\n icon,\n initialExpansion = false,\n clickOnlyOnHeader = true,\n className = '',\n headerClassName = ''\n }, ref) => {\n const [isExpanded, setIsExpanded] = useState(initialExpansion)\n icon ??= DefaultIcon\n\n return (\n <div\n ref={ref}\n className={clsx('col bg-surface text-on-surface group rounded-lg shadow-sm', { 'cursor-pointer': !clickOnlyOnHeader }, className)}\n onClick={() => !clickOnlyOnHeader && setIsExpanded(!isExpanded)}\n >\n <button\n className={clsx('btn-md rounded-lg justify-between items-center bg-surface text-on-surface', { 'group-hover:brightness-95': !isExpanded }, headerClassName)}\n onClick={() => clickOnlyOnHeader && setIsExpanded(!isExpanded)}\n >\n {label}\n {icon(isExpanded)}\n </button>\n {isExpanded && (\n <div className=\"col\">\n {children}\n </div>\n )}\n </div>\n )\n})\n\nExpandable.displayName = 'Expandable'\n","import clsx from 'clsx'\nimport { Helpwave } from './icons/Helpwave'\nimport { Tile } from './layout/Tile'\n\ntype Size = 'small' | 'large'\n\nexport type HelpwaveBadgeProps = {\n size?: Size,\n title?: string,\n className?: string,\n}\n\n/**\n * A Badge with the helpwave logo and the helpwave name\n */\nexport const HelpwaveBadge = ({\n size = 'small',\n title = 'helpwave',\n className = ''\n}: HelpwaveBadgeProps) => {\n const iconSize: number = size === 'small' ? 24 : 64\n\n return (\n <Tile\n prefix={(<Helpwave size={iconSize} />)}\n title={{ value: title, className: size === 'small' ? 'textstyle-title-lg text-base' : 'textstyle-title-xl' }}\n className={clsx(\n {\n 'px-2 py-1 rounded-md': size === 'small',\n 'px-4 py-1 rounded-md': size === 'large',\n }, className\n)}\n />\n )\n}\n","import type { SVGProps } from 'react'\nimport { clsx } from 'clsx'\n\nexport type HelpwaveProps = SVGProps<SVGSVGElement> & {\n color?: string,\n animate?: 'none' | 'loading' | 'pulse' | 'bounce',\n size?: number,\n}\n\n/**\n * The helpwave loading spinner based on the svg logo.\n */\nexport const Helpwave = ({\n color = 'currentColor',\n animate = 'none',\n size = 64,\n ...props\n}: HelpwaveProps) => {\n const isLoadingAnimation = animate === 'loading'\n let svgAnimationKey = ''\n\n if (animate === 'pulse') {\n svgAnimationKey = 'animate-pulse'\n } else if (animate === 'bounce') {\n svgAnimationKey = 'animate-bounce'\n }\n\n if (size < 0) {\n console.error('size cannot be less than 0')\n size = 64\n }\n\n return (\n <svg\n width={size}\n height={size}\n viewBox=\"0 0 888 888\"\n fill=\"none\"\n strokeLinecap=\"round\"\n strokeWidth={48}\n {...props}\n >\n <g className={clsx(svgAnimationKey)}>\n <path className={clsx({ 'animate-wave-big-left-up': isLoadingAnimation })} d=\"M144 543.235C144 423.259 232.164 326 340.92 326\" stroke={color} strokeDasharray=\"1000\" />\n <path className={clsx({ 'animate-wave-big-right-down': isLoadingAnimation })} d=\"M537.84 544.104C429.084 544.104 340.92 446.844 340.92 326.869\" stroke={color} strokeDasharray=\"1000\" />\n <path className={clsx({ 'animate-wave-small-left-up': isLoadingAnimation })} d=\"M462.223 518.035C462.223 432.133 525.348 362.495 603.217 362.495\" stroke={color} strokeDasharray=\"1000\" />\n <path className={clsx({ 'animate-wave-small-right-down': isLoadingAnimation })} d=\"M745.001 519.773C666.696 519.773 603.218 450.136 603.218 364.233\" stroke={color} strokeDasharray=\"1000\" />\n </g>\n </svg>\n )\n}\n","import type { ReactNode } from 'react'\nimport Image from 'next/image'\nimport clsx from 'clsx'\n\nexport type TileProps = {\n title: { value: string, className?: string },\n description?: { value: string, className?: string },\n prefix?: ReactNode,\n suffix?: ReactNode,\n className?: 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 prefix,\n suffix,\n className\n}: TileProps) => {\n return (\n <div className={clsx('row gap-x-4 w-full items-center', className)}>\n {prefix}\n <div className=\"col w-full\">\n <span className={clsx(title.className)}>{title.value}</span>\n {!!description &&\n <span className={clsx(description.className ?? 'textstyle-description')}>{description.value}</span>}\n </div>\n {suffix}\n </div>\n )\n}\n\ntype ImageLocation = 'prefix' | 'suffix'\ntype ImageSize = {\n width: number,\n height: number,\n}\n\nexport type TileWithImageProps = Omit<TileProps, 'suffix' | 'prefix'> & {\n url: string,\n imageLocation?: ImageLocation,\n imageSize?: ImageSize,\n imageClassName?: string,\n}\n\n/**\n * A Tile with an image as prefix or suffix\n */\nexport const TileWithImage = ({\n url,\n imageLocation = 'prefix',\n imageSize = { width: 24, height: 24 },\n imageClassName = '',\n ...tileProps\n}: TileWithImageProps) => {\n const image = <Image src={url} alt=\"\" {...imageSize} className={clsx(imageClassName)}/>\n return (\n <Tile\n {...tileProps}\n prefix={imageLocation === 'prefix' ? image : undefined}\n suffix={imageLocation === 'suffix' ? image : undefined}\n />\n )\n}\n","import { useState, type PropsWithChildren, type ReactNode } from 'react'\nimport { ChevronDown, ChevronUp } from 'lucide-react'\nimport clsx from 'clsx'\n\nexport type HideableContentSectionProps = PropsWithChildren & {\n initiallyOpen?: boolean,\n disabled: boolean,\n header: ReactNode,\n}\n\n/**\n * A Component to hide and show\n */\nexport const HideableContentSection = ({\n initiallyOpen = true,\n disabled,\n children,\n header\n}: HideableContentSectionProps) => {\n const [open, setOpen] = useState(initiallyOpen)\n return (\n <div className=\"col\">\n <div\n className={clsx('row justify-between items-center', { 'cursor-pointer': !disabled })}\n onClick={() => {\n if (!disabled) {\n setOpen(!open)\n }\n }}\n >\n <div>\n {header}\n </div>\n {!disabled && (open ? <ChevronUp/> : <ChevronDown/>)}\n </div>\n {open && (\n <div>\n {children}\n </div>\n )}\n </div>\n )\n}\n","import type { PropsWithChildren } from 'react'\nimport { useEffect, useState } from 'react'\nimport { ChevronDown, ChevronUp } from 'lucide-react'\nimport clsx from 'clsx'\nimport { noop } from '../util/noop'\n\nexport type InputGroupProps = PropsWithChildren<{\n title: string,\n expanded?: boolean,\n isExpandable?: boolean,\n disabled?: boolean,\n onChange?: (value: boolean) => void,\n className?: string,\n}>\n\n/**\n * A Component for layouting inputs in an expandable group\n */\nexport const InputGroup = ({\n children,\n title,\n expanded = true,\n isExpandable = true,\n disabled = false,\n onChange = noop,\n className = '',\n}: InputGroupProps) => {\n const [isExpanded, setIsExpanded] = useState<boolean>(expanded)\n\n useEffect(() => {\n setIsExpanded(expanded)\n }, [expanded])\n\n return (\n <div className={clsx('col gap-y-4 p-4 bg-white rounded-xl', className)}>\n <div\n className={clsx('row justify-between items-center', {\n 'cursor-pointer': isExpandable && !disabled,\n 'cursor-not-allowed': disabled,\n },\n {\n 'text-primary': !disabled,\n 'text-primary/40': disabled\n })}\n onClick={() => {\n if (!isExpandable) {\n return\n }\n const updatedIsExpanded = !isExpanded\n onChange(updatedIsExpanded)\n setIsExpanded(updatedIsExpanded)\n }}\n >\n <span className=\"textstyle-title-md\">{title}</span>\n <div className={clsx('rounded-full text-white w-6 h-6', {\n 'bg-primary': (isExpandable && !disabled) || expanded,\n 'bg-primary/40': disabled,\n })}>\n {isExpanded\n ? <ChevronUp className=\"-translate-y-[1px]\" size={24}/>\n : <ChevronDown className=\"translate-y-[1px]\" size={24}/>\n }\n </div>\n </div>\n {isExpanded && (\n <div className=\"col gap-y-2 h-full\">\n {children}\n </div>\n )}\n </div>\n )\n}\n","export const noop = () => undefined\n","import type { PropsWithChildren } from 'react'\nimport { useState } from 'react'\nimport type { LoadingAnimationProps } from './LoadingAnimation'\nimport type { ErrorComponentProps } from './ErrorComponent'\nimport { LoadingAnimation } from './LoadingAnimation'\nimport { ErrorComponent } from './ErrorComponent'\n\nexport type LoadingAndErrorComponentProps = PropsWithChildren<{\n isLoading?: boolean,\n hasError?: boolean,\n loadingProps?: LoadingAnimationProps,\n errorProps?: ErrorComponentProps,\n /**\n * in milliseconds\n */\n minimumLoadingDuration?: number,\n}>\n\n/**\n * A Component that shows the Error and Loading animation, when appropriate and the children otherwise\n */\nexport const LoadingAndErrorComponent = ({\n children,\n isLoading = false,\n hasError = false,\n errorProps,\n loadingProps,\n minimumLoadingDuration\n}: LoadingAndErrorComponentProps) => {\n const [isInMinimumLoading, setIsInMinimumLoading] = useState(false)\n const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = useState(false)\n if (minimumLoadingDuration && !isInMinimumLoading && !hasUsedMinimumLoading) {\n setIsInMinimumLoading(true)\n setTimeout(() => {\n setIsInMinimumLoading(false)\n setHasUsedMinimumLoading(true)\n }, minimumLoadingDuration)\n }\n\n if (isLoading || (minimumLoadingDuration && isInMinimumLoading)) {\n return <LoadingAnimation {...loadingProps}/>\n }\n if (hasError) {\n return <ErrorComponent {...errorProps}/>\n }\n return children\n}\n","import type { Languages } from '../hooks/useLanguage'\nimport type { PropsForTranslation } from '../hooks/useTranslation'\nimport { useTranslation } from '../hooks/useTranslation'\nimport { Helpwave } from './icons/Helpwave'\nimport clsx from 'clsx'\n\ntype LoadingAnimationTranslation = {\n loading: string,\n}\n\nconst defaultLoadingAnimationTranslation: Record<Languages, LoadingAnimationTranslation> = {\n en: {\n loading: 'Loading data'\n },\n de: {\n loading: 'Lade Daten'\n }\n}\n\nexport type LoadingAnimationProps = {\n loadingText?: string,\n classname?: string,\n}\n\n/**\n * A Component to show when loading data\n */\nexport const LoadingAnimation = ({\n overwriteTranslation,\n loadingText,\n classname\n}: PropsForTranslation<LoadingAnimationTranslation, LoadingAnimationProps>) => {\n const translation = useTranslation(defaultLoadingAnimationTranslation, overwriteTranslation)\n return (\n <div className={clsx('col items-center justify-center w-full h-24', classname)}>\n <Helpwave animate=\"loading\" />\n {loadingText ?? `${translation.loading}...`}\n </div>\n )\n}\n","import clsx from 'clsx'\nimport { Helpwave } from './icons/Helpwave'\nimport type { SolidButtonProps } from './Button'\nimport { ButtonSizePaddings } from './Button'\nimport { SolidButton } from './Button'\nimport { noop } from '../util/noop'\n\ntype LoadingButtonProps = {\n isLoading?: boolean,\n} & SolidButtonProps\n\nexport const LoadingButton = ({ isLoading = false, size = 'medium', onClick, ...rest }: LoadingButtonProps) => {\n const paddingClass = ButtonSizePaddings[size]\n\n return (\n <div className=\"inline-block relative\">\n {\n isLoading && (\n <div className={clsx('absolute inset-0 row items-center justify-center bg-white/40', paddingClass)}>\n <Helpwave animate=\"loading\" className=\"text-white\"/>\n </div>\n )\n }\n <SolidButton {...rest} disabled={rest.disabled} onClick={isLoading ? noop: onClick}/>\n </div>\n )\n}\n","type ASTNodeModifierType =\n 'none'\n | 'italic'\n | 'bold'\n | 'underline'\n | 'font-space'\n | 'primary'\n | 'secondary'\n | 'warn'\n | 'positive'\n | 'negative'\n\nconst astNodeInserterType = ['helpwave', 'newline'] as const\ntype ASTNodeInserterType = typeof astNodeInserterType[number]\ntype ASTNodeDefaultType = 'text'\n\ntype ASTNode = {\n type: ASTNodeModifierType,\n children: ASTNode[],\n} | {\n type: ASTNodeInserterType,\n} | {\n type: ASTNodeDefaultType,\n text: string,\n}\n\nexport type ASTNodeInterpreterProps = {\n node: ASTNode,\n isRoot?: boolean,\n className?: string,\n}\nexport const ASTNodeInterpreter = ({\n node,\n isRoot = false,\n className = '',\n }: ASTNodeInterpreterProps) => {\n switch (node.type) {\n case 'newline':\n return <br/>\n case 'text':\n return isRoot ? <span className={className}>{node.text}</span> : node.text\n case 'helpwave':\n return (<span className=\"font-bold font-space no-underline\">helpwave</span>)\n case 'none':\n return isRoot ? (\n<span className={className}>{node.children.map((value, index) => (\n<ASTNodeInterpreter key={index}\n node={value}/>\n))}</span>\n) :\n <>{node.children.map((value, index) => <ASTNodeInterpreter key={index} node={value}/>)}</>\n case 'bold':\n return <b>{node.children.map((value, index) => <ASTNodeInterpreter key={index} node={value}/>)}</b>\n case 'italic':\n return <i>{node.children.map((value, index) => <ASTNodeInterpreter key={index} node={value}/>)}</i>\n case 'underline':\n return (<u>{node.children.map((value, index) => (<ASTNodeInterpreter key={index} node={value}/>))}</u>)\n case 'font-space':\n return (\n <span className=\"font-space\">{node.children.map((value, index) => (\n <ASTNodeInterpreter key={index}\n node={value}/>\n ))}</span>\n )\n case 'primary':\n return (\n <span className=\"text-primary\">{node.children.map((value, index) => (\n <ASTNodeInterpreter\n key={index} node={value}/>\n ))}</span>\n )\n case 'secondary':\n return (\n <span className=\"text-secondary\">{node.children.map((value, index) => (\n <ASTNodeInterpreter\n key={index} node={value}/>\n ))}</span>\n )\n case 'warn':\n return (\n <span className=\"text-warning\">{node.children.map((value, index) => (\n <ASTNodeInterpreter\n key={index} node={value}/>\n ))}</span>\n )\n case 'positive':\n return (\n <span className=\"text-positive\">{node.children.map((value, index) => (\n <ASTNodeInterpreter\n key={index} node={value}/>\n ))}</span>\n )\n case 'negative':\n return (\n <span className=\"text-negative\">{node.children.map((value, index) => (\n <ASTNodeInterpreter\n key={index} node={value}/>\n ))}</span>\n )\n default:\n return null\n }\n}\n\nconst modifierIdentifierMapping = [\n { id: 'i', name: 'italic' },\n { id: 'b', name: 'bold' },\n { id: 'u', name: 'underline' },\n { id: 'space', name: 'font-space' },\n { id: 'primary', name: 'primary' },\n { id: 'secondary', name: 'secondary' },\n { id: 'warn', name: 'warn' },\n { id: 'positive', name: 'positive' },\n { id: 'negative', name: 'negative' },\n] as const\n\nconst inserterIdentifierMapping = [\n { id: 'helpwave', name: 'helpwave' },\n { id: 'newline', name: 'newline' }\n] as const\nconst parseMarkdown = (\n text: string,\n commandStart: string = '\\\\',\n open: string = '{',\n close: string = '}'\n): ASTNode => {\n let start = text.indexOf(commandStart)\n const children: ASTNode[] = []\n\n // parse the text step by step\n while (text !== '') {\n if (start === -1) {\n children.push({\n type: 'text',\n text\n })\n break\n }\n children.push(parseMarkdown(text.substring(0, start)))\n text = text.substring(start)\n if (text.length <= 1) {\n children.push({\n type: 'text',\n text\n })\n text = ''\n continue\n }\n const simpleReplace = [commandStart, open, close]\n if (simpleReplace.some(value => text[1] === value)) {\n children.push({\n type: 'text',\n text: simpleReplace.find(value => text[1] === value)!\n })\n text = text.substring(2)\n start = text.indexOf(commandStart)\n continue\n }\n const inserter = inserterIdentifierMapping.find(value => text.substring(1).startsWith(value.id))\n if (inserter) {\n children.push({\n type: inserter.name,\n })\n text = text.substring(inserter.id.length + 1)\n start = text.indexOf(commandStart)\n continue\n }\n const modifier = modifierIdentifierMapping.find(value => text.substring(1).startsWith(value.id))\n if (modifier) {\n // check brackets\n if (text[modifier.id.length + 1] !== open) {\n children.push({\n type: 'text',\n text: text.substring(0, modifier.id.length + 1)\n })\n text = text.substring(modifier.id.length + 2)\n start = text.indexOf(commandStart)\n continue\n }\n let closing = -1\n let index = modifier.id.length + 2\n let counter = 1\n let escaping = false\n while (index < text.length) {\n if (text[index] === open && !escaping) {\n counter++\n }\n if (text[index] === close && !escaping) {\n counter--\n if (counter === 0) {\n closing = index\n break\n }\n }\n escaping = text[index] === commandStart\n index++\n }\n\n if (closing !== -1) {\n children.push({\n type: modifier.name,\n children: [parseMarkdown(text.substring(modifier.id.length + 2, closing))]\n })\n text = text.substring(closing + 1)\n start = text.indexOf(commandStart)\n continue\n }\n }\n // nothing could be applied to command start\n children.push({\n type: 'text',\n text: text[0]!\n })\n text = text.substring(1)\n start = text.indexOf(commandStart)\n }\n\n return {\n type: 'none',\n children\n }\n}\n\nconst optimizeTree = (node: ASTNode) => {\n if (node.type === 'text') {\n return !node.text ? undefined : node\n }\n if (astNodeInserterType.some(value => value === node.type)) {\n return node\n }\n\n const currentNode = node as\n { type: ASTNodeModifierType, children: ASTNode[] }\n\n if (currentNode.children.length === 0) {\n return undefined\n }\n\n let children: ASTNode[] = []\n for (let i = 0; i < currentNode.children.length; i++) {\n const child = optimizeTree(currentNode.children[i]!)\n if (!child) {\n continue\n }\n if (child.type === 'none') {\n children.push(...child.children)\n } else {\n children.push(child)\n }\n }\n\n currentNode.children = children\n children = []\n\n for (let i = 0; i < currentNode.children.length; i++) {\n const child = currentNode.children[i]!\n if (child) {\n if (child.type === 'text' && children[children.length - 1]?.type === 'text') {\n (children[children.length - 1]! as { type: ASTNodeDefaultType, text: string }).text += child.text\n } else {\n children.push(child)\n }\n }\n }\n currentNode.children = children\n return currentNode\n}\n\nexport type MarkdownInterpreterProps = {\n text: string,\n className?: string,\n}\n\nexport const MarkdownInterpreter = ({ text, className }: MarkdownInterpreterProps) => {\n const tree = parseMarkdown(text)\n const optimizedTree = optimizeTree(tree)!\n return <ASTNodeInterpreter node={optimizedTree} isRoot={true} className={className}/>\n}\n","import { ChevronLast, ChevronLeft, ChevronFirst, ChevronRight } from 'lucide-react'\nimport clsx from 'clsx'\nimport type { PropsForTranslation } from '../hooks/useTranslation'\nimport { useTranslation } from '../hooks/useTranslation'\nimport type { Languages } from '../hooks/useLanguage'\n\ntype PaginationTranslation = {\n of: string,\n}\nconst defaultPaginationTranslations: Record<Languages, PaginationTranslation> = {\n en: {\n of: 'of'\n },\n de: {\n of: 'von'\n }\n}\n\nexport type PaginationProps = {\n page: number, // starts with 0\n numberOfPages: number,\n onPageChanged: (page: number) => void,\n}\n\n/**\n * A Component showing the pagination allowing first, before, next and last page navigation\n */\nexport const Pagination = ({\n overwriteTranslation,\n page,\n numberOfPages,\n onPageChanged\n}: PropsForTranslation<PaginationTranslation, PaginationProps>) => {\n const translation = useTranslation(defaultPaginationTranslations, overwriteTranslation)\n\n const changePage = (page:number) => {\n onPageChanged(page)\n }\n\n const noPages = numberOfPages === 0\n const onFirstPage = page === 0 && !noPages\n const onLastPage = page === numberOfPages - 1\n\n return (\n <div className={clsx('row', { 'opacity-30': noPages })}>\n <button onClick={() => changePage(0)} disabled={onFirstPage}>\n <ChevronFirst className={clsx({ 'opacity-30': onFirstPage })}/>\n </button>\n <button onClick={() => changePage(page - 1)} disabled={onFirstPage}>\n <ChevronLeft className={clsx({ 'opacity-30': onFirstPage })}/>\n </button>\n <div className=\"min-w-[80px] justify-center mx-2\">\n <span className=\"select-none text-right flex-1\">{noPages ? 0 : page + 1}</span>\n <span className=\"select-none mx-2\">{