@morscherlab/mld-sdk 0.6.0

package/src/components/BaseCheckbox.story.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import BaseCheckbox from './BaseCheckbox.vue'
+
+const sizes = ['sm', 'md', 'lg'] as const
+const checked = ref(true)
+</script>
+
+<template>
+  <Story title="Base Inputs/BaseCheckbox">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem;">
+          <BaseCheckbox
+            v-model="state.checked"
+            :label="state.label"
+            :disabled="state.disabled"
+            :size="state.size"
+          />
+          <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+            Checked: <code>{{ state.checked }}</code>
+          </p>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.label" title="Label" />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="sizes.map(s => ({ label: s, value: s }))"
+        />
+        <HstCheckbox v-model="state.checked" title="Checked" />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+      </template>
+    </Variant>
+
+    <Variant title="Sizes">
+      <div style="padding: 2rem; 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>
+          <BaseCheckbox v-model="checked" :label="`${size} checkbox`" :size="size" />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Without Label">
+      <div style="padding: 2rem; display: flex; gap: 1rem; align-items: center;">
+        <BaseCheckbox v-model="checked" />
+        <BaseCheckbox :model-value="false" />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled States">
+      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1rem;">
+        <BaseCheckbox :model-value="false" label="Disabled unchecked" disabled />
+        <BaseCheckbox :model-value="true" label="Disabled checked" disabled />
+      </div>
+    </Variant>
+
+    <Variant title="Form Group">
+      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 0.75rem;">
+        <p style="margin: 0 0 0.25rem; font-weight: 600; color: var(--text-primary, #e2e8f0);">Notification Preferences</p>
+        <BaseCheckbox :model-value="true" label="Email notifications" />
+        <BaseCheckbox :model-value="true" label="Push notifications" />
+        <BaseCheckbox :model-value="false" label="SMS notifications" />
+        <BaseCheckbox :model-value="false" label="Weekly digest" disabled />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/BaseCheckbox.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+interface Props {
+  modelValue?: boolean
+  label?: string
+  disabled?: boolean
+  size?: 'sm' | 'md' | 'lg'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  disabled: false,
+  size: 'md',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+function handleChange(event: Event) {
+  const target = event.target as HTMLInputElement
+  emit('update:modelValue', target.checked)
+}
+</script>
+
+<template>
+  <label
+    :class="[
+      'mld-checkbox',
+      props.disabled ? 'mld-checkbox--disabled' : '',
+    ]"
+  >
+    <div class="mld-checkbox__input-wrapper">
+      <input
+        type="checkbox"
+        :checked="props.modelValue"
+        :disabled="props.disabled"
+        :aria-label="props.label || 'Checkbox'"
+        class="mld-checkbox__native"
+        @change="handleChange"
+      />
+      <div
+        :class="[
+          'mld-checkbox__box',
+          `mld-checkbox__box--${props.size}`,
+          props.modelValue ? 'mld-checkbox__box--checked' : '',
+        ]"
+      >
+        <svg
+          v-if="props.modelValue"
+          :class="['mld-checkbox__icon', `mld-checkbox__icon--${props.size}`]"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+        >
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
+        </svg>
+      </div>
+    </div>
+    <span v-if="props.label" :class="['mld-checkbox__label', `mld-checkbox__label--${props.size}`]">
+      {{ props.label }}
+    </span>
+  </label>
+</template>
+
+<style>
+@import '../styles/components/checkbox.css';
+</style>

package/src/components/BaseInput.story.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import BaseInput from './BaseInput.vue'
+import FormField from './FormField.vue'
+
+const textValue = ref('Hello world')
+const numberValue = ref<number | undefined>(42)
+</script>
+
+<template>
+  <Story title="Base Inputs/BaseInput">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+          <FormField
+            :label="state.label"
+            :error="state.showError ? state.errorMessage : undefined"
+            :hint="state.showHint ? state.hintMessage : undefined"
+            :required="state.required"
+          >
+            <BaseInput
+              v-model="state.value"
+              :type="state.type"
+              :placeholder="state.placeholder"
+              :size="state.size"
+              :disabled="state.disabled"
+              :readonly="state.readonly"
+              :error="state.showError"
+            />
+          </FormField>
+          <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 }">
+        <HstText v-model="state.label" title="Label" />
+        <HstText v-model="state.placeholder" title="Placeholder" />
+        <HstSelect
+          v-model="state.type"
+          title="Type"
+          :options="['text', 'password', 'email', 'number', 'search', 'tel', 'url'].map(t => ({ label: t, value: t }))"
+        />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="['sm', 'md', 'lg'].map(s => ({ label: s, value: s }))"
+        />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+        <HstCheckbox v-model="state.readonly" title="Readonly" />
+        <HstCheckbox v-model="state.required" title="Required" />
+        <HstCheckbox v-model="state.showError" title="Show Error" />
+        <HstText v-model="state.errorMessage" title="Error Message" />
+        <HstCheckbox v-model="state.showHint" title="Show Hint" />
+        <HstText v-model="state.hintMessage" title="Hint Message" />
+      </template>
+    </Variant>
+
+    <Variant title="Text Input">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+        <FormField label="Username" hint="Enter your display name">
+          <BaseInput v-model="textValue" placeholder="e.g. john_doe" />
+        </FormField>
+        <p style="margin-top: 0.5rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+          v-model: <code>{{ textValue }}</code>
+        </p>
+      </div>
+    </Variant>
+
+    <Variant title="Number Input">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+        <FormField label="Sample Count" hint="How many samples?">
+          <BaseInput v-model="numberValue" type="number" placeholder="0" :min="0" :max="384" />
+        </FormField>
+        <p style="margin-top: 0.5rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+          v-model: <code>{{ numberValue }}</code> (type: {{ typeof numberValue }})
+        </p>
+      </div>
+    </Variant>
+
+    <Variant title="Sizes">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem;">
+        <FormField v-for="size in (['sm', 'md', 'lg'] as const)" :key="size" :label="`Size: ${size}`">
+          <BaseInput :size="size" :placeholder="`${size} input`" />
+        </FormField>
+      </div>
+    </Variant>
+
+    <Variant title="Error State">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+        <FormField label="Email" error="Please enter a valid email address" required>
+          <BaseInput type="email" model-value="not-an-email" error />
+        </FormField>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/BaseInput.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { InputType } from '../types'
+
+interface Props {
+  modelValue?: string | number
+  type?: InputType
+  placeholder?: string
+  disabled?: boolean
+  readonly?: boolean
+  error?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  autocomplete?: string
+  autofocus?: boolean
+  min?: number
+  max?: number
+  step?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'text',
+  disabled: false,
+  readonly: false,
+  error: false,
+  size: 'md',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number | null]
+  focus: [event: FocusEvent]
+  blur: [event: FocusEvent]
+  keydown: [event: KeyboardEvent]
+}>()
+
+function handleInput(event: Event) {
+  const target = event.target as HTMLInputElement
+  const value = props.type === 'number'
+    ? (target.value === '' ? null : Number(target.value))
+    : target.value
+  emit('update:modelValue', value as string | number)
+}
+</script>
+
+<template>
+  <input
+    :type="type"
+    :value="modelValue"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :readonly="readonly"
+    :autocomplete="autocomplete"
+    :autofocus="autofocus"
+    :min="min"
+    :max="max"
+    :step="step"
+    :class="[
+      'mld-input',
+      `mld-input--${size}`,
+      error ? 'mld-input--error' : '',
+      disabled ? 'mld-input--disabled' : '',
+    ]"
+    @input="handleInput"
+    @focus="emit('focus', $event)"
+    @blur="emit('blur', $event)"
+    @keydown="emit('keydown', $event)"
+  />
+</template>
+
+<style>
+@import '../styles/components/input.css';
+</style>

package/src/components/BaseModal.story.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import BaseModal from './BaseModal.vue'
+import BaseButton from './BaseButton.vue'
+import type { ModalSize } from '../types'
+
+const modalSizes: ModalSize[] = ['sm', 'md', 'lg', 'xl', 'full']
+const galleryOpen = ref<Record<string, boolean>>({
+  sm: false,
+  md: false,
+  lg: false,
+  xl: false,
+  full: false,
+  noClose: false,
+  footer: false,
+})
+</script>
+
+<template>
+  <Story title="Base Inputs/BaseModal">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
+          <BaseButton @click="state.open = true">
+            Open Modal
+          </BaseButton>
+          <BaseModal
+            v-model="state.open"
+            :title="state.title"
+            :size="state.size"
+            :closable="state.closable"
+            :close-on-overlay="state.closeOnOverlay"
+            :close-on-escape="state.closeOnEscape"
+          >
+            <p style="margin: 0; color: var(--text-primary, #e2e8f0);">
+              This is the modal body content. You can put any content here.
+            </p>
+            <template #footer>
+              <div style="display: flex; gap: 0.5rem; justify-content: flex-end;">
+                <BaseButton variant="secondary" @click="state.open = false">Cancel</BaseButton>
+                <BaseButton variant="primary" @click="state.open = false">Confirm</BaseButton>
+              </div>
+            </template>
+          </BaseModal>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.title" title="Title" />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="modalSizes.map(s => ({ label: s, value: s }))"
+        />
+        <HstCheckbox v-model="state.closable" title="Closable" />
+        <HstCheckbox v-model="state.closeOnOverlay" title="Close on Overlay" />
+        <HstCheckbox v-model="state.closeOnEscape" title="Close on Escape" />
+      </template>
+    </Variant>
+
+    <Variant title="All Sizes">
+      <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem;">
+        <BaseButton
+          v-for="size in modalSizes"
+          :key="size"
+          variant="secondary"
+          @click="galleryOpen[size] = true"
+        >
+          {{ size }}
+        </BaseButton>
+
+        <BaseModal
+          v-for="size in modalSizes"
+          :key="size"
+          v-model="galleryOpen[size]"
+          :title="`${size.toUpperCase()} Modal`"
+          :size="size"
+        >
+          <p style="margin: 0; color: var(--text-primary, #e2e8f0);">
+            This is a <strong>{{ size }}</strong> sized modal.
+          </p>
+        </BaseModal>
+      </div>
+    </Variant>
+
+    <Variant title="With Footer">
+      <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
+        <BaseButton @click="galleryOpen.footer = true">Open with Footer</BaseButton>
+        <BaseModal v-model="galleryOpen.footer" title="Confirm Action" size="sm">
+          <p style="margin: 0; color: var(--text-primary, #e2e8f0);">
+            Are you sure you want to proceed with this action?
+          </p>
+          <template #footer>
+            <div style="display: flex; gap: 0.5rem; justify-content: flex-end;">
+              <BaseButton variant="secondary" @click="galleryOpen.footer = false">Cancel</BaseButton>
+              <BaseButton variant="danger" @click="galleryOpen.footer = false">Delete</BaseButton>
+            </div>
+          </template>
+        </BaseModal>
+      </div>
+    </Variant>
+
+    <Variant title="Not Closable">
+      <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
+        <BaseButton @click="galleryOpen.noClose = true">Open Non-Closable</BaseButton>
+        <BaseModal
+          v-model="galleryOpen.noClose"
+          title="Processing..."
+          size="sm"
+          :closable="false"
+          :close-on-overlay="false"
+          :close-on-escape="false"
+        >
+          <p style="margin: 0; color: var(--text-primary, #e2e8f0);">
+            Please wait while we process your request. This modal cannot be dismissed.
+          </p>
+          <template #footer>
+            <div style="display: flex; justify-content: flex-end;">
+              <BaseButton variant="primary" @click="galleryOpen.noClose = false">Force Close (demo)</BaseButton>
+            </div>
+          </template>
+        </BaseModal>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/BaseModal.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { watch, onMounted, onUnmounted } from 'vue'
+import type { ModalSize } from '../types'
+
+interface Props {
+  modelValue: boolean
+  title?: string
+  size?: ModalSize
+  closable?: boolean
+  closeOnOverlay?: boolean
+  closeOnEscape?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'md',
+  closable: true,
+  closeOnOverlay: true,
+  closeOnEscape: true,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  close: []
+}>()
+
+function close() {
+  if (props.closable) {
+    emit('update:modelValue', false)
+    emit('close')
+  }
+}
+
+function handleOverlayClick(event: MouseEvent) {
+  if (props.closeOnOverlay && event.target === event.currentTarget) {
+    close()
+  }
+}
+
+function handleEscape(event: KeyboardEvent) {
+  if (props.closeOnEscape && event.key === 'Escape' && props.modelValue) {
+    close()
+  }
+}
+
+watch(() => props.modelValue, (isOpen) => {
+  if (isOpen) {
+    document.body.style.overflow = 'hidden'
+  } else {
+    document.body.style.overflow = ''
+  }
+})
+
+onMounted(() => {
+  document.addEventListener('keydown', handleEscape)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleEscape)
+  document.body.style.overflow = ''
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div
+        v-if="modelValue"
+        class="mld-modal"
+        @click="handleOverlayClick"
+      >
+        <!-- Overlay -->
+        <div class="mld-modal__overlay" />
+
+        <!-- Modal -->
+        <div
+          :class="[
+            'mld-modal__container',
+            `mld-modal__container--${size}`,
+          ]"
+          role="dialog"
+          aria-modal="true"
+        >
+          <!-- Header -->
+          <div v-if="title || closable" class="mld-modal__header">
+            <h3 v-if="title" class="mld-modal__title">
+              {{ title }}
+            </h3>
+            <button
+              v-if="closable"
+              type="button"
+              class="mld-modal__close"
+              aria-label="Close modal"
+              @click="close"
+            >
+              <svg class="mld-modal__close-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+                <path d="M18 6 6 18" /><path d="m6 6 12 12" />
+              </svg>
+            </button>
+          </div>
+
+          <!-- Body -->
+          <div class="mld-modal__body">
+            <slot />
+          </div>
+
+          <!-- Footer -->
+          <div v-if="$slots.footer" class="mld-modal__footer">
+            <slot name="footer" />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style>
+@import '../styles/components/modal.css';
+</style>

package/src/components/BasePill.story.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import BasePill from './BasePill.vue'
+import type { PillVariant, PillSize } from '../types'
+
+const variants: PillVariant[] = ['default', 'primary', 'success', 'warning', 'error', 'info', 'outline']
+const sizes: PillSize[] = ['sm', 'md', 'lg']
+</script>
+
+<template>
+  <Story title="Feedback/BasePill">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
+          <BasePill
+            :variant="state.variant"
+            :size="state.size"
+            :removable="state.removable"
+            :disabled="state.disabled"
+            @remove="() => console.log('Remove clicked')"
+          >
+            {{ state.label }}
+          </BasePill>
+        </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.removable" title="Removable" />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+      </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;">
+            <BasePill
+              v-for="variant in variants"
+              :key="variant"
+              :variant="variant"
+              :size="size"
+            >
+              {{ variant }}
+            </BasePill>
+          </div>
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Removable">
+      <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: center;">
+        <BasePill variant="primary" removable @remove="() => console.log('Removed')">
+          Sample A
+        </BasePill>
+        <BasePill variant="success" removable @remove="() => console.log('Removed')">
+          QC Passed
+        </BasePill>
+        <BasePill variant="warning" removable @remove="() => console.log('Removed')">
+          Review
+        </BasePill>
+        <BasePill variant="error" removable @remove="() => console.log('Removed')">
+          Failed
+        </BasePill>
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: center;">
+        <BasePill
+          v-for="variant in variants"
+          :key="variant"
+          :variant="variant"
+          disabled
+        >
+          {{ variant }}
+        </BasePill>
+      </div>
+    </Variant>
+
+    <Variant title="Practical Example - Tags">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <h3 style="margin: 0 0 0.75rem; color: var(--text-primary, #1e293b); font-size: 0.875rem; font-weight: 600;">
+          Experiment Tags
+        </h3>
+        <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
+          <BasePill variant="primary" removable>dose-response</BasePill>
+          <BasePill variant="info" removable>IC50</BasePill>
+          <BasePill variant="success" removable>validated</BasePill>
+          <BasePill variant="outline" removable>96-well</BasePill>
+          <BasePill variant="default" removable>oncology</BasePill>
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Practical Example - Status Labels">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <div style="display: flex; flex-direction: column; gap: 0.75rem;">
+          <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem;">
+            <span style="color: var(--text-primary, #1e293b); font-size: 0.875rem;">Plate PLT-001</span>
+            <BasePill variant="success" size="sm">Complete</BasePill>
+          </div>
+          <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem;">
+            <span style="color: var(--text-primary, #1e293b); font-size: 0.875rem;">Plate PLT-002</span>
+            <BasePill variant="warning" size="sm">In Progress</BasePill>
+          </div>
+          <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem;">
+            <span style="color: var(--text-primary, #1e293b); font-size: 0.875rem;">Plate PLT-003</span>
+            <BasePill variant="error" size="sm">Failed</BasePill>
+          </div>
+          <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem;">
+            <span style="color: var(--text-primary, #1e293b); font-size: 0.875rem;">Plate PLT-004</span>
+            <BasePill variant="default" size="sm">Pending</BasePill>
+          </div>
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>