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

package/src/components/ProtocolStepEditor.state.ts

@@ -1,104 +0,0 @@
-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

@@ -1,69 +0,0 @@
-<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>

package/src/components/ProtocolStepEditor.vue

@@ -1,382 +0,0 @@
-<script setup lang="ts">
-/** Form for creating or editing a single protocol step (incubation, wash, addition, centrifuge, etc.) with template picker, typed parameters, and duration. */
-import { ref, computed, watch, onMounted } from 'vue'
-import type { ProtocolStep } from '../types'
-import { useDropdownState } from '../composables/useDropdownState'
-import {
-  useProtocolTemplates,
-  type StepTemplate,
-} from '../composables/useProtocolTemplates'
-import {
-  PROTOCOL_STEP_TYPE_ICONS as stepTypeIcons,
-  formatProtocolDuration as formatDuration,
-} from './ProtocolStep.presentation'
-import ProtocolStepParameterField from './ProtocolStepParameterField.vue'
-import {
-  buildCustomProtocolTemplate,
-  buildProtocolPreviewParams,
-  buildProtocolStepEditorState,
-  buildProtocolStepPreview,
-  buildProtocolTemplateDefaults,
-  type ProtocolStepEditorFields,
-} from './ProtocolStepEditor.state'
-
-interface Props {
-  modelValue?: ProtocolStep
-  templates?: StepTemplate[]
-  customTemplates?: StepTemplate[]
-  mode?: 'create' | 'edit'
-  showPreview?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  mode: 'create',
-  showPreview: true,
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [step: ProtocolStep]
-  'save': [step: ProtocolStep]
-  'save-template': [template: StepTemplate]
-  'cancel': []
-}>()
-
-const {
-  allTemplates,
-  getTemplateByType,
-  validateStep,
-  formatParameterValue,
-} = useProtocolTemplates()
-
-// State
-const selectedTemplateId = ref<string | null>(null)
-const {
-  isOpen: templateDropdownOpen,
-  rootRef: templateDropdownRef,
-  close: closeTemplateDropdown,
-  toggle: toggleTemplateDropdown,
-} = useDropdownState()
-const stepName = ref('')
-const stepDescription = ref('')
-const stepDuration = ref<number | undefined>()
-const parameters = ref<Record<string, unknown>>({})
-const validationErrors = ref<Record<string, string>>({})
-
-// Combined templates from props and composable
-const availableTemplates = computed(() => {
-  if (props.templates && props.templates.length > 0) {
-    return props.templates
-  }
-  const combined = [...allTemplates.value]
-  if (props.customTemplates) {
-    combined.push(...props.customTemplates)
-  }
-  return combined
-})
-
-// Selected template
-const selectedTemplate = computed(() => {
-  if (!selectedTemplateId.value) return null
-  return availableTemplates.value.find((t) => t.id === selectedTemplateId.value) || null
-})
-
-// Preview computed
-const previewStep = computed<ProtocolStep | null>(() => {
-  if (!selectedTemplate.value) return null
-  return buildProtocolStepPreview(selectedTemplate.value, editorFields(), props.modelValue)
-})
-
-const previewParams = computed(() => {
-  if (!selectedTemplate.value || !previewStep.value) return ''
-  return buildProtocolPreviewParams(
-    selectedTemplate.value,
-    parameters.value,
-    formatParameterValue
-  )
-})
-
-function editorFields(): ProtocolStepEditorFields {
-  return {
-    name: stepName.value,
-    description: stepDescription.value,
-    duration: stepDuration.value,
-    parameters: parameters.value,
-  }
-}
-
-function applyEditorFields(fields: ProtocolStepEditorFields) {
-  stepName.value = fields.name
-  stepDescription.value = fields.description
-  stepDuration.value = fields.duration
-  parameters.value = { ...fields.parameters }
-}
-
-function initFromStep(step: ProtocolStep) {
-  const state = buildProtocolStepEditorState(step, getTemplateByType)
-  selectedTemplateId.value = state.selectedTemplateId
-  applyEditorFields(state.fields)
-}
-
-// Handle template selection
-function selectTemplate(template: StepTemplate) {
-  selectedTemplateId.value = template.id
-  closeTemplateDropdown()
-
-  // Reset to template defaults if creating new
-  if (props.mode === 'create') {
-    applyEditorFields(buildProtocolTemplateDefaults(template))
-  }
-}
-
-// Handle parameter change
-function handleParamChange(key: string, value: unknown) {
-  parameters.value[key] = value
-  // Clear validation error when user changes value
-  if (validationErrors.value[key]) {
-    delete validationErrors.value[key]
-  }
-}
-
-// Validate and save
-function handleSave() {
-  if (!selectedTemplate.value || !previewStep.value) return
-
-  const result = validateStep(previewStep.value, selectedTemplate.value)
-  validationErrors.value = result.errors
-
-  if (result.valid) {
-    emit('save', previewStep.value)
-    emit('update:modelValue', previewStep.value)
-  }
-}
-
-// Save as template
-function handleSaveTemplate() {
-  if (!selectedTemplate.value) return
-  emit('save-template', buildCustomProtocolTemplate(selectedTemplate.value, editorFields()))
-}
-
-// Handle cancel
-function handleCancel() {
-  emit('cancel')
-}
-
-onMounted(() => {
-  if (props.modelValue) {
-    initFromStep(props.modelValue)
-  } else if (availableTemplates.value.length > 0) {
-    selectTemplate(availableTemplates.value[0])
-  }
-})
-
-// Watch for external changes
-watch(
-  () => props.modelValue,
-  (step) => {
-    if (step) {
-      initFromStep(step)
-    }
-  }
-)
-</script>
-
-<template>
-  <div class="mint-protocol-editor">
-    <!-- Header -->
-    <div class="mint-protocol-editor__header">
-      <span class="mint-protocol-editor__title">
-        {{ mode === 'create' ? 'Create Protocol Step' : 'Edit Protocol Step' }}
-      </span>
-      <span
-        :class="[
-          'mint-protocol-editor__mode-badge',
-          `mint-protocol-editor__mode-badge--${mode}`,
-        ]"
-      >
-        {{ mode }}
-      </span>
-    </div>
-
-    <!-- Form -->
-    <div class="mint-protocol-editor__form">
-      <!-- Template selector -->
-      <div class="mint-protocol-editor__template-select">
-        <label class="mint-protocol-editor__template-label">Template</label>
-        <div ref="templateDropdownRef" class="mint-protocol-editor__template-dropdown">
-          <button
-            type="button"
-            class="mint-protocol-editor__template-btn"
-            @click="toggleTemplateDropdown"
-          >
-            <svg
-              v-if="selectedTemplate"
-              class="mint-protocol-editor__template-icon"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                :d="stepTypeIcons[selectedTemplate.type]"
-              />
-            </svg>
-            <span class="mint-protocol-editor__template-text">
-              {{ selectedTemplate?.name || 'Select template...' }}
-            </span>
-            <svg
-              :class="[
-                'mint-protocol-editor__template-arrow',
-                templateDropdownOpen ? 'mint-protocol-editor__template-arrow--open' : '',
-              ]"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-            </svg>
-          </button>
-
-          <div v-if="templateDropdownOpen" class="mint-protocol-editor__template-menu">
-            <button
-              v-for="template in availableTemplates"
-              :key="template.id"
-              type="button"
-              :class="[
-                'mint-protocol-editor__template-option',
-                selectedTemplateId === template.id ? 'mint-protocol-editor__template-option--active' : '',
-              ]"
-              @click="selectTemplate(template)"
-            >
-              <svg
-                class="mint-protocol-editor__template-option-icon"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  :d="stepTypeIcons[template.type]"
-                />
-              </svg>
-              <div class="mint-protocol-editor__template-option-text">
-                <div>{{ template.name }}</div>
-                <div v-if="template.description" class="mint-protocol-editor__template-option-desc">
-                  {{ template.description }}
-                </div>
-              </div>
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <div class="mint-protocol-editor__divider" />
-
-      <!-- Step name -->
-      <div class="mint-protocol-editor__field">
-        <label class="mint-protocol-editor__field-label mint-protocol-editor__field-label--required">
-          Step Name
-        </label>
-        <input
-          v-model="stepName"
-          type="text"
-          :class="[
-            'mint-protocol-editor__input',
-            validationErrors.name ? 'mint-protocol-editor__input--error' : '',
-          ]"
-          placeholder="Enter step name"
-        />
-        <span v-if="validationErrors.name" class="mint-protocol-editor__field-error">
-          {{ validationErrors.name }}
-        </span>
-      </div>
-
-      <!-- Dynamic parameters -->
-      <template v-if="selectedTemplate">
-        <ProtocolStepParameterField
-          v-for="param in selectedTemplate.parameters"
-          :key="param.key"
-          :parameter="param"
-          :model-value="parameters[param.key]"
-          :error="validationErrors[param.key]"
-          @update:model-value="handleParamChange(param.key, $event)"
-        />
-      </template>
-
-      <!-- Description -->
-      <div class="mint-protocol-editor__field">
-        <label class="mint-protocol-editor__field-label">Description</label>
-        <textarea
-          v-model="stepDescription"
-          class="mint-protocol-editor__textarea"
-          placeholder="Optional step description"
-          rows="2"
-        />
-      </div>
-    </div>
-
-    <!-- Preview -->
-    <div v-if="showPreview && previewStep" class="mint-protocol-editor__preview">
-      <div class="mint-protocol-editor__preview-title">Preview</div>
-      <div class="mint-protocol-editor__preview-card">
-        <div class="mint-protocol-editor__preview-icon">
-          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              :d="stepTypeIcons[previewStep.type]"
-            />
-          </svg>
-        </div>
-        <div class="mint-protocol-editor__preview-content">
-          <div class="mint-protocol-editor__preview-name">{{ previewStep.name }}</div>
-          <div v-if="previewParams" class="mint-protocol-editor__preview-params">
-            {{ previewParams }}
-          </div>
-        </div>
-        <div v-if="previewStep.duration" class="mint-protocol-editor__preview-duration">
-          {{ formatDuration(previewStep.duration) }}
-        </div>
-      </div>
-    </div>
-
-    <!-- Actions -->
-    <div class="mint-protocol-editor__actions">
-      <div class="mint-protocol-editor__actions-left">
-        <button
-          type="button"
-          class="mint-protocol-editor__btn mint-protocol-editor__btn--ghost"
-          @click="handleSaveTemplate"
-        >
-          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
-          </svg>
-          Save as Template
-        </button>
-      </div>
-      <button
-        type="button"
-        class="mint-protocol-editor__btn mint-protocol-editor__btn--secondary"
-        @click="handleCancel"
-      >
-        Cancel
-      </button>
-      <button
-        type="button"
-        class="mint-protocol-editor__btn mint-protocol-editor__btn--primary"
-        :disabled="!selectedTemplate"
-        @click="handleSave"
-      >
-        {{ mode === 'create' ? 'Add Step' : 'Save Changes' }}
-      </button>
-    </div>
-  </div>
-</template>
-
-<style>
-@import '../styles/components/protocol-step-editor.css';
-</style>

package/src/components/ProtocolStepParameterField.vue

@@ -1,134 +0,0 @@
-<script setup lang="ts">
-/** Renders one typed parameter control for ProtocolStepEditor. */
-import { computed } from 'vue'
-import type { ParameterDefinition } from '../composables/useProtocolTemplates'
-import type { ConcentrationValue } from '../composables/useConcentrationUnits'
-import ConcentrationInput from './ConcentrationInput.vue'
-
-interface Props {
-  parameter: ParameterDefinition
-  modelValue?: unknown
-  error?: string
-}
-
-const props = defineProps<Props>()
-
-const emit = defineEmits<{
-  'update:modelValue': [value: unknown]
-}>()
-
-const scalarValue = computed(() => (
-  props.modelValue as string | number | undefined
-))
-
-const concentrationValue = computed(() => (
-  props.modelValue as ConcentrationValue | undefined
-))
-
-const hasError = computed(() => !!props.error)
-
-function handleNumberInput(event: Event) {
-  emit('update:modelValue', (event.target as HTMLInputElement).valueAsNumber)
-}
-
-function handleTextInput(event: Event) {
-  emit('update:modelValue', (event.target as HTMLInputElement).value)
-}
-
-function handleSelectChange(event: Event) {
-  emit('update:modelValue', (event.target as HTMLSelectElement).value)
-}
-
-function handleConcentrationChange(value: ConcentrationValue | undefined) {
-  emit('update:modelValue', value)
-}
-</script>
-
-<template>
-  <div class="mint-protocol-editor__field">
-    <label
-      :class="[
-        'mint-protocol-editor__field-label',
-        parameter.required ? 'mint-protocol-editor__field-label--required' : '',
-      ]"
-    >
-      {{ parameter.label }}
-    </label>
-
-    <div
-      v-if="parameter.type === 'number' || parameter.type === 'temperature' || parameter.type === 'duration'"
-      class="mint-protocol-editor__input-unit"
-    >
-      <input
-        type="number"
-        :value="scalarValue"
-        :min="parameter.min"
-        :max="parameter.max"
-        :placeholder="parameter.placeholder || `Enter ${parameter.label.toLowerCase()}`"
-        :class="[
-          'mint-protocol-editor__input',
-          hasError ? 'mint-protocol-editor__input--error' : '',
-        ]"
-        @input="handleNumberInput"
-      />
-      <span v-if="parameter.unit" class="mint-protocol-editor__unit-suffix">
-        {{ parameter.unit }}
-      </span>
-    </div>
-
-    <input
-      v-else-if="parameter.type === 'text'"
-      type="text"
-      :value="scalarValue"
-      :placeholder="parameter.placeholder || `Enter ${parameter.label.toLowerCase()}`"
-      :class="[
-        'mint-protocol-editor__input',
-        hasError ? 'mint-protocol-editor__input--error' : '',
-      ]"
-      @input="handleTextInput"
-    />
-
-    <select
-      v-else-if="parameter.type === 'select'"
-      :value="scalarValue"
-      :class="[
-        'mint-protocol-editor__select',
-        hasError ? 'mint-protocol-editor__input--error' : '',
-      ]"
-      @change="handleSelectChange"
-    >
-      <option value="" disabled>Select {{ parameter.label.toLowerCase() }}</option>
-      <option
-        v-for="option in parameter.options"
-        :key="option.value"
-        :value="option.value"
-      >
-        {{ option.label }}
-      </option>
-    </select>
-
-    <ConcentrationInput
-      v-else-if="parameter.type === 'concentration'"
-      :model-value="concentrationValue"
-      :error="hasError"
-      size="md"
-      @update:model-value="handleConcentrationChange"
-    />
-
-    <input
-      v-else-if="parameter.type === 'reagent'"
-      type="text"
-      :value="scalarValue"
-      :placeholder="parameter.placeholder || 'Enter reagent name'"
-      :class="[
-        'mint-protocol-editor__input',
-        hasError ? 'mint-protocol-editor__input--error' : '',
-      ]"
-      @input="handleTextInput"
-    />
-
-    <span v-if="error" class="mint-protocol-editor__field-error">
-      {{ error }}
-    </span>
-  </div>
-</template>