@helpwave/hightide 0.0.1

package/components/Button.tsx

@@ -0,0 +1,236 @@
+import type { PropsWithChildren, ButtonHTMLAttributes, ReactNode } from 'react'
+import clsx from 'clsx'
+
+export type SolidButtonColor = 'primary' | 'secondary' | 'tertiary' | 'positive' | 'warning'| 'negative'
+export type OutlineButtonColor = 'primary'
+export type TextButtonColor = 'negative' | 'neutral'
+
+type ButtonSizes = 'small' | 'medium' | 'large'
+
+/**
+ * The shard properties between all button types
+ */
+export type ButtonProps = PropsWithChildren<{
+  /**
+   * @default 'medium'
+   */
+  size?: ButtonSizes,
+}> & ButtonHTMLAttributes<Element>
+
+export const ButtonSizePaddings: Record<ButtonSizes, string> = {
+  small: 'btn-sm',
+  medium: 'btn-md',
+  large: 'btn-lg'
+}
+
+type ButtonWithIconsProps = ButtonProps & {
+  startIcon?: ReactNode,
+  endIcon?: ReactNode,
+}
+
+export type SolidButtonProps = ButtonWithIconsProps & {
+  color?: SolidButtonColor,
+}
+
+export type OutlineButtonProps = ButtonWithIconsProps & {
+  color?: OutlineButtonColor,
+}
+
+export type TextButtonProps = ButtonWithIconsProps & {
+  color?: TextButtonColor,
+}
+
+/**
+ * A button with a solid background and different sizes
+ */
+const SolidButton = ({
+                       children,
+                       disabled = false,
+                       color = 'primary',
+                       size = 'medium',
+                       startIcon,
+                       endIcon,
+                       onClick,
+                       className,
+                       ...restProps
+                     }: SolidButtonProps) => {
+  const colorClasses = {
+    primary: 'bg-button-solid-primary-background text-button-solid-primary-text',
+    secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',
+    tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',
+    positive: 'bg-button-solid-positive-background text-button-solid-positive-text',
+    warning: 'bg-button-solid-warning-background text-button-solid-warning-text',
+    negative: 'bg-button-solid-negative-background text-button-solid-negative-text',
+  }[color]
+
+  const iconColorClasses = {
+    primary: 'text-button-solid-primary-icon',
+    secondary: 'text-button-solid-secondary-icon',
+    tertiary: 'text-button-solid-tertiary-icon',
+    positive: 'text-button-solid-positive-icon',
+    warning: 'text-button-solid-warning-icon',
+    negative: 'text-button-solid-negative-icon',
+  }[color]
+
+  return (
+    <button
+      onClick={disabled ? undefined : onClick}
+      disabled={disabled || onClick === undefined}
+      className={clsx(
+        className,
+        {
+          'text-disabled-text bg-disabled-background': disabled,
+          [clsx(colorClasses, 'hover:brightness-90')]: !disabled
+        },
+        ButtonSizePaddings[size]
+      )}
+      {...restProps}
+    >
+      {startIcon && (
+        <span
+          className={clsx({
+            [iconColorClasses]: !disabled,
+            [`text-disabled-icon`]: disabled
+          })}
+        >
+        {startIcon}
+      </span>
+      )}
+      {children}
+      {endIcon && (
+        <span
+          className={clsx({
+            [iconColorClasses]: !disabled,
+            [`text-disabled-icon`]: disabled
+          })}
+        >
+        {endIcon}
+      </span>
+      )}
+    </button>
+  )
+}
+
+/**
+ * A button with an outline border and different sizes
+ */
+const OutlineButton = ({
+                         children,
+                         disabled = false,
+                         color = 'primary',
+                         size = 'medium',
+                         startIcon,
+                         endIcon,
+                         onClick,
+                         className,
+                         ...restProps
+                       }: OutlineButtonProps) => {
+  const colorClasses = {
+    primary: 'bg-transparent border-2 border-button-outline-primary-text text-button-outline-primary-text',
+  }[color]
+
+  const iconColorClasses = {
+    primary: 'text-button-outline-primary-icon',
+  }[color]
+  return (
+    <button
+      onClick={disabled ? undefined : onClick}
+      disabled={disabled || onClick === undefined}
+      className={clsx(
+        className, {
+          'text-disabled-text border-disabled-outline)': disabled,
+          [clsx(colorClasses, 'hover:brightness-80')]: !disabled,
+        },
+        ButtonSizePaddings[size]
+      )}
+      {...restProps}
+    >
+      {startIcon && (
+        <span
+          className={clsx({
+            [iconColorClasses]: !disabled,
+            [`text-disabled-icon`]: disabled
+          })}
+        >
+        {startIcon}
+      </span>
+      )}
+      {children}
+      {endIcon && (
+        <span
+          className={clsx({
+            [iconColorClasses]: !disabled,
+            [`text-disabled-icon`]: disabled
+          })}
+        >
+        {endIcon}
+      </span>
+      )}
+    </button>
+  )
+}
+
+/**
+ * A text that is a button that can have different sizes
+ */
+const TextButton = ({
+                      children,
+                      disabled = false,
+                      color = 'neutral',
+                      size = 'medium',
+                      startIcon,
+                      endIcon,
+                      onClick,
+                      className,
+                      ...restProps
+                    }: TextButtonProps) => {
+  const colorClasses = {
+    negative: 'bg-transparent text-button-text-negative-text',
+    neutral: 'bg-transparent text-button-text-neutral-text',
+  }[color]
+
+  const iconColorClasses = {
+    negative: 'text-button-text-negative-icon',
+    neutral: 'text-button-text-neutral-icon',
+  }[color]
+  return (
+    <button
+      onClick={disabled ? undefined : onClick}
+      disabled={disabled || onClick === undefined}
+      className={clsx(
+        className, {
+          'text-disabled-text': disabled,
+          [clsx(colorClasses, 'hover:bg-button-text-hover-background rounded-full')]: !disabled,
+        },
+        ButtonSizePaddings[size]
+      )}
+      {...restProps}
+    >
+      {startIcon && (
+        <span
+          className={clsx({
+            [iconColorClasses]: !disabled,
+            [`text-disabled-icon`]: disabled
+          })}
+        >
+        {startIcon}
+      </span>
+      )}
+      {children}
+      {endIcon && (
+        <span
+          className={clsx({
+            [iconColorClasses]: !disabled,
+            [`text-disabled-icon`]: disabled
+          })}
+        >
+        {endIcon}
+      </span>
+      )}
+    </button>
+  )
+}
+
+// TODO Icon button
+
+export { SolidButton, OutlineButton, TextButton }

package/components/ChipList.tsx

@@ -0,0 +1,89 @@
+import type { HTMLProps, PropsWithChildren, ReactNode } from 'react'
+import clsx from 'clsx'
+
+export type ChipColor = 'default' | 'dark'| 'red' | 'yellow' | 'green' | 'blue' | 'pink'
+type ChipVariant = 'normal' | 'fullyRounded'
+
+export type ChipProps = HTMLProps<HTMLDivElement> & PropsWithChildren<{
+  color?: ChipColor,
+  variant?: ChipVariant,
+  trailingIcon?: ReactNode,
+}>
+
+/**
+ * A component for displaying a single chip
+ */
+export const Chip = ({
+                       children,
+                       trailingIcon,
+                       color = 'default',
+                       variant = 'normal',
+                       className = '',
+                       ...restProps
+                     }: ChipProps) => {
+  const colorMapping: string = {
+    default: 'text-tag-default-text bg-tag-default-background',
+    dark: 'text-tag-dark-text bg-tag-dark-background',
+    red: 'text-tag-red-text bg-tag-red-background',
+    yellow: 'text-tag-yellow-text bg-tag-yellow-background',
+    green: 'text-tag-green-text bg-tag-green-background',
+    blue: 'text-tag-blue-text bg-tag-blue-background',
+    pink: 'text-tag-pink-text bg-tag-pink-background',
+  }[color]
+
+  const colorMappingIcon: string = {
+    default: 'text-tag-default-icon',
+    dark: 'text-tag-dark-icon',
+    red: 'text-tag-red-icon',
+    yellow: 'text-tag-yellow-icon',
+    green: 'text-tag-green-icon',
+    blue: 'text-tag-blue-icon',
+    pink: 'text-tag-pink-icon',
+  }[color]
+
+  return (
+    <div
+      {...restProps}
+      className={clsx(
+        `row w-fit px-2 py-1`,
+        colorMapping,
+        {
+          'rounded-md': variant === 'normal',
+          'rounded-full': variant === 'fullyRounded',
+        },
+        className
+      )}
+    >
+      {children}
+      {trailingIcon && (<span className={colorMappingIcon}>{trailingIcon}</span>)}
+    </div>
+  )
+}
+
+export type ChipListProps = {
+  list: ChipProps[],
+  className?: string,
+}
+
+/**
+ * A component for displaying a list of chips
+ */
+export const ChipList = ({
+                           list,
+                           className = ''
+                         }: ChipListProps) => {
+  return (
+    <div className={clsx('flex flex-wrap gap-x-4 gap-y-2', className)}>
+      {list.map((value, index) => (
+        <Chip
+          key={index}
+          {...value}
+          color={value.color ?? 'dark'}
+          variant={value.variant ?? 'normal'}
+        >
+          {value.children}
+        </Chip>
+      ))}
+    </div>
+  )
+}

package/components/Circle.tsx

@@ -0,0 +1,27 @@
+import type { HTMLAttributes } from 'react'
+import clsx from 'clsx'
+
+export type CircleProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'color'> & {
+  radius: number,
+  className?: string,
+}
+
+export const Circle = ({
+  radius = 20,
+  className = 'bg-primary',
+  style,
+  ...restProps
+}: CircleProps) => {
+  const size = radius * 2
+  return (
+    <div
+      className={clsx(`rounded-full`, className)}
+      style={{
+        width: `${size}px`,
+        height: `${size}px`,
+        ...style,
+      }}
+      {...restProps}
+    />
+  )
+}

package/components/ErrorComponent.tsx

@@ -0,0 +1,40 @@
+import { AlertOctagon } from 'lucide-react'
+import type { Languages } from '../hooks/useLanguage'
+import type { PropsForTranslation } from '../hooks/useTranslation'
+import { useTranslation } from '../hooks/useTranslation'
+import clsx from 'clsx'
+
+type ErrorComponentTranslation = {
+  errorOccurred: string,
+}
+
+const defaultErrorComponentTranslation: Record<Languages, ErrorComponentTranslation> = {
+  en: {
+    errorOccurred: 'An error occurred'
+  },
+  de: {
+    errorOccurred: 'Ein Fehler ist aufgetreten'
+  }
+}
+
+export type ErrorComponentProps = {
+  errorText?: string,
+  classname?: string,
+}
+
+/**
+ * The Component to show when an error occurred
+ */
+export const ErrorComponent = ({
+  overwriteTranslation,
+  errorText,
+  classname
+}: PropsForTranslation<ErrorComponentTranslation, ErrorComponentProps>) => {
+  const translation = useTranslation(defaultErrorComponentTranslation, overwriteTranslation)
+  return (
+    <div className={clsx('col items-center justify-center gap-y-4 w-full h-24', classname)}>
+      <AlertOctagon size={64} className="text-warning"/>
+      {errorText ?? `${translation.errorOccurred} :(`}
+    </div>
+  )
+}

package/components/Expandable.tsx

@@ -0,0 +1,61 @@
+import type { PropsWithChildren, ReactNode } from 'react'
+import { forwardRef, useState } from 'react'
+import { ChevronDown, ChevronUp } from 'lucide-react'
+import clsx from 'clsx'
+
+type IconBuilder = (expanded: boolean) => ReactNode
+
+export type ExpandableProps = PropsWithChildren<{
+  label: ReactNode,
+  icon?: IconBuilder,
+  initialExpansion?: boolean,
+  /**
+   * Whether the expansion should only happen when the header is clicked or on the entire component
+   */
+  clickOnlyOnHeader?: boolean,
+  className?: string,
+  headerClassName?: string,
+}>
+
+const DefaultIcon: IconBuilder = (expanded) => expanded ?
+  (<ChevronUp size={16} className="min-w-[16px]"/>)
+  : (<ChevronDown size={16} className="min-w-[16px]"/>)
+
+/**
+ * A Component for showing and hiding content
+ */
+export const Expandable = forwardRef<HTMLDivElement, ExpandableProps>(({
+                                                                         children,
+                                                                         label,
+                                                                         icon,
+                                                                         initialExpansion = false,
+                                                                         clickOnlyOnHeader = true,
+                                                                         className = '',
+                                                                         headerClassName = ''
+                                                                       }, ref) => {
+  const [isExpanded, setIsExpanded] = useState(initialExpansion)
+  icon ??= DefaultIcon
+
+  return (
+    <div
+      ref={ref}
+      className={clsx('col bg-surface text-on-surface group rounded-lg shadow-sm', { 'cursor-pointer': !clickOnlyOnHeader }, className)}
+      onClick={() => !clickOnlyOnHeader && setIsExpanded(!isExpanded)}
+    >
+      <button
+        className={clsx('btn-md rounded-lg justify-between items-center bg-surface text-on-surface', { 'group-hover:brightness-95': !isExpanded }, headerClassName)}
+        onClick={() => clickOnlyOnHeader && setIsExpanded(!isExpanded)}
+      >
+        {label}
+        {icon(isExpanded)}
+      </button>
+      {isExpanded && (
+        <div className="col">
+          {children}
+        </div>
+      )}
+    </div>
+  )
+})
+
+Expandable.displayName = 'Expandable'

package/components/HelpwaveBadge.tsx

@@ -0,0 +1,35 @@
+import clsx from 'clsx'
+import { Helpwave } from './icons/Helpwave'
+import { Tile } from './layout/Tile'
+
+type Size = 'small' | 'large'
+
+export type HelpwaveBadgeProps = {
+  size?: Size,
+  title?: string,
+  className?: string,
+}
+
+/**
+ * A Badge with the helpwave logo and the helpwave name
+ */
+export const HelpwaveBadge = ({
+  size = 'small',
+  title = 'helpwave',
+  className = ''
+}: HelpwaveBadgeProps) => {
+  const iconSize: number = size === 'small' ? 24 : 64
+
+  return (
+    <Tile
+      prefix={(<Helpwave size={iconSize} />)}
+      title={{ value: title, className: size === 'small' ? 'textstyle-title-lg text-base' : 'textstyle-title-xl' }}
+      className={clsx(
+        {
+          'px-2 py-1 rounded-md': size === 'small',
+          'px-4 py-1 rounded-md': size === 'large',
+        }, className
+)}
+    />
+  )
+}

package/components/HideableContentSection.tsx

@@ -0,0 +1,43 @@
+import { useState, type PropsWithChildren, type ReactNode } from 'react'
+import { ChevronDown, ChevronUp } from 'lucide-react'
+import clsx from 'clsx'
+
+export type HideableContentSectionProps = PropsWithChildren & {
+  initiallyOpen?: boolean,
+  disabled: boolean,
+  header: ReactNode,
+}
+
+/**
+ * A Component to hide and show
+ */
+export const HideableContentSection = ({
+  initiallyOpen = true,
+  disabled,
+  children,
+  header
+}: HideableContentSectionProps) => {
+  const [open, setOpen] = useState(initiallyOpen)
+  return (
+    <div className="col">
+      <div
+        className={clsx('row justify-between items-center', { 'cursor-pointer': !disabled })}
+        onClick={() => {
+          if (!disabled) {
+            setOpen(!open)
+          }
+        }}
+      >
+        <div>
+          {header}
+        </div>
+        {!disabled && (open ? <ChevronUp/> : <ChevronDown/>)}
+      </div>
+      {open && (
+        <div>
+          {children}
+        </div>
+      )}
+    </div>
+  )
+}

package/components/InputGroup.tsx

@@ -0,0 +1,72 @@
+import type { PropsWithChildren } from 'react'
+import { useEffect, useState } from 'react'
+import { ChevronDown, ChevronUp } from 'lucide-react'
+import clsx from 'clsx'
+import { noop } from '../util/noop'
+
+export type InputGroupProps = PropsWithChildren<{
+  title: string,
+  expanded?: boolean,
+  isExpandable?: boolean,
+  disabled?: boolean,
+  onChange?: (value: boolean) => void,
+  className?: string,
+}>
+
+/**
+ * A Component for layouting inputs in an expandable group
+ */
+export const InputGroup = ({
+  children,
+  title,
+  expanded = true,
+  isExpandable = true,
+  disabled = false,
+  onChange = noop,
+  className = '',
+}: InputGroupProps) => {
+  const [isExpanded, setIsExpanded] = useState<boolean>(expanded)
+
+  useEffect(() => {
+    setIsExpanded(expanded)
+  }, [expanded])
+
+  return (
+    <div className={clsx('col gap-y-4 p-4 bg-white rounded-xl', className)}>
+      <div
+        className={clsx('row justify-between items-center', {
+          'cursor-pointer': isExpandable && !disabled,
+          'cursor-not-allowed': disabled,
+        },
+        {
+          'text-primary': !disabled,
+          'text-primary/40': disabled
+        })}
+        onClick={() => {
+          if (!isExpandable) {
+            return
+          }
+          const updatedIsExpanded = !isExpanded
+          onChange(updatedIsExpanded)
+          setIsExpanded(updatedIsExpanded)
+        }}
+      >
+        <span className="textstyle-title-md">{title}</span>
+        <div className={clsx('rounded-full text-white w-6 h-6', {
+          'bg-primary': (isExpandable && !disabled) || expanded,
+          'bg-primary/40': disabled,
+        })}>
+          {isExpanded
+            ? <ChevronUp className="-translate-y-[1px]" size={24}/>
+            : <ChevronDown className="translate-y-[1px]" size={24}/>
+          }
+        </div>
+      </div>
+      {isExpanded && (
+        <div className="col gap-y-2 h-full">
+          {children}
+        </div>
+      )}
+    </div>
+  )
+}

package/components/LoadingAndErrorComponent.tsx

@@ -0,0 +1,47 @@
+import type { PropsWithChildren } from 'react'
+import { useState } from 'react'
+import type { LoadingAnimationProps } from './LoadingAnimation'
+import type { ErrorComponentProps } from './ErrorComponent'
+import { LoadingAnimation } from './LoadingAnimation'
+import { ErrorComponent } from './ErrorComponent'
+
+export type LoadingAndErrorComponentProps = PropsWithChildren<{
+  isLoading?: boolean,
+  hasError?: boolean,
+  loadingProps?: LoadingAnimationProps,
+  errorProps?: ErrorComponentProps,
+  /**
+   * in milliseconds
+   */
+  minimumLoadingDuration?: number,
+}>
+
+/**
+ * A Component that shows the Error and Loading animation, when appropriate and the children otherwise
+ */
+export const LoadingAndErrorComponent = ({
+  children,
+  isLoading = false,
+  hasError = false,
+  errorProps,
+  loadingProps,
+  minimumLoadingDuration
+}: LoadingAndErrorComponentProps) => {
+  const [isInMinimumLoading, setIsInMinimumLoading] = useState(false)
+  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = useState(false)
+  if (minimumLoadingDuration && !isInMinimumLoading && !hasUsedMinimumLoading) {
+    setIsInMinimumLoading(true)
+    setTimeout(() => {
+      setIsInMinimumLoading(false)
+      setHasUsedMinimumLoading(true)
+    }, minimumLoadingDuration)
+  }
+
+  if (isLoading || (minimumLoadingDuration && isInMinimumLoading)) {
+    return <LoadingAnimation {...loadingProps}/>
+  }
+  if (hasError) {
+    return <ErrorComponent {...errorProps}/>
+  }
+  return children
+}

package/components/LoadingAnimation.tsx

@@ -0,0 +1,40 @@
+import type { Languages } from '../hooks/useLanguage'
+import type { PropsForTranslation } from '../hooks/useTranslation'
+import { useTranslation } from '../hooks/useTranslation'
+import { Helpwave } from './icons/Helpwave'
+import clsx from 'clsx'
+
+type LoadingAnimationTranslation = {
+  loading: string,
+}
+
+const defaultLoadingAnimationTranslation: Record<Languages, LoadingAnimationTranslation> = {
+  en: {
+    loading: 'Loading data'
+  },
+  de: {
+    loading: 'Lade Daten'
+  }
+}
+
+export type LoadingAnimationProps = {
+  loadingText?: string,
+  classname?: string,
+}
+
+/**
+ * A Component to show when loading data
+ */
+export const LoadingAnimation = ({
+  overwriteTranslation,
+  loadingText,
+  classname
+}: PropsForTranslation<LoadingAnimationTranslation, LoadingAnimationProps>) => {
+  const translation = useTranslation(defaultLoadingAnimationTranslation, overwriteTranslation)
+  return (
+    <div className={clsx('col items-center justify-center w-full h-24', classname)}>
+      <Helpwave animate="loading" />
+      {loadingText ?? `${translation.loading}...`}
+    </div>
+  )
+}