@morscherlab/mint-sdk 1.2.0-beta.3 → 1.2.0-beta.5

package/src/components/ProgressBar.story.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { ref, onUnmounted } from 'vue'
+import ProgressBar from './ProgressBar.vue'
+import type { ProgressSize } from '../types'
+
+const progressColors = ['primary', 'success', 'warning', 'error', 'info'] as const
+const progressVariants = ['rail', 'segmented'] as const
+const sizes: ProgressSize[] = ['sm', 'md', 'lg']
+
+const animatedValue = ref(0)
+let interval: ReturnType<typeof setInterval> | null = null
+
+function startAnimation() {
+  animatedValue.value = 0
+  if (interval) clearInterval(interval)
+  interval = setInterval(() => {
+    animatedValue.value += 2
+    if (animatedValue.value >= 100) {
+      if (interval) clearInterval(interval)
+    }
+  }, 100)
+}
+
+onUnmounted(() => {
+  if (interval) clearInterval(interval)
+})
+</script>
+
+<template>
+  <Story title="Feedback/ProgressBar">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+          <ProgressBar
+            :value="state.value"
+            :variant="state.variant"
+            :color="state.color"
+            :size="state.size"
+            :label="state.showLabel ? state.label : undefined"
+            :show-value="state.showValue"
+            :indeterminate="state.indeterminate"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstSlider v-model="state.value" title="Value" :min="0" :max="100" :step="1" />
+        <HstSelect
+          v-model="state.variant"
+          title="Variant"
+          :options="progressVariants.map(v => ({ label: v, value: v }))"
+        />
+        <HstSelect
+          v-model="state.color"
+          title="Color"
+          :options="progressColors.map(c => ({ label: c, value: c }))"
+        />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="sizes.map(s => ({ label: s, value: s }))"
+        />
+        <HstCheckbox v-model="state.showLabel" title="Show Label" />
+        <HstText v-model="state.label" title="Label" />
+        <HstCheckbox v-model="state.showValue" title="Show Value" />
+        <HstCheckbox v-model="state.indeterminate" title="Indeterminate" />
+      </template>
+    </Variant>
+
+    <Variant title="All Colors">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem;">
+        <div v-for="color in progressColors" :key="color">
+          <p style="margin: 0 0 0.25rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
+            {{ color }}
+          </p>
+          <ProgressBar :value="65" :color="color" />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="All Sizes">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem;">
+        <div v-for="size in sizes" :key="size">
+          <p style="margin: 0 0 0.25rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
+            {{ size }}
+          </p>
+          <ProgressBar :value="50" :size="size" />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="With Label and Value">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem;">
+        <ProgressBar :value="75" label="Processing plates..." :show-value="true" color="primary" />
+        <ProgressBar :value="100" label="Analysis complete" :show-value="true" color="success" />
+        <ProgressBar :value="33" label="Uploading data..." :show-value="true" color="info" />
+      </div>
+    </Variant>
+
+    <Variant title="Indeterminate">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <ProgressBar :indeterminate="true" label="Loading..." color="primary" />
+      </div>
+    </Variant>
+
+    <Variant title="Animated">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;">
+        <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="startAnimation"
+        >
+          Start Progress
+        </button>
+        <ProgressBar
+          :value="animatedValue"
+          label="Processing..."
+          :show-value="true"
+          :color="animatedValue >= 100 ? 'success' : 'primary'"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Segmented — pipeline steps">
+      <div style="padding: 2rem; max-width: 640px; display: flex; flex-direction: column; gap: 2rem;">
+        <div>
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em;">Active step 3 — analyzing</p>
+          <ProgressBar
+            variant="segmented"
+            :steps="['Ingest', 'Align', 'Pick', 'Annotate', 'Score', 'Export', 'Done']"
+            :current-step="2"
+            color="primary"
+            show-value
+          />
+        </div>
+        <div>
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em;">Complete</p>
+          <ProgressBar
+            variant="segmented"
+            :steps="['Ingest', 'Align', 'Pick', 'Annotate', 'Score', 'Export', 'Done']"
+            :current-step="7"
+            color="success"
+          />
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/ProgressBar.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+/** Displays progress as a filled rail or discrete labeled segments, with indeterminate mode. */
+import { computed } from 'vue'
+
+interface Props {
+  value?: number
+  variant?: 'rail' | 'segmented'
+  color?: 'primary' | 'success' | 'warning' | 'error' | 'info'
+  size?: 'sm' | 'md' | 'lg'
+  label?: string
+  showValue?: boolean
+  indeterminate?: boolean
+  steps?: string[]
+  currentStep?: number
+  ariaLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: 0,
+  variant: 'rail',
+  color: 'primary',
+  size: 'md',
+  label: undefined,
+  showValue: false,
+  indeterminate: false,
+  steps: () => [],
+  currentStep: 0,
+})
+
+const clampedValue = computed(() => Math.min(100, Math.max(0, props.value)))
+
+const barStyle = computed(() => {
+  if (props.indeterminate) return undefined
+  return { width: `${clampedValue.value}%` }
+})
+
+const segmentCount = computed(() => props.steps.length || 0)
+</script>
+
+<template>
+  <div class="mint-progress" :class="`mint-progress--${variant}`">
+    <div
+      v-if="label || showValue"
+      class="mint-progress__header"
+    >
+      <span v-if="label" class="mint-progress__label">{{ label }}</span>
+      <span v-if="showValue && !indeterminate && variant === 'rail'" class="mint-progress__value">{{ clampedValue }}%</span>
+      <span v-if="showValue && variant === 'segmented' && segmentCount" class="mint-progress__value">{{ currentStep }} / {{ segmentCount }}</span>
+    </div>
+
+    <!-- Rail variant: single filled track -->
+    <div
+      v-if="variant === 'rail'"
+      :class="[
+        'mint-progress__track',
+        `mint-progress__track--${size}`,
+      ]"
+      role="progressbar"
+      :aria-valuenow="indeterminate ? undefined : clampedValue"
+      :aria-valuemin="indeterminate ? undefined : 0"
+      :aria-valuemax="indeterminate ? undefined : 100"
+      :aria-label="ariaLabel ?? label"
+    >
+      <div
+        :class="[
+          'mint-progress__bar',
+          `mint-progress__bar--${color}`,
+          indeterminate ? 'mint-progress__bar--indeterminate' : '',
+        ]"
+        :style="barStyle"
+      />
+    </div>
+
+    <!-- Segmented variant: discrete step segments -->
+    <div
+      v-else
+      :class="['mint-progress__segments', `mint-progress__segments--${size}`]"
+      role="progressbar"
+      :aria-valuenow="currentStep"
+      :aria-valuemin="0"
+      :aria-valuemax="segmentCount"
+      :aria-label="ariaLabel ?? label"
+    >
+      <span
+        v-for="(_step, i) in steps"
+        :key="i"
+        :class="[
+          'mint-progress__segment',
+          i < currentStep ? `mint-progress__segment--done mint-progress__segment--${color}` : '',
+          i === currentStep ? `mint-progress__segment--active mint-progress__segment--${color}` : '',
+        ]"
+      />
+    </div>
+
+    <!-- Segmented step labels -->
+    <div
+      v-if="variant === 'segmented' && steps.length"
+      class="mint-progress__step-labels"
+    >
+      <span
+        v-for="(step, i) in steps"
+        :key="i"
+        :class="[
+          'mint-progress__step-label',
+          i === currentStep ? 'mint-progress__step-label--active' : '',
+          i < currentStep ? 'mint-progress__step-label--done' : '',
+        ]"
+      >
+        {{ step }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/progress-bar.css';
+</style>

package/src/components/ProtocolStep.presentation.ts

@@ -0,0 +1,31 @@
+import type { ProtocolStepType } from '../types'
+
+export const PROTOCOL_STEP_TYPE_ICONS: Record<ProtocolStepType, string> = {
+  incubation: 'M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z',
+  wash: 'M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z',
+  addition: 'M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z',
+  measurement: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z',
+  transfer: 'M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4',
+  centrifuge: 'M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15',
+  mix: 'M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z',
+  custom: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z',
+}
+
+export const PROTOCOL_STEP_TYPE_COLORS: Record<ProtocolStepType, string> = {
+  incubation: '#F59E0B',
+  wash: '#06B6D4',
+  addition: '#10B981',
+  measurement: '#8B5CF6',
+  transfer: '#3B82F6',
+  centrifuge: '#6B7280',
+  mix: '#F97316',
+  custom: '#EC4899',
+}
+
+export function formatProtocolDuration(minutes: number | undefined): string {
+  if (minutes === undefined) return ''
+  if (minutes < 60) return `${minutes}m`
+  const hours = Math.floor(minutes / 60)
+  const mins = minutes % 60
+  return mins > 0 ? `${hours}h ${mins}m` : `${hours}h`
+}

package/src/components/ProtocolStepEditor.state.ts

@@ -0,0 +1,104 @@
+import type { ProtocolStep, ProtocolStepStatus } from '../types'
+import type { ParameterDefinition, StepTemplate } from '../composables/useProtocolTemplates'
+
+export interface ProtocolStepEditorFields {
+  name: string
+  description: string
+  duration?: number
+  parameters: Record<string, unknown>
+}
+
+export interface InitializedProtocolStepEditorState {
+  selectedTemplateId: string | null
+  fields: ProtocolStepEditorFields
+}
+
+export type ProtocolParameterFormatter = (
+  value: unknown,
+  parameter: ParameterDefinition
+) => string
+
+export function buildProtocolTemplateDefaults(
+  template: StepTemplate
+): ProtocolStepEditorFields {
+  const parameters: Record<string, unknown> = {}
+  for (const parameter of template.parameters) {
+    if (parameter.default !== undefined) {
+      parameters[parameter.key] = parameter.default
+    }
+  }
+
+  return {
+    name: template.name,
+    description: template.description || '',
+    duration: template.defaultDuration,
+    parameters,
+  }
+}
+
+export function buildProtocolStepEditorState(
+  step: ProtocolStep,
+  getTemplateByType: (type: ProtocolStep['type']) => StepTemplate | undefined
+): InitializedProtocolStepEditorState {
+  const template = getTemplateByType(step.type)
+
+  return {
+    selectedTemplateId: template?.id || null,
+    fields: {
+      name: step.name,
+      description: step.description || '',
+      duration: step.duration,
+      parameters: { ...(step.parameters || {}) },
+    },
+  }
+}
+
+export function buildProtocolStepPreview(
+  template: StepTemplate,
+  fields: ProtocolStepEditorFields,
+  sourceStep?: ProtocolStep
+): ProtocolStep {
+  return {
+    id: sourceStep?.id || 'preview',
+    type: template.type,
+    name: fields.name || template.name,
+    description: fields.description,
+    duration: fields.duration ?? template.defaultDuration,
+    status: (sourceStep?.status || 'pending') as ProtocolStepStatus,
+    parameters: { ...fields.parameters },
+    order: sourceStep?.order || 0,
+  }
+}
+
+export function buildProtocolPreviewParams(
+  template: StepTemplate,
+  parameters: Record<string, unknown>,
+  formatParameterValue: ProtocolParameterFormatter
+): string {
+  return template.parameters
+    .filter((parameter) => (
+      parameters[parameter.key] !== undefined
+      && parameters[parameter.key] !== ''
+    ))
+    .map((parameter) => formatParameterValue(parameters[parameter.key], parameter))
+    .join(', ')
+}
+
+export function buildCustomProtocolTemplate(
+  template: StepTemplate,
+  fields: ProtocolStepEditorFields,
+  templateId = `custom-${Date.now()}`
+): StepTemplate {
+  return {
+    id: templateId,
+    type: template.type,
+    name: fields.name || template.name,
+    description: fields.description,
+    defaultDuration: fields.duration,
+    parameters: template.parameters.map((parameter) => ({
+      ...parameter,
+      default: fields.parameters[parameter.key],
+    })),
+    isBuiltIn: false,
+  }
+}

package/src/components/ProtocolStepEditor.story.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import ProtocolStepEditor from './ProtocolStepEditor.vue'
+import type { ProtocolStep } from '../types'
+
+const editStep: ProtocolStep = {
+  id: 'step-edit',
+  type: 'incubation',
+  name: 'Overnight Incubation',
+  description: 'Incubate at 37C with 5% CO2 for cell attachment.',
+  duration: 960,
+  status: 'pending',
+  parameters: { temperature: 37, co2_percent: 5, humidity: 95 },
+  order: 0,
+}
+
+function initState() {
+  return {
+    mode: 'create' as const,
+    showPreview: true,
+  }
+}
+</script>
+
+<template>
+  <Story title="Lab/ProtocolStepEditor">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 600px;">
+          <ProtocolStepEditor
+            :mode="state.mode"
+            :show-preview="state.showPreview"
+            @save="(step) => console.log('Saved:', step)"
+            @cancel="() => console.log('Cancelled')"
+          />
+        </div>
+      </template>
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.mode"
+          title="Mode"
+          :options="[
+            { value: 'create', label: 'Create' },
+            { value: 'edit', label: 'Edit' },
+          ]"
+        />
+        <HstCheckbox v-model="state.showPreview" title="Show Preview" />
+      </template>
+    </Variant>
+
+    <Variant title="Edit Mode">
+      <div style="padding: 2rem; max-width: 600px;">
+        <ProtocolStepEditor
+          mode="edit"
+          :model-value="editStep"
+          @save="(step) => console.log('Saved:', step)"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="No Preview">
+      <div style="padding: 2rem; max-width: 600px;">
+        <ProtocolStepEditor
+          mode="create"
+          :show-preview="false"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>