@helpwave/hightide 0.0.1

package/components/user-input/DateAndTimePicker.tsx

@@ -0,0 +1,156 @@
+import type { ReactNode } from 'react'
+import clsx from 'clsx'
+import type { Languages } from '../../hooks/useLanguage'
+import type { PropsForTranslation } from '../../hooks/useTranslation'
+import { useTranslation } from '../../hooks/useTranslation'
+import { noop } from '../../util/noop'
+import { addDuration, subtractDuration } from '../../util/date'
+import { SolidButton } from '../Button'
+import type { TimePickerProps } from '../date/TimePicker'
+import { TimePicker } from '../date/TimePicker'
+import type { DatePickerProps } from '../date/DatePicker'
+import { DatePicker } from '../date/DatePicker'
+
+type TimeTranslation = {
+  clear: string,
+  change: string,
+  year: string,
+  month: string,
+  day: 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 defaultTimeTranslation: Record<Languages, TimeTranslation> = {
+  en: {
+    clear: 'Clear',
+    change: 'Change',
+    year: 'Year',
+    month: 'Month',
+    day: 'Day',
+    january: 'January',
+    february: 'Febuary',
+    march: 'March',
+    april: 'April',
+    may: 'May',
+    june: 'June',
+    july: 'July',
+    august: 'August',
+    september: 'September',
+    october: 'October',
+    november: 'November',
+    december: 'December',
+  },
+  de: {
+    clear: 'Entfernen',
+    change: 'Ändern',
+    year: 'Jahr',
+    month: 'Monat',
+    day: 'Tag',
+    january: 'Januar',
+    february: 'Febuar',
+    march: 'März',
+    april: 'April',
+    may: 'Mai',
+    june: 'Juni',
+    july: 'Juli',
+    august: 'August',
+    september: 'September',
+    october: 'October',
+    november: 'November',
+    december: 'December',
+  }
+}
+
+export type DateTimePickerMode = 'date' | 'time' | 'dateTime'
+
+export type DateTimePickerProps = {
+  mode?: DateTimePickerMode,
+  value?: Date,
+  start?: Date,
+  end?: Date,
+  onChange?: (date: Date) => void,
+  onFinish?: (date: Date) => void,
+  onRemove?: () => void,
+  datePickerProps?: Omit<DatePickerProps, 'onChange' | 'value' | 'start' | 'end'>,
+  timePickerProps?: Omit<TimePickerProps, 'onChange' | 'time' | 'maxHeight'>,
+}
+
+/**
+ * A Component for picking a Date and Time
+ */
+export const DateTimePicker = ({
+  overwriteTranslation,
+  value = new Date(),
+  start = subtractDuration(new Date(), { years: 50 }),
+  end = addDuration(new Date(), { years: 50 }),
+  mode = 'dateTime',
+  onFinish = noop,
+  onChange = noop,
+  onRemove = noop,
+  timePickerProps,
+  datePickerProps,
+}: PropsForTranslation<TimeTranslation, DateTimePickerProps>) => {
+  const translation = useTranslation(defaultTimeTranslation, overwriteTranslation)
+
+  const useDate = mode === 'dateTime' || mode === 'date'
+  const useTime = mode === 'dateTime' || mode === 'time'
+
+  let dateDisplay: ReactNode
+  let timeDisplay: ReactNode
+
+  if (useDate) {
+    dateDisplay = (
+      <DatePicker
+        {...datePickerProps}
+        className="min-w-[320px] min-h-[250px]"
+        yearMonthPickerProps={{ maxHeight: 218 }}
+        value={value}
+        start={start}
+        end={end}
+        onChange={onChange}
+      />
+    )
+  }
+  if (useTime) {
+    timeDisplay = (
+      <TimePicker
+        {...timePickerProps}
+        className={clsx('h-full', { 'justify-between w-full': mode === 'time' })}
+        maxHeight={250}
+        time={value}
+        onChange={onChange}
+      />
+    )
+  }
+
+  return (
+    <div className="col w-fit">
+      <div className="row gap-x-4">
+        {dateDisplay}
+        {timeDisplay}
+      </div>
+      <div className="row justify-end">
+        <div className="row gap-x-2 mt-1">
+          <SolidButton size="medium" color="negative" onClick={onRemove}>{translation.clear}</SolidButton>
+          <SolidButton
+            size="medium"
+            onClick={() => onFinish(value)}
+          >
+            {translation.change}
+          </SolidButton>
+        </div>
+      </div>
+    </div>
+  )
+}

package/components/user-input/Input.tsx

@@ -0,0 +1,192 @@
+import React, {
+  useEffect,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type HTMLInputTypeAttribute,
+  type InputHTMLAttributes, forwardRef
+} from 'react'
+import clsx from 'clsx'
+import useSaveDelay from '../../hooks/useSaveDelay'
+import { noop } from '../../util/noop'
+import type { LabelProps } from './Label'
+import { Label } from './Label'
+
+export type InputProps = {
+  /**
+   * used for the label's `for` attribute
+   */
+  id?: string,
+  value: string,
+  label?: Omit<LabelProps, 'id'>,
+  /**
+   * @default 'text'
+   */
+  type?: HTMLInputTypeAttribute,
+  /**
+   * Callback for when the input's value changes
+   * This is pretty much required but made optional for the rare cases where it actually isn't need such as when used with disabled
+   * That could be enforced through a union type but that seems a bit overkill
+   * @default noop
+   */
+  onChange?: (text: string, event: ChangeEvent<HTMLInputElement>) => void,
+  onChangeEvent?: (event: ChangeEvent<HTMLInputElement>) => void,
+  className?: string,
+  onEditCompleted?: (text: string, event: ChangeEvent<HTMLInputElement>) => void,
+  expanded?: boolean,
+  containerClassName?: string,
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'value' | 'label' | 'type' | 'onChange' | 'crossOrigin'>
+
+/**
+ * A Component for inputting text or other information
+ *
+ * Its state is managed must be managed by the parent
+ */
+const ControlledInput = ({
+                           id,
+                           type = 'text',
+                           value,
+                           label,
+                           onChange = noop,
+                           onChangeEvent = noop,
+                           className = '',
+                           onEditCompleted,
+                           expanded = true,
+                           onBlur,
+                           containerClassName,
+                           ...restProps
+                         }: InputProps) => {
+  const {
+    restartTimer,
+    clearUpdateTimer
+  } = useSaveDelay(() => undefined, 3000)
+  const ref = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (restProps.autoFocus) {
+      ref.current?.focus()
+    }
+  }, [restProps.autoFocus])
+  return (
+    <div className={clsx({ 'w-full': expanded }, containerClassName)}>
+      {label && <Label {...label} htmlFor={id} className={clsx('mb-1', label.className)}/>}
+      <input
+        ref={ref}
+        value={value}
+        id={id}
+        type={type}
+        className={clsx('block bg-surface text-on-surface px-3 py-2 rounded-md w-full border-2 border-gray-200 hover:border-primary focus:outline-none focus:border-primary focus:ring-primary', className)}
+        onBlur={event => {
+          if (onBlur) {
+            onBlur(event)
+          }
+          if (onEditCompleted) {
+            onEditCompleted(event.target.value, event)
+            clearUpdateTimer()
+          }
+        }}
+        onChange={e => {
+          const value = e.target.value
+          if (onEditCompleted) {
+            restartTimer(() => {
+              onEditCompleted(value, e)
+              clearUpdateTimer()
+            })
+          }
+          onChange(value, e)
+          onChangeEvent(e)
+        }}
+        {...restProps}
+      />
+    </div>
+  )
+}
+
+type UncontrolledInputProps = Omit<InputProps, 'value'> & {
+  /**
+   * @default ''
+   */
+  defaultValue?: string,
+}
+
+/**
+ * A Component for inputting text or other information
+ *
+ * Its state is managed by the component itself
+ */
+const UncontrolledInput = ({
+                             defaultValue = '',
+                             onChange = noop,
+                             ...props
+                           }: UncontrolledInputProps) => {
+  const [value, setValue] = useState(defaultValue)
+
+  const handleChange = (text: string, event: ChangeEvent<HTMLInputElement>) => {
+    setValue(text)
+    onChange(text, event)
+  }
+
+  return (
+    <ControlledInput
+      {...props}
+      value={value}
+      onChange={handleChange}
+    />
+  )
+}
+
+export type FormInputProps = InputHTMLAttributes<HTMLInputElement> & {
+  id: string,
+  labelText?: string,
+  errorText?: string,
+  labelClassName?: string,
+  errorClassName?: string,
+  containerClassName?: string,
+}
+
+const FormInput = forwardRef<HTMLInputElement, FormInputProps>(function FormInput({
+                                                                                    id,
+                                                                                    labelText,
+                                                                                    errorText,
+                                                                                    className,
+                                                                                    labelClassName,
+                                                                                    errorClassName,
+                                                                                    containerClassName,
+                                                                                    required,
+                                                                                    ...restProps
+                                                                                  }, ref) {
+  const input = (
+    <input
+      ref={ref}
+      id={id}
+      {...restProps}
+      className={clsx(
+        'block bg-surface text-on-surface px-3 py-2 rounded-md w-full border-2 border-gray-200 hover:border-primary focus:outline-none focus:border-primary focus:ring-primary',
+        {
+          'focus:border-primary focus:ring-primary': !errorText,
+          'focus:border-negative focus:ring-negative text-negative': !!errorText,
+        },
+        className
+        )}
+    />
+  )
+
+  return (
+    <div className={clsx('flex flex-col gap-y-1', containerClassName)}>
+      {labelText && (
+        <label htmlFor={id} className={clsx('textstyle-label-md', labelClassName)}>
+          {labelText}
+          {required && <span className="text-primary font-bold">*</span>}
+        </label>
+      )}
+      {input}
+      {errorText && <label htmlFor={id} className={clsx('text-negative', errorClassName)}>{errorText}</label>}
+    </div>
+  )
+})
+
+export {
+  UncontrolledInput,
+  ControlledInput as Input,
+  FormInput
+}

package/components/user-input/Label.tsx

@@ -0,0 +1,32 @@
+import type { LabelHTMLAttributes } from 'react'
+
+export type LabelType = 'labelSmall' | 'labelMedium' | 'labelBig'
+const styleMapping: Record<LabelType, string> = {
+  labelSmall: 'textstyle-label-sm',
+  labelMedium: 'textstyle-label-md',
+  labelBig: 'textstyle-label-lg',
+}
+
+
+export type LabelProps = {
+  /** The text for the label */
+  name?: string,
+  /** The styling for the label */
+  labelType?: LabelType,
+} & LabelHTMLAttributes<HTMLLabelElement>
+
+/**
+ * A Label component
+ */
+export const Label = ({
+  children,
+  name,
+  labelType = 'labelSmall',
+  ...props
+}: LabelProps) => {
+  return (
+    <label {...props}>
+      {children ? children : (<span className={styleMapping[labelType]}>{name}</span>)}
+    </label>
+  )
+}

package/components/user-input/Menu.tsx

@@ -0,0 +1,75 @@
+import { useRef, type PropsWithChildren, type ReactNode, type RefObject } from 'react'
+import clsx from 'clsx'
+import { useOutsideClick } from '../../hooks/useOutsideClick'
+import { useHoverState } from '../../hooks/useHoverState'
+
+type MenuProps<T> = PropsWithChildren<{
+  trigger: (onClick: () => void, ref: RefObject<T>) => ReactNode,
+  /**
+   * @default 'tl'
+   */
+  alignment?: 'tl' | 'tr' | 'bl' | 'br' | '_l' | '_r' | 't_' | 'b_',
+  showOnHover?: boolean,
+  menuClassName?: string,
+}>
+
+export type MenuItemProps = {
+  onClick?: () => void,
+  alignment?: 'left' | 'right',
+  className?: string,
+}
+const MenuItem = ({
+  children,
+  onClick,
+  alignment = 'left',
+  className
+}: PropsWithChildren<MenuItemProps>) => (
+  <div
+    className={clsx('block px-3 py-1 bg-menu-background text-menu-text hover:brightness-90', {
+      'text-right': alignment === 'right',
+      'text-left': alignment === 'left',
+    }, className)}
+    onClick={onClick}
+  >
+    {children}
+  </div>
+)
+
+// TODO: it is quite annoying that the type for the ref has to be specified manually, is there some solution around this?
+/**
+ * A Menu Component to allow the user to see different functions
+ */
+const Menu = <T extends HTMLElement>({
+  trigger,
+  children,
+  alignment = 'tl',
+  showOnHover = false,
+  menuClassName = '',
+}: MenuProps<T>) => {
+  const { isHovered: isOpen, setIsHovered: setIsOpen, handlers } = useHoverState({ isDisabled: !showOnHover })
+  const triggerRef = useRef<T>(null)
+  const menuRef = useRef<HTMLDivElement>(null)
+  useOutsideClick([triggerRef, menuRef], () => setIsOpen(false))
+
+  return (
+    <div
+      className="relative"
+      {...handlers}
+    >
+      {trigger(() => setIsOpen(!isOpen), triggerRef)}
+      {isOpen ? (
+        <div ref={menuRef} onClick={e => e.stopPropagation()}
+             className={clsx('absolute top-full mt-1 py-2 w-60 rounded-lg bg-menu-background text-menu-text ring-1 ring-slate-900/5 text-sm leading-6 font-semibold shadow-md z-[1]', {
+               '    top-[8px]': alignment[0] === 't',
+               ' bottom-[8px]': alignment[0] === 'b',
+               '  left-[-8px]': alignment[1] === 'l',
+               ' right-[-8px]': alignment[1] === 'r',
+             }, menuClassName)}>
+          {children}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+export { Menu, MenuItem }

package/components/user-input/MultiSelect.tsx

@@ -0,0 +1,158 @@
+import type { ReactNode } from 'react'
+import { useState } from 'react'
+import { Search } from 'lucide-react'
+import { useTranslation } from '../../hooks/useTranslation'
+import type { PropsForTranslation } from '../../hooks/useTranslation'
+import type { Languages } from '../../hooks/useLanguage'
+import { MultiSearchWithMapping } from '../../util/simpleSearch'
+import clsx from 'clsx'
+import { Menu, MenuItem } from './Menu'
+import { Input } from './Input'
+import { Checkbox } from './Checkbox'
+import type { LabelProps } from './Label'
+import { Label } from './Label'
+
+type MultiSelectTranslation = {
+  select: string,
+  search: string,
+  selected: string,
+}
+
+const defaultMultiSelectTranslation: Record<Languages, MultiSelectTranslation> = {
+  en: {
+    select: 'Select',
+    search: 'Search',
+    selected: 'selected'
+  },
+  de: {
+    select: 'Auswählen',
+    search: 'Suche',
+    selected: 'ausgewählt'
+  }
+}
+
+// TODO maybe add custom item builder here
+export type MultiSelectOption<T> = {
+  label: string,
+  value: T,
+  selected: boolean,
+  disabled?: boolean,
+  className?: string,
+}
+
+export type SearchProps<T> = {
+  initialSearch?: string,
+  searchMapping: (value: MultiSelectOption<T>) => string[],
+}
+
+export type MultiSelectProps<T> = {
+  options: MultiSelectOption<T>[],
+  onChange: (options: MultiSelectOption<T>[]) => void,
+  search?: SearchProps<T>,
+  disabled?: boolean,
+  selectedDisplay?: (props: {
+    items: MultiSelectOption<T>[],
+    disabled: boolean,
+  }) => ReactNode,
+  label?: LabelProps,
+  hintText?: string,
+  showDisabledOptions?: boolean,
+  className?: string,
+  triggerClassName?: string,
+}
+
+/**
+ * A Component for multi selection
+ */
+export const MultiSelect = <T, >({
+                                   overwriteTranslation,
+                                   options,
+                                   onChange,
+                                   search,
+                                   disabled = false,
+                                   selectedDisplay,
+                                   label,
+                                   hintText,
+                                   showDisabledOptions = true,
+                                   className = '',
+                                   triggerClassName = '',
+                                 }: PropsForTranslation<MultiSelectTranslation, MultiSelectProps<T>>) => {
+  const translation = useTranslation(defaultMultiSelectTranslation, overwriteTranslation)
+  const [searchText, setSearchText] = useState<string>(search?.initialSearch ?? '')
+  let filteredOptions: MultiSelectOption<T>[] = options
+  const enableSearch = !!search
+  if (enableSearch && !!searchText) {
+    filteredOptions = MultiSearchWithMapping<MultiSelectOption<T>>(
+      searchText,
+      filteredOptions,
+      value => search.searchMapping(value)
+    )
+  }
+  if (!showDisabledOptions) {
+    filteredOptions = filteredOptions.filter(value => !value.disabled)
+  }
+
+  const selectedItems = options.filter(value => value.selected)
+  const menuButtonText = selectedItems.length === 0 ?
+    hintText ?? translation.select
+    : <span>{`${selectedItems.length} ${translation.selected}`}</span>
+
+  const borderColor = 'border-menu-border'
+
+  return (
+    <div className={clsx(className)}>
+      {label && (
+        <Label {...label} htmlFor={label.name} className={clsx(' mb-1', label.className)}
+               labelType={label.labelType ?? 'labelBig'}/>
+      )}
+      <Menu<HTMLDivElement>
+        alignment="t_"
+        trigger={(onClick, ref) => (
+          <div ref={ref} onClick={disabled ? undefined : onClick}
+               className={clsx(borderColor, 'bg-menu-background text-menu-text inline-w-full justify-between items-center rounded-lg border-2 px-4 py-2 font-medium',
+                 {
+                   'hover:brightness-90 hover:border-primary cursor-pointer': !disabled,
+                   'bg-disabled-background text-disabled cursor-not-allowed': disabled
+                 },
+                 triggerClassName)}
+          >
+            {selectedDisplay ? selectedDisplay({ items: options, disabled }) : menuButtonText}
+          </div>
+        )}
+        menuClassName={clsx(
+          '!rounded-lg !shadow-lg !max-h-[500px] !min-w-[400px] !max-w-[70vh] !overflow-y-auto !border !border-2', borderColor,
+          { '!py-0': !enableSearch, '!pb-0': enableSearch }
+        )}
+      >
+        {enableSearch && (
+          <div key="selectSearch" className="row gap-x-2 items-center px-2 py-2">
+            <Input autoFocus={true} value={searchText} onChange={setSearchText}/>
+            <Search/>
+          </div>
+        )}
+        {filteredOptions.map((option, index) => (
+          <MenuItem key={`item${index}`} className={clsx({
+            'cursor-not-allowed !bg-disabled-background !text-disabled-text hover:brightness-100': !!option.disabled,
+            'cursor-pointer': !option.disabled,
+          })}
+          >
+            <div
+              className={clsx('overflow-hidden whitespace-nowrap text-ellipsis row items-center gap-x-2', option.className)}
+              onClick={() => {
+                if (!option.disabled) {
+                  onChange(options.map(value => value.value === option.value ? ({
+                    ...option,
+                    selected: !value.selected
+                  }) : value))
+                }
+              }}
+            >
+              <Checkbox checked={option.selected} disabled={option.disabled} size="small"/>
+              {option.label}
+            </div>
+          </MenuItem>
+        ))}
+      </Menu>
+    </div>
+  )
+}