@morscherlab/mint-sdk 1.0.0-alpha.2

package/src/components/StepWizard.vue

@@ -0,0 +1,223 @@
+<script setup lang="ts">
+/** Multi-step wizard with a progress stepper, per-step validity tracking, and Back/Next navigation. */
+import { ref, computed } from 'vue'
+import type { WizardStep, WizardStepState } from '../types'
+
+export interface Props {
+  steps: WizardStep[]
+  modelValue?: number
+  linear?: boolean
+  showProgress?: boolean
+  showStepNumbers?: boolean
+  size?: 'sm' | 'md' | 'lg'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: 0,
+  linear: true,
+  showProgress: true,
+  showStepNumbers: true,
+  size: 'md',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [index: number]
+  'complete': []
+  'cancel': []
+  'step-change': [change: [from: number, to: number]]
+}>()
+
+const stepValidity = ref<boolean[]>([])
+
+// Initialize validity for all steps to true
+if (stepValidity.value.length === 0) {
+  stepValidity.value = props.steps.map(() => true)
+}
+
+const stepStates = computed<WizardStepState[]>(() => {
+  return props.steps.map((_, index) => {
+    if (index === props.modelValue) return 'active'
+    if (index < props.modelValue && stepValidity.value[index] !== false) return 'completed'
+    if (index > props.modelValue && props.linear) {
+      for (let i = props.modelValue; i < index; i++) {
+        if (stepValidity.value[i] === false) return 'disabled'
+      }
+    }
+    return 'pending'
+  })
+})
+
+function setStepValid(index: number, valid: boolean) {
+  if (index >= 0 && index < props.steps.length) {
+    stepValidity.value[index] = valid
+  }
+}
+
+function goToStep(index: number) {
+  if (index < 0 || index >= props.steps.length) return
+  if (stepStates.value[index] === 'disabled') return
+
+  if (props.linear && index > props.modelValue) {
+    for (let i = props.modelValue; i < index; i++) {
+      if (stepValidity.value[i] === false) return
+    }
+  }
+
+  const from = props.modelValue
+  emit('step-change', [from, index])
+  emit('update:modelValue', index)
+}
+
+function goNext() {
+  if (stepValidity.value[props.modelValue] === false) return
+  if (props.modelValue < props.steps.length - 1) {
+    goToStep(props.modelValue + 1)
+  }
+}
+
+function goBack() {
+  if (props.modelValue > 0) {
+    goToStep(props.modelValue - 1)
+  }
+}
+
+function finish() {
+  if (stepValidity.value[props.modelValue] === false) return
+  if (props.modelValue === props.steps.length - 1) {
+    emit('complete')
+  }
+}
+
+function cancel() {
+  emit('cancel')
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  switch (event.key) {
+    case 'ArrowLeft':
+      event.preventDefault()
+      goBack()
+      break
+    case 'ArrowRight':
+      event.preventDefault()
+      goNext()
+      break
+    case 'Escape':
+      cancel()
+      break
+  }
+}
+
+defineExpose({ setStepValid })
+</script>
+
+<template>
+  <div
+    :class="['mld-wizard', `mld-wizard--${props.size}`]"
+    tabindex="0"
+    @keydown="handleKeydown"
+  >
+    <!-- Progress indicator -->
+    <div v-if="props.showProgress" class="mld-wizard__progress">
+      <slot name="progress" :steps="props.steps" :current="props.modelValue" :states="stepStates">
+        <div class="mld-wizard__steps-indicator">
+          <template v-for="(step, index) in props.steps" :key="step.id">
+            <!-- Connector line (before each step except first) -->
+            <div
+              v-if="index > 0"
+              :class="[
+                'mld-wizard__step-connector',
+                stepStates[index - 1] === 'completed' ? 'mld-wizard__step-connector--completed' : '',
+              ]"
+            />
+            <!-- Step indicator -->
+            <div
+              :class="[
+                'mld-wizard__step-indicator',
+                `mld-wizard__step-indicator--${stepStates[index]}`,
+              ]"
+              @click="goToStep(index)"
+            >
+              <div class="mld-wizard__step-dot">
+                <template v-if="stepStates[index] === 'completed'">
+                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M20 6 9 17l-5-5" />
+                  </svg>
+                </template>
+                <template v-else-if="props.showStepNumbers">
+                  {{ index + 1 }}
+                </template>
+              </div>
+              <div class="mld-wizard__step-label">{{ step.label }}</div>
+            </div>
+          </template>
+        </div>
+      </slot>
+    </div>
+
+    <!-- Step content -->
+    <div class="mld-wizard__body">
+      <div
+        v-for="(step, index) in props.steps"
+        :key="step.id"
+        v-show="index === props.modelValue"
+        class="mld-wizard__step-content"
+      >
+        <slot :name="`step-${step.id}`" :step="step" :index="index" />
+      </div>
+    </div>
+
+    <!-- Navigation -->
+    <div class="mld-wizard__navigation">
+      <slot
+        name="navigation"
+        :go-back="goBack"
+        :go-next="goNext"
+        :finish="finish"
+        :cancel="cancel"
+        :is-first="props.modelValue === 0"
+        :is-last="props.modelValue === props.steps.length - 1"
+        :can-proceed="stepValidity[props.modelValue] !== false"
+      >
+        <button
+          type="button"
+          class="mld-wizard__nav-btn mld-wizard__nav-btn--cancel"
+          @click="cancel"
+        >
+          Cancel
+        </button>
+        <div style="flex: 1" />
+        <button
+          type="button"
+          class="mld-wizard__nav-btn mld-wizard__nav-btn--back"
+          :disabled="props.modelValue === 0"
+          @click="goBack"
+        >
+          Back
+        </button>
+        <button
+          v-if="props.modelValue < props.steps.length - 1"
+          type="button"
+          class="mld-wizard__nav-btn mld-wizard__nav-btn--next"
+          :disabled="stepValidity[props.modelValue] === false"
+          @click="goNext"
+        >
+          Next
+        </button>
+        <button
+          v-else
+          type="button"
+          class="mld-wizard__nav-btn mld-wizard__nav-btn--finish"
+          :disabled="stepValidity[props.modelValue] === false"
+          @click="finish"
+        >
+          Finish
+        </button>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/step-wizard.css';
+</style>

package/src/components/TagsInput.story.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import TagsInput from './TagsInput.vue'
+
+const sizes = ['sm', 'md', 'lg'] as const
+const sampleTags = ref(['HeLa', 'MCF-7', 'A549'])
+const emptyTags = ref<string[]>([])
+</script>
+
+<template>
+  <Story title="Base Inputs/TagsInput">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+          <TagsInput
+            v-model="state.tags"
+            :placeholder="state.placeholder"
+            :disabled="state.disabled"
+            :error="state.error"
+            :size="state.size"
+            :max-tags="state.useMaxTags ? state.maxTags : undefined"
+            :allow-duplicates="state.allowDuplicates"
+          />
+          <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+            Tags: <code>{{ JSON.stringify(state.tags) }}</code>
+          </p>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.placeholder" title="Placeholder" />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="sizes.map(s => ({ label: s, value: s }))"
+        />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+        <HstCheckbox v-model="state.error" title="Error" />
+        <HstCheckbox v-model="state.allowDuplicates" title="Allow Duplicates" />
+        <HstCheckbox v-model="state.useMaxTags" title="Limit Max Tags" />
+        <HstSlider v-model="state.maxTags" title="Max Tags" :min="1" :max="20" />
+      </template>
+    </Variant>
+
+    <Variant title="Sizes">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem;">
+        <div v-for="size in sizes" :key="size">
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
+            {{ size }}
+          </p>
+          <TagsInput v-model="sampleTags" :size="size" />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="With Placeholder">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <TagsInput
+          v-model="emptyTags"
+          placeholder="Type a cell line and press Enter..."
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Pre-filled Tags">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <TagsInput
+          :model-value="['DMSO', 'Staurosporine', 'Doxorubicin', 'Paclitaxel', 'Cisplatin']"
+          placeholder="Add compound..."
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Max Tags Limit">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <p style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text-primary, #e2e8f0);">Maximum 3 tags allowed</p>
+        <TagsInput
+          :model-value="['Tag 1', 'Tag 2']"
+          :max-tags="3"
+          placeholder="Add up to 3 tags..."
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Error State">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <TagsInput
+          :model-value="['invalid-tag']"
+          error
+          placeholder="Fix the tags..."
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <TagsInput
+          :model-value="['Read', 'Only', 'Tags']"
+          disabled
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Autocomplete — with suggestions">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 420px; display: flex; flex-direction: column; gap: 0.5rem;">
+          <TagsInput
+            v-model="state.tags"
+            placeholder="Type to search tags..."
+            :suggestions="[
+              { value: 'dose-response', count: 142 },
+              { value: 'dose-ranging', count: 58 },
+              { value: 'drug-screen', count: 97 },
+              { value: 'deletion', count: 21 },
+              { value: 'dna-seq', count: 34 },
+              { value: 'oncology', count: 203 },
+              { value: 'on-target', count: 11 },
+            ]"
+          />
+          <p style="margin: 0; font-size: 0.75rem; color: var(--text-muted);">
+            Try typing "d" — matches rank with usage counts on the right.
+          </p>
+        </div>
+      </template>
+      <template #initState>
+        {{ { tags: [] } }}
+      </template>
+    </Variant>
+
+    <Variant title="Categorized — namespaced tags">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 520px; display: flex; flex-direction: column; gap: 0.5rem;">
+          <TagsInput
+            v-model="state.tags"
+            v-model:active-category="state.activeCategory"
+            placeholder="Pick a category and type..."
+            :categories="[
+              { name: 'role', prefix: 'role', color: 'primary' },
+              { name: 'status', prefix: 'status', color: 'success' },
+              { name: 'type', prefix: 'type', color: 'info' },
+              { name: 'qc', prefix: 'qc', color: 'warning' },
+              { name: 'ref', prefix: 'ref', color: 'neutral' },
+            ]"
+          />
+          <p style="margin: 0; font-size: 0.75rem; color: var(--text-muted);">
+            Click a category to activate its prefix. Typed tags auto-namespace (e.g. <code>status:passed</code>).
+          </p>
+        </div>
+      </template>
+      <template #initState>
+        {{ { tags: ['role:control', 'status:passed', 'type:metabolomics', 'qc:outlier'], activeCategory: 'type' } }}
+      </template>
+    </Variant>
+  </Story>
+</template>

package/src/components/TagsInput.vue

@@ -0,0 +1,265 @@
+<script setup lang="ts">
+/** Lets users type and add tags with autocomplete suggestions, categories, and a max-tag cap. */
+import { ref, computed } from 'vue'
+
+interface TagSuggestion {
+  value: string
+  count?: number
+}
+
+interface TagCategory {
+  name: string
+  prefix: string
+  color?: 'primary' | 'success' | 'warning' | 'error' | 'info' | 'neutral'
+}
+
+interface Props {
+  modelValue?: string[]
+  placeholder?: string
+  disabled?: boolean
+  error?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  maxTags?: number
+  allowDuplicates?: boolean
+  suggestions?: string[] | TagSuggestion[]
+  categories?: TagCategory[]
+  activeCategory?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => [],
+  disabled: false,
+  error: false,
+  size: 'md',
+  allowDuplicates: false,
+  suggestions: () => [],
+  categories: () => [],
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string[]]
+  'update:activeCategory': [prefix: string]
+}>()
+
+const inputValue = ref('')
+const inputRef = ref<HTMLInputElement>()
+const dropdownOpen = ref(false)
+const highlightedIndex = ref(-1)
+
+const canAddMore = computed(() => {
+  if (props.maxTags === undefined) return true
+  return props.modelValue.length < props.maxTags
+})
+
+const normalizedSuggestions = computed<TagSuggestion[]>(() => {
+  return props.suggestions.map(s => typeof s === 'string' ? { value: s } : s)
+})
+
+const filteredSuggestions = computed<TagSuggestion[]>(() => {
+  const q = inputValue.value.trim().toLowerCase()
+  if (!q) return []
+  return normalizedSuggestions.value
+    .filter(s => s.value.toLowerCase().startsWith(q) && !props.modelValue.includes(s.value))
+    .slice(0, 8)
+})
+
+function categoryFor(tag: string): TagCategory | undefined {
+  const colonIdx = tag.indexOf(':')
+  if (colonIdx === -1) return undefined
+  const prefix = tag.slice(0, colonIdx)
+  return props.categories.find(c => c.prefix === prefix)
+}
+
+function addTag(value: string) {
+  const trimmed = value.trim()
+  if (!trimmed) return
+  if (!canAddMore.value) return
+
+  // If a category is active and user didn't already type a prefix, prepend it
+  let final = trimmed
+  if (props.activeCategory && !trimmed.includes(':')) {
+    final = `${props.activeCategory}:${trimmed}`
+  }
+
+  if (!props.allowDuplicates && props.modelValue.includes(final)) return
+
+  emit('update:modelValue', [...props.modelValue, final])
+  inputValue.value = ''
+  dropdownOpen.value = false
+  highlightedIndex.value = -1
+}
+
+function removeTag(index: number) {
+  if (props.disabled) return
+  const newTags = [...props.modelValue]
+  newTags.splice(index, 1)
+  emit('update:modelValue', newTags)
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'ArrowDown' && filteredSuggestions.value.length) {
+    event.preventDefault()
+    highlightedIndex.value = Math.min(highlightedIndex.value + 1, filteredSuggestions.value.length - 1)
+    dropdownOpen.value = true
+    return
+  }
+  if (event.key === 'ArrowUp' && filteredSuggestions.value.length) {
+    event.preventDefault()
+    highlightedIndex.value = Math.max(highlightedIndex.value - 1, 0)
+    return
+  }
+  if (event.key === 'Enter' || event.key === ',') {
+    event.preventDefault()
+    if (highlightedIndex.value >= 0 && filteredSuggestions.value[highlightedIndex.value]) {
+      addTag(filteredSuggestions.value[highlightedIndex.value].value)
+    } else {
+      addTag(inputValue.value)
+    }
+    return
+  }
+  if (event.key === 'Escape') {
+    dropdownOpen.value = false
+    highlightedIndex.value = -1
+    return
+  }
+  if (event.key === 'Backspace' && !inputValue.value && props.modelValue.length > 0) {
+    removeTag(props.modelValue.length - 1)
+  }
+}
+
+function handleFocus() {
+  if (filteredSuggestions.value.length) dropdownOpen.value = true
+}
+
+function handleBlur() {
+  // Delay so a click on a suggestion fires first
+  setTimeout(() => {
+    dropdownOpen.value = false
+  }, 120)
+}
+
+function handlePaste(event: ClipboardEvent) {
+  event.preventDefault()
+  const text = event.clipboardData?.getData('text')
+  if (!text) return
+
+  const tags = text.split(/[,\n]/).map(t => t.trim()).filter(Boolean)
+  const newTags = [...props.modelValue]
+
+  for (const tag of tags) {
+    if (!canAddMore.value) break
+    if (!props.allowDuplicates && newTags.includes(tag)) continue
+    newTags.push(tag)
+  }
+
+  emit('update:modelValue', newTags)
+}
+
+function focusInput() {
+  inputRef.value?.focus()
+}
+
+function setCategory(prefix: string) {
+  emit('update:activeCategory', prefix === props.activeCategory ? '' : prefix)
+}
+
+function onInputEvent() {
+  dropdownOpen.value = filteredSuggestions.value.length > 0
+  highlightedIndex.value = -1
+}
+</script>
+
+<template>
+  <div
+    :class="[
+      'mld-tags-input',
+      `mld-tags-input--${size}`,
+      error ? 'mld-tags-input--error' : '',
+      disabled ? 'mld-tags-input--disabled' : '',
+      categories.length ? 'mld-tags-input--categorized' : '',
+    ]"
+  >
+    <!-- Category switcher (only if categories defined) -->
+    <div v-if="categories.length" class="mld-tags-input__categories">
+      <button
+        v-for="cat in categories"
+        :key="cat.prefix"
+        type="button"
+        :class="[
+          'mld-tags-input__category',
+          `mld-tags-input__category--${cat.color ?? 'neutral'}`,
+          activeCategory === cat.prefix ? 'mld-tags-input__category--active' : '',
+        ]"
+        :disabled="disabled"
+        @click="setCategory(cat.prefix)"
+      >
+        {{ cat.name }}
+      </button>
+    </div>
+
+    <div class="mld-tags-input__field" @click="focusInput">
+      <span
+        v-for="(tag, index) in modelValue"
+        :key="`${tag}-${index}`"
+        :class="[
+          'mld-tags-input__tag',
+          `mld-tags-input__tag--${size}`,
+          categoryFor(tag) ? `mld-tags-input__tag--${categoryFor(tag)?.color ?? 'neutral'}` : '',
+        ]"
+      >
+        {{ tag }}
+        <button
+          v-if="!disabled"
+          type="button"
+          :aria-label="`Remove ${tag}`"
+          class="mld-tags-input__tag-remove"
+          @click.stop="removeTag(index)"
+        >
+          <svg class="mld-tags-input__tag-remove-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+            <path d="M18 6 6 18" /><path d="m6 6 12 12" />
+          </svg>
+        </button>
+      </span>
+
+      <input
+        ref="inputRef"
+        v-model="inputValue"
+        type="text"
+        :placeholder="modelValue.length === 0 ? placeholder : ''"
+        :disabled="disabled || !canAddMore"
+        :class="['mld-tags-input__input', `mld-tags-input__input--${size}`]"
+        @keydown="handleKeydown"
+        @paste="handlePaste"
+        @focus="handleFocus"
+        @blur="handleBlur"
+        @input="onInputEvent"
+      />
+
+      <!-- Autocomplete dropdown -->
+      <div
+        v-if="dropdownOpen && filteredSuggestions.length"
+        class="mld-tags-input__dropdown"
+      >
+        <button
+          v-for="(sug, i) in filteredSuggestions"
+          :key="sug.value"
+          type="button"
+          :class="[
+            'mld-tags-input__dropdown-item',
+            i === highlightedIndex ? 'mld-tags-input__dropdown-item--highlighted' : '',
+          ]"
+          @mousedown.prevent="addTag(sug.value)"
+        >
+          <span>{{ sug.value }}</span>
+          <span v-if="sug.count !== undefined" class="mld-tags-input__dropdown-count">
+            {{ sug.count }}
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/tags-input.css';
+</style>

package/src/components/ThemeToggle.story.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import ThemeToggle from './ThemeToggle.vue'
+
+const sizes: ('sm' | 'md' | 'lg')[] = ['sm', 'md', 'lg']
+</script>
+
+<template>
+  <Story title="Action/ThemeToggle">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
+          <ThemeToggle :size="state.size" />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="sizes.map(s => ({ label: s, value: s }))"
+        />
+      </template>
+    </Variant>
+
+    <Variant title="All Sizes">
+      <div style="padding: 2rem; display: flex; gap: 1.5rem; align-items: center; justify-content: center;">
+        <div v-for="size in sizes" :key="size" style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+          <ThemeToggle :size="size" />
+          <span style="font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
+            {{ size }}
+          </span>
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>