@helpwave/hightide 0.0.9 → 0.0.12

package/components/TimeDisplay.tsx

@@ -1,121 +0,0 @@
-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

@@ -1,92 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,164 +0,0 @@
-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

@@ -1,95 +0,0 @@
-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

@@ -1,167 +0,0 @@
-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)
-      }}
-    />
-  )
-}