@helpwave/hightide 0.0.1

package/components/date/YearMonthPicker.tsx

@@ -0,0 +1,130 @@
+import { useEffect, useRef, useState } from 'react'
+import { Scrollbars } from 'react-custom-scrollbars-2'
+import { noop } from '../../util/noop'
+import { equalSizeGroups, range } from '../../util/array'
+import clsx from 'clsx'
+import { Expandable } from '../Expandable'
+import { addDuration, monthsList, subtractDuration } from '../../util/date'
+import { useLocale } from '../../hooks/useLanguage'
+
+export type YearMonthPickerProps = {
+  displayedYearMonth?: Date,
+  start?: Date,
+  end?: Date,
+  onChange?: (date: Date) => void,
+  className?: string,
+  maxHeight?: number,
+  showValueOpen?: boolean,
+}
+
+// TODO use a dynamically loading infinite list here
+export const YearMonthPicker = ({
+                                  displayedYearMonth = new Date(),
+                                  start = subtractDuration(new Date(), { years: 50 }),
+                                  end = addDuration(new Date(), { years: 50 }),
+                                  onChange = noop,
+                                  className = '',
+                                  maxHeight = 300,
+                                  showValueOpen = true
+                                }: YearMonthPickerProps) => {
+  const locale = useLocale()
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const scrollToItem = () => {
+      if (ref.current) {
+        ref.current.scrollIntoView({
+          behavior: 'instant',
+          block: 'center',
+        })
+      }
+    }
+
+    scrollToItem()
+  }, [ref])
+
+  if (end < start) {
+    console.error(`startYear: (${start}) less than endYear: (${end})`)
+    return null
+  }
+
+  const years = range(start.getFullYear(), end.getFullYear())
+
+  return (
+    <div className={clsx('col select-none', className)}>
+      <Scrollbars autoHeight autoHeightMax={maxHeight} style={{ height: '100%' }}>
+        <div className="col gap-y-1 mr-3">
+          {years.map(year => {
+            const selectedYear = displayedYearMonth.getFullYear() === year
+            return (
+              <Expandable
+                key={year}
+                ref={(displayedYearMonth.getFullYear() ?? new Date().getFullYear()) === year ? ref : undefined}
+                label={<span className={clsx({ 'text-primary font-bold': selectedYear })}>{year}</span>}
+                initialExpansion={showValueOpen && selectedYear}
+              >
+                <div className="col gap-y-1 px-2 pb-2">
+                  {equalSizeGroups([...monthsList], 3).map((monthList, index) => (
+                    <div key={index} className="row">
+                      {monthList.map(month => {
+                        const monthIndex = monthsList.indexOf(month)
+                        const newDate = new Date(year, monthIndex)
+
+                        const selectedMonth = selectedYear && monthIndex === displayedYearMonth.getMonth()
+                        const firstOfMonth = new Date(year, monthIndex, 1)
+                        const lastOfMonth = new Date(year, monthIndex, 1)
+                        const isAfterStart = start === undefined || start <= addDuration(subtractDuration(lastOfMonth, { days: 1 }), { months: 1 })
+                        const isBeforeEnd = end === undefined || firstOfMonth <= end
+                        const isValid = isAfterStart && isBeforeEnd
+                        return (
+                          <button
+                            key={month}
+                            disabled={!isValid}
+                            className={clsx(
+                              'chip hover:brightness-95 flex-1',
+                              {
+                                'bg-gray-50 text-black': !selectedMonth && isValid,
+                                'bg-primary text-on-primary': selectedMonth && isValid,
+                                'bg-disabled-background text-disabled-text': !isValid
+                              }
+                            )}
+                            onClick={() => {
+                              onChange(newDate)
+                            }}
+                          >
+                            {new Intl.DateTimeFormat(locale, { month: 'short' }).format(newDate)}
+                          </button>
+                        )
+                      })}
+                    </div>
+                  ))}
+                </div>
+              </Expandable>
+            )
+          })}
+        </div>
+      </Scrollbars>
+    </div>
+  )
+}
+
+export const ControlledYearMonthPicker = ({
+                                         displayedYearMonth = new Date(),
+                                         onChange = noop,
+                                         ...props
+                                       }: YearMonthPickerProps) => {
+  const [yearMonth, setYearMonth] = useState<Date>(displayedYearMonth)
+
+  useEffect(() => setYearMonth(displayedYearMonth), [displayedYearMonth])
+
+  return (
+    <YearMonthPicker
+      displayedYearMonth={yearMonth}
+      onChange={date => {
+        setYearMonth(date)
+        onChange(date)
+      }}
+      {...props}
+    />
+  )
+}

package/components/examples/InputGroupExample.tsx

@@ -0,0 +1,58 @@
+import { useState } from 'react'
+import type { InputGroupProps } from '../InputGroup'
+import { InputGroup } from '../InputGroup'
+import { Select } from '../user-input/Select'
+import { Input } from '../user-input/Input'
+import { Textarea } from '../user-input/Textarea'
+
+export type InputGroupExampleProps = Omit<InputGroupProps, 'inputs' | 'onChange'>
+
+type InputType = {
+  subject?: string,
+  propertyName: string,
+  description: string,
+}
+
+/**
+ * Example for an Input Group
+ */
+export const InputGroupExample = ({
+  ...props
+}: InputGroupExampleProps) => {
+  const [state, setState] = useState<InputType>({
+    propertyName: '',
+    description: ''
+  })
+
+  return (
+    <InputGroup
+      {...props}
+      onChange={console.log}
+    >
+      <Select
+        key="item1"
+        label={{ name: 'Subject Type', labelType: 'labelSmall' }}
+        value={state.subject}
+        options={[
+          { value: 'organization', label: 'Organization' },
+          { value: 'ward', label: 'Ward' },
+          { value: 'bed', label: 'Bed' },
+          { value: 'patient', label: 'Patient' },
+        ]}
+        onChange={subject => setState({ ...state, subject })}
+      />
+      <Input
+        key="item2"
+        label={{ name: 'Property Name' }}
+        value={state.propertyName}
+        onChange={propertyName => setState({ ...state, propertyName })}
+      />
+      <Textarea
+        key="item3"
+        label={{ name: 'Description' }}
+        value={state.description}
+        onChange={description => setState({ ...state, description })}
+      />
+    </InputGroup>
+  )
+}

package/components/examples/MultiSelectExample.tsx

@@ -0,0 +1,57 @@
+import { useEffect, useState } from 'react'
+import type { MultiSelectProps } from '../user-input/MultiSelect'
+import { MultiSelect } from '../user-input/MultiSelect'
+import { ChipList } from '../ChipList'
+
+type MultiSelectExampleProps = Omit<MultiSelectProps<string>, 'search' | 'selectedDisplay'> & {
+  enableSearch: boolean,
+  useChipDisplay: boolean,
+}
+
+export const MultiSelectExample = ({
+  options,
+  hintText,
+  enableSearch,
+  onChange,
+  useChipDisplay = false,
+  ...props
+}: MultiSelectExampleProps) => {
+  const [usedOptions, setUsedOptions] = useState(options)
+
+  useEffect(() => {
+    setUsedOptions(options)
+  }, [options])
+
+  useEffect(() => {
+    setUsedOptions(options)
+  }, [options])
+
+  useEffect(() => {
+    setUsedOptions(options.map(value => ({ ...value, selected: false })))
+  }, [hintText, options])
+
+  return (
+    <MultiSelect
+      options={usedOptions}
+      onChange={value => {
+        onChange(value)
+        setUsedOptions(value)
+      }}
+      hintText={hintText}
+      search={enableSearch ? { initialSearch: '', searchMapping: value => [value.label] } : undefined}
+      selectedDisplay={useChipDisplay ?
+          ({ 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 }))}
+            />
+            )
+          } : undefined}
+      {...props}
+    />
+  )
+}

package/components/examples/SearchableSelectExample.tsx

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react'
+import type { SearchableSelectProps } from '../user-input/SearchableSelect'
+import { SearchableSelect } from '../user-input/SearchableSelect'
+
+export type SearchableSelectExampleProps = Omit<SearchableSelectProps<string>, 'searchMapping'|'additionalItems'>
+
+/**
+ * Example for a Searchable select
+ */
+export const SearchableSelectExample = ({
+  value,
+  options,
+  onChange,
+  ...props
+}: SearchableSelectExampleProps) => {
+  const [selected, setSelected] = useState<string | undefined>(value)
+
+  useEffect(() => {
+    setSelected(options.find(value1 => value1.value === value)?.value)
+  }, [options, value])
+
+  return (
+    <SearchableSelect
+      {...props}
+      value={selected}
+      options={options}
+      onChange={value => {
+        setSelected(value)
+        onChange(value)
+      }}
+      searchMapping={value1 => [value1.value]}
+    />
+  )
+}

package/components/examples/SelectExample.tsx

@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react'
+import { Select, type SelectProps } from '../user-input/Select'
+
+type SelectExampleProps<T> = Omit<SelectProps<T>, 'onChange' | 'additionalItems' | 'selectedDisplayOverwrite'>
+
+export const SelectExample = <T, >({ options, value, hintText, ...props }: SelectExampleProps<T>) => {
+  const [selected, setSelected] = useState(value)
+
+  useEffect(() => {
+    if (options.find(options => options.value === value)) {
+      setSelected(value)
+    }
+  }, [options, value])
+
+  useEffect(() => {
+    setSelected(undefined)
+  }, [hintText])
+
+  return (
+    <Select
+      value={selected}
+      options={options}
+      onChange={value => setSelected(value)}
+      hintText={hintText}
+      {...props}
+    />
+  )
+}

package/components/examples/StackingModals.tsx

@@ -0,0 +1,54 @@
+import { useState } from 'react'
+import { ModalRegister } from '../modals/ModalRegister'
+import { ConfirmDialog } from '../modals/ConfirmDialog'
+import { SolidButton } from '../Button'
+import { modalRootName } from '../modals/Modal'
+
+/**
+ * An Example Component for Stacking Modals
+ */
+export const StackingModals = () => {
+  const [modal1, setModal1] = useState(false)
+  const [modal2, setModal2] = useState(false)
+  const [modal3, setModal3] = useState(false)
+
+  return (
+    <ModalRegister>
+      <ConfirmDialog
+        id="1"
+        isOpen={modal1}
+        onConfirm={() => setModal1(false)}
+        onBackgroundClick={() => setModal1(false)}
+        onCloseClick={() => setModal1(false)}
+        modalClassName="!bg-yellow-200 min-h-[300px]"
+      >
+        {'I\'m Modal 1'}
+        <SolidButton onClick={() => setModal2(true)}>Open Modal 2</SolidButton>
+      </ConfirmDialog>
+      <ConfirmDialog
+        id="2"
+        isOpen={modal2}
+        onConfirm={() => setModal2(false)}
+        onBackgroundClick={() => setModal2(false)}
+        onCloseClick={() => setModal2(false)}
+        modalClassName="!bg-green-200 min-w-[300px]"
+      >
+        {'The next layer of Modals!'}
+        {'This is Modal 2'}
+        <SolidButton onClick={() => setModal3(true)}>Open Modal 3</SolidButton>
+      </ConfirmDialog>
+      <ConfirmDialog
+        id="3"
+        isOpen={modal3}
+        onConfirm={() => setModal3(false)}
+        onBackgroundClick={() => setModal3(false)}
+        onCloseClick={() => setModal3(false)}
+      >
+        This is Modal 3!
+      </ConfirmDialog>
+      <div className="row items-center justify-center min-h-[400px]" id={modalRootName}>
+        <SolidButton onClick={() => setModal1(true)}>Open Modal 1</SolidButton>
+      </div>
+    </ModalRegister>
+  )
+}

package/components/examples/TableExample.tsx

@@ -0,0 +1,159 @@
+import { useEffect, useState } from 'react'
+import type { TableProps, TableSortingFunctionType, TableSortingType, TableState } from '../Table'
+import {
+  addElementToTable,
+  defaultTableStatePagination,
+  defaultTableStateSelection,
+  removeFromTableSelection,
+  Table
+} from '../Table'
+import { Input } from '../user-input/Input'
+import { SolidButton, TextButton } from '../Button'
+import { SortButton } from '../SortButton'
+
+export type DataType = {
+  id: string,
+  name: string,
+  age: number,
+}
+
+export const exampleData: DataType[] = [
+  { id: 'data1', name: 'Name 1', age: 23 },
+  { id: 'data2', name: 'Name 2', age: 21 },
+  { id: 'data3', name: 'Name 3', age: 32 },
+  { id: 'data4', name: 'Name 4', age: 42 },
+  { id: 'data5', name: 'Name 5', age: 17 },
+  { id: 'data6', name: 'Name 6', age: 26 },
+  { id: 'data7', name: 'Name 7', age: 19 },
+  { id: 'data8', name: 'Name 8', age: 31 }
+]
+
+type SortingKeys = 'id'|'name'|'age'
+
+const TableExample = ({ data: initialData }: Pick<TableProps<DataType>, 'data'>) => {
+  const [data, setData] = useState<DataType[]>(initialData)
+  const [tableState, setTableState] = useState<TableState>({
+    pagination: defaultTableStatePagination,
+    selection: defaultTableStateSelection
+  })
+
+  useEffect(() => {
+    setData(initialData)
+  }, [initialData])
+
+  const [sorting, setSorting] = useState<[SortingKeys, TableSortingType]>()
+  const [sortingKey, ascending] = sorting ?? ['', 'ascending']
+  const idMapping = (data: DataType) => data.id
+
+  const sortingFunctions: Record<SortingKeys, Record<TableSortingType, TableSortingFunctionType<DataType>>> = {
+    id: {
+      ascending: (t1, t2) => t1.id.localeCompare(t2.id),
+      descending: (t1, t2) => t1.id.localeCompare(t2.id) * -1,
+    },
+    name: {
+      ascending: (t1, t2) => t1.name.localeCompare(t2.name),
+      descending: (t1, t2) => t1.name.localeCompare(t2.name) * -1,
+    },
+    age: {
+      ascending: (t1, t2) => t1.age - t2.age,
+      descending: (t1, t2) => (t1.age - t2.age) * -1,
+    }
+  }
+
+  return (
+    <div className="col gap-y-12 items-center">
+      <Table
+        stateManagement={[tableState, (newTableState) => {
+          setTableState(newTableState)
+          setData(data)
+        }]}
+        data={data}
+        identifierMapping={idMapping}
+        rowMappingToCells={dataObject => [
+          <span key="id" className="textstyle-title-md w-[100px] text-ellipsis overflow-hidden block">{dataObject.id}</span>,
+          <Input key="name" value={dataObject.name} onChange={text => {
+            setData(data.map(value => value.id === dataObject.id ? { ...dataObject, name: text } : value))
+            setSorting(undefined)
+          }} />,
+          <Input key="age" type="number" value={dataObject.age.toString()} onChange={text => {
+            setData(data.map(value => value.id === dataObject.id ? { ...dataObject, age: parseInt(text) } : value))
+            setSorting(undefined)
+          }} />,
+          <TextButton
+            key="delete"
+            color="negative"
+            onClick={() => {
+              const newData = data.filter(value => value.id !== dataObject.id)
+              setData(newData)
+              setTableState(removeFromTableSelection(tableState, [dataObject], data.length, idMapping))
+            }}
+          >Delete</TextButton>
+        ]}
+        header={[
+          <SortButton
+            key="headerId"
+            ascending={sortingKey === 'id' ? ascending : undefined}
+            onClick={newTableSorting => {
+              setSorting(['id', newTableSorting])
+              setData(data.sort(sortingFunctions.id[newTableSorting]))
+            }}
+          >
+            <span className="textstyle-table-header">Id</span>
+          </SortButton>,
+          <SortButton
+            key="name"
+            ascending={sortingKey === 'name' ? ascending : undefined}
+            onClick={newTableSorting => {
+              setSorting(['name', newTableSorting])
+              setData(data.sort(sortingFunctions.name[newTableSorting]))
+            }}
+          >
+            <span className="textstyle-table-header">Name</span>
+          </SortButton>,
+          <SortButton
+            key="name"
+            ascending={sortingKey === 'age' ? ascending : undefined}
+            onClick={newTableSorting => {
+              setSorting(['age', newTableSorting])
+              setData(data.sort(sortingFunctions.age[newTableSorting]))
+            }}
+          >
+            <span key="age" className="textstyle-table-header">age</span>
+          </SortButton>,
+          <></>
+        ]}
+      />
+      <div className="row gap-x-2">
+        <SolidButton
+          className="w-auto"
+          onClick={() => {
+            const newData = {
+              id: Math.random().toString(),
+              name: 'Name ' + data.length,
+              age: Math.ceil(Math.random() * 100)
+            }
+            const withNewData = [...data, newData]
+            const sorted = sortingKey ? withNewData.sort(sortingFunctions[sortingKey][ascending]) : withNewData
+            setData(sorted)
+            setTableState(addElementToTable(tableState, sorted, newData, idMapping))
+          }}
+        >
+          {'Add Data'}
+        </SolidButton>
+        <TextButton
+          className="w-auto"
+          onClick={() => {
+            const selectedData = data.filter((d) => tableState.selection?.currentSelection.includes(idMapping(d)))
+            const unselectedData = data.filter((d) => !tableState.selection?.currentSelection.includes(idMapping(d)))
+            setData(unselectedData)
+            setTableState(removeFromTableSelection(tableState, selectedData, data.length, idMapping))
+          }}
+        >
+          {'Remove all selected'}
+        </TextButton>
+      </div>
+    </div>
+  )
+}
+
+export default TableExample

package/components/examples/TextareaExample.tsx

@@ -0,0 +1,23 @@
+import { useState } from 'react'
+import type { TextareaProps } from '../user-input/Textarea'
+import { Textarea } from '../user-input/Textarea'
+
+export type TextareaExampleProps = Omit<TextareaProps, 'onChange'|'onEditCompleted'>
+
+/**
+ * Example for the Textarea component
+ */
+export const TextareaExample = ({
+  value,
+  ...props
+}: TextareaExampleProps) => {
+  const [text, setText] = useState<string>(value as string)
+  return (
+    <Textarea
+      {...props}
+      value={text}
+      onChange={setText}
+      onEditCompleted={setText}
+    />
+  )
+}

package/components/examples/TileExample.tsx

@@ -0,0 +1,25 @@
+import { Info, X } from 'lucide-react'
+import type { TileProps } from '../layout/Tile'
+import { Tile } from '../layout/Tile'
+
+export type TileExampleProps = Omit<TileProps, 'prefix' | 'suffix'> & {
+  prefix: boolean,
+  suffix: boolean,
+}
+
+/**
+ * An Example for using the tile
+ */
+export const TileExample = ({
+  prefix,
+  suffix,
+  ...restProps
+}: TileExampleProps) => {
+  return (
+    <Tile
+      {...restProps}
+      prefix={prefix ? <Info size={20}/> : undefined}
+      suffix={suffix ? <X size={20}/> : undefined}
+    />
+  )
+}

package/components/examples/date/DateTimePickerExample.tsx

@@ -0,0 +1,53 @@
+import { useEffect, useState } from 'react'
+import type { DateTimePickerProps } from '../../user-input/DateAndTimePicker'
+import { DateTimePicker } from '../../user-input/DateAndTimePicker'
+import { noop } from '../../../util/noop'
+import type { DatePickerProps } from '../../date/DatePicker'
+import type { TimePickerProps } from '../../date/TimePicker'
+import type { YearMonthPickerProps } from '../../date/YearMonthPicker'
+import type { DayPickerProps } from '../../date/DayPicker'
+
+export type DateTimePickerExampleProps = Omit<DateTimePickerProps, 'datePickerProps' | 'timePickerProps'> &
+  Pick<DatePickerProps, 'initialDisplay'> & Pick<TimePickerProps, 'is24HourFormat' | 'minuteIncrement'> &
+  Pick<YearMonthPickerProps, 'showValueOpen'> & Pick<DayPickerProps, 'markToday' | 'weekStart'>
+
+/**
+ * Example for the DateTimePicker
+ */
+export const DateTimePickerExample = ({
+  value,
+  onChange = noop,
+  onRemove = noop,
+  onFinish = noop,
+  initialDisplay,
+  is24HourFormat,
+  minuteIncrement,
+  showValueOpen,
+  markToday,
+  weekStart,
+  ...props
+}: DateTimePickerExampleProps) => {
+  const [time, setTime] = useState(value)
+
+  useEffect(() => setTime(value), [value])
+  return (
+    <DateTimePicker
+      {...props}
+      value={time}
+      onChange={date => {
+        onChange(date)
+        setTime(date)
+      }}
+      onRemove={() => {
+        onRemove()
+        setTime(new Date())
+      }}
+      onFinish={date => {
+        onFinish(date)
+        setTime(date)
+      }}
+      timePickerProps={{ is24HourFormat, minuteIncrement }}
+      datePickerProps={{ initialDisplay, dayPickerProps: { markToday, weekStart }, yearMonthPickerProps: { showValueOpen } }}
+    />
+  )
+}

package/components/examples/properties/CheckboxPropertyExample.tsx

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react'
+import type { CheckboxPropertyProps } from '../../properties/CheckboxProperty'
+import { CheckboxProperty } from '../../properties/CheckboxProperty'
+
+export type CheckboxPropertyExampleProps = Omit<CheckboxPropertyProps, 'onChange' | 'onRemove'> & {
+  readOnly: boolean,
+}
+
+/**
+ * Example for using the CheckboxProperty
+ */
+export const CheckboxPropertyExample = ({
+  value = false,
+  ...restProps
+}: CheckboxPropertyExampleProps) => {
+  const [usedValue, setUsedValue] = useState<boolean>(value)
+
+  useEffect(() => {
+    setUsedValue(value)
+  }, [value])
+
+  return (
+    <CheckboxProperty
+      {...restProps}
+      onChange={setUsedValue}
+      value={usedValue}
+    />
+  )
+}