@helpwave/hightide 0.0.9 → 0.0.12

package/components/user-input/ScrollPicker.tsx

@@ -1,240 +0,0 @@
-import { useCallback, useEffect, useState } from 'react'
-import clsx from 'clsx'
-import { noop } from '../../util/noop'
-import { getNeighbours, range } from '../../util/array'
-import { clamp } from '../../util/math'
-
-export type ScrollPickerProps<T> = {
-  options: T[],
-  mapping: (value: T) => string,
-  selected?: T,
-  onChange?: (value: T) => void,
-  disabled?: boolean,
-}
-
-type AnimationData<T> = {
-  /** The index we scroll to */
-  targetIndex: number,
-  /** The index we are currently showing centered */
-  currentIndex: number,
-  items: T[],
-  /** From -0.5 to 0.5 */
-  transition: number,
-  velocity: number,
-  animationVelocity: number,
-  lastTimeStamp?: number,
-  lastScrollTimeStamp?: number,
-}
-
-const up = 1
-const down = -1
-type Direction = 1 | -1
-
-/**
- * A component for picking an option by scrolling
- */
-export const ScrollPicker = <T, >({
-                                    options,
-                                    mapping,
-                                    selected,
-                                    onChange = noop,
-                                    disabled = false,
-                                  }: ScrollPickerProps<T>) => {
-  let selectedIndex = 0
-  if (selected && options.indexOf(selected) !== -1) {
-    selectedIndex = options.indexOf(selected)
-  }
-  const [{
-    currentIndex,
-    transition,
-    items,
-    lastTimeStamp
-  }, setAnimation] = useState<AnimationData<T>>({
-    targetIndex: selectedIndex,
-    currentIndex: disabled ? selectedIndex : 0,
-    velocity: 0,
-    animationVelocity: Math.floor(options.length / 2),
-    transition: 0,
-    items: options,
-  })
-
-  const itemsShownCount = 5
-  const shownItems = getNeighbours(range(0, items.length - 1), currentIndex).map(index => ({
-    name: mapping(items[index]!), index
-  }))
-
-  const itemHeight = 40
-  const distance = 8
-
-  const containerHeight = itemHeight * (itemsShownCount - 2) + distance * (itemsShownCount - 2 + 1)
-
-  const getDirection = useCallback((targetIndex: number, currentIndex: number, transition: number, length: number): Direction => {
-    if (targetIndex === currentIndex) {
-      return transition > 0 ? up : down
-    }
-    let distanceForward = targetIndex - currentIndex
-    if (distanceForward < 0) {
-      distanceForward += length
-    }
-    return distanceForward >= length / 2 ? down : up
-  }, [])
-
-  const animate = useCallback((timestamp: number, startTime: number | undefined) => {
-    setAnimation((prevState) => {
-      const {
-        targetIndex,
-        currentIndex,
-        transition,
-        animationVelocity,
-        velocity,
-        items,
-        lastScrollTimeStamp
-      } = prevState
-      if (disabled) {
-        return { ...prevState, currentIndex: targetIndex, velocity: 0, lastTimeStamp: timestamp }
-      }
-      if ((targetIndex === currentIndex && velocity === 0 && transition === 0) || !startTime) {
-        return { ...prevState, lastTimeStamp: timestamp }
-      }
-      const progress = (timestamp - startTime) / 1000 // to seconds
-      const direction = getDirection(targetIndex, currentIndex, transition, items.length)
-
-      let newVelocity = velocity
-      let usedVelocity
-      let newCurrentIndex = currentIndex
-      const isAutoScrolling = velocity === 0 && (!lastScrollTimeStamp || timestamp - lastScrollTimeStamp > 300)
-
-      const newLastScrollTimeStamp = velocity !== 0 ? timestamp : lastScrollTimeStamp
-
-      // manual scrolling
-      if (isAutoScrolling) {
-        usedVelocity = direction * animationVelocity
-      } else {
-        usedVelocity = velocity
-        newVelocity = velocity * 0.5 // drag loss
-        if (Math.abs(newVelocity) <= 0.05) {
-          newVelocity = 0
-        }
-      }
-
-      let newTransition = transition + usedVelocity * progress
-      const changeThreshold = 0.5
-
-      while (newTransition >= changeThreshold) {
-        if (newCurrentIndex === targetIndex && newTransition >= changeThreshold && isAutoScrolling) {
-          newTransition = 0
-          break
-        }
-        newCurrentIndex = (currentIndex + 1) % items.length
-        newTransition -= 1
-      }
-      if (newTransition >= changeThreshold) {
-        newTransition = 0
-      }
-      while (newTransition <= -changeThreshold) {
-        if (newCurrentIndex === targetIndex && newTransition <= -changeThreshold && isAutoScrolling) {
-          newTransition = 0
-          break
-        }
-        newCurrentIndex = currentIndex === 0 ? items.length - 1 : currentIndex - 1
-        newTransition += 1
-      }
-      let newTargetIndex = targetIndex
-      if (!isAutoScrolling) {
-        newTargetIndex = newCurrentIndex
-      }
-
-      if ((currentIndex !== newTargetIndex || newTargetIndex !== targetIndex) && newTargetIndex === newCurrentIndex) {
-        onChange(items[newCurrentIndex]!)
-      }
-      return {
-        targetIndex: newTargetIndex,
-        currentIndex: newCurrentIndex,
-        animationVelocity,
-        transition: newTransition,
-        velocity: newVelocity,
-        items,
-        lastTimeStamp: timestamp,
-        lastScrollTimeStamp: newLastScrollTimeStamp
-      }
-    })
-  }, [disabled, getDirection, onChange])
-
-  useEffect(() => {
-    // constant update
-    requestAnimationFrame((timestamp) => animate(timestamp, lastTimeStamp))
-  })
-
-  const opacity = (transition: number, index: number, itemsCount: number) => {
-    const max = 100
-    const min = 0
-    const distance = max - min
-
-    let opacityValue = min
-    const unitTransition = clamp((transition) / 0.5)
-    if (index === 1 || index === itemsCount - 2) {
-      if (index === 1 && transition > 0) {
-        opacityValue += Math.floor(unitTransition * distance)
-      }
-      if (index === itemsCount - 2 && transition < 0) {
-        opacityValue += Math.floor(unitTransition * distance)
-      }
-    } else {
-      opacityValue = max
-    }
-
-    // TODO this is not the right value for the bottom entry
-    return clamp(1- (opacityValue / max))
-  }
-
-  return (
-    <div
-      className="relative overflow-hidden"
-      style={{ height: containerHeight }}
-      onWheel={event => {
-        if (event.deltaY !== 0) {
-          // TODO slower increase
-          setAnimation(({ velocity, ...animationData }) =>
-            ({ ...animationData, velocity: velocity + event.deltaY }))
-        }
-      }}
-    >
-      <div className="absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2">
-        <div
-          className="absolute z-[1] top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2 w-full min-w-[40px] border border-y-2 border-x-0 border-[#00000033]"
-          style={{ height: `${itemHeight}px` }}
-        />
-        <div
-          className="col select-none"
-          style={{
-            transform: `translateY(${-transition * (distance + itemHeight)}px)`,
-            columnGap: `${distance}px`,
-          }}
-        >
-          {shownItems.map(({ name, index }, arrayIndex) => (
-            <div
-              key={index}
-              className={clsx(
-                `col items-center justify-center rounded-md`,
-                {
-                  'text-primary font-bold': currentIndex === index,
-                  'text-on-background': currentIndex === index,
-                  'cursor-pointer': !disabled,
-                  'cursor-not-allowed': disabled,
-                }
-              )}
-              style={{
-                opacity: currentIndex !== index ? opacity(transition, arrayIndex, shownItems.length) : undefined,
-                height: `${itemHeight}px`,
-                maxHeight: `${itemHeight}px`,
-              }}
-              onClick={() => !disabled && setAnimation(prevState => ({ ...prevState, targetIndex: index }))}
-            >
-              {name}
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  )
-}

package/components/user-input/SearchableSelect.tsx

@@ -1,36 +0,0 @@
-import { useState } from 'react'
-import { Search } from 'lucide-react'
-import { MultiSearchWithMapping } from '../../util/simpleSearch'
-import type { SelectOption, SelectProps } from './Select'
-import { Select } from './Select'
-import { Input } from './Input'
-
-export type SearchableSelectProps<T> = SelectProps<T> & {
-  searchMapping: (value: SelectOption<T>) => string[],
-}
-
-/**
- * A Select where items can be searched
- */
-export const SearchableSelect = <T, >({
-  value,
-  options,
-  searchMapping,
-  ...selectProps
-}: SearchableSelectProps<T>) => {
-  const [search, setSearch] = useState<string>('')
-  const filteredOptions = MultiSearchWithMapping(search, options, searchMapping)
-  return (
-    <Select
-      value={value}
-      options={filteredOptions}
-      additionalItems={[(
-        <div key="selectSearch" className="row gap-x-2 items-center">
-          <Input autoFocus={true} value={search} onChange={setSearch} />
-          <Search/>
-        </div>
-      )]}
-      {...selectProps}
-    />
-  )
-}

package/components/user-input/Select.tsx

@@ -1,132 +0,0 @@
-import { Menu } from '@headlessui/react'
-import { ChevronDown, ChevronUp } from 'lucide-react'
-import type { ReactNode } from 'react'
-import clsx from 'clsx'
-import type { LabelProps } from './Label'
-import { Label } from './Label'
-
-export type SelectOption<T> = {
-  label: ReactNode,
-  value: T,
-  disabled?: boolean,
-  className?: string,
-}
-
-export type SelectProps<T> = {
-  value?: T,
-  label?: LabelProps,
-  options: SelectOption<T>[],
-  onChange: (value: T) => void,
-  isHidingCurrentValue?: boolean,
-  hintText?: string,
-  showDisabledOptions?: boolean,
-  className?: string,
-  isDisabled?: boolean,
-  textColor?: string,
-  hoverColor?: string,
-  /**
-   * The items will be at the start of the select and aren't selectable
-   */
-  additionalItems?: ReactNode[],
-  selectedDisplayOverwrite?: ReactNode,
-};
-
-/**
- * A Select Component for selecting form a list of options
- *
- * The State is managed by the parent
- */
-export const Select = <T, >({
-                              value,
-                              label,
-                              options,
-                              onChange,
-                              isHidingCurrentValue = true,
-                              hintText = '',
-                              showDisabledOptions = true,
-                              isDisabled,
-                              className,
-                              textColor = 'text-menu-text',
-                              hoverColor = 'hover:brightness-90',
-                              additionalItems,
-                              selectedDisplayOverwrite,
-                            }: SelectProps<T>) => {
-  // Notice: for more complex types this check here might need an additional compare method
-  let filteredOptions = isHidingCurrentValue ? options.filter(option => option.value !== value) : options
-  if (!showDisabledOptions) {
-    filteredOptions = filteredOptions.filter(value => !value.disabled)
-  }
-  const selectedOption = options.find(option => option.value === value)
-  if (value !== undefined && selectedOption === undefined && selectedDisplayOverwrite === undefined) {
-    console.warn('The selected value is not found in the options list. This might be an error on your part or' +
-      ' default behavior if it is complex data type on which === does not work. In case of the latter' +
-      ' use selectedDisplayOverwrite to set your selected text or component')
-  }
-
-  const borderColor = 'border-menu-border'
-
-  return (
-    <div className={clsx(className)}>
-      {label && (
-        <Label {...label} labelType={label.labelType ?? 'labelBig'} className={clsx('mb-1', label.className)}/>
-      )}
-      <Menu as="div" className="relative text-menu-text">
-        {({ open }) => (
-          <>
-            <Menu.Button
-              className={clsx(
-                'inline-flex w-full justify-between items-center rounded-t-lg border-2 px-4 py-2 font-medium bg-menu-background text-menu-text',
-                textColor, borderColor,
-                {
-                  'rounded-b-lg': !open,
-                  [hoverColor]: !isDisabled,
-                  'bg-disabled-background cursor-not-allowed text-disabled': isDisabled
-                }
-              )}
-              disabled={isDisabled}
-            >
-              <span>{selectedDisplayOverwrite ?? selectedOption?.label ?? hintText}</span>
-              {open ? <ChevronUp/> : <ChevronDown/>}
-            </Menu.Button>
-            <Menu.Items
-              className="absolute w-full z-10 rounded-b-lg bg-menu-background text-menu-text shadow-lg max-h-[500px] overflow-y-auto"
-            >
-              {(additionalItems ?? []).map((item, index) => (
-                <div key={`additionalItems${index}`}
-                     className={clsx(borderColor, 'px-4 py-2 overflow-hidden whitespace-nowrap text-ellipsis border-2 border-t-0', {
-                       'border-b-0 rounded-b-lg': filteredOptions.length === 0 && index === (additionalItems?.length ?? 1) - 1,
-                     })}
-                >
-                  {item}
-                </div>
-              ))}
-              {filteredOptions.map((option, index) => (
-                <Menu.Item key={`item${index}`}>
-                  {
-                    <div
-                      className={clsx('px-4 py-2 overflow-hidden whitespace-nowrap text-ellipsis border-2 border-t-0 cursor-pointer',
-                        option.className, borderColor, {
-                          'brightness-90': option.value === value,
-                          'brightness-95': index % 2 === 1,
-                          'text-disabled bg-disabled-background cursor-not-allowed': !!option.disabled,
-                          'bg-menu-background text-menu-text hover:brightness-90 cursor-pointer': !option.disabled,
-                          'rounded-b-lg': index === filteredOptions.length - 1,
-                        })}
-                      onClick={() => {
-                        if (!option.disabled) {
-                          onChange(option.value)
-                        }
-                      }}
-                    >
-                      {option.label}
-                    </div>
-                  }
-                </Menu.Item>
-              ))}
-            </Menu.Items>
-          </>
-        )}
-      </Menu>
-    </div>
-  )
-}

package/components/user-input/Textarea.tsx

@@ -1,86 +0,0 @@
-import type { TextareaHTMLAttributes } from 'react'
-import { useState } 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 TextareaProps = {
-  /** Outside the area */
-  label?: Omit<LabelProps, 'id'>,
-  /** Inside the area */
-  headline?: string,
-  id?: string,
-  resizable?: boolean,
-  onChange?: (text: string) => void,
-  disclaimer?: string,
-  onEditCompleted?: (text: string) => void,
-  defaultStyle?: boolean,
-} & Omit<TextareaHTMLAttributes<Element>, 'id' | 'onChange'>
-
-/**
- * A Textarea component for inputting longer texts
- *
- * The State is managed by the parent
- */
-export const Textarea = ({
-  label,
-  headline,
-  id,
-  resizable = false,
-  onChange = noop,
-  disclaimer,
-  onBlur = noop,
-  onEditCompleted = noop,
-  defaultStyle = true,
-  className,
-  ...props
-}: TextareaProps) => {
-  const [hasFocus, setHasFocus] = useState(false)
-  const { restartTimer, clearUpdateTimer } = useSaveDelay(() => undefined, 3000)
-
-  const onEditCompletedWrapper = (text: string) => {
-    onEditCompleted(text)
-    clearUpdateTimer()
-  }
-
-  return (
-    <div className="w-full">
-      {label && (<Label {...label} htmlFor={id} className={clsx('mb-1', label.className)} labelType={label.labelType ?? 'labelSmall'}/>)}
-      <div className={`${clsx(' bg-surface text-on-surface focus-within:border-primary relative', { 'shadow border-2 border-gray-300 hover:border-primary rounded-lg': defaultStyle })}`}>
-        {headline && (
-          <span className="mx-3 mt-3 block text-gray-700 font-bold">
-            {headline}
-          </span>
-        )}
-        <textarea
-          id={id}
-          className={clsx('pt-0 px-3 border-transparent focus:border-transparent focus:ring-0 appearance-none border w-full leading-tight focus:outline-none', { 'resize-none': !resizable, 'h-32': defaultStyle, 'mt-3': !headline }, className)}
-          onChange={(event) => {
-            const value = event.target.value
-            restartTimer(() => {
-              onEditCompletedWrapper(value)
-            })
-            onChange(value)
-          }}
-          onFocus={() => {
-            setHasFocus(true)
-          }}
-          onBlur={(event) => {
-            onBlur(event)
-            onEditCompletedWrapper(event.target.value)
-            setHasFocus(false)
-          }}
-          {...props}
-        >
-      </textarea>
-      </div>
-      {(hasFocus && disclaimer) && (
-        <label className="text-negative">
-          {disclaimer}
-        </label>
-      )}
-    </div>
-  )
-}

package/components/user-input/ToggleableInput.tsx

@@ -1,115 +0,0 @@
-import { useState } from 'react'
-import type { HTMLInputTypeAttribute, InputHTMLAttributes } from 'react'
-import { Pencil } from 'lucide-react'
-import clsx from 'clsx'
-import useSaveDelay from '../../hooks/useSaveDelay'
-import { noop } from '../../util/noop'
-
-type InputProps = {
-  /**
-   * used for the label's `for` attribute
-   */
-  id: string,
-  value: string,
-  /**
-   * @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) => void,
-  labelClassName?: string,
-  initialState?: 'editing' | 'display',
-  size?: number,
-  disclaimer?: string,
-  onEditCompleted?: (text: string) => void,
-} & Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'value' | 'label' | 'type' | 'onChange' | 'crossOrigin'>
-
-/**
- * A Text input component for inputting text. It changes appearance upon entering the edit mode and switches
- * back to display mode on loss of focus or on enter
- *
- * The State is managed by the parent
- */
-export const ToggleableInput = ({
-  id,
-  type = 'text',
-  value,
-  onChange = noop,
-  labelClassName = '',
-  initialState = 'display',
-  size = 20,
-  disclaimer,
-  onBlur,
-  onEditCompleted = noop,
-  ...restProps
-}: InputProps) => {
-  const [isEditing, setIsEditing] = useState(initialState !== 'display')
-  const { restartTimer, clearUpdateTimer } = useSaveDelay(() => undefined, 3000)
-
-  const onEditCompletedWrapper = (text: string) => {
-    onEditCompleted(text)
-    clearUpdateTimer()
-  }
-
-  return (
-    <div>
-      <div
-        className="row items-center w-full gap-x-2 overflow-hidden"
-        onClick={() => !isEditing ? setIsEditing(!isEditing) : undefined}
-      >
-        <div className={clsx('row overflow-hidden', { 'flex-1': isEditing })}>
-          {isEditing ? (
-            <input
-              autoFocus
-              {...restProps}
-              value={value}
-              type={type}
-              id={id}
-              onChange={event => {
-                const value = event.target.value
-                restartTimer(() => {
-                  onEditCompletedWrapper(value)
-                })
-                onChange(value)
-              }}
-              onBlur={(event) => {
-                if (onBlur) {
-                  onBlur(event)
-                }
-                onEditCompletedWrapper(value)
-                setIsEditing(false)
-              }}
-              onKeyDown={event => {
-                if (event.key === 'Enter') {
-                  setIsEditing(false)
-                  onEditCompletedWrapper(value)
-                }
-              }}
-              className={clsx(labelClassName, `w-full border-none rounded-none focus:ring-0 shadow-transparent decoration-primary p-0 underline-offset-4`, {
-                underline: isEditing
-              })}
-              onFocus={event => event.target.select()}
-            />
-          ) : (
-            <span
-              className={clsx(labelClassName, 'max-w-xs break-words overflow-hidden')}
-            >
-        {value}
-        </span>
-          )}
-        </div>
-        <Pencil className={clsx(`min-w-[${size}px] cursor-pointer`, { 'text-transparent': isEditing })} size={size} />
-      </div>
-      {(isEditing && disclaimer) && (
-        <label className="text-negative">
-          {disclaimer}
-        </label>
-      )}
-    </div>
-  )
-}