npm - @helpwave/hightide - Versions diffs - 0.1.18 → 0.1.20 - Mend

@helpwave/hightide 0.1.18 → 0.1.20

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

package/dist/components/date/YearMonthPicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/date/YearMonthPicker.tsx","../../../src/util/noop.ts","../../../src/util/array.ts","../../../src/components/layout-and-navigation/Expandable.tsx","../../../src/util/date.ts","../../../src/localization/LanguageProvider.tsx","../../../src/hooks/useLocalStorage.ts","../../../src/localization/util.ts","../../../src/components/user-action/Button.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\nimport { Scrollbars } from 'react-custom-scrollbars-2'\nimport { noop } from '../../util/noop'\nimport { equalSizeGroups, range } from '../../util/array'\nimport clsx from 'clsx'\nimport { ExpandableUncontrolled } from '../layout-and-navigation/Expandable'\nimport { addDuration, monthsList, subtractDuration } from '../../util/date'\nimport { useLocale } from '../../localization/LanguageProvider'\nimport { SolidButton } from '../user-action/Button'\n\nexport type YearMonthPickerProps = {\n displayedYearMonth?: Date,\n start?: Date,\n end?: Date,\n onChange?: (date: Date) => void,\n className?: string,\n maxHeight?: number,\n showValueOpen?: boolean,\n}\n\n// TODO use a dynamically loading infinite list here\nexport const YearMonthPicker = ({\n displayedYearMonth = new Date(),\n start = subtractDuration(new Date(), { years: 50 }),\n end = addDuration(new Date(), { years: 50 }),\n onChange = noop,\n className = '',\n maxHeight = 300,\n showValueOpen = true\n }: YearMonthPickerProps) => {\n const locale = useLocale()\n const ref = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n const scrollToItem = () => {\n if (ref.current) {\n ref.current.scrollIntoView({\n behavior: 'instant',\n block: 'center',\n })\n }\n }\n\n scrollToItem()\n }, [ref])\n\n if (end < start) {\n console.error(`startYear: (${start}) less than endYear: (${end})`)\n return null\n }\n\n const years = range([start.getFullYear(), end.getFullYear()], { exclusiveEnd: false })\n\n return (\n <div className={clsx('col select-none', className)}>\n <Scrollbars autoHeight autoHeightMax={maxHeight} style={{ height: '100%' }}>\n <div className=\"col gap-y-1 mr-3\">\n {years.map(year => {\n const selectedYear = displayedYearMonth.getFullYear() === year\n return (\n <ExpandableUncontrolled\n key={year}\n ref={(displayedYearMonth.getFullYear() ?? new Date().getFullYear()) === year ? ref : undefined}\n label={<span className={clsx({ 'text-primary font-bold': selectedYear })}>{year}</span>}\n isExpanded={showValueOpen && selectedYear}\n contentClassName=\"gap-y-1\"\n >\n {equalSizeGroups([...monthsList], 3).map((monthList, index) => (\n <div key={index} className=\"row gap-x-1\">\n {monthList.map(month => {\n const monthIndex = monthsList.indexOf(month)\n const newDate = new Date(year, monthIndex)\n\n const selectedMonth = selectedYear && monthIndex === displayedYearMonth.getMonth()\n const firstOfMonth = new Date(year, monthIndex, 1)\n const lastOfMonth = new Date(year, monthIndex, 1)\n const isAfterStart = start === undefined \|\| start <= addDuration(subtractDuration(lastOfMonth, { days: 1 }), { months: 1 })\n const isBeforeEnd = end === undefined \|\| firstOfMonth <= end\n const isValid = isAfterStart && isBeforeEnd\n return (\n <SolidButton\n key={month}\n disabled={!isValid}\n color={selectedMonth && isValid ? 'primary' : 'neutral'}\n className=\"flex-1\"\n size=\"small\"\n onClick={() => {\n onChange(newDate)\n }}\n >\n {new Intl.DateTimeFormat(locale, { month: 'short' }).format(newDate)}\n </SolidButton>\n )\n })}\n </div>\n ))}\n </ExpandableUncontrolled>\n )\n })}\n </div>\n </Scrollbars>\n </div>\n )\n}\n\nexport const YearMonthPickerUncontrolled = ({\n displayedYearMonth,\n onChange = noop,\n ...props\n }: YearMonthPickerProps) => {\n const [yearMonth, setYearMonth] = useState<Date>(displayedYearMonth ?? new Date())\n\n useEffect(() => setYearMonth(displayedYearMonth), [displayedYearMonth])\n\n return (\n <YearMonthPicker\n displayedYearMonth={yearMonth}\n onChange={date => {\n setYearMonth(date)\n onChange(date)\n }}\n {...props}\n />\n )\n}\n","export const noop = () => undefined\n","export const equalSizeGroups = <T>(array: T[], groupSize: number): T[][] => {\n if (groupSize <= 0) {\n console.warn(`group size should be greater than 0: groupSize = ${groupSize}`)\n return [[...array]]\n }\n\n const groups = []\n for (let i = 0; i < array.length; i += groupSize) {\n groups.push(array.slice(i, Math.min(i + groupSize, array.length)))\n }\n return groups\n}\n\nexport type RangeOptions = {\n /** Whether the range can be defined empty via end < start without a warning /\n allowEmptyRange: boolean,\n stepSize: number,\n exclusiveStart: boolean,\n exclusiveEnd: boolean,\n}\n\nconst defaultRangeOptions: RangeOptions = {\n allowEmptyRange: false,\n stepSize: 1,\n exclusiveStart: false,\n exclusiveEnd: true,\n}\n\n/\n @param endOrRange The end value or a range [start, end], end is exclusive\n * @param options the options for defining the range\n /\nexport const range = (endOrRange: number \| [number, number], options?: Partial<RangeOptions>): number[] => {\n const { allowEmptyRange, stepSize, exclusiveStart, exclusiveEnd } = { ...defaultRangeOptions, ...options }\n let start = 0\n let end: number\n if (typeof endOrRange === 'number') {\n end = endOrRange\n } else {\n start = endOrRange[0]\n end = endOrRange[1]\n }\n if (!exclusiveEnd) {\n end -= 1\n }\n if (exclusiveStart) {\n start += 1\n }\n\n if (end - 1 < start) {\n if (!allowEmptyRange) {\n console.warn(`range: end (${end}) < start (${start}) should be allowed explicitly, set options.allowEmptyRange to true`)\n }\n return []\n }\n return Array.from({ length: end - start }, (_, index) => index stepSize + start)\n}\n\n/** Finds the closest match\n * @param list The list of all possible matches\n * @param firstCloser Return whether item1 is closer than item2\n /\nexport const closestMatch = <T>(list: T[], firstCloser: (item1: T, item2: T) => boolean) => {\n return list.reduce((item1, item2) => {\n return firstCloser(item1, item2) ? item1 : item2\n })\n}\n\n/\n returns the item in middle of a list and its neighbours before and after\n * e.g. [1,2,3,4,5,6] for item = 1 would return [5,6,1,2,3]\n /\nexport const getNeighbours = <T>(list: T[], item: T, neighbourDistance: number = 2) => {\n const index = list.indexOf(item)\n const totalItems = neighbourDistance 2 + 1\n if (list.length < totalItems) {\n console.warn('List is to short')\n return list\n }\n\n if (index === -1) {\n console.error('item not found in list')\n return list.splice(0, totalItems)\n }\n\n let start = index - neighbourDistance\n if (start < 0) {\n start += list.length\n }\n const end = (index + neighbourDistance + 1) % list.length\n\n const result: T[] = []\n let ignoreOnce = list.length === totalItems\n for (let i = start; i !== end \|\| ignoreOnce; i = (i + 1) % list.length) {\n result.push(list[i]!)\n if (end === i && ignoreOnce) {\n ignoreOnce = false\n }\n }\n return result\n}\n\nexport const createLoopingListWithIndex = <T>(list: T[], startIndex: number = 0, length: number = 0, forwards: boolean = true) => {\n if (length < 0) {\n console.warn(`createLoopingList: length must be >= 0, given ${length}`)\n } else if (length === 0) {\n length = list.length\n }\n\n const returnList: [number, T][] = []\n\n if (forwards) {\n for (let i = startIndex; returnList.length < length; i = (i + 1) % list.length) {\n returnList.push([i, list[i]!])\n }\n } else {\n for (let i = startIndex; returnList.length < length; i = i === 0 ? i = list.length - 1 : i - 1) {\n returnList.push([i, list[i]!])\n }\n }\n\n return returnList\n}\n\nexport const createLoopingList = <T>(list: T[], startIndex: number = 0, length: number = 0, forwards: boolean = true) => {\n return createLoopingListWithIndex(list, startIndex, length, forwards).map(([_, item]) => item)\n}\n\nexport const ArrayUtil = {\n unique: <T>(list: T[]): T[] => {\n const seen = new Set<T>()\n return list.filter((item) => {\n if (seen.has(item)) {\n return false\n }\n seen.add(item)\n return true\n })\n },\n\n difference: <T>(list: T[], removeList: T[]): T[] => {\n const remove = new Set<T>(removeList)\n return list.filter((item) => !remove.has(item))\n }\n}\n","import type { PropsWithChildren, ReactNode } from 'react'\nimport { forwardRef, useEffect, useState } from 'react'\nimport { ChevronDown, ChevronUp } from 'lucide-react'\nimport clsx from 'clsx'\nimport { noop } from '../../util/noop'\n\ntype IconBuilder = (expanded: boolean) => ReactNode\n\nexport type ExpandableProps = PropsWithChildren<{\n label: ReactNode,\n icon?: IconBuilder,\n isExpanded?: boolean,\n onChange?: (isExpanded: boolean) => void,\n /*\n Whether the expansion should only happen when the header is clicked or on the entire component\n /\n clickOnlyOnHeader?: boolean,\n disabled?: boolean,\n className?: string,\n headerClassName?: string,\n contentClassName?: string,\n}>\n\nconst DefaultIcon: IconBuilder = (expanded) => expanded ?\n (<ChevronUp className=\"min-w-4 w-4\"/>)\n : (<ChevronDown className=\"min-w-4 w-4\"/>)\n\n\n/\n A Component for showing and hiding content\n /\nexport const Expandable = forwardRef<HTMLDivElement, ExpandableProps>(function Expandable({\n children,\n label,\n icon,\n isExpanded = false,\n onChange = noop,\n clickOnlyOnHeader = true,\n disabled = false,\n className,\n headerClassName,\n contentClassName,\n }, ref) {\n icon ??= DefaultIcon\n\n return (\n <div\n ref={ref}\n className={clsx('col gap-y-0 bg-surface text-on-surface group rounded-lg shadow-sm', { 'cursor-pointer': !clickOnlyOnHeader && !disabled }, className)}\n onClick={() => !clickOnlyOnHeader && !disabled && onChange(!isExpanded)}\n >\n <div\n className={clsx(\n 'row py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none',\n {\n 'group-hover:brightness-95': !isExpanded,\n 'hover:brightness-95': isExpanded && !disabled,\n 'cursor-pointer': clickOnlyOnHeader && !disabled,\n },\n headerClassName\n )}\n onClick={() => clickOnlyOnHeader && !disabled && onChange(!isExpanded)}\n >\n {label}\n {icon(isExpanded)}\n </div>\n {isExpanded && (\n <div className={clsx('col px-4 pb-2', contentClassName)}>\n {children}\n </div>\n )}\n </div>\n )\n})\n\nexport const ExpandableUncontrolled = forwardRef<HTMLDivElement, ExpandableProps>(function ExpandableUncontrolled({\n isExpanded,\n onChange = noop,\n ...props\n },\n ref) {\n const [usedIsExpanded, setUsedIsExpanded] = useState(isExpanded)\n\n useEffect(() => {\n setUsedIsExpanded(isExpanded)\n }, [isExpanded])\n\n return (\n <Expandable\n {...props}\n ref={ref}\n isExpanded={usedIsExpanded}\n onChange={value => {\n onChange(value)\n setUsedIsExpanded(value)\n }}\n />\n )\n})\n","import { equalSizeGroups } from './array'\n\nexport const monthsList = ['january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december'] as const\nexport type Month = typeof monthsList[number]\n\nexport const weekDayList = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'] as const\nexport type WeekDay = typeof weekDayList[number]\n\nexport const formatDate = (date: Date) => {\n const year = date.getFullYear().toString().padStart(4, '0')\n const month = (date.getMonth() + 1).toString().padStart(2, '0')\n const day = (date.getDate()).toString().padStart(2, '0')\n return `${year}-${month}-${day}`\n}\n\nexport const formatDateTime = (date: Date) => {\n const dateString = formatDate(date)\n const hours = date.getHours().toString().padStart(2, '0')\n const minutes = date.getMinutes().toString().padStart(2, '0')\n return `${dateString}T${hours}:${minutes}`\n}\n\nexport const getDaysInMonth = (year: number, month: number): number => {\n const lastDayOfMonth = new Date(year, month + 1, 0)\n return lastDayOfMonth.getDate()\n}\n\nexport type Duration = {\n years?: number,\n months?: number,\n days?: number,\n hours?: number,\n minutes?: number,\n seconds?: number,\n milliseconds?: number,\n}\n\nexport const changeDuration = (date: Date, duration: Duration, isAdding?: boolean): Date => {\n const {\n years = 0,\n months = 0,\n days = 0,\n hours = 0,\n minutes = 0,\n seconds = 0,\n milliseconds = 0,\n } = duration\n\n // Check ranges\n if (years < 0) {\n console.error(`Range error years must be greater than 0: received ${years}`)\n return new Date(date)\n }\n if (months < 0 \|\| months > 11) {\n console.error(`Range error month must be 0 <= month <= 11: received ${months}`)\n return new Date(date)\n }\n if (days < 0) {\n console.error(`Range error days must be greater than 0: received ${days}`)\n return new Date(date)\n }\n if (hours < 0 \|\| hours > 23) {\n console.error(`Range error hours must be 0 <= hours <= 23: received ${hours}`)\n return new Date(date)\n }\n if (minutes < 0 \|\| minutes > 59) {\n console.error(`Range error minutes must be 0 <= minutes <= 59: received ${minutes}`)\n return new Date(date)\n }\n if (seconds < 0 \|\| seconds > 59) {\n console.error(`Range error seconds must be 0 <= seconds <= 59: received ${seconds}`)\n return new Date(date)\n }\n if (milliseconds < 0) {\n console.error(`Range error seconds must be greater than 0: received ${milliseconds}`)\n return new Date(date)\n }\n\n const multiplier = isAdding ? 1 : -1\n\n const newDate = new Date(date)\n\n newDate.setFullYear(newDate.getFullYear() + multiplier years)\n\n newDate.setMonth(newDate.getMonth() + multiplier * months)\n\n newDate.setDate(newDate.getDate() + multiplier * days)\n\n newDate.setHours(newDate.getHours() + multiplier * hours)\n\n newDate.setMinutes(newDate.getMinutes() + multiplier * minutes)\n\n newDate.setSeconds(newDate.getSeconds() + multiplier * seconds)\n\n newDate.setMilliseconds(newDate.getMilliseconds() + multiplier * milliseconds)\n\n return newDate\n}\n\nexport const addDuration = (date: Date, duration: Duration): Date => {\n return changeDuration(date, duration, true)\n}\n\nexport const subtractDuration = (date: Date, duration: Duration): Date => {\n return changeDuration(date, duration, false)\n}\n\nexport const getBetweenDuration = (startDate: Date, endDate: Date): Duration => {\n const durationInMilliseconds = endDate.getTime() - startDate.getTime()\n\n const millisecondsInSecond = 1000\n const millisecondsInMinute = 60 * millisecondsInSecond\n const millisecondsInHour = 60 * millisecondsInMinute\n const millisecondsInDay = 24 * millisecondsInHour\n const millisecondsInMonth = 30 * millisecondsInDay // Rough estimation, can be adjusted\n\n const years = Math.floor(durationInMilliseconds / (365.25 * millisecondsInDay))\n const months = Math.floor(durationInMilliseconds / millisecondsInMonth)\n const days = Math.floor(durationInMilliseconds / millisecondsInDay)\n const hours = Math.floor((durationInMilliseconds % millisecondsInDay) / millisecondsInHour)\n const seconds = Math.floor((durationInMilliseconds % millisecondsInHour) / millisecondsInSecond)\n const milliseconds = durationInMilliseconds % millisecondsInSecond\n\n return {\n years,\n months,\n days,\n hours,\n seconds,\n milliseconds,\n }\n}\n\n/** Checks if a given date is in the range of two dates\n \n An undefined value for startDate or endDate means no bound for the start or end respectively\n /\nexport const isInTimeSpan = (value: Date, startDate?: Date, endDate?: Date): boolean => {\n if (startDate && endDate) {\n console.assert(startDate <= endDate)\n return startDate <= value && value <= endDate\n } else if (startDate) {\n return startDate <= value\n } else if (endDate) {\n return endDate >= value\n } else {\n return true\n }\n}\n\n/* Compare two dates on the year, month, day /\nexport const equalDate = (date1: Date, date2: Date) => {\n return date1.getFullYear() === date2.getFullYear()\n && date1.getMonth() === date2.getMonth()\n && date1.getDate() === date2.getDate()\n}\n\nexport const getWeeksForCalenderMonth = (date: Date, weekStart: WeekDay, weeks: number = 6) => {\n const month = date.getMonth()\n const year = date.getFullYear()\n\n const dayList: Date[] = []\n let currentDate = new Date(year, month, 1) // Start of month\n const weekStartIndex = weekDayList.indexOf(weekStart)\n\n // Move the current day to the week before\n while (currentDate.getDay() !== weekStartIndex) {\n currentDate = subtractDuration(currentDate, { days: 1 })\n }\n\n while (dayList.length < 7 weeks) {\n const date = new Date(currentDate)\n date.setHours(date.getHours(), date.getMinutes()) // To make sure we are not overwriting the time\n dayList.push(date)\n currentDate = addDuration(currentDate, { days: 1 })\n }\n\n // weeks\n return equalSizeGroups(dayList, 7)\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 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\nexport const IconButtonUtil = {\n icon: [...ButtonColorUtil.solid, 'transparent'] 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 The allowed colors for the IconButton\n /\nexport type IconButtonColor = typeof IconButtonUtil.icon[number]\n\n\n/\n The different sizes for a button\n /\ntype ButtonSizes = 'small' \| 'medium' \| 'large'\n\ntype IconButtonSize = 'tiny' \| '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<IconButtonSize, string> = {\n tiny: 'icon-btn-xs',\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\n/\n The shard properties between all button types\n /\nexport type IconButtonProps = PropsWithChildren<{\n /\n @default 'medium'\n /\n size?: IconButtonSize,\n color?: IconButtonColor,\n}> & ButtonHTMLAttributes<Element>\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')]: !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 transparent: 'bg-transparent',\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 && color !== 'transparent',\n 'text-disabled-text cursor-not-allowed opacity-70': disabled && color === 'transparent',\n 'hover:bg-button-text-hover-background': !disabled && color === 'transparent',\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"],"mappings":"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","names":["import_react","import_clsx","Expandable","clsx","ExpandableUncontrolled","import_react","import_react","import_jsx_runtime","import_clsx","import_jsx_runtime","clsx","import_jsx_runtime","clsx"]}
1	+ {"version":3,"sources":["../../../src/components/date/YearMonthPicker.tsx","../../../src/util/noop.ts","../../../src/util/array.ts","../../../src/components/layout-and-navigation/Expandable.tsx","../../../src/util/date.ts","../../../src/localization/LanguageProvider.tsx","../../../src/hooks/useLocalStorage.ts","../../../src/localization/util.ts","../../../src/components/user-action/Button.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\nimport { Scrollbars } from 'react-custom-scrollbars-2'\nimport { noop } from '../../util/noop'\nimport { equalSizeGroups, range } from '../../util/array'\nimport clsx from 'clsx'\nimport { ExpandableUncontrolled } from '../layout-and-navigation/Expandable'\nimport { addDuration, monthsList, subtractDuration } from '../../util/date'\nimport { useLocale } from '../../localization/LanguageProvider'\nimport { SolidButton } from '../user-action/Button'\n\nexport type YearMonthPickerProps = {\n displayedYearMonth?: Date,\n start?: Date,\n end?: Date,\n onChange?: (date: Date) => void,\n className?: string,\n maxHeight?: number,\n showValueOpen?: boolean,\n}\n\n// TODO use a dynamically loading infinite list here\nexport const YearMonthPicker = ({\n displayedYearMonth = new Date(),\n start = subtractDuration(new Date(), { years: 50 }),\n end = addDuration(new Date(), { years: 50 }),\n onChange = noop,\n className = '',\n maxHeight = 300,\n showValueOpen = true\n }: YearMonthPickerProps) => {\n const locale = useLocale()\n const ref = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n const scrollToItem = () => {\n if (ref.current) {\n ref.current.scrollIntoView({\n behavior: 'instant',\n block: 'center',\n })\n }\n }\n\n scrollToItem()\n }, [ref])\n\n if (end < start) {\n console.error(`startYear: (${start}) less than endYear: (${end})`)\n return null\n }\n\n const years = range([start.getFullYear(), end.getFullYear()], { exclusiveEnd: false })\n\n return (\n <div className={clsx('flex-col-0 select-none', className)}>\n <Scrollbars autoHeight autoHeightMax={maxHeight} style={{ height: '100%' }}>\n <div className=\"flex-col-1 mr-3\">\n {years.map(year => {\n const selectedYear = displayedYearMonth.getFullYear() === year\n return (\n <ExpandableUncontrolled\n key={year}\n ref={(displayedYearMonth.getFullYear() ?? new Date().getFullYear()) === year ? ref : undefined}\n label={<span className={clsx({ 'text-primary font-bold': selectedYear })}>{year}</span>}\n isExpanded={showValueOpen && selectedYear}\n contentClassName=\"gap-y-1\"\n >\n {equalSizeGroups([...monthsList], 3).map((monthList, index) => (\n <div key={index} className=\"flex-row-1\">\n {monthList.map(month => {\n const monthIndex = monthsList.indexOf(month)\n const newDate = new Date(year, monthIndex)\n\n const selectedMonth = selectedYear && monthIndex === displayedYearMonth.getMonth()\n const firstOfMonth = new Date(year, monthIndex, 1)\n const lastOfMonth = new Date(year, monthIndex, 1)\n const isAfterStart = start === undefined \|\| start <= addDuration(subtractDuration(lastOfMonth, { days: 1 }), { months: 1 })\n const isBeforeEnd = end === undefined \|\| firstOfMonth <= end\n const isValid = isAfterStart && isBeforeEnd\n return (\n <SolidButton\n key={month}\n disabled={!isValid}\n color={selectedMonth && isValid ? 'primary' : 'neutral'}\n className=\"flex-1\"\n size=\"small\"\n onClick={() => {\n onChange(newDate)\n }}\n >\n {new Intl.DateTimeFormat(locale, { month: 'short' }).format(newDate)}\n </SolidButton>\n )\n })}\n </div>\n ))}\n </ExpandableUncontrolled>\n )\n })}\n </div>\n </Scrollbars>\n </div>\n )\n}\n\nexport const YearMonthPickerUncontrolled = ({\n displayedYearMonth,\n onChange = noop,\n ...props\n }: YearMonthPickerProps) => {\n const [yearMonth, setYearMonth] = useState<Date>(displayedYearMonth ?? new Date())\n\n useEffect(() => setYearMonth(displayedYearMonth), [displayedYearMonth])\n\n return (\n <YearMonthPicker\n displayedYearMonth={yearMonth}\n onChange={date => {\n setYearMonth(date)\n onChange(date)\n }}\n {...props}\n />\n )\n}\n","export const noop = () => undefined\n","export const equalSizeGroups = <T>(array: T[], groupSize: number): T[][] => {\n if (groupSize <= 0) {\n console.warn(`group size should be greater than 0: groupSize = ${groupSize}`)\n return [[...array]]\n }\n\n const groups = []\n for (let i = 0; i < array.length; i += groupSize) {\n groups.push(array.slice(i, Math.min(i + groupSize, array.length)))\n }\n return groups\n}\n\nexport type RangeOptions = {\n /** Whether the range can be defined empty via end < start without a warning /\n allowEmptyRange: boolean,\n stepSize: number,\n exclusiveStart: boolean,\n exclusiveEnd: boolean,\n}\n\nconst defaultRangeOptions: RangeOptions = {\n allowEmptyRange: false,\n stepSize: 1,\n exclusiveStart: false,\n exclusiveEnd: true,\n}\n\n/\n @param endOrRange The end value or a range [start, end], end is exclusive\n * @param options the options for defining the range\n /\nexport const range = (endOrRange: number \| [number, number], options?: Partial<RangeOptions>): number[] => {\n const { allowEmptyRange, stepSize, exclusiveStart, exclusiveEnd } = { ...defaultRangeOptions, ...options }\n let start = 0\n let end: number\n if (typeof endOrRange === 'number') {\n end = endOrRange\n } else {\n start = endOrRange[0]\n end = endOrRange[1]\n }\n if (!exclusiveEnd) {\n end -= 1\n }\n if (exclusiveStart) {\n start += 1\n }\n\n if (end - 1 < start) {\n if (!allowEmptyRange) {\n console.warn(`range: end (${end}) < start (${start}) should be allowed explicitly, set options.allowEmptyRange to true`)\n }\n return []\n }\n return Array.from({ length: end - start }, (_, index) => index stepSize + start)\n}\n\n/** Finds the closest match\n * @param list The list of all possible matches\n * @param firstCloser Return whether item1 is closer than item2\n /\nexport const closestMatch = <T>(list: T[], firstCloser: (item1: T, item2: T) => boolean) => {\n return list.reduce((item1, item2) => {\n return firstCloser(item1, item2) ? item1 : item2\n })\n}\n\n/\n returns the item in middle of a list and its neighbours before and after\n * e.g. [1,2,3,4,5,6] for item = 1 would return [5,6,1,2,3]\n /\nexport const getNeighbours = <T>(list: T[], item: T, neighbourDistance: number = 2) => {\n const index = list.indexOf(item)\n const totalItems = neighbourDistance 2 + 1\n if (list.length < totalItems) {\n console.warn('List is to short')\n return list\n }\n\n if (index === -1) {\n console.error('item not found in list')\n return list.splice(0, totalItems)\n }\n\n let start = index - neighbourDistance\n if (start < 0) {\n start += list.length\n }\n const end = (index + neighbourDistance + 1) % list.length\n\n const result: T[] = []\n let ignoreOnce = list.length === totalItems\n for (let i = start; i !== end \|\| ignoreOnce; i = (i + 1) % list.length) {\n result.push(list[i]!)\n if (end === i && ignoreOnce) {\n ignoreOnce = false\n }\n }\n return result\n}\n\nexport const createLoopingListWithIndex = <T>(list: T[], startIndex: number = 0, length: number = 0, forwards: boolean = true) => {\n if (length < 0) {\n console.warn(`createLoopingList: length must be >= 0, given ${length}`)\n } else if (length === 0) {\n length = list.length\n }\n\n const returnList: [number, T][] = []\n\n if (forwards) {\n for (let i = startIndex; returnList.length < length; i = (i + 1) % list.length) {\n returnList.push([i, list[i]!])\n }\n } else {\n for (let i = startIndex; returnList.length < length; i = i === 0 ? i = list.length - 1 : i - 1) {\n returnList.push([i, list[i]!])\n }\n }\n\n return returnList\n}\n\nexport const createLoopingList = <T>(list: T[], startIndex: number = 0, length: number = 0, forwards: boolean = true) => {\n return createLoopingListWithIndex(list, startIndex, length, forwards).map(([_, item]) => item)\n}\n\nexport const ArrayUtil = {\n unique: <T>(list: T[]): T[] => {\n const seen = new Set<T>()\n return list.filter((item) => {\n if (seen.has(item)) {\n return false\n }\n seen.add(item)\n return true\n })\n },\n\n difference: <T>(list: T[], removeList: T[]): T[] => {\n const remove = new Set<T>(removeList)\n return list.filter((item) => !remove.has(item))\n }\n}\n","import type { PropsWithChildren, ReactNode } from 'react'\nimport { forwardRef, useCallback, useEffect, useState } from 'react'\nimport { ChevronDown } from 'lucide-react'\nimport clsx from 'clsx'\nimport { noop } from '../../util/noop'\n\ntype IconBuilder = (expanded: boolean) => ReactNode\n\nexport type ExpandableProps = PropsWithChildren<{\n label: ReactNode,\n icon?: IconBuilder,\n isExpanded?: boolean,\n onChange?: (isExpanded: boolean) => void,\n /*\n Whether the expansion should only happen when the header is clicked or on the entire component\n /\n clickOnlyOnHeader?: boolean,\n disabled?: boolean,\n className?: string,\n headerClassName?: string,\n contentClassName?: string,\n contentExpandedClassName?: string,\n}>\n\n\nexport type ExpansionIconProps = {\n isExpanded: boolean,\n className?: string,\n}\n\nexport const ExpansionIcon = ({ isExpanded, className }: ExpansionIconProps) => {\n return (\n <ChevronDown\n className={clsx(\n 'min-w-6 w-6 min-h-6 h-6 transition-transform duration-200 ease-in-out',\n { 'rotate-180': isExpanded },\n className\n )}\n />\n )\n}\n\n\n/\n A Component for showing and hiding content\n /\nexport const Expandable = forwardRef<HTMLDivElement, ExpandableProps>(function Expandable({\n children,\n label,\n icon,\n isExpanded = false,\n onChange = noop,\n clickOnlyOnHeader = true,\n disabled = false,\n className,\n headerClassName,\n contentClassName,\n contentExpandedClassName,\n }, ref) {\n const defaultIcon = useCallback((expanded: boolean) => <ExpansionIcon isExpanded={expanded}/>, [])\n icon ??= defaultIcon\n\n return (\n <div\n ref={ref}\n className={clsx('flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm', { 'cursor-pointer': !clickOnlyOnHeader && !disabled }, className)}\n onClick={() => !clickOnlyOnHeader && !disabled && onChange(!isExpanded)}\n >\n <div\n className={clsx(\n 'flex-row-2 py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none',\n {\n 'group-hover:brightness-97': !isExpanded,\n 'hover:brightness-97': isExpanded && !disabled,\n 'cursor-pointer': clickOnlyOnHeader && !disabled,\n },\n headerClassName\n )}\n onClick={() => clickOnlyOnHeader && !disabled && onChange(!isExpanded)}\n >\n {label}\n {icon(isExpanded)}\n </div>\n <div\n className={clsx(\n 'flex-col-2 px-4 transition-all duration-300 ease-in-out',\n {\n [clsx('max-h-96 opacity-100 pb-2 overflow-y-auto', contentExpandedClassName)]: isExpanded,\n 'max-h-0 opacity-0 overflow-hidden': !isExpanded,\n },\n contentClassName\n )}\n >\n {children}\n </div>\n </div>\n )\n})\n\nexport const ExpandableUncontrolled = forwardRef<HTMLDivElement, ExpandableProps>(function ExpandableUncontrolled({\n isExpanded,\n onChange = noop,\n ...props\n },\n ref) {\n const [usedIsExpanded, setUsedIsExpanded] = useState(isExpanded)\n\n useEffect(() => {\n setUsedIsExpanded(isExpanded)\n }, [isExpanded])\n\n return (\n <Expandable\n {...props}\n ref={ref}\n isExpanded={usedIsExpanded}\n onChange={value => {\n onChange(value)\n setUsedIsExpanded(value)\n }}\n />\n )\n})\n","import { equalSizeGroups } from './array'\n\nexport const monthsList = ['january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december'] as const\nexport type Month = typeof monthsList[number]\n\nexport const weekDayList = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'] as const\nexport type WeekDay = typeof weekDayList[number]\n\nexport const formatDate = (date: Date) => {\n const year = date.getFullYear().toString().padStart(4, '0')\n const month = (date.getMonth() + 1).toString().padStart(2, '0')\n const day = (date.getDate()).toString().padStart(2, '0')\n return `${year}-${month}-${day}`\n}\n\nexport const formatDateTime = (date: Date) => {\n const dateString = formatDate(date)\n const hours = date.getHours().toString().padStart(2, '0')\n const minutes = date.getMinutes().toString().padStart(2, '0')\n return `${dateString}T${hours}:${minutes}`\n}\n\nexport const getDaysInMonth = (year: number, month: number): number => {\n const lastDayOfMonth = new Date(year, month + 1, 0)\n return lastDayOfMonth.getDate()\n}\n\nexport type Duration = {\n years?: number,\n months?: number,\n days?: number,\n hours?: number,\n minutes?: number,\n seconds?: number,\n milliseconds?: number,\n}\n\nexport const changeDuration = (date: Date, duration: Duration, isAdding?: boolean): Date => {\n const {\n years = 0,\n months = 0,\n days = 0,\n hours = 0,\n minutes = 0,\n seconds = 0,\n milliseconds = 0,\n } = duration\n\n // Check ranges\n if (years < 0) {\n console.error(`Range error years must be greater than 0: received ${years}`)\n return new Date(date)\n }\n if (months < 0 \|\| months > 11) {\n console.error(`Range error month must be 0 <= month <= 11: received ${months}`)\n return new Date(date)\n }\n if (days < 0) {\n console.error(`Range error days must be greater than 0: received ${days}`)\n return new Date(date)\n }\n if (hours < 0 \|\| hours > 23) {\n console.error(`Range error hours must be 0 <= hours <= 23: received ${hours}`)\n return new Date(date)\n }\n if (minutes < 0 \|\| minutes > 59) {\n console.error(`Range error minutes must be 0 <= minutes <= 59: received ${minutes}`)\n return new Date(date)\n }\n if (seconds < 0 \|\| seconds > 59) {\n console.error(`Range error seconds must be 0 <= seconds <= 59: received ${seconds}`)\n return new Date(date)\n }\n if (milliseconds < 0) {\n console.error(`Range error seconds must be greater than 0: received ${milliseconds}`)\n return new Date(date)\n }\n\n const multiplier = isAdding ? 1 : -1\n\n const newDate = new Date(date)\n\n newDate.setFullYear(newDate.getFullYear() + multiplier years)\n\n newDate.setMonth(newDate.getMonth() + multiplier * months)\n\n newDate.setDate(newDate.getDate() + multiplier * days)\n\n newDate.setHours(newDate.getHours() + multiplier * hours)\n\n newDate.setMinutes(newDate.getMinutes() + multiplier * minutes)\n\n newDate.setSeconds(newDate.getSeconds() + multiplier * seconds)\n\n newDate.setMilliseconds(newDate.getMilliseconds() + multiplier * milliseconds)\n\n return newDate\n}\n\nexport const addDuration = (date: Date, duration: Duration): Date => {\n return changeDuration(date, duration, true)\n}\n\nexport const subtractDuration = (date: Date, duration: Duration): Date => {\n return changeDuration(date, duration, false)\n}\n\nexport const getBetweenDuration = (startDate: Date, endDate: Date): Duration => {\n const durationInMilliseconds = endDate.getTime() - startDate.getTime()\n\n const millisecondsInSecond = 1000\n const millisecondsInMinute = 60 * millisecondsInSecond\n const millisecondsInHour = 60 * millisecondsInMinute\n const millisecondsInDay = 24 * millisecondsInHour\n const millisecondsInMonth = 30 * millisecondsInDay // Rough estimation, can be adjusted\n\n const years = Math.floor(durationInMilliseconds / (365.25 * millisecondsInDay))\n const months = Math.floor(durationInMilliseconds / millisecondsInMonth)\n const days = Math.floor(durationInMilliseconds / millisecondsInDay)\n const hours = Math.floor((durationInMilliseconds % millisecondsInDay) / millisecondsInHour)\n const seconds = Math.floor((durationInMilliseconds % millisecondsInHour) / millisecondsInSecond)\n const milliseconds = durationInMilliseconds % millisecondsInSecond\n\n return {\n years,\n months,\n days,\n hours,\n seconds,\n milliseconds,\n }\n}\n\n/** Checks if a given date is in the range of two dates\n \n An undefined value for startDate or endDate means no bound for the start or end respectively\n /\nexport const isInTimeSpan = (value: Date, startDate?: Date, endDate?: Date): boolean => {\n if (startDate && endDate) {\n console.assert(startDate <= endDate)\n return startDate <= value && value <= endDate\n } else if (startDate) {\n return startDate <= value\n } else if (endDate) {\n return endDate >= value\n } else {\n return true\n }\n}\n\n/* Compare two dates on the year, month, day /\nexport const equalDate = (date1: Date, date2: Date) => {\n return date1.getFullYear() === date2.getFullYear()\n && date1.getMonth() === date2.getMonth()\n && date1.getDate() === date2.getDate()\n}\n\nexport const getWeeksForCalenderMonth = (date: Date, weekStart: WeekDay, weeks: number = 6) => {\n const month = date.getMonth()\n const year = date.getFullYear()\n\n const dayList: Date[] = []\n let currentDate = new Date(year, month, 1) // Start of month\n const weekStartIndex = weekDayList.indexOf(weekStart)\n\n // Move the current day to the week before\n while (currentDate.getDay() !== weekStartIndex) {\n currentDate = subtractDuration(currentDate, { days: 1 })\n }\n\n while (dayList.length < 7 weeks) {\n const date = new Date(currentDate)\n date.setHours(date.getHours(), date.getMinutes()) // To make sure we are not overwriting the time\n dayList.push(date)\n currentDate = addDuration(currentDate, { days: 1 })\n }\n\n // weeks\n return equalSizeGroups(dayList, 7)\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 type { ButtonHTMLAttributes, PropsWithChildren, ReactNode } from 'react'\nimport { forwardRef } 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\nexport const IconButtonUtil = {\n icon: [...ButtonColorUtil.solid, 'transparent'] 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 The allowed colors for the IconButton\n /\nexport type IconButtonColor = typeof IconButtonUtil.icon[number]\n\n\n/\n The different sizes for a button\n /\ntype ButtonSizes = 'small' \| 'medium' \| 'large'\n\ntype IconButtonSize = 'tiny' \| '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<IconButtonSize, string> = {\n tiny: 'icon-btn-xs',\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\n/\n The shard properties between all button types\n /\nexport type IconButtonProps = PropsWithChildren<{\n /\n @default 'medium'\n /\n size?: IconButtonSize,\n color?: IconButtonColor,\n}> & ButtonHTMLAttributes<Element>\n\n/\n A button with a solid background and different sizes\n /\nconst SolidButton = forwardRef<HTMLButtonElement, SolidButtonProps>(function SolidButton({\n children,\n disabled = false,\n color = 'primary',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n className,\n ...restProps\n }, ref) {\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 ref={ref}\n onClick={onClick}\n disabled={disabled}\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={onClick}\n disabled={disabled}\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={onClick}\n disabled={disabled}\n className={clsx(\n {\n 'text-disabled-text cursor-not-allowed': disabled,\n [clsx(colorClasses, 'hover:bg-button-text-hover-background')]: !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 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 transparent: 'bg-transparent',\n }[color]\n\n return (\n <button\n disabled={disabled}\n className={clsx(\n {\n 'text-disabled-text bg-disabled-background cursor-not-allowed': disabled && color !== 'transparent',\n 'text-disabled-text cursor-not-allowed opacity-70': disabled && color === 'transparent',\n 'hover:bg-button-text-hover-background': !disabled && color === 'transparent',\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"],"mappings":"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","names":["import_react","import_clsx","clsx","Expandable","ExpandableUncontrolled","import_react","import_react","import_jsx_runtime","import_react","import_clsx","import_jsx_runtime","SolidButton","clsx","import_jsx_runtime","clsx"]}

package/dist/components/date/YearMonthPicker.mjs CHANGED Viewed

@@ -52,11 +52,22 @@ var range = (endOrRange, options) => {
 import clsx3 from "clsx";
 // src/components/layout-and-navigation/Expandable.tsx
-import { forwardRef, useEffect, useState } from "react";
-import { ChevronDown, ChevronUp } from "lucide-react";
+import { forwardRef, useCallback, useEffect, useState } from "react";
+import { ChevronDown } from "lucide-react";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
-var DefaultIcon = (expanded) => expanded ? /* @__PURE__ */ jsx(ChevronUp, { className: "min-w-4 w-4" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "min-w-4 w-4" });
+var ExpansionIcon = ({ isExpanded, className }) => {
+  return /* @__PURE__ */ jsx(
+    ChevronDown,
+    {
+      className: clsx(
+        "min-w-6 w-6 min-h-6 h-6 transition-transform duration-200 ease-in-out",
+        { "rotate-180": isExpanded },
+        className
+      )
+    }
+  );
+};
 var Expandable = forwardRef(function Expandable2({
   children,
   label,
@@ -67,24 +78,26 @@ var Expandable = forwardRef(function Expandable2({
   disabled = false,
   className,
   headerClassName,
-  contentClassName
+  contentClassName,
+  contentExpandedClassName
 }, ref) {
-  icon ??= DefaultIcon;
+  const defaultIcon = useCallback((expanded) => /* @__PURE__ */ jsx(ExpansionIcon, { isExpanded: expanded }), []);
+  icon ??= defaultIcon;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref,
-      className: clsx("col gap-y-0 bg-surface text-on-surface group rounded-lg shadow-sm", { "cursor-pointer": !clickOnlyOnHeader && !disabled }, className),
+      className: clsx("flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm", { "cursor-pointer": !clickOnlyOnHeader && !disabled }, className),
       onClick: () => !clickOnlyOnHeader && !disabled && onChange(!isExpanded),
       children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
             className: clsx(
-              "row py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none",
+              "flex-row-2 py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none",
               {
-                "group-hover:brightness-95": !isExpanded,
-                "hover:brightness-95": isExpanded && !disabled,
+                "group-hover:brightness-97": !isExpanded,
+                "hover:brightness-97": isExpanded && !disabled,
                 "cursor-pointer": clickOnlyOnHeader && !disabled
               },
               headerClassName
@@ -96,7 +109,20 @@ var Expandable = forwardRef(function Expandable2({
             ]
           }
         ),
-        isExpanded && /* @__PURE__ */ jsx("div", { className: clsx("col px-4 pb-2", contentClassName), children })
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: clsx(
+              "flex-col-2 px-4 transition-all duration-300 ease-in-out",
+              {
+                [clsx("max-h-96 opacity-100 pb-2 overflow-y-auto", contentExpandedClassName)]: isExpanded,
+                "max-h-0 opacity-0 overflow-hidden": !isExpanded
+              },
+              contentClassName
+            ),
+            children
+          }
+        )
       ]
     }
   );
@@ -186,7 +212,7 @@ var subtractDuration = (date, duration) => {
 import { createContext, useContext, useEffect as useEffect3, useState as useState3 } from "react";
 // src/hooks/useLocalStorage.ts
-import { useCallback, useEffect as useEffect2, useState as useState2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useState as useState2 } from "react";
 // src/localization/util.ts
 var languages = ["en", "de"];
@@ -218,6 +244,7 @@ var useLocale = (overWriteLanguage) => {
 };
 // src/components/user-action/Button.tsx
+import { forwardRef as forwardRef2 } from "react";
 import clsx2 from "clsx";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var ButtonColorUtil = {
@@ -243,7 +270,7 @@ var ButtonUtil = {
   paddingMapping,
   iconPaddingMapping
 };
-var SolidButton = ({
+var SolidButton = forwardRef2(function SolidButton2({
   children,
   disabled = false,
   color = "primary",
@@ -253,7 +280,7 @@ var SolidButton = ({
   onClick,
   className,
   ...restProps
-}) => {
+}, ref) {
   const colorClasses = {
     primary: "bg-button-solid-primary-background text-button-solid-primary-text",
     secondary: "bg-button-solid-secondary-background text-button-solid-secondary-text",
@@ -275,8 +302,9 @@ var SolidButton = ({
   return /* @__PURE__ */ jsxs2(
     "button",
     {
-      onClick: disabled ? void 0 : onClick,
-      disabled: disabled || onClick === void 0,
+      ref,
+      onClick,
+      disabled,
       className: clsx2(
         {
           "text-disabled-text bg-disabled-background cursor-not-allowed": disabled,
@@ -311,7 +339,7 @@ var SolidButton = ({
       ]
     }
   );
-};
+});
 // src/components/date/YearMonthPicker.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
@@ -342,7 +370,7 @@ var YearMonthPicker = ({
     return null;
   }
   const years = range([start.getFullYear(), end.getFullYear()], { exclusiveEnd: false });
-  return /* @__PURE__ */ jsx4("div", { className: clsx3("col select-none", className), children: /* @__PURE__ */ jsx4(Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ jsx4("div", { className: "col gap-y-1 mr-3", children: years.map((year) => {
+  return /* @__PURE__ */ jsx4("div", { className: clsx3("flex-col-0 select-none", className), children: /* @__PURE__ */ jsx4(Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ jsx4("div", { className: "flex-col-1 mr-3", children: years.map((year) => {
     const selectedYear = displayedYearMonth.getFullYear() === year;
     return /* @__PURE__ */ jsx4(
       ExpandableUncontrolled,
@@ -351,7 +379,7 @@ var YearMonthPicker = ({
         label: /* @__PURE__ */ jsx4("span", { className: clsx3({ "text-primary font-bold": selectedYear }), children: year }),
         isExpanded: showValueOpen && selectedYear,
         contentClassName: "gap-y-1",
-        children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ jsx4("div", { className: "row gap-x-1", children: monthList.map((month) => {
+        children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ jsx4("div", { className: "flex-row-1", children: monthList.map((month) => {
           const monthIndex = monthsList.indexOf(month);
           const newDate = new Date(year, monthIndex);
           const selectedMonth = selectedYear && monthIndex === displayedYearMonth.getMonth();

package/dist/components/date/YearMonthPicker.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/date/YearMonthPicker.tsx","../../../src/util/noop.ts","../../../src/util/array.ts","../../../src/components/layout-and-navigation/Expandable.tsx","../../../src/util/date.ts","../../../src/localization/LanguageProvider.tsx","../../../src/hooks/useLocalStorage.ts","../../../src/localization/util.ts","../../../src/components/user-action/Button.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\nimport { Scrollbars } from 'react-custom-scrollbars-2'\nimport { noop } from '../../util/noop'\nimport { equalSizeGroups, range } from '../../util/array'\nimport clsx from 'clsx'\nimport { ExpandableUncontrolled } from '../layout-and-navigation/Expandable'\nimport { addDuration, monthsList, subtractDuration } from '../../util/date'\nimport { useLocale } from '../../localization/LanguageProvider'\nimport { SolidButton } from '../user-action/Button'\n\nexport type YearMonthPickerProps = {\n displayedYearMonth?: Date,\n start?: Date,\n end?: Date,\n onChange?: (date: Date) => void,\n className?: string,\n maxHeight?: number,\n showValueOpen?: boolean,\n}\n\n// TODO use a dynamically loading infinite list here\nexport const YearMonthPicker = ({\n displayedYearMonth = new Date(),\n start = subtractDuration(new Date(), { years: 50 }),\n end = addDuration(new Date(), { years: 50 }),\n onChange = noop,\n className = '',\n maxHeight = 300,\n showValueOpen = true\n }: YearMonthPickerProps) => {\n const locale = useLocale()\n const ref = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n const scrollToItem = () => {\n if (ref.current) {\n ref.current.scrollIntoView({\n behavior: 'instant',\n block: 'center',\n })\n }\n }\n\n scrollToItem()\n }, [ref])\n\n if (end < start) {\n console.error(`startYear: (${start}) less than endYear: (${end})`)\n return null\n }\n\n const years = range([start.getFullYear(), end.getFullYear()], { exclusiveEnd: false })\n\n return (\n <div className={clsx('col select-none', className)}>\n <Scrollbars autoHeight autoHeightMax={maxHeight} style={{ height: '100%' }}>\n <div className=\"col gap-y-1 mr-3\">\n {years.map(year => {\n const selectedYear = displayedYearMonth.getFullYear() === year\n return (\n <ExpandableUncontrolled\n key={year}\n ref={(displayedYearMonth.getFullYear() ?? new Date().getFullYear()) === year ? ref : undefined}\n label={<span className={clsx({ 'text-primary font-bold': selectedYear })}>{year}</span>}\n isExpanded={showValueOpen && selectedYear}\n contentClassName=\"gap-y-1\"\n >\n {equalSizeGroups([...monthsList], 3).map((monthList, index) => (\n <div key={index} className=\"row gap-x-1\">\n {monthList.map(month => {\n const monthIndex = monthsList.indexOf(month)\n const newDate = new Date(year, monthIndex)\n\n const selectedMonth = selectedYear && monthIndex === displayedYearMonth.getMonth()\n const firstOfMonth = new Date(year, monthIndex, 1)\n const lastOfMonth = new Date(year, monthIndex, 1)\n const isAfterStart = start === undefined \|\| start <= addDuration(subtractDuration(lastOfMonth, { days: 1 }), { months: 1 })\n const isBeforeEnd = end === undefined \|\| firstOfMonth <= end\n const isValid = isAfterStart && isBeforeEnd\n return (\n <SolidButton\n key={month}\n disabled={!isValid}\n color={selectedMonth && isValid ? 'primary' : 'neutral'}\n className=\"flex-1\"\n size=\"small\"\n onClick={() => {\n onChange(newDate)\n }}\n >\n {new Intl.DateTimeFormat(locale, { month: 'short' }).format(newDate)}\n </SolidButton>\n )\n })}\n </div>\n ))}\n </ExpandableUncontrolled>\n )\n })}\n </div>\n </Scrollbars>\n </div>\n )\n}\n\nexport const YearMonthPickerUncontrolled = ({\n displayedYearMonth,\n onChange = noop,\n ...props\n }: YearMonthPickerProps) => {\n const [yearMonth, setYearMonth] = useState<Date>(displayedYearMonth ?? new Date())\n\n useEffect(() => setYearMonth(displayedYearMonth), [displayedYearMonth])\n\n return (\n <YearMonthPicker\n displayedYearMonth={yearMonth}\n onChange={date => {\n setYearMonth(date)\n onChange(date)\n }}\n {...props}\n />\n )\n}\n","export const noop = () => undefined\n","export const equalSizeGroups = <T>(array: T[], groupSize: number): T[][] => {\n if (groupSize <= 0) {\n console.warn(`group size should be greater than 0: groupSize = ${groupSize}`)\n return [[...array]]\n }\n\n const groups = []\n for (let i = 0; i < array.length; i += groupSize) {\n groups.push(array.slice(i, Math.min(i + groupSize, array.length)))\n }\n return groups\n}\n\nexport type RangeOptions = {\n /** Whether the range can be defined empty via end < start without a warning /\n allowEmptyRange: boolean,\n stepSize: number,\n exclusiveStart: boolean,\n exclusiveEnd: boolean,\n}\n\nconst defaultRangeOptions: RangeOptions = {\n allowEmptyRange: false,\n stepSize: 1,\n exclusiveStart: false,\n exclusiveEnd: true,\n}\n\n/\n @param endOrRange The end value or a range [start, end], end is exclusive\n * @param options the options for defining the range\n /\nexport const range = (endOrRange: number \| [number, number], options?: Partial<RangeOptions>): number[] => {\n const { allowEmptyRange, stepSize, exclusiveStart, exclusiveEnd } = { ...defaultRangeOptions, ...options }\n let start = 0\n let end: number\n if (typeof endOrRange === 'number') {\n end = endOrRange\n } else {\n start = endOrRange[0]\n end = endOrRange[1]\n }\n if (!exclusiveEnd) {\n end -= 1\n }\n if (exclusiveStart) {\n start += 1\n }\n\n if (end - 1 < start) {\n if (!allowEmptyRange) {\n console.warn(`range: end (${end}) < start (${start}) should be allowed explicitly, set options.allowEmptyRange to true`)\n }\n return []\n }\n return Array.from({ length: end - start }, (_, index) => index stepSize + start)\n}\n\n/** Finds the closest match\n * @param list The list of all possible matches\n * @param firstCloser Return whether item1 is closer than item2\n /\nexport const closestMatch = <T>(list: T[], firstCloser: (item1: T, item2: T) => boolean) => {\n return list.reduce((item1, item2) => {\n return firstCloser(item1, item2) ? item1 : item2\n })\n}\n\n/\n returns the item in middle of a list and its neighbours before and after\n * e.g. [1,2,3,4,5,6] for item = 1 would return [5,6,1,2,3]\n /\nexport const getNeighbours = <T>(list: T[], item: T, neighbourDistance: number = 2) => {\n const index = list.indexOf(item)\n const totalItems = neighbourDistance 2 + 1\n if (list.length < totalItems) {\n console.warn('List is to short')\n return list\n }\n\n if (index === -1) {\n console.error('item not found in list')\n return list.splice(0, totalItems)\n }\n\n let start = index - neighbourDistance\n if (start < 0) {\n start += list.length\n }\n const end = (index + neighbourDistance + 1) % list.length\n\n const result: T[] = []\n let ignoreOnce = list.length === totalItems\n for (let i = start; i !== end \|\| ignoreOnce; i = (i + 1) % list.length) {\n result.push(list[i]!)\n if (end === i && ignoreOnce) {\n ignoreOnce = false\n }\n }\n return result\n}\n\nexport const createLoopingListWithIndex = <T>(list: T[], startIndex: number = 0, length: number = 0, forwards: boolean = true) => {\n if (length < 0) {\n console.warn(`createLoopingList: length must be >= 0, given ${length}`)\n } else if (length === 0) {\n length = list.length\n }\n\n const returnList: [number, T][] = []\n\n if (forwards) {\n for (let i = startIndex; returnList.length < length; i = (i + 1) % list.length) {\n returnList.push([i, list[i]!])\n }\n } else {\n for (let i = startIndex; returnList.length < length; i = i === 0 ? i = list.length - 1 : i - 1) {\n returnList.push([i, list[i]!])\n }\n }\n\n return returnList\n}\n\nexport const createLoopingList = <T>(list: T[], startIndex: number = 0, length: number = 0, forwards: boolean = true) => {\n return createLoopingListWithIndex(list, startIndex, length, forwards).map(([_, item]) => item)\n}\n\nexport const ArrayUtil = {\n unique: <T>(list: T[]): T[] => {\n const seen = new Set<T>()\n return list.filter((item) => {\n if (seen.has(item)) {\n return false\n }\n seen.add(item)\n return true\n })\n },\n\n difference: <T>(list: T[], removeList: T[]): T[] => {\n const remove = new Set<T>(removeList)\n return list.filter((item) => !remove.has(item))\n }\n}\n","import type { PropsWithChildren, ReactNode } from 'react'\nimport { forwardRef, useEffect, useState } from 'react'\nimport { ChevronDown, ChevronUp } from 'lucide-react'\nimport clsx from 'clsx'\nimport { noop } from '../../util/noop'\n\ntype IconBuilder = (expanded: boolean) => ReactNode\n\nexport type ExpandableProps = PropsWithChildren<{\n label: ReactNode,\n icon?: IconBuilder,\n isExpanded?: boolean,\n onChange?: (isExpanded: boolean) => void,\n /*\n Whether the expansion should only happen when the header is clicked or on the entire component\n /\n clickOnlyOnHeader?: boolean,\n disabled?: boolean,\n className?: string,\n headerClassName?: string,\n contentClassName?: string,\n}>\n\nconst DefaultIcon: IconBuilder = (expanded) => expanded ?\n (<ChevronUp className=\"min-w-4 w-4\"/>)\n : (<ChevronDown className=\"min-w-4 w-4\"/>)\n\n\n/\n A Component for showing and hiding content\n /\nexport const Expandable = forwardRef<HTMLDivElement, ExpandableProps>(function Expandable({\n children,\n label,\n icon,\n isExpanded = false,\n onChange = noop,\n clickOnlyOnHeader = true,\n disabled = false,\n className,\n headerClassName,\n contentClassName,\n }, ref) {\n icon ??= DefaultIcon\n\n return (\n <div\n ref={ref}\n className={clsx('col gap-y-0 bg-surface text-on-surface group rounded-lg shadow-sm', { 'cursor-pointer': !clickOnlyOnHeader && !disabled }, className)}\n onClick={() => !clickOnlyOnHeader && !disabled && onChange(!isExpanded)}\n >\n <div\n className={clsx(\n 'row py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none',\n {\n 'group-hover:brightness-95': !isExpanded,\n 'hover:brightness-95': isExpanded && !disabled,\n 'cursor-pointer': clickOnlyOnHeader && !disabled,\n },\n headerClassName\n )}\n onClick={() => clickOnlyOnHeader && !disabled && onChange(!isExpanded)}\n >\n {label}\n {icon(isExpanded)}\n </div>\n {isExpanded && (\n <div className={clsx('col px-4 pb-2', contentClassName)}>\n {children}\n </div>\n )}\n </div>\n )\n})\n\nexport const ExpandableUncontrolled = forwardRef<HTMLDivElement, ExpandableProps>(function ExpandableUncontrolled({\n isExpanded,\n onChange = noop,\n ...props\n },\n ref) {\n const [usedIsExpanded, setUsedIsExpanded] = useState(isExpanded)\n\n useEffect(() => {\n setUsedIsExpanded(isExpanded)\n }, [isExpanded])\n\n return (\n <Expandable\n {...props}\n ref={ref}\n isExpanded={usedIsExpanded}\n onChange={value => {\n onChange(value)\n setUsedIsExpanded(value)\n }}\n />\n )\n})\n","import { equalSizeGroups } from './array'\n\nexport const monthsList = ['january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december'] as const\nexport type Month = typeof monthsList[number]\n\nexport const weekDayList = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'] as const\nexport type WeekDay = typeof weekDayList[number]\n\nexport const formatDate = (date: Date) => {\n const year = date.getFullYear().toString().padStart(4, '0')\n const month = (date.getMonth() + 1).toString().padStart(2, '0')\n const day = (date.getDate()).toString().padStart(2, '0')\n return `${year}-${month}-${day}`\n}\n\nexport const formatDateTime = (date: Date) => {\n const dateString = formatDate(date)\n const hours = date.getHours().toString().padStart(2, '0')\n const minutes = date.getMinutes().toString().padStart(2, '0')\n return `${dateString}T${hours}:${minutes}`\n}\n\nexport const getDaysInMonth = (year: number, month: number): number => {\n const lastDayOfMonth = new Date(year, month + 1, 0)\n return lastDayOfMonth.getDate()\n}\n\nexport type Duration = {\n years?: number,\n months?: number,\n days?: number,\n hours?: number,\n minutes?: number,\n seconds?: number,\n milliseconds?: number,\n}\n\nexport const changeDuration = (date: Date, duration: Duration, isAdding?: boolean): Date => {\n const {\n years = 0,\n months = 0,\n days = 0,\n hours = 0,\n minutes = 0,\n seconds = 0,\n milliseconds = 0,\n } = duration\n\n // Check ranges\n if (years < 0) {\n console.error(`Range error years must be greater than 0: received ${years}`)\n return new Date(date)\n }\n if (months < 0 \|\| months > 11) {\n console.error(`Range error month must be 0 <= month <= 11: received ${months}`)\n return new Date(date)\n }\n if (days < 0) {\n console.error(`Range error days must be greater than 0: received ${days}`)\n return new Date(date)\n }\n if (hours < 0 \|\| hours > 23) {\n console.error(`Range error hours must be 0 <= hours <= 23: received ${hours}`)\n return new Date(date)\n }\n if (minutes < 0 \|\| minutes > 59) {\n console.error(`Range error minutes must be 0 <= minutes <= 59: received ${minutes}`)\n return new Date(date)\n }\n if (seconds < 0 \|\| seconds > 59) {\n console.error(`Range error seconds must be 0 <= seconds <= 59: received ${seconds}`)\n return new Date(date)\n }\n if (milliseconds < 0) {\n console.error(`Range error seconds must be greater than 0: received ${milliseconds}`)\n return new Date(date)\n }\n\n const multiplier = isAdding ? 1 : -1\n\n const newDate = new Date(date)\n\n newDate.setFullYear(newDate.getFullYear() + multiplier years)\n\n newDate.setMonth(newDate.getMonth() + multiplier * months)\n\n newDate.setDate(newDate.getDate() + multiplier * days)\n\n newDate.setHours(newDate.getHours() + multiplier * hours)\n\n newDate.setMinutes(newDate.getMinutes() + multiplier * minutes)\n\n newDate.setSeconds(newDate.getSeconds() + multiplier * seconds)\n\n newDate.setMilliseconds(newDate.getMilliseconds() + multiplier * milliseconds)\n\n return newDate\n}\n\nexport const addDuration = (date: Date, duration: Duration): Date => {\n return changeDuration(date, duration, true)\n}\n\nexport const subtractDuration = (date: Date, duration: Duration): Date => {\n return changeDuration(date, duration, false)\n}\n\nexport const getBetweenDuration = (startDate: Date, endDate: Date): Duration => {\n const durationInMilliseconds = endDate.getTime() - startDate.getTime()\n\n const millisecondsInSecond = 1000\n const millisecondsInMinute = 60 * millisecondsInSecond\n const millisecondsInHour = 60 * millisecondsInMinute\n const millisecondsInDay = 24 * millisecondsInHour\n const millisecondsInMonth = 30 * millisecondsInDay // Rough estimation, can be adjusted\n\n const years = Math.floor(durationInMilliseconds / (365.25 * millisecondsInDay))\n const months = Math.floor(durationInMilliseconds / millisecondsInMonth)\n const days = Math.floor(durationInMilliseconds / millisecondsInDay)\n const hours = Math.floor((durationInMilliseconds % millisecondsInDay) / millisecondsInHour)\n const seconds = Math.floor((durationInMilliseconds % millisecondsInHour) / millisecondsInSecond)\n const milliseconds = durationInMilliseconds % millisecondsInSecond\n\n return {\n years,\n months,\n days,\n hours,\n seconds,\n milliseconds,\n }\n}\n\n/** Checks if a given date is in the range of two dates\n \n An undefined value for startDate or endDate means no bound for the start or end respectively\n /\nexport const isInTimeSpan = (value: Date, startDate?: Date, endDate?: Date): boolean => {\n if (startDate && endDate) {\n console.assert(startDate <= endDate)\n return startDate <= value && value <= endDate\n } else if (startDate) {\n return startDate <= value\n } else if (endDate) {\n return endDate >= value\n } else {\n return true\n }\n}\n\n/* Compare two dates on the year, month, day /\nexport const equalDate = (date1: Date, date2: Date) => {\n return date1.getFullYear() === date2.getFullYear()\n && date1.getMonth() === date2.getMonth()\n && date1.getDate() === date2.getDate()\n}\n\nexport const getWeeksForCalenderMonth = (date: Date, weekStart: WeekDay, weeks: number = 6) => {\n const month = date.getMonth()\n const year = date.getFullYear()\n\n const dayList: Date[] = []\n let currentDate = new Date(year, month, 1) // Start of month\n const weekStartIndex = weekDayList.indexOf(weekStart)\n\n // Move the current day to the week before\n while (currentDate.getDay() !== weekStartIndex) {\n currentDate = subtractDuration(currentDate, { days: 1 })\n }\n\n while (dayList.length < 7 weeks) {\n const date = new Date(currentDate)\n date.setHours(date.getHours(), date.getMinutes()) // To make sure we are not overwriting the time\n dayList.push(date)\n currentDate = addDuration(currentDate, { days: 1 })\n }\n\n // weeks\n return equalSizeGroups(dayList, 7)\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 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\nexport const IconButtonUtil = {\n icon: [...ButtonColorUtil.solid, 'transparent'] 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 The allowed colors for the IconButton\n /\nexport type IconButtonColor = typeof IconButtonUtil.icon[number]\n\n\n/\n The different sizes for a button\n /\ntype ButtonSizes = 'small' \| 'medium' \| 'large'\n\ntype IconButtonSize = 'tiny' \| '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<IconButtonSize, string> = {\n tiny: 'icon-btn-xs',\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\n/\n The shard properties between all button types\n /\nexport type IconButtonProps = PropsWithChildren<{\n /\n @default 'medium'\n /\n size?: IconButtonSize,\n color?: IconButtonColor,\n}> & ButtonHTMLAttributes<Element>\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')]: !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 transparent: 'bg-transparent',\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 && color !== 'transparent',\n 'text-disabled-text cursor-not-allowed opacity-70': disabled && color === 'transparent',\n 'hover:bg-button-text-hover-background': !disabled && color === 'transparent',\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"],"mappings":"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","names":["useEffect","useState","clsx","Expandable","ExpandableUncontrolled","useEffect","useState","useEffect","useState","jsx","clsx","jsx","jsxs","jsx","useEffect","clsx","useState"]}
1	+ {"version":3,"sources":["../../../src/components/date/YearMonthPicker.tsx","../../../src/util/noop.ts","../../../src/util/array.ts","../../../src/components/layout-and-navigation/Expandable.tsx","../../../src/util/date.ts","../../../src/localization/LanguageProvider.tsx","../../../src/hooks/useLocalStorage.ts","../../../src/localization/util.ts","../../../src/components/user-action/Button.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\nimport { Scrollbars } from 'react-custom-scrollbars-2'\nimport { noop } from '../../util/noop'\nimport { equalSizeGroups, range } from '../../util/array'\nimport clsx from 'clsx'\nimport { ExpandableUncontrolled } from '../layout-and-navigation/Expandable'\nimport { addDuration, monthsList, subtractDuration } from '../../util/date'\nimport { useLocale } from '../../localization/LanguageProvider'\nimport { SolidButton } from '../user-action/Button'\n\nexport type YearMonthPickerProps = {\n displayedYearMonth?: Date,\n start?: Date,\n end?: Date,\n onChange?: (date: Date) => void,\n className?: string,\n maxHeight?: number,\n showValueOpen?: boolean,\n}\n\n// TODO use a dynamically loading infinite list here\nexport const YearMonthPicker = ({\n displayedYearMonth = new Date(),\n start = subtractDuration(new Date(), { years: 50 }),\n end = addDuration(new Date(), { years: 50 }),\n onChange = noop,\n className = '',\n maxHeight = 300,\n showValueOpen = true\n }: YearMonthPickerProps) => {\n const locale = useLocale()\n const ref = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n const scrollToItem = () => {\n if (ref.current) {\n ref.current.scrollIntoView({\n behavior: 'instant',\n block: 'center',\n })\n }\n }\n\n scrollToItem()\n }, [ref])\n\n if (end < start) {\n console.error(`startYear: (${start}) less than endYear: (${end})`)\n return null\n }\n\n const years = range([start.getFullYear(), end.getFullYear()], { exclusiveEnd: false })\n\n return (\n <div className={clsx('flex-col-0 select-none', className)}>\n <Scrollbars autoHeight autoHeightMax={maxHeight} style={{ height: '100%' }}>\n <div className=\"flex-col-1 mr-3\">\n {years.map(year => {\n const selectedYear = displayedYearMonth.getFullYear() === year\n return (\n <ExpandableUncontrolled\n key={year}\n ref={(displayedYearMonth.getFullYear() ?? new Date().getFullYear()) === year ? ref : undefined}\n label={<span className={clsx({ 'text-primary font-bold': selectedYear })}>{year}</span>}\n isExpanded={showValueOpen && selectedYear}\n contentClassName=\"gap-y-1\"\n >\n {equalSizeGroups([...monthsList], 3).map((monthList, index) => (\n <div key={index} className=\"flex-row-1\">\n {monthList.map(month => {\n const monthIndex = monthsList.indexOf(month)\n const newDate = new Date(year, monthIndex)\n\n const selectedMonth = selectedYear && monthIndex === displayedYearMonth.getMonth()\n const firstOfMonth = new Date(year, monthIndex, 1)\n const lastOfMonth = new Date(year, monthIndex, 1)\n const isAfterStart = start === undefined \|\| start <= addDuration(subtractDuration(lastOfMonth, { days: 1 }), { months: 1 })\n const isBeforeEnd = end === undefined \|\| firstOfMonth <= end\n const isValid = isAfterStart && isBeforeEnd\n return (\n <SolidButton\n key={month}\n disabled={!isValid}\n color={selectedMonth && isValid ? 'primary' : 'neutral'}\n className=\"flex-1\"\n size=\"small\"\n onClick={() => {\n onChange(newDate)\n }}\n >\n {new Intl.DateTimeFormat(locale, { month: 'short' }).format(newDate)}\n </SolidButton>\n )\n })}\n </div>\n ))}\n </ExpandableUncontrolled>\n )\n })}\n </div>\n </Scrollbars>\n </div>\n )\n}\n\nexport const YearMonthPickerUncontrolled = ({\n displayedYearMonth,\n onChange = noop,\n ...props\n }: YearMonthPickerProps) => {\n const [yearMonth, setYearMonth] = useState<Date>(displayedYearMonth ?? new Date())\n\n useEffect(() => setYearMonth(displayedYearMonth), [displayedYearMonth])\n\n return (\n <YearMonthPicker\n displayedYearMonth={yearMonth}\n onChange={date => {\n setYearMonth(date)\n onChange(date)\n }}\n {...props}\n />\n )\n}\n","export const noop = () => undefined\n","export const equalSizeGroups = <T>(array: T[], groupSize: number): T[][] => {\n if (groupSize <= 0) {\n console.warn(`group size should be greater than 0: groupSize = ${groupSize}`)\n return [[...array]]\n }\n\n const groups = []\n for (let i = 0; i < array.length; i += groupSize) {\n groups.push(array.slice(i, Math.min(i + groupSize, array.length)))\n }\n return groups\n}\n\nexport type RangeOptions = {\n /** Whether the range can be defined empty via end < start without a warning /\n allowEmptyRange: boolean,\n stepSize: number,\n exclusiveStart: boolean,\n exclusiveEnd: boolean,\n}\n\nconst defaultRangeOptions: RangeOptions = {\n allowEmptyRange: false,\n stepSize: 1,\n exclusiveStart: false,\n exclusiveEnd: true,\n}\n\n/\n @param endOrRange The end value or a range [start, end], end is exclusive\n * @param options the options for defining the range\n /\nexport const range = (endOrRange: number \| [number, number], options?: Partial<RangeOptions>): number[] => {\n const { allowEmptyRange, stepSize, exclusiveStart, exclusiveEnd } = { ...defaultRangeOptions, ...options }\n let start = 0\n let end: number\n if (typeof endOrRange === 'number') {\n end = endOrRange\n } else {\n start = endOrRange[0]\n end = endOrRange[1]\n }\n if (!exclusiveEnd) {\n end -= 1\n }\n if (exclusiveStart) {\n start += 1\n }\n\n if (end - 1 < start) {\n if (!allowEmptyRange) {\n console.warn(`range: end (${end}) < start (${start}) should be allowed explicitly, set options.allowEmptyRange to true`)\n }\n return []\n }\n return Array.from({ length: end - start }, (_, index) => index stepSize + start)\n}\n\n/** Finds the closest match\n * @param list The list of all possible matches\n * @param firstCloser Return whether item1 is closer than item2\n /\nexport const closestMatch = <T>(list: T[], firstCloser: (item1: T, item2: T) => boolean) => {\n return list.reduce((item1, item2) => {\n return firstCloser(item1, item2) ? item1 : item2\n })\n}\n\n/\n returns the item in middle of a list and its neighbours before and after\n * e.g. [1,2,3,4,5,6] for item = 1 would return [5,6,1,2,3]\n /\nexport const getNeighbours = <T>(list: T[], item: T, neighbourDistance: number = 2) => {\n const index = list.indexOf(item)\n const totalItems = neighbourDistance 2 + 1\n if (list.length < totalItems) {\n console.warn('List is to short')\n return list\n }\n\n if (index === -1) {\n console.error('item not found in list')\n return list.splice(0, totalItems)\n }\n\n let start = index - neighbourDistance\n if (start < 0) {\n start += list.length\n }\n const end = (index + neighbourDistance + 1) % list.length\n\n const result: T[] = []\n let ignoreOnce = list.length === totalItems\n for (let i = start; i !== end \|\| ignoreOnce; i = (i + 1) % list.length) {\n result.push(list[i]!)\n if (end === i && ignoreOnce) {\n ignoreOnce = false\n }\n }\n return result\n}\n\nexport const createLoopingListWithIndex = <T>(list: T[], startIndex: number = 0, length: number = 0, forwards: boolean = true) => {\n if (length < 0) {\n console.warn(`createLoopingList: length must be >= 0, given ${length}`)\n } else if (length === 0) {\n length = list.length\n }\n\n const returnList: [number, T][] = []\n\n if (forwards) {\n for (let i = startIndex; returnList.length < length; i = (i + 1) % list.length) {\n returnList.push([i, list[i]!])\n }\n } else {\n for (let i = startIndex; returnList.length < length; i = i === 0 ? i = list.length - 1 : i - 1) {\n returnList.push([i, list[i]!])\n }\n }\n\n return returnList\n}\n\nexport const createLoopingList = <T>(list: T[], startIndex: number = 0, length: number = 0, forwards: boolean = true) => {\n return createLoopingListWithIndex(list, startIndex, length, forwards).map(([_, item]) => item)\n}\n\nexport const ArrayUtil = {\n unique: <T>(list: T[]): T[] => {\n const seen = new Set<T>()\n return list.filter((item) => {\n if (seen.has(item)) {\n return false\n }\n seen.add(item)\n return true\n })\n },\n\n difference: <T>(list: T[], removeList: T[]): T[] => {\n const remove = new Set<T>(removeList)\n return list.filter((item) => !remove.has(item))\n }\n}\n","import type { PropsWithChildren, ReactNode } from 'react'\nimport { forwardRef, useCallback, useEffect, useState } from 'react'\nimport { ChevronDown } from 'lucide-react'\nimport clsx from 'clsx'\nimport { noop } from '../../util/noop'\n\ntype IconBuilder = (expanded: boolean) => ReactNode\n\nexport type ExpandableProps = PropsWithChildren<{\n label: ReactNode,\n icon?: IconBuilder,\n isExpanded?: boolean,\n onChange?: (isExpanded: boolean) => void,\n /*\n Whether the expansion should only happen when the header is clicked or on the entire component\n /\n clickOnlyOnHeader?: boolean,\n disabled?: boolean,\n className?: string,\n headerClassName?: string,\n contentClassName?: string,\n contentExpandedClassName?: string,\n}>\n\n\nexport type ExpansionIconProps = {\n isExpanded: boolean,\n className?: string,\n}\n\nexport const ExpansionIcon = ({ isExpanded, className }: ExpansionIconProps) => {\n return (\n <ChevronDown\n className={clsx(\n 'min-w-6 w-6 min-h-6 h-6 transition-transform duration-200 ease-in-out',\n { 'rotate-180': isExpanded },\n className\n )}\n />\n )\n}\n\n\n/\n A Component for showing and hiding content\n /\nexport const Expandable = forwardRef<HTMLDivElement, ExpandableProps>(function Expandable({\n children,\n label,\n icon,\n isExpanded = false,\n onChange = noop,\n clickOnlyOnHeader = true,\n disabled = false,\n className,\n headerClassName,\n contentClassName,\n contentExpandedClassName,\n }, ref) {\n const defaultIcon = useCallback((expanded: boolean) => <ExpansionIcon isExpanded={expanded}/>, [])\n icon ??= defaultIcon\n\n return (\n <div\n ref={ref}\n className={clsx('flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm', { 'cursor-pointer': !clickOnlyOnHeader && !disabled }, className)}\n onClick={() => !clickOnlyOnHeader && !disabled && onChange(!isExpanded)}\n >\n <div\n className={clsx(\n 'flex-row-2 py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none',\n {\n 'group-hover:brightness-97': !isExpanded,\n 'hover:brightness-97': isExpanded && !disabled,\n 'cursor-pointer': clickOnlyOnHeader && !disabled,\n },\n headerClassName\n )}\n onClick={() => clickOnlyOnHeader && !disabled && onChange(!isExpanded)}\n >\n {label}\n {icon(isExpanded)}\n </div>\n <div\n className={clsx(\n 'flex-col-2 px-4 transition-all duration-300 ease-in-out',\n {\n [clsx('max-h-96 opacity-100 pb-2 overflow-y-auto', contentExpandedClassName)]: isExpanded,\n 'max-h-0 opacity-0 overflow-hidden': !isExpanded,\n },\n contentClassName\n )}\n >\n {children}\n </div>\n </div>\n )\n})\n\nexport const ExpandableUncontrolled = forwardRef<HTMLDivElement, ExpandableProps>(function ExpandableUncontrolled({\n isExpanded,\n onChange = noop,\n ...props\n },\n ref) {\n const [usedIsExpanded, setUsedIsExpanded] = useState(isExpanded)\n\n useEffect(() => {\n setUsedIsExpanded(isExpanded)\n }, [isExpanded])\n\n return (\n <Expandable\n {...props}\n ref={ref}\n isExpanded={usedIsExpanded}\n onChange={value => {\n onChange(value)\n setUsedIsExpanded(value)\n }}\n />\n )\n})\n","import { equalSizeGroups } from './array'\n\nexport const monthsList = ['january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december'] as const\nexport type Month = typeof monthsList[number]\n\nexport const weekDayList = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'] as const\nexport type WeekDay = typeof weekDayList[number]\n\nexport const formatDate = (date: Date) => {\n const year = date.getFullYear().toString().padStart(4, '0')\n const month = (date.getMonth() + 1).toString().padStart(2, '0')\n const day = (date.getDate()).toString().padStart(2, '0')\n return `${year}-${month}-${day}`\n}\n\nexport const formatDateTime = (date: Date) => {\n const dateString = formatDate(date)\n const hours = date.getHours().toString().padStart(2, '0')\n const minutes = date.getMinutes().toString().padStart(2, '0')\n return `${dateString}T${hours}:${minutes}`\n}\n\nexport const getDaysInMonth = (year: number, month: number): number => {\n const lastDayOfMonth = new Date(year, month + 1, 0)\n return lastDayOfMonth.getDate()\n}\n\nexport type Duration = {\n years?: number,\n months?: number,\n days?: number,\n hours?: number,\n minutes?: number,\n seconds?: number,\n milliseconds?: number,\n}\n\nexport const changeDuration = (date: Date, duration: Duration, isAdding?: boolean): Date => {\n const {\n years = 0,\n months = 0,\n days = 0,\n hours = 0,\n minutes = 0,\n seconds = 0,\n milliseconds = 0,\n } = duration\n\n // Check ranges\n if (years < 0) {\n console.error(`Range error years must be greater than 0: received ${years}`)\n return new Date(date)\n }\n if (months < 0 \|\| months > 11) {\n console.error(`Range error month must be 0 <= month <= 11: received ${months}`)\n return new Date(date)\n }\n if (days < 0) {\n console.error(`Range error days must be greater than 0: received ${days}`)\n return new Date(date)\n }\n if (hours < 0 \|\| hours > 23) {\n console.error(`Range error hours must be 0 <= hours <= 23: received ${hours}`)\n return new Date(date)\n }\n if (minutes < 0 \|\| minutes > 59) {\n console.error(`Range error minutes must be 0 <= minutes <= 59: received ${minutes}`)\n return new Date(date)\n }\n if (seconds < 0 \|\| seconds > 59) {\n console.error(`Range error seconds must be 0 <= seconds <= 59: received ${seconds}`)\n return new Date(date)\n }\n if (milliseconds < 0) {\n console.error(`Range error seconds must be greater than 0: received ${milliseconds}`)\n return new Date(date)\n }\n\n const multiplier = isAdding ? 1 : -1\n\n const newDate = new Date(date)\n\n newDate.setFullYear(newDate.getFullYear() + multiplier years)\n\n newDate.setMonth(newDate.getMonth() + multiplier * months)\n\n newDate.setDate(newDate.getDate() + multiplier * days)\n\n newDate.setHours(newDate.getHours() + multiplier * hours)\n\n newDate.setMinutes(newDate.getMinutes() + multiplier * minutes)\n\n newDate.setSeconds(newDate.getSeconds() + multiplier * seconds)\n\n newDate.setMilliseconds(newDate.getMilliseconds() + multiplier * milliseconds)\n\n return newDate\n}\n\nexport const addDuration = (date: Date, duration: Duration): Date => {\n return changeDuration(date, duration, true)\n}\n\nexport const subtractDuration = (date: Date, duration: Duration): Date => {\n return changeDuration(date, duration, false)\n}\n\nexport const getBetweenDuration = (startDate: Date, endDate: Date): Duration => {\n const durationInMilliseconds = endDate.getTime() - startDate.getTime()\n\n const millisecondsInSecond = 1000\n const millisecondsInMinute = 60 * millisecondsInSecond\n const millisecondsInHour = 60 * millisecondsInMinute\n const millisecondsInDay = 24 * millisecondsInHour\n const millisecondsInMonth = 30 * millisecondsInDay // Rough estimation, can be adjusted\n\n const years = Math.floor(durationInMilliseconds / (365.25 * millisecondsInDay))\n const months = Math.floor(durationInMilliseconds / millisecondsInMonth)\n const days = Math.floor(durationInMilliseconds / millisecondsInDay)\n const hours = Math.floor((durationInMilliseconds % millisecondsInDay) / millisecondsInHour)\n const seconds = Math.floor((durationInMilliseconds % millisecondsInHour) / millisecondsInSecond)\n const milliseconds = durationInMilliseconds % millisecondsInSecond\n\n return {\n years,\n months,\n days,\n hours,\n seconds,\n milliseconds,\n }\n}\n\n/** Checks if a given date is in the range of two dates\n \n An undefined value for startDate or endDate means no bound for the start or end respectively\n /\nexport const isInTimeSpan = (value: Date, startDate?: Date, endDate?: Date): boolean => {\n if (startDate && endDate) {\n console.assert(startDate <= endDate)\n return startDate <= value && value <= endDate\n } else if (startDate) {\n return startDate <= value\n } else if (endDate) {\n return endDate >= value\n } else {\n return true\n }\n}\n\n/* Compare two dates on the year, month, day /\nexport const equalDate = (date1: Date, date2: Date) => {\n return date1.getFullYear() === date2.getFullYear()\n && date1.getMonth() === date2.getMonth()\n && date1.getDate() === date2.getDate()\n}\n\nexport const getWeeksForCalenderMonth = (date: Date, weekStart: WeekDay, weeks: number = 6) => {\n const month = date.getMonth()\n const year = date.getFullYear()\n\n const dayList: Date[] = []\n let currentDate = new Date(year, month, 1) // Start of month\n const weekStartIndex = weekDayList.indexOf(weekStart)\n\n // Move the current day to the week before\n while (currentDate.getDay() !== weekStartIndex) {\n currentDate = subtractDuration(currentDate, { days: 1 })\n }\n\n while (dayList.length < 7 weeks) {\n const date = new Date(currentDate)\n date.setHours(date.getHours(), date.getMinutes()) // To make sure we are not overwriting the time\n dayList.push(date)\n currentDate = addDuration(currentDate, { days: 1 })\n }\n\n // weeks\n return equalSizeGroups(dayList, 7)\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 type { ButtonHTMLAttributes, PropsWithChildren, ReactNode } from 'react'\nimport { forwardRef } 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\nexport const IconButtonUtil = {\n icon: [...ButtonColorUtil.solid, 'transparent'] 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 The allowed colors for the IconButton\n /\nexport type IconButtonColor = typeof IconButtonUtil.icon[number]\n\n\n/\n The different sizes for a button\n /\ntype ButtonSizes = 'small' \| 'medium' \| 'large'\n\ntype IconButtonSize = 'tiny' \| '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<IconButtonSize, string> = {\n tiny: 'icon-btn-xs',\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\n/\n The shard properties between all button types\n /\nexport type IconButtonProps = PropsWithChildren<{\n /\n @default 'medium'\n /\n size?: IconButtonSize,\n color?: IconButtonColor,\n}> & ButtonHTMLAttributes<Element>\n\n/\n A button with a solid background and different sizes\n /\nconst SolidButton = forwardRef<HTMLButtonElement, SolidButtonProps>(function SolidButton({\n children,\n disabled = false,\n color = 'primary',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n className,\n ...restProps\n }, ref) {\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 ref={ref}\n onClick={onClick}\n disabled={disabled}\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={onClick}\n disabled={disabled}\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={onClick}\n disabled={disabled}\n className={clsx(\n {\n 'text-disabled-text cursor-not-allowed': disabled,\n [clsx(colorClasses, 'hover:bg-button-text-hover-background')]: !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 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 transparent: 'bg-transparent',\n }[color]\n\n return (\n <button\n disabled={disabled}\n className={clsx(\n {\n 'text-disabled-text bg-disabled-background cursor-not-allowed': disabled && color !== 'transparent',\n 'text-disabled-text cursor-not-allowed opacity-70': disabled && color === 'transparent',\n 'hover:bg-button-text-hover-background': !disabled && color === 'transparent',\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"],"mappings":"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","names":["useEffect","useState","clsx","Expandable","ExpandableUncontrolled","useEffect","useState","useCallback","useEffect","useState","jsx","forwardRef","clsx","jsx","jsxs","SolidButton","jsx","useEffect","clsx","useState"]}