@morscherlab/mld-sdk 0.6.0

package/src/__tests__/composables/useForm.test.ts

@@ -0,0 +1,205 @@
+import { describe, it, expect, vi } from 'vitest'
+
+// Mock vue lifecycle hooks since we're not in a component
+vi.mock('vue', async () => {
+  const actual = await vi.importActual('vue')
+  return {
+    ...actual,
+    onMounted: vi.fn(),
+    onUnmounted: vi.fn(),
+  }
+})
+
+import { useForm } from '../../composables/useForm'
+
+describe('useForm', () => {
+  describe('initialization', () => {
+    it('should initialize with provided values', () => {
+      const { data } = useForm({ name: '', email: '' })
+      expect(data.name).toBe('')
+      expect(data.email).toBe('')
+    })
+
+    it('should start with no errors', () => {
+      const { errors } = useForm({ name: '' })
+      expect(errors.name).toBeNull()
+    })
+
+    it('should start as not dirty', () => {
+      const { isDirty } = useForm({ name: '' })
+      expect(isDirty.value).toBe(false)
+    })
+  })
+
+  describe('validation - required', () => {
+    it('should fail for empty required field', () => {
+      const { validateField, errors } = useForm(
+        { name: '' },
+        { name: { required: true } }
+      )
+      const valid = validateField('name')
+      expect(valid).toBe(false)
+      expect(errors.name).toBe('This field is required')
+    })
+
+    it('should pass for filled required field', () => {
+      const { data, validateField, errors } = useForm(
+        { name: '' },
+        { name: { required: true } }
+      )
+      data.name = 'Alice'
+      const valid = validateField('name')
+      expect(valid).toBe(true)
+      expect(errors.name).toBeNull()
+    })
+
+    it('should use custom required message', () => {
+      const { validateField, errors } = useForm(
+        { name: '' },
+        { name: { required: 'Name is required' } }
+      )
+      validateField('name')
+      expect(errors.name).toBe('Name is required')
+    })
+  })
+
+  describe('validation - email', () => {
+    it('should reject invalid email', () => {
+      const { data, validateField, errors } = useForm(
+        { email: '' },
+        { email: { email: true } }
+      )
+      data.email = 'notanemail'
+      const valid = validateField('email')
+      expect(valid).toBe(false)
+      expect(errors.email).toBe('Invalid email address')
+    })
+
+    it('should accept valid email', () => {
+      const { data, validateField, errors } = useForm(
+        { email: '' },
+        { email: { email: true } }
+      )
+      data.email = 'user@example.com'
+      const valid = validateField('email')
+      expect(valid).toBe(true)
+      expect(errors.email).toBeNull()
+    })
+  })
+
+  describe('validation - minLength', () => {
+    it('should reject short strings', () => {
+      const { data, validateField, errors } = useForm(
+        { password: '' },
+        { password: { minLength: 8 } }
+      )
+      data.password = 'abc'
+      const valid = validateField('password')
+      expect(valid).toBe(false)
+      expect(errors.password).toBe('Must be at least 8 characters')
+    })
+  })
+
+  describe('validation - pattern', () => {
+    it('should validate with regex', () => {
+      const { data, validateField, errors } = useForm(
+        { code: '' },
+        { code: { pattern: /^[A-Z]{3}$/ } }
+      )
+      data.code = 'ab'
+      expect(validateField('code')).toBe(false)
+      expect(errors.code).toBe('Invalid format')
+
+      data.code = 'ABC'
+      expect(validateField('code')).toBe(true)
+    })
+  })
+
+  describe('validation - custom', () => {
+    it('should support custom validator', () => {
+      const { data, validateField, errors } = useForm(
+        { password: '', confirm: '' },
+        {
+          confirm: {
+            custom: (value, formData) =>
+              value !== formData.password ? 'Passwords must match' : undefined,
+          },
+        }
+      )
+      data.password = 'secret123'
+      data.confirm = 'different'
+      expect(validateField('confirm')).toBe(false)
+      expect(errors.confirm).toBe('Passwords must match')
+
+      data.confirm = 'secret123'
+      expect(validateField('confirm')).toBe(true)
+    })
+  })
+
+  describe('validate (all fields)', () => {
+    it('should validate all fields at once', () => {
+      const { validate, errors } = useForm(
+        { name: '', email: '' },
+        { name: { required: true }, email: { required: true } }
+      )
+      const valid = validate()
+      expect(valid).toBe(false)
+      expect(errors.name).not.toBeNull()
+      expect(errors.email).not.toBeNull()
+    })
+  })
+
+  describe('setFieldValue', () => {
+    it('should update field value', () => {
+      const { data, setFieldValue } = useForm({ name: '' })
+      setFieldValue('name', 'Bob')
+      expect(data.name).toBe('Bob')
+    })
+  })
+
+  describe('reset', () => {
+    it('should reset to initial values', () => {
+      const { data, errors, touched, dirty, reset, setFieldTouched } = useForm(
+        { name: 'initial' },
+        { name: { required: true } }
+      )
+      data.name = 'changed'
+      setFieldTouched('name')
+      reset()
+      expect(data.name).toBe('initial')
+      expect(errors.name).toBeNull()
+      expect(touched.name).toBe(false)
+      expect(dirty.name).toBe(false)
+    })
+  })
+
+  describe('dirty tracking', () => {
+    it('should track dirty state on setFieldValue', () => {
+      const { setFieldValue } = useForm({ name: 'original' })
+      setFieldValue('name', 'changed')
+      // Note: dirty tracking happens via watch, which may be async in tests
+      // setFieldValue directly mutates data, watch triggers next tick
+    })
+  })
+
+  describe('handleSubmit', () => {
+    it('should call onSubmit when valid', async () => {
+      const onSubmit = vi.fn()
+      const { data, handleSubmit } = useForm({ name: 'Alice' })
+      const handler = handleSubmit(onSubmit)
+      await handler()
+      expect(onSubmit).toHaveBeenCalledWith(data)
+    })
+
+    it('should not call onSubmit when invalid', async () => {
+      const onSubmit = vi.fn()
+      const { handleSubmit } = useForm(
+        { name: '' },
+        { name: { required: true } }
+      )
+      const handler = handleSubmit(onSubmit)
+      await handler()
+      expect(onSubmit).not.toHaveBeenCalled()
+    })
+  })
+})

package/src/components/AlertBox.story.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import AlertBox from './AlertBox.vue'
+import type { AlertType } from '../types'
+
+const alertTypes: AlertType[] = ['info', 'success', 'warning', 'error']
+const dismissed = ref(false)
+
+function handleDismiss() {
+  dismissed.value = true
+  setTimeout(() => { dismissed.value = false }, 2000)
+}
+</script>
+
+<template>
+  <Story title="Feedback/AlertBox">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
+          <AlertBox
+            :type="state.type"
+            :title="state.showTitle ? state.title : undefined"
+            :dismissible="state.dismissible"
+            @dismiss="() => console.log('dismissed')"
+          >
+            {{ state.message }}
+          </AlertBox>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.type"
+          title="Type"
+          :options="alertTypes.map(t => ({ label: t, value: t }))"
+        />
+        <HstCheckbox v-model="state.showTitle" title="Show Title" />
+        <HstText v-model="state.title" title="Title" />
+        <HstText v-model="state.message" title="Message" />
+        <HstCheckbox v-model="state.dismissible" title="Dismissible" />
+      </template>
+    </Variant>
+
+    <Variant title="All Types">
+      <div style="padding: 2rem; max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem;">
+        <AlertBox
+          v-for="type in alertTypes"
+          :key="type"
+          :type="type"
+          :title="`${type.charAt(0).toUpperCase() + type.slice(1)} Alert`"
+        >
+          This is a {{ type }} alert message with supporting details.
+        </AlertBox>
+      </div>
+    </Variant>
+
+    <Variant title="Dismissible">
+      <div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
+        <AlertBox
+          v-if="!dismissed"
+          type="warning"
+          title="Experiment incomplete"
+          dismissible
+          @dismiss="handleDismiss"
+        >
+          3 wells have missing sample assignments. Click dismiss to hide this alert (it will reappear after 2 seconds).
+        </AlertBox>
+        <p v-else style="color: var(--text-muted, #94a3b8); font-style: italic;">
+          Alert dismissed. Reappearing shortly...
+        </p>
+      </div>
+    </Variant>
+
+    <Variant title="Without Title">
+      <div style="padding: 2rem; max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem;">
+        <AlertBox type="info">
+          A simple informational message without a title.
+        </AlertBox>
+        <AlertBox type="error">
+          Something went wrong while processing the sample batch.
+        </AlertBox>
+      </div>
+    </Variant>
+
+    <Variant title="Rich Content">
+      <div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
+        <AlertBox type="success" title="Analysis Complete">
+          <p style="margin: 0 0 0.5rem;">
+            Successfully processed <strong>96 wells</strong> across 3 plates.
+          </p>
+          <ul style="margin: 0; padding-left: 1.25rem;">
+            <li>Peak detection: 1,247 peaks found</li>
+            <li>QC passed: 94/96 wells</li>
+            <li>Outliers flagged: 2 wells (B3, G11)</li>
+          </ul>
+        </AlertBox>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/AlertBox.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import type { AlertType } from '../types'
+
+interface Props {
+  type?: AlertType
+  title?: string
+  dismissible?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'info',
+  dismissible: false,
+})
+
+const emit = defineEmits<{
+  dismiss: []
+}>()
+</script>
+
+<template>
+  <div
+    class="mld-alert"
+    :class="`mld-alert--${props.type}`"
+    role="alert"
+  >
+    <!-- Lucide circle-check -->
+    <svg v-if="props.type === 'success'" class="mld-alert__icon mld-alert__icon--success" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <circle cx="12" cy="12" r="10" /><path d="m9 12 2 2 4-4" />
+    </svg>
+    <!-- Lucide circle-x -->
+    <svg v-else-if="props.type === 'error'" class="mld-alert__icon mld-alert__icon--error" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <circle cx="12" cy="12" r="10" /><path d="m15 9-6 6" /><path d="m9 9 6 6" />
+    </svg>
+    <!-- Lucide triangle-alert -->
+    <svg v-else-if="props.type === 'warning'" class="mld-alert__icon mld-alert__icon--warning" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" /><path d="M12 9v4" /><path d="M12 17h.01" />
+    </svg>
+    <!-- Lucide info -->
+    <svg v-else class="mld-alert__icon mld-alert__icon--info" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" />
+    </svg>
+
+    <div class="mld-alert__content">
+      <h4 v-if="props.title" class="mld-alert__title">
+        {{ props.title }}
+      </h4>
+      <div class="mld-alert__message">
+        <slot />
+      </div>
+    </div>
+
+    <button
+      v-if="props.dismissible"
+      type="button"
+      class="mld-alert__dismiss"
+      aria-label="Dismiss"
+      @click="emit('dismiss')"
+    >
+      <svg class="mld-alert__dismiss-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M18 6 6 18" /><path d="m6 6 12 12" />
+      </svg>
+    </button>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/alert-box.css';
+</style>

package/src/components/AppContainer.story.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import AppContainer from './AppContainer.vue'
+</script>
+
+<template>
+  <Story title="Layout/AppContainer">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem;">
+          <AppContainer
+            :scrollable="state.scrollable"
+            :direction="state.direction || undefined"
+            :gap="state.gap"
+          >
+            <div style="padding: 1.5rem;">
+              <h3 style="margin: 0 0 0.5rem; color: var(--text-primary, #1e293b);">Container Content</h3>
+              <p style="margin: 0; color: var(--text-muted, #94a3b8);">
+                This content is wrapped in an AppContainer component.
+              </p>
+            </div>
+          </AppContainer>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstCheckbox v-model="state.scrollable" title="Scrollable" />
+        <HstSelect
+          v-model="state.direction"
+          title="Direction"
+          :options="[
+            { label: 'none (card)', value: '' },
+            { label: 'row', value: 'row' },
+            { label: 'column', value: 'column' },
+          ]"
+        />
+        <HstText v-model="state.gap" title="Gap" />
+      </template>
+    </Variant>
+
+    <Variant title="Card Mode (Default)">
+      <div style="padding: 2rem;">
+        <AppContainer>
+          <div style="padding: 1.5rem;">
+            <h3 style="margin: 0 0 0.5rem; color: var(--text-primary, #1e293b);">Card Container</h3>
+            <p style="margin: 0; color: var(--text-muted, #94a3b8);">
+              Default card mode with background and border styling.
+            </p>
+          </div>
+        </AppContainer>
+      </div>
+    </Variant>
+
+    <Variant title="Row Layout">
+      <div style="padding: 2rem;">
+        <AppContainer direction="row" gap="1rem">
+          <div style="padding: 1rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.5rem; flex: 1;">
+            <p style="margin: 0; color: var(--text-primary, #1e293b);">Panel 1</p>
+          </div>
+          <div style="padding: 1rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.5rem; flex: 1;">
+            <p style="margin: 0; color: var(--text-primary, #1e293b);">Panel 2</p>
+          </div>
+          <div style="padding: 1rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.5rem; flex: 1;">
+            <p style="margin: 0; color: var(--text-primary, #1e293b);">Panel 3</p>
+          </div>
+        </AppContainer>
+      </div>
+    </Variant>
+
+    <Variant title="Column Layout">
+      <div style="padding: 2rem;">
+        <AppContainer direction="column" gap="0.75rem">
+          <div style="padding: 1rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.5rem;">
+            <p style="margin: 0; color: var(--text-primary, #1e293b);">Section A</p>
+          </div>
+          <div style="padding: 1rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.5rem;">
+            <p style="margin: 0; color: var(--text-primary, #1e293b);">Section B</p>
+          </div>
+          <div style="padding: 1rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.5rem;">
+            <p style="margin: 0; color: var(--text-primary, #1e293b);">Section C</p>
+          </div>
+        </AppContainer>
+      </div>
+    </Variant>
+
+    <Variant title="Scrollable">
+      <div style="padding: 2rem;">
+        <AppContainer :scrollable="true">
+          <div style="padding: 1.5rem; height: 200px; overflow: hidden;">
+            <h3 style="margin: 0 0 1rem; color: var(--text-primary, #1e293b);">Scrollable Container</h3>
+            <div style="height: 400px;">
+              <p style="color: var(--text-muted, #94a3b8);">This container has more content than its visible area. Scroll to see more.</p>
+              <p style="color: var(--text-muted, #94a3b8);">Line 1 of many...</p>
+              <p style="color: var(--text-muted, #94a3b8);">Line 2 of many...</p>
+              <p style="color: var(--text-muted, #94a3b8);">Line 3 of many...</p>
+              <p style="color: var(--text-muted, #94a3b8);">Line 4 of many...</p>
+              <p style="color: var(--text-muted, #94a3b8);">Line 5 of many...</p>
+              <p style="color: var(--text-muted, #94a3b8);">Line 6 of many...</p>
+            </div>
+          </div>
+        </AppContainer>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/AppContainer.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  /** Makes the container scrollable (overflow-y: auto). Ignored when direction is set. */
+  scrollable?: boolean
+  /** Renders as a transparent flex container instead of a card. */
+  direction?: 'row' | 'column'
+  /** Flex gap between children. Only applies when direction is set. */
+  gap?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  scrollable: false,
+  gap: '1rem',
+})
+
+const isLayout = computed(() => !!props.direction)
+</script>
+
+<template>
+  <div
+    class="mld-container"
+    :class="
+      isLayout
+        ? ['mld-container--layout', direction === 'row' ? 'mld-container--row' : 'mld-container--column']
+        : ['mld-container--card', scrollable ? 'mld-container--scrollable' : '']
+    "
+    :style="isLayout ? { gap } : undefined"
+  >
+    <slot />
+  </div>
+</template>