@helpwave/hightide 0.0.9 → 0.0.11

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

package/components/LoadingAnimation.tsx

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

package/components/LoadingButton.tsx

@@ -1,27 +0,0 @@
-import clsx from 'clsx'
-import { Helpwave } from './icons/Helpwave'
-import type { SolidButtonProps } from './Button'
-import { ButtonSizePaddings } from './Button'
-import { SolidButton } from './Button'
-import { noop } from '../util/noop'
-
-type LoadingButtonProps = {
-  isLoading?: boolean,
-} & SolidButtonProps
-
-export const LoadingButton = ({ isLoading = false, size = 'medium', onClick, ...rest }: LoadingButtonProps) => {
-  const paddingClass = ButtonSizePaddings[size]
-
-  return (
-    <div className="inline-block relative">
-      {
-        isLoading && (
-          <div className={clsx('absolute inset-0 row items-center justify-center bg-white/40', paddingClass)}>
-            <Helpwave animate="loading" className="text-white"/>
-          </div>
-        )
-      }
-      <SolidButton {...rest} disabled={rest.disabled} onClick={isLoading ? noop: onClick}/>
-    </div>
-  )
-}

package/components/MarkdownInterpreter.tsx

@@ -1,278 +0,0 @@
-type ASTNodeModifierType =
-  'none'
-  | 'italic'
-  | 'bold'
-  | 'underline'
-  | 'font-space'
-  | 'primary'
-  | 'secondary'
-  | 'warn'
-  | 'positive'
-  | 'negative'
-
-const astNodeInserterType = ['helpwave', 'newline'] as const
-type ASTNodeInserterType = typeof astNodeInserterType[number]
-type ASTNodeDefaultType = 'text'
-
-type ASTNode = {
-  type: ASTNodeModifierType,
-  children: ASTNode[],
-} | {
-  type: ASTNodeInserterType,
-} | {
-  type: ASTNodeDefaultType,
-  text: string,
-}
-
-export type ASTNodeInterpreterProps = {
-  node: ASTNode,
-  isRoot?: boolean,
-  className?: string,
-}
-export const ASTNodeInterpreter = ({
-                                     node,
-                                     isRoot = false,
-                                     className = '',
-                                   }: ASTNodeInterpreterProps) => {
-  switch (node.type) {
-    case 'newline':
-      return <br/>
-    case 'text':
-      return isRoot ? <span className={className}>{node.text}</span> : node.text
-    case 'helpwave':
-      return (<span className="font-bold font-space no-underline">helpwave</span>)
-    case 'none':
-      return isRoot ? (
-<span className={className}>{node.children.map((value, index) => (
-<ASTNodeInterpreter key={index}
-                                                                                                           node={value}/>
-))}</span>
-) :
-        <>{node.children.map((value, index) => <ASTNodeInterpreter key={index} node={value}/>)}</>
-    case 'bold':
-      return <b>{node.children.map((value, index) => <ASTNodeInterpreter key={index} node={value}/>)}</b>
-    case 'italic':
-      return <i>{node.children.map((value, index) => <ASTNodeInterpreter key={index} node={value}/>)}</i>
-    case 'underline':
-      return (<u>{node.children.map((value, index) => (<ASTNodeInterpreter key={index} node={value}/>))}</u>)
-    case 'font-space':
-      return (
-        <span className="font-space">{node.children.map((value, index) => (
-          <ASTNodeInterpreter key={index}
-                              node={value}/>
-        ))}</span>
-      )
-    case 'primary':
-      return (
-        <span className="text-primary">{node.children.map((value, index) => (
-          <ASTNodeInterpreter
-            key={index} node={value}/>
-        ))}</span>
-      )
-    case 'secondary':
-      return (
-        <span className="text-secondary">{node.children.map((value, index) => (
-          <ASTNodeInterpreter
-            key={index} node={value}/>
-        ))}</span>
-      )
-    case 'warn':
-      return (
-        <span className="text-warning">{node.children.map((value, index) => (
-          <ASTNodeInterpreter
-            key={index} node={value}/>
-        ))}</span>
-      )
-    case 'positive':
-      return (
-        <span className="text-positive">{node.children.map((value, index) => (
-          <ASTNodeInterpreter
-            key={index} node={value}/>
-        ))}</span>
-      )
-    case 'negative':
-      return (
-        <span className="text-negative">{node.children.map((value, index) => (
-          <ASTNodeInterpreter
-            key={index} node={value}/>
-        ))}</span>
-      )
-    default:
-      return null
-  }
-}
-
-const modifierIdentifierMapping = [
-  { id: 'i', name: 'italic' },
-  { id: 'b', name: 'bold' },
-  { id: 'u', name: 'underline' },
-  { id: 'space', name: 'font-space' },
-  { id: 'primary', name: 'primary' },
-  { id: 'secondary', name: 'secondary' },
-  { id: 'warn', name: 'warn' },
-  { id: 'positive', name: 'positive' },
-  { id: 'negative', name: 'negative' },
-] as const
-
-const inserterIdentifierMapping = [
-  { id: 'helpwave', name: 'helpwave' },
-  { id: 'newline', name: 'newline' }
-] as const
-const parseMarkdown = (
-  text: string,
-  commandStart: string = '\\',
-  open: string = '{',
-  close: string = '}'
-): ASTNode => {
-  let start = text.indexOf(commandStart)
-  const children: ASTNode[] = []
-
-  // parse the text step by step
-  while (text !== '') {
-    if (start === -1) {
-      children.push({
-        type: 'text',
-        text
-      })
-      break
-    }
-    children.push(parseMarkdown(text.substring(0, start)))
-    text = text.substring(start)
-    if (text.length <= 1) {
-      children.push({
-        type: 'text',
-        text
-      })
-      text = ''
-      continue
-    }
-    const simpleReplace = [commandStart, open, close]
-    if (simpleReplace.some(value => text[1] === value)) {
-      children.push({
-        type: 'text',
-        text: simpleReplace.find(value => text[1] === value)!
-      })
-      text = text.substring(2)
-      start = text.indexOf(commandStart)
-      continue
-    }
-    const inserter = inserterIdentifierMapping.find(value => text.substring(1).startsWith(value.id))
-    if (inserter) {
-      children.push({
-        type: inserter.name,
-      })
-      text = text.substring(inserter.id.length + 1)
-      start = text.indexOf(commandStart)
-      continue
-    }
-    const modifier = modifierIdentifierMapping.find(value => text.substring(1).startsWith(value.id))
-    if (modifier) {
-      // check brackets
-      if (text[modifier.id.length + 1] !== open) {
-        children.push({
-          type: 'text',
-          text: text.substring(0, modifier.id.length + 1)
-        })
-        text = text.substring(modifier.id.length + 2)
-        start = text.indexOf(commandStart)
-        continue
-      }
-      let closing = -1
-      let index = modifier.id.length + 2
-      let counter = 1
-      let escaping = false
-      while (index < text.length) {
-        if (text[index] === open && !escaping) {
-          counter++
-        }
-        if (text[index] === close && !escaping) {
-          counter--
-          if (counter === 0) {
-            closing = index
-            break
-          }
-        }
-        escaping = text[index] === commandStart
-        index++
-      }
-
-      if (closing !== -1) {
-        children.push({
-          type: modifier.name,
-          children: [parseMarkdown(text.substring(modifier.id.length + 2, closing))]
-        })
-        text = text.substring(closing + 1)
-        start = text.indexOf(commandStart)
-        continue
-      }
-    }
-    // nothing could be applied to command start
-    children.push({
-      type: 'text',
-      text: text[0]!
-    })
-    text = text.substring(1)
-    start = text.indexOf(commandStart)
-  }
-
-  return {
-    type: 'none',
-    children
-  }
-}
-
-const optimizeTree = (node: ASTNode) => {
-  if (node.type === 'text') {
-    return !node.text ? undefined : node
-  }
-  if (astNodeInserterType.some(value => value === node.type)) {
-    return node
-  }
-
-  const currentNode = node as
-    { type: ASTNodeModifierType, children: ASTNode[] }
-
-  if (currentNode.children.length === 0) {
-    return undefined
-  }
-
-  let children: ASTNode[] = []
-  for (let i = 0; i < currentNode.children.length; i++) {
-    const child = optimizeTree(currentNode.children[i]!)
-    if (!child) {
-      continue
-    }
-    if (child.type === 'none') {
-      children.push(...child.children)
-    } else {
-      children.push(child)
-    }
-  }
-
-  currentNode.children = children
-  children = []
-
-  for (let i = 0; i < currentNode.children.length; i++) {
-    const child = currentNode.children[i]!
-    if (child) {
-      if (child.type === 'text' && children[children.length - 1]?.type === 'text') {
-        (children[children.length - 1]! as { type: ASTNodeDefaultType, text: string }).text += child.text
-      } else {
-        children.push(child)
-      }
-    }
-  }
-  currentNode.children = children
-  return currentNode
-}
-
-export type MarkdownInterpreterProps = {
-  text: string,
-  className?: string,
-}
-
-export const MarkdownInterpreter = ({ text, className }: MarkdownInterpreterProps) => {
-  const tree = parseMarkdown(text)
-  const optimizedTree = optimizeTree(tree)!
-  return <ASTNodeInterpreter node={optimizedTree} isRoot={true} className={className}/>
-}

package/components/Pagination.tsx

@@ -1,65 +0,0 @@
-import { ChevronLast, ChevronLeft, ChevronFirst, ChevronRight } from 'lucide-react'
-import clsx from 'clsx'
-import type { PropsForTranslation } from '../hooks/useTranslation'
-import { useTranslation } from '../hooks/useTranslation'
-import type { Languages } from '../hooks/useLanguage'
-
-type PaginationTranslation = {
-  of: string,
-}
-const defaultPaginationTranslations: Record<Languages, PaginationTranslation> = {
-  en: {
-    of: 'of'
-  },
-  de: {
-    of: 'von'
-  }
-}
-
-export type PaginationProps = {
-  page: number, // starts with 0
-  numberOfPages: number,
-  onPageChanged: (page: number) => void,
-}
-
-/**
- * A Component showing the pagination allowing first, before, next and last page navigation
- */
-export const Pagination = ({
-  overwriteTranslation,
-  page,
-  numberOfPages,
-  onPageChanged
-}: PropsForTranslation<PaginationTranslation, PaginationProps>) => {
-  const translation = useTranslation(defaultPaginationTranslations, overwriteTranslation)
-
-  const changePage = (page:number) => {
-    onPageChanged(page)
-  }
-
-  const noPages = numberOfPages === 0
-  const onFirstPage = page === 0 && !noPages
-  const onLastPage = page === numberOfPages - 1
-
-  return (
-    <div className={clsx('row', { 'opacity-30': noPages })}>
-      <button onClick={() => changePage(0)} disabled={onFirstPage}>
-        <ChevronFirst className={clsx({ 'opacity-30': onFirstPage })}/>
-      </button>
-      <button onClick={() => changePage(page - 1)} disabled={onFirstPage}>
-        <ChevronLeft className={clsx({ 'opacity-30': onFirstPage })}/>
-      </button>
-      <div className="min-w-[80px] justify-center mx-2">
-        <span className="select-none text-right flex-1">{noPages ? 0 : page + 1}</span>
-        <span className="select-none mx-2">{translation.of}</span>
-        <span className="select-none text-left flex-1">{numberOfPages}</span>
-      </div>
-      <button onClick={() => changePage(page + 1)} disabled={onLastPage || noPages}>
-        <ChevronRight className={clsx({ 'opacity-30': onLastPage })}/>
-      </button>
-      <button onClick={() => changePage(numberOfPages - 1)} disabled={onLastPage || noPages}>
-        <ChevronLast className={clsx({ 'opacity-30': onLastPage })}/>
-      </button>
-    </div>
-  )
-}

package/components/Profile.tsx

@@ -1,124 +0,0 @@
-import type { HTMLAttributes, ReactNode } from 'react'
-import clsx from 'clsx'
-import Image from 'next/image'
-import Link from 'next/link'
-import { Github, Globe, Linkedin, Mail } from 'lucide-react'
-import { Helpwave } from './icons/Helpwave'
-import { Chip } from './ChipList'
-
-type SocialType = 'mail' | 'github' | 'linkedin' | 'website' | 'medium'
-
-export type SocialIconProps = {
-  type: SocialType,
-  url: string,
-  size?: number,
-}
-
-/**
- * A Component for showing a lin
- */
-const SocialIcon = ({ type, url, size = 24 }: SocialIconProps) => {
-  let icon: ReactNode
-  switch (type) {
-    case 'mail':
-      icon = <Mail size={size}/>
-      break
-    case 'linkedin':
-      // TODO find an alternative icon
-      icon = <Linkedin size={size}/>
-      break
-    case 'github':
-      // TODO find an alternative icon
-      icon = <Github size={size}/>
-      break
-    case 'website':
-      icon = <Globe size={size}/>
-      break
-    case 'medium':
-      icon = <Globe size={size}/> // TODO find an appropriate medium svg
-      break
-    default:
-      icon = <Helpwave size={24}/>
-  }
-  return (
-    <Link href={url} target="_blank">
-      <Chip color="dark" className="!p-2">
-        {icon}
-      </Chip>
-    </Link>
-  )
-}
-
-export type ProfileProps = HTMLAttributes<HTMLDivElement> & {
-  name: string,
-  imageUrl: string,
-  badge?: ReactNode,
-  prefix?: string,
-  suffix?: string,
-  roleBadge?: string,
-  role?: string,
-  /**
-   * The list of tags for the
-   */
-  tags?: string[],
-  info?: string,
-  socials?: SocialIconProps[],
-  imageClassName?: string,
-}
-
-
-// TODO add colors for dark-mode
-/**
- * A Component for showing a Profile
- */
-export const Profile = ({
-  name,
-  imageUrl,
-  badge,
-  prefix,
-  suffix,
-  roleBadge,
-  role,
-  tags,
-  info,
-  socials,
-  className,
-  imageClassName,
-  ...divProps
-}: ProfileProps) => {
-  return (
-    <div
-      {...divProps}
-      className={clsx(`col items-center text-center rounded-3xl p-3 pb-4 bg-white text-gray-900 w-min shadow-around-lg`, className)}
-    >
-      <div className="relative mb-6">
-        <div className={clsx('relative rounded-xl row items-center justify-center overflow-hidden', imageClassName)}>
-          <Image src={imageUrl} alt="" className={clsx('z-[2] object-cover', imageClassName)} width={0} height={0} style={{ width: 'auto', height: 'auto' }}/>
-        </div>
-        <div className="absolute top-[6px] left-[6px] z-[3]">{badge}</div>
-        {roleBadge && (
-          <div className="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-2/3 z-[4] rounded-md">
-            <Chip color="dark" className="font-bold px-3">{roleBadge}</Chip>
-          </div>
-        )}
-      </div>
-      {prefix && <span className="font-semibold">{prefix}</span>}
-      <h2 id={name} className="textstyle-title-md">{name}</h2>
-      {suffix && <span className="text-sm mb-1">{suffix}</span>}
-      {role && <span className="font-space font-bold text-sm">{role}</span>}
-      {tags && (
-        <div className="flex flex-wrap mx-4 mt-2 gap-x-2 justify-center">
-          {tags.map((tag, index) => <span key={index} className="textstyle-description text-sm">{`#${tag}`}</span>)}
-        </div>
-      )}
-      {info && <span className="mt-2 text-sm">{info}</span>}
-      {socials && (
-        <div className="flex flex-wrap grow items-end justify-center gap-x-4 gap-y-2 mt-4">
-          {socials.map((socialIconProps, index) => (
-            <SocialIcon key={index} {...socialIconProps} size={socialIconProps.size ?? 20}/>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}