@helpwave/hightide 0.0.9 → 0.0.12

package/components/BreadCrumb.tsx

@@ -1,35 +0,0 @@
-import Link from 'next/link'
-import clsx from 'clsx'
-
-export type Crumb = {
-  display: string,
-  link: string,
-}
-
-type BreadCrumbProps = {
-  crumbs: Crumb[],
-  linkClassName?: string,
-  containerClassName?: string,
-}
-
-/**
- * A component for showing a hierarchical link structure with an independent link on each element
- *
- * e.g. Organizations/Ward/<id>
- */
-export const BreadCrumb = ({ crumbs, linkClassName, containerClassName }: BreadCrumbProps) => {
-  const color = 'text-description'
-
-  return (
-    <div className={clsx('row', containerClassName)}>
-      {crumbs.map((crumb, index) => (
-        <div key={index}>
-          <Link href={crumb.link} className={clsx(linkClassName, { [`${color} hover:brightness-60`]: index !== crumbs.length - 1 })}>
-            {crumb.display}
-          </Link>
-          {index !== crumbs.length - 1 && <span className={clsx(`px-1`, color)}>/</span>}
-        </div>
-      ))}
-    </div>
-  )
-}

package/components/Button.tsx

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

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

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

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

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

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

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

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

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