@helpwave/hightide 0.0.9 → 0.0.12

package/components/user-input/DateAndTimePicker.tsx

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

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

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

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

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