@morscherlab/mld-sdk 0.6.0

package/src/components/AuditTrail.story.vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import AuditTrail from './AuditTrail.vue'
+
+const now = new Date()
+
+function minutesAgo(mins: number): Date {
+  return new Date(now.getTime() - mins * 60 * 1000)
+}
+
+function hoursAgo(hrs: number): Date {
+  return new Date(now.getTime() - hrs * 60 * 60 * 1000)
+}
+
+function daysAgo(days: number): Date {
+  return new Date(now.getTime() - days * 24 * 60 * 60 * 1000)
+}
+
+const mockEntries = [
+  {
+    id: 'e1',
+    type: 'create' as const,
+    action: 'Created experiment "Cisplatin Dose Response"',
+    detail: 'Initial setup with 96-well plate format, 8 concentration points.',
+    user: 'Elena Morscher',
+    timestamp: minutesAgo(5),
+    metadata: { 'Plate format': '96-well', 'Compounds': '1' },
+  },
+  {
+    id: 'e2',
+    type: 'update' as const,
+    action: 'Updated sample assignments',
+    detail: 'Assigned HeLa cells to wells A1-A12 and MCF-7 to wells B1-B12.',
+    user: 'Elena Morscher',
+    timestamp: minutesAgo(45),
+  },
+  {
+    id: 'e3',
+    type: 'update' as const,
+    action: 'Modified protocol step "Incubation"',
+    detail: 'Changed incubation time from 24h to 48h.',
+    user: 'Thomas Weber',
+    timestamp: hoursAgo(2),
+    metadata: { 'Previous': '24h', 'New': '48h' },
+  },
+  {
+    id: 'e4',
+    type: 'system' as const,
+    action: 'Plate reader measurement completed',
+    detail: 'Luminescence readout finished for plate 1. 96/96 wells measured successfully.',
+    user: undefined,
+    timestamp: hoursAgo(6),
+  },
+  {
+    id: 'e5',
+    type: 'delete' as const,
+    action: 'Removed blank wells from analysis',
+    detail: 'Wells H1-H12 excluded from dose-response curve fitting.',
+    user: 'Elena Morscher',
+    timestamp: daysAgo(1),
+  },
+  {
+    id: 'e6',
+    type: 'create' as const,
+    action: 'Generated analysis report',
+    detail: 'IC50 curve fitting completed. Report exported as PDF.',
+    user: 'Thomas Weber',
+    timestamp: daysAgo(2),
+    metadata: { 'IC50': '3.2 uM', 'R-squared': '0.98' },
+  },
+  {
+    id: 'e7',
+    type: 'system' as const,
+    action: 'Experiment status changed to "Completed"',
+    user: undefined,
+    timestamp: daysAgo(3),
+  },
+]
+
+function initState() {
+  return {
+    entries: mockEntries,
+    showFilters: false,
+    emptyMessage: 'No activity yet',
+    order: 'newest' as const,
+    size: 'md' as const,
+  }
+}
+</script>
+
+<template>
+  <Story title="Workflow/AuditTrail">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 600px;">
+          <AuditTrail
+            :entries="state.entries"
+            :show-filters="state.showFilters"
+            :empty-message="state.emptyMessage"
+            :order="state.order"
+            :size="state.size"
+          />
+        </div>
+      </template>
+      <template #controls="{ state }">
+        <HstCheckbox v-model="state.showFilters" title="Show Filters" />
+        <HstText v-model="state.emptyMessage" title="Empty Message" />
+        <HstSelect
+          v-model="state.order"
+          title="Order"
+          :options="[
+            { value: 'newest', label: 'Newest First' },
+            { value: 'oldest', label: 'Oldest First' },
+          ]"
+        />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="[
+            { value: 'sm', label: 'Small' },
+            { value: 'md', label: 'Medium' },
+            { value: 'lg', label: 'Large' },
+          ]"
+        />
+      </template>
+    </Variant>
+
+    <Variant title="With Filters">
+      <div style="padding: 2rem; max-width: 600px;">
+        <AuditTrail
+          :entries="mockEntries"
+          show-filters
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Max Height">
+      <div style="padding: 2rem; max-width: 600px;">
+        <AuditTrail
+          :entries="mockEntries"
+          max-height="300px"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Oldest First">
+      <div style="padding: 2rem; max-width: 600px;">
+        <AuditTrail
+          :entries="mockEntries"
+          order="oldest"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Empty">
+      <div style="padding: 2rem; max-width: 600px;">
+        <AuditTrail
+          :entries="[]"
+          empty-message="No audit events recorded"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/AuditTrail.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+type AuditEntryType = 'create' | 'update' | 'delete' | 'system'
+
+interface AuditEntry {
+  id: string
+  type: AuditEntryType
+  action: string
+  detail?: string
+  user?: string
+  timestamp: Date | string
+  metadata?: Record<string, unknown>
+}
+
+interface Props {
+  entries: AuditEntry[]
+  maxHeight?: string
+  showFilters?: boolean
+  emptyMessage?: string
+  order?: 'newest' | 'oldest'
+  size?: 'sm' | 'md' | 'lg'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showFilters: false,
+  emptyMessage: 'No activity yet',
+  order: 'newest',
+  size: 'md',
+})
+
+const emit = defineEmits<{
+  'entry-click': [entry: AuditEntry]
+}>()
+
+const filterType = ref<AuditEntryType | ''>('')
+const filterUser = ref('')
+
+const uniqueTypes = computed(() => {
+  const types = new Set(props.entries.map(e => e.type))
+  return Array.from(types)
+})
+
+const uniqueUsers = computed(() => {
+  const users = new Set(props.entries.filter(e => e.user).map(e => e.user!))
+  return Array.from(users)
+})
+
+const filteredEntries = computed(() => {
+  let result = props.entries
+  if (filterType.value) {
+    result = result.filter(e => e.type === filterType.value)
+  }
+  if (filterUser.value) {
+    result = result.filter(e => e.user === filterUser.value)
+  }
+  return result
+})
+
+const sortedEntries = computed(() => {
+  const entries = [...filteredEntries.value]
+  entries.sort((a, b) => {
+    const timeA = new Date(a.timestamp).getTime()
+    const timeB = new Date(b.timestamp).getTime()
+    return props.order === 'newest' ? timeB - timeA : timeA - timeB
+  })
+  return entries
+})
+
+function getInitials(name: string): string {
+  const words = name.trim().split(/\s+/)
+  if (words.length >= 2) {
+    return (words[0][0] + words[1][0]).toUpperCase()
+  }
+  return (words[0]?.[0] ?? '').toUpperCase()
+}
+
+const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
+
+function formatTimestamp(timestamp: Date | string): string {
+  const date = timestamp instanceof Date ? timestamp : new Date(timestamp)
+  const now = Date.now()
+  const diffMs = date.getTime() - now
+  const diffSec = Math.round(diffMs / 1000)
+  const diffMin = Math.round(diffSec / 60)
+  const diffHr = Math.round(diffMin / 60)
+  const diffDay = Math.round(diffHr / 24)
+  const diffWeek = Math.round(diffDay / 7)
+
+  if (Math.abs(diffSec) < 60) return rtf.format(diffSec, 'second')
+  if (Math.abs(diffMin) < 60) return rtf.format(diffMin, 'minute')
+  if (Math.abs(diffHr) < 24) return rtf.format(diffHr, 'hour')
+  if (Math.abs(diffDay) < 7) return rtf.format(diffDay, 'day')
+  if (Math.abs(diffWeek) < 5) return rtf.format(diffWeek, 'week')
+  return date.toLocaleDateString()
+}
+
+function handleEntryClick(entry: AuditEntry) {
+  emit('entry-click', entry)
+}
+</script>
+
+<template>
+  <div :class="['mld-audit-trail', `mld-audit-trail--${size}`]">
+    <div v-if="showFilters" class="mld-audit-trail__filters">
+      <select v-model="filterType" class="mld-audit-trail__filter-select">
+        <option value="">All types</option>
+        <option v-for="t in uniqueTypes" :key="t" :value="t">{{ t }}</option>
+      </select>
+      <select v-model="filterUser" class="mld-audit-trail__filter-select">
+        <option value="">All users</option>
+        <option v-for="u in uniqueUsers" :key="u" :value="u">{{ u }}</option>
+      </select>
+    </div>
+
+    <div
+      v-if="sortedEntries.length"
+      class="mld-audit-trail__list"
+      :style="maxHeight ? { maxHeight, overflowY: 'auto' } : {}"
+    >
+      <div class="mld-audit-trail__line" />
+      <div
+        v-for="entry in sortedEntries"
+        :key="entry.id"
+        :class="['mld-audit-trail__entry', `mld-audit-trail__entry--${entry.type}`]"
+        @click="handleEntryClick(entry)"
+      >
+        <slot name="entry" :entry="entry">
+          <div class="mld-audit-trail__dot" />
+          <div class="mld-audit-trail__content">
+            <div class="mld-audit-trail__header">
+              <div v-if="entry.user" class="mld-audit-trail__avatar">{{ getInitials(entry.user) }}</div>
+              <span v-if="entry.user" class="mld-audit-trail__user">{{ entry.user }}</span>
+              <span class="mld-audit-trail__timestamp">{{ formatTimestamp(entry.timestamp) }}</span>
+            </div>
+            <div class="mld-audit-trail__action">{{ entry.action }}</div>
+            <div v-if="entry.detail" class="mld-audit-trail__detail">{{ entry.detail }}</div>
+            <div v-if="entry.metadata && Object.keys(entry.metadata).length" class="mld-audit-trail__metadata">
+              <span
+                v-for="(value, key) in entry.metadata"
+                :key="String(key)"
+                class="mld-audit-trail__metadata-item"
+              >
+                <span class="mld-audit-trail__metadata-key">{{ key }}:</span>
+                {{ value }}
+              </span>
+            </div>
+          </div>
+        </slot>
+      </div>
+    </div>
+
+    <div v-if="!sortedEntries.length" class="mld-audit-trail__empty">
+      <slot name="empty">{{ emptyMessage }}</slot>
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/audit-trail.css';
+</style>

package/src/components/Avatar.story.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import Avatar from './Avatar.vue'
+
+const sizes: ('xs' | 'sm' | 'md' | 'lg' | 'xl')[] = ['xs', 'sm', 'md', 'lg', 'xl']
+
+const users = [
+  { name: 'Alice Morscher', color: undefined },
+  { name: 'Bob Chen', color: undefined },
+  { name: 'Clara Diaz', color: undefined },
+  { name: 'David Kim', color: undefined },
+  { name: 'Elena Rossi', color: undefined },
+]
+</script>
+
+<template>
+  <Story title="Data Display/Avatar">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
+          <Avatar
+            :name="state.name"
+            :initials="state.initials || undefined"
+            :src="state.src || undefined"
+            :size="state.size"
+            :color="state.color || undefined"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.name" title="Name" />
+        <HstText v-model="state.initials" title="Initials (override)" />
+        <HstText v-model="state.src" title="Image URL" />
+        <HstText v-model="state.color" title="Color (hex)" />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="sizes.map(s => ({ label: s, value: s }))"
+        />
+      </template>
+    </Variant>
+
+    <Variant title="All Sizes">
+      <div style="padding: 2rem; display: flex; gap: 1.5rem; align-items: center; justify-content: center;">
+        <div v-for="size in sizes" :key="size" style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+          <Avatar name="Alice Morscher" :size="size" />
+          <span style="font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
+            {{ size }}
+          </span>
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Name-based Colors">
+      <div style="padding: 2rem; display: flex; gap: 1rem; align-items: center; justify-content: center;">
+        <div v-for="user in users" :key="user.name" style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+          <Avatar :name="user.name" size="lg" />
+          <span style="font-size: 0.75rem; color: var(--text-muted, #94a3b8);">{{ user.name.split(' ')[0] }}</span>
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Custom Initials">
+      <div style="padding: 2rem; display: flex; gap: 1rem; align-items: center; justify-content: center;">
+        <Avatar initials="PI" name="Principal Investigator" size="lg" />
+        <Avatar initials="RA" name="Research Assistant" size="lg" />
+        <Avatar initials="QC" name="Quality Control" size="lg" color="#10B981" />
+      </div>
+    </Variant>
+
+    <Variant title="With Image">
+      <div style="padding: 2rem; display: flex; gap: 1rem; align-items: center; justify-content: center;">
+        <Avatar
+          src="https://api.dicebear.com/7.x/initials/svg?seed=AM&backgroundColor=3B82F6"
+          name="Alice Morscher"
+          size="lg"
+        />
+        <Avatar
+          src="https://api.dicebear.com/7.x/initials/svg?seed=BC&backgroundColor=8B5CF6"
+          name="Bob Chen"
+          size="lg"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Fallback (No Name)">
+      <div style="padding: 2rem; display: flex; gap: 1rem; align-items: center; justify-content: center;">
+        <Avatar v-for="size in sizes" :key="size" :size="size" />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/Avatar.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  name?: string
+  initials?: string
+  src?: string
+  alt?: string
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  alt: '',
+  size: 'md',
+})
+
+const PALETTE = ['#3B82F6', '#8B5CF6', '#EC4899', '#F97316', '#10B981', '#F59E0B', '#06B6D4', '#6366F1']
+
+const computedInitials = computed(() =>
+  props.initials || props.name?.split(' ').map(w => w[0]).join('').toUpperCase().slice(0, 2) || ''
+)
+
+const backgroundColor = computed(() => {
+  if (props.color) return props.color
+  if (!props.name) return undefined
+
+  let hash = 0
+  for (let i = 0; i < props.name.length; i++) {
+    hash = props.name.charCodeAt(i) + ((hash << 5) - hash)
+  }
+  return PALETTE[Math.abs(hash) % PALETTE.length]
+})
+</script>
+
+<template>
+  <span
+    :class="['mld-avatar', `mld-avatar--${size}`]"
+    :style="backgroundColor ? { backgroundColor } : undefined"
+    role="img"
+    :aria-label="alt || name || 'User avatar'"
+  >
+    <img
+      v-if="src"
+      :src="src"
+      :alt="alt || name || ''"
+      class="mld-avatar__image"
+    >
+    <span v-else-if="computedInitials" class="mld-avatar__initials">
+      {{ computedInitials }}
+    </span>
+    <svg
+      v-else
+      class="mld-avatar__fallback"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+    >
+      <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
+    </svg>
+  </span>
+</template>
+
+<style>
+@import '../styles/components/avatar.css';
+</style>

package/src/components/BaseButton.story.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import BaseButton from './BaseButton.vue'
+import type { ButtonVariant, ButtonSize } from '../types'
+
+const variants: ButtonVariant[] = ['primary', 'secondary', 'cta', 'danger', 'success', 'ghost']
+const sizes: ButtonSize[] = ['sm', 'md', 'lg']
+
+function handleClick() {
+  console.log('Button clicked')
+}
+</script>
+
+<template>
+  <Story title="Base Inputs/BaseButton">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
+          <BaseButton
+            :variant="state.variant"
+            :size="state.size"
+            :disabled="state.disabled"
+            :loading="state.loading"
+            :full-width="state.fullWidth"
+            @click="handleClick"
+          >
+            {{ state.label }}
+          </BaseButton>
+        </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.disabled" title="Disabled" />
+        <HstCheckbox v-model="state.loading" title="Loading" />
+        <HstCheckbox v-model="state.fullWidth" title="Full Width" />
+      </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;">
+            <BaseButton
+              v-for="variant in variants"
+              :key="variant"
+              :variant="variant"
+              :size="size"
+              @click="handleClick"
+            >
+              {{ variant }}
+            </BaseButton>
+          </div>
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Loading States">
+      <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
+        <BaseButton
+          v-for="variant in variants"
+          :key="variant"
+          :variant="variant"
+          loading
+        >
+          {{ variant }}
+        </BaseButton>
+      </div>
+    </Variant>
+
+    <Variant title="Disabled States">
+      <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
+        <BaseButton
+          v-for="variant in variants"
+          :key="variant"
+          :variant="variant"
+          disabled
+        >
+          {{ variant }}
+        </BaseButton>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/BaseButton.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type { ButtonVariant, ButtonSize } from '../types'
+
+interface Props {
+  variant?: ButtonVariant
+  size?: ButtonSize
+  disabled?: boolean
+  loading?: boolean
+  type?: 'button' | 'submit' | 'reset'
+  fullWidth?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'primary',
+  size: 'md',
+  disabled: false,
+  loading: false,
+  type: 'button',
+  fullWidth: false,
+})
+
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+}>()
+
+function handleClick(event: MouseEvent) {
+  if (!props.disabled && !props.loading) {
+    emit('click', event)
+  }
+}
+</script>
+
+<template>
+  <button
+    :type="type"
+    :disabled="disabled || loading"
+    :class="[
+      'mld-button',
+      `mld-button--${variant}`,
+      `mld-button--${size}`,
+      fullWidth ? 'mld-button--full-width' : '',
+      (disabled || loading) ? 'mld-button--disabled' : '',
+    ]"
+    @click="handleClick"
+  >
+    <svg
+      v-if="loading"
+      class="mld-button__spinner"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        style="opacity: 0.25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="4"
+      />
+      <path
+        style="opacity: 0.75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+    <slot />
+  </button>
+</template>
+
+<style>
+@import '../styles/components/button.css';
+</style>