@helpwave/hightide 0.0.8 → 0.0.11

package/components/Avatar.tsx

@@ -1,58 +0,0 @@
-import Image from 'next/image'
-import clsx from 'clsx'
-
-export const avtarSizeList = ['tiny', 'small', 'medium', 'large'] as const
-export type AvatarSize = typeof avtarSizeList[number]
-export const avatarSizeMapping: Record<AvatarSize, number> = {
-  tiny: 24,
-  small: 32,
-  medium: 48,
-  large: 64
-}
-
-export type AvatarProps = {
-  avatarUrl: string,
-  alt: string,
-  size?: AvatarSize,
-  className?: string,
-}
-
-/**
- * A component for showing a profile picture
- */
-const Avatar = ({ avatarUrl, alt, size = 'medium', className = '' }: AvatarProps) => {
-  // TODO remove later
-  avatarUrl = 'https://cdn.helpwave.de/boringavatar.svg'
-
-  const avtarSize = {
-    tiny: 24,
-    small: 32,
-    medium: 48,
-    large: 64,
-  }[size]
-
-  const style = {
-    width: avtarSize + 'px',
-    height: avtarSize + 'px',
-    maxWidth: avtarSize + 'px',
-    maxHeight: avtarSize + 'px',
-    minWidth: avtarSize + 'px',
-    minHeight: avtarSize + 'px',
-  }
-
-  return (
-    // TODO transparent or white background later
-    <div className={clsx(`rounded-full bg-primary`, className)} style={style}>
-      <Image
-        className="rounded-full border border-gray-200"
-        style={style}
-        src={avatarUrl}
-        alt={alt}
-        width={avtarSize}
-        height={avtarSize}
-      />
-    </div>
-  )
-}
-
-export { Avatar }

package/components/AvatarGroup.tsx

@@ -1,48 +0,0 @@
-import type { AvatarProps, AvatarSize } from './Avatar'
-import { Avatar, avatarSizeMapping } from './Avatar'
-
-export type AvatarGroupProps = {
-  avatars: Omit<AvatarProps, 'size'>[],
-  maxShownProfiles?: number,
-  size?: AvatarSize,
-}
-
-/**
- * A component for showing a group of Avatar's
- */
-export const AvatarGroup = ({
-                              avatars,
-                              maxShownProfiles = 5,
-                              size = 'tiny'
-                            }: AvatarGroupProps) => {
-  const displayedProfiles = avatars.length < maxShownProfiles ? avatars : avatars.slice(0, maxShownProfiles)
-  const diameter = avatarSizeMapping[size]
-  const stackingOverlap = 0.5 // given as a percentage
-  const notDisplayedProfiles = avatars.length - maxShownProfiles
-  const avatarGroupWidth = diameter * (stackingOverlap * (displayedProfiles.length - 1) + 1)
-  return (
-    <div className="row relative" style={{ height: diameter + 'px' }}>
-      <div style={{ width: avatarGroupWidth + 'px' }}>
-        {displayedProfiles.map((avatar, index) => (
-          <div
-            key={index}
-            className="absolute"
-            style={{ left: (index * diameter * stackingOverlap) + 'px', zIndex: maxShownProfiles - index }}
-          >
-            <Avatar avatarUrl={avatar.avatarUrl} alt={avatar.alt} size={size}/>
-          </div>
-        ))}
-      </div>
-      {
-        notDisplayedProfiles > 0 && (
-          <div
-            className="truncate row items-center"
-            style={{ fontSize: (diameter / 2) + 'px', marginLeft: (1 + diameter / 16) + 'px' }}
-          >
-            <span>+ {notDisplayedProfiles}</span>
-          </div>
-        )
-      }
-    </div>
-  )
-}

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>
-  )
-}