@morscherlab/mld-sdk 0.6.0

package/src/components/BaseTabs.story.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import BaseTabs from './BaseTabs.vue'
+import type { TabItem } from '../types'
+
+const activeTab = ref('overview')
+
+const basicTabs: TabItem[] = [
+  { id: 'overview', label: 'Overview' },
+  { id: 'samples', label: 'Samples' },
+  { id: 'results', label: 'Results' },
+  { id: 'settings', label: 'Settings' },
+]
+
+const tabsWithBadges: TabItem[] = [
+  { id: 'inbox', label: 'Inbox', badge: 12 },
+  { id: 'drafts', label: 'Drafts', badge: 3 },
+  { id: 'sent', label: 'Sent' },
+  { id: 'archive', label: 'Archive', disabled: true },
+]
+
+const tabsWithIcons: TabItem[] = [
+  { id: 'plate', label: 'Plate Map', icon: '\u{1F9EA}' },
+  { id: 'data', label: 'Raw Data', icon: '\u{1F4CA}' },
+  { id: 'analysis', label: 'Analysis', icon: '\u{1F52C}' },
+]
+
+const variants = ['underline', 'pills', 'bordered'] as const
+</script>
+
+<template>
+  <Story title="Base Inputs/BaseTabs">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem;">
+          <BaseTabs
+            v-model="state.activeTab"
+            :tabs="basicTabs"
+            :variant="state.variant"
+          />
+          <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+            Active tab: <code>{{ state.activeTab }}</code>
+          </p>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.variant"
+          title="Variant"
+          :options="variants.map(v => ({ label: v, value: v }))"
+        />
+        <HstSelect
+          v-model="state.activeTab"
+          title="Active Tab"
+          :options="basicTabs.map(t => ({ label: t.label, value: t.id }))"
+        />
+      </template>
+    </Variant>
+
+    <Variant title="All Variants">
+      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 2rem;">
+        <div v-for="variant in variants" :key="variant">
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
+            {{ variant }}
+          </p>
+          <BaseTabs
+            v-model="activeTab"
+            :tabs="basicTabs"
+            :variant="variant"
+          />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="With Badges">
+      <div style="padding: 2rem;">
+        <BaseTabs
+          model-value="inbox"
+          :tabs="tabsWithBadges"
+          variant="underline"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Icons">
+      <div style="padding: 2rem;">
+        <BaseTabs
+          model-value="plate"
+          :tabs="tabsWithIcons"
+          variant="pills"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Disabled Tab">
+      <div style="padding: 2rem;">
+        <BaseTabs
+          model-value="inbox"
+          :tabs="tabsWithBadges"
+          variant="bordered"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/BaseTabs.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { TabItem } from '../types'
+
+interface Props {
+  modelValue: string
+  tabs: TabItem[]
+  variant?: 'underline' | 'pills' | 'bordered'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'underline',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const activeTab = computed(() => props.modelValue)
+
+function selectTab(tabId: string) {
+  const tab = props.tabs.find(t => t.id === tabId)
+  if (tab && !tab.disabled) {
+    emit('update:modelValue', tabId)
+  }
+}
+</script>
+
+<template>
+  <div :class="['mld-tabs', `mld-tabs--${variant}`]" role="tablist">
+    <button
+      v-for="tab in tabs"
+      :key="tab.id"
+      type="button"
+      role="tab"
+      :aria-selected="activeTab === tab.id"
+      :aria-disabled="tab.disabled"
+      :class="[
+        'mld-tab',
+        activeTab === tab.id ? 'mld-tab--active' : '',
+        tab.disabled ? 'mld-tab--disabled' : '',
+      ]"
+      @click="selectTab(tab.id)"
+    >
+      <span class="mld-tab__content">
+        <span v-if="tab.icon" class="mld-tab__icon">{{ tab.icon }}</span>
+        {{ tab.label }}
+        <span v-if="tab.badge !== undefined" class="mld-tab__badge">
+          {{ tab.badge }}
+        </span>
+      </span>
+    </button>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/tabs.css';
+</style>

package/src/components/BaseTextarea.story.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import BaseTextarea from './BaseTextarea.vue'
+
+const sizes = ['sm', 'md', 'lg'] as const
+const resizeOptions = ['none', 'vertical', 'horizontal', 'both'] as const
+</script>
+
+<template>
+  <Story title="Base Inputs/BaseTextarea">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+          <BaseTextarea
+            v-model="state.value"
+            :placeholder="state.placeholder"
+            :disabled="state.disabled"
+            :readonly="state.readonly"
+            :error="state.error"
+            :size="state.size"
+            :rows="state.rows"
+            :resize="state.resize"
+            :maxlength="state.useMaxlength ? state.maxlength : undefined"
+          />
+          <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+            Value: <code>{{ JSON.stringify(state.value) }}</code>
+            <span v-if="state.useMaxlength"> ({{ (state.value || '').length }}/{{ state.maxlength }})</span>
+          </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 }))"
+        />
+        <HstSelect
+          v-model="state.resize"
+          title="Resize"
+          :options="resizeOptions.map(r => ({ label: r, value: r }))"
+        />
+        <HstSlider v-model="state.rows" title="Rows" :min="1" :max="20" />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+        <HstCheckbox v-model="state.readonly" title="Readonly" />
+        <HstCheckbox v-model="state.error" title="Error" />
+        <HstCheckbox v-model="state.useMaxlength" title="Use Maxlength" />
+        <HstSlider v-model="state.maxlength" title="Maxlength" :min="10" :max="500" />
+      </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>
+          <BaseTextarea :size="size" placeholder="Enter notes..." :rows="3" />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Error State">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <BaseTextarea
+          model-value="Invalid content"
+          error
+          placeholder="Something went wrong..."
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <BaseTextarea
+          model-value="This textarea is disabled and cannot be edited."
+          disabled
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Readonly">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <BaseTextarea
+          model-value="This content is readonly. You can select and copy but not edit."
+          readonly
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/BaseTextarea.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+interface Props {
+  modelValue?: string
+  placeholder?: string
+  disabled?: boolean
+  readonly?: boolean
+  error?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  rows?: number
+  resize?: 'none' | 'vertical' | 'horizontal' | 'both'
+  maxlength?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  readonly: false,
+  error: false,
+  size: 'md',
+  rows: 3,
+  resize: 'vertical',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  focus: [event: FocusEvent]
+  blur: [event: FocusEvent]
+}>()
+
+function handleInput(event: Event) {
+  const target = event.target as HTMLTextAreaElement
+  emit('update:modelValue', target.value)
+}
+</script>
+
+<template>
+  <textarea
+    :value="props.modelValue"
+    :placeholder="props.placeholder"
+    :disabled="props.disabled"
+    :readonly="props.readonly"
+    :rows="props.rows"
+    :maxlength="props.maxlength"
+    :class="[
+      'mld-textarea',
+      `mld-textarea--${props.size}`,
+      `mld-textarea--resize-${props.resize}`,
+      props.error ? 'mld-textarea--error' : '',
+      props.disabled ? 'mld-textarea--disabled' : '',
+    ]"
+    @input="handleInput"
+    @focus="emit('focus', $event)"
+    @blur="emit('blur', $event)"
+  />
+</template>
+
+<style>
+@import '../styles/components/textarea.css';
+</style>

package/src/components/BaseToggle.story.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import BaseToggle from './BaseToggle.vue'
+
+const sizes = ['sm', 'md', 'lg'] as const
+const toggleOn = ref(true)
+const toggleOff = ref(false)
+</script>
+
+<template>
+  <Story title="Base Inputs/BaseToggle">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem;">
+          <BaseToggle
+            v-model="state.value"
+            :label="state.label"
+            :disabled="state.disabled"
+            :size="state.size"
+          />
+          <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+            Value: <code>{{ state.value }}</code>
+          </p>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.label" title="Label" />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="sizes.map(s => ({ label: s, value: s }))"
+        />
+        <HstCheckbox v-model="state.value" title="Value" />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+      </template>
+    </Variant>
+
+    <Variant title="Sizes">
+      <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>
+          <BaseToggle v-model="toggleOn" :label="`${size} toggle`" :size="size" />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="On and Off States">
+      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1rem;">
+        <BaseToggle v-model="toggleOn" label="Toggle is ON" />
+        <BaseToggle v-model="toggleOff" label="Toggle is OFF" />
+      </div>
+    </Variant>
+
+    <Variant title="Without Label">
+      <div style="padding: 2rem; display: flex; gap: 1.5rem; align-items: center;">
+        <BaseToggle v-model="toggleOn" size="sm" />
+        <BaseToggle v-model="toggleOn" size="md" />
+        <BaseToggle v-model="toggleOn" size="lg" />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled States">
+      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1rem;">
+        <BaseToggle :model-value="false" label="Disabled (off)" disabled />
+        <BaseToggle :model-value="true" label="Disabled (on)" disabled />
+      </div>
+    </Variant>
+
+    <Variant title="Settings Example">
+      <div style="padding: 2rem; max-width: 400px; display: flex; flex-direction: column; gap: 1rem;">
+        <BaseToggle :model-value="true" label="Dark mode" />
+        <BaseToggle :model-value="true" label="Auto-save results" />
+        <BaseToggle :model-value="false" label="Show advanced options" />
+        <BaseToggle :model-value="false" label="Beta features" disabled />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/BaseToggle.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+interface Props {
+  modelValue?: boolean
+  label?: string
+  disabled?: boolean
+  size?: 'sm' | 'md' | 'lg'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  disabled: false,
+  size: 'md',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+function toggle() {
+  if (!props.disabled) {
+    emit('update:modelValue', !props.modelValue)
+  }
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === ' ' || event.key === 'Enter') {
+    event.preventDefault()
+    toggle()
+  }
+}
+</script>
+
+<template>
+  <div
+    :class="[
+      'mld-toggle',
+      disabled ? 'mld-toggle--disabled' : '',
+    ]"
+    @click="toggle"
+  >
+    <div
+      role="switch"
+      :tabindex="disabled ? -1 : 0"
+      :aria-checked="modelValue"
+      :aria-label="label || 'Toggle'"
+      :class="[
+        'mld-toggle__track',
+        `mld-toggle__track--${size}`,
+        modelValue ? 'mld-toggle__track--on' : 'mld-toggle__track--off',
+      ]"
+      @keydown="handleKeydown"
+    >
+      <span
+        :class="[
+          'mld-toggle__knob',
+          `mld-toggle__knob--${size}`,
+          modelValue ? `mld-toggle__knob--on-${size}` : 'mld-toggle__knob--off',
+        ]"
+      />
+    </div>
+    <span
+      v-if="label"
+      :class="['mld-toggle__label', `mld-toggle__label--${size}`]"
+    >
+      {{ label }}
+    </span>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/toggle.css';
+</style>

package/src/components/BatchProgressList.story.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import BatchProgressList from './BatchProgressList.vue'
+
+const mixedItems = [
+  { id: 'b1', label: 'Sample_Control_Rep1.raw', status: 'completed' as const },
+  { id: 'b2', label: 'Sample_Control_Rep2.raw', status: 'completed' as const },
+  { id: 'b3', label: 'Sample_Control_Rep3.raw', status: 'completed' as const },
+  { id: 'b4', label: 'Sample_Treatment_Rep1.raw', status: 'processing' as const, progress: 67 },
+  { id: 'b5', label: 'Sample_Treatment_Rep2.raw', status: 'pending' as const },
+  { id: 'b6', label: 'Sample_Treatment_Rep3.raw', status: 'pending' as const },
+  { id: 'b7', label: 'Sample_Vehicle_Rep1.raw', status: 'error' as const, message: 'File format not recognized. Expected .mzML or .raw format but received corrupted header.' },
+  { id: 'b8', label: 'Sample_Vehicle_Rep2.raw', status: 'skipped' as const },
+]
+
+const allCompleted = [
+  { id: 'c1', label: 'Plate1_Analysis.xlsx', status: 'completed' as const },
+  { id: 'c2', label: 'Plate2_Analysis.xlsx', status: 'completed' as const },
+  { id: 'c3', label: 'Plate3_Analysis.xlsx', status: 'completed' as const },
+  { id: 'c4', label: 'Combined_Report.pdf', status: 'completed' as const },
+]
+
+function initState() {
+  return {
+    items: mixedItems,
+    showSummary: true,
+    title: 'Processing Raw Data Files',
+    autoScroll: true,
+  }
+}
+</script>
+
+<template>
+  <Story title="Workflow/BatchProgressList">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 500px;">
+          <BatchProgressList
+            :items="state.items"
+            :show-summary="state.showSummary"
+            :title="state.title"
+            :auto-scroll="state.autoScroll"
+            @retry="(id) => console.log('Retry:', id)"
+            @cancel="(id) => console.log('Cancel:', id)"
+          />
+        </div>
+      </template>
+      <template #controls="{ state }">
+        <HstCheckbox v-model="state.showSummary" title="Show Summary" />
+        <HstText v-model="state.title" title="Title" />
+        <HstCheckbox v-model="state.autoScroll" title="Auto Scroll" />
+      </template>
+    </Variant>
+
+    <Variant title="All Completed">
+      <div style="padding: 2rem; max-width: 500px;">
+        <BatchProgressList
+          :items="allCompleted"
+          title="Export Complete"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Max Height">
+      <div style="padding: 2rem; max-width: 500px;">
+        <BatchProgressList
+          :items="mixedItems"
+          title="Processing Files"
+          max-height="250px"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="No Title">
+      <div style="padding: 2rem; max-width: 500px;">
+        <BatchProgressList :items="mixedItems" />
+      </div>
+    </Variant>
+
+    <Variant title="All Pending">
+      <div style="padding: 2rem; max-width: 500px;">
+        <BatchProgressList
+          :items="[
+            { id: 'p1', label: 'Analysis_Run_1.csv', status: 'pending' },
+            { id: 'p2', label: 'Analysis_Run_2.csv', status: 'pending' },
+            { id: 'p3', label: 'Analysis_Run_3.csv', status: 'pending' },
+          ]"
+          title="Queued for Processing"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>