@morscherlab/mint-sdk 1.0.0-alpha.2

package/src/components/BatchProgressList.story.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import BatchProgressList from './BatchProgressList.vue'
+
+const mixedItems = [
+  { id: 'b1', label: 'Sample_Control_Rep1.raw', status: 'completed' as const },
+  { id: 'b2', label: 'Sample_Control_Rep2.raw', status: 'completed' as const },
+  { id: 'b3', label: 'Sample_Control_Rep3.raw', status: 'completed' as const },
+  { id: 'b4', label: 'Sample_Treatment_Rep1.raw', status: 'processing' as const, progress: 67 },
+  { id: 'b5', label: 'Sample_Treatment_Rep2.raw', status: 'pending' as const },
+  { id: 'b6', label: 'Sample_Treatment_Rep3.raw', status: 'pending' as const },
+  { id: 'b7', label: 'Sample_Vehicle_Rep1.raw', status: 'error' as const, message: 'File format not recognized. Expected .mzML or .raw format but received corrupted header.' },
+  { id: 'b8', label: 'Sample_Vehicle_Rep2.raw', status: 'skipped' as const },
+]
+
+const allCompleted = [
+  { id: 'c1', label: 'Plate1_Analysis.xlsx', status: 'completed' as const },
+  { id: 'c2', label: 'Plate2_Analysis.xlsx', status: 'completed' as const },
+  { id: 'c3', label: 'Plate3_Analysis.xlsx', status: 'completed' as const },
+  { id: 'c4', label: 'Combined_Report.pdf', status: 'completed' as const },
+]
+
+function initState() {
+  return {
+    items: mixedItems,
+    showSummary: true,
+    title: 'Processing Raw Data Files',
+    autoScroll: true,
+  }
+}
+</script>
+
+<template>
+  <Story title="Workflow/BatchProgressList">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 500px;">
+          <BatchProgressList
+            :items="state.items"
+            :show-summary="state.showSummary"
+            :title="state.title"
+            :auto-scroll="state.autoScroll"
+            @retry="(id) => console.log('Retry:', id)"
+            @cancel="(id) => console.log('Cancel:', id)"
+          />
+        </div>
+      </template>
+      <template #controls="{ state }">
+        <HstCheckbox v-model="state.showSummary" title="Show Summary" />
+        <HstText v-model="state.title" title="Title" />
+        <HstCheckbox v-model="state.autoScroll" title="Auto Scroll" />
+      </template>
+    </Variant>
+
+    <Variant title="All Completed">
+      <div style="padding: 2rem; max-width: 500px;">
+        <BatchProgressList
+          :items="allCompleted"
+          title="Export Complete"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Max Height">
+      <div style="padding: 2rem; max-width: 500px;">
+        <BatchProgressList
+          :items="mixedItems"
+          title="Processing Files"
+          max-height="250px"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="No Title">
+      <div style="padding: 2rem; max-width: 500px;">
+        <BatchProgressList :items="mixedItems" />
+      </div>
+    </Variant>
+
+    <Variant title="All Pending">
+      <div style="padding: 2rem; max-width: 500px;">
+        <BatchProgressList
+          :items="[
+            { id: 'p1', label: 'Analysis_Run_1.csv', status: 'pending' },
+            { id: 'p2', label: 'Analysis_Run_2.csv', status: 'pending' },
+            { id: 'p3', label: 'Analysis_Run_3.csv', status: 'pending' },
+          ]"
+          title="Queued for Processing"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/BatchProgressList.vue

@@ -0,0 +1,184 @@
+<script setup lang="ts">
+/** Scrollable list tracking per-item status for a batch operation with overall progress summary. */
+import { computed, ref, watch, nextTick } from 'vue'
+import type { BatchItem, BatchSummary } from '../types'
+
+interface Props {
+  items: BatchItem[]
+  showSummary?: boolean
+  title?: string
+  maxHeight?: string
+  autoScroll?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showSummary: true,
+  autoScroll: true,
+})
+
+const emit = defineEmits<{
+  'retry': [id: string]
+  'cancel': [id: string]
+}>()
+
+const listRef = ref<HTMLElement | null>(null)
+const expandedErrors = ref<Set<string>>(new Set())
+
+const summary = computed<BatchSummary>(() => {
+  const total = props.items.length
+  const completed = props.items.filter(i => i.status === 'completed').length
+  const processing = props.items.filter(i => i.status === 'processing').length
+  const error = props.items.filter(i => i.status === 'error').length
+  const pending = props.items.filter(i => i.status === 'pending').length
+  const skipped = props.items.filter(i => i.status === 'skipped').length
+  const percent = total > 0 ? Math.round(((completed + skipped) / total) * 100) : 0
+  return { total, completed, processing, error, pending, skipped, percent }
+})
+
+function toggleError(id: string) {
+  if (expandedErrors.value.has(id)) {
+    expandedErrors.value.delete(id)
+  } else {
+    expandedErrors.value.add(id)
+  }
+}
+
+watch(
+  () => props.items.map(i => i.status),
+  (newStatuses, oldStatuses) => {
+    if (!props.autoScroll || !listRef.value) return
+    for (let i = 0; i < newStatuses.length; i++) {
+      if (newStatuses[i] === 'processing' && oldStatuses?.[i] !== 'processing') {
+        nextTick(() => {
+          const el = listRef.value?.querySelector(`[data-item-id="${props.items[i].id}"]`)
+          el?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+        })
+        break
+      }
+    }
+  },
+)
+</script>
+
+<template>
+  <div class="mld-batch-progress">
+    <div v-if="title" class="mld-batch-progress__header">
+      <span class="mld-batch-progress__title">{{ title }}</span>
+      <span class="mld-batch-progress__percent">{{ summary.percent }}%</span>
+    </div>
+
+    <div class="mld-batch-progress__overall">
+      <div
+        class="mld-batch-progress__overall-bar"
+        :style="{ width: `${summary.percent}%` }"
+      />
+    </div>
+
+    <slot v-if="showSummary" name="summary" :summary="summary">
+      <div class="mld-batch-progress__summary">
+        <span v-if="summary.completed" class="mld-batch-progress__summary-item mld-batch-progress__summary-item--completed">
+          {{ summary.completed }} completed
+        </span>
+        <span v-if="summary.processing" class="mld-batch-progress__summary-item mld-batch-progress__summary-item--processing">
+          {{ summary.processing }} processing
+        </span>
+        <span v-if="summary.error" class="mld-batch-progress__summary-item mld-batch-progress__summary-item--error">
+          {{ summary.error }} failed
+        </span>
+        <span v-if="summary.pending" class="mld-batch-progress__summary-item mld-batch-progress__summary-item--pending">
+          {{ summary.pending }} pending
+        </span>
+        <span v-if="summary.skipped" class="mld-batch-progress__summary-item mld-batch-progress__summary-item--skipped">
+          {{ summary.skipped }} skipped
+        </span>
+      </div>
+    </slot>
+
+    <div
+      ref="listRef"
+      class="mld-batch-progress__list"
+      :style="maxHeight ? { maxHeight, overflowY: 'auto' } : {}"
+    >
+      <div
+        v-for="item in items"
+        :key="item.id"
+        :data-item-id="item.id"
+        :class="['mld-batch-progress__item', `mld-batch-progress__item--${item.status}`]"
+      >
+        <slot name="item" :item="item">
+          <div class="mld-batch-progress__item-row">
+            <!-- Status icon -->
+            <div :class="['mld-batch-progress__item-icon', `mld-batch-progress__item-icon--${item.status}`]">
+              <!-- Pending: clock -->
+              <svg v-if="item.status === 'pending'" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
+                <circle cx="8" cy="8" r="6.5" />
+                <path d="M8 4.5V8l2.5 1.5" stroke-linecap="round" stroke-linejoin="round" />
+              </svg>
+              <!-- Processing: spinner -->
+              <svg v-else-if="item.status === 'processing'" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
+                <path d="M8 1.5A6.5 6.5 0 1 1 1.5 8" stroke-linecap="round" />
+              </svg>
+              <!-- Completed: checkmark -->
+              <svg v-else-if="item.status === 'completed'" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
+                <path d="M3.5 8.5L6.5 11.5L12.5 4.5" stroke-linecap="round" stroke-linejoin="round" />
+              </svg>
+              <!-- Error: x -->
+              <svg v-else-if="item.status === 'error'" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
+                <path d="M4.5 4.5l7 7M11.5 4.5l-7 7" stroke-linecap="round" stroke-linejoin="round" />
+              </svg>
+              <!-- Skipped: dash -->
+              <svg v-else viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
+                <path d="M4 8h8" stroke-linecap="round" />
+              </svg>
+            </div>
+
+            <span class="mld-batch-progress__item-label">{{ item.label }}</span>
+
+            <!-- Mini progress bar for processing items -->
+            <div v-if="item.status === 'processing' && item.progress !== undefined" class="mld-batch-progress__item-progress">
+              <div class="mld-batch-progress__item-progress-bar" :style="{ width: `${item.progress}%` }" />
+            </div>
+
+            <!-- Actions -->
+            <div class="mld-batch-progress__item-actions">
+              <button
+                v-if="item.status === 'error'"
+                type="button"
+                class="mld-batch-progress__retry-btn"
+                @click.stop="emit('retry', item.id)"
+              >
+                Retry
+              </button>
+              <button
+                v-if="item.status === 'processing'"
+                type="button"
+                class="mld-batch-progress__cancel-btn"
+                @click.stop="emit('cancel', item.id)"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+
+          <!-- Error message (expandable) -->
+          <div v-if="item.status === 'error' && item.message" class="mld-batch-progress__item-error">
+            <button
+              type="button"
+              class="mld-batch-progress__error-toggle"
+              @click.stop="toggleError(item.id)"
+            >
+              {{ expandedErrors.has(item.id) ? 'Hide error' : 'Show error' }}
+            </button>
+            <div v-if="expandedErrors.has(item.id)" class="mld-batch-progress__item-message">
+              {{ item.message }}
+            </div>
+          </div>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/batch-progress-list.css';
+</style>

package/src/components/Breadcrumb.story.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import Breadcrumb from './Breadcrumb.vue'
+import type { BreadcrumbItem } from '../types'
+
+const simpleItems: BreadcrumbItem[] = [
+  { label: 'Home', href: '#' },
+  { label: 'Experiments', href: '#' },
+  { label: 'EXP-2024-001' },
+]
+
+const deepItems: BreadcrumbItem[] = [
+  { label: 'Home', href: '#' },
+  { label: 'Projects', href: '#' },
+  { label: 'Oncology Screen', href: '#' },
+  { label: 'Experiment Batch 3', href: '#' },
+  { label: 'Plate PLT-096-A1' },
+]
+
+const routerItems: BreadcrumbItem[] = [
+  { label: 'Dashboard', to: '/dashboard' },
+  { label: 'Analysis', to: '/analysis' },
+  { label: 'Results' },
+]
+</script>
+
+<template>
+  <Story title="Layout/Breadcrumb">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem;">
+          <Breadcrumb
+            :items="simpleItems"
+            :separator="state.separator"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.separator" title="Separator" />
+      </template>
+    </Variant>
+
+    <Variant title="Simple Path">
+      <div style="padding: 2rem;">
+        <Breadcrumb :items="simpleItems" />
+      </div>
+    </Variant>
+
+    <Variant title="Deep Path">
+      <div style="padding: 2rem;">
+        <Breadcrumb :items="deepItems" />
+      </div>
+    </Variant>
+
+    <Variant title="Custom Separator">
+      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1.5rem;">
+        <div>
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
+            Chevron (default /)
+          </p>
+          <Breadcrumb :items="simpleItems" separator="/" />
+        </div>
+        <div>
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
+            Arrow
+          </p>
+          <Breadcrumb :items="simpleItems" separator=">" />
+        </div>
+        <div>
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
+            Dot
+          </p>
+          <Breadcrumb :items="simpleItems" separator="." />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Router Links">
+      <div style="padding: 2rem;">
+        <Breadcrumb
+          :items="routerItems"
+          @navigate="(item) => console.log('Navigate to:', item)"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Single Item">
+      <div style="padding: 2rem;">
+        <Breadcrumb :items="[{ label: 'Home' }]" />
+      </div>
+    </Variant>
+
+    <Variant title="Chevron Trail (default)">
+      <div style="padding: 2rem; max-width: 640px;">
+        <Breadcrumb
+          :items="[
+            { label: 'Projects', href: '#' },
+            { label: 'Oncology screens', href: '#' },
+            { label: 'Plate PLT-001', href: '#' },
+            { label: 'Dose-response analysis' },
+          ]"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/Breadcrumb.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+/** Renders a breadcrumb trail where ancestors are links or emit-based buttons and the last item is the current page. */
+import type { BreadcrumbItem } from '../types'
+
+interface Props {
+  items: BreadcrumbItem[]
+  separator?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  separator: '/',
+})
+
+const emit = defineEmits<{
+  navigate: [item: BreadcrumbItem]
+}>()
+
+function handleClick(item: BreadcrumbItem) {
+  if (!item.href) {
+    emit('navigate', item)
+  }
+}
+</script>
+
+<template>
+  <nav class="mld-breadcrumb" aria-label="Breadcrumb">
+    <ol class="mld-breadcrumb__list">
+      <li
+        v-for="(item, index) in items"
+        :key="index"
+        class="mld-breadcrumb__item"
+      >
+        <slot name="item" :item="item" :index="index" :is-last="index === items.length - 1">
+          <a
+            v-if="item.href && index !== items.length - 1"
+            :href="item.href"
+            class="mld-breadcrumb__link"
+          >
+            {{ item.label }}
+          </a>
+          <button
+            v-else-if="index !== items.length - 1"
+            class="mld-breadcrumb__link"
+            @click="handleClick(item)"
+          >
+            {{ item.label }}
+          </button>
+          <span
+            v-else
+            class="mld-breadcrumb__current"
+            aria-current="page"
+          >
+            {{ item.label }}
+          </span>
+        </slot>
+        <span
+          v-if="index !== items.length - 1"
+          class="mld-breadcrumb__separator"
+          aria-hidden="true"
+        >
+          <slot name="separator">
+            <svg v-if="separator === '/'" class="mld-breadcrumb__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="m9 18 6-6-6-6" />
+            </svg>
+            <template v-else>{{ separator }}</template>
+          </slot>
+        </span>
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<style>
+@import '../styles/components/breadcrumb.css';
+</style>

package/src/components/Calendar.story.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import Calendar from './Calendar.vue'
+import type { CalendarSelectionMode } from '../types'
+
+const selectionModes: CalendarSelectionMode[] = ['none', 'single', 'range', 'multiple']
+
+const selectedDate = ref<Date | null>(null)
+const selectedDates = ref<Date[]>([])
+const dateRange = ref<{ start: Date; end: Date } | null>(null)
+
+const markers = [
+  { date: new Date(new Date().getFullYear(), new Date().getMonth(), 5), color: '#3B82F6', label: 'Experiment start', type: 'dot' as const },
+  { date: new Date(new Date().getFullYear(), new Date().getMonth(), 10), color: '#10B981', label: 'QC review', type: 'dot' as const },
+  { date: new Date(new Date().getFullYear(), new Date().getMonth(), 15), color: '#F97316', label: 'Plate reading', type: 'dot' as const },
+  { date: new Date(new Date().getFullYear(), new Date().getMonth(), 20), color: '#EC4899', label: 'Analysis due', type: 'dot' as const },
+  { date: new Date(new Date().getFullYear(), new Date().getMonth(), 25), color: '#8B5CF6', label: 'Report submission', type: 'bar' as const },
+]
+</script>
+
+<template>
+  <Story title="Data Display/Calendar">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; display: flex; justify-content: center;">
+          <Calendar
+            v-model="selectedDate"
+            :selection-mode="state.selectionMode"
+            :show-navigation="state.showNavigation"
+            :show-outside-days="state.showOutsideDays"
+            :fixed-weeks="state.fixedWeeks"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.selectionMode"
+          title="Selection Mode"
+          :options="selectionModes.map(m => ({ label: m, value: m }))"
+        />
+        <HstCheckbox v-model="state.showNavigation" title="Show Navigation" />
+        <HstCheckbox v-model="state.showOutsideDays" title="Show Outside Days" />
+        <HstCheckbox v-model="state.fixedWeeks" title="Fixed Weeks (6 rows)" />
+      </template>
+    </Variant>
+
+    <Variant title="Single Selection">
+      <div style="padding: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem;">
+        <Calendar v-model="selectedDate" selection-mode="single" />
+        <p style="font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+          Selected: {{ selectedDate ? selectedDate.toLocaleDateString() : 'none' }}
+        </p>
+      </div>
+    </Variant>
+
+    <Variant title="Multiple Selection">
+      <div style="padding: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem;">
+        <Calendar v-model="selectedDates" selection-mode="multiple" />
+        <p style="font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+          Selected {{ selectedDates.length }} date(s)
+        </p>
+      </div>
+    </Variant>
+
+    <Variant title="Range Selection">
+      <div style="padding: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem;">
+        <Calendar v-model="dateRange" selection-mode="range" />
+        <p style="font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+          {{ dateRange ? `${dateRange.start.toLocaleDateString()} - ${dateRange.end.toLocaleDateString()}` : 'Click two dates to select a range' }}
+        </p>
+      </div>
+    </Variant>
+
+    <Variant title="With Markers">
+      <div style="padding: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem;">
+        <Calendar :markers="markers" selection-mode="single" />
+        <div style="display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.8125rem; color: var(--text-primary, #1e293b);">
+          <span v-for="marker in markers" :key="marker.label" style="display: flex; align-items: center; gap: 0.375rem;">
+            <span :style="{ width: '8px', height: '8px', borderRadius: '50%', background: marker.color }" />
+            {{ marker.label }}
+          </span>
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="With Min/Max Date">
+      <div style="padding: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem;">
+        <Calendar
+          selection-mode="single"
+          :min-date="new Date(new Date().getFullYear(), new Date().getMonth(), 5)"
+          :max-date="new Date(new Date().getFullYear(), new Date().getMonth(), 25)"
+        />
+        <p style="font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+          Only dates between the 5th and 25th of this month are selectable
+        </p>
+      </div>
+    </Variant>
+
+    <Variant title="Week Starts on Sunday">
+      <div style="padding: 2rem; display: flex; justify-content: center;">
+        <Calendar selection-mode="single" :week-starts-on="0" />
+      </div>
+    </Variant>
+  </Story>
+</template>