@helpwave/hightide 0.0.8 → 0.0.11

package/components/ProgressIndicator.tsx

@@ -1,58 +0,0 @@
-export type ProgressIndicatorProps = {
-  /*
-    The amount of progress that has been made
-    Value form 0 to 1
-   */
-  progress: number,
-  strokeWidth?: number,
-  size?: keyof typeof sizeMapping,
-  direction?: 'clockwise' | 'counterclockwise',
-  /*
-    Rotation of the starting point of the indicator
-    default start at 3 o'clock
-    Given in degree
-   */
-  rotation?: number,
-}
-
-const sizeMapping = { small: 16, medium: 24, big: 48 }
-
-/**
- * A progress indicator
- *
- * Start rotation is 3 o'clock and fills counterclockwise
- *
- * Progress is given from 0 to 1
- */
-export const ProgressIndicator = ({
-                                    progress,
-                                    strokeWidth = 5,
-                                    size = 'medium',
-                                    direction = 'counterclockwise',
-                                    rotation = 0
-                                  }: ProgressIndicatorProps) => {
-  const currentSize = sizeMapping[size]
-  const center = currentSize / 2
-  const radius = center - strokeWidth / 2
-  const arcLength = 2 * Math.PI * radius
-  const arcOffset = arcLength * progress
-  if (direction === 'clockwise') {
-    rotation += 360 * progress
-  }
-  return (
-    <svg
-      style={{
-        height: `${currentSize}px`,
-        width: `${currentSize}px`,
-        transform: `rotate(${rotation}deg)`
-      }}
-    >
-      <circle cx={center} cy={center} r={radius} fill="transparent" strokeWidth={strokeWidth}
-              className="stroke-primary"
-      />
-      <circle cx={center} cy={center} r={radius} fill="transparent" strokeWidth={strokeWidth}
-              strokeDasharray={arcLength} strokeDashoffset={arcOffset} className="stroke-gray-300"
-      />
-    </svg>
-  )
-}

package/components/Ring.tsx

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

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

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

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