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

package/src/__tests__/components/FormCompatibility.test.ts

@@ -1,94 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
-import FormFieldRenderer from '../../components/FormFieldRenderer.vue'
-import FormSection from '../../components/FormSection.vue'
-import { useFormBuilder } from '../../composables/useFormBuilder'
-import type { FormSchema } from '../../types/form-builder'
-
-const schema: FormSchema = {
-  sections: [
-    {
-      id: 'parameters',
-      title: 'Parameters',
-      fields: [
-        { name: 'threshold', label: 'Threshold', type: 'text', defaultValue: '0.05' },
-      ],
-    },
-  ],
-}
-
-describe('deprecated form compatibility components', () => {
-  it('keeps FormFieldRenderer rendering through the internal renderer', () => {
-    const builder = useFormBuilder(schema)
-    const field = schema.sections[0].fields[0]
-
-    const wrapper = mount(FormFieldRenderer, {
-      props: {
-        field,
-        resolvedProps: builder.getResolvedFieldProps(field),
-        form: builder.form,
-      },
-    })
-
-    expect(wrapper.text()).toContain('Threshold')
-    expect(wrapper.find('input').exists()).toBe(true)
-  })
-
-  it('keeps FormFieldRenderer field slot forwarding', () => {
-    const builder = useFormBuilder(schema)
-    const field = schema.sections[0].fields[0]
-
-    const wrapper = mount(FormFieldRenderer, {
-      props: {
-        field,
-        resolvedProps: builder.getResolvedFieldProps(field),
-        form: builder.form,
-      },
-      slots: {
-        'field:threshold': '<div class="custom-field">Custom threshold</div>',
-      },
-    })
-
-    expect(wrapper.find('.custom-field').text()).toBe('Custom threshold')
-    expect(wrapper.find('input').exists()).toBe(false)
-  })
-
-  it('keeps FormSection section and field slot forwarding', () => {
-    const builder = useFormBuilder(schema)
-    const section = schema.sections[0]
-
-    const wrapper = mount(FormSection, {
-      props: {
-        section,
-        builder,
-      },
-      slots: {
-        'field:threshold': '<div class="custom-field">Custom threshold</div>',
-        'section:parameters:after': '<div class="section-after">After section</div>',
-      },
-    })
-
-    expect(wrapper.text()).toContain('Parameters')
-    expect(wrapper.find('.custom-field').text()).toBe('Custom threshold')
-    expect(wrapper.find('.section-after').text()).toBe('After section')
-    expect(wrapper.find('input').exists()).toBe(false)
-  })
-
-  it('keeps FormSection whole-section slot forwarding', () => {
-    const builder = useFormBuilder(schema)
-    const section = schema.sections[0]
-
-    const wrapper = mount(FormSection, {
-      props: {
-        section,
-        builder,
-      },
-      slots: {
-        'section:parameters': '<div class="custom-section">Custom section</div>',
-      },
-    })
-
-    expect(wrapper.find('.custom-section').text()).toBe('Custom section')
-    expect(wrapper.text()).not.toContain('Threshold')
-  })
-})

package/src/__tests__/components/GroupingModal.test.ts

@@ -1,73 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
-import GroupingModal from '../../components/GroupingModal.vue'
-import type { AutoGroupResult } from '../../types/auto-group'
-
-function mountLegacyModal() {
-  return mount(GroupingModal, {
-    props: {
-      open: true,
-      samples: ['CTRL_1', 'CTRL_2', 'DRUG_1'],
-    },
-    global: {
-      stubs: {
-        AutoGroupModal: {
-          name: 'AutoGroupModal',
-          props: ['modelValue', 'samples'],
-          emits: ['update:modelValue', 'apply'],
-          template: '<div data-testid="auto-group-modal" />',
-        },
-      },
-    },
-  })
-}
-
-describe('GroupingModal', () => {
-  it('forwards legacy open and samples props to AutoGroupModal', () => {
-    const wrapper = mountLegacyModal()
-    const modal = wrapper.getComponent({ name: 'AutoGroupModal' })
-
-    expect(modal.props('modelValue')).toBe(true)
-    expect(modal.props('samples')).toEqual(['CTRL_1', 'CTRL_2', 'DRUG_1'])
-  })
-
-  it('maps AutoGroupResult apply payloads to the legacy mapping format', async () => {
-    const wrapper = mountLegacyModal()
-    const modal = wrapper.getComponent({ name: 'AutoGroupModal' })
-    const result: AutoGroupResult = {
-      groups: [
-        { name: 'CTRL', color: '#3B82F6', samples: ['CTRL_1', 'CTRL_2'] },
-        { name: 'DRUG', color: '#10B981', samples: ['DRUG_1'] },
-      ],
-      metadata: [
-        { sampleName: 'CTRL_1', fields: { Condition: 'CTRL', Replicate: '1' }, group: 'CTRL' },
-        { sampleName: 'DRUG_1', fields: { Condition: 'DRUG', Replicate: '1' }, group: 'DRUG' },
-      ],
-      excludedSamples: [],
-    }
-
-    await modal.vm.$emit('apply', result)
-    await modal.vm.$emit('update:modelValue', false)
-
-    expect(wrapper.emitted('apply')).toEqual([
-      [
-        {
-          CTRL: ['CTRL_1', 'CTRL_2'],
-          DRUG: ['DRUG_1'],
-        },
-        ['Condition', 'Replicate'],
-      ],
-    ])
-    expect(wrapper.emitted('close')).toHaveLength(1)
-  })
-
-  it('emits close when the wrapped modal closes without apply', async () => {
-    const wrapper = mountLegacyModal()
-    const modal = wrapper.getComponent({ name: 'AutoGroupModal' })
-
-    await modal.vm.$emit('update:modelValue', false)
-
-    expect(wrapper.emitted('close')).toHaveLength(1)
-    expect(wrapper.emitted('apply')).toBeUndefined()
-  })
-})

package/src/__tests__/components/SettingsButton.test.ts

@@ -1,44 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { afterEach, describe, expect, it } from 'vitest'
-import SettingsButton from '../../components/SettingsButton.vue'
-
-describe('SettingsButton', () => {
-  afterEach(() => {
-    document.body.innerHTML = ''
-  })
-
-  it('toggles the settings dropdown and emits click events', async () => {
-    const wrapper = mount(SettingsButton, {
-      slots: {
-        default: '<div class="settings-content">Settings</div>',
-      },
-      attachTo: document.body,
-    })
-
-    expect(wrapper.find('.mint-settings-dropdown').isVisible()).toBe(false)
-    expect(wrapper.find('.mint-icon-button').attributes('aria-label')).toBe('Settings')
-
-    await wrapper.find('.mint-settings-button__trigger').trigger('click')
-
-    expect(wrapper.find('.mint-settings-dropdown').isVisible()).toBe(true)
-    expect(wrapper.emitted('click')).toHaveLength(1)
-    expect(wrapper.find('.mint-settings-button__trigger').classes()).toContain('mint-icon-button')
-
-    wrapper.unmount()
-  })
-
-  it('closes on outside click while keeping Escape behavior unchanged', async () => {
-    const wrapper = mount(SettingsButton, { attachTo: document.body })
-
-    await wrapper.find('.mint-settings-button__trigger').trigger('click')
-    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
-    await wrapper.vm.$nextTick()
-    expect(wrapper.find('.mint-settings-dropdown').isVisible()).toBe(true)
-
-    document.body.click()
-    await wrapper.vm.$nextTick()
-    expect(wrapper.find('.mint-settings-dropdown').isVisible()).toBe(false)
-
-    wrapper.unmount()
-  })
-})

package/src/__tests__/composables/usePluginApi.test.ts

@@ -1,81 +0,0 @@
-/**
- * Tests for usePluginApi.
- *
- * Exercises the baseUrl resolution priority that every plugin relies on:
- *   1. VITE_API_PREFIX (build-time env override)
- *   2. fallbackPrefix option (plugin's route prefix)
- *   3. '/api' default
- *
- * The SDK-wide axios client is a singleton, so these tests stub axios
- * with a MockAdapter-style approach via vi.spyOn to observe the
- * baseURL actually used at request time.
- */
-
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { createPinia, setActivePinia } from 'pinia'
-import axios, { type AxiosRequestConfig } from 'axios'
-
-import { usePluginApi } from '../../composables/usePluginApi'
-
-// Spy on axios create so each test starts with a fresh instance hook
-// and we can observe request configs.
-describe('usePluginApi', () => {
-  let requestConfigs: AxiosRequestConfig[] = []
-
-  beforeEach(() => {
-    setActivePinia(createPinia())
-    requestConfigs = []
-    // Intercept axios.get on the shared instance
-    vi.spyOn(axios.Axios.prototype, 'get').mockImplementation(async function (
-      this: unknown,
-      url: string,
-      config?: AxiosRequestConfig,
-    ) {
-      requestConfigs.push({ url, ...config })
-      return { data: { called: url, baseURL: config?.baseURL } }
-    })
-  })
-
-  afterEach(() => {
-    vi.restoreAllMocks()
-    vi.unstubAllEnvs()
-  })
-
-  it('uses fallbackPrefix when no env override', async () => {
-    const api = usePluginApi({ fallbackPrefix: '/api/drp' })
-    await api.get('/sessions')
-    expect(requestConfigs).toHaveLength(1)
-    expect(requestConfigs[0]!.baseURL).toBe('/api/drp')
-  })
-
-  it('falls back to /api when neither env nor fallback provided', async () => {
-    const api = usePluginApi()
-    await api.get('/health')
-    expect(requestConfigs[0]!.baseURL).toBe('/api')
-  })
-
-  it('VITE_API_PREFIX env var overrides fallbackPrefix', async () => {
-    vi.stubEnv('VITE_API_PREFIX', '/api/override')
-    const api = usePluginApi({ fallbackPrefix: '/api/drp' })
-    await api.get('/check')
-    expect(requestConfigs[0]!.baseURL).toBe('/api/override')
-  })
-
-  it('empty VITE_API_PREFIX env var falls through to fallback', async () => {
-    vi.stubEnv('VITE_API_PREFIX', '')
-    const api = usePluginApi({ fallbackPrefix: '/api/drp' })
-    await api.get('/check')
-    expect(requestConfigs[0]!.baseURL).toBe('/api/drp')
-  })
-
-  it('returns a client with all CRUD methods', () => {
-    const api = usePluginApi({ fallbackPrefix: '/api/drp' })
-    expect(typeof api.get).toBe('function')
-    expect(typeof api.post).toBe('function')
-    expect(typeof api.put).toBe('function')
-    expect(typeof api.patch).toBe('function')
-    expect(typeof api.delete).toBe('function')
-    expect(typeof api.upload).toBe('function')
-    expect(typeof api.buildUrl).toBe('function')
-  })
-})

package/src/components/AppPillNav.vue

@@ -1,71 +0,0 @@
-<script setup lang="ts">
-/** Horizontal pill-style navigation bar that emits select events and supports href, router-link, or button items. */
-import { computed } from 'vue'
-import type { PillNavItem, PillNavItemInput } from '../types/components'
-import { normalizeItemInput } from '../utils/items'
-import ActionItem from './ActionItem.vue'
-
-interface Props {
-  items: PillNavItemInput[]
-  currentItemId?: string
-}
-
-const props = defineProps<Props>()
-
-const emit = defineEmits<{
-  select: [item: PillNavItem]
-}>()
-
-const normalizedItems = computed<PillNavItem[]>(() => props.items.map(normalizeItemInput))
-
-function handleClick(item: PillNavItem) {
-  if (item.disabled) return
-  if (item.href || item.to) return
-  emit('select', item)
-}
-
-function isSvgIcon(icon: PillNavItem['icon']): icon is string | string[] {
-  if (!icon) return false
-  return Array.isArray(icon) || icon.startsWith('M') || icon.startsWith('m')
-}
-</script>
-
-<template>
-  <nav class="mint-pill-nav" aria-label="Primary">
-    <ActionItem
-      v-for="item in normalizedItems"
-      :key="item.id"
-      :href="item.href"
-      :to="item.to"
-      :disabled="item.disabled"
-      :class="[
-        'mint-pill-nav__item',
-        { 'mint-pill-nav__item--active': item.id === currentItemId },
-        { 'mint-pill-nav__item--disabled': item.disabled },
-      ]"
-      @click="handleClick(item)"
-    >
-      <svg
-        v-if="isSvgIcon(item.icon)"
-        class="mint-pill-nav__icon"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        aria-hidden="true"
-      >
-        <template v-if="Array.isArray(item.icon)">
-          <path v-for="(d, index) in item.icon" :key="index" :d="d" />
-        </template>
-        <path v-else :d="item.icon" />
-      </svg>
-      {{ item.label }}
-    </ActionItem>
-  </nav>
-</template>
-
-<style>
-@import '../styles/components/app-pill-nav.css';
-</style>

package/src/components/FormFieldRenderer.vue

@@ -1,35 +0,0 @@
-<script setup lang="ts">
-/**
- * @deprecated Use FormBuilder with schema/controls and field slots instead.
- *
- * Compatibility wrapper around the internal FormBuilder field renderer.
- */
-import type { FormFieldSchema } from '../types/form-builder'
-import type { UseFormReturn } from '../composables/useForm'
-import FormFieldRendererInternal from './internal/FormFieldRendererInternal.vue'
-
-interface Props {
-  field: FormFieldSchema
-  resolvedProps: Record<string, unknown>
-  form: UseFormReturn<Record<string, unknown>>
-}
-
-const props = defineProps<Props>()
-
-defineSlots<{
-  '`field:${field.name}`'?: (props: Record<string, unknown>) => unknown
-  [name: string]: ((props: Record<string, unknown>) => unknown) | undefined
-}>()
-</script>
-
-<template>
-  <FormFieldRendererInternal
-    :field="props.field"
-    :resolved-props="props.resolvedProps"
-    :form="props.form"
-  >
-    <template #[`field:${props.field.name}`]="slotProps">
-      <slot :name="`field:${props.field.name}`" v-bind="slotProps" />
-    </template>
-  </FormFieldRendererInternal>
-</template>

package/src/components/FormSection.vue

@@ -1,37 +0,0 @@
-<script setup lang="ts">
-/**
- * @deprecated Use FormBuilder with schema/controls and section slots instead.
- *
- * Compatibility wrapper around the internal FormBuilder section renderer.
- */
-import type { FormSectionSchema, UseFormBuilderReturn } from '../types/form-builder'
-import FormSectionRenderer from './internal/FormSectionRenderer.vue'
-
-interface Props {
-  section: FormSectionSchema
-  builder: UseFormBuilderReturn<Record<string, unknown>>
-}
-
-const props = defineProps<Props>()
-
-defineSlots<{
-  '`section:${section.id}`'?: (props: Record<string, unknown>) => unknown
-  '`field:${field.name}`'?: (props: Record<string, unknown>) => unknown
-  '`section:${section.id}:after`'?: (props: Record<string, unknown>) => unknown
-  [name: string]: ((props: Record<string, unknown>) => unknown) | undefined
-}>()
-</script>
-
-<template>
-  <FormSectionRenderer :section="props.section" :builder="props.builder">
-    <template #[`section:${props.section.id}`]="slotProps">
-      <slot :name="`section:${props.section.id}`" v-bind="slotProps" />
-    </template>
-    <template v-for="field in props.section.fields" :key="field.name" #[`field:${field.name}`]="slotProps">
-      <slot :name="`field:${field.name}`" v-bind="slotProps" />
-    </template>
-    <template #[`section:${props.section.id}:after`]="slotProps">
-      <slot :name="`section:${props.section.id}:after`" v-bind="slotProps" />
-    </template>
-  </FormSectionRenderer>
-</template>

package/src/components/GroupingModal.story.vue

@@ -1,52 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import GroupingModal from './GroupingModal.vue'
-
-const mockSamples = [
-  'CTRL_Rep1', 'CTRL_Rep2', 'CTRL_Rep3',
-  'TREAT_A_Rep1', 'TREAT_A_Rep2', 'TREAT_A_Rep3',
-  'TREAT_B_Rep1', 'TREAT_B_Rep2', 'TREAT_B_Rep3',
-]
-
-const isOpen = ref(false)
-</script>
-
-<template>
-  <Story title="Lab/Deprecated/GroupingModal">
-    <Variant title="Compatibility Preview">
-      <div style="padding: 2rem;">
-        <button
-          type="button"
-          style="
-            padding: 0.5rem 1rem;
-            background: var(--bg-card, #fff);
-            border: 1px solid var(--border-color, #e5e7eb);
-            border-radius: 0.375rem;
-            cursor: pointer;
-            font-size: 0.875rem;
-          "
-          @click="isOpen = true"
-        >
-          Open Legacy Grouping Modal
-        </button>
-        <GroupingModal
-          :open="isOpen"
-          :samples="mockSamples"
-          @close="isOpen = false"
-          @apply="(mapping, columns) => { console.log('Applied grouping:', mapping, columns); isOpen = false }"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Open by Default">
-      <div style="padding: 2rem;">
-        <GroupingModal
-          :open="true"
-          :samples="mockSamples"
-          @close="() => {}"
-          @apply="() => {}"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>

package/src/components/GroupingModal.vue

@@ -1,61 +0,0 @@
-<!-- @deprecated Use AutoGroupModal instead -->
-<script setup lang="ts">
-/** @deprecated Compatibility wrapper for the legacy CSV grouping API. Use AutoGroupModal instead. */
-import AutoGroupModal from './AutoGroupModal.vue'
-import type { AutoGroupResult } from '../types/auto-group'
-
-interface Props {
-  open: boolean
-  samples: string[]
-}
-
-defineProps<Props>()
-
-const emit = defineEmits<{
-  close: []
-  apply: [mapping: Record<string, string[]>, columns: string[]]
-}>()
-
-let closeEmittedFromApply = false
-
-function handleApply(result: AutoGroupResult) {
-  emit('apply', groupsToLegacyMapping(result), metadataColumns(result))
-  closeEmittedFromApply = true
-  emit('close')
-}
-
-function handleOpenChange(isOpen: boolean) {
-  if (isOpen) return
-  if (closeEmittedFromApply) {
-    closeEmittedFromApply = false
-    return
-  }
-  emit('close')
-}
-
-function groupsToLegacyMapping(result: AutoGroupResult): Record<string, string[]> {
-  return Object.fromEntries(result.groups.map(group => [group.name, group.samples]))
-}
-
-function metadataColumns(result: AutoGroupResult): string[] {
-  const columns: string[] = []
-  const seen = new Set<string>()
-  for (const row of result.metadata) {
-    for (const column of Object.keys(row.fields)) {
-      if (seen.has(column)) continue
-      seen.add(column)
-      columns.push(column)
-    }
-  }
-  return columns
-}
-</script>
-
-<template>
-  <AutoGroupModal
-    :model-value="open"
-    :samples="samples"
-    @update:model-value="handleOpenChange"
-    @apply="handleApply"
-  />
-</template>

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/Deprecated/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,64 +0,0 @@
-<script setup lang="ts">
-/** @deprecated Use AppTopBar settingsConfig or SettingsModal instead. */
-import { useDropdownState } from '../composables/useDropdownState'
-import IconButton from './IconButton.vue'
-
-interface Props {
-  size?: 'sm' | 'md' | 'lg'
-}
-
-withDefaults(defineProps<Props>(), {
-  size: 'md',
-})
-
-const emit = defineEmits<{
-  click: [event: MouseEvent]
-}>()
-
-const { isOpen, rootRef, toggle: toggleDropdown } = useDropdownState({
-  closeOnEscape: false,
-})
-
-function toggle(event: MouseEvent) {
-  toggleDropdown()
-  emit('click', event)
-}
-</script>
-
-<template>
-  <div ref="rootRef" class="mint-settings-button">
-    <IconButton
-      class="mint-settings-button__trigger"
-      label="Settings"
-      variant="ghost"
-      :size="size"
-      @click.stop="toggle"
-    >
-      <!-- Settings/Gear icon -->
-      <svg
-        class="mint-settings-button__icon"
-        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>
-    </IconButton>
-
-    <!-- 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>