@helpwave/hightide 0.0.1

package/components/Ring.tsx

@@ -0,0 +1,286 @@
+import type { CSSProperties } from 'react'
+import { useCallback, useEffect, useState } from 'react'
+import { noop } from '../util/noop'
+import { Circle } from './Circle'
+import clsx from 'clsx'
+
+export type RingProps = {
+  innerSize: number, // the size of the entire circle including the circleWidth
+  width: number,
+  className?: string,
+};
+
+export const Ring = ({
+                       innerSize = 20,
+                       width = 7,
+                       className = 'outline-primary',
+                     }: RingProps) => {
+  return (
+    <div
+      className={clsx(`bg-transparent rounded-full outline`, className)}
+      style={{
+        width: `${innerSize}px`,
+        height: `${innerSize}px`,
+        outlineWidth: `${width}px`,
+      }}
+    />
+  )
+}
+
+export type AnimatedRingProps = RingProps & {
+  fillAnimationDuration?: number, // in seconds, 0 means no animation
+  repeating?: boolean,
+  onAnimationFinished?: () => void,
+  style?: CSSProperties,
+};
+
+export const AnimatedRing = ({
+                               innerSize,
+                               width,
+                               className,
+                               fillAnimationDuration = 3,
+                               repeating = false,
+                               onAnimationFinished = noop,
+                               style,
+                             }: AnimatedRingProps) => {
+  const [currentWidth, setCurrentWidth] = useState(0)
+  const milliseconds = 1000 * fillAnimationDuration
+
+  const animate = useCallback((timestamp: number, startTime: number) => {
+    const progress = Math.min((timestamp - startTime) / milliseconds, 1)
+    const newWidth = Math.min(width * progress, width)
+
+    setCurrentWidth(newWidth)
+
+    if (progress < 1) {
+      requestAnimationFrame((newTimestamp) => animate(newTimestamp, startTime))
+    } else {
+      onAnimationFinished()
+      if (repeating) {
+        setCurrentWidth(0)
+        requestAnimationFrame((newTimestamp) => animate(newTimestamp, newTimestamp))
+      }
+    }
+  }, [milliseconds, onAnimationFinished, repeating, width])
+
+  useEffect(() => {
+    if (currentWidth < width) {
+      requestAnimationFrame((timestamp) => animate(timestamp, timestamp))
+    }
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <div
+      className="row items-center justify-center"
+      style={{
+        width: `${innerSize + 2 * width}px`,
+        height: `${innerSize + 2 * width}px`,
+        ...style,
+      }}
+    >
+      <Ring
+        innerSize={innerSize}
+        width={currentWidth}
+        className={className}
+      />
+    </div>
+  )
+}
+
+export type RingWaveProps = Omit<AnimatedRingProps, 'innerSize'> & {
+  startInnerSize: number,
+  endInnerSize: number,
+  style?: CSSProperties,
+};
+
+export const RingWave = ({
+                           startInnerSize = 20,
+                           endInnerSize = 30,
+                           width,
+                           className,
+                           fillAnimationDuration = 3,
+                           repeating = false,
+                           onAnimationFinished = noop,
+                           style
+                         }: RingWaveProps) => {
+  const [currentInnerSize, setCurrentInnerSize] = useState(startInnerSize)
+  const distance = endInnerSize - startInnerSize
+  const milliseconds = 1000 * fillAnimationDuration
+
+  const animate = useCallback((timestamp: number, startTime: number) => {
+    const progress = Math.min((timestamp - startTime) / milliseconds, 1)
+    const newInnerSize = Math.min(
+      startInnerSize + distance * progress,
+      endInnerSize
+    )
+
+    setCurrentInnerSize(newInnerSize)
+
+    if (progress < 1) {
+      requestAnimationFrame((newTimestamp) => animate(newTimestamp, startTime))
+    } else {
+      onAnimationFinished()
+      if (repeating) {
+        setCurrentInnerSize(startInnerSize)
+        requestAnimationFrame((newTimestamp) => animate(newTimestamp, newTimestamp))
+      }
+    }
+  }, [distance, endInnerSize, milliseconds, onAnimationFinished, repeating, startInnerSize])
+
+  useEffect(() => {
+    if (currentInnerSize < endInnerSize) {
+      requestAnimationFrame((timestamp) => animate(timestamp, timestamp))
+    }
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <div
+      className="row items-center justify-center"
+      style={{
+        width: `${endInnerSize + 2 * width}px`,
+        height: `${endInnerSize + 2 * width}px`,
+        ...style
+      }}
+    >
+      <Ring
+        innerSize={currentInnerSize}
+        width={width}
+        className={className}
+      />
+    </div>
+  )
+}
+
+export type RadialRingsProps = {
+  circle1ClassName?: string,
+  circle2ClassName?: string,
+  circle3ClassName?: string,
+  waveWidth?: number,
+  waveBaseColor?: string,
+  sizeCircle1?: number,
+  sizeCircle2?: number,
+  sizeCircle3?: number,
+};
+
+// TODO use fixed colors here to avoid artifacts
+export const RadialRings = ({
+                              circle1ClassName = 'bg-primary/90 outline-primary/90',
+                              circle2ClassName = 'bg-primary/60 outline-primary/60',
+                              circle3ClassName = 'bg-primary/40 outline-primary/40',
+                              waveWidth = 10,
+                              waveBaseColor = 'outline-white/20',
+                              sizeCircle1 = 100,
+                              sizeCircle2 = 200,
+                              sizeCircle3 = 300
+                            }: RadialRingsProps) => {
+  const [currentRing, setCurrentRing] = useState(0)
+  const size = sizeCircle3
+
+  return (
+    <div
+      className="relative"
+      style={{
+        width: `${sizeCircle3}px`,
+        height: `${sizeCircle3}px`,
+      }}
+    >
+      <Circle
+        radius={sizeCircle1 / 2}
+        className={clsx(circle1ClassName, `absolute z-[10] -translate-y-1/2 -translate-x-1/2`)}
+        style={{
+          left: `${size / 2}px`,
+          top: `${size / 2}px`
+        }}
+      />
+      {currentRing === 0 ? (
+        <AnimatedRing
+          innerSize={sizeCircle1}
+          width={(sizeCircle2 - sizeCircle1) / 2}
+          onAnimationFinished={() =>
+            currentRing === 0 ? setCurrentRing(1) : null
+          }
+          repeating={true}
+          className={clsx(circle2ClassName,
+            { 'opacity-5': currentRing !== 0 })}
+          style={{
+            left: `${size / 2}px`,
+            top: `${size / 2}px`,
+            position: 'absolute',
+            translate: `-50% -50%`,
+            zIndex: 9
+          }}
+        />
+      ) : null}
+      {currentRing === 2 ? (
+        <RingWave
+          startInnerSize={sizeCircle1 - waveWidth}
+          endInnerSize={sizeCircle2}
+          width={waveWidth}
+          repeating={true}
+          className={clsx(waveBaseColor, `opacity-5`)}
+          style={{
+            left: `${size / 2}px`,
+            top: `${size / 2}px`,
+            position: 'absolute',
+            translate: `-50% -50%`,
+            zIndex: 9,
+          }}
+        />
+      ) : null}
+      <Circle
+        radius={sizeCircle2 / 2}
+        className={clsx(circle2ClassName,
+          { 'opacity-20': currentRing < 1 },
+          `absolute z-[8] -translate-y-1/2 -translate-x-1/2`)}
+        style={{
+          left: `${size / 2}px`,
+          top: `${size / 2}px`
+        }}
+      />
+      {currentRing === 1 ? (
+        <AnimatedRing
+          innerSize={sizeCircle2 - 1} // potentially harmful
+          width={(sizeCircle3 - sizeCircle2) / 2}
+          onAnimationFinished={() =>
+            currentRing === 1 ? setCurrentRing(2) : null
+          }
+          repeating={true}
+          className={clsx(circle3ClassName)}
+          style={{
+            left: `${size / 2}px`,
+            top: `${size / 2}px`,
+            position: 'absolute',
+            translate: `-50% -50%`,
+            zIndex: 7,
+          }}
+        />
+      ) : null}
+      {currentRing === 2 ? (
+        <RingWave
+          startInnerSize={sizeCircle2}
+          endInnerSize={sizeCircle3 - waveWidth}
+          width={waveWidth}
+          repeating={true}
+          className={clsx(waveBaseColor, `opacity-5`)}
+          style={{
+            left: `${size / 2}px`,
+            top: `${size / 2}px`,
+            position: 'absolute',
+            translate: `-50% -50%`,
+            zIndex: 7,
+          }}
+        />
+      ) : null}
+      <Circle
+        radius={sizeCircle3 / 2}
+        className={clsx(circle3ClassName,
+          { 'opacity-20': currentRing < 2 },
+          `absolute z-[6] -translate-y-1/2 -translate-x-1/2`)}
+        style={{
+          left: `${size / 2}px`,
+          top: `${size / 2}px`
+        }}
+      />
+    </div>
+  )
+}

package/components/SearchableList.tsx

@@ -0,0 +1,69 @@
+import type { ReactNode } from 'react'
+import { useEffect, useMemo, useState } from 'react'
+import { Search } from 'lucide-react'
+import clsx from 'clsx'
+import type { Languages } from '../hooks/useLanguage'
+import { useTranslation } from '../hooks/useTranslation'
+import type { PropsForTranslation } from '../hooks/useTranslation'
+import { MultiSearchWithMapping } from '../util/simpleSearch'
+import { Input } from './user-input/Input'
+
+type SearchableListTranslation = {
+  search: string,
+  nothingFound: string,
+}
+
+const defaultSearchableListTranslation: Record<Languages, SearchableListTranslation> = {
+  en: {
+    search: 'Search',
+    nothingFound: 'Nothing found'
+  },
+  de: {
+    search: 'Suche',
+    nothingFound: 'Nichts gefunden'
+  }
+}
+
+export type SearchableListProps<T> = {
+  list: T[],
+  initialSearch?: string,
+  searchMapping: (value: T) => string[],
+  itemMapper: (value: T) => ReactNode,
+  className?: string,
+}
+
+/**
+ * A component for searching a list
+ */
+export const SearchableList = <T, >({
+  overwriteTranslation,
+  list,
+  initialSearch = '',
+  searchMapping,
+  itemMapper,
+  className
+}: PropsForTranslation<SearchableListTranslation, SearchableListProps<T>>) => {
+  const translation = useTranslation(defaultSearchableListTranslation, overwriteTranslation)
+  const [search, setSearch] = useState<string>(initialSearch)
+
+  useEffect(() => setSearch(initialSearch), [initialSearch])
+
+  const filteredEntries = useMemo(() => MultiSearchWithMapping(search, list, searchMapping), [search, list, searchMapping])
+
+  return (
+    <div className={clsx('col gap-y-2', className)}>
+      <div className="row justify-between gap-x-2 items-center">
+        <div className="flex-1">
+          <Input value={search} onChange={setSearch} placeholder={translation.search}/>
+        </div>
+        <Search size={20}/>
+      </div>
+      {filteredEntries.length > 0 && (
+        <div className="col gap-y-1">
+          {filteredEntries.map(itemMapper)}
+        </div>
+      )}
+      {!filteredEntries.length && <div className="row justify-center">{translation.nothingFound}</div>}
+    </div>
+  )
+}

package/components/SortButton.tsx

@@ -0,0 +1,33 @@
+import { ChevronDown, ChevronsUpDown, ChevronUp } from 'lucide-react'
+import type { TextButtonProps } from './Button'
+import { TextButton } from './Button'
+import type { TableSortingType } from './Table'
+
+export type SortButtonProps = Omit<TextButtonProps, 'onClick'> & {
+  ascending?: TableSortingType,
+  onClick: (newTableSorting:TableSortingType) => void,
+}
+
+/**
+ * A Extension of the normal button that displays the sorting state right of the content
+ */
+export const SortButton = ({
+  children,
+  ascending,
+  color,
+  onClick,
+  ...buttonProps
+}: SortButtonProps) => {
+  return (
+    <TextButton
+      color={color}
+      onClick={() => onClick(ascending === 'descending' ? 'ascending' : 'descending')}
+      {...buttonProps}
+    >
+      <div className="row gap-x-2">
+        {children}
+        {ascending === 'ascending' ? <ChevronUp/> : (!ascending ? <ChevronsUpDown/> : <ChevronDown/>)}
+      </div>
+    </TextButton>
+  )
+}

package/components/StepperBar.tsx

@@ -0,0 +1,124 @@
+import { Check, ChevronLeft, ChevronRight } from 'lucide-react'
+import type { Languages } from '../hooks/useLanguage'
+import type { PropsForTranslation } from '../hooks/useTranslation'
+import { useTranslation } from '../hooks/useTranslation'
+import { range } from '../util/array'
+import { SolidButton } from './Button'
+import clsx from 'clsx'
+
+type StepperBarTranslation = {
+  back: string,
+  next: string,
+  confirm: string,
+}
+
+const defaultStepperBarTranslation: Record<Languages, StepperBarTranslation> = {
+  en: {
+    back: 'Back',
+    next: 'Next Step',
+    confirm: 'Create'
+  },
+  de: {
+    back: 'Zurück',
+    next: 'Nächster Schritt',
+    confirm: 'Erstellen'
+  }
+}
+
+export type StepperInformation = {
+  step: number,
+  lastStep: number,
+  seenSteps: Set<number>,
+}
+
+export type StepperBarProps = {
+  stepper: StepperInformation,
+  onChange: (step: StepperInformation) => void,
+  onFinish: () => void,
+  showDots?: boolean,
+  className?: string,
+}
+
+/**
+ * A Component for stepping
+ */
+export const StepperBar = ({
+  overwriteTranslation,
+  stepper,
+  onChange,
+  onFinish,
+  showDots = true,
+  className = '',
+}: PropsForTranslation<StepperBarTranslation, StepperBarProps>) => {
+  const translation = useTranslation(defaultStepperBarTranslation, overwriteTranslation)
+  const dots = range(0, stepper.lastStep)
+  const { step, seenSteps, lastStep } = stepper
+
+  const update = (newStep: number) => {
+    seenSteps.add(newStep)
+    onChange({ step: newStep, seenSteps, lastStep })
+  }
+
+  return (
+    <div
+      className={clsx('sticky row p-2 border-2 justify-between rounded-lg shadow-lg', className)}
+    >
+      <div className="flex-[2] justify-start">
+        <SolidButton
+          disabled={step === 0}
+          onClick={() => {
+            update(step - 1)
+          }}
+          className="row gap-x-1 items-center justify-center"
+        >
+          <ChevronLeft size={14}/>
+          {translation.back}
+        </SolidButton>
+      </div>
+      <div className="row flex-[5] gap-x-2 justify-center items-center">
+        {showDots && dots.map((value, index) => {
+          const seen = seenSteps.has(index)
+          return (
+            <div
+              key={index}
+              onClick={() => seen && update(index)}
+              className={clsx('rounded-full w-4 h-4', {
+                'bg-primary hover:brightness-75': index === step && seen,
+                'bg-primary/40 hover:bg-primary': index !== step && seen,
+                'bg-gray-200 outline-transparent': !seen,
+              },
+              {
+                'cursor-pointer': seen,
+                'cursor-not-allowed': !seen,
+              })}
+            />
+          )
+        })}
+      </div>
+      {step !== lastStep && (
+        <div className="flex-[2] justify-end">
+          <SolidButton
+            onClick={() => update(step + 1)}
+            className="row gap-x-1 items-center justify-center"
+          >
+            {translation.next}
+            <ChevronRight size={14}/>
+          </SolidButton>
+        </div>
+      )}
+      {step === lastStep && (
+        <div className="flex-[2] justify-end">
+          <SolidButton
+            // TODO check form validity
+            disabled={false}
+            onClick={onFinish}
+            className="row gap-x-1 items-center justify-center"
+          >
+            <Check size={14}/>
+            {translation.confirm}
+          </SolidButton>
+        </div>
+      )}
+    </div>
+  )
+}