@morscherlab/mld-sdk 0.6.0

package/src/components/MultiSelect.story.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import MultiSelect from './MultiSelect.vue'
+import type { MultiSelectOption } from '../types'
+
+const sizes = ['sm', 'md', 'lg'] as const
+
+const sampleOptions: MultiSelectOption[] = [
+  { value: 'hela', label: 'HeLa' },
+  { value: 'mcf7', label: 'MCF-7' },
+  { value: 'a549', label: 'A549' },
+  { value: 'hek293', label: 'HEK293' },
+  { value: 'jurkat', label: 'Jurkat' },
+  { value: 'k562', label: 'K562' },
+]
+
+const withDisabledOptions: MultiSelectOption[] = [
+  { value: 'option1', label: 'Available A' },
+  { value: 'option2', label: 'Available B' },
+  { value: 'option3', label: 'Unavailable', disabled: true },
+  { value: 'option4', label: 'Available C' },
+]
+
+const selected = ref<(string | number)[]>(['hela', 'a549'])
+</script>
+
+<template>
+  <Story title="Base Inputs/MultiSelect">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+          <MultiSelect
+            v-model="state.selected"
+            :options="sampleOptions"
+            :placeholder="state.placeholder"
+            :disabled="state.disabled"
+            :max-selections="state.useMaxSelections ? state.maxSelections : undefined"
+            :size="state.size"
+          />
+          <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+            Selected: <code>{{ JSON.stringify(state.selected) }}</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.useMaxSelections" title="Limit Selections" />
+        <HstSlider v-model="state.maxSelections" title="Max Selections" :min="1" :max="10" />
+      </template>
+    </Variant>
+
+    <Variant title="Sizes">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto; 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>
+          <MultiSelect v-model="selected" :options="sampleOptions" :size="size" />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Empty State">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <MultiSelect
+          :model-value="[]"
+          :options="sampleOptions"
+          placeholder="Select cell lines..."
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Max Selections">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <p style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text-primary, #e2e8f0);">
+          Maximum 3 selections allowed
+        </p>
+        <MultiSelect
+          :model-value="['hela', 'mcf7']"
+          :options="sampleOptions"
+          :max-selections="3"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Disabled Options">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <MultiSelect
+          :model-value="['option1']"
+          :options="withDisabledOptions"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="All Selected">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <MultiSelect
+          :model-value="sampleOptions.map(o => o.value)"
+          :options="sampleOptions"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <MultiSelect
+          :model-value="['hela', 'a549']"
+          :options="sampleOptions"
+          disabled
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/MultiSelect.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { MultiSelectOption, MultiSelectSize } from '../types'
+
+interface Props {
+  modelValue: (string | number)[]
+  options: MultiSelectOption[]
+  placeholder?: string
+  disabled?: boolean
+  maxSelections?: number
+  size?: MultiSelectSize
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: 'Select options...',
+  disabled: false,
+  size: 'md',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: (string | number)[]]
+}>()
+
+const canSelectMore = computed(() => {
+  if (props.maxSelections === undefined) return true
+  return props.modelValue.length < props.maxSelections
+})
+
+function isSelected(value: string | number): boolean {
+  return props.modelValue.includes(value)
+}
+
+function toggleOption(option: MultiSelectOption) {
+  if (props.disabled || option.disabled) return
+
+  if (isSelected(option.value)) {
+    emit('update:modelValue', props.modelValue.filter(v => v !== option.value))
+  } else if (canSelectMore.value) {
+    emit('update:modelValue', [...props.modelValue, option.value])
+  }
+}
+
+function handleKeydown(event: KeyboardEvent, option: MultiSelectOption) {
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault()
+    toggleOption(option)
+  }
+}
+
+const selectedLabels = computed(() => {
+  return props.modelValue
+    .map(v => props.options.find(o => o.value === v)?.label)
+    .filter(Boolean)
+})
+</script>
+
+<template>
+  <div
+    :class="[
+      'mld-multi-select',
+      `mld-multi-select--${size}`,
+      disabled ? 'mld-multi-select--disabled' : '',
+    ]"
+  >
+    <div
+      v-if="modelValue.length === 0"
+      class="mld-multi-select__placeholder"
+    >
+      {{ placeholder }}
+    </div>
+
+    <div class="mld-multi-select__options" role="group">
+      <button
+        v-for="option in options"
+        :key="String(option.value)"
+        type="button"
+        role="checkbox"
+        :aria-checked="isSelected(option.value)"
+        :disabled="disabled || option.disabled || (!isSelected(option.value) && !canSelectMore)"
+        :class="[
+          'mld-multi-select__chip',
+          `mld-multi-select__chip--${size}`,
+          isSelected(option.value) ? 'mld-multi-select__chip--active' : '',
+          option.disabled ? 'mld-multi-select__chip--disabled' : '',
+          !isSelected(option.value) && !canSelectMore ? 'mld-multi-select__chip--disabled' : '',
+        ]"
+        @click="toggleOption(option)"
+        @keydown="handleKeydown($event, option)"
+      >
+        <span class="mld-multi-select__chip-label">{{ option.label }}</span>
+        <svg
+          v-if="isSelected(option.value)"
+          class="mld-multi-select__chip-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>
+      </button>
+    </div>
+
+    <div
+      v-if="modelValue.length > 0"
+      class="mld-multi-select__summary"
+    >
+      {{ selectedLabels.join(', ') }}
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/multi-select.css';
+</style>

package/src/components/NumberInput.story.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import NumberInput from './NumberInput.vue'
+
+const sizes = ['sm', 'md', 'lg'] as const
+</script>
+
+<template>
+  <Story title="Base Inputs/NumberInput">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 300px; margin: 0 auto;">
+          <NumberInput
+            v-model="state.value"
+            :min="state.min"
+            :max="state.max"
+            :step="state.step"
+            :disabled="state.disabled"
+            :error="state.error"
+            :size="state.size"
+            :placeholder="state.placeholder"
+          />
+          <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 }">
+        <HstSlider v-model="state.value" title="Value" :min="0" :max="100" />
+        <HstSlider v-model="state.min" title="Min" :min="-100" :max="0" />
+        <HstSlider v-model="state.max" title="Max" :min="1" :max="1000" />
+        <HstSlider v-model="state.step" title="Step" :min="1" :max="50" />
+        <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: 300px; 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>
+          <NumberInput :model-value="42" :size="size" />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="With Constraints">
+      <div style="padding: 2rem; max-width: 300px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem;">
+        <div>
+          <p style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text-primary, #e2e8f0);">Sample count (0-384)</p>
+          <NumberInput :model-value="96" :min="0" :max="384" :step="1" placeholder="Samples" />
+        </div>
+        <div>
+          <p style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text-primary, #e2e8f0);">Temperature (step 0.5)</p>
+          <NumberInput :model-value="37" :min="0" :max="100" :step="0.5" />
+        </div>
+        <div>
+          <p style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text-primary, #e2e8f0);">Volume in uL (step 10)</p>
+          <NumberInput :model-value="100" :min="0" :max="1000" :step="10" />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Error State">
+      <div style="padding: 2rem; max-width: 300px; margin: 0 auto;">
+        <NumberInput :model-value="999" :max="100" error />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div style="padding: 2rem; max-width: 300px; margin: 0 auto;">
+        <NumberInput :model-value="50" disabled />
+      </div>
+    </Variant>
+
+    <Variant title="Empty with Placeholder">
+      <div style="padding: 2rem; max-width: 300px; margin: 0 auto;">
+        <NumberInput placeholder="Enter value..." />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/NumberInput.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  modelValue?: number
+  min?: number
+  max?: number
+  step?: number
+  disabled?: boolean
+  error?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  placeholder?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  step: 1,
+  disabled: false,
+  error: false,
+  size: 'md',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number | undefined]
+}>()
+
+const canDecrement = computed(() => {
+  if (props.modelValue === undefined) return true
+  if (props.min === undefined) return true
+  return props.modelValue > props.min
+})
+
+const canIncrement = computed(() => {
+  if (props.modelValue === undefined) return true
+  if (props.max === undefined) return true
+  return props.modelValue < props.max
+})
+
+function clamp(value: number): number {
+  let result = value
+  if (props.min !== undefined && result < props.min) result = props.min
+  if (props.max !== undefined && result > props.max) result = props.max
+  return result
+}
+
+function handleInput(event: Event) {
+  const target = event.target as HTMLInputElement
+  const value = target.value === '' ? undefined : Number(target.value)
+  if (value !== undefined && !isNaN(value)) {
+    emit('update:modelValue', clamp(value))
+  } else {
+    emit('update:modelValue', undefined)
+  }
+}
+
+function decrement() {
+  if (props.disabled || !canDecrement.value) return
+  const current = props.modelValue ?? (props.max ?? 0)
+  emit('update:modelValue', clamp(current - props.step))
+}
+
+function increment() {
+  if (props.disabled || !canIncrement.value) return
+  const current = props.modelValue ?? (props.min ?? 0)
+  emit('update:modelValue', clamp(current + props.step))
+}
+</script>
+
+<template>
+  <div
+    :class="[
+      'mld-number-input',
+      error ? 'mld-number-input--error' : '',
+      disabled ? 'mld-number-input--disabled' : '',
+    ]"
+  >
+    <button
+      type="button"
+      aria-label="Decrease value"
+      :disabled="disabled || !canDecrement"
+      :class="[
+        'mld-number-input__button',
+        'mld-number-input__button--decrement',
+        `mld-number-input__button--${size}`,
+      ]"
+      @click="decrement"
+    >
+      <svg class="mld-number-input__button-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+        <path d="M5 12h14" />
+      </svg>
+    </button>
+
+    <input
+      type="number"
+      :value="modelValue"
+      :min="min"
+      :max="max"
+      :step="step"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      :class="[
+        'mld-number-input__input',
+        `mld-number-input__input--${size}`,
+        disabled ? 'mld-number-input__input--disabled' : '',
+      ]"
+      @input="handleInput"
+    />
+
+    <button
+      type="button"
+      aria-label="Increase value"
+      :disabled="disabled || !canIncrement"
+      :class="[
+        'mld-number-input__button',
+        'mld-number-input__button--increment',
+        `mld-number-input__button--${size}`,
+      ]"
+      @click="increment"
+    >
+      <svg class="mld-number-input__button-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+        <path d="M5 12h14" /><path d="M12 5v14" />
+      </svg>
+    </button>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/number-input.css';
+</style>

package/src/components/PlateMapEditor.story.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import PlateMapEditor from './PlateMapEditor.vue'
+import type { SampleType } from '../types'
+
+const mockSamples: SampleType[] = [
+  { id: 's1', name: 'HeLa Cells', color: '#3B82F6', count: 0 },
+  { id: 's2', name: 'MCF-7 Cells', color: '#10B981', count: 0 },
+  { id: 's3', name: 'Vehicle Control', color: '#F59E0B', count: 0 },
+  { id: 's4', name: 'Blank', color: '#EF4444', count: 0 },
+]
+
+function initState() {
+  return {
+    format: 96 as const,
+    maxPlates: 10,
+    samples: mockSamples,
+    showToolbar: true,
+    showSidebar: true,
+    allowAddPlates: true,
+    allowAddSamples: true,
+    size: 'md' as const,
+  }
+}
+</script>
+
+<template>
+  <Story title="Lab/PlateMapEditor">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem;">
+          <PlateMapEditor
+            :format="state.format"
+            :max-plates="state.maxPlates"
+            :samples="state.samples"
+            :show-toolbar="state.showToolbar"
+            :show-sidebar="state.showSidebar"
+            :allow-add-plates="state.allowAddPlates"
+            :allow-add-samples="state.allowAddSamples"
+            :size="state.size"
+          />
+        </div>
+      </template>
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.format"
+          title="Format"
+          :options="[
+            { value: 54, label: '54-well' },
+            { value: 96, label: '96-well' },
+          ]"
+        />
+        <HstSlider v-model="state.maxPlates" title="Max Plates" :min="1" :max="10" />
+        <HstCheckbox v-model="state.showToolbar" title="Show Toolbar" />
+        <HstCheckbox v-model="state.showSidebar" title="Show Sidebar" />
+        <HstCheckbox v-model="state.allowAddPlates" title="Allow Add Plates" />
+        <HstCheckbox v-model="state.allowAddSamples" title="Allow Add Samples" />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="[
+            { value: 'sm', label: 'Small' },
+            { value: 'md', label: 'Medium' },
+            { value: 'lg', label: 'Large' },
+            { value: 'xl', label: 'Extra Large' },
+            { value: 'fill', label: 'Fill' },
+          ]"
+        />
+      </template>
+    </Variant>
+
+    <Variant title="No Sidebar">
+      <div style="padding: 2rem;">
+        <PlateMapEditor
+          :format="96"
+          :samples="mockSamples"
+          :show-sidebar="false"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Minimal (No Toolbar)">
+      <div style="padding: 2rem;">
+        <PlateMapEditor
+          :format="96"
+          :samples="mockSamples"
+          :show-toolbar="false"
+          :show-sidebar="false"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>