@morscherlab/mint-sdk 1.0.0-alpha.2

package/src/components/BaseModal.story.vue

@@ -0,0 +1,237 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import BaseModal from './BaseModal.vue'
+import BaseButton from './BaseButton.vue'
+import type { ModalSize } from '../types'
+
+const modalSizes: ModalSize[] = ['sm', 'md', 'lg', 'xl', 'full']
+const galleryOpen = ref<Record<string, boolean>>({
+  sm: false,
+  md: false,
+  lg: false,
+  xl: false,
+  full: false,
+  noClose: false,
+  footer: false,
+})
+
+const refreshOpen = ref(false)
+const subtitleOpen = ref(false)
+const drawerOpen = ref(false)
+const sheetOpen = ref(false)
+</script>
+
+<template>
+  <Story title="Base Inputs/BaseModal">
+    <Variant title="Refresh · Confirm uninstall">
+      <div style="padding: 2rem; display: flex; justify-content: center;">
+        <BaseButton variant="secondary" @click="refreshOpen = true">
+          Open confirm dialog
+        </BaseButton>
+        <BaseModal
+          v-model="refreshOpen"
+          title="Confirm uninstall"
+          subtitle="mld-plugin-metabolomics · v2.4.1"
+          size="md"
+        >
+          Removing this plugin will delete its routes from the platform on next restart.
+          Plugin data and registered experiment types will be preserved.
+          <template #footer>
+            <BaseButton variant="secondary" @click="refreshOpen = false">Cancel</BaseButton>
+            <BaseButton variant="danger" @click="refreshOpen = false">Uninstall</BaseButton>
+          </template>
+        </BaseModal>
+      </div>
+    </Variant>
+
+    <Variant title="Refresh · Title + subtitle">
+      <div style="padding: 2rem; display: flex; justify-content: center;">
+        <BaseButton variant="secondary" @click="subtitleOpen = true">
+          Open with subtitle
+        </BaseButton>
+        <BaseModal
+          v-model="subtitleOpen"
+          title="Experiment context"
+          subtitle="EXP-B24-104 · Plasma metabolite quant — cohort 7"
+          size="md"
+        >
+          Use this dialog pattern when the title needs a secondary descriptor
+          (IDs, versions, paths). The subtitle renders under the title in
+          muted text.
+          <template #footer>
+            <BaseButton variant="secondary" @click="subtitleOpen = false">Close</BaseButton>
+          </template>
+        </BaseModal>
+      </div>
+    </Variant>
+
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
+          <BaseButton @click="state.open = true">
+            Open Modal
+          </BaseButton>
+          <BaseModal
+            v-model="state.open"
+            :title="state.title"
+            :size="state.size"
+            :closable="state.closable"
+            :close-on-overlay="state.closeOnOverlay"
+            :close-on-escape="state.closeOnEscape"
+          >
+            <p style="margin: 0; color: var(--text-primary, #e2e8f0);">
+              This is the modal body content. You can put any content here.
+            </p>
+            <template #footer>
+              <div style="display: flex; gap: 0.5rem; justify-content: flex-end;">
+                <BaseButton variant="secondary" @click="state.open = false">Cancel</BaseButton>
+                <BaseButton variant="primary" @click="state.open = false">Confirm</BaseButton>
+              </div>
+            </template>
+          </BaseModal>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.title" title="Title" />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="modalSizes.map(s => ({ label: s, value: s }))"
+        />
+        <HstCheckbox v-model="state.closable" title="Closable" />
+        <HstCheckbox v-model="state.closeOnOverlay" title="Close on Overlay" />
+        <HstCheckbox v-model="state.closeOnEscape" title="Close on Escape" />
+      </template>
+    </Variant>
+
+    <Variant title="All Sizes">
+      <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem;">
+        <BaseButton
+          v-for="size in modalSizes"
+          :key="size"
+          variant="secondary"
+          @click="galleryOpen[size] = true"
+        >
+          {{ size }}
+        </BaseButton>
+
+        <BaseModal
+          v-for="size in modalSizes"
+          :key="size"
+          v-model="galleryOpen[size]"
+          :title="`${size.toUpperCase()} Modal`"
+          :size="size"
+        >
+          <p style="margin: 0; color: var(--text-primary, #e2e8f0);">
+            This is a <strong>{{ size }}</strong> sized modal.
+          </p>
+        </BaseModal>
+      </div>
+    </Variant>
+
+    <Variant title="With Footer">
+      <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
+        <BaseButton @click="galleryOpen.footer = true">Open with Footer</BaseButton>
+        <BaseModal v-model="galleryOpen.footer" title="Confirm Action" size="sm">
+          <p style="margin: 0; color: var(--text-primary, #e2e8f0);">
+            Are you sure you want to proceed with this action?
+          </p>
+          <template #footer>
+            <div style="display: flex; gap: 0.5rem; justify-content: flex-end;">
+              <BaseButton variant="secondary" @click="galleryOpen.footer = false">Cancel</BaseButton>
+              <BaseButton variant="danger" @click="galleryOpen.footer = false">Delete</BaseButton>
+            </div>
+          </template>
+        </BaseModal>
+      </div>
+    </Variant>
+
+    <Variant title="Not Closable">
+      <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
+        <BaseButton @click="galleryOpen.noClose = true">Open Non-Closable</BaseButton>
+        <BaseModal
+          v-model="galleryOpen.noClose"
+          title="Processing..."
+          size="sm"
+          :closable="false"
+          :close-on-overlay="false"
+          :close-on-escape="false"
+        >
+          <p style="margin: 0; color: var(--text-primary, #e2e8f0);">
+            Please wait while we process your request. This modal cannot be dismissed.
+          </p>
+          <template #footer>
+            <div style="display: flex; justify-content: flex-end;">
+              <BaseButton variant="primary" @click="galleryOpen.noClose = false">Force Close (demo)</BaseButton>
+            </div>
+          </template>
+        </BaseModal>
+      </div>
+    </Variant>
+    <Variant title="Drawer variant — right-edge detail panel">
+      <div style="padding: 2rem;">
+        <button
+          type="button"
+          style="padding: 0.5rem 1rem; border-radius: 0.375rem; background: var(--color-primary); color: white; border: none; cursor: pointer;"
+          @click="drawerOpen = true"
+        >
+          Open drawer
+        </button>
+        <p style="margin: 1rem 0 0; font-size: 0.8125rem; color: var(--text-muted);">
+          Slides in from the right edge. Fills viewport height. For detail panels that shouldn't take over the page.
+        </p>
+      </div>
+
+      <BaseModal v-model="drawerOpen" variant="drawer" size="md" title="Sample PLT-001 · Well A3" subtitle="Peak metadata">
+        <div style="display: flex; flex-direction: column; gap: 1rem;">
+          <div>
+            <p style="margin: 0 0 0.25rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary);">m/z</p>
+            <p style="margin: 0; font-family: var(--font-mono); font-size: 0.875rem;">180.0634</p>
+          </div>
+          <div>
+            <p style="margin: 0 0 0.25rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary);">Retention time</p>
+            <p style="margin: 0; font-family: var(--font-mono); font-size: 0.875rem;">3.42 min</p>
+          </div>
+          <div>
+            <p style="margin: 0 0 0.25rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary);">Annotation</p>
+            <p style="margin: 0; font-size: 0.875rem;">D-Glucose (HMDB0000122) · confidence 0.92</p>
+          </div>
+          <div>
+            <p style="margin: 0 0 0.25rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary);">Intensity</p>
+            <p style="margin: 0; font-family: var(--font-mono); font-size: 0.875rem;">1.28 × 10⁶</p>
+          </div>
+        </div>
+        <template #footer>
+          <button type="button" style="padding: 0.375rem 0.875rem; border-radius: 0.375rem; background: var(--color-primary); color: white; border: none; cursor: pointer;" @click="drawerOpen = false">Close</button>
+        </template>
+      </BaseModal>
+    </Variant>
+
+    <Variant title="Sheet variant — mobile-friendly bottom sheet">
+      <div style="padding: 2rem;">
+        <button
+          type="button"
+          style="padding: 0.5rem 1rem; border-radius: 0.375rem; background: var(--color-primary); color: white; border: none; cursor: pointer;"
+          @click="sheetOpen = true"
+        >
+          Open sheet
+        </button>
+        <p style="margin: 1rem 0 0; font-size: 0.8125rem; color: var(--text-muted);">
+          Slides up from the bottom. Top corners rounded. Grab-hint bar at top. Auto-used on &lt;768px viewports regardless of caller's variant.
+        </p>
+      </div>
+
+      <BaseModal v-model="sheetOpen" variant="sheet" size="md" title="Apply to 12 selected wells?">
+        <p style="margin: 0; font-size: 0.875rem; color: var(--text-secondary); line-height: 1.55;">
+          This will set the treatment condition for wells B2–B7, C2–C7 to
+          <strong>Compound X · 10 µM · 24h</strong>. The change applies immediately and can be undone within 10 seconds.
+        </p>
+        <template #footer>
+          <button type="button" style="padding: 0.375rem 0.875rem; border-radius: 0.375rem; background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-color); cursor: pointer;" @click="sheetOpen = false">Cancel</button>
+          <button type="button" style="padding: 0.375rem 0.875rem; border-radius: 0.375rem; background: var(--color-primary); color: white; border: none; cursor: pointer;" @click="sheetOpen = false">Apply</button>
+        </template>
+      </BaseModal>
+    </Variant>
+  </Story>
+</template>

package/src/components/BaseModal.vue

@@ -0,0 +1,182 @@
+<script setup lang="ts">
+/** Modal dialog with backdrop, focus trap, Escape-to-close, and configurable size/variant. */
+import { ref, watch, nextTick, onMounted, onUnmounted } from 'vue'
+import type { ModalSize, ModalVariant } from '../types'
+
+interface Props {
+  modelValue: boolean
+  title?: string
+  subtitle?: string
+  size?: ModalSize
+  variant?: ModalVariant
+  closable?: boolean
+  closeOnOverlay?: boolean
+  closeOnEscape?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'md',
+  variant: 'centered',
+  closable: true,
+  closeOnOverlay: false,
+  closeOnEscape: true,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  close: []
+}>()
+
+const containerRef = ref<HTMLElement | null>(null)
+let previouslyFocused: HTMLElement | null = null
+
+const FOCUSABLE_SELECTOR = [
+  'a[href]',
+  'button:not([disabled])',
+  'input:not([disabled])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+].join(', ')
+
+function getFocusableElements(): HTMLElement[] {
+  if (!containerRef.value) return []
+  return Array.from(containerRef.value.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR))
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape' && props.closeOnEscape && props.modelValue) {
+    close()
+    return
+  }
+
+  if (event.key !== 'Tab' || !containerRef.value) return
+
+  const focusable = getFocusableElements()
+  if (focusable.length === 0) {
+    event.preventDefault()
+    return
+  }
+
+  const first = focusable[0]
+  const last = focusable[focusable.length - 1]
+
+  if (event.shiftKey && document.activeElement === first) {
+    event.preventDefault()
+    last.focus()
+  } else if (!event.shiftKey && document.activeElement === last) {
+    event.preventDefault()
+    first.focus()
+  }
+}
+
+function close() {
+  if (props.closable) {
+    emit('update:modelValue', false)
+    emit('close')
+  }
+}
+
+function handleOverlayClick(event: MouseEvent) {
+  if (props.closeOnOverlay && event.target === event.currentTarget) {
+    close()
+  }
+}
+
+watch(() => props.modelValue, async (isOpen) => {
+  if (isOpen) {
+    previouslyFocused = document.activeElement as HTMLElement | null
+    document.body.style.overflow = 'hidden'
+    await nextTick()
+    const focusable = getFocusableElements()
+    if (focusable.length > 0) {
+      focusable[0].focus()
+    } else {
+      containerRef.value?.focus()
+    }
+  } else {
+    document.body.style.overflow = ''
+    previouslyFocused?.focus()
+    previouslyFocused = null
+  }
+})
+
+onMounted(() => {
+  document.addEventListener('keydown', handleKeydown)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleKeydown)
+  document.body.style.overflow = ''
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition :name="`modal-${variant}`">
+      <div
+        v-if="modelValue"
+        :class="['mld-modal', `mld-modal--${variant}`]"
+        @click="handleOverlayClick"
+      >
+        <!-- Overlay -->
+        <div class="mld-modal__overlay" />
+
+        <!-- Modal -->
+        <div
+          ref="containerRef"
+          :class="[
+            'mld-modal__container',
+            `mld-modal__container--${size}`,
+            `mld-modal__container--${variant}`,
+          ]"
+          role="dialog"
+          aria-modal="true"
+          tabindex="-1"
+        >
+          <!-- Sheet grab-hint bar (sheet variant only) -->
+          <div v-if="variant === 'sheet'" class="mld-modal__grab-hint" aria-hidden="true" />
+
+          <!-- Header -->
+          <div v-if="title || subtitle || closable || $slots.header" class="mld-modal__header">
+            <div v-if="title || subtitle || $slots.header" class="mld-modal__header-text">
+              <slot name="header">
+                <h3 v-if="title" class="mld-modal__title">
+                  {{ title }}
+                </h3>
+                <p v-if="subtitle" class="mld-modal__subtitle">
+                  {{ subtitle }}
+                </p>
+              </slot>
+            </div>
+            <button
+              v-if="closable"
+              type="button"
+              class="mld-modal__close"
+              aria-label="Close modal"
+              @click="close"
+            >
+              <svg class="mld-modal__close-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>
+          </div>
+
+          <!-- Body -->
+          <div class="mld-modal__body">
+            <slot />
+          </div>
+
+          <!-- Footer -->
+          <div v-if="$slots.footer" class="mld-modal__footer">
+            <slot name="footer" />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style>
+@import '../styles/components/modal.css';
+</style>

package/src/components/BasePill.story.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import BasePill from './BasePill.vue'
+import type { PillVariant, PillSize } from '../types'
+
+const variants: PillVariant[] = ['default', 'primary', 'success', 'warning', 'error', 'info', 'outline']
+const sizes: PillSize[] = ['sm', 'md', 'lg']
+</script>
+
+<template>
+  <Story title="Feedback/BasePill">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
+          <BasePill
+            :variant="state.variant"
+            :size="state.size"
+            :removable="state.removable"
+            :disabled="state.disabled"
+            @remove="() => console.log('Remove clicked')"
+          >
+            {{ state.label }}
+          </BasePill>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.label" title="Label" />
+        <HstSelect
+          v-model="state.variant"
+          title="Variant"
+          :options="variants.map(v => ({ label: v, value: v }))"
+        />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="sizes.map(s => ({ label: s, value: s }))"
+        />
+        <HstCheckbox v-model="state.removable" title="Removable" />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+      </template>
+    </Variant>
+
+    <Variant title="All Variants">
+      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1.5rem;">
+        <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>
+          <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
+            <BasePill
+              v-for="variant in variants"
+              :key="variant"
+              :variant="variant"
+              :size="size"
+            >
+              {{ variant }}
+            </BasePill>
+          </div>
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Removable">
+      <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: center;">
+        <BasePill variant="primary" removable @remove="() => console.log('Removed')">
+          Sample A
+        </BasePill>
+        <BasePill variant="success" removable @remove="() => console.log('Removed')">
+          QC Passed
+        </BasePill>
+        <BasePill variant="warning" removable @remove="() => console.log('Removed')">
+          Review
+        </BasePill>
+        <BasePill variant="error" removable @remove="() => console.log('Removed')">
+          Failed
+        </BasePill>
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: center;">
+        <BasePill
+          v-for="variant in variants"
+          :key="variant"
+          :variant="variant"
+          disabled
+        >
+          {{ variant }}
+        </BasePill>
+      </div>
+    </Variant>
+
+    <Variant title="Practical Example - Tags">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <h3 style="margin: 0 0 0.75rem; color: var(--text-primary, #1e293b); font-size: 0.875rem; font-weight: 600;">
+          Experiment Tags
+        </h3>
+        <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
+          <BasePill variant="primary" removable>dose-response</BasePill>
+          <BasePill variant="info" removable>IC50</BasePill>
+          <BasePill variant="success" removable>validated</BasePill>
+          <BasePill variant="outline" removable>96-well</BasePill>
+          <BasePill variant="default" removable>oncology</BasePill>
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Practical Example - Status Labels">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <div style="display: flex; flex-direction: column; gap: 0.75rem;">
+          <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem;">
+            <span style="color: var(--text-primary, #1e293b); font-size: 0.875rem;">Plate PLT-001</span>
+            <BasePill variant="success" size="sm">Complete</BasePill>
+          </div>
+          <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem;">
+            <span style="color: var(--text-primary, #1e293b); font-size: 0.875rem;">Plate PLT-002</span>
+            <BasePill variant="warning" size="sm">In Progress</BasePill>
+          </div>
+          <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem;">
+            <span style="color: var(--text-primary, #1e293b); font-size: 0.875rem;">Plate PLT-003</span>
+            <BasePill variant="error" size="sm">Failed</BasePill>
+          </div>
+          <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem;">
+            <span style="color: var(--text-primary, #1e293b); font-size: 0.875rem;">Plate PLT-004</span>
+            <BasePill variant="default" size="sm">Pending</BasePill>
+          </div>
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Outline variant">
+      <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem;">
+        <BasePill variant="outline" color="neutral">Neutral</BasePill>
+        <BasePill variant="outline" color="primary">Primary</BasePill>
+        <BasePill variant="outline" color="success">Success</BasePill>
+        <BasePill variant="outline" color="warning">Warning</BasePill>
+        <BasePill variant="outline" color="error">Error</BasePill>
+        <BasePill variant="outline" color="info">Info</BasePill>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/BasePill.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+/** Compact label for tags, status indicators, and badges; supports removable and icon slots. */
+import type { PillVariant, PillColor, PillSize } from '../types'
+
+/**
+ * BasePill - Compact label component for tags, status indicators, and badges.
+ *
+ * @example
+ * ```vue
+ * <BasePill variant="success">Active</BasePill>
+ * <BasePill variant="warning" removable @remove="handleRemove">Tag</BasePill>
+ * <BasePill :icon="true">
+ *   <template #icon><CheckIcon /></template>
+ *   Verified
+ * </BasePill>
+ * ```
+ */
+interface Props {
+  /** Visual style variant */
+  variant?: PillVariant
+  /** Semantic color modifier — use with variant="outline" for colored outlines */
+  color?: PillColor
+  /** Size of the pill */
+  size?: PillSize
+  /** Show remove button */
+  removable?: boolean
+  /** Disable interaction */
+  disabled?: boolean
+  /** Show icon slot */
+  icon?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'default',
+  color: undefined,
+  size: 'md',
+  removable: false,
+  disabled: false,
+  icon: false,
+})
+
+/**
+ * @event remove - Emitted when the remove button is clicked
+ */
+const emit = defineEmits<{
+  remove: []
+}>()
+
+function handleRemove(event: MouseEvent) {
+  event.stopPropagation()
+  if (!props.disabled) {
+    emit('remove')
+  }
+}
+</script>
+
+<template>
+  <span
+    :class="[
+      'mld-pill',
+      `mld-pill--${variant}`,
+      color && `mld-pill--${color}`,
+      `mld-pill--${size}`,
+      { 'mld-pill--disabled': disabled, 'mld-pill--with-icon': icon },
+    ]"
+  >
+    <span v-if="icon" class="mld-pill__icon">
+      <slot name="icon" />
+    </span>
+    <span class="mld-pill__label">
+      <slot />
+    </span>
+    <button
+      v-if="removable && !disabled"
+      type="button"
+      class="mld-pill__remove"
+      aria-label="Remove"
+      @click="handleRemove"
+    >
+      <svg class="mld-pill__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>
+</template>
+
+<style>
+@import '../styles/components/pill.css';
+</style>