@helpwave/hightide 0.0.1

package/stories/user-action/input/select/MultiSelect.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { MultiSelectExample } from '../../../../components/examples/MultiSelectExample'
+import { action } from '@storybook/addon-actions'
+
+const meta = {
+  title: 'User-Action/Input/Select',
+  component: MultiSelectExample,
+} satisfies Meta<typeof MultiSelectExample>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const MultiSelectVariations: Story = {
+  args: {
+    label: { name: 'Select-Label' },
+    options: [
+      { value: '1', selected: false, label: 'Entry 1' },
+      { value: '2', selected: false, label: 'Entry 2', disabled: true },
+      { value: '3', selected: false, label: 'Different Entry 3' },
+      { value: '4', selected: false, label: 'Custom styled Entry 4', className: '!text-red-400' },
+      { value: '5', selected: false, label: 'Entry 5' },
+      { value: '6', selected: false, label: 'Entry 6', disabled: true },
+      { value: '7', selected: false, label: 'Long Entry 7' },
+      { value: '8', selected: false, label: 'Long Entry 8' },
+      { value: '9', selected: false, label: 'Very Long Entry 9' },
+      { value: '10', selected: false, label: 'Long Entry 10' },
+      { value: '11', selected: false, label: 'Very very Long Entry 11' },
+      { value: '12', selected: false, label: 'Entry 12', disabled: true }
+    ],
+    disabled: false,
+    hintText: undefined,
+    showDisabledOptions: true,
+    useChipDisplay: true,
+    enableSearch: false,
+    className: '',
+    triggerClassName: '',
+    onChange: action('onChange'),
+  },
+}

package/stories/user-action/input/select/SearchableSelect.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { SearchableSelectExample } from '../../../../components/examples/SearchableSelectExample'
+import { action } from '@storybook/addon-actions'
+
+const meta = {
+  title: 'User-Action/Input/Select',
+  component: SearchableSelectExample,
+} satisfies Meta<typeof SearchableSelectExample>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const SearchableSelectVariations: Story = {
+  args: {
+    label: { name: 'Select-Label', labelType: 'labelMedium' },
+    value: undefined,
+    options: [
+      { value: 'Entry 1', label: 'Entry 1' },
+      { value: 'Entry 2', label: 'Entry 2', disabled: true },
+      { value: 'Entry 3', label: 'Entry 3' },
+      { value: 'Custom styled', label: <span className="!text-red-400">Custom styled</span> },
+      { value: 'Entry 5', label: 'Entry 5' },
+      { value: 'Entry 6', label: 'Entry 6', disabled: true }
+    ],
+    isDisabled: false,
+    hintText: 'Hinttext',
+    isHidingCurrentValue: false,
+    showDisabledOptions: true,
+    className: '',
+    onChange: action('onChange'),
+  },
+}

package/stories/user-action/input/select/Select.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { SelectExample } from '../../../../components/examples/SelectExample'
+
+const meta = {
+  title: 'User-Action/Input/Select',
+  component: SelectExample<string>,
+} satisfies Meta<typeof SelectExample<string>>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const SelectVariations: Story = {
+  args: {
+    label: { name: 'Select-Label', labelType: 'labelMedium' },
+    value: undefined,
+    options: [
+      { value: '1', label: 'Entry 1' },
+      { value: '2', label: 'Entry 2', disabled: true },
+      { value: '3', label: 'Entry 3' },
+      { value: '4', label: <span className="!text-red-400">Custom styled</span> },
+      { value: '5', label: 'Entry 5' },
+      { value: '6', label: 'Entry 6', disabled: true }
+    ],
+    isDisabled: false,
+    hintText: 'Hinttext',
+    isHidingCurrentValue: false,
+    showDisabledOptions: true,
+    className: '',
+  },
+}

package/stories/user-action/properties/CheckboxProperty.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { CheckboxPropertyExample } from '../../../components/examples/properties/CheckboxPropertyExample'
+
+const meta = {
+  title: 'User-Action/Property',
+  component: CheckboxPropertyExample,
+} satisfies Meta<typeof CheckboxPropertyExample>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const CheckboxPropertyVariation: Story = {
+  args: {
+    name: 'Property',
+    softRequired: false,
+    value: false,
+    readOnly: false,
+    className: '',
+  },
+}

package/stories/user-action/properties/DateProperty.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { DatePropertyExample } from '../../../components/examples/properties/DatePropertyExample'
+
+const meta = {
+  title: 'User-Action/Property',
+  component: DatePropertyExample,
+} satisfies Meta<typeof DatePropertyExample>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const DatePropertyVariation: Story = {
+  args: {
+    name: 'Property',
+    softRequired: false,
+    value: undefined,
+    readOnly: false,
+    type: 'dateTime',
+    className: '',
+  },
+}

package/stories/user-action/properties/MultiSelectProperty.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { MultiSelectPropertyExample } from '../../../components/examples/properties/MultiSelectPropertyExample'
+
+const meta = {
+  title: 'User-Action/Property',
+  component: MultiSelectPropertyExample,
+} satisfies Meta<typeof MultiSelectPropertyExample>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const MultiSelectPropertyVariation: Story = {
+  args: {
+    name: 'Fruits',
+    softRequired: false,
+    options: [
+      { value: 'apple', label: 'Apple', selected: false },
+      { value: 'pear', label: 'Pear', selected: false },
+      { value: 'plum', label: 'Plum', selected: false },
+      { value: 'strawberry', label: 'Strawberry', selected: false, disabled: true },
+      { value: 'orange', label: 'Orange', selected: false },
+      { value: 'maracuja', label: 'Maracuja', selected: false },
+      { value: 'lemon', label: 'Lemon', selected: false },
+      { value: 'pineapple', label: 'Pineapple', selected: false },
+      { value: 'kiwi', label: 'Kiwi', selected: false },
+      { value: 'watermelon', label: 'Watermelon', selected: false },
+    ],
+    readOnly: false,
+    hintText: 'Select',
+    enableSearch: true,
+    showDisabledOptions: true
+  },
+}

package/stories/user-action/properties/NumberProperty.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { NumberPropertyExample } from '../../../components/examples/properties/NumberPropertyExample'
+
+const meta = {
+  title: 'User-Action/Property',
+  component: NumberPropertyExample,
+} satisfies Meta<typeof NumberPropertyExample>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const NumberPropertyVariation: Story = {
+  args: {
+    name: 'Property',
+    softRequired: false,
+    value: undefined,
+    suffix: 'kg',
+    readOnly: false,
+    className: '',
+  },
+}

package/stories/user-action/properties/PropertyBase.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import clsx from 'clsx'
+import { PropertyBase } from '../../../components/properties/PropertyBase'
+
+const meta = {
+  title: 'User-Action/Property',
+  component: PropertyBase,
+} satisfies Meta<typeof PropertyBase>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const PropertyBaseVariation: Story = {
+  args: {
+    name: 'Property',
+    softRequired: false,
+    hasValue: true,
+    input: ({ softRequired, hasValue }) => (
+      <div
+        className={clsx('row grow py-2 px-4', { 'text-warning': softRequired && !hasValue })}
+      >
+        Value
+      </div>
+    ),
+    className: '',
+    readOnly: false,
+  },
+}

package/stories/user-action/properties/SingleSelectProperty.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { SingleSelectPropertyExample } from '../../../components/examples/properties/SelectPropertyExample'
+
+const meta = {
+  title: 'User-Action/Property',
+  component: SingleSelectPropertyExample,
+} satisfies Meta<typeof SingleSelectPropertyExample>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const SingleSelectPropertyVariation: Story = {
+  args: {
+    value: undefined,
+    name: 'Fruits',
+    softRequired: false,
+    options: [
+      { value: 'apple', label: 'Apple' },
+      { value: 'pear', label: 'Pear' },
+      { value: 'plum', label: 'Plum' },
+      { value: 'strawberry', label: 'Strawberry', disabled: true },
+      { value: 'orange', label: 'Orange' },
+      { value: 'maracuja', label: 'Maracuja' },
+      { value: 'lemon', label: 'Lemon' },
+      { value: 'pineapple', label: 'Pineapple' },
+      { value: 'kiwi', label: 'Kiwi' },
+      { value: 'watermelon', label: 'Watermelon' },
+    ],
+    readOnly: false,
+    hintText: 'Select',
+    showDisabledOptions: true,
+    isDisabled: false,
+    isHidingCurrentValue: true
+  },
+}

package/stories/user-action/properties/TextProperty.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { TextPropertyExample } from '../../../components/examples/properties/TextPropertyExample'
+
+const meta = {
+  title: 'User-Action/Property',
+  component: TextPropertyExample,
+} satisfies Meta<typeof TextPropertyExample>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const TextPropertyVariation: Story = {
+  args: {
+    name: 'Property',
+    softRequired: false,
+    value: undefined,
+    readOnly: false,
+    className: '',
+  },
+}

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowSyntheticDefaultImports": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noUncheckedIndexedAccess": true
+  }
+}

package/util/array.ts

@@ -0,0 +1,115 @@
+export const equalSizeGroups = <T >(array: T[], groupSize: number): T[][] => {
+  if (groupSize <= 0) {
+    console.warn(`group size should be greater than 0: groupSize = ${groupSize}`)
+    return [[...array]]
+  }
+
+  const groups = []
+  for (let i = 0; i < array.length; i += groupSize) {
+    groups.push(array.slice(i, Math.min(i + groupSize, array.length)))
+  }
+  return groups
+}
+
+/**
+ * @param start
+ * @param end inclusive
+ * @param allowEmptyRange Whether the range can be defined empty via end < start
+ */
+export const range = (start: number, end: number, allowEmptyRange: boolean = false): number[] => {
+  if (end < start) {
+    if (!allowEmptyRange) {
+      console.warn(`range: end (${end}) < start (${start}) should be allowed explicitly, set allowEmptyRange to true`)
+    }
+    return []
+  }
+  return Array.from({ length: end - start + 1 }, (_, index) => index + start)
+}
+
+/** Finds the closest match
+ * @param list The list of all possible matches
+ * @param firstCloser Return whether item1 is closer than item2
+ */
+export const closestMatch = <T >(list: T[], firstCloser: (item1: T, item2: T) => boolean) => {
+  return list.reduce((item1, item2) => {
+    return firstCloser(item1, item2) ? item1 : item2
+  })
+}
+
+/**
+ * returns the item in middle of a list and its neighbours before and after
+ * e.g. [1,2,3,4,5,6] for item = 1 would return [5,6,1,2,3]
+ */
+export const getNeighbours = <T >(list: T[], item: T, neighbourDistance: number = 2) => {
+  const index = list.indexOf(item)
+  const totalItems = neighbourDistance * 2 + 1
+  if (list.length < totalItems) {
+    console.warn('List is to short')
+    return list
+  }
+
+  if (index === -1) {
+    console.error('item not found in list')
+    return list.splice(0, totalItems)
+  }
+
+  let start = index - neighbourDistance
+  if (start < 0) {
+    start += list.length
+  }
+  const end = (index + neighbourDistance + 1) % list.length
+
+  const result: T[] = []
+  let ignoreOnce = list.length === totalItems
+  for (let i = start; i !== end || ignoreOnce; i = (i + 1) % list.length) {
+    result.push(list[i]!)
+    if (end === i && ignoreOnce) {
+      ignoreOnce = false
+    }
+  }
+  return result
+}
+
+export const createLoopingListWithIndex = <T >(list: T[], startIndex: number = 0, length: number = 0, forwards: boolean = true) => {
+  if (length < 0) {
+    console.warn(`createLoopingList: length must be >= 0, given ${length}`)
+  } else if (length === 0) {
+    length = list.length
+  }
+
+  const returnList: [number, T][] = []
+
+  if (forwards) {
+    for (let i = startIndex; returnList.length < length; i = (i + 1) % list.length) {
+      returnList.push([i, list[i]!])
+    }
+  } else {
+    for (let i = startIndex; returnList.length < length; i = i === 0 ? i = list.length - 1 : i - 1) {
+      returnList.push([i, list[i]!])
+    }
+  }
+
+  return returnList
+}
+
+export const createLoopingList = <T >(list: T[], startIndex: number = 0, length: number = 0, forwards: boolean = true) => {
+  return createLoopingListWithIndex(list, startIndex, length, forwards).map(([_, item]) => item)
+}
+
+export const ArrayUtil = {
+  unique: <T>(list: T[]): T[] => {
+    const seen = new Set<T>()
+    return list.filter((item) => {
+      if (seen.has(item)) {
+        return false
+      }
+      seen.add(item)
+      return true
+    })
+  },
+
+  difference: <T>(list: T[], removeList: T[]): T[] => {
+    const remove = new Set<T>(removeList)
+    return list.filter((item) => !remove.has(item))
+  }
+}

package/util/builder.ts

@@ -0,0 +1,9 @@
+/**
+ * A simple function that implements the builder pattern
+ * @param value The value to update which gets return with the same reference
+ * @param update The updates to apply on the object
+ */
+export const builder = <T>(value: T, update: (value: T) => void): T => {
+  update(value)
+  return value
+}

package/util/date.ts

@@ -0,0 +1,180 @@
+import { equalSizeGroups } from './array'
+
+export const monthsList = ['january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december'] as const
+export type Month = typeof monthsList[number]
+
+export const weekDayList = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'] as const
+export type WeekDay = typeof weekDayList[number]
+
+export const formatDate = (date: Date) => {
+  const year = date.getFullYear().toString().padStart(4, '0')
+  const month = (date.getMonth() + 1).toString().padStart(2, '0')
+  const day = (date.getDate()).toString().padStart(2, '0')
+  return `${year}-${month}-${day}`
+}
+
+export const formatDateTime = (date: Date) => {
+  const dateString = formatDate(date)
+  const hours = date.getHours().toString().padStart(2, '0')
+  const minutes = date.getMinutes().toString().padStart(2, '0')
+  return `${dateString}T${hours}:${minutes}`
+}
+
+export const getDaysInMonth = (year: number, month: number): number => {
+  const lastDayOfMonth = new Date(year, month + 1, 0)
+  return lastDayOfMonth.getDate()
+}
+
+export type Duration = {
+  years?: number,
+  months?: number,
+  days?: number,
+  hours?: number,
+  minutes?: number,
+  seconds?: number,
+  milliseconds?: number,
+}
+
+export const changeDuration = (date: Date, duration: Duration, isAdding?: boolean): Date => {
+  const {
+    years = 0,
+    months = 0,
+    days = 0,
+    hours = 0,
+    minutes = 0,
+    seconds = 0,
+    milliseconds = 0,
+  } = duration
+
+  // Check ranges
+  if (years < 0) {
+    console.error(`Range error years must be greater than 0: received ${years}`)
+    return new Date(date)
+  }
+  if (months < 0 || months > 11) {
+    console.error(`Range error month must be 0 <= month <= 11: received ${months}`)
+    return new Date(date)
+  }
+  if (days < 0) {
+    console.error(`Range error days must be greater than 0: received ${days}`)
+    return new Date(date)
+  }
+  if (hours < 0 || hours > 23) {
+    console.error(`Range error hours must be 0 <= hours <= 23: received ${hours}`)
+    return new Date(date)
+  }
+  if (minutes < 0 || minutes > 59) {
+    console.error(`Range error minutes must be 0 <= minutes <= 59: received ${minutes}`)
+    return new Date(date)
+  }
+  if (seconds < 0 || seconds > 59) {
+    console.error(`Range error seconds must be 0 <= seconds <= 59: received ${seconds}`)
+    return new Date(date)
+  }
+  if (milliseconds < 0) {
+    console.error(`Range error seconds must be greater than 0: received ${milliseconds}`)
+    return new Date(date)
+  }
+
+  const multiplier = isAdding ? 1 : -1
+
+  const newDate = new Date(date)
+
+  newDate.setFullYear(newDate.getFullYear() + multiplier * years)
+
+  newDate.setMonth(newDate.getMonth() + multiplier * months)
+
+  newDate.setDate(newDate.getDate() + multiplier * days)
+
+  newDate.setHours(newDate.getHours() + multiplier * hours)
+
+  newDate.setMinutes(newDate.getMinutes() + multiplier * minutes)
+
+  newDate.setSeconds(newDate.getSeconds() + multiplier * seconds)
+
+  newDate.setMilliseconds(newDate.getMilliseconds() + multiplier * milliseconds)
+
+  return newDate
+}
+
+export const addDuration = (date: Date, duration: Duration): Date => {
+  return changeDuration(date, duration, true)
+}
+
+export const subtractDuration = (date: Date, duration: Duration): Date => {
+  return changeDuration(date, duration, false)
+}
+
+export const getBetweenDuration = (startDate: Date, endDate: Date): Duration => {
+  const durationInMilliseconds = endDate.getTime() - startDate.getTime()
+
+  const millisecondsInSecond = 1000
+  const millisecondsInMinute = 60 * millisecondsInSecond
+  const millisecondsInHour = 60 * millisecondsInMinute
+  const millisecondsInDay = 24 * millisecondsInHour
+  const millisecondsInMonth = 30 * millisecondsInDay // Rough estimation, can be adjusted
+
+  const years = Math.floor(durationInMilliseconds / (365.25 * millisecondsInDay))
+  const months = Math.floor(durationInMilliseconds / millisecondsInMonth)
+  const days = Math.floor(durationInMilliseconds / millisecondsInDay)
+  const hours = Math.floor((durationInMilliseconds % millisecondsInDay) / millisecondsInHour)
+  const seconds = Math.floor((durationInMilliseconds % millisecondsInHour) / millisecondsInSecond)
+  const milliseconds = durationInMilliseconds % millisecondsInSecond
+
+  return {
+    years,
+    months,
+    days,
+    hours,
+    seconds,
+    milliseconds,
+  }
+}
+
+/** Checks if a given date is in the range of two dates
+ *
+ * An undefined value for startDate or endDate means no bound for the start or end respectively
+ */
+export const isInTimeSpan = (value: Date, startDate?: Date, endDate?: Date): boolean => {
+  if(startDate && endDate) {
+    console.assert(startDate <= endDate)
+    return startDate <= value && value <= endDate
+  } else if (startDate) {
+    return startDate <= value
+  } else if(endDate) {
+    return endDate >= value
+  } else {
+    return true
+  }
+}
+
+/** Compare two dates on the year, month, day */
+export const equalDate = (date1: Date, date2: Date) => {
+  return date1.getFullYear() === date2.getFullYear()
+    && date1.getMonth() === date2.getMonth()
+    && date1.getDate() === date2.getDate()
+}
+
+export const getWeeksForCalenderMonth = (date: Date, weekStart: WeekDay, weeks: number = 6) => {
+  const month = date.getMonth()
+  const year = date.getFullYear()
+
+  const dayList: Date[] = []
+  let currentDate = new Date(year, month, 1) // Start of month
+  const weekStartIndex = weekDayList.indexOf(weekStart)
+
+  // Move the current day to the week before
+  while (currentDate.getDay() !== weekStartIndex) {
+    currentDate = subtractDuration(currentDate, { days: 1 })
+  }
+
+  while (dayList.length < 7 * weeks) {
+    const date = new Date(currentDate)
+    date.setHours(date.getHours(), date.getMinutes()) // To make sure we are not overwriting the time
+    dayList.push(date)
+    currentDate = addDuration(currentDate, { days: 1 })
+  }
+
+  // weeks
+  return equalSizeGroups(dayList, 7)
+}

package/util/easeFunctions.ts

@@ -0,0 +1,37 @@
+import { clamp } from './math'
+
+export type EaseFunction = (t: number) => number
+
+export class EaseFunctions {
+  static cubicBezierGeneric(x1: number, y1: number, x2: number, y2: number): { x: EaseFunction, y: EaseFunction } {
+    // Calculate the x and y coordinates using the cubic Bézier formula
+    const cx = 3 * x1
+    const bx = 3 * (x2 - x1) - cx
+    const ax = 1 - cx - bx
+
+    const cy = 3 * y1
+    const by = 3 * (y2 - y1) - cy
+    const ay = 1 - cy - by
+
+    // Compute x and y values at parameter t
+    const x = (t: number) => ((ax * t + bx) * t + cx) * t
+    const y = (t: number) => ((ay * t + by) * t + cy) * t
+
+    return {
+      x,
+      y
+    }
+  }
+
+  static cubicBezier(x1: number, y1: number, x2: number, y2: number): EaseFunction {
+    const { y } = EaseFunctions.cubicBezierGeneric(x1, y1, x2, y2)
+    return (t: number) => {
+      t = clamp(t)
+      return y(t) // <= equal to x(t) * 0 + y(t) * 1
+    }
+  }
+
+  static easeInEaseOut(t: number): number {
+    return EaseFunctions.cubicBezier(0.65, 0, 0.35, 1)(t)
+  };
+}

package/util/emailValidation.ts

@@ -0,0 +1,3 @@
+export const validateEmail = (email: string): boolean => {
+  return /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(email)
+}