@morscherlab/mld-sdk 0.6.0

package/src/components/index.ts

@@ -0,0 +1,96 @@
+// Base components
+export { default as BaseButton } from './BaseButton.vue'
+export { default as BaseInput } from './BaseInput.vue'
+export { default as BaseTextarea } from './BaseTextarea.vue'
+export { default as BaseSelect } from './BaseSelect.vue'
+export { default as BaseCheckbox } from './BaseCheckbox.vue'
+export { default as BaseToggle } from './BaseToggle.vue'
+export { default as BaseRadioGroup } from './BaseRadioGroup.vue'
+export { default as BaseSlider } from './BaseSlider.vue'
+export { default as ColorSlider } from './ColorSlider.vue'
+export { default as BaseTabs } from './BaseTabs.vue'
+export { default as BaseModal } from './BaseModal.vue'
+export { default as SegmentedControl } from './SegmentedControl.vue'
+export { default as MultiSelect } from './MultiSelect.vue'
+export { default as BasePill } from './BasePill.vue'
+export { default as DropdownButton } from './DropdownButton.vue'
+export { default as Calendar } from './Calendar.vue'
+export { default as DataFrame } from './DataFrame.vue'
+
+// Form components
+export { default as FormField } from './FormField.vue'
+export { default as DatePicker } from './DatePicker.vue'
+export { default as TimePicker } from './TimePicker.vue'
+export { default as TagsInput } from './TagsInput.vue'
+export { default as NumberInput } from './NumberInput.vue'
+export { default as FileUploader } from './FileUploader.vue'
+
+// Feedback components
+export { default as AlertBox } from './AlertBox.vue'
+export { default as ToastNotification } from './ToastNotification.vue'
+
+// Action components
+export { default as IconButton } from './IconButton.vue'
+export { default as ThemeToggle } from './ThemeToggle.vue'
+export { default as SettingsButton } from './SettingsButton.vue'
+
+// Layout components
+export { default as CollapsibleCard } from './CollapsibleCard.vue'
+export { default as AppTopBar } from './AppTopBar.vue'
+export { default as AppSidebar } from './AppSidebar.vue'
+export { default as AppLayout } from './AppLayout.vue'
+export { default as AppContainer } from './AppContainer.vue'
+
+// Utility components
+export { default as Skeleton } from './Skeleton.vue'
+export { default as LoadingSpinner } from './LoadingSpinner.vue'
+export { default as Divider } from './Divider.vue'
+export { default as StatusIndicator } from './StatusIndicator.vue'
+export { default as ProgressBar } from './ProgressBar.vue'
+export { default as Avatar } from './Avatar.vue'
+export { default as EmptyState } from './EmptyState.vue'
+export { default as Breadcrumb } from './Breadcrumb.vue'
+export { default as Tooltip } from './Tooltip.vue'
+export { default as ConfirmDialog } from './ConfirmDialog.vue'
+export { default as ChartContainer } from './ChartContainer.vue'
+export { default as SettingsModal } from './SettingsModal.vue'
+
+// Biological experiment components
+export { default as WellPlate } from './WellPlate.vue'
+export { default as RackEditor } from './RackEditor.vue'
+export { default as SampleLegend } from './SampleLegend.vue'
+export { default as PlateMapEditor } from './PlateMapEditor.vue'
+export { default as ExperimentTimeline } from './ExperimentTimeline.vue'
+
+// Sample management components
+export { default as SampleSelector } from './SampleSelector.vue'
+export { default as GroupingModal } from './GroupingModal.vue'
+export { default as GroupAssigner } from './GroupAssigner.vue'
+
+// Lab/Experiment components
+export { default as MoleculeInput } from './MoleculeInput.vue'
+export { default as ConcentrationInput } from './ConcentrationInput.vue'
+export { default as DoseCalculator } from './DoseCalculator.vue'
+export { default as ReagentList } from './ReagentList.vue'
+export { default as SampleHierarchyTree } from './SampleHierarchyTree.vue'
+export { default as ProtocolStepEditor } from './ProtocolStepEditor.vue'
+
+// Scientific display components
+export { default as ScientificNumber } from './ScientificNumber.vue'
+export { default as ChemicalFormula } from './ChemicalFormula.vue'
+
+// Scientific input components
+export { default as FormulaInput } from './FormulaInput.vue'
+export { default as SequenceInput } from './SequenceInput.vue'
+export { default as UnitInput } from './UnitInput.vue'
+
+// Workflow components
+export { default as StepWizard } from './StepWizard.vue'
+export { default as AuditTrail } from './AuditTrail.vue'
+export { default as BatchProgressList } from './BatchProgressList.vue'
+
+// Scheduling / booking components
+export { default as DateTimePicker } from './DateTimePicker.vue'
+export { default as TimeRangeInput } from './TimeRangeInput.vue'
+export { default as ScheduleCalendar } from './ScheduleCalendar.vue'
+export { default as ResourceCard } from './ResourceCard.vue'

package/src/composables/index.ts

@@ -0,0 +1,87 @@
+export { useApi, type ApiClientOptions } from './useApi'
+export { useAuth } from './useAuth'
+export { usePasskey } from './usePasskey'
+export { useTheme } from './useTheme'
+export { useToast } from './useToast'
+export { usePlatformContext } from './usePlatformContext'
+export {
+  useForm,
+  type ValidationRule,
+  type FieldRules,
+  type FieldState,
+  type UseFormReturn,
+} from './useForm'
+export {
+  useAsync,
+  useAsyncBatch,
+  type AsyncError,
+  type AsyncState,
+  type UseAsyncReturn,
+  type UseAsyncOptions,
+} from './useAsync'
+export {
+  useWellPlateEditor,
+  type UseWellPlateEditorOptions,
+  type UseWellPlateEditorReturn,
+} from './useWellPlateEditor'
+export {
+  useConcentrationUnits,
+  type ConcentrationValue,
+  type ConcentrationUnit,
+  type MolarityUnit,
+  type MassVolumeUnit,
+  type PercentageUnit,
+  type UnitCategory,
+  type UseConcentrationUnitsReturn,
+} from './useConcentrationUnits'
+export {
+  useDoseCalculator,
+  type VolumeUnit,
+  type VolumeValue,
+  type DilutionParams,
+  type DilutionResult,
+  type SerialDilutionParams,
+  type SerialDilutionStep,
+  type SerialDilutionResult,
+  type WellConcentration,
+  type UseDoseCalculatorReturn,
+} from './useDoseCalculator'
+export {
+  useProtocolTemplates,
+  type ParameterDefinition,
+  type StepTemplate,
+  type ValidationResult,
+  type UseProtocolTemplatesReturn,
+} from './useProtocolTemplates'
+export {
+  useRackEditor,
+  type UseRackEditorOptions,
+  type UseRackEditorReturn,
+} from './useRackEditor'
+export {
+  useChemicalFormula,
+  ATOMIC_WEIGHTS,
+  type ParsedElement,
+  type FormulaParseResult,
+  type FormulaPart,
+  type FormulaPartType,
+} from './useChemicalFormula'
+export {
+  useSequenceUtils,
+  type SequenceType,
+  type SequenceStats,
+} from './useSequenceUtils'
+export {
+  parseTime,
+  formatTime,
+  generateTimeSlots,
+  rangesOverlap,
+  durationMinutes,
+  formatDuration,
+  isTimeInRange,
+  findAvailableSlots,
+  snapToSlot,
+  addMinutes,
+  compareTime,
+} from './useTimeUtils'
+export { useScheduleDrag } from './useScheduleDrag'

package/src/composables/useApi.ts

@@ -0,0 +1,145 @@
+import axios, { type AxiosInstance, type AxiosRequestConfig } from 'axios'
+import { useSettingsStore } from '../stores/settings'
+import { useAuthStore } from '../stores/auth'
+
+let apiClientInstance: AxiosInstance | null = null
+let interceptorAttached = false
+
+function getApiClient(): AxiosInstance {
+  if (!apiClientInstance) {
+    apiClientInstance = axios.create({
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+  }
+  return apiClientInstance
+}
+
+export interface ApiClientOptions {
+  baseUrl?: string
+  timeout?: number
+  withAuth?: boolean
+}
+
+export interface UseApiReturn {
+  client: AxiosInstance
+  get: <T>(url: string, config?: AxiosRequestConfig) => Promise<T>
+  post: <T>(url: string, data?: unknown, config?: AxiosRequestConfig) => Promise<T>
+  put: <T>(url: string, data?: unknown, config?: AxiosRequestConfig) => Promise<T>
+  patch: <T>(url: string, data?: unknown, config?: AxiosRequestConfig) => Promise<T>
+  delete: <T>(url: string, config?: AxiosRequestConfig) => Promise<T>
+  upload: <T>(url: string, file: File, fieldName?: string, additionalData?: Record<string, unknown>) => Promise<T>
+  download: (url: string, filename?: string) => Promise<string>
+  buildUrl: (path: string) => string
+  buildWsUrl: (path: string) => string
+}
+
+export function useApi(options: ApiClientOptions = {}): UseApiReturn {
+  const settingsStore = useSettingsStore()
+  const authStore = useAuthStore()
+  const apiClient = getApiClient()
+
+  // Attach interceptor only once
+  if (!interceptorAttached) {
+    apiClient.interceptors.request.use((config) => {
+      // Set base URL from settings or options
+      config.baseURL = options.baseUrl ?? settingsStore.getApiBaseUrl()
+      config.timeout = options.timeout ?? settingsStore.requestTimeout
+
+      // Add Authorization header if token exists and auth is not explicitly disabled
+      if (options.withAuth !== false && authStore.token) {
+        config.headers.Authorization = `Bearer ${authStore.token}`
+      }
+
+      return config
+    })
+    interceptorAttached = true
+  }
+
+  // Generic request methods
+  async function get<T>(url: string, config?: AxiosRequestConfig): Promise<T> {
+    const response = await apiClient.get<T>(url, config)
+    return response.data
+  }
+
+  async function post<T>(url: string, data?: unknown, config?: AxiosRequestConfig): Promise<T> {
+    const response = await apiClient.post<T>(url, data, config)
+    return response.data
+  }
+
+  async function put<T>(url: string, data?: unknown, config?: AxiosRequestConfig): Promise<T> {
+    const response = await apiClient.put<T>(url, data, config)
+    return response.data
+  }
+
+  async function patch<T>(url: string, data?: unknown, config?: AxiosRequestConfig): Promise<T> {
+    const response = await apiClient.patch<T>(url, data, config)
+    return response.data
+  }
+
+  async function del<T>(url: string, config?: AxiosRequestConfig): Promise<T> {
+    const response = await apiClient.delete<T>(url, config)
+    return response.data
+  }
+
+  // File upload helper
+  async function upload<T>(url: string, file: File, fieldName = 'file', additionalData?: Record<string, unknown>): Promise<T> {
+    const formData = new FormData()
+    formData.append(fieldName, file)
+
+    if (additionalData) {
+      Object.entries(additionalData).forEach(([key, value]) => {
+        if (value !== undefined && value !== null) {
+          formData.append(key, typeof value === 'object' ? JSON.stringify(value) : String(value))
+        }
+      })
+    }
+
+    const response = await apiClient.post<T>(url, formData, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+    })
+    return response.data
+  }
+
+  // Download helper - returns blob URL
+  async function download(url: string, filename?: string): Promise<string> {
+    const response = await apiClient.get(url, { responseType: 'blob' })
+    const blob = new Blob([response.data])
+    const blobUrl = URL.createObjectURL(blob)
+
+    // Optionally trigger download
+    if (filename) {
+      const link = document.createElement('a')
+      link.href = blobUrl
+      link.download = filename
+      link.click()
+    }
+
+    return blobUrl
+  }
+
+  // Build full URL for external use (e.g., <a href="...">)
+  function buildUrl(path: string): string {
+    const baseUrl = options.baseUrl ?? settingsStore.getApiBaseUrl()
+    return `${baseUrl}${path}`
+  }
+
+  // WebSocket URL builder
+  function buildWsUrl(path: string): string {
+    return `${settingsStore.getWsBaseUrl()}${path}`
+  }
+
+  return {
+    client: apiClient,
+    get,
+    post,
+    put,
+    patch,
+    delete: del,
+    upload,
+    download,
+    buildUrl,
+    buildWsUrl,
+  }
+}

package/src/composables/useAsync.ts

@@ -0,0 +1,322 @@
+import { ref, computed, type Ref, type ComputedRef } from 'vue'
+
+/**
+ * Error type for async operations.
+ */
+export interface AsyncError {
+  message: string
+  code?: string
+  details?: Record<string, unknown>
+  originalError?: unknown
+}
+
+/**
+ * State of an async operation.
+ */
+export type AsyncState = 'idle' | 'loading' | 'success' | 'error'
+
+/**
+ * Return type for useAsync composable.
+ */
+export interface UseAsyncReturn<T> {
+  // Data
+  data: Ref<T | null>
+  error: Ref<AsyncError | null>
+
+  // State
+  state: Ref<AsyncState>
+  isIdle: ComputedRef<boolean>
+  isLoading: ComputedRef<boolean>
+  isSuccess: ComputedRef<boolean>
+  isError: ComputedRef<boolean>
+
+  // Methods
+  execute: (...args: unknown[]) => Promise<T | null>
+  reset: () => void
+  setData: (data: T | null) => void
+  setError: (error: AsyncError | null) => void
+}
+
+/**
+ * Options for useAsync.
+ */
+export interface UseAsyncOptions<T> {
+  // Initial data value
+  initialData?: T | null
+
+  // Whether to run immediately on creation
+  immediate?: boolean
+
+  // Arguments for immediate execution
+  immediateArgs?: unknown[]
+
+  // Transform error into AsyncError
+  transformError?: (error: unknown) => AsyncError
+
+  // Called on success
+  onSuccess?: (data: T) => void
+
+  // Called on error
+  onError?: (error: AsyncError) => void
+
+  // Reset data on new execution
+  resetOnExecute?: boolean
+}
+
+/**
+ * Default error transformer.
+ */
+function defaultTransformError(error: unknown): AsyncError {
+  if (error instanceof Error) {
+    return {
+      message: error.message,
+      originalError: error,
+    }
+  }
+
+  if (typeof error === 'object' && error !== null) {
+    const errorObj = error as Record<string, unknown>
+
+    // Handle Axios-like errors
+    if ('response' in errorObj && errorObj.response) {
+      const response = errorObj.response as Record<string, unknown>
+      const data = response.data as Record<string, unknown> | undefined
+
+      return {
+        message: (data?.detail as string) || (data?.message as string) || 'Request failed',
+        code: String(response.status),
+        details: data,
+        originalError: error,
+      }
+    }
+
+    // Handle generic error objects
+    return {
+      message: (errorObj.message as string) || 'Unknown error',
+      code: errorObj.code as string | undefined,
+      details: errorObj,
+      originalError: error,
+    }
+  }
+
+  return {
+    message: String(error),
+    originalError: error,
+  }
+}
+
+/**
+ * Composable for managing async operation state.
+ *
+ * Provides standardized loading, error, and success state management
+ * for any async function.
+ *
+ * @param asyncFn - The async function to wrap
+ * @param options - Configuration options
+ *
+ * @example
+ * ```typescript
+ * // Basic usage
+ * const { data, isLoading, error, execute } = useAsync(
+ *   async (id: string) => {
+ *     const response = await api.get(`/users/${id}`)
+ *     return response.data
+ *   }
+ * )
+ *
+ * // Execute the function
+ * await execute('user-123')
+ *
+ * // In template
+ * <div v-if="isLoading">Loading...</div>
+ * <div v-else-if="error">{{ error.message }}</div>
+ * <div v-else-if="data">{{ data.name }}</div>
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // With options
+ * const { data, execute } = useAsync(
+ *   fetchUser,
+ *   {
+ *     immediate: true,
+ *     immediateArgs: ['default-user'],
+ *     onSuccess: (user) => console.log('Fetched:', user.name),
+ *     onError: (error) => toast.error(error.message),
+ *   }
+ * )
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Form submission
+ * const { isLoading, error, execute: submit } = useAsync(
+ *   async (formData: FormData) => {
+ *     await api.post('/submit', formData)
+ *   },
+ *   {
+ *     onSuccess: () => {
+ *       toast.success('Submitted!')
+ *       router.push('/success')
+ *     },
+ *   }
+ * )
+ *
+ * const handleSubmit = () => submit(new FormData(formRef.value))
+ * ```
+ */
+export function useAsync<T>(
+  asyncFn: (...args: unknown[]) => Promise<T>,
+  options: UseAsyncOptions<T> = {}
+): UseAsyncReturn<T> {
+  const {
+    initialData = null,
+    immediate = false,
+    immediateArgs = [],
+    transformError = defaultTransformError,
+    onSuccess,
+    onError,
+    resetOnExecute = false,
+  } = options
+
+  // State
+  const data = ref<T | null>(initialData) as Ref<T | null>
+  const error = ref<AsyncError | null>(null)
+  const state = ref<AsyncState>('idle')
+
+  // Computed state helpers
+  const isIdle = computed(() => state.value === 'idle')
+  const isLoading = computed(() => state.value === 'loading')
+  const isSuccess = computed(() => state.value === 'success')
+  const isError = computed(() => state.value === 'error')
+
+  // Execute the async function
+  async function execute(...args: unknown[]): Promise<T | null> {
+    state.value = 'loading'
+    error.value = null
+
+    if (resetOnExecute) {
+      data.value = null
+    }
+
+    try {
+      const result = await asyncFn(...args)
+      data.value = result
+      state.value = 'success'
+      onSuccess?.(result)
+      return result
+    } catch (e) {
+      const asyncError = transformError(e)
+      error.value = asyncError
+      state.value = 'error'
+      onError?.(asyncError)
+      return null
+    }
+  }
+
+  // Reset to initial state
+  function reset(): void {
+    data.value = initialData
+    error.value = null
+    state.value = 'idle'
+  }
+
+  // Manual data setter
+  function setData(newData: T | null): void {
+    data.value = newData
+    if (newData !== null) {
+      state.value = 'success'
+      error.value = null
+    }
+  }
+
+  // Manual error setter
+  function setError(newError: AsyncError | null): void {
+    error.value = newError
+    if (newError !== null) {
+      state.value = 'error'
+    }
+  }
+
+  // Execute immediately if requested
+  if (immediate) {
+    execute(...immediateArgs)
+  }
+
+  return {
+    data,
+    error,
+    state,
+    isIdle,
+    isLoading,
+    isSuccess,
+    isError,
+    execute,
+    reset,
+    setData,
+    setError,
+  }
+}
+
+/**
+ * Create a batch of async operations that can be executed in parallel.
+ *
+ * @example
+ * ```typescript
+ * const { results, isLoading, execute } = useAsyncBatch([
+ *   () => fetchUser(userId),
+ *   () => fetchPosts(userId),
+ *   () => fetchComments(userId),
+ * ])
+ *
+ * await execute()
+ * // results.value = [user, posts, comments]
+ * ```
+ */
+export function useAsyncBatch<T extends readonly (() => Promise<unknown>)[]>(
+  asyncFns: T
+): {
+  results: Ref<{ [K in keyof T]: Awaited<ReturnType<T[K]>> | null }>
+  errors: Ref<(AsyncError | null)[]>
+  isLoading: Ref<boolean>
+  execute: () => Promise<void>
+  reset: () => void
+} {
+  type Results = { [K in keyof T]: Awaited<ReturnType<T[K]>> | null }
+
+  const results = ref<Results>(asyncFns.map(() => null) as unknown as Results) as Ref<Results>
+  const errors = ref<(AsyncError | null)[]>(asyncFns.map(() => null))
+  const isLoading = ref(false)
+
+  async function execute(): Promise<void> {
+    isLoading.value = true
+    errors.value = asyncFns.map(() => null)
+
+    const promises = asyncFns.map(async (fn, index) => {
+      try {
+        const result = await fn()
+        ;(results.value as unknown[])[index] = result
+      } catch (e) {
+        errors.value[index] = defaultTransformError(e)
+        ;(results.value as unknown[])[index] = null
+      }
+    })
+
+    await Promise.all(promises)
+    isLoading.value = false
+  }
+
+  function reset(): void {
+    results.value = asyncFns.map(() => null) as unknown as Results
+    errors.value = asyncFns.map(() => null)
+    isLoading.value = false
+  }
+
+  return {
+    results,
+    errors,
+    isLoading,
+    execute,
+    reset,
+  }
+}