@helpwave/hightide 0.0.1

package/components/TimeDisplay.tsx

@@ -0,0 +1,121 @@
+import type { Languages } from '../hooks/useLanguage'
+import type { PropsForTranslation } from '../hooks/useTranslation'
+import { useTranslation } from '../hooks/useTranslation'
+
+type TimeDisplayTranslation = {
+  today: string,
+  yesterday: string,
+  tomorrow: string,
+  inDays: (days: number) => string,
+  agoDays: (days: number) => string,
+  january: string,
+  february: string,
+  march: string,
+  april: string,
+  may: string,
+  june: string,
+  july: string,
+  august: string,
+  september: string,
+  october: string,
+  november: string,
+  december: string,
+}
+
+const defaultTimeDisplayTranslations: Record<Languages, TimeDisplayTranslation> = {
+  en: {
+    today: 'today',
+    yesterday: 'yesterday',
+    tomorrow: 'tomorrow',
+    inDays: (days: number) => `in ${days} days`,
+    agoDays: (days: number) => `${days} days ago`,
+    january: 'January',
+    february: 'February',
+    march: 'March',
+    april: 'April',
+    may: 'May',
+    june: 'June',
+    july: 'July',
+    august: 'August',
+    september: 'September',
+    october: 'October',
+    november: 'November',
+    december: 'December'
+  },
+  de: {
+    today: 'heute',
+    yesterday: 'gestern',
+    tomorrow: 'morgen',
+    inDays: (days: number) => `in ${days} Tagen`,
+    agoDays: (days: number) => `vor ${days} Tagen`,
+    january: 'Januar',
+    february: 'Februar',
+    march: 'März',
+    april: 'April',
+    may: 'Mai',
+    june: 'Juni',
+    july: 'Juli',
+    august: 'August',
+    september: 'September',
+    october: 'October',
+    november: 'November',
+    december: 'December'
+  }
+}
+
+type TimeDisplayMode = 'daysFromToday' | 'date'
+
+type TimeDisplayProps = {
+  date: Date,
+  mode?: TimeDisplayMode,
+}
+
+/**
+ * A Component for displaying time and dates in a unified fashion
+ */
+export const TimeDisplay = ({
+  overwriteTranslation,
+  date,
+  mode = 'daysFromToday'
+}: PropsForTranslation<TimeDisplayTranslation, TimeDisplayProps>) => {
+  const translation = useTranslation(defaultTimeDisplayTranslations, overwriteTranslation)
+  const difference = new Date().setHours(0, 0, 0, 0).valueOf() - new Date(date).setHours(0, 0, 0, 0).valueOf()
+  const isBefore = difference > 0
+  const differenceInDays = Math.floor(Math.abs(difference) / (1000 * 3600 * 24))
+
+  let displayString
+  if (differenceInDays === 0) {
+    displayString = translation.today
+  } else if (differenceInDays === 1) {
+    displayString = isBefore ? translation.yesterday : translation.tomorrow
+  } else {
+    displayString = isBefore ? translation.agoDays(differenceInDays) : translation.inDays(differenceInDays)
+  }
+  const monthToTranslation: { [key: number]: string } = {
+    0: translation.january,
+    1: translation.february,
+    2: translation.march,
+    3: translation.april,
+    4: translation.may,
+    5: translation.june,
+    6: translation.july,
+    7: translation.august,
+    8: translation.september,
+    9: translation.october,
+    10: translation.november,
+    11: translation.december
+  } as const
+
+  let fullString
+  if (mode === 'daysFromToday') {
+    fullString = `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')} - ${displayString}`
+  } else {
+    fullString = `${date.getDate()}. ${monthToTranslation[date.getMonth()]} ${date.getFullYear()}`
+  }
+
+  return (
+    <span>
+      {fullString}
+    </span>
+  )
+}

package/components/Tooltip.tsx

@@ -0,0 +1,92 @@
+import type { CSSProperties, PropsWithChildren, ReactNode } from 'react'
+import { useHoverState } from '../hooks/useHoverState'
+import { clsx } from 'clsx'
+
+type Position = 'top' | 'bottom' | 'left' | 'right'
+
+export type TooltipProps = PropsWithChildren<{
+  tooltip: string | ReactNode,
+  /**
+   * Number of milliseconds until the tooltip appears
+   *
+   * defaults to 1000ms
+   */
+  animationDelay?: number,
+  /**
+   * Class names of additional styling properties for the tooltip
+   */
+  tooltipClassName?: string,
+  /**
+   * Class names of additional styling properties for the container from which the tooltip will be created
+   */
+  containerClassName?: string,
+  position?: Position,
+  zIndex?: number,
+}>
+
+/**
+ * A Component for showing a tooltip when hovering over Content
+ * @param tooltip The tooltip to show can be a text or any ReactNode
+ * @param children The Content for which the tooltip should be created
+ * @param animationDelay The delay before the tooltip appears
+ * @param tooltipClassName Additional ClassNames for the Container of the tooltip
+ * @param containerClassName Additional ClassNames for the Container holding the content
+ * @param position The direction of the tooltip relative to the Container
+ * @param zIndex The z Index of the tooltip (you may require this when stacking modals)
+ * @constructor
+ */
+export const Tooltip = ({
+                          tooltip,
+                          children,
+                          animationDelay = 650,
+                          tooltipClassName = '',
+                          containerClassName = '',
+                          position = 'bottom',
+                          zIndex = 10,
+                        }: TooltipProps) => {
+  const { isHovered, handlers } = useHoverState()
+
+  const positionClasses = {
+    top: `bottom-full left-1/2 -translate-x-1/2 mb-[6px]`,
+    bottom: `top-full left-1/2 -translate-x-1/2 mt-[6px]`,
+    left: `right-full top-1/2 -translate-y-1/2 mr-[6px]`,
+    right: `left-full top-1/2 -translate-y-1/2 ml-[6px]`
+  }
+
+  const triangleSize = 6
+  const triangleClasses = {
+    top: `top-full left-1/2 -translate-x-1/2 border-t-gray-600 border-l-transparent border-r-transparent`,
+    bottom: `bottom-full left-1/2 -translate-x-1/2 border-b-gray-600 border-l-transparent border-r-transparent`,
+    left: `left-full top-1/2 -translate-y-1/2 border-l-gray-600 border-t-transparent border-b-transparent`,
+    right: `right-full top-1/2 -translate-y-1/2 border-r-gray-600 border-t-transparent border-b-transparent`
+  }
+
+  const triangleStyle: Record<Position, CSSProperties> = {
+    top: { borderWidth: `${triangleSize}px ${triangleSize}px 0 ${triangleSize}px` },
+    bottom: { borderWidth: `0 ${triangleSize}px ${triangleSize}px ${triangleSize}px` },
+    left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },
+    right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }
+  }
+
+  return (
+    <div
+      className={clsx('relative inline-block', containerClassName)}
+      {...handlers}
+    >
+      {children}
+      {isHovered && (
+        <div
+          className={clsx(`opacity-0 absolute text-black text-xs font-semibold text-gray-600 px-2 py-1 rounded whitespace-nowrap border-2 border-gray-600
+           animate-tooltip-fade-in shadow-lg bg-gray-100`, positionClasses[position], tooltipClassName)}
+          style={{ zIndex, animationDelay: animationDelay + 'ms' }}
+        >
+          {tooltip}
+          <div
+            className={clsx(`absolute w-0 h-0`, triangleClasses[position])}
+            style={{ ...triangleStyle[position], zIndex }}
+           />
+        </div>
+      )}
+    </div>
+  )
+}

package/components/VerticalDivider.tsx

@@ -0,0 +1,51 @@
+export type VerticalDividerProps = {
+  width?: number,
+  height?: number,
+  strokeWidth?: number,
+  dashGap?: number,
+  dashLength?: number,
+}
+
+/**
+ * A Component for creating a vertical Divider
+ */
+export const VerticalDivider = ({
+                                  width = 1,
+                                  height = 100,
+                                  strokeWidth = 4,
+                                  dashGap = 4,
+                                  dashLength = 4,
+                                }: VerticalDividerProps) => {
+  return (
+    <div style={{ width: width + 'px', height: height + 'px' }}>
+      <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} fill="none"
+           xmlns="http://www.w3.org/2000/svg">
+        <line
+          opacity="0.5"
+          x1={width / 2}
+          y1={height}
+          x2={width / 2}
+          y2="0"
+          stroke="url(#paint_linear)"
+          strokeWidth={strokeWidth}
+          strokeDasharray={`${dashLength} ${dashLength + dashGap}`}
+          strokeLinecap="round"
+        />
+        <defs>
+          <linearGradient
+            id="paint_linear"
+            x1={width / 2}
+            y1="0"
+            x2={width / 2}
+            y2={height}
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopOpacity="0" stopColor="currentColor"/>
+            <stop offset="0.5" stopColor="currentColor"/>
+            <stop offset="1" stopColor="currentColor" stopOpacity="0"/>
+          </linearGradient>
+        </defs>
+      </svg>
+    </div>
+  )
+}

package/components/date/DatePicker.tsx

@@ -0,0 +1,164 @@
+import { useEffect, useState } from 'react'
+import { ArrowDown, ArrowUp, ChevronDown } from 'lucide-react'
+import type { Languages } from '../../hooks/useLanguage'
+import type { PropsForTranslation } from '../../hooks/useTranslation'
+import { useTranslation } from '../../hooks/useTranslation'
+import { noop } from '../../util/noop'
+import { addDuration, isInTimeSpan, subtractDuration } from '../../util/date'
+import clsx from 'clsx'
+import { SolidButton, TextButton } from '../Button'
+import { useLocale } from '../../hooks/useLanguage'
+import type { YearMonthPickerProps } from './YearMonthPicker'
+import { YearMonthPicker } from './YearMonthPicker'
+import type { DayPickerProps } from './DayPicker'
+import { DayPicker } from './DayPicker'
+
+type DatePickerTranslation = {
+  today: string,
+}
+
+const defaultDatePickerTranslation: Record<Languages, DatePickerTranslation> = {
+  en: {
+    today: 'Today',
+  },
+  de: {
+    today: 'Heute',
+  }
+}
+
+type DisplayMode = 'yearMonth' | 'day'
+
+export type DatePickerProps = {
+  value?: Date,
+  start?: Date,
+  end?: Date,
+  initialDisplay?: DisplayMode,
+  onChange?: (date: Date) => void,
+  dayPickerProps?: Omit<DayPickerProps, 'displayedMonth' | 'onChange' | 'selected'>,
+  yearMonthPickerProps?: Omit<YearMonthPickerProps, 'displayedYearMonth' | 'onChange' | 'start' | 'end'>,
+  className?: string,
+}
+
+/**
+ * A Component for picking a date
+ */
+export const DatePicker = ({
+                             overwriteTranslation,
+                             value = new Date(),
+                             start = subtractDuration(new Date(), { years: 50 }),
+                             end = addDuration(new Date(), { years: 50 }),
+                             initialDisplay = 'day',
+                             onChange = noop,
+                             yearMonthPickerProps,
+                             dayPickerProps,
+                             className = ''
+                           }: PropsForTranslation<DatePickerTranslation, DatePickerProps>) => {
+  const locale = useLocale()
+  const translation = useTranslation(defaultDatePickerTranslation, overwriteTranslation)
+  const [displayedMonth, setDisplayedMonth] = useState<Date>(value)
+  const [displayMode, setDisplayMode] = useState<DisplayMode>(initialDisplay)
+
+  useEffect(() => {
+    setDisplayedMonth(value)
+  }, [value])
+
+  return (
+    <div className={clsx('col gap-y-4', className)}>
+      <div className="row items-center justify-between h-7">
+        <TextButton
+          className={clsx('row gap-x-1 items-center cursor-pointer select-none', {
+            'text-disabled-text': displayMode !== 'day',
+          })}
+          onClick={() => setDisplayMode(displayMode === 'day' ? 'yearMonth' : 'day')}
+        >
+          {`${new Intl.DateTimeFormat(locale, { month: 'long' }).format(displayedMonth)} ${displayedMonth.getFullYear()}`}
+          <ChevronDown size={16}/>
+        </TextButton>
+        {displayMode === 'day' && (
+          <div className="row justify-end">
+            <SolidButton
+              size="small"
+              color="primary"
+              disabled={!isInTimeSpan(subtractDuration(displayedMonth, { months: 1 }), start, end)}
+              onClick={() => {
+                setDisplayedMonth(subtractDuration(displayedMonth, { months: 1 }))
+              }}
+            >
+              <ArrowUp size={20}/>
+            </SolidButton>
+            <SolidButton
+              size="small"
+              color="primary"
+              disabled={!isInTimeSpan(addDuration(displayedMonth, { months: 1 }), start, end)}
+              onClick={() => {
+                setDisplayedMonth(addDuration(displayedMonth, { months: 1 }))
+              }}
+            >
+              <ArrowDown size={20}/>
+            </SolidButton>
+          </div>
+        )}
+      </div>
+      {displayMode === 'yearMonth' ? (
+        <YearMonthPicker
+          {...yearMonthPickerProps}
+          displayedYearMonth={value}
+          start={start}
+          end={end}
+          onChange={newDate => {
+            setDisplayedMonth(newDate)
+            setDisplayMode('day')
+          }}
+        />
+      ) : (
+        <div>
+          <DayPicker
+            {...dayPickerProps}
+            displayedMonth={displayedMonth}
+            start={start}
+            end={end}
+            selected={value}
+            onChange={date => {
+              onChange(date)
+            }}
+          />
+          <div className="mt-2">
+            <TextButton
+              onClick={() => {
+                const newDate = new Date()
+                newDate.setHours(value.getHours(), value.getMinutes())
+                onChange(newDate)
+              }}
+            >
+              {translation.today}
+            </TextButton>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Example for the Date Picker
+ */
+export const ControlledDatePicker = ({
+                                    value = new Date(),
+                                    onChange = noop,
+                                    ...props
+                                  }: DatePickerProps) => {
+  const [date, setDate] = useState<Date>(value)
+
+  useEffect(() => setDate(value), [value])
+
+  return (
+    <DatePicker
+      {...props}
+      value={date}
+      onChange={date1 => {
+        setDate(date1)
+        onChange(date1)
+      }}
+    />
+  )
+}

package/components/date/DayPicker.tsx

@@ -0,0 +1,95 @@
+import type { WeekDay } from '../../util/date'
+import { isInTimeSpan } from '../../util/date'
+import { equalDate, getWeeksForCalenderMonth } from '../../util/date'
+import { noop } from '../../util/noop'
+import clsx from 'clsx'
+import { useLocale } from '../../hooks/useLanguage'
+import { useEffect, useState } from 'react'
+
+export type DayPickerProps = {
+  displayedMonth: Date,
+  selected?: Date,
+  start?: Date,
+  end?: Date,
+  onChange?: (date: Date) => void,
+  weekStart?: WeekDay,
+  markToday?: boolean,
+  className?: string,
+}
+
+/**
+ * A component for selecting a day of a month
+ */
+export const DayPicker = ({
+  displayedMonth,
+                            selected,
+                            start,
+                            end,
+                            onChange = noop,
+                            weekStart = 'monday',
+                            markToday = true,
+                            className = ''
+                          }: DayPickerProps) => {
+  const locale = useLocale()
+  const month = displayedMonth.getMonth()
+  const weeks = getWeeksForCalenderMonth(displayedMonth, weekStart)
+
+  return (
+    <div className={clsx('col gap-y-1 min-w-[220px] select-none', className)}>
+      <div className="row text-center">
+        {weeks[0]!.map((weekDay, index) => (
+          <div key={index} className="flex-1 font-semibold">
+            {new Intl.DateTimeFormat(locale, { weekday: 'long' }).format(weekDay).substring(0, 2)}
+          </div>
+        ))}
+      </div>
+      {weeks.map((week, index) => (
+        <div key={index} className="row text-center">
+          {week.map((date) => {
+            const isSelected = !!selected && equalDate(selected, date)
+            const isToday = equalDate(new Date(), date)
+            const isSameMonth = date.getMonth() === month
+            const isDayValid = isInTimeSpan(date, start, end)
+            return (
+              <button
+                disabled={!isDayValid}
+                key={date.getDate()}
+                className={clsx(
+                  'flex-1 rounded-full border-2 border-transparent shadow-sm',
+                  {
+                    'text-gray-700 bg-gray-100': !isSameMonth && isDayValid,
+                    'text-black bg-white': !isSelected && isSameMonth && isDayValid,
+                    'text-on-primary bg-primary': isSelected,
+                    'border-black': isToday && markToday,
+                    'hover:brightness-90 hover:bg-primary hover:text-on-primary': isDayValid,
+                    'text-disabled-text bg-disabled-background': !isDayValid
+                  }
+                )}
+                onClick={() => onChange(date)}
+              >
+                {date.getDate()}
+              </button>
+            )
+          })}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export const DayPickerControlled = ({ displayedMonth, onChange = noop, ...restProps }: DayPickerProps) => {
+  const [date, setDate] = useState(displayedMonth)
+
+  useEffect(() => setDate(displayedMonth), [displayedMonth])
+
+  return (
+    <DayPicker
+      displayedMonth={date}
+      onChange={newDate => {
+        setDate(newDate)
+        onChange(newDate)
+      }}
+      {...restProps}
+    />
+  )
+}

package/components/date/TimePicker.tsx

@@ -0,0 +1,167 @@
+import { useEffect, useRef, useState } from 'react'
+import { Scrollbars } from 'react-custom-scrollbars-2'
+import { noop } from '../../util/noop'
+import { closestMatch, range } from '../../util/array'
+import clsx from 'clsx'
+
+type MinuteIncrement = '1min' | '5min' | '10min' | '15min' | '30min'
+
+export type TimePickerProps = {
+  time?: Date,
+  onChange?: (time: Date) => void,
+  is24HourFormat?: boolean,
+  minuteIncrement?: MinuteIncrement,
+  maxHeight?: number,
+  className?: string,
+}
+
+export const TimePicker = ({
+  time = new Date(),
+  onChange = noop,
+  is24HourFormat = true,
+  minuteIncrement = '5min',
+  maxHeight = 300,
+  className = ''
+}: TimePickerProps) => {
+  const minuteRef = useRef<HTMLButtonElement>(null)
+  const hourRef = useRef<HTMLButtonElement>(null)
+
+  const isPM = time.getHours() >= 11
+  const hours = is24HourFormat ? range(0, 23) : range(1, 12)
+  let minutes = range(0, 59)
+
+  useEffect(() => {
+    const scrollToItem = () => {
+      if (minuteRef.current) {
+        const container = minuteRef.current.parentElement!
+
+        const hasOverflow = container.scrollHeight > maxHeight
+        if (hasOverflow) {
+          minuteRef.current.scrollIntoView({
+            behavior: 'instant',
+            block: 'nearest',
+          })
+        }
+      }
+    }
+    scrollToItem()
+  }, [minuteRef, minuteRef.current]) // eslint-disable-line
+
+  useEffect(() => {
+    const scrollToItem = () => {
+      if (hourRef.current) {
+        const container = hourRef.current.parentElement!
+
+        const hasOverflow = container.scrollHeight > maxHeight
+        if (hasOverflow) {
+          hourRef.current.scrollIntoView({
+            behavior: 'instant',
+            block: 'nearest',
+          })
+        }
+      }
+    }
+    scrollToItem()
+  }, [hourRef, hourRef.current]) // eslint-disable-line
+
+  switch (minuteIncrement) {
+    case '5min':
+      minutes = minutes.filter(value => value % 5 === 0)
+      break
+    case '10min':
+      minutes = minutes.filter(value => value % 10 === 0)
+      break
+    case '15min':
+      minutes = minutes.filter(value => value % 15 === 0)
+      break
+    case '30min':
+      minutes = minutes.filter(value => value % 30 === 0)
+      break
+  }
+
+  const closestMinute = closestMatch(minutes, (item1, item2) => Math.abs(item1 - time.getMinutes()) < Math.abs(item2 - time.getMinutes()))
+
+  const style = (selected: boolean) => clsx('chip-full hover:brightness-90 hover:bg-primary hover:text-on-primary rounded-md mr-3',
+    { 'bg-primary text-on-primary': selected, 'bg-white text-black': !selected })
+
+  const onChangeWrapper = (transformer: (newDate: Date) => void) => {
+    const newDate = new Date(time)
+    transformer(newDate)
+    onChange(newDate)
+  }
+
+  return (
+    <div className={clsx('row gap-x-2 w-fit min-w-[150px] select-none', className)}>
+      <Scrollbars autoHeight autoHeightMax={maxHeight} style={{ height: '100%' }}>
+        <div className="col gap-y-1 h-full">
+          {hours.map(hour => {
+            const currentHour = hour === time.getHours() - (!is24HourFormat && isPM ? 12 : 0)
+            return (
+              <button
+                key={hour}
+                ref={currentHour ? hourRef : undefined}
+                className={style(currentHour)}
+                onClick={() => onChangeWrapper(newDate => newDate.setHours(hour + (!is24HourFormat && isPM ? 12 : 0)))}
+              >
+                {hour.toString().padStart(2, '0')}
+              </button>
+            )
+          })}
+        </div>
+      </Scrollbars>
+      <Scrollbars autoHeight autoHeightMax={maxHeight} style={{ height: '100%' }}>
+        <div className="col gap-y-1 h-full">
+          {minutes.map(minute => {
+            const currentMinute = minute === closestMinute
+            return (
+              <button
+                key={minute + minuteIncrement} // minute increment so that scroll works
+                ref={currentMinute ? minuteRef : undefined}
+                className={style(currentMinute)}
+                onClick={() => onChangeWrapper(newDate => newDate.setMinutes(minute))}
+              >
+                {minute.toString().padStart(2, '0')}
+              </button>
+            )
+          })}
+        </div>
+      </Scrollbars>
+      {!is24HourFormat && (
+        <div className="col gap-y-1">
+          <button
+            className={style(!isPM)}
+            onClick={() => onChangeWrapper(newDate => isPM && newDate.setHours(newDate.getHours() - 12))}
+          >
+            AM
+          </button>
+          <button
+            className={style(isPM)}
+            onClick={() => onChangeWrapper(newDate => !isPM && newDate.setHours(newDate.getHours() + 12))}
+          >
+            PM
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export const ControlledTimePicker = ({
+                                    time,
+                                    onChange = noop,
+                                    ...props
+                                  }: TimePickerProps) => {
+  const [value, setValue] = useState(time)
+  useEffect(() => setValue(time), [time])
+
+  return (
+    <TimePicker
+      {...props}
+      time={value}
+      onChange={time1 => {
+        setValue(time1)
+        onChange(time1)
+      }}
+    />
+  )
+}