@morscherlab/mld-sdk 0.6.0

package/src/components/TimePicker.vue

@@ -0,0 +1,272 @@
+<script setup lang="ts">
+import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue'
+import { generateTimeSlots, formatTime, parseTime, compareTime } from '../composables/useTimeUtils'
+
+interface Props {
+  modelValue?: string
+  placeholder?: string
+  disabled?: boolean
+  error?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  min?: string
+  max?: string
+  step?: number
+  format?: '12h' | '24h'
+  clearable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: 'Select time',
+  disabled: false,
+  error: false,
+  size: 'md',
+  step: 15,
+  format: '24h',
+  clearable: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | undefined]
+}>()
+
+const isOpen = ref(false)
+const containerRef = ref<HTMLDivElement>()
+const listRef = ref<HTMLUListElement>()
+const highlightedIndex = ref(-1)
+
+const slots = computed(() => {
+  const start = props.min ?? '00:00'
+  const end = props.max ?? '23:59'
+  return generateTimeSlots(start, end, props.step)
+})
+
+const displayValue = computed(() => {
+  if (!props.modelValue) return ''
+  const { hour, minute } = parseTime(props.modelValue)
+  return formatTime(hour, minute, props.format)
+})
+
+function isSlotDisabled(slot: string): boolean {
+  if (props.min && compareTime(slot, props.min) < 0) return true
+  if (props.max && compareTime(slot, props.max) > 0) return true
+  return false
+}
+
+function selectSlot(slot: string) {
+  if (isSlotDisabled(slot) || props.disabled) return
+  emit('update:modelValue', slot)
+  isOpen.value = false
+}
+
+function clear() {
+  emit('update:modelValue', undefined)
+  isOpen.value = false
+}
+
+function toggleDropdown() {
+  if (props.disabled) return
+  isOpen.value = !isOpen.value
+}
+
+function handleClickOutside(event: MouseEvent) {
+  if (containerRef.value && !containerRef.value.contains(event.target as Node)) {
+    isOpen.value = false
+  }
+}
+
+function scrollToActiveSlot() {
+  nextTick(() => {
+    if (!listRef.value) return
+    const activeEl = listRef.value.querySelector('.mld-time-picker__slot--active') as HTMLElement | null
+    if (activeEl) {
+      activeEl.scrollIntoView({ block: 'center' })
+    } else if (props.modelValue) {
+      // Scroll to nearest slot
+      const nearestIndex = findNearestSlotIndex(props.modelValue)
+      if (nearestIndex >= 0) {
+        const children = listRef.value.children
+        if (children[nearestIndex]) {
+          (children[nearestIndex] as HTMLElement).scrollIntoView({ block: 'center' })
+        }
+      }
+    }
+  })
+}
+
+function findNearestSlotIndex(time: string): number {
+  if (slots.value.length === 0) return -1
+  let bestIndex = 0
+  let bestDiff = Infinity
+  for (let i = 0; i < slots.value.length; i++) {
+    const { hour: h1, minute: m1 } = parseTime(slots.value[i])
+    const { hour: h2, minute: m2 } = parseTime(time)
+    const minuteDiff = Math.abs((h1 * 60 + m1) - (h2 * 60 + m2))
+    if (minuteDiff < bestDiff) {
+      bestDiff = minuteDiff
+      bestIndex = i
+    }
+  }
+  return bestIndex
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (!isOpen.value) {
+    if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') {
+      event.preventDefault()
+      isOpen.value = true
+      return
+    }
+    return
+  }
+
+  switch (event.key) {
+    case 'ArrowDown': {
+      event.preventDefault()
+      let next = highlightedIndex.value + 1
+      while (next < slots.value.length && isSlotDisabled(slots.value[next])) next++
+      if (next < slots.value.length) {
+        highlightedIndex.value = next
+        scrollToHighlighted()
+      }
+      break
+    }
+    case 'ArrowUp': {
+      event.preventDefault()
+      let prev = highlightedIndex.value - 1
+      while (prev >= 0 && isSlotDisabled(slots.value[prev])) prev--
+      if (prev >= 0) {
+        highlightedIndex.value = prev
+        scrollToHighlighted()
+      }
+      break
+    }
+    case 'Enter': {
+      event.preventDefault()
+      if (highlightedIndex.value >= 0 && highlightedIndex.value < slots.value.length) {
+        selectSlot(slots.value[highlightedIndex.value])
+      }
+      break
+    }
+    case 'Escape': {
+      event.preventDefault()
+      isOpen.value = false
+      break
+    }
+  }
+}
+
+function scrollToHighlighted() {
+  nextTick(() => {
+    if (!listRef.value) return
+    const children = listRef.value.children
+    if (children[highlightedIndex.value]) {
+      (children[highlightedIndex.value] as HTMLElement).scrollIntoView({ block: 'nearest' })
+    }
+  })
+}
+
+watch(isOpen, (open) => {
+  if (open) {
+    // Set highlighted index to current value or nearest slot
+    if (props.modelValue) {
+      const idx = slots.value.indexOf(props.modelValue)
+      highlightedIndex.value = idx >= 0 ? idx : findNearestSlotIndex(props.modelValue)
+    } else {
+      highlightedIndex.value = 0
+    }
+    scrollToActiveSlot()
+  } else {
+    highlightedIndex.value = -1
+  }
+})
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
+</script>
+
+<template>
+  <div ref="containerRef" class="mld-time-picker" @keydown="handleKeydown">
+    <div class="mld-time-picker__input-wrapper">
+      <input
+        type="text"
+        readonly
+        :value="displayValue"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :class="[
+          'mld-time-picker__input',
+          `mld-time-picker__input--${size}`,
+          error ? 'mld-time-picker__input--error' : '',
+          disabled ? 'mld-time-picker__input--disabled' : '',
+        ]"
+        role="combobox"
+        aria-haspopup="listbox"
+        :aria-expanded="isOpen"
+        @click="toggleDropdown"
+      />
+      <button
+        v-if="clearable && modelValue"
+        type="button"
+        class="mld-time-picker__clear-btn"
+        aria-label="Clear time"
+        @click.stop="clear"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M18 6 6 18" /><path d="m6 6 12 12" />
+        </svg>
+      </button>
+      <div class="mld-time-picker__icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" />
+        </svg>
+      </div>
+    </div>
+
+    <Transition
+      enter-active-class="mld-time-picker__dropdown-enter-active"
+      enter-from-class="mld-time-picker__dropdown-enter-from"
+      enter-to-class="mld-time-picker__dropdown-enter-to"
+      leave-active-class="mld-time-picker__dropdown-leave-active"
+      leave-from-class="mld-time-picker__dropdown-leave-from"
+      leave-to-class="mld-time-picker__dropdown-leave-to"
+    >
+      <div
+        v-if="isOpen"
+        class="mld-time-picker__dropdown"
+      >
+        <ul
+          ref="listRef"
+          class="mld-time-picker__list"
+          role="listbox"
+          aria-label="Available times"
+        >
+          <li
+            v-for="(slot, index) in slots"
+            :key="slot"
+            role="option"
+            :aria-selected="slot === modelValue"
+            :aria-disabled="isSlotDisabled(slot)"
+            :class="[
+              'mld-time-picker__slot',
+              slot === modelValue ? 'mld-time-picker__slot--active' : '',
+              isSlotDisabled(slot) ? 'mld-time-picker__slot--disabled' : '',
+              index === highlightedIndex && !isSlotDisabled(slot) ? 'mld-time-picker__slot--highlighted' : '',
+            ]"
+            @click="selectSlot(slot)"
+          >
+            {{ formatTime(parseTime(slot).hour, parseTime(slot).minute, format) }}
+          </li>
+        </ul>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/time-picker.css';
+</style>

package/src/components/TimeRangeInput.story.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import TimeRangeInput from './TimeRangeInput.vue'
+import type { TimeRange } from '../types/components'
+
+function initState() {
+  return {
+    modelValue: { start: '09:00', end: '17:00' } as TimeRange | undefined,
+    disabled: false,
+    error: false,
+    size: 'md' as const,
+    step: 15,
+    format: '24h' as const,
+    showDuration: true,
+  }
+}
+</script>
+
+<template>
+  <Story title="Scheduling/TimeRangeInput">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 500px;">
+          <TimeRangeInput
+            v-model="state.modelValue"
+            :disabled="state.disabled"
+            :error="state.error"
+            :size="state.size"
+            :step="state.step"
+            :format="state.format"
+            :show-duration="state.showDuration"
+          />
+        </div>
+      </template>
+      <template #controls="{ state }">
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+        <HstCheckbox v-model="state.error" title="Error" />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="[
+            { value: 'sm', label: 'Small' },
+            { value: 'md', label: 'Medium' },
+            { value: 'lg', label: 'Large' },
+          ]"
+        />
+        <HstSlider v-model="state.step" title="Step (minutes)" :min="5" :max="60" :step="5" />
+        <HstSelect
+          v-model="state.format"
+          title="Format"
+          :options="[
+            { value: '24h', label: '24-hour' },
+            { value: '12h', label: '12-hour' },
+          ]"
+        />
+        <HstCheckbox v-model="state.showDuration" title="Show Duration" />
+      </template>
+    </Variant>
+
+    <Variant title="Morning Shift">
+      <div style="padding: 2rem; max-width: 500px;">
+        <TimeRangeInput
+          :model-value="{ start: '06:00', end: '14:00' }"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="12-Hour Format">
+      <div style="padding: 2rem; max-width: 500px;">
+        <TimeRangeInput
+          :model-value="{ start: '09:00', end: '17:00' }"
+          format="12h"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Min/Max">
+      <div style="padding: 2rem; max-width: 500px;">
+        <TimeRangeInput
+          :model-value="{ start: '08:00', end: '12:00' }"
+          min="06:00"
+          max="22:00"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="No Duration">
+      <div style="padding: 2rem; max-width: 500px;">
+        <TimeRangeInput
+          :model-value="{ start: '10:00', end: '15:00' }"
+          :show-duration="false"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div style="padding: 2rem; max-width: 500px;">
+        <TimeRangeInput
+          :model-value="{ start: '09:00', end: '17:00' }"
+          disabled
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/TimeRangeInput.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { TimeRange } from '../types/components'
+import TimePicker from './TimePicker.vue'
+import { durationMinutes, formatDuration, compareTime } from '../composables/useTimeUtils'
+
+interface Props {
+  modelValue?: TimeRange
+  disabled?: boolean
+  error?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  min?: string
+  max?: string
+  step?: number
+  format?: '12h' | '24h'
+  showDuration?: boolean
+  blockedRanges?: TimeRange[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  error: false,
+  size: 'md',
+  step: 15,
+  format: '24h',
+  showDuration: true,
+  blockedRanges: () => [],
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: TimeRange | undefined]
+}>()
+
+const startValue = computed(() => props.modelValue?.start)
+const endValue = computed(() => props.modelValue?.end)
+
+const duration = computed(() => {
+  if (!props.modelValue?.start || !props.modelValue?.end) return null
+  return durationMinutes(props.modelValue.start, props.modelValue.end)
+})
+
+const durationLabel = computed(() => {
+  if (duration.value === null) return ''
+  return formatDuration(duration.value)
+})
+
+const isInvalid = computed(() => {
+  if (!props.modelValue?.start || !props.modelValue?.end) return false
+  return compareTime(props.modelValue.start, props.modelValue.end) >= 0
+})
+
+const endMin = computed(() => {
+  if (props.modelValue?.start) return props.modelValue.start
+  return props.min
+})
+
+function onStartChange(value: string | undefined) {
+  if (!value) {
+    emit('update:modelValue', undefined)
+    return
+  }
+  const end = props.modelValue?.end || ''
+  emit('update:modelValue', { start: value, end })
+}
+
+function onEndChange(value: string | undefined) {
+  if (!value) {
+    emit('update:modelValue', undefined)
+    return
+  }
+  const start = props.modelValue?.start || ''
+  emit('update:modelValue', { start, end: value })
+}
+</script>
+
+<template>
+  <div class="mld-time-range">
+    <div class="mld-time-range__start">
+      <TimePicker
+        :model-value="startValue"
+        :disabled="disabled"
+        :error="error || isInvalid"
+        :size="size"
+        :min="min"
+        :max="max"
+        :step="step"
+        :format="format"
+        placeholder="Start"
+        @update:model-value="onStartChange"
+      />
+    </div>
+
+    <div class="mld-time-range__separator">
+      <span
+        v-if="showDuration && duration !== null"
+        :class="['mld-time-range__duration', isInvalid ? 'mld-time-range__duration--error' : '']"
+      >
+        {{ durationLabel }}
+      </span>
+    </div>
+
+    <div class="mld-time-range__end">
+      <TimePicker
+        :model-value="endValue"
+        :disabled="disabled"
+        :error="error || isInvalid"
+        :size="size"
+        :min="endMin"
+        :max="max"
+        :step="step"
+        :format="format"
+        placeholder="End"
+        @update:model-value="onEndChange"
+      />
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/time-range-input.css';
+</style>

package/src/components/ToastNotification.story.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import ToastNotification from './ToastNotification.vue'
+import { useToast } from '../composables/useToast'
+
+const toast = useToast()
+
+function showSuccess() {
+  toast.success('Analysis completed successfully.')
+}
+
+function showError() {
+  toast.error('Failed to process plate data. Please try again.')
+}
+
+function showWarning() {
+  toast.warning('3 wells have missing sample assignments.')
+}
+
+function showInfo() {
+  toast.info('Export file is being generated...')
+}
+
+function showAll() {
+  toast.success('Experiment saved.')
+  setTimeout(() => toast.info('Syncing with platform...'), 300)
+  setTimeout(() => toast.warning('Low disk space detected.'), 600)
+  setTimeout(() => toast.error('Connection timeout on retry.'), 900)
+}
+</script>
+
+<template>
+  <Story title="Feedback/ToastNotification">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem;">
+          <p style="margin: 0; color: var(--text-muted, #94a3b8); font-size: 0.875rem;">
+            Click a button to trigger a toast notification.
+          </p>
+          <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;">
+            <button
+              type="button"
+              style="padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; background: #10b981; color: #fff; cursor: pointer; font-size: 0.875rem;"
+              @click="toast.success(state.message || 'Success!')"
+            >
+              Success
+            </button>
+            <button
+              type="button"
+              style="padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; background: #ef4444; color: #fff; cursor: pointer; font-size: 0.875rem;"
+              @click="toast.error(state.message || 'Error!')"
+            >
+              Error
+            </button>
+            <button
+              type="button"
+              style="padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; background: #f59e0b; color: #fff; cursor: pointer; font-size: 0.875rem;"
+              @click="toast.warning(state.message || 'Warning!')"
+            >
+              Warning
+            </button>
+            <button
+              type="button"
+              style="padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; background: #3b82f6; color: #fff; cursor: pointer; font-size: 0.875rem;"
+              @click="toast.info(state.message || 'Info!')"
+            >
+              Info
+            </button>
+          </div>
+          <ToastNotification />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.message" title="Message" />
+      </template>
+    </Variant>
+
+    <Variant title="All Types">
+      <div style="padding: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem;">
+        <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;">
+          <button
+            type="button"
+            style="padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; background: #10b981; color: #fff; cursor: pointer; font-size: 0.875rem;"
+            @click="showSuccess"
+          >
+            Success Toast
+          </button>
+          <button
+            type="button"
+            style="padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; background: #ef4444; color: #fff; cursor: pointer; font-size: 0.875rem;"
+            @click="showError"
+          >
+            Error Toast
+          </button>
+          <button
+            type="button"
+            style="padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; background: #f59e0b; color: #fff; cursor: pointer; font-size: 0.875rem;"
+            @click="showWarning"
+          >
+            Warning Toast
+          </button>
+          <button
+            type="button"
+            style="padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; background: #3b82f6; color: #fff; cursor: pointer; font-size: 0.875rem;"
+            @click="showInfo"
+          >
+            Info Toast
+          </button>
+        </div>
+        <ToastNotification />
+      </div>
+    </Variant>
+
+    <Variant title="Multiple Toasts">
+      <div style="padding: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem;">
+        <button
+          type="button"
+          style="padding: 0.5rem 1rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; background: var(--bg-card, #fff); color: var(--text-primary, #1e293b); cursor: pointer; font-size: 0.875rem;"
+          @click="showAll"
+        >
+          Show All Types (stacked)
+        </button>
+        <p style="margin: 0; color: var(--text-muted, #94a3b8); font-size: 0.75rem;">
+          Click to see multiple toasts stacked. Click any toast to dismiss it.
+        </p>
+        <ToastNotification />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/ToastNotification.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { useToast } from '../composables/useToast'
+import type { Toast } from '../types'
+
+const { toasts, dismiss } = useToast()
+
+const accentColors: Record<Toast['type'], string> = {
+  success: '#10B981',
+  error: '#EF4444',
+  warning: '#F59E0B',
+  info: '#3B82F6',
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div class="mld-toast__container">
+      <TransitionGroup name="toast">
+        <div
+          v-for="toast in toasts"
+          :key="toast.id"
+          :class="['mld-toast__item', `mld-toast__item--${toast.type}`]"
+          :style="{
+            borderLeftColor: accentColors[toast.type],
+          }"
+          role="alert"
+          @click="dismiss(toast.id)"
+        >
+          <!-- Lucide circle-check -->
+          <svg v-if="toast.type === 'success'" class="mld-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="{ color: accentColors[toast.type] }">
+            <circle cx="12" cy="12" r="10" /><path d="m9 12 2 2 4-4" />
+          </svg>
+          <!-- Lucide circle-x -->
+          <svg v-else-if="toast.type === 'error'" class="mld-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="{ color: accentColors[toast.type] }">
+            <circle cx="12" cy="12" r="10" /><path d="m15 9-6 6" /><path d="m9 9 6 6" />
+          </svg>
+          <!-- Lucide triangle-alert -->
+          <svg v-else-if="toast.type === 'warning'" class="mld-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="{ color: accentColors[toast.type] }">
+            <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" /><path d="M12 9v4" /><path d="M12 17h.01" />
+          </svg>
+          <!-- Lucide info -->
+          <svg v-else class="mld-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="{ color: accentColors[toast.type] }">
+            <circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" />
+          </svg>
+          <span class="mld-toast__message">{{ toast.message }}</span>
+        </div>
+      </TransitionGroup>
+    </div>
+  </Teleport>
+</template>
+
+<style>
+@import '../styles/components/toast.css';
+</style>