@morscherlab/mint-sdk 1.3.8 → 1.4.0-beta.1

package/src/components/ReagentList.vue

@@ -1,438 +0,0 @@
-<script setup lang="ts">
-/** Sortable, searchable table of experiment reagents showing lot number, expiry, storage conditions, and stock level with low-stock warnings. */
-import { ref, computed, type ComponentPublicInstance } from 'vue'
-import type { ReagentColumn, Reagent } from '../types'
-import { useListReorder } from '../composables/useListReorder'
-import { useSortedItems } from '../composables/useSortedItems'
-import { useTextSearch } from '../composables/useTextSearch'
-import {
-  REAGENT_COLUMN_LABELS as columnLabels,
-  formatReagentExpiresIn as formatExpiresIn,
-  formatReagentExpiryDate as formatExpiryDate,
-  getReagentColumnValue,
-  getReagentRowClasses,
-  getReagentStockLevel as getStockLevel,
-  isReagentExpired as isExpired,
-  isReagentExpiringSoon as isExpiringSoon,
-  isReagentLowStock as isLowStock,
-} from './ReagentList.presentation'
-import BaseButton from './BaseButton.vue'
-import DataStateInternal from './internal/DataStateInternal.vue'
-
-/** Beaker glyph kept from the pre-1.2 hand-rolled empty state. */
-const EMPTY_ICON_PATH
-  = 'M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0'
-  + ' 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26'
-  + ' 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z'
-
-interface Props {
-  modelValue?: Reagent[]
-  readonly?: boolean
-  showStockLevel?: boolean
-  lowStockThreshold?: number
-  columns?: ReagentColumn[]
-  sortable?: boolean
-  searchable?: boolean
-  /** Replace the table with a loading placeholder. */
-  loading?: boolean
-  /**
-   * Error message. When set, the table is replaced by an error state.
-   * `null`/`undefined` renders normally.
-   */
-  error?: string | null
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: () => [],
-  readonly: false,
-  showStockLevel: true,
-  lowStockThreshold: 10,
-  columns: () => ['name', 'lot', 'expiry', 'storage', 'stock'],
-  sortable: true,
-  searchable: true,
-  loading: false,
-  error: null,
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [reagents: Reagent[]]
-  'add': []
-  'edit': [reagent: Reagent]
-  'remove': [reagentId: string]
-  'reorder': [reagentId: string, fromIndex: number, toIndex: number]
-}>()
-
-// State
-const searchQuery = ref('')
-const sortColumn = ref<ReagentColumn | null>(null)
-const sortDirection = ref<'asc' | 'desc'>('asc')
-const dragHandleRefs = new Map<string, HTMLElement>()
-
-const reagentSearch = useTextSearch({
-  items: () => props.modelValue || [],
-  query: searchQuery,
-  enabled: () => props.searchable,
-  getText: (reagent) => [
-    reagent.name,
-    reagent.catalogNumber,
-    reagent.lotNumber,
-    reagent.supplier,
-  ],
-})
-
-const reagentSort = computed(() => {
-  if (!sortColumn.value) return null
-  return {
-    key: sortColumn.value,
-    direction: sortDirection.value,
-  }
-})
-
-const sortedReagents = useSortedItems<Reagent, ReagentColumn>({
-  items: reagentSearch.filteredItems,
-  sort: reagentSort,
-  caseSensitive: false,
-  getValue: (reagent, column) => getReagentColumnValue(reagent, column),
-})
-const filteredReagents = sortedReagents.sortedItems
-
-// Drag-and-drop plus the Alt+Arrow keyboard alternative live in the shared
-// reorder composable, which also announces every move politely.
-const {
-  draggingId,
-  dragOverId,
-  announcement: reorderAnnouncement,
-  announcerStyle,
-  onDragStart,
-  onDragOver,
-  onDragLeave,
-  onDrop,
-  onDragEnd,
-  onKeydown: onReorderKeydown,
-} = useListReorder<Reagent>({
-  items: () => props.modelValue || [],
-  getId: (reagent) => reagent.id,
-  getLabel: (reagent) => reagent.name,
-  disabled: () => props.readonly || !props.sortable,
-  getElement: (id) => dragHandleRefs.get(id),
-  itemNoun: 'Reagent',
-  onReorder: ({ fromIndex, toIndex, items }) => {
-    emit('reorder', items[toIndex].id, fromIndex, toIndex)
-    emit('update:modelValue', items)
-  },
-})
-
-function setDragHandleRef(id: string, el: Element | ComponentPublicInstance | null) {
-  if (el instanceof HTMLElement) {
-    dragHandleRefs.set(id, el)
-  } else {
-    dragHandleRefs.delete(id)
-  }
-}
-
-function getRowClass(reagent: Reagent): string[] {
-  return getReagentRowClasses(reagent, {
-    lowStockThreshold: props.lowStockThreshold,
-    draggedId: draggingId.value,
-    dragOverId: dragOverId.value,
-  })
-}
-
-/** `aria-sort` for a column header, omitted while sorting is off. */
-function columnAriaSort(column: ReagentColumn): 'ascending' | 'descending' | 'none' | undefined {
-  if (!props.sortable) return undefined
-  if (sortColumn.value !== column) return 'none'
-  return sortDirection.value === 'asc' ? 'ascending' : 'descending'
-}
-
-// Native buttons activate on Enter/Space; the default is prevented so a header
-// sorts exactly once per key press in every engine.
-function handleSortKeydown(event: KeyboardEvent, column: ReagentColumn) {
-  if (event.key !== 'Enter' && event.key !== ' ') return
-  event.preventDefault()
-  handleSort(column)
-}
-
-// Actions
-function handleSort(column: ReagentColumn) {
-  if (!props.sortable) return
-  if (sortColumn.value === column) {
-    sortDirection.value = sortDirection.value === 'asc' ? 'desc' : 'asc'
-  } else {
-    sortColumn.value = column
-    sortDirection.value = 'asc'
-  }
-}
-
-function handleEdit(reagent: Reagent) {
-  emit('edit', reagent)
-}
-
-function handleRemove(reagentId: string) {
-  emit('remove', reagentId)
-  const updated = (props.modelValue || []).filter((r) => r.id !== reagentId)
-  emit('update:modelValue', updated)
-}
-
-function handleAdd() {
-  emit('add')
-}
-
-
-</script>
-
-<template>
-  <div class="mint-reagent-list">
-    <!-- Header -->
-    <div class="mint-reagent-list__header">
-      <!-- Search -->
-      <div v-if="searchable" class="mint-reagent-list__search">
-        <svg class="mint-reagent-list__search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-        </svg>
-        <input
-          v-model="searchQuery"
-          type="text"
-          class="mint-reagent-list__search-input"
-          placeholder="Search reagents..."
-        />
-      </div>
-
-      <!-- Add button -->
-      <BaseButton
-        v-if="!readonly"
-        variant="secondary"
-        size="sm"
-        class="mint-reagent-list__add-btn"
-        @click="handleAdd"
-      >
-        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-        </svg>
-        Add
-      </BaseButton>
-    </div>
-
-    <!-- Table -->
-    <table
-      v-if="!loading && !error && filteredReagents.length > 0"
-      class="mint-reagent-list__table"
-    >
-      <thead>
-        <tr>
-          <th v-if="sortable && !readonly" style="width: 24px" />
-          <th
-            v-for="col in columns"
-            :key="col"
-            :class="[sortable ? 'mint-reagent-list__col--sortable' : '']"
-            :aria-sort="columnAriaSort(col)"
-          >
-            <component
-              :is="sortable ? 'button' : 'span'"
-              :type="sortable ? 'button' : undefined"
-              class="mint-reagent-list__sort-btn"
-              @click="handleSort(col)"
-              @keydown="sortable ? handleSortKeydown($event, col) : undefined"
-            >
-            {{ columnLabels[col] }}
-            <svg
-              v-if="sortable"
-              :class="[
-                'mint-reagent-list__sort-icon',
-                sortColumn === col ? 'mint-reagent-list__sort-icon--active' : '',
-              ]"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                v-if="sortColumn === col && sortDirection === 'desc'"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M19 9l-7 7-7-7"
-              />
-              <path
-                v-else
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M5 15l7-7 7 7"
-              />
-            </svg>
-            </component>
-          </th>
-          <th v-if="!readonly" style="width: 80px" />
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          v-for="(reagent, index) in filteredReagents"
-          :key="reagent.id"
-          :class="getRowClass(reagent)"
-          :draggable="sortable && !readonly"
-          @dragstart="onDragStart($event, reagent, index)"
-          @dragover="onDragOver($event, reagent, index)"
-          @dragleave="onDragLeave"
-          @drop="onDrop($event, reagent, index)"
-          @dragend="onDragEnd"
-        >
-          <!-- Drag handle: also the keyboard reorder target (Alt+Arrow keys). -->
-          <td v-if="sortable && !readonly">
-            <button
-              :ref="(el) => setDragHandleRef(reagent.id, el)"
-              type="button"
-              class="mint-reagent-list__drag-handle-btn"
-              :aria-label="`Reorder ${reagent.name}. Press Alt with the arrow keys to move it.`"
-              @keydown="onReorderKeydown($event, reagent, index)"
-            >
-              <svg class="mint-reagent-list__drag-handle" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16" />
-              </svg>
-            </button>
-          </td>
-
-          <!-- Name -->
-          <td v-if="columns.includes('name')" class="mint-reagent-list__cell mint-reagent-list__cell--name">
-            <a
-              v-if="reagent.url"
-              :href="reagent.url"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="mint-reagent-list__link"
-            >
-              {{ reagent.name }}
-            </a>
-            <span v-else>{{ reagent.name }}</span>
-          </td>
-
-          <!-- Catalog number -->
-          <td v-if="columns.includes('catalog')" class="mint-reagent-list__cell mint-reagent-list__cell--muted">
-            {{ reagent.catalogNumber || '-' }}
-          </td>
-
-          <!-- Lot number -->
-          <td v-if="columns.includes('lot')" class="mint-reagent-list__cell mint-reagent-list__cell--muted">
-            {{ reagent.lotNumber || '-' }}
-          </td>
-
-          <!-- Expiry -->
-          <td v-if="columns.includes('expiry')" class="mint-reagent-list__cell">
-            <span v-if="isExpired(reagent)" class="mint-reagent-list__expired-text">
-              {{ formatExpiryDate(reagent.expiryDate) }}
-            </span>
-            <span v-else>
-              {{ formatExpiryDate(reagent.expiryDate) }}
-            </span>
-
-            <!-- Expiry status: expired = error text + strike, expiring = clock + relative time (3d) -->
-            <span v-if="isExpired(reagent)" class="mint-reagent-list__badge mint-reagent-list__badge--error">
-              Expired
-            </span>
-            <span v-else-if="isExpiringSoon(reagent)" class="mint-reagent-list__badge mint-reagent-list__badge--warning">
-              <svg class="mint-reagent-list__badge-icon" fill="none" stroke="currentColor" viewBox="0 0 16 16" aria-hidden="true">
-                <circle cx="8" cy="8" r="6" stroke-width="1.8" />
-                <path stroke-linecap="round" stroke-width="1.8" d="M8 5v3.5l2 1.5" />
-              </svg>
-              {{ formatExpiresIn(reagent) }}
-            </span>
-          </td>
-
-          <!-- Storage -->
-          <td v-if="columns.includes('storage')" class="mint-reagent-list__cell">
-            <span
-              v-if="reagent.storageCondition"
-              :class="['mint-reagent-list__storage', `mint-reagent-list__storage--${reagent.storageCondition}`]"
-            >
-              {{ reagent.storageCondition }}
-            </span>
-            <span v-else class="mint-reagent-list__cell--muted">-</span>
-          </td>
-
-          <!-- Location -->
-          <td v-if="columns.includes('location')" class="mint-reagent-list__cell mint-reagent-list__cell--muted">
-            {{ reagent.location || '-' }}
-          </td>
-
-          <!-- Stock -->
-          <td v-if="columns.includes('stock') && showStockLevel" class="mint-reagent-list__cell">
-            <div v-if="reagent.stockLevel !== undefined" class="mint-reagent-list__stock">
-              <div class="mint-reagent-list__stock-bar">
-                <div
-                  class="mint-reagent-list__stock-fill"
-                  :style="{ width: `${Math.min(100, getStockLevel(reagent))}%` }"
-                />
-              </div>
-              <span class="mint-reagent-list__stock-text">
-                <span v-if="isLowStock(reagent, lowStockThreshold)" class="mint-reagent-list__stock-status">
-                  <span class="mint-reagent-list__status-dot" aria-hidden="true" />Low ·
-                </span>
-                <span class="mint-reagent-list__stock-value">{{ getStockLevel(reagent) }}%</span>
-              </span>
-            </div>
-            <span v-else class="mint-reagent-list__cell--muted">-</span>
-          </td>
-
-          <!-- Supplier -->
-          <td v-if="columns.includes('supplier')" class="mint-reagent-list__cell mint-reagent-list__cell--muted">
-            {{ reagent.supplier || '-' }}
-          </td>
-
-          <!-- Actions -->
-          <td v-if="!readonly" class="mint-reagent-list__cell mint-reagent-list__cell--actions">
-            <button
-              type="button"
-              class="mint-reagent-list__action-btn"
-              aria-label="Edit"
-              @click="handleEdit(reagent)"
-            >
-              <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
-              </svg>
-            </button>
-            <button
-              type="button"
-              class="mint-reagent-list__action-btn mint-reagent-list__action-btn--danger"
-              aria-label="Remove"
-              @click="handleRemove(reagent.id)"
-            >
-              <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-              </svg>
-            </button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-
-    <!-- Error state -->
-    <div v-else-if="error" class="mint-reagent-list__state">
-      <slot name="error" :error="error">
-        <DataStateInternal state="error" :title="error" />
-      </slot>
-    </div>
-
-    <!-- Loading state -->
-    <div v-else-if="loading" class="mint-reagent-list__state">
-      <slot name="loading">
-        <DataStateInternal state="loading" loading-label="Loading reagents" />
-      </slot>
-    </div>
-
-    <!-- Empty state -->
-    <div v-else class="mint-reagent-list__state">
-      <slot name="empty">
-        <DataStateInternal
-          state="empty"
-          :title="searchQuery ? 'No reagents found' : 'No reagents added yet'"
-          :icon-path="EMPTY_ICON_PATH"
-          :action-label="!readonly && !searchQuery ? 'Add Reagent' : undefined"
-          @action="handleAdd"
-        />
-      </slot>
-    </div>
-
-    <!-- Reorder announcements for screen readers -->
-    <div role="status" aria-live="polite" :style="announcerStyle">{{ reorderAnnouncement }}</div>
-  </div>
-</template>

package/src/components/SampleLegend.story.vue

@@ -1,91 +0,0 @@
-<script setup lang="ts">
-import SampleLegend from './SampleLegend.vue'
-import type { SampleType } from '../types'
-
-const mockSamples: SampleType[] = [
-  { id: 's1', name: 'HeLa Cells', color: '#3B82F6', count: 24 },
-  { id: 's2', name: 'MCF-7 Cells', color: '#10B981', count: 12 },
-  { id: 's3', name: 'Vehicle Control', color: '#F59E0B', count: 8 },
-  { id: 's4', name: 'Positive Control', color: '#EF4444', count: 4 },
-  { id: 's5', name: 'QC Standard', color: '#8B5CF6', count: 6 },
-]
-
-function initState() {
-  return {
-    modelValue: undefined as string | undefined,
-    samples: mockSamples,
-    showCounts: true,
-    editable: false,
-    size: 'md' as const,
-    orientation: 'vertical' as const,
-  }
-}
-</script>
-
-<template>
-  <Story title="Lab/SampleLegend">
-    <Variant title="Playground" :init-state="initState">
-      <template #default="{ state }">
-        <div style="padding: 2rem; max-width: 300px;">
-          <SampleLegend
-            v-model="state.modelValue"
-            :samples="state.samples"
-            :show-counts="state.showCounts"
-            :editable="state.editable"
-            :size="state.size"
-            :orientation="state.orientation"
-          />
-        </div>
-      </template>
-      <template #controls="{ state }">
-        <HstCheckbox v-model="state.showCounts" title="Show Counts" />
-        <HstCheckbox v-model="state.editable" title="Editable" />
-        <HstSelect
-          v-model="state.size"
-          title="Size"
-          :options="[
-            { value: 'sm', label: 'Small' },
-            { value: 'md', label: 'Medium' },
-            { value: 'lg', label: 'Large' },
-          ]"
-        />
-        <HstSelect
-          v-model="state.orientation"
-          title="Orientation"
-          :options="[
-            { value: 'vertical', label: 'Vertical' },
-            { value: 'horizontal', label: 'Horizontal' },
-          ]"
-        />
-      </template>
-    </Variant>
-
-    <Variant title="Horizontal">
-      <div style="padding: 2rem;">
-        <SampleLegend
-          :samples="mockSamples"
-          orientation="horizontal"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Editable">
-      <div style="padding: 2rem; max-width: 300px;">
-        <SampleLegend
-          :samples="mockSamples"
-          editable
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Small No Counts">
-      <div style="padding: 2rem; max-width: 250px;">
-        <SampleLegend
-          :samples="mockSamples"
-          size="sm"
-          :show-counts="false"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>

package/src/components/SampleLegend.vue

@@ -1,121 +0,0 @@
-<script setup lang="ts">
-/** Clickable color-swatch legend for plate sample types, supporting selection, count display, add/remove, and custom color assignment. */
-import type { SampleType } from '../types'
-import { SAMPLE_GROUP_TOKENS } from '../utils/color'
-import { sampleTypeMarker } from '../utils/sampleTypeMarker'
-
-interface Props {
-  modelValue?: string
-  samples: SampleType[]
-  showCounts?: boolean
-  editable?: boolean
-  colorPalette?: string[]
-  size?: 'sm' | 'md' | 'lg'
-  orientation?: 'vertical' | 'horizontal'
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: undefined,
-  samples: () => [],
-  showCounts: true,
-  editable: false,
-  colorPalette: () => [...SAMPLE_GROUP_TOKENS],
-  size: 'md',
-  orientation: 'vertical',
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [sampleId: string | undefined]
-  'sample-click': [sample: SampleType]
-  'sample-add': []
-  'sample-remove': [sampleId: string]
-  'color-change': [sampleId: string, color: string]
-}>()
-
-
-function getSampleColor(sample: SampleType, index: number): string {
-  return sample.color || props.colorPalette[index % props.colorPalette.length]
-}
-
-/** Same marker as the well: the id doubles as the sample type, as in WellPlate. */
-function getSampleMarker(sample: SampleType, index: number) {
-  return sampleTypeMarker(sample.id, getSampleColor(sample, index))
-}
-
-function handleSampleClick(sample: SampleType) {
-  const newValue = props.modelValue === sample.id ? undefined : sample.id
-  emit('sample-click', sample)
-  emit('update:modelValue', newValue)
-}
-
-function handleRemove(event: Event, sampleId: string) {
-  event.stopPropagation()
-  emit('sample-remove', sampleId)
-}
-
-function handleAdd() {
-  emit('sample-add')
-}
-</script>
-
-<template>
-  <div :class="['mint-sample-legend', `mint-sample-legend--${orientation}`]" role="list" aria-label="Sample types">
-    <button
-      v-for="(sample, index) in samples"
-      :key="sample.id"
-      type="button"
-      role="listitem"
-      :aria-pressed="modelValue === sample.id"
-      :class="[
-        'mint-sample-legend__item',
-        `mint-sample-legend__item--${size}`,
-        modelValue === sample.id ? 'mint-sample-legend__item--selected' : '',
-      ]"
-      @click="handleSampleClick(sample)"
-    >
-      <span
-        v-for="marker in [getSampleMarker(sample, index)]"
-        :key="sample.id"
-        :class="['mint-sample-legend__swatch', `mint-sample-legend__swatch--${size}`]"
-        :style="marker.style"
-        :aria-hidden="true"
-      >{{ marker.glyph }}</span>
-
-      <span :class="['mint-sample-legend__name', `mint-sample-legend__name--${size}`]">
-        {{ sample.name }}
-      </span>
-
-      <span
-        v-if="showCounts && sample.count !== undefined"
-        :class="['mint-sample-legend__count', `mint-sample-legend__count--${size}`]"
-      >
-        {{ sample.count }}
-      </span>
-
-      <button
-        v-if="editable"
-        type="button"
-        class="mint-sample-legend__remove"
-        :aria-label="`Remove ${sample.name}`"
-        @click="handleRemove($event, sample.id)"
-      >
-        <svg class="mint-sample-legend__remove-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-        </svg>
-      </button>
-    </button>
-
-    <button
-      v-if="editable"
-      type="button"
-      :class="['mint-sample-legend__add', `mint-sample-legend__add--${size}`]"
-      aria-label="Add sample type"
-      @click="handleAdd"
-    >
-      <svg :class="`mint-sample-legend__add-icon--${size}`" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-      </svg>
-      <span :class="`mint-sample-legend__add-text--${size}`">Add</span>
-    </button>
-  </div>
-</template>