@helpwave/hightide 0.0.8 → 0.0.11

package/components/date/YearMonthPicker.tsx

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

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

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

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

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

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

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

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

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

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

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