@morscherlab/mld-sdk 0.6.0

package/src/components/DropdownButton.vue

@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import type { SelectOption, ButtonVariant, ButtonSize } from '../types'
+
+/**
+ * DropdownButton - Button-style select with dropdown menu for option selection.
+ *
+ * @example
+ * ```vue
+ * <DropdownButton
+ *   v-model="selectedValue"
+ *   :options="[
+ *     { value: 'a', label: 'Option A' },
+ *     { value: 'b', label: 'Option B', description: 'Additional info' }
+ *   ]"
+ *   variant="secondary"
+ * />
+ * ```
+ */
+interface Props {
+  /** Selected option value */
+  modelValue?: string | number
+  /** Available options */
+  options: SelectOption<string | number>[]
+  /** Placeholder text when no option is selected */
+  placeholder?: string
+  /** Button style variant */
+  variant?: ButtonVariant
+  /** Button size */
+  size?: ButtonSize
+  /** Disable interaction */
+  disabled?: boolean
+  /** Show loading spinner */
+  loading?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'secondary',
+  size: 'md',
+  disabled: false,
+  loading: false,
+})
+
+/**
+ * @event update:modelValue - Emitted when an option is selected (v-model support)
+ * @event select - Emitted when an option is selected, includes full option object
+ */
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number]
+  select: [option: SelectOption<string | number>]
+}>()
+
+const isOpen = ref(false)
+const containerRef = ref<HTMLDivElement>()
+
+const selectedLabel = computed(() => {
+  if (props.modelValue === undefined) return props.placeholder ?? 'Select...'
+  const found = props.options.find(o => o.value === props.modelValue)
+  return found?.label ?? String(props.modelValue)
+})
+
+function toggle() {
+  if (props.disabled || props.loading) return
+  isOpen.value = !isOpen.value
+}
+
+function selectOption(option: SelectOption<string | number>) {
+  if (option.disabled) return
+  emit('update:modelValue', option.value)
+  emit('select', option)
+  isOpen.value = false
+}
+
+function handleClickOutside(event: MouseEvent) {
+  if (containerRef.value && !containerRef.value.contains(event.target as Node)) {
+    isOpen.value = false
+  }
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    isOpen.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+  document.addEventListener('keydown', handleKeydown)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+  document.removeEventListener('keydown', handleKeydown)
+})
+</script>
+
+<template>
+  <div ref="containerRef" class="mld-dropdown-button">
+    <button
+      type="button"
+      :disabled="disabled || loading"
+      :class="[
+        'mld-dropdown-button__trigger',
+        `mld-dropdown-button__trigger--${variant}`,
+        `mld-dropdown-button__trigger--${size}`,
+        {
+          'mld-dropdown-button__trigger--disabled': disabled || loading,
+          'mld-dropdown-button__trigger--open': isOpen,
+        },
+      ]"
+      :aria-expanded="isOpen"
+      aria-haspopup="listbox"
+      @click="toggle"
+    >
+      <svg v-if="loading" class="mld-dropdown-button__spinner" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" opacity="0.25" />
+        <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="3" stroke-linecap="round" />
+      </svg>
+      <span class="mld-dropdown-button__label">{{ selectedLabel }}</span>
+      <svg
+        :class="['mld-dropdown-button__chevron', { 'mld-dropdown-button__chevron--open': isOpen }]"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="m6 9 6 6 6-6" />
+      </svg>
+    </button>
+
+    <Transition name="mld-dropdown-button-menu">
+      <ul
+        v-if="isOpen"
+        class="mld-dropdown-button__menu"
+        role="listbox"
+        :aria-activedescendant="modelValue !== undefined ? `mld-dropdown-option-${modelValue}` : undefined"
+      >
+        <li
+          v-for="option in options"
+          :id="`mld-dropdown-option-${option.value}`"
+          :key="String(option.value)"
+          role="option"
+          :aria-selected="option.value === modelValue"
+          :aria-disabled="option.disabled"
+          :class="[
+            'mld-dropdown-button__option',
+            {
+              'mld-dropdown-button__option--selected': option.value === modelValue,
+              'mld-dropdown-button__option--disabled': option.disabled,
+            },
+          ]"
+          @click="selectOption(option)"
+        >
+          <span class="mld-dropdown-button__option-label">{{ option.label }}</span>
+          <span v-if="option.description" class="mld-dropdown-button__option-description">
+            {{ option.description }}
+          </span>
+          <svg
+            v-if="option.value === modelValue"
+            class="mld-dropdown-button__option-check"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M20 6 9 17l-5-5" />
+          </svg>
+        </li>
+      </ul>
+    </Transition>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/dropdown-button.css';
+</style>

package/src/components/EmptyState.story.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import EmptyState from './EmptyState.vue'
+import type { EmptyStateColor, EmptyStateSize } from '../types'
+
+const colors: EmptyStateColor[] = ['primary', 'cta', 'success', 'warning', 'error', 'muted']
+const sizes: EmptyStateSize[] = ['sm', 'md', 'lg']
+</script>
+
+<template>
+  <Story title="Feedback/EmptyState">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem;">
+          <EmptyState
+            :title="state.title"
+            :description="state.description"
+            :color="state.color"
+            :size="state.size"
+            :action-label="state.showAction ? state.actionLabel : undefined"
+            @action="() => console.log('Action clicked')"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.title" title="Title" />
+        <HstText v-model="state.description" title="Description" />
+        <HstSelect
+          v-model="state.color"
+          title="Color"
+          :options="colors.map(c => ({ label: c, value: c }))"
+        />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="sizes.map(s => ({ label: s, value: s }))"
+        />
+        <HstCheckbox v-model="state.showAction" title="Show Action" />
+        <HstText v-model="state.actionLabel" title="Action Label" />
+      </template>
+    </Variant>
+
+    <Variant title="No Experiments">
+      <div style="padding: 2rem;">
+        <EmptyState
+          title="No experiments yet"
+          description="Create your first experiment to get started with data analysis."
+          action-label="Create Experiment"
+          color="primary"
+          @action="() => console.log('Create experiment')"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="No Results">
+      <div style="padding: 2rem;">
+        <EmptyState
+          title="No results found"
+          description="Try adjusting your search filters or broadening your query."
+          color="muted"
+          size="sm"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Error State">
+      <div style="padding: 2rem;">
+        <EmptyState
+          title="Something went wrong"
+          description="We couldn't load the plate data. Please check your connection and try again."
+          color="error"
+          action-label="Retry"
+          icon-path="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+          @action="() => console.log('Retry')"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="All Colors">
+      <div style="padding: 2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;">
+        <EmptyState
+          v-for="color in colors"
+          :key="color"
+          :title="`${color.charAt(0).toUpperCase() + color.slice(1)} state`"
+          description="Example description text."
+          :color="color"
+          size="sm"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="All Sizes">
+      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 3rem;">
+        <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>
+          <EmptyState
+            :title="`Empty state (${size})`"
+            description="This shows the different size options available."
+            :size="size"
+            color="muted"
+          />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="With Custom Content">
+      <div style="padding: 2rem;">
+        <EmptyState
+          title="Upload your data"
+          description="Drag and drop CSV or Excel files, or click below to browse."
+          color="cta"
+        >
+          <div style="margin-top: 1rem; padding: 2rem; border: 2px dashed var(--border-color, #e2e8f0); border-radius: 0.5rem; text-align: center;">
+            <p style="margin: 0; color: var(--text-muted, #94a3b8); font-size: 0.875rem;">
+              Drop files here or click to upload
+            </p>
+          </div>
+        </EmptyState>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/EmptyState.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+interface Props {
+  title?: string
+  description?: string
+  iconPath?: string
+  color?: 'primary' | 'cta' | 'success' | 'warning' | 'error' | 'muted'
+  size?: 'sm' | 'md' | 'lg'
+  actionLabel?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  color: 'muted',
+  size: 'md',
+})
+
+const emit = defineEmits<{
+  action: []
+}>()
+
+const defaultIconPaths = [
+  'M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z',
+  'M7 11h10',
+  'M7 15h6',
+  'M7 7h8',
+]
+</script>
+
+<template>
+  <div :class="['mld-empty-state', `mld-empty-state--${size}`]">
+    <div :class="['mld-empty-state__icon-wrapper', `mld-empty-state__icon-wrapper--${color}`]">
+      <slot name="icon">
+        <svg
+          class="mld-empty-state__icon"
+          :class="`mld-empty-state__icon--${color}`"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <template v-if="iconPath">
+            <path :d="iconPath" />
+          </template>
+          <template v-else>
+            <path v-for="(d, i) in defaultIconPaths" :key="i" :d="d" />
+          </template>
+        </svg>
+      </slot>
+    </div>
+    <h3 v-if="title" class="mld-empty-state__title">{{ title }}</h3>
+    <p v-if="description" class="mld-empty-state__description">{{ description }}</p>
+    <slot />
+    <div v-if="actionLabel" class="mld-empty-state__action">
+      <button class="mld-empty-state__button" @click="emit('action')">
+        {{ actionLabel }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/empty-state.css';
+</style>

package/src/components/ExperimentTimeline.story.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import ExperimentTimeline from './ExperimentTimeline.vue'
+import type { ProtocolStep } from '../types'
+
+const mockSteps: ProtocolStep[] = [
+  {
+    id: 'step-1',
+    type: 'addition',
+    name: 'Seed Cells',
+    description: 'Add 200 uL cell suspension per well at 5000 cells/well density.',
+    duration: 15,
+    status: 'completed',
+    parameters: { 'Cell density': '5000 cells/well', 'Volume': '200 uL' },
+    order: 0,
+  },
+  {
+    id: 'step-2',
+    type: 'incubation',
+    name: 'Overnight Incubation',
+    description: 'Allow cells to attach and reach 70-80% confluency.',
+    duration: 960,
+    status: 'completed',
+    parameters: { 'Temperature': '37 C', 'CO2': '5%' },
+    order: 1,
+  },
+  {
+    id: 'step-3',
+    type: 'wash',
+    name: 'PBS Wash',
+    description: 'Remove old media and wash with PBS.',
+    duration: 5,
+    status: 'in_progress',
+    parameters: { 'Buffer': 'PBS', 'Volume': '200 uL', 'Repeats': '2' },
+    order: 2,
+  },
+  {
+    id: 'step-4',
+    type: 'addition',
+    name: 'Add Treatment',
+    description: 'Add compound dilutions to designated wells.',
+    duration: 30,
+    status: 'pending',
+    parameters: { 'Compound': 'Cisplatin', 'Concentration range': '0.1 - 100 uM' },
+    order: 3,
+  },
+  {
+    id: 'step-5',
+    type: 'measurement',
+    name: 'Cell Viability Assay',
+    description: 'Measure cell viability using CellTiter-Glo assay.',
+    duration: 45,
+    status: 'pending',
+    parameters: { 'Assay': 'CellTiter-Glo', 'Read mode': 'Luminescence' },
+    order: 4,
+  },
+]
+
+function initState() {
+  return {
+    modelValue: mockSteps,
+    orientation: 'vertical' as const,
+    showDuration: true,
+    showTime: false,
+    editable: false,
+    collapsible: true,
+    size: 'md' as const,
+    colorByStatus: true,
+    colorByType: false,
+  }
+}
+</script>
+
+<template>
+  <Story title="Lab/ExperimentTimeline">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 600px;">
+          <ExperimentTimeline
+            v-model="state.modelValue"
+            :orientation="state.orientation"
+            :show-duration="state.showDuration"
+            :show-time="state.showTime"
+            :editable="state.editable"
+            :collapsible="state.collapsible"
+            :size="state.size"
+            :color-by-status="state.colorByStatus"
+            :color-by-type="state.colorByType"
+          />
+        </div>
+      </template>
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.orientation"
+          title="Orientation"
+          :options="[
+            { value: 'vertical', label: 'Vertical' },
+            { value: 'horizontal', label: 'Horizontal' },
+          ]"
+        />
+        <HstCheckbox v-model="state.showDuration" title="Show Duration" />
+        <HstCheckbox v-model="state.showTime" title="Show Time" />
+        <HstCheckbox v-model="state.editable" title="Editable" />
+        <HstCheckbox v-model="state.collapsible" title="Collapsible" />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="[
+            { value: 'sm', label: 'Small' },
+            { value: 'md', label: 'Medium' },
+            { value: 'lg', label: 'Large' },
+          ]"
+        />
+        <HstCheckbox v-model="state.colorByStatus" title="Color by Status" />
+        <HstCheckbox v-model="state.colorByType" title="Color by Type" />
+      </template>
+    </Variant>
+
+    <Variant title="Horizontal">
+      <div style="padding: 2rem; overflow-x: auto;">
+        <ExperimentTimeline
+          :model-value="mockSteps"
+          orientation="horizontal"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Editable">
+      <div style="padding: 2rem; max-width: 600px;">
+        <ExperimentTimeline
+          :model-value="mockSteps"
+          editable
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Color by Type">
+      <div style="padding: 2rem; max-width: 600px;">
+        <ExperimentTimeline
+          :model-value="mockSteps"
+          :color-by-status="false"
+          color-by-type
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Small">
+      <div style="padding: 2rem; max-width: 400px;">
+        <ExperimentTimeline
+          :model-value="mockSteps"
+          size="sm"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Empty">
+      <div style="padding: 2rem; max-width: 600px;">
+        <ExperimentTimeline :model-value="[]" editable />
+      </div>
+    </Variant>
+  </Story>
+</template>