@morscherlab/mint-sdk 1.0.0-beta.2 → 1.0.0-beta.4

package/src/components/GroupingModal.vue

@@ -1,422 +0,0 @@
-<!-- @deprecated Use AutoGroupModal instead -->
-<script setup lang="ts">
-/** @deprecated CSV-based sample grouping modal; use AutoGroupModal instead. */
-import { ref, computed, watch } from 'vue'
-import BaseModal from './BaseModal.vue'
-import BaseButton from './BaseButton.vue'
-import BaseSelect from './BaseSelect.vue'
-import type { SelectOption } from '../types'
-
-interface Props {
-  open: boolean
-  samples: string[]
-}
-
-interface ParsedRow {
-  [key: string]: string
-}
-
-const props = defineProps<Props>()
-
-const emit = defineEmits<{
-  close: []
-  apply: [mapping: Record<string, string[]>, columns: string[]]
-}>()
-
-const csvFile = ref<File | null>(null)
-const csvData = ref<ParsedRow[]>([])
-const csvColumns = ref<string[]>([])
-const sampleColumn = ref<string>('')
-const groupColumns = ref<string[]>([])
-const isDragOver = ref(false)
-const parseError = ref<string | null>(null)
-
-const columnOptions = computed<SelectOption[]>(() =>
-  csvColumns.value.map(col => ({ value: col, label: col }))
-)
-
-const availableGroupColumns = computed<SelectOption[]>(() =>
-  csvColumns.value
-    .filter(col => col !== sampleColumn.value && !groupColumns.value.includes(col))
-    .map(col => ({ value: col, label: col }))
-)
-
-const matchedSamples = computed(() => {
-  if (!sampleColumn.value || csvData.value.length === 0) return []
-  const csvSampleValues = csvData.value.map(row => row[sampleColumn.value])
-  return props.samples.filter(sample => csvSampleValues.includes(sample))
-})
-
-const unmatchedSamples = computed(() => {
-  if (!sampleColumn.value || csvData.value.length === 0) return []
-  const csvSampleValues = csvData.value.map(row => row[sampleColumn.value])
-  return props.samples.filter(sample => !csvSampleValues.includes(sample))
-})
-
-const previewData = computed(() => {
-  if (csvData.value.length === 0) return []
-  return csvData.value.slice(0, 5)
-})
-
-const canApply = computed(() =>
-  sampleColumn.value &&
-  groupColumns.value.length > 0 &&
-  matchedSamples.value.length > 0
-)
-
-watch(() => props.open, (isOpen) => {
-  if (!isOpen) {
-    resetState()
-  }
-})
-
-function resetState() {
-  csvFile.value = null
-  csvData.value = []
-  csvColumns.value = []
-  sampleColumn.value = ''
-  groupColumns.value = []
-  parseError.value = null
-}
-
-function handleDrop(event: DragEvent) {
-  event.preventDefault()
-  isDragOver.value = false
-  const files = event.dataTransfer?.files
-  if (files && files.length > 0) {
-    handleFile(files[0])
-  }
-}
-
-function handleFileInput(event: Event) {
-  const target = event.target as HTMLInputElement
-  if (target.files && target.files.length > 0) {
-    handleFile(target.files[0])
-  }
-}
-
-async function handleFile(file: File) {
-  if (!file.name.endsWith('.csv')) {
-    parseError.value = 'Please upload a CSV file'
-    return
-  }
-
-  csvFile.value = file
-  parseError.value = null
-
-  try {
-    const text = await file.text()
-    parseCSV(text)
-  } catch {
-    parseError.value = 'Failed to read file'
-  }
-}
-
-function parseCSV(text: string) {
-  const lines = text.trim().split('\n')
-  if (lines.length < 2) {
-    parseError.value = 'CSV must have at least a header and one data row'
-    return
-  }
-
-  const headers = parseCSVLine(lines[0])
-  csvColumns.value = headers
-
-  const data: ParsedRow[] = []
-  for (let i = 1; i < lines.length; i++) {
-    const values = parseCSVLine(lines[i])
-    if (values.length !== headers.length) continue
-
-    const row: ParsedRow = {}
-    headers.forEach((header, idx) => {
-      row[header] = values[idx]
-    })
-    data.push(row)
-  }
-
-  csvData.value = data
-
-  // Auto-select sample column if there's a likely match
-  const sampleColGuess = headers.find(h =>
-    h.toLowerCase().includes('sample') ||
-    h.toLowerCase().includes('name') ||
-    h.toLowerCase().includes('id')
-  )
-  if (sampleColGuess) {
-    sampleColumn.value = sampleColGuess
-  }
-}
-
-function parseCSVLine(line: string): string[] {
-  const result: string[] = []
-  let current = ''
-  let inQuotes = false
-
-  for (let i = 0; i < line.length; i++) {
-    const char = line[i]
-    if (char === '"') {
-      inQuotes = !inQuotes
-    } else if (char === ',' && !inQuotes) {
-      result.push(current.trim())
-      current = ''
-    } else {
-      current += char
-    }
-  }
-  result.push(current.trim())
-
-  return result
-}
-
-function addGroupColumn(column: string) {
-  if (column && !groupColumns.value.includes(column)) {
-    groupColumns.value.push(column)
-  }
-}
-
-function removeGroupColumn(column: string) {
-  groupColumns.value = groupColumns.value.filter(c => c !== column)
-}
-
-function moveGroupColumn(index: number, direction: 'up' | 'down') {
-  const newIndex = direction === 'up' ? index - 1 : index + 1
-  if (newIndex < 0 || newIndex >= groupColumns.value.length) return
-
-  const cols = [...groupColumns.value]
-  const temp = cols[index]
-  cols[index] = cols[newIndex]
-  cols[newIndex] = temp
-  groupColumns.value = cols
-}
-
-function applyGrouping() {
-  if (!canApply.value) return
-
-  const mapping: Record<string, string[]> = {}
-
-  for (const row of csvData.value) {
-    const sampleName = row[sampleColumn.value]
-    if (!props.samples.includes(sampleName)) continue
-
-    // Build hierarchical group key
-    const groupKey = groupColumns.value.map(col => row[col]).join(' / ')
-
-    if (!mapping[groupKey]) {
-      mapping[groupKey] = []
-    }
-    mapping[groupKey].push(sampleName)
-  }
-
-  emit('apply', mapping, groupColumns.value)
-  emit('close')
-}
-
-function close() {
-  emit('close')
-}
-</script>
-
-<template>
-  <BaseModal
-    :model-value="open"
-    title="Group by Metadata"
-    size="lg"
-    @update:model-value="!$event && close()"
-    @close="close"
-  >
-    <div class="mint-grouping-modal">
-      <!-- File upload area -->
-      <div
-        v-if="!csvFile"
-        :class="[
-          'mint-grouping-modal__dropzone',
-          isDragOver ? 'mint-grouping-modal__dropzone--dragover' : '',
-        ]"
-        @drop="handleDrop"
-        @dragover.prevent="isDragOver = true"
-        @dragleave="isDragOver = false"
-      >
-        <input
-          type="file"
-          accept=".csv"
-          class="mint-grouping-modal__file-input"
-          @change="handleFileInput"
-        />
-        <svg class="mint-grouping-modal__upload-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-        </svg>
-        <p class="mint-grouping-modal__upload-text">
-          <span class="mint-grouping-modal__upload-highlight">Click to upload</span>
-          or drag and drop a CSV file
-        </p>
-        <p class="mint-grouping-modal__upload-hint">
-          CSV should contain sample names and grouping columns
-        </p>
-      </div>
-
-      <!-- Error message -->
-      <div v-if="parseError" class="mint-grouping-modal__error">
-        {{ parseError }}
-      </div>
-
-      <!-- Configuration section -->
-      <template v-if="csvFile && csvData.length > 0">
-        <div class="mint-grouping-modal__file-info">
-          <svg class="mint-grouping-modal__file-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-          </svg>
-          <span class="mint-grouping-modal__file-name">{{ csvFile.name }}</span>
-          <button
-            type="button"
-            class="mint-grouping-modal__file-clear"
-            @click="resetState"
-          >
-            Change file
-          </button>
-        </div>
-
-        <!-- Column selection -->
-        <div class="mint-grouping-modal__config">
-          <div class="mint-grouping-modal__config-row">
-            <label class="mint-grouping-modal__label">Sample Column</label>
-            <BaseSelect
-              v-model="sampleColumn"
-              :options="columnOptions"
-              placeholder="Select sample column..."
-            />
-          </div>
-
-          <div class="mint-grouping-modal__config-row">
-            <label class="mint-grouping-modal__label">Group Columns</label>
-            <div class="mint-grouping-modal__group-columns">
-              <!-- Selected group columns with reordering -->
-              <div v-if="groupColumns.length > 0" class="mint-grouping-modal__selected-columns">
-                <div
-                  v-for="(col, index) in groupColumns"
-                  :key="col"
-                  class="mint-grouping-modal__selected-column"
-                >
-                  <span class="mint-grouping-modal__column-name">{{ col }}</span>
-                  <div class="mint-grouping-modal__column-actions">
-                    <button
-                      type="button"
-                      :disabled="index === 0"
-                      class="mint-grouping-modal__column-btn"
-                      @click="moveGroupColumn(index, 'up')"
-                    >
-                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <path d="M18 15l-6-6-6 6" />
-                      </svg>
-                    </button>
-                    <button
-                      type="button"
-                      :disabled="index === groupColumns.length - 1"
-                      class="mint-grouping-modal__column-btn"
-                      @click="moveGroupColumn(index, 'down')"
-                    >
-                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <path d="M6 9l6 6 6-6" />
-                      </svg>
-                    </button>
-                    <button
-                      type="button"
-                      class="mint-grouping-modal__column-btn mint-grouping-modal__column-btn--remove"
-                      @click="removeGroupColumn(col)"
-                    >
-                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <path d="M6 18L18 6M6 6l12 12" />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </div>
-
-              <!-- Add column dropdown -->
-              <BaseSelect
-                v-if="availableGroupColumns.length > 0"
-                model-value=""
-                :options="availableGroupColumns"
-                placeholder="Add group column..."
-                @update:model-value="addGroupColumn($event as string)"
-              />
-            </div>
-          </div>
-        </div>
-
-        <!-- Match status -->
-        <div v-if="sampleColumn" class="mint-grouping-modal__match-status">
-          <div class="mint-grouping-modal__match-stat mint-grouping-modal__match-stat--matched">
-            <span class="mint-grouping-modal__match-count">{{ matchedSamples.length }}</span>
-            <span class="mint-grouping-modal__match-label">samples matched</span>
-          </div>
-          <div
-            v-if="unmatchedSamples.length > 0"
-            class="mint-grouping-modal__match-stat mint-grouping-modal__match-stat--unmatched"
-          >
-            <span class="mint-grouping-modal__match-count">{{ unmatchedSamples.length }}</span>
-            <span class="mint-grouping-modal__match-label">samples not found in CSV</span>
-          </div>
-        </div>
-
-        <!-- Preview table -->
-        <div v-if="previewData.length > 0" class="mint-grouping-modal__preview">
-          <h4 class="mint-grouping-modal__preview-title">Data Preview</h4>
-          <div class="mint-grouping-modal__table-wrapper">
-            <table class="mint-grouping-modal__table">
-              <thead>
-                <tr>
-                  <th
-                    v-for="col in csvColumns"
-                    :key="col"
-                    :class="[
-                      'mint-grouping-modal__th',
-                      col === sampleColumn ? 'mint-grouping-modal__th--sample' : '',
-                      groupColumns.includes(col) ? 'mint-grouping-modal__th--group' : '',
-                    ]"
-                  >
-                    {{ col }}
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="(row, idx) in previewData" :key="idx">
-                  <td
-                    v-for="col in csvColumns"
-                    :key="col"
-                    :class="[
-                      'mint-grouping-modal__td',
-                      col === sampleColumn ? 'mint-grouping-modal__td--sample' : '',
-                      groupColumns.includes(col) ? 'mint-grouping-modal__td--group' : '',
-                    ]"
-                  >
-                    {{ row[col] }}
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <p v-if="csvData.length > 5" class="mint-grouping-modal__preview-note">
-            Showing 5 of {{ csvData.length }} rows
-          </p>
-        </div>
-      </template>
-    </div>
-
-    <template #footer>
-      <div class="mint-grouping-modal__footer">
-        <BaseButton variant="secondary" @click="close">Cancel</BaseButton>
-        <BaseButton
-          variant="primary"
-          :disabled="!canApply"
-          @click="applyGrouping"
-        >
-          Apply Grouping
-        </BaseButton>
-      </div>
-    </template>
-  </BaseModal>
-</template>
-
-<style>
-@import '../styles/components/grouping-modal.css';
-</style>

package/src/components/SettingsButton.story.vue

@@ -1,58 +0,0 @@
-<script setup lang="ts">
-import SettingsButton from './SettingsButton.vue'
-
-const sizes: ('sm' | 'md' | 'lg')[] = ['sm', 'md', 'lg']
-</script>
-
-<template>
-  <Story title="Action/SettingsButton">
-    <Variant title="Playground">
-      <template #default="{ state }">
-        <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
-          <SettingsButton :size="state.size">
-            <div style="padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem;">
-              <label style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--text-primary, #1e293b);">
-                <input type="checkbox" checked /> Enable notifications
-              </label>
-              <label style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--text-primary, #1e293b);">
-                <input type="checkbox" /> Auto-save results
-              </label>
-              <label style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--text-primary, #1e293b);">
-                <input type="checkbox" checked /> Show grid lines
-              </label>
-            </div>
-          </SettingsButton>
-        </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: 2rem; 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;">
-          <SettingsButton :size="size">
-            <div style="padding: 0.75rem; font-size: 0.875rem; color: var(--text-primary, #1e293b);">
-              Settings panel content ({{ size }})
-            </div>
-          </SettingsButton>
-          <span style="font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
-            {{ size }}
-          </span>
-        </div>
-      </div>
-    </Variant>
-
-    <Variant title="Empty (Default Slot)">
-      <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
-        <SettingsButton />
-      </div>
-    </Variant>
-  </Story>
-</template>

package/src/components/SettingsButton.vue

@@ -1,76 +0,0 @@
-<script setup lang="ts">
-/** Gear icon button that toggles a dropdown panel for inline settings content, closing on outside click. */
-import { ref, onMounted, onUnmounted } from 'vue'
-
-interface Props {
-  size?: 'sm' | 'md' | 'lg'
-}
-
-withDefaults(defineProps<Props>(), {
-  size: 'md',
-})
-
-const emit = defineEmits<{
-  click: [event: MouseEvent]
-}>()
-
-const isOpen = ref(false)
-const dropdownRef = ref<HTMLElement | null>(null)
-
-function toggle(event: MouseEvent) {
-  isOpen.value = !isOpen.value
-  emit('click', event)
-}
-
-function handleClickOutside(event: MouseEvent) {
-  const target = event.target as Node
-  if (dropdownRef.value && !dropdownRef.value.contains(target)) {
-    isOpen.value = false
-  }
-}
-
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside)
-})
-</script>
-
-<template>
-  <div ref="dropdownRef" class="mint-settings-button">
-    <button
-      type="button"
-      :class="['mint-settings-button__trigger', `mint-settings-button__trigger--${size}`]"
-      aria-label="Settings"
-      @click.stop="toggle"
-    >
-      <!-- Settings/Gear icon -->
-      <svg
-        :class="`mint-settings-button__icon--${size}`"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" /><circle cx="12" cy="12" r="3" />
-      </svg>
-    </button>
-
-    <!-- Dropdown panel -->
-    <div v-show="isOpen" class="mint-settings-dropdown">
-      <slot>
-        <div class="mint-settings-dropdown__empty">
-          No settings configured
-        </div>
-      </slot>
-    </div>
-  </div>
-</template>
-
-<style>
-@import '../styles/components/settings-button.css';
-</style>

package/src/composables/usePluginApi.ts

@@ -1,39 +0,0 @@
-import { useApi } from './useApi'
-
-export interface UsePluginApiOptions {
-  /**
-   * Fallback API prefix when `VITE_API_PREFIX` is not set.
-   * Typically your plugin's route prefix, e.g. `'/api/drp'`.
-   */
-  fallbackPrefix?: string
-}
-
-/**
- * Pre-configured API client for plugins.
- *
- * Resolves the base URL in priority order:
- * 1. `import.meta.env.VITE_API_PREFIX` (build-time env override)
- * 2. `fallbackPrefix` option (plugin's route prefix)
- * 3. `'/api'` (default)
- *
- * Eliminates the repeated pattern across plugins:
- * ```ts
- * const API_BASE = import.meta.env.VITE_API_PREFIX || '/api/my-plugin'
- * const api = useApi({ baseUrl: API_BASE })
- * ```
- *
- * @example
- * ```ts
- * const api = usePluginApi({ fallbackPrefix: '/api/drp' })
- * const data = await api.get('/sessions')
- * ```
- */
-/** Pre-configured API client resolving the plugin base URL from VITE_API_PREFIX or a fallback prefix. */
-export function usePluginApi(options: UsePluginApiOptions = {}) {
-  const baseUrl =
-    (import.meta.env?.VITE_API_PREFIX as string | undefined) ||
-    options.fallbackPrefix ||
-    '/api'
-
-  return useApi({ baseUrl })
-}