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

package/src/components/BasePill.story.vue

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

@@ -1,89 +0,0 @@
-<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="[
-      'mint-pill',
-      `mint-pill--${variant}`,
-      color && `mint-pill--${color}`,
-      `mint-pill--${size}`,
-      { 'mint-pill--disabled': disabled, 'mint-pill--with-icon': icon },
-    ]"
-  >
-    <span v-if="icon" class="mint-pill__icon">
-      <slot name="icon" />
-    </span>
-    <span class="mint-pill__label">
-      <slot />
-    </span>
-    <button
-      v-if="removable && !disabled"
-      type="button"
-      class="mint-pill__remove"
-      aria-label="Remove"
-      @click="handleRemove"
-    >
-      <svg class="mint-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>

package/src/components/BaseRadioGroup.story.vue

@@ -1,145 +0,0 @@
-<script setup lang="ts">
-import BaseRadioGroup from './BaseRadioGroup.vue'
-import type { RadioOption } from '../types'
-
-const sizes = ['sm', 'md', 'lg'] as const
-const directions = ['vertical', 'horizontal'] as const
-
-const basicOptions: RadioOption[] = [
-  { value: 'option1', label: 'Option 1' },
-  { value: 'option2', label: 'Option 2' },
-  { value: 'option3', label: 'Option 3' },
-]
-
-const analysisOptions: RadioOption[] = [
-  { value: 'dose_response', label: 'Dose-Response', description: 'Fit dose-response curves to your data' },
-  { value: 'kinetics', label: 'Kinetics', description: 'Analyze time-dependent reactions' },
-  { value: 'endpoint', label: 'Endpoint', description: 'Single-timepoint measurement analysis' },
-  { value: 'custom', label: 'Custom', description: 'Define your own analysis pipeline', disabled: true },
-]
-
-const tileOptions: RadioOption[] = [
-  {
-    value: 'standard',
-    label: 'Standard analysis',
-    description: 'Peak picking, alignment, compound ID. ~2 min per 96-well run.',
-  },
-  {
-    value: 'extended',
-    label: 'Extended analysis',
-    description: 'Adds isotope pattern verification and QC outlier detection. ~8 min per run.',
-  },
-  {
-    value: 'deep',
-    label: 'Deep analysis',
-    description: 'Full annotation against HMDB, formula prediction, fragmentation scoring. ~20 min per run.',
-  },
-]
-</script>
-
-<template>
-  <Story title="Base Inputs/BaseRadioGroup">
-    <Variant title="Playground">
-      <template #default="{ state }">
-        <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
-          <BaseRadioGroup
-            v-model="state.value"
-            :options="basicOptions"
-            :name="'playground-radio'"
-            :disabled="state.disabled"
-            :direction="state.direction"
-            :size="state.size"
-          />
-          <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
-            Value: <code>{{ JSON.stringify(state.value) }}</code>
-          </p>
-        </div>
-      </template>
-
-      <template #controls="{ state }">
-        <HstSelect
-          v-model="state.size"
-          title="Size"
-          :options="sizes.map(s => ({ label: s, value: s }))"
-        />
-        <HstSelect
-          v-model="state.direction"
-          title="Direction"
-          :options="directions.map(d => ({ label: d, value: d }))"
-        />
-        <HstCheckbox v-model="state.disabled" title="Disabled" />
-      </template>
-    </Variant>
-
-    <Variant title="Vertical (Default)">
-      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
-        <BaseRadioGroup
-          model-value="option1"
-          :options="basicOptions"
-          name="vertical-demo"
-          direction="vertical"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Horizontal">
-      <div style="padding: 2rem;">
-        <BaseRadioGroup
-          model-value="option2"
-          :options="basicOptions"
-          name="horizontal-demo"
-          direction="horizontal"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="With Descriptions">
-      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
-        <BaseRadioGroup
-          model-value="dose_response"
-          :options="analysisOptions"
-          name="analysis-type"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Sizes">
-      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 2rem;">
-        <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>
-          <BaseRadioGroup
-            model-value="option1"
-            :options="basicOptions"
-            :name="`size-${size}`"
-            :size="size"
-            direction="horizontal"
-          />
-        </div>
-      </div>
-    </Variant>
-
-    <Variant title="Disabled">
-      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
-        <BaseRadioGroup
-          model-value="option2"
-          :options="basicOptions"
-          name="disabled-demo"
-          disabled
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Card Tile variant">
-      <div style="padding: 2rem; max-width: 600px;">
-        <BaseRadioGroup
-          model-value="standard"
-          variant="tile"
-          :options="tileOptions"
-          name="tile-demo"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>

package/src/components/BaseRadioGroup.vue

@@ -1,128 +0,0 @@
-<script setup lang="ts">
-/** Renders a group of radio buttons in list or tile layout, horizontal or vertical. */
-import { computed } from 'vue'
-import type { RadioOption, RadioOptionInput } from '../types'
-import { normalizeOptionInput } from '../utils/options'
-
-interface Props {
-  modelValue?: string | number
-  options: RadioOptionInput[]
-  name: string
-  disabled?: boolean
-  direction?: 'horizontal' | 'vertical'
-  size?: 'sm' | 'md' | 'lg'
-  variant?: 'list' | 'tile'
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  disabled: false,
-  direction: 'vertical',
-  size: 'md',
-  variant: 'list',
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string | number]
-}>()
-
-const normalizedOptions = computed<RadioOption[]>(() => props.options.map(normalizeOptionInput))
-
-function handleChange(value: string | number) {
-  emit('update:modelValue', value)
-}
-</script>
-
-<template>
-  <div
-    :class="['mint-radio-group', `mint-radio-group--${props.direction}`, `mint-radio-group--${props.variant}`]"
-    role="radiogroup"
-  >
-    <label
-      v-for="option in normalizedOptions"
-      :key="String(option.value)"
-      :class="[
-        'mint-radio-option',
-        props.modelValue === option.value ? 'mint-radio-option--selected' : '',
-        (props.disabled || option.disabled) ? 'mint-radio-option--disabled' : '',
-      ]"
-    >
-      <template v-if="props.variant === 'list'">
-        <div :class="['mint-radio-option__input-wrapper', `mint-radio-option__input-wrapper--${props.size}`]">
-          <input
-            type="radio"
-            :name="props.name"
-            :value="option.value"
-            :checked="props.modelValue === option.value"
-            :disabled="props.disabled || option.disabled"
-            :aria-describedby="option.description ? `${props.name}-${option.value}-desc` : undefined"
-            class="mint-radio-option__native"
-            @change="handleChange(option.value)"
-          />
-          <div
-            :class="[
-              'mint-radio-option__circle',
-              `mint-radio-option__circle--${props.size}`,
-              props.modelValue === option.value ? 'mint-radio-option__circle--checked' : '',
-            ]"
-          >
-            <div
-              v-if="props.modelValue === option.value"
-              :class="['mint-radio-option__dot', `mint-radio-option__dot--${props.size}`]"
-            />
-          </div>
-        </div>
-        <div class="mint-radio-option__content">
-          <span :class="['mint-radio-option__label', `mint-radio-option__label--${props.size}`]">
-            {{ option.label }}
-          </span>
-          <span
-            v-if="option.description"
-            :id="`${props.name}-${option.value}-desc`"
-            :class="['mint-radio-option__description', `mint-radio-option__description--${props.size}`]"
-          >
-            {{ option.description }}
-          </span>
-        </div>
-      </template>
-
-      <template v-else>
-        <input
-          type="radio"
-          :name="props.name"
-          :value="option.value"
-          :checked="props.modelValue === option.value"
-          :disabled="props.disabled || option.disabled"
-          :aria-describedby="option.description ? `${props.name}-${option.value}-desc` : undefined"
-          class="mint-radio-option__native"
-          @change="handleChange(option.value)"
-        />
-        <div class="mint-radio-option__head">
-          <div
-            :class="[
-              'mint-radio-option__circle',
-              `mint-radio-option__circle--${props.size}`,
-              props.modelValue === option.value ? 'mint-radio-option__circle--checked' : '',
-            ]"
-          >
-            <div
-              v-if="props.modelValue === option.value"
-              :class="['mint-radio-option__dot', `mint-radio-option__dot--${props.size}`]"
-            />
-          </div>
-          <span class="mint-radio-option__title">{{ option.label }}</span>
-        </div>
-        <span
-          v-if="option.description"
-          :id="`${props.name}-${option.value}-desc`"
-          class="mint-radio-option__description"
-        >
-          {{ option.description }}
-        </span>
-      </template>
-    </label>
-  </div>
-</template>
-
-<style>
-@import '../styles/components/radio-group.css';
-</style>

package/src/components/BaseSelect.story.vue

@@ -1,120 +0,0 @@
-<script setup lang="ts">
-import BaseSelect from './BaseSelect.vue'
-import type { SelectOption } from '../types'
-
-const sizes = ['sm', 'md', 'lg'] as const
-
-const fruitOptions: SelectOption<string>[] = [
-  { value: 'apple', label: 'Apple' },
-  { value: 'banana', label: 'Banana' },
-  { value: 'cherry', label: 'Cherry' },
-  { value: 'date', label: 'Date' },
-  { value: 'elderberry', label: 'Elderberry', disabled: true },
-]
-
-const numericOptions: SelectOption<number>[] = [
-  { value: 6, label: '6-well' },
-  { value: 12, label: '12-well' },
-  { value: 24, label: '24-well' },
-  { value: 48, label: '48-well' },
-  { value: 96, label: '96-well' },
-  { value: 384, label: '384-well' },
-]
-
-function initPlayground() {
-  return {
-    value: 'apple',
-    placeholder: 'Select a fruit',
-    size: 'md' as const,
-    disabled: false,
-    error: false,
-  }
-}
-</script>
-
-<template>
-  <Story title="Base Inputs/BaseSelect">
-    <Variant title="Playground" :init-state="initPlayground">
-      <template #default="{ state }">
-        <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
-          <BaseSelect
-            v-model="state.value"
-            :options="fruitOptions"
-            :placeholder="state.placeholder"
-            :disabled="state.disabled"
-            :error="state.error"
-            :size="state.size"
-          />
-          <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
-            Value: <code>{{ JSON.stringify(state.value) }}</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" />
-      </template>
-    </Variant>
-
-    <Variant title="Sizes">
-      <div style="padding: 2rem; max-width: 400px; 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>
-          <BaseSelect
-            :options="fruitOptions"
-            :size="size"
-            placeholder="Select a fruit..."
-          />
-        </div>
-      </div>
-    </Variant>
-
-    <Variant title="Numeric Values">
-      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
-        <BaseSelect
-          :options="numericOptions"
-          :model-value="96"
-          placeholder="Select plate format..."
-        />
-      </div>
-    </Variant>
-
-    <Variant title="With Disabled Option">
-      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
-        <BaseSelect
-          :options="fruitOptions"
-          placeholder="Some options are disabled..."
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Error State">
-      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
-        <BaseSelect
-          :options="fruitOptions"
-          placeholder="Select a fruit..."
-          error
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Disabled">
-      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
-        <BaseSelect
-          :options="fruitOptions"
-          model-value="banana"
-          disabled
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>