@helpwave/hightide 0.0.9 → 0.0.12

package/components/layout/FAQSection.tsx

@@ -1,57 +0,0 @@
-import type { ReactNode } from 'react'
-import clsx from 'clsx'
-import { ChevronDown, ChevronUp } from 'lucide-react'
-import type { ExpandableProps } from '../Expandable'
-import { Expandable } from '../Expandable'
-import { MarkdownInterpreter } from '../MarkdownInterpreter'
-
-type ContentType = {
-  type: 'markdown',
-  value: string,
-} | {
-  type: 'custom',
-  value: ReactNode,
-}
-
-export type FAQItem = Pick<ExpandableProps, 'initialExpansion'| 'className'> & {
-  id: string,
-  title: string,
-  content: ContentType,
-}
-
-export type FAQSectionProps = {
-  entries: FAQItem[],
-  expandableClassName?: string,
-}
-
-/**
- * Description
- */
-export const FAQSection = ({
-  entries,
-  expandableClassName
-}: FAQSectionProps) => {
-  const chevronSize = 28
-  return (
-    <div className="col gap-y-4">
-      {entries.map(({ id, title, content, ...restProps }) => (
-        <Expandable
-          key={id}
-          {...restProps}
-          label={(<h3 id={id} className="textstyle-title-md">{title}</h3>)}
-          clickOnlyOnHeader={false}
-          icon={(expanded) => expanded ?
-              (<ChevronUp size={chevronSize} className="text-primary" style={{ minWidth: `${chevronSize}px` }}/>) :
-              (<ChevronDown size={chevronSize} className="text-primary"/>)
-          }
-          className={clsx('rounded-xl', expandableClassName)}
-          headerClassName="px-6 py-4"
-        >
-          <div className="mt-2 px-6 pb-4">
-            {content.type === 'markdown' ? (<MarkdownInterpreter text={content.value}/>) : content.value}
-          </div>
-        </Expandable>
-      ))}
-    </div>
-  )
-}

package/components/layout/Tile.tsx

@@ -1,67 +0,0 @@
-import type { ReactNode } from 'react'
-import Image from 'next/image'
-import clsx from 'clsx'
-
-export type TileProps = {
-  title: { value: string, className?: string },
-  description?: { value: string, className?: string },
-  prefix?: ReactNode,
-  suffix?: ReactNode,
-  className?: string,
-}
-
-/**
- * A component for creating a tile similar to the flutter ListTile
- */
-export const Tile = ({
-  title,
-  description,
-  prefix,
-  suffix,
-  className
-}: TileProps) => {
-  return (
-    <div className={clsx('row gap-x-4 w-full items-center', className)}>
-      {prefix}
-      <div className="col w-full">
-        <span className={clsx(title.className)}>{title.value}</span>
-        {!!description &&
-          <span className={clsx(description.className ?? 'textstyle-description')}>{description.value}</span>}
-      </div>
-      {suffix}
-    </div>
-  )
-}
-
-type ImageLocation = 'prefix' | 'suffix'
-type ImageSize = {
-  width: number,
-  height: number,
-}
-
-export type TileWithImageProps = Omit<TileProps, 'suffix' | 'prefix'> & {
-  url: string,
-  imageLocation?: ImageLocation,
-  imageSize?: ImageSize,
-  imageClassName?: string,
-}
-
-/**
- * A Tile with an image as prefix or suffix
- */
-export const TileWithImage = ({
-  url,
-  imageLocation = 'prefix',
-  imageSize = { width: 24, height: 24 },
-  imageClassName = '',
-  ...tileProps
-}: TileWithImageProps) => {
-  const image = <Image src={url} alt="" {...imageSize} className={clsx(imageClassName)}/>
-  return (
-    <Tile
-      {...tileProps}
-      prefix={imageLocation === 'prefix' ? image : undefined}
-      suffix={imageLocation === 'suffix' ? image : undefined}
-    />
-  )
-}

package/components/modals/ConfirmDialog.tsx

@@ -1,105 +0,0 @@
-import type { PropsWithChildren } from 'react'
-import type { SolidButtonColor } from '../Button'
-import { SolidButton } from '../Button'
-import type { PropsForTranslation } from '../../hooks/useTranslation'
-import { useTranslation } from '../../hooks/useTranslation'
-import { Modal, type ModalProps } from './Modal'
-
-type ConfirmDialogTranslation = {
-  confirm: string,
-  cancel: string,
-  decline: string,
-}
-
-export type ConfirmDialogType = 'positive' | 'negative' | 'neutral'
-
-const defaultConfirmDialogTranslation = {
-  en: {
-    confirm: 'Confirm',
-    cancel: 'Cancel',
-    decline: 'Decline'
-  },
-  de: {
-    confirm: 'Bestätigen',
-    cancel: 'Abbrechen',
-    decline: 'Ablehnen'
-  }
-}
-
-export type ButtonOverwriteType = {
-  text?: string,
-  color?: SolidButtonColor,
-  disabled?: boolean,
-}
-
-export type ConfirmDialogProps = ModalProps & {
-  isShowingDecline?: boolean,
-  requireAnswer?: boolean,
-  onCancel?: () => void,
-  onConfirm: () => void,
-  onDecline?: () => void,
-  confirmType?: ConfirmDialogType,
-  /**
-   * Order: Cancel, Decline, Confirm
-   */
-  buttonOverwrites?: [ButtonOverwriteType, ButtonOverwriteType, ButtonOverwriteType],
-}
-
-/**
- * A Dialog for asking the user for Confirmation
- *
- * To require an answer omit the onBackgroundClick
- */
-export const ConfirmDialog = ({
-  overwriteTranslation,
-  children,
-  onCancel,
-  onConfirm,
-  onDecline,
-  confirmType = 'positive',
-  buttonOverwrites,
-  ...restProps
-}: PropsForTranslation<ConfirmDialogTranslation, PropsWithChildren<ConfirmDialogProps>>) => {
-  const translation = useTranslation(defaultConfirmDialogTranslation, overwriteTranslation)
-
-  const mapping: Record<ConfirmDialogType, SolidButtonColor> = {
-    neutral: 'primary',
-    negative: 'negative',
-    positive: 'positive'
-  }
-
-  return (
-    <Modal {...restProps}>
-      {children}
-      <div className="row mt-3 gap-x-4 justify-end">
-        {onCancel && (
-          <SolidButton
-            color={buttonOverwrites?.[0].color ?? 'primary'}
-            onClick={onCancel}
-            disabled={buttonOverwrites?.[0].disabled ?? false}
-          >
-            {buttonOverwrites?.[0].text ?? translation.cancel}
-          </SolidButton>
-        )}
-        {onDecline && (
-          <SolidButton
-            color={buttonOverwrites?.[1].color ?? 'negative'}
-            onClick={onDecline}
-
-            disabled={buttonOverwrites?.[1].disabled ?? false}
-          >
-            {buttonOverwrites?.[1].text ?? translation.decline}
-          </SolidButton>
-        )}
-        <SolidButton
-          autoFocus
-          color={buttonOverwrites?.[2].color ?? mapping[confirmType]}
-          onClick={onConfirm}
-          disabled={buttonOverwrites?.[2].disabled ?? false}
-        >
-          {buttonOverwrites?.[2].text ?? translation.confirm}
-        </SolidButton>
-      </div>
-    </Modal>
-  )
-}

package/components/modals/DiscardChangesDialog.tsx

@@ -1,71 +0,0 @@
-import type { PropsWithChildren } from 'react'
-import { SolidButton } from '../Button'
-import type { PropsForTranslation } from '../../hooks/useTranslation'
-import { useTranslation } from '../../hooks/useTranslation'
-import { Modal, type ModalProps } from './Modal'
-
-type DiscardChangesDialogTranslation = {
-  save: string,
-  cancel: string,
-  dontSave: string,
-  title: string,
-  description: string,
-}
-
-const defaultDiscardChangesDialogTranslation = {
-  en: {
-    save: 'Save',
-    cancel: 'Cancel',
-    dontSave: 'Don\'t save',
-    title: 'Unsaved Changes',
-    description: 'Do you want to save your changes?'
-  },
-  de: {
-    save: 'Speichern',
-    cancel: 'Abbrechen',
-    dontSave: 'Nicht Speichern',
-    title: 'Ungespeicherte Änderungen',
-    description: 'Möchtest du die Änderungen speichern?'
-  }
-}
-
-type DiscardChangesDialogProps = ModalProps & {
-  isShowingDecline?: boolean,
-  requireAnswer?: boolean,
-  onCancel: () => void,
-  onSave: () => void,
-  onDontSave: () => void,
-}
-
-export const DiscardChangesDialog = ({
-  overwriteTranslation,
-  children,
-  title,
-  description,
-  onCancel,
-  onSave,
-  onDontSave,
-  ...modalProps
-}: PropsForTranslation<DiscardChangesDialogTranslation, PropsWithChildren<DiscardChangesDialogProps>>) => {
-  const translation = useTranslation(defaultDiscardChangesDialogTranslation, overwriteTranslation)
-  return (
-    <Modal
-      title={title ?? translation.title}
-      description={description ?? translation.description}
-      {...modalProps}
-    >
-      {children}
-      <div className="row mt-3 gap-x-4 justify-end">
-        <SolidButton color="positive" onClick={onSave}>
-          {translation.save}
-        </SolidButton>
-        <SolidButton color="negative" onClick={onDontSave}>
-          {translation.dontSave}
-        </SolidButton>
-        <SolidButton autoFocus color="primary" onClick={onCancel}>
-          {translation.cancel}
-        </SolidButton>
-      </div>
-    </Modal>
-  )
-}

package/components/modals/InputModal.tsx

@@ -1,26 +0,0 @@
-import { Input } from '../user-input/Input'
-import type { InputProps } from '../user-input/Input'
-import type { ConfirmDialogProps } from './ConfirmDialog'
-import { ConfirmDialog } from './ConfirmDialog'
-
-export type InputModalProps = ConfirmDialogProps & {
-  inputs: InputProps[],
-}
-
-/**
- * A modal for receiving multiple inputs
- */
-export const InputModal = ({
-  inputs,
-  buttonOverwrites,
-  ...restProps
-}: InputModalProps) => {
-  return (
-    <ConfirmDialog
-      buttonOverwrites={buttonOverwrites}
-      {...restProps}
-    >
-      {inputs.map((inputProps, index) => <Input key={`input ${index}`} {...inputProps}/>)}
-    </ConfirmDialog>
-  )
-}

package/components/modals/LanguageModal.tsx

@@ -1,76 +0,0 @@
-import { type PropsWithChildren } from 'react'
-import type { PropsForTranslation } from '../../hooks/useTranslation'
-import { useTranslation } from '../../hooks/useTranslation'
-import { Select } from '../user-input/Select'
-import type { Languages } from '../../hooks/useLanguage'
-import { useLanguage } from '../../hooks/useLanguage'
-import { SolidButton } from '../Button'
-import { Modal, type ModalProps } from './Modal'
-
-const languageDetails = {
-  en: 'English',
-  de: 'Deutsch'
-}
-
-type LanguageModalTranslation = {
-  message: string,
-  done: string,
-}
-
-const defaultConfirmDialogTranslation = {
-  en: {
-    message: 'Choose your language',
-    done: 'Done',
-  },
-  de: {
-    message: 'Wählen Sie Ihre Sprache',
-    done: 'Fertig',
-  }
-}
-
-type LanguageModalProps = ModalProps & {
-    onDone: () => void,
-}
-
-/**
- * A Modal for selecting the Language
- *
- * The State of open needs to be managed by the parent
- */
-export const LanguageModal = ({
-  overwriteTranslation,
-  onDone,
-  onBackgroundClick,
-  ...modalProps
-}: PropsForTranslation<LanguageModalTranslation, PropsWithChildren<LanguageModalProps>>) => {
-  const { language, setLanguage } = useLanguage()
-  const translation = useTranslation(defaultConfirmDialogTranslation, overwriteTranslation)
-
-  return (
-    <Modal
-      titleText={translation.message}
-      onBackgroundClick={(eventData) => {
-        onDone()
-
-        if (onBackgroundClick) {
-          onBackgroundClick(eventData)
-        }
-      }}
-      {...modalProps}
-    >
-      <div className="w-[320px]">
-        <Select
-            className="mt-2"
-            value={language}
-            options={Object.entries(languageDetails).map(([tag, name]) => ({ label: name, value: tag }))}
-            onChange={(language: string) => setLanguage(language as Languages)}
-          />
-          <div className="row mt-3 gap-x-4 justify-end">
-            <SolidButton autoFocus color="positive" onClick={onDone}>
-              {translation.done}
-            </SolidButton>
-          </div>
-      </div>
-    </Modal>
-  )
-}

package/components/modals/Modal.tsx

@@ -1,149 +0,0 @@
-import { useContext, useEffect, type MouseEventHandler, type PropsWithChildren, type ReactNode } from 'react'
-import ReactDOM from 'react-dom'
-import { X } from 'lucide-react'
-import clsx from 'clsx'
-import type { Languages } from '../../hooks/useLanguage'
-import type { PropsForTranslation } from '../../hooks/useTranslation'
-import { useTranslation } from '../../hooks/useTranslation'
-import { Tooltip } from '../Tooltip'
-import { ModalContext } from './ModalRegister'
-
-type ModalHeaderTranslation = {
-  close: string,
-}
-
-const defaultModalHeaderTranslation: Record<Languages, ModalHeaderTranslation> = {
-  en: {
-    close: 'Close'
-  },
-  de: {
-    close: 'Schließen'
-  }
-}
-
-export type ModalHeaderProps = {
-  onCloseClick?: () => void,
-  /** The title of the Modal. If you want to only set the text use `titleText` instead */
-  title?: ReactNode,
-  /** The title text of the Modal. If you want to set a custom title use `title` instead */
-  titleText?: string,
-  /** The description of the Modal. If you want to only set the text use `descriptionText` instead */
-  description?: ReactNode,
-  /** The description text of the Modal. If you want to set a custom description use `description` instead */
-  descriptionText?: string,
-}
-
-/**
- * A default Header to be used by modals to have a uniform design
- */
-export const ModalHeader = ({
-                              overwriteTranslation,
-                              onCloseClick,
-                              title,
-                              titleText = '',
-                              description,
-                              descriptionText = ''
-                            }: PropsForTranslation<ModalHeaderTranslation, ModalHeaderProps>) => {
-  const translation = useTranslation(defaultModalHeaderTranslation, overwriteTranslation)
-  return (
-    <div className="col">
-      <div className="row justify-between items-start gap-x-8">
-        {title ?? (
-          <span className={clsx('textstyle-title-lg', {
-            'mb-1': description || descriptionText,
-          })}>
-            {titleText}
-          </span>
-        )}
-        {!!onCloseClick && (
-          <Tooltip tooltip={translation.close}>
-            <button className="row bg-gray-200 hover:bg-gray-300 rounded-md p-1" onClick={onCloseClick}>
-              <X/>
-            </button>
-          </Tooltip>
-        )}
-      </div>
-      {description ?? (<span className="textstyle-description">{descriptionText}</span>)}
-    </div>
-  )
-}
-
-export const modalRootName = 'modal-root'
-
-export type ModalProps = {
-  id: string,
-  isOpen: boolean,
-  onBackgroundClick?: MouseEventHandler<HTMLDivElement>,
-  backgroundClassName?: string,
-  modalClassName?: string,
-  containerClassName?: string,
-} & ModalHeaderProps
-
-/**
- * A Generic Modal Window
- *
- * The state needs to be managed by the parent of this component
- *
- * DO NOT Conditionally render this always use the isOpen to ensure that the ModalRegister is working properly
- */
-export const Modal = ({
-                        children,
-                        id,
-                        isOpen,
-                        onBackgroundClick,
-                        backgroundClassName = '',
-                        modalClassName = '',
-                        containerClassName = '',
-                        ...modalHeaderProps
-                      }: PropsWithChildren<ModalProps>) => {
-  const modalRoot = typeof window !== 'undefined' ? document.getElementById(modalRootName) : null
-  const {
-    register,
-    addToRegister,
-    removeFromRegister
-  } = useContext(ModalContext)
-
-  if (!id) {
-    console.error('the id cannot be empty')
-  }
-
-  useEffect(() => {
-    if (isOpen) {
-      addToRegister(id)
-    } else {
-      removeFromRegister(id)
-    }
-  }, [addToRegister, id, removeFromRegister, isOpen])
-
-  if (modalRoot === null || !isOpen) return null
-
-  const isLast = register.length < 1 || register[register.length - 1] === id
-  const isSecondLast = register.length < 2 || register[register.length - 2] === id
-
-  return ReactDOM.createPortal(
-    <div className={clsx('fixed inset-0 overflow-y-auto z-[99]', containerClassName)} id={id}>
-      {isLast && (
-        <div
-          className={clsx('fixed inset-0 h-screen w-screen', backgroundClassName, {
-            'bg-black/70': isLast && register.length === 1,
-          })}
-          onClick={onBackgroundClick}
-        />
-      )}
-      <div
-        className={clsx('fixed left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 col p-4 bg-white text-black rounded-xl shadow-xl', modalClassName)}>
-        <ModalHeader {...modalHeaderProps} />
-        {children}
-      </div>
-      {!isLast && (
-        <div
-          className={clsx('fixed inset-0 h-screen w-screen', backgroundClassName, {
-            'bg-black/70': isSecondLast && register.length > 1,
-          })}
-        />
-      )}
-    </div>,
-    modalRoot,
-    id
-  )
-}

package/components/modals/ModalRegister.tsx

@@ -1,45 +0,0 @@
-import type { PropsWithChildren } from 'react'
-import { createContext, useState } from 'react'
-import { noop } from '../../util/noop'
-
-export type ModalContextType = {
-  register: string[],
-  addToRegister: (id: string) => void,
-  removeFromRegister: (id: string) => void,
-}
-export const ModalContext = createContext<ModalContextType>({
-  register: [],
-  addToRegister: noop,
-  removeFromRegister: noop,
-})
-
-/**
- * A Simple Wrapper for the context
- */
-export const ModalRegister = ({
-  children
-}: PropsWithChildren) => {
-  const [register, setRegister] = useState<string[]>([])
-
-  const inRegister = (id: string) => {
-    return !!register.find(value => value === id)
-  }
-
-  const addToRegister = (id: string) => {
-    if (!inRegister(id)) {
-      setRegister([...register, id])
-    }
-  }
-
-  const removeFromRegister = (id: string) => {
-    if (inRegister(id)) {
-      setRegister(register.filter(value => value !== id))
-    }
-  }
-
-  return (
-    <ModalContext.Provider value={{ register, addToRegister, removeFromRegister }}>
-      {children}
-    </ModalContext.Provider>
-  )
-}

package/components/properties/CheckboxProperty.tsx

@@ -1,62 +0,0 @@
-import { Check } from 'lucide-react'
-import { noop } from '../../util/noop'
-import { Checkbox } from '../user-input/Checkbox'
-import type { Languages } from '../../hooks/useLanguage'
-import type { PropsForTranslation } from '../../hooks/useTranslation'
-import { useTranslation } from '../../hooks/useTranslation'
-import type { PropertyBaseProps } from './PropertyBase'
-import { PropertyBase } from './PropertyBase'
-
-type CheckboxPropertyTranslation = {
-  yes: string,
-  no: string,
-}
-
-const defaultCheckboxPropertyTranslation: Record<Languages, CheckboxPropertyTranslation> = {
-  en: {
-    yes: 'Yes',
-    no: 'No'
-  },
-  de: {
-    yes: 'Ja',
-    no: 'Nein'
-  }
-}
-
-export type CheckboxPropertyProps = Omit<PropertyBaseProps, 'icon' | 'input' | 'hasValue' | 'onRemove'> & {
-  value?: boolean,
-  onChange?: (value: boolean) => void,
-}
-
-/**
- * An Input for a boolen properties
- */
-export const CheckboxProperty = ({
-                                   overwriteTranslation,
-                                   value,
-                                   onChange = noop,
-                                   readOnly,
-                                   ...baseProps
-                                 }: PropsForTranslation<CheckboxPropertyTranslation, CheckboxPropertyProps>) => {
-  const translation = useTranslation(defaultCheckboxPropertyTranslation, overwriteTranslation)
-
-  return (
-    <PropertyBase
-      {...baseProps}
-      hasValue={true}
-      readOnly={readOnly}
-      icon={<Check size={16}/>}
-      input={() => (
-        <div className="row py-2 px-4 items-center">
-          <Checkbox
-            // TODO make bigger as in #904
-            checked={value ?? true}
-            disabled={readOnly}
-            onChange={onChange}
-            label={{ name: `${translation.yes}/${translation.no}`, labelType: 'labelMedium' }}
-          />
-        </div>
-      )}
-    />
-  )
-}