@morscherlab/mint-sdk 1.0.0-rc.2 → 1.0.0-rc.5

package/src/composables/useProtocolTemplates.ts

@@ -1,30 +1,12 @@
 import { ref, computed, type Ref, type ComputedRef } from 'vue'
 import type { ProtocolStep, ProtocolStepType, ProtocolStepStatus } from '../types'
+import {
+  BUILT_IN_PROTOCOL_TEMPLATES,
+  type ParameterDefinition,
+  type StepTemplate,
+} from './protocolTemplateCatalog'
 
-// Parameter definition for step templates
-export interface ParameterDefinition {
-  key: string
-  label: string
-  type: 'number' | 'text' | 'select' | 'concentration' | 'temperature' | 'duration' | 'reagent'
-  unit?: string
-  options?: Array<{ value: string; label: string }>
-  required?: boolean
-  default?: unknown
-  min?: number
-  max?: number
-  placeholder?: string
-}
-
-// Step template definition
-export interface StepTemplate {
-  id: string
-  type: ProtocolStepType
-  name: string
-  description?: string
-  defaultDuration?: number
-  parameters: ParameterDefinition[]
-  isBuiltIn?: boolean
-}
+export type { ParameterDefinition, StepTemplate } from './protocolTemplateCatalog'
 
 // Validation result
 export interface ValidationResult {
@@ -45,306 +27,6 @@ export interface UseProtocolTemplatesReturn {
   formatParameterValue: (value: unknown, param: ParameterDefinition) => string
 }
 
-// Built-in templates
-const BUILT_IN_TEMPLATES: StepTemplate[] = [
-  {
-    id: 'builtin-incubation',
-    type: 'incubation',
-    name: 'Incubation',
-    description: 'Incubate samples at specified conditions',
-    defaultDuration: 60,
-    isBuiltIn: true,
-    parameters: [
-      {
-        key: 'temperature',
-        label: 'Temperature',
-        type: 'temperature',
-        unit: '°C',
-        required: true,
-        default: 37,
-        min: -80,
-        max: 100,
-      },
-      {
-        key: 'duration',
-        label: 'Duration',
-        type: 'duration',
-        unit: 'hours',
-        required: true,
-        default: 24,
-        min: 0,
-      },
-      {
-        key: 'co2',
-        label: 'CO2',
-        type: 'number',
-        unit: '%',
-        required: false,
-        default: 5,
-        min: 0,
-        max: 100,
-      },
-      {
-        key: 'humidity',
-        label: 'Humidity',
-        type: 'number',
-        unit: '%',
-        required: false,
-        default: 95,
-        min: 0,
-        max: 100,
-      },
-    ],
-  },
-  {
-    id: 'builtin-wash',
-    type: 'wash',
-    name: 'Wash',
-    description: 'Wash samples with buffer',
-    defaultDuration: 5,
-    isBuiltIn: true,
-    parameters: [
-      {
-        key: 'buffer',
-        label: 'Buffer',
-        type: 'select',
-        required: true,
-        default: 'PBS',
-        options: [
-          { value: 'PBS', label: 'PBS' },
-          { value: 'PBST', label: 'PBST' },
-          { value: 'TBS', label: 'TBS' },
-          { value: 'TBST', label: 'TBST' },
-          { value: 'Water', label: 'Water' },
-          { value: 'Other', label: 'Other' },
-        ],
-      },
-      {
-        key: 'volume',
-        label: 'Volume',
-        type: 'number',
-        unit: 'µL',
-        required: true,
-        default: 200,
-        min: 0,
-      },
-      {
-        key: 'cycles',
-        label: 'Wash Cycles',
-        type: 'number',
-        required: true,
-        default: 3,
-        min: 1,
-        max: 10,
-      },
-    ],
-  },
-  {
-    id: 'builtin-addition',
-    type: 'addition',
-    name: 'Addition',
-    description: 'Add reagent or compound to samples',
-    defaultDuration: 5,
-    isBuiltIn: true,
-    parameters: [
-      {
-        key: 'reagent',
-        label: 'Reagent',
-        type: 'text',
-        required: true,
-        placeholder: 'Enter reagent name',
-      },
-      {
-        key: 'volume',
-        label: 'Volume',
-        type: 'number',
-        unit: 'µL',
-        required: true,
-        default: 100,
-        min: 0,
-      },
-      {
-        key: 'concentration',
-        label: 'Concentration',
-        type: 'concentration',
-        required: false,
-      },
-    ],
-  },
-  {
-    id: 'builtin-measurement',
-    type: 'measurement',
-    name: 'Measurement',
-    description: 'Take measurements using specified instrument',
-    defaultDuration: 15,
-    isBuiltIn: true,
-    parameters: [
-      {
-        key: 'instrument',
-        label: 'Instrument',
-        type: 'select',
-        required: true,
-        options: [
-          { value: 'plate_reader', label: 'Plate Reader' },
-          { value: 'microscope', label: 'Microscope' },
-          { value: 'flow_cytometer', label: 'Flow Cytometer' },
-          { value: 'spectrophotometer', label: 'Spectrophotometer' },
-          { value: 'other', label: 'Other' },
-        ],
-      },
-      {
-        key: 'readout',
-        label: 'Readout Type',
-        type: 'text',
-        required: false,
-        placeholder: 'e.g., Absorbance 450nm',
-      },
-      {
-        key: 'notes',
-        label: 'Parameters',
-        type: 'text',
-        required: false,
-        placeholder: 'Additional parameters',
-      },
-    ],
-  },
-  {
-    id: 'builtin-centrifuge',
-    type: 'centrifuge',
-    name: 'Centrifuge',
-    description: 'Centrifuge samples',
-    defaultDuration: 10,
-    isBuiltIn: true,
-    parameters: [
-      {
-        key: 'speed',
-        label: 'Speed',
-        type: 'number',
-        unit: 'RPM',
-        required: true,
-        default: 1000,
-        min: 100,
-        max: 20000,
-      },
-      {
-        key: 'duration',
-        label: 'Duration',
-        type: 'number',
-        unit: 'min',
-        required: true,
-        default: 5,
-        min: 1,
-      },
-      {
-        key: 'temperature',
-        label: 'Temperature',
-        type: 'temperature',
-        unit: '°C',
-        required: false,
-        default: 4,
-        min: -10,
-        max: 40,
-      },
-    ],
-  },
-  {
-    id: 'builtin-transfer',
-    type: 'transfer',
-    name: 'Transfer',
-    description: 'Transfer samples between containers',
-    defaultDuration: 10,
-    isBuiltIn: true,
-    parameters: [
-      {
-        key: 'source',
-        label: 'Source',
-        type: 'text',
-        required: true,
-        placeholder: 'Source container',
-      },
-      {
-        key: 'destination',
-        label: 'Destination',
-        type: 'text',
-        required: true,
-        placeholder: 'Destination container',
-      },
-      {
-        key: 'volume',
-        label: 'Volume',
-        type: 'number',
-        unit: 'µL',
-        required: true,
-        default: 100,
-        min: 0,
-      },
-    ],
-  },
-  {
-    id: 'builtin-mix',
-    type: 'mix',
-    name: 'Mix',
-    description: 'Mix samples',
-    defaultDuration: 5,
-    isBuiltIn: true,
-    parameters: [
-      {
-        key: 'method',
-        label: 'Method',
-        type: 'select',
-        required: true,
-        default: 'pipette',
-        options: [
-          { value: 'pipette', label: 'Pipette mixing' },
-          { value: 'vortex', label: 'Vortex' },
-          { value: 'shaker', label: 'Orbital shaker' },
-          { value: 'inversion', label: 'Inversion' },
-        ],
-      },
-      {
-        key: 'duration',
-        label: 'Duration',
-        type: 'number',
-        unit: 'sec',
-        required: false,
-        default: 30,
-        min: 1,
-      },
-      {
-        key: 'speed',
-        label: 'Speed/Intensity',
-        type: 'text',
-        required: false,
-        placeholder: 'e.g., 300 RPM',
-      },
-    ],
-  },
-  {
-    id: 'builtin-custom',
-    type: 'custom',
-    name: 'Custom Step',
-    description: 'Custom protocol step',
-    defaultDuration: 15,
-    isBuiltIn: true,
-    parameters: [
-      {
-        key: 'description',
-        label: 'Description',
-        type: 'text',
-        required: true,
-        placeholder: 'Describe the step',
-      },
-      {
-        key: 'notes',
-        label: 'Notes',
-        type: 'text',
-        required: false,
-        placeholder: 'Additional notes',
-      },
-    ],
-  },
-]
-
 // Storage key for custom templates
 const STORAGE_KEY = 'mint-custom-protocol-templates'
 
@@ -385,21 +67,21 @@ export function useProtocolTemplates(): UseProtocolTemplatesReturn {
   const customTemplates = ref<StepTemplate[]>(loadCustomTemplates())
 
   const allTemplates = computed(() => {
-    return [...BUILT_IN_TEMPLATES, ...customTemplates.value]
+    return [...BUILT_IN_PROTOCOL_TEMPLATES, ...customTemplates.value]
   })
 
   function getTemplateByType(type: ProtocolStepType): StepTemplate | undefined {
     // First check custom templates, then built-in
     return (
       customTemplates.value.find((t) => t.type === type) ||
-      BUILT_IN_TEMPLATES.find((t) => t.type === type)
+      BUILT_IN_PROTOCOL_TEMPLATES.find((t) => t.type === type)
     )
   }
 
   function getTemplateById(id: string): StepTemplate | undefined {
     return (
       customTemplates.value.find((t) => t.id === id) ||
-      BUILT_IN_TEMPLATES.find((t) => t.id === id)
+      BUILT_IN_PROTOCOL_TEMPLATES.find((t) => t.id === id)
     )
   }
 
@@ -516,7 +198,7 @@ export function useProtocolTemplates(): UseProtocolTemplatesReturn {
   }
 
   return {
-    builtInTemplates: BUILT_IN_TEMPLATES,
+    builtInTemplates: BUILT_IN_PROTOCOL_TEMPLATES,
     customTemplates,
     allTemplates,
     getTemplateByType,

package/src/composables/useScheduleCalendarLayout.ts

@@ -0,0 +1,287 @@
+import { computed, type Ref } from 'vue'
+import type {
+  ScheduleView,
+  ScheduleEvent,
+  ScheduleBlockedSlot,
+  ScheduleEventStatus,
+} from '../types/components'
+import { formatTime } from './useTimeUtils'
+
+type ReadableRef<T> = Readonly<Ref<T>>
+
+export const SCHEDULE_SLOT_HEIGHT = 40
+
+export interface UseScheduleCalendarLayoutOptions {
+  currentView: ReadableRef<ScheduleView>
+  currentDate: ReadableRef<Date>
+  now: ReadableRef<Date>
+  events: ReadableRef<readonly ScheduleEvent[]>
+  blockedSlots: ReadableRef<readonly ScheduleBlockedSlot[]>
+  dayStartHour: ReadableRef<number>
+  dayEndHour: ReadableRef<number>
+  slotDuration: ReadableRef<number>
+  weekStartsOn: ReadableRef<0 | 1>
+  locale: ReadableRef<string>
+  showNowIndicator: ReadableRef<boolean>
+  slotHeight?: ReadableRef<number>
+}
+
+/** Builds ScheduleCalendar date ranges, event layout styles, and display labels. */
+export function useScheduleCalendarLayout(options: UseScheduleCalendarLayoutOptions) {
+  const slotHeight = computed(() => options.slotHeight?.value ?? SCHEDULE_SLOT_HEIGHT)
+  const totalSlots = computed(() => {
+    return ((options.dayEndHour.value - options.dayStartHour.value) * 60) / options.slotDuration.value
+  })
+
+  const timeLabels = computed(() => buildTimeLabels(
+    options.dayStartHour.value,
+    options.slotDuration.value,
+    totalSlots.value,
+  ))
+  const weekDays = computed(() => buildWeekDays(options.currentDate.value, options.weekStartsOn.value))
+  const visibleDays = computed(() => {
+    if (options.currentView.value === 'day') return [options.currentDate.value]
+    if (options.currentView.value === 'week') return weekDays.value
+    return []
+  })
+  const headerTitle = computed(() => buildHeaderTitle(
+    options.currentView.value,
+    options.currentDate.value,
+    weekDays.value,
+    options.locale.value,
+  ))
+  const monthDays = computed(() => buildMonthDays(options.currentDate.value, options.weekStartsOn.value))
+  const monthWeekdayLabels = computed(() => buildMonthWeekdayLabels(
+    options.locale.value,
+    options.weekStartsOn.value,
+  ))
+
+  function isToday(date: Date): boolean {
+    return isSameDay(date, options.now.value)
+  }
+
+  function getEventStyle(event: ScheduleEvent, dayDate: Date): Record<string, string> | null {
+    return getTimedItemStyle(
+      event.start,
+      event.end,
+      dayDate,
+      options.dayStartHour.value,
+      options.dayEndHour.value,
+      options.slotDuration.value,
+      slotHeight.value,
+      true,
+      slotHeight.value / 2,
+    )
+  }
+
+  function getBlockedStyle(slot: ScheduleBlockedSlot): Record<string, string> {
+    return getTimedItemStyle(
+      slot.start,
+      slot.end,
+      new Date(slot.start),
+      options.dayStartHour.value,
+      options.dayEndHour.value,
+      options.slotDuration.value,
+      slotHeight.value,
+      false,
+      0,
+    ) ?? { top: '0px', height: '0px' }
+  }
+
+  function getNowIndicatorStyle(): Record<string, string> | null {
+    if (!options.showNowIndicator.value) return null
+    const nowMin = dateToMinutes(options.now.value)
+    const dayStartMin = options.dayStartHour.value * 60
+    const dayEndMin = options.dayEndHour.value * 60
+    if (nowMin < dayStartMin || nowMin > dayEndMin) return null
+
+    const pixelsPerMin = slotHeight.value / options.slotDuration.value
+    return { top: `${(nowMin - dayStartMin) * pixelsPerMin}px` }
+  }
+
+  function getEventsForDay(day: Date): ScheduleEvent[] {
+    return eventsForDate(options.events.value, day)
+  }
+
+  function getEventsForDate(date: Date): ScheduleEvent[] {
+    return eventsForDate(options.events.value, date)
+  }
+
+  function getBlockedForDay(day: Date): ScheduleBlockedSlot[] {
+    return options.blockedSlots.value.filter((slot) => isSameDay(new Date(slot.start), day))
+  }
+
+  return {
+    totalSlots,
+    timeLabels,
+    weekDays,
+    visibleDays,
+    headerTitle,
+    monthDays,
+    monthWeekdayLabels,
+    isToday,
+    isSameDay,
+    getEventStyle,
+    getEventsForDay,
+    getEventsForDate,
+    getBlockedForDay,
+    getBlockedStyle,
+    getNowIndicatorStyle,
+    getStatusClass,
+    getMonthStatusClass,
+    formatEventTime,
+  }
+}
+
+export function parseScheduleModelDate(value?: Date | string): Date {
+  if (!value) return new Date()
+  if (value instanceof Date) return value
+  const d = new Date(value)
+  return isNaN(d.getTime()) ? new Date() : d
+}
+
+export function getWeekStart(date: Date, weekStartsOn: 0 | 1): Date {
+  const d = new Date(date)
+  const day = d.getDay()
+  const diff = (day - weekStartsOn + 7) % 7
+  d.setDate(d.getDate() - diff)
+  return d
+}
+
+export function isSameDay(a: Date, b: Date): boolean {
+  return a.toDateString() === b.toDateString()
+}
+
+function buildTimeLabels(dayStartHour: number, slotDuration: number, totalSlots: number): string[] {
+  const labels: string[] = []
+  for (let i = 0; i <= totalSlots; i++) {
+    const totalMinutes = dayStartHour * 60 + i * slotDuration
+    const hour = Math.floor(totalMinutes / 60)
+    const minute = totalMinutes % 60
+    labels.push(formatTime(hour, minute, '24h'))
+  }
+  return labels
+}
+
+function buildWeekDays(currentDate: Date, weekStartsOn: 0 | 1): Date[] {
+  const days: Date[] = []
+  const start = getWeekStart(currentDate, weekStartsOn)
+  for (let i = 0; i < 7; i++) {
+    const d = new Date(start)
+    d.setDate(d.getDate() + i)
+    days.push(d)
+  }
+  return days
+}
+
+function buildHeaderTitle(
+  view: ScheduleView,
+  currentDate: Date,
+  weekDays: Date[],
+  locale: string,
+): string {
+  if (view === 'day') {
+    return currentDate.toLocaleDateString(locale, {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    })
+  }
+  if (view === 'week') {
+    const first = weekDays[0]
+    const last = weekDays[6]
+    const sameMonth = first.getMonth() === last.getMonth()
+    if (sameMonth) {
+      return `${first.toLocaleDateString(locale, { month: 'short', day: 'numeric' })} - ${last.getDate()}, ${last.getFullYear()}`
+    }
+    return `${first.toLocaleDateString(locale, { month: 'short', day: 'numeric' })} - ${last.toLocaleDateString(locale, { month: 'short', day: 'numeric' })}, ${last.getFullYear()}`
+  }
+  return currentDate.toLocaleDateString(locale, { year: 'numeric', month: 'long' })
+}
+
+function buildMonthDays(currentDate: Date, weekStartsOn: 0 | 1): { date: Date; isCurrentMonth: boolean }[] {
+  const year = currentDate.getFullYear()
+  const month = currentDate.getMonth()
+  const firstDay = new Date(year, month, 1)
+  const lastDay = new Date(year, month + 1, 0)
+  const days: { date: Date; isCurrentMonth: boolean }[] = []
+
+  let startPadding = firstDay.getDay() - weekStartsOn
+  if (startPadding < 0) startPadding += 7
+
+  for (let i = startPadding - 1; i >= 0; i--) {
+    days.push({ date: new Date(year, month, -i), isCurrentMonth: false })
+  }
+
+  for (let i = 1; i <= lastDay.getDate(); i++) {
+    days.push({ date: new Date(year, month, i), isCurrentMonth: true })
+  }
+
+  const remaining = 42 - days.length
+  for (let i = 1; i <= remaining; i++) {
+    days.push({ date: new Date(year, month + 1, i), isCurrentMonth: false })
+  }
+
+  return days
+}
+
+function buildMonthWeekdayLabels(locale: string, weekStartsOn: 0 | 1): string[] {
+  const labels: string[] = []
+  const base = new Date(2024, 0, weekStartsOn === 1 ? 1 : 7)
+  for (let i = 0; i < 7; i++) {
+    const d = new Date(base)
+    d.setDate(d.getDate() + i)
+    labels.push(d.toLocaleDateString(locale, { weekday: 'short' }))
+  }
+  return labels
+}
+
+function getTimedItemStyle(
+  startValue: string,
+  endValue: string,
+  dayDate: Date,
+  dayStartHour: number,
+  dayEndHour: number,
+  slotDuration: number,
+  slotHeight: number,
+  requireSameDayEdge: boolean,
+  minimumHeight: number,
+): Record<string, string> | null {
+  const start = new Date(startValue)
+  const end = new Date(endValue)
+  if (requireSameDayEdge && !isSameDay(start, dayDate) && !isSameDay(end, dayDate)) return null
+
+  const dayStartMin = dayStartHour * 60
+  const startMin = Math.max(dateToMinutes(start), dayStartMin) - dayStartMin
+  const endMin = Math.min(dateToMinutes(end), dayEndHour * 60) - dayStartMin
+  const pixelsPerMin = slotHeight / slotDuration
+  return {
+    top: `${startMin * pixelsPerMin}px`,
+    height: `${Math.max((endMin - startMin) * pixelsPerMin, minimumHeight)}px`,
+  }
+}
+
+function eventsForDate(events: readonly ScheduleEvent[], date: Date): ScheduleEvent[] {
+  return events.filter((event) => isSameDay(new Date(event.start), date))
+}
+
+function dateToMinutes(date: Date): number {
+  return date.getHours() * 60 + date.getMinutes()
+}
+
+function getStatusClass(status?: ScheduleEventStatus): string {
+  if (!status) return 'mint-schedule__event--confirmed'
+  return `mint-schedule__event--${status}`
+}
+
+function getMonthStatusClass(status?: ScheduleEventStatus): string {
+  if (!status) return 'mint-schedule__month-event--confirmed'
+  return `mint-schedule__month-event--${status}`
+}
+
+function formatEventTime(event: ScheduleEvent): string {
+  const start = new Date(event.start)
+  const end = new Date(event.end)
+  return `${formatTime(start.getHours(), start.getMinutes())} - ${formatTime(end.getHours(), end.getMinutes())}`
+}