@morscherlab/mld-sdk 0.6.0

package/src/components/Skeleton.story.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import Skeleton from './Skeleton.vue'
+
+const variants: ('text' | 'circular' | 'rectangular' | 'rounded')[] = ['text', 'circular', 'rectangular', 'rounded']
+const animations: ('pulse' | 'wave' | 'none')[] = ['pulse', 'wave', 'none']
+</script>
+
+<template>
+  <Story title="Data Display/Skeleton">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+          <Skeleton
+            :variant="state.variant"
+            :animation="state.animation"
+            :width="state.width || undefined"
+            :height="state.height || undefined"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.variant"
+          title="Variant"
+          :options="variants.map(v => ({ label: v, value: v }))"
+        />
+        <HstSelect
+          v-model="state.animation"
+          title="Animation"
+          :options="animations.map(a => ({ label: a, value: a }))"
+        />
+        <HstText v-model="state.width" title="Width (e.g. 200px, 50%)" />
+        <HstText v-model="state.height" title="Height (e.g. 40px)" />
+      </template>
+    </Variant>
+
+    <Variant title="All Variants">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem;">
+        <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>
+          <Skeleton :variant="variant" />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Animation Types">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem;">
+        <div v-for="animation in animations" :key="animation">
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
+            {{ animation }}
+          </p>
+          <Skeleton variant="text" :animation="animation" />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Card Loading Pattern">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+        <div style="border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.5rem; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem;">
+          <div style="display: flex; align-items: center; gap: 0.75rem;">
+            <Skeleton variant="circular" width="48" height="48" />
+            <div style="flex: 1; display: flex; flex-direction: column; gap: 0.5rem;">
+              <Skeleton variant="text" width="60%" />
+              <Skeleton variant="text" width="40%" />
+            </div>
+          </div>
+          <Skeleton variant="rounded" height="160" />
+          <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+            <Skeleton variant="text" />
+            <Skeleton variant="text" />
+            <Skeleton variant="text" width="75%" />
+          </div>
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Table Loading Pattern">
+      <div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
+        <div style="display: flex; flex-direction: column; gap: 0.75rem;">
+          <div style="display: flex; gap: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-color, #e2e8f0);">
+            <Skeleton variant="text" width="60px" height="14" />
+            <Skeleton variant="text" width="120px" height="14" />
+            <Skeleton variant="text" width="80px" height="14" />
+            <Skeleton variant="text" width="100px" height="14" />
+          </div>
+          <div v-for="i in 5" :key="i" style="display: flex; gap: 1rem;">
+            <Skeleton variant="text" width="60px" />
+            <Skeleton variant="text" width="120px" />
+            <Skeleton variant="text" width="80px" />
+            <Skeleton variant="text" width="100px" />
+          </div>
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Custom Sizes">
+      <div style="padding: 2rem; display: flex; gap: 1.5rem; align-items: flex-start; justify-content: center; flex-wrap: wrap;">
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+          <Skeleton variant="circular" width="32" height="32" />
+          <span style="font-size: 0.75rem; color: var(--text-muted, #94a3b8);">32px</span>
+        </div>
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+          <Skeleton variant="circular" width="48" height="48" />
+          <span style="font-size: 0.75rem; color: var(--text-muted, #94a3b8);">48px</span>
+        </div>
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+          <Skeleton variant="circular" width="64" height="64" />
+          <span style="font-size: 0.75rem; color: var(--text-muted, #94a3b8);">64px</span>
+        </div>
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+          <Skeleton variant="circular" width="96" height="96" />
+          <span style="font-size: 0.75rem; color: var(--text-muted, #94a3b8);">96px</span>
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/Skeleton.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  variant?: 'text' | 'circular' | 'rectangular' | 'rounded'
+  width?: string | number
+  height?: string | number
+  animation?: 'pulse' | 'wave' | 'none'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'text',
+  animation: 'pulse',
+})
+
+const style = computed(() => {
+  const s: Record<string, string> = {}
+
+  if (props.width) {
+    s.width = typeof props.width === 'number' ? `${props.width}px` : props.width
+  }
+
+  if (props.height) {
+    s.height = typeof props.height === 'number' ? `${props.height}px` : props.height
+  }
+
+  return s
+})
+
+const classes = computed(() => {
+  const base = ['bg-bg-hover']
+
+  switch (props.variant) {
+    case 'circular':
+      base.push('rounded-full')
+      if (!props.width && !props.height) {
+        base.push('w-10 h-10')
+      }
+      break
+    case 'rectangular':
+      base.push('rounded-none')
+      if (!props.height) base.push('h-24')
+      break
+    case 'rounded':
+      base.push('rounded-mld')
+      if (!props.height) base.push('h-24')
+      break
+    default:
+      base.push('rounded')
+      if (!props.height) base.push('h-4')
+      if (!props.width) base.push('w-full')
+  }
+
+  switch (props.animation) {
+    case 'pulse':
+      base.push('animate-pulse')
+      break
+    case 'wave':
+      base.push('skeleton-wave')
+      break
+  }
+
+  return base
+})
+</script>
+
+<template>
+  <div :class="classes" :style="style" />
+</template>
+
+<style>
+@import '../styles/components/skeleton.css';
+</style>

package/src/components/StatusIndicator.story.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import StatusIndicator from './StatusIndicator.vue'
+import type { StatusType } from '../types'
+
+const statuses: StatusType[] = ['success', 'warning', 'error', 'info', 'muted']
+</script>
+
+<template>
+  <Story title="Feedback/StatusIndicator">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
+          <StatusIndicator
+            :status="state.status"
+            :label="state.label || undefined"
+            :pulse="state.pulse"
+            :color="state.customColor || undefined"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.status"
+          title="Status"
+          :options="statuses.map(s => ({ label: s, value: s }))"
+        />
+        <HstText v-model="state.label" title="Label" />
+        <HstCheckbox v-model="state.pulse" title="Pulse" />
+        <HstText v-model="state.customColor" title="Custom Color" />
+      </template>
+    </Variant>
+
+    <Variant title="All Statuses">
+      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;">
+        <StatusIndicator
+          v-for="status in statuses"
+          :key="status"
+          :status="status"
+          :label="status.charAt(0).toUpperCase() + status.slice(1)"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Pulse">
+      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;">
+        <StatusIndicator status="success" label="Connected" :pulse="true" />
+        <StatusIndicator status="warning" label="Syncing" :pulse="true" />
+        <StatusIndicator status="error" label="Disconnected" :pulse="true" />
+        <StatusIndicator status="info" label="Processing" :pulse="true" />
+      </div>
+    </Variant>
+
+    <Variant title="Dot Only (No Label)">
+      <div style="padding: 2rem; display: flex; gap: 1rem; align-items: center; justify-content: center;">
+        <StatusIndicator
+          v-for="status in statuses"
+          :key="status"
+          :status="status"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Custom Colors">
+      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;">
+        <StatusIndicator color="#8b5cf6" label="Purple (custom)" />
+        <StatusIndicator color="#ec4899" label="Pink (custom)" />
+        <StatusIndicator color="#14b8a6" label="Teal (custom)" />
+        <StatusIndicator color="#f97316" label="Orange (custom)" />
+      </div>
+    </Variant>
+
+    <Variant title="Practical Example">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+        <h3 style="margin: 0 0 1rem; color: var(--text-primary, #1e293b); font-size: 0.875rem; font-weight: 600;">
+          System Status
+        </h3>
+        <div style="display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.5rem;">
+          <div style="display: flex; justify-content: space-between; align-items: center;">
+            <span style="color: var(--text-primary, #1e293b); font-size: 0.875rem;">Database</span>
+            <StatusIndicator status="success" label="Online" />
+          </div>
+          <div style="display: flex; justify-content: space-between; align-items: center;">
+            <span style="color: var(--text-primary, #1e293b); font-size: 0.875rem;">Analysis Engine</span>
+            <StatusIndicator status="warning" label="Degraded" :pulse="true" />
+          </div>
+          <div style="display: flex; justify-content: space-between; align-items: center;">
+            <span style="color: var(--text-primary, #1e293b); font-size: 0.875rem;">File Storage</span>
+            <StatusIndicator status="success" label="Online" />
+          </div>
+          <div style="display: flex; justify-content: space-between; align-items: center;">
+            <span style="color: var(--text-primary, #1e293b); font-size: 0.875rem;">Scheduler</span>
+            <StatusIndicator status="error" label="Offline" :pulse="true" />
+          </div>
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/StatusIndicator.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  status?: 'success' | 'warning' | 'error' | 'info' | 'muted'
+  label?: string
+  pulse?: boolean
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  status: 'muted',
+  label: undefined,
+  pulse: false,
+  color: undefined,
+})
+
+const dotStyle = computed(() =>
+  props.color ? { backgroundColor: props.color, color: props.color } : {}
+)
+</script>
+
+<template>
+  <span class="mld-status">
+    <span
+      :class="[
+        'mld-status__dot',
+        { [`mld-status__dot--${status}`]: !color },
+        { 'mld-status__dot--pulse': pulse },
+      ]"
+      :style="dotStyle"
+    />
+    <span v-if="label" class="mld-status__label">{{ label }}</span>
+  </span>
+</template>
+
+<style>
+@import '../styles/components/status-indicator.css';
+</style>

package/src/components/StepWizard.story.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import StepWizard from './StepWizard.vue'
+
+const mockSteps = [
+  { id: 'setup', label: 'Experiment Setup', description: 'Configure basic experiment parameters' },
+  { id: 'samples', label: 'Sample Selection', description: 'Choose samples and assign groups' },
+  { id: 'protocol', label: 'Protocol Design', description: 'Define the experimental protocol steps' },
+  { id: 'review', label: 'Review & Submit', description: 'Review and finalize the experiment' },
+]
+
+const optionalSteps = [
+  { id: 'setup', label: 'Setup' },
+  { id: 'config', label: 'Configuration', optional: true },
+  { id: 'validate', label: 'Validation' },
+  { id: 'submit', label: 'Submit' },
+]
+
+function initState() {
+  return {
+    steps: mockSteps,
+    currentStep: 0,
+    linear: true,
+    showProgress: true,
+    showStepNumbers: true,
+    size: 'md' as const,
+  }
+}
+</script>
+
+<template>
+  <Story title="Workflow/StepWizard">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 700px;">
+          <StepWizard
+            v-model="state.currentStep"
+            :steps="state.steps"
+            :linear="state.linear"
+            :show-progress="state.showProgress"
+            :show-step-numbers="state.showStepNumbers"
+            :size="state.size"
+          >
+            <template #step-setup>
+              <div style="padding: 1.5rem;">
+                <h3 style="margin: 0 0 0.5rem 0;">Experiment Setup</h3>
+                <p style="margin: 0; color: #6b7280;">Configure your experiment name, type, and basic parameters.</p>
+              </div>
+            </template>
+            <template #step-samples>
+              <div style="padding: 1.5rem;">
+                <h3 style="margin: 0 0 0.5rem 0;">Sample Selection</h3>
+                <p style="margin: 0; color: #6b7280;">Select the samples you want to include and assign them to groups.</p>
+              </div>
+            </template>
+            <template #step-protocol>
+              <div style="padding: 1.5rem;">
+                <h3 style="margin: 0 0 0.5rem 0;">Protocol Design</h3>
+                <p style="margin: 0; color: #6b7280;">Design your experimental protocol with step-by-step instructions.</p>
+              </div>
+            </template>
+            <template #step-review>
+              <div style="padding: 1.5rem;">
+                <h3 style="margin: 0 0 0.5rem 0;">Review & Submit</h3>
+                <p style="margin: 0; color: #6b7280;">Review all settings and submit your experiment for processing.</p>
+              </div>
+            </template>
+          </StepWizard>
+        </div>
+      </template>
+      <template #controls="{ state }">
+        <HstSlider v-model="state.currentStep" title="Current Step" :min="0" :max="3" />
+        <HstCheckbox v-model="state.linear" title="Linear" />
+        <HstCheckbox v-model="state.showProgress" title="Show Progress" />
+        <HstCheckbox v-model="state.showStepNumbers" title="Show Step Numbers" />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="[
+            { value: 'sm', label: 'Small' },
+            { value: 'md', label: 'Medium' },
+            { value: 'lg', label: 'Large' },
+          ]"
+        />
+      </template>
+    </Variant>
+
+    <Variant title="Non-Linear">
+      <div style="padding: 2rem; max-width: 700px;">
+        <StepWizard
+          :steps="mockSteps"
+          :model-value="1"
+          :linear="false"
+        >
+          <template #step-setup>
+            <div style="padding: 1.5rem;">Step 1 content (clickable from any step)</div>
+          </template>
+          <template #step-samples>
+            <div style="padding: 1.5rem;">Step 2 content (active)</div>
+          </template>
+          <template #step-protocol>
+            <div style="padding: 1.5rem;">Step 3 content</div>
+          </template>
+          <template #step-review>
+            <div style="padding: 1.5rem;">Step 4 content</div>
+          </template>
+        </StepWizard>
+      </div>
+    </Variant>
+
+    <Variant title="With Optional Steps">
+      <div style="padding: 2rem; max-width: 700px;">
+        <StepWizard
+          :steps="optionalSteps"
+          :model-value="0"
+        >
+          <template #step-setup>
+            <div style="padding: 1.5rem;">Setup content</div>
+          </template>
+          <template #step-config>
+            <div style="padding: 1.5rem;">Optional configuration step</div>
+          </template>
+          <template #step-validate>
+            <div style="padding: 1.5rem;">Validation content</div>
+          </template>
+          <template #step-submit>
+            <div style="padding: 1.5rem;">Submit content</div>
+          </template>
+        </StepWizard>
+      </div>
+    </Variant>
+
+    <Variant title="Small">
+      <div style="padding: 2rem; max-width: 500px;">
+        <StepWizard
+          :steps="mockSteps"
+          :model-value="2"
+          size="sm"
+        >
+          <template #step-setup>
+            <div style="padding: 1rem; font-size: 0.875rem;">Setup</div>
+          </template>
+          <template #step-samples>
+            <div style="padding: 1rem; font-size: 0.875rem;">Samples</div>
+          </template>
+          <template #step-protocol>
+            <div style="padding: 1rem; font-size: 0.875rem;">Protocol (active)</div>
+          </template>
+          <template #step-review>
+            <div style="padding: 1rem; font-size: 0.875rem;">Review</div>
+          </template>
+        </StepWizard>
+      </div>
+    </Variant>
+  </Story>
+</template>