@helpwave/hightide 0.0.1

package/components/properties/DateProperty.tsx

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

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

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

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

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

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

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