@helpwave/hightide 0.0.9 → 0.0.12

package/components/properties/DateProperty.tsx

@@ -1,58 +0,0 @@
-import { CalendarDays } from 'lucide-react'
-import clsx from 'clsx'
-import { formatDate, formatDateTime } from '../../util/date'
-import { noop } from '../../util/noop'
-import { Input } from '../user-input/Input'
-import type { PropertyBaseProps } from './PropertyBase'
-import { PropertyBase } from './PropertyBase'
-
-export type DatePropertyProps = Omit<PropertyBaseProps, 'icon' | 'input' | 'hasValue'> & {
-  value?: Date,
-  onChange?: (date: Date) => void,
-  onEditComplete?: (value: Date) => void,
-  type?: 'dateTime' | 'date',
-}
-
-/**
- * An Input for date properties
- */
-export const DateProperty = ({
-  value,
-  onChange = noop,
-  onEditComplete = noop,
-  readOnly,
-  type = 'dateTime',
-  ...baseProps
-}: DatePropertyProps) => {
-  const hasValue = !!value
-
-  const dateText = value ? (type === 'dateTime' ? formatDateTime(value) : formatDate(value)) : ''
-  return (
-    <PropertyBase
-      {...baseProps}
-      hasValue={hasValue}
-      icon={<CalendarDays size={16}/>}
-      input={({ softRequired }) => (
-        <div
-          className={clsx('row grow py-2 px-4 cursor-pointer', { 'text-warning': softRequired && !hasValue })}
-        >
-          <Input
-            className={clsx('!ring-0 !border-0 !outline-0 !p-0 !m-0 !shadow-none !w-fit !rounded-none', { 'bg-surface-warning': softRequired && !hasValue })}
-            value={dateText}
-            type={type === 'dateTime' ? 'datetime-local' : 'date'}
-            readOnly={readOnly}
-            onChange={(value, event) => {
-              if (!event.target.value) {
-                event.preventDefault()
-                return
-              }
-              const dueDate = new Date(value)
-              onChange(dueDate)
-            }}
-            onEditCompleted={(value) => onEditComplete(new Date(value))}
-          />
-        </div>
-      )}
-    />
-  )
-}

package/components/properties/MultiSelectProperty.tsx

@@ -1,82 +0,0 @@
-import { List } 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 type { MultiSelectProps } from '../user-input/MultiSelect'
-import { MultiSelect } from '../user-input/MultiSelect'
-import { ChipList } from '../ChipList'
-import type { PropertyBaseProps } from './PropertyBase'
-import { PropertyBase } from './PropertyBase'
-
-type MultiSelectPropertyTranslation = {
-  select: string,
-}
-
-const defaultMultiSelectPropertyTranslation: Record<Languages, MultiSelectPropertyTranslation> = {
-  en: {
-    select: 'Select'
-  },
-  de: {
-    select: 'Auswählen'
-  }
-}
-
-export type MultiSelectPropertyProps<T> =
-  Omit<PropertyBaseProps & MultiSelectProps<T>, 'icon' | 'input' | 'hasValue' | 'className' | 'disabled' | 'label' | 'triggerClassName'>
-
-/**
- * An Input for MultiSelect properties
- */
-export const MultiSelectProperty = <T, >({
-  overwriteTranslation,
-  options,
-  name,
-  readOnly = false,
-  softRequired,
-  onRemove,
-  ...multiSelectProps
-}: PropsForTranslation<MultiSelectPropertyTranslation, MultiSelectPropertyProps<T>>) => {
-  const translation = useTranslation(defaultMultiSelectPropertyTranslation, overwriteTranslation)
-  const hasValue = options.some(value => value.selected)
-  let triggerClassName: string
-  if (softRequired && !hasValue) {
-    triggerClassName = 'border-warning hover:brightness-90'
-  }
-
-  return (
-    <PropertyBase
-      name={name}
-      onRemove={onRemove}
-      readOnly={readOnly}
-      softRequired={softRequired}
-      hasValue={hasValue}
-      icon={<List size={16}/>}
-      input={({ softRequired }) => (
-        <div
-          className={clsx('row grow py-2 px-4 cursor-pointer', { 'text-warning': softRequired && !hasValue })}
-        >
-          <MultiSelect
-            {...multiSelectProps}
-            className={clsx('w-full', { 'bg-surface-warning': softRequired && !hasValue })}
-            triggerClassName={triggerClassName}
-            selectedDisplay={({ items }) => {
-              const selected = items.filter(value => value.selected)
-              if (selected.length === 0) {
-                return (<span>Select</span>)
-              }
-              return (
-                <ChipList
-                  list={selected.map(value => ({ children: value.label }))}
-                />
-              )
-            }}
-            options={options}
-            disabled={readOnly}
-            hintText={`${translation.select}...`}
-          />
-        </div>
-      )}
-    />
-  )
-}

package/components/properties/NumberProperty.tsx

@@ -1,86 +0,0 @@
-import { Binary } from 'lucide-react'
-import clsx from 'clsx'
-import { noop } from '../../util/noop'
-import { Input } from '../user-input/Input'
-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 NumberPropertyTranslation = {
-  value: string,
-}
-
-const defaultNumberPropertyTranslation: Record<Languages, NumberPropertyTranslation> = {
-  en: {
-    value: 'Value'
-  },
-  de: {
-    value: 'Wert'
-  }
-}
-
-export type NumberPropertyProps = Omit<PropertyBaseProps, 'icon' | 'input' | 'hasValue'> & {
-  value?: number,
-  suffix?: string,
-  onChange?: (value: number) => void,
-  onEditComplete?: (value: number) => void,
-}
-
-/**
- * An Input for number properties
- */
-export const NumberProperty = ({
-  overwriteTranslation,
-  value,
-  onChange = noop,
-  onRemove = noop,
-  onEditComplete = noop,
-  readOnly,
-  suffix,
-  ...baseProps
-}: PropsForTranslation<NumberPropertyTranslation, NumberPropertyProps>) => {
-  const translation = useTranslation(defaultNumberPropertyTranslation, overwriteTranslation)
-  const hasValue = value !== undefined
-
-  return (
-    <PropertyBase
-      {...baseProps}
-      onRemove={onRemove}
-      hasValue={hasValue}
-      icon={<Binary size={16}/>}
-      input={({ softRequired }) => (
-        <div
-          className={clsx('row grow py-2 px-4 cursor-pointer', { 'text-warning': softRequired && !hasValue })}
-        >
-          <Input
-            expanded={false}
-            className={clsx('!ring-0 !border-0 !outline-0 !p-0 !m-0 !w-fit !shadow-none !rounded-none', { 'bg-surface-warning placeholder-warning': softRequired && !hasValue })}
-            value={value?.toString() ?? ''}
-            type="number"
-            readOnly={readOnly}
-            placeholder={`${translation.value}...`}
-            onChange={(value) => {
-              const numberValue = parseFloat(value)
-              if (isNaN(numberValue)) {
-                onRemove()
-              } else {
-                onChange(numberValue)
-              }
-            }}
-            onEditCompleted={(value) => {
-              const numberValue = parseFloat(value)
-              if (isNaN(numberValue)) {
-                onRemove()
-              } else {
-                onEditComplete(numberValue)
-              }
-            }}
-          />
-          {suffix && <span className={clsx('ml-1', { 'bg-surface-warning': softRequired && !hasValue })}>{suffix}</span>}
-        </div>
-      )}
-    />
-  )
-}

package/components/properties/PropertyBase.tsx

@@ -1,84 +0,0 @@
-import type { ReactNode } from 'react'
-import { AlertTriangle } from 'lucide-react'
-import clsx from 'clsx'
-import type { Languages } from '../../hooks/useLanguage'
-import { TextButton } from '../Button'
-import type { PropsForTranslation } from '../../hooks/useTranslation'
-import { useTranslation } from '../../hooks/useTranslation'
-
-type PropertyBaseTranslation = {
-  remove: string,
-}
-
-const defaultPropertyBaseTranslation: Record<Languages, PropertyBaseTranslation> = {
-  en: {
-    remove: 'Remove'
-  },
-  de: {
-    remove: 'Entfernen'
-  }
-}
-
-export type PropertyBaseProps = {
-  name: string,
-  input: (props: { softRequired: boolean, hasValue: boolean }) => ReactNode,
-  onRemove?: () => void,
-  hasValue: boolean,
-  softRequired?: boolean,
-  readOnly?: boolean,
-  icon?: ReactNode,
-  className?: string,
-}
-
-/**
- * A component for showing a properties with uniform styling
- */
-export const PropertyBase = ({
-  overwriteTranslation,
-  name,
-  input,
-  softRequired = false,
-  hasValue,
-  icon,
-  readOnly,
-  onRemove,
-  className = '',
-}: PropsForTranslation<PropertyBaseTranslation, PropertyBaseProps>) => {
-  const translation = useTranslation(defaultPropertyBaseTranslation, overwriteTranslation)
-  const requiredAndNoValue = softRequired && !hasValue
-  return (
-    <div className={clsx('row gap-x-0 group', className)}>
-      <div
-        className={
-          clsx('row gap-x-2 !w-[200px] px-4 py-2 items-center rounded-l-xl border-2 border-r-0', {
-            'bg-gray-100 text-black group-hover:border-primary border-gray-400': !requiredAndNoValue,
-            'bg-warning text-surface-warning group-hover:border-warning border-warning/90': requiredAndNoValue,
-          }, className)}
-      >
-        {icon}
-        {name}
-      </div>
-      <div className={
-        clsx('row grow justify-between items-center rounded-r-xl border-2 border-l-0', {
-          'bg-white group-hover:border-primary border-gray-400': !requiredAndNoValue,
-          'bg-surface-warning group-hover:border-warning border-warning/90': requiredAndNoValue,
-        }, className)}
-      >
-        {input({ softRequired, hasValue })}
-        {requiredAndNoValue && (
-          <div className="text-warning pr-4"><AlertTriangle size={24}/></div>
-        )}
-        {onRemove && (
-          <TextButton
-            onClick={onRemove}
-            color="negative"
-            className={clsx('pr-4 items-center', { '!text-transparent': !hasValue || readOnly })}
-            disabled={!hasValue || readOnly}
-          >
-            {translation.remove}
-          </TextButton>
-        )}
-      </div>
-    </div>
-  )
-}

package/components/properties/SelectProperty.tsx

@@ -1,67 +0,0 @@
-import { List } 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 type { SearchableSelectProps } from '../user-input/SearchableSelect'
-import { SearchableSelect } from '../user-input/SearchableSelect'
-import type { PropertyBaseProps } from './PropertyBase'
-import { PropertyBase } from './PropertyBase'
-
-type SingleSelectPropertyTranslation = {
-  select: string,
-}
-
-const defaultSingleSelectPropertyTranslation: Record<Languages, SingleSelectPropertyTranslation> = {
-  en: {
-    select: 'Select'
-  },
-  de: {
-    select: 'Auswählen'
-  }
-}
-
-export type SingleSelectPropertyProps<T> =
-  Omit<PropertyBaseProps & SearchableSelectProps<T>, 'icon' | 'input' | 'hasValue' | 'className' | 'disabled' | 'label' | 'labelClassName' | 'additionalItems'>
-
-/**
- * An Input for SingleSelect properties
- */
-export const SingleSelectProperty = <T, >({
-  overwriteTranslation,
-  value,
-  options,
-  name,
-  readOnly = false,
-  softRequired,
-  onRemove,
-  ...multiSelectProps
-}: PropsForTranslation<SingleSelectPropertyTranslation, SingleSelectPropertyProps<T>>) => {
-  const translation = useTranslation(defaultSingleSelectPropertyTranslation, overwriteTranslation)
-  const hasValue = value !== undefined
-
-  return (
-    <PropertyBase
-      name={name}
-      onRemove={onRemove}
-      readOnly={readOnly}
-      softRequired={softRequired}
-      hasValue={hasValue}
-      icon={<List size={16}/>}
-      input={({ softRequired }) => (
-        <div
-          className={clsx('row grow py-2 px-4 cursor-pointer', { 'text-warning': softRequired && !hasValue })}
-        >
-          <SearchableSelect
-            {...multiSelectProps}
-            value={value}
-            options={options}
-            isDisabled={readOnly}
-            className={clsx('w-full', { 'bg-surface-warning': softRequired && !hasValue })}
-            hintText={`${translation.select}...`}
-          />
-        </div>
-      )}
-    />
-  )
-}

package/components/properties/TextProperty.tsx

@@ -1,81 +0,0 @@
-import { Text } 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 { Textarea } from '../user-input/Textarea'
-import { noop } from '../../util/noop'
-import type { PropertyBaseProps } from './PropertyBase'
-import { PropertyBase } from './PropertyBase'
-
-type TextPropertyTranslation = {
-  value: string,
-}
-
-const defaultTextPropertyTranslation: Record<Languages, TextPropertyTranslation> = {
-  en: {
-    value: 'Text'
-  },
-  de: {
-    value: 'Text'
-  }
-}
-
-export type TextPropertyProps = Omit<PropertyBaseProps, 'icon' | 'input' | 'hasValue'> & {
-  value?: string,
-  onChange?: (value: string) => void,
-  onEditComplete?: (value: string) => void,
-}
-
-/**
- * An Input for Text properties
- */
-export const TextProperty = ({
-  overwriteTranslation,
-  value,
-  readOnly,
-  onChange = noop,
-  onRemove = noop,
-  onEditComplete = noop,
-  ...baseProps
-}: PropsForTranslation<TextPropertyTranslation, TextPropertyProps>) => {
-  const translation = useTranslation(defaultTextPropertyTranslation, overwriteTranslation)
-  const hasValue = value !== undefined
-
-  return (
-    <PropertyBase
-      {...baseProps}
-      onRemove={onRemove}
-      hasValue={hasValue}
-      icon={<Text size={16} />}
-      input={({ softRequired }) => (
-        <div
-          className={clsx('row grow pt-2 pb-1 px-4 cursor-pointer', { 'text-warning': softRequired && !hasValue })}
-        >
-          <Textarea
-            className={clsx('!ring-0 !border-0 !outline-0 !p-0 !m-0 !shadow-none !rounded-none', { 'bg-surface-warning placeholder-warning': softRequired && !hasValue })}
-            rows={5}
-            defaultStyle={false}
-            value={value ?? ''}
-            readOnly={readOnly}
-            placeholder={`${translation.value}...`}
-            onChange={(value) => {
-              if (!value) {
-                onRemove()
-              } else {
-                onChange(value)
-              }
-            }}
-            onEditCompleted={(value) => {
-              if (!value) {
-                onRemove()
-              } else {
-                onEditComplete(value)
-              }
-            }}
-          />
-        </div>
-      )}
-    />
-  )
-}

package/components/user-input/Checkbox.tsx

@@ -1,139 +0,0 @@
-import { useState } from 'react'
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
-import type { CheckedState } from '@radix-ui/react-checkbox'
-import { Check, Minus } from 'lucide-react'
-import clsx from 'clsx'
-import type { LabelProps } from './Label'
-import { Label } from './Label'
-
-type CheckBoxSize = 'small' | 'medium' | 'large'
-
-const checkboxSizeMapping: Record<CheckBoxSize, string> = {
-  small: 'size-4',
-  medium: 'size-6',
-  large: 'size-8',
-}
-
-const checkboxIconSizeMapping: Record<CheckBoxSize, string> = {
-  small: 'size-3',
-  medium: 'size-5',
-  large: 'size-7',
-}
-
-type CheckboxProps = {
-  /** used for the label's `for` attribute */
-  id?: string,
-  label?: Omit<LabelProps, 'id'>,
-  /**
-   * @default false
-   */
-  checked: CheckedState,
-  disabled?: boolean,
-  onChange?: (checked: boolean) => void,
-  onChangeTristate?: (checked: CheckedState) => void,
-  size?: CheckBoxSize,
-  className?: string,
-  containerClassName?: string,
-}
-
-/**
- * A Tristate checkbox
- *
- * The state is managed by the parent
- */
-const ControlledCheckbox = ({
-                              id,
-                              label,
-                              checked,
-                              disabled,
-                              onChange,
-                              onChangeTristate,
-                              size = 'medium',
-                              className = '',
-                              containerClassName
-                            }: CheckboxProps) => {
-  const usedSizeClass = checkboxSizeMapping[size]
-  const innerIconSize = checkboxIconSizeMapping[size]
-
-  const propagateChange = (checked: CheckedState) => {
-    if (onChangeTristate) {
-      onChangeTristate(checked)
-    }
-    if (onChange) {
-      onChange(checked === 'indeterminate' ? false : checked)
-    }
-  }
-
-  const changeValue = () => {
-    const newValue = checked === 'indeterminate' ? false : !checked
-    propagateChange(newValue)
-  }
-
-  return (
-    <div className={clsx('row justify-center items-center', containerClassName)}>
-      <CheckboxPrimitive.Root
-        onCheckedChange={propagateChange}
-        checked={checked}
-        disabled={disabled}
-        id={id}
-        className={clsx(usedSizeClass, `items-center border-2 rounded outline-none focus:border-primary`, {
-          'text-disabled-text border-disabled-text': disabled,
-          'border-on-background': !disabled,
-          'bg-primary/30 border-primary text-primary': checked === true || checked === 'indeterminate',
-          'hover:border-gray-400 focus:hover:border-primary': !checked
-        }, className)}
-      >
-        <CheckboxPrimitive.Indicator>
-          {checked === true && <Check className={innerIconSize}/>}
-          {checked === 'indeterminate' && <Minus className={innerIconSize}/>}
-        </CheckboxPrimitive.Indicator>
-      </CheckboxPrimitive.Root>
-      {label &&
-        <Label {...label} className={clsx('cursor-pointer', label.className)} htmlFor={id} onClick={changeValue}/>}
-    </div>
-  )
-}
-
-type UncontrolledCheckboxProps = Omit<CheckboxProps, 'value' | 'checked'> & {
-  /**
-   * @default false
-   */
-  defaultValue?: CheckedState,
-}
-
-/**
- * A Tristate checkbox
- *
- * The state is managed by this component
- */
-const UncontrolledCheckbox = ({
-                                onChange,
-                                onChangeTristate,
-                                defaultValue = false,
-                                ...props
-                              }: UncontrolledCheckboxProps) => {
-  const [checked, setChecked] = useState(defaultValue)
-
-  const handleChange = (checked: CheckedState) => {
-    if (onChangeTristate) {
-      onChangeTristate(checked)
-    }
-    if (onChange) {
-      onChange(checked === 'indeterminate' ? false : checked)
-    }
-    setChecked(checked)
-  }
-
-  return (
-    <ControlledCheckbox
-      {...props}
-      checked={checked}
-      onChangeTristate={handleChange}
-    />
-  )
-}
-
-export {
-  UncontrolledCheckbox,
-  ControlledCheckbox as Checkbox
-}