@morscherlab/mint-sdk 1.2.0-beta.1 → 1.2.0-beta.3

package/src/components/SettingsModal.story.vue

@@ -1,524 +0,0 @@
-<script setup lang="ts">
-import { reactive, ref } from 'vue'
-import SettingsModal from './SettingsModal.vue'
-import FormField from './FormField.vue'
-import BaseInput from './BaseInput.vue'
-import BaseSelect from './BaseSelect.vue'
-import BaseCheckbox from './BaseCheckbox.vue'
-import BaseToggle from './BaseToggle.vue'
-import NumberInput from './NumberInput.vue'
-import { defineControlModel } from '../composables/useControlSchema'
-import type {
-  SettingsTab,
-  SettingsModalLayout,
-  SelectOption,
-  SettingsModalSchema,
-} from '../types'
-
-const basicOpen = ref(false)
-const customOpen = ref(false)
-const appearanceOnlyOpen = ref(false)
-const verticalOpen = ref(false)
-const schemaOpen = ref(false)
-const modelOpen = ref(false)
-
-const customTabs: SettingsTab[] = [
-  { id: 'general', label: 'General' },
-  { id: 'notifications', label: 'Notifications' },
-  { id: 'advanced', label: 'Advanced' },
-]
-
-// Reactive form state for the "With Custom Tabs" variant
-const customForm = reactive({
-  pluginName: 'IC50 Calculator',
-  defaultModel: '4pl',
-  emailComplete: true,
-  emailQc: false,
-  inApp: true,
-  maxIterations: 1000,
-  threshold: 0.0001,
-})
-
-const modelOptions: SelectOption<string>[] = [
-  { value: '4pl', label: '4-Parameter Logistic' },
-  { value: '3pl', label: '3-Parameter Logistic' },
-  { value: 'linear', label: 'Linear' },
-]
-
-// Inline SVG icon strings — passed via tab.icon and rendered with v-html.
-// Using raw strings keeps the story self-contained without an icon-component dep.
-const iconGeneral = `<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h0a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51h0a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82v0a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>`
-const iconModel = `<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>`
-const iconCurve = `<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>`
-const iconQc = `<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>`
-const iconBell = `<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>`
-const iconCode = `<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>`
-
-const verticalTabs: SettingsTab[] = [
-  { id: 'general', label: 'General', icon: iconGeneral, description: 'Plugin name, defaults, locale' },
-  { id: 'model', label: 'Model Parameters', icon: iconModel, description: 'Curve choice and bounds' },
-  { id: 'fitting', label: 'Curve Fitting', icon: iconCurve, description: 'Optimizer, weights, transforms' },
-  { id: 'qc', label: 'Quality Control', icon: iconQc, description: 'Outlier detection and thresholds' },
-  { id: 'notifications', label: 'Notifications', icon: iconBell, description: 'Email and in-app alerts' },
-  { id: 'advanced', label: 'Advanced', icon: iconCode, description: 'Numerics, debug, experimental' },
-]
-
-// Reactive form state for the "Vertical Layout" variant
-const vForm = reactive({
-  pluginName: 'IC50 Calculator',
-  locale: 'en-US',
-  curveModel: '4pl',
-  bottom: 0,
-  top: 100,
-  optimizer: 'lm',
-  logTransform: true,
-  inverseVariance: false,
-  outlier: 'grubbs',
-  minR2: 0.95,
-  emailComplete: true,
-  emailQc: false,
-  inApp: true,
-  slack: false,
-  maxIterations: 1000,
-  threshold: 0.0001,
-  bayesian: false,
-})
-
-const localeOptions: SelectOption<string>[] = [
-  { value: 'en-US', label: 'English (US)' },
-  { value: 'en-GB', label: 'English (UK)' },
-  { value: 'de-DE', label: 'Deutsch' },
-]
-
-const curveModelOptions: SelectOption<string>[] = [
-  { value: '4pl', label: '4-Parameter Logistic (4PL)' },
-  { value: '3pl', label: '3-Parameter Logistic (3PL)' },
-  { value: '5pl', label: '5-Parameter Logistic (5PL)' },
-  { value: 'linear', label: 'Linear' },
-]
-
-const optimizerOptions: SelectOption<string>[] = [
-  { value: 'lm', label: 'Levenberg-Marquardt' },
-  { value: 'trf', label: 'Trust Region Reflective' },
-  { value: 'nm', label: 'Nelder-Mead' },
-]
-
-const outlierOptions: SelectOption<string>[] = [
-  { value: 'grubbs', label: "Grubbs' test (α=0.05)" },
-  { value: 'iqr', label: 'Tukey IQR' },
-  { value: 'none', label: 'None' },
-]
-
-// ─────────── Schema-driven (recommended) ───────────
-// Plugin authors describe parameters once; the modal auto-renders every field
-// via the SDK form field registry. Compare to the "Vertical Layout"
-// variant above, which builds the same surface manually.
-const schemaSettings = ref<Record<string, unknown>>({
-  pluginName: 'IC50 Calculator',
-  locale: 'en-US',
-  curveModel: '4pl',
-  bottom: 0,
-  top: 100,
-  optimizer: 'lm',
-  logTransform: true,
-  inverseVariance: false,
-  outlier: 'grubbs',
-  minR2: 0.95,
-  emailComplete: true,
-  emailQc: false,
-  inApp: true,
-  slack: false,
-  maxIterations: 1000,
-  threshold: 0.0001,
-  bayesian: false,
-})
-
-const settingsSchema: SettingsModalSchema = {
-  groups: [
-    {
-      id: 'general',
-      label: 'General',
-      icon: iconGeneral,
-      description: 'Plugin name, defaults, locale',
-      fields: [
-        { name: 'pluginName', label: 'Plugin Display Name', type: 'text', hint: "Shown in the platform's plugin list and breadcrumbs." },
-        { name: 'locale', label: 'Locale', type: 'select', props: { options: localeOptions } },
-      ],
-    },
-    {
-      id: 'model',
-      label: 'Model Parameters',
-      icon: iconModel,
-      description: 'Curve choice and bounds',
-      columns: 2,
-      fields: [
-        { name: 'curveModel', label: 'Default Curve Model', type: 'select', colSpan: 2, props: { options: curveModelOptions } },
-        { name: 'bottom', label: 'Bottom bound', type: 'number', props: { step: 1 } },
-        { name: 'top', label: 'Top bound', type: 'number', props: { step: 1 } },
-      ],
-    },
-    {
-      id: 'fitting',
-      label: 'Curve Fitting',
-      icon: iconCurve,
-      description: 'Optimizer, weights, transforms',
-      fields: [
-        { name: 'optimizer', label: 'Optimizer', type: 'select', props: { options: optimizerOptions } },
-        { name: 'logTransform', label: 'Apply log-dose transform', type: 'toggle' },
-        { name: 'inverseVariance', label: 'Weight by inverse variance', type: 'toggle' },
-      ],
-    },
-    {
-      id: 'qc',
-      label: 'Quality Control',
-      icon: iconQc,
-      description: 'Outlier detection and thresholds',
-      fields: [
-        { name: 'outlier', label: 'Outlier method', type: 'select', props: { options: outlierOptions } },
-        {
-          name: 'minR2',
-          label: 'Min R² to accept fit',
-          type: 'number',
-          hint: 'Fits below this threshold are flagged for review.',
-          props: { step: 0.01, min: 0, max: 1 },
-        },
-      ],
-    },
-    {
-      id: 'notifications',
-      label: 'Notifications',
-      icon: iconBell,
-      description: 'Email and in-app alerts',
-      fields: [
-        { name: 'emailComplete', label: 'Email on analysis complete', type: 'checkbox' },
-        { name: 'emailQc', label: 'Email on QC failure', type: 'checkbox' },
-        { name: 'inApp', label: 'In-app notifications', type: 'checkbox' },
-        { name: 'slack', label: 'Slack mentions', type: 'checkbox' },
-      ],
-    },
-    {
-      id: 'advanced',
-      label: 'Advanced',
-      icon: iconCode,
-      description: 'Numerics, debug, experimental',
-      fields: [
-        { name: 'maxIterations', label: 'Max iterations', type: 'number', props: { step: 100, min: 1 } },
-        { name: 'threshold', label: 'Convergence threshold', type: 'number', props: { step: 0.0001 } },
-        { name: 'bayesian', label: 'Enable experimental Bayesian fitting', type: 'toggle' },
-      ],
-    },
-  ],
-}
-
-const settingsModel = defineControlModel({
-  views: {
-    settings: {
-      label: 'Settings',
-      sections: {
-        general: {
-          label: 'General',
-          description: 'Plugin name, defaults, locale',
-          icon: iconGeneral,
-          controls: {
-            pluginName: {
-              label: 'Plugin Display Name',
-              default: 'IC50 Calculator',
-              required: true,
-            },
-            locale: {
-              label: 'Locale',
-              default: 'en-US',
-              options: localeOptions,
-            },
-          },
-        },
-        model: {
-          label: 'Model Parameters',
-          description: 'Curve choice and bounds',
-          icon: iconModel,
-          columns: 2,
-          controls: {
-            curveModel: {
-              label: 'Default Curve Model',
-              default: '4pl',
-              options: curveModelOptions,
-            },
-            bottom: { type: 'number', label: 'Bottom bound', default: 0 },
-            top: { type: 'number', label: 'Top bound', default: 100 },
-          },
-        },
-        fitting: {
-          label: 'Curve Fitting',
-          description: 'Optimizer and transforms',
-          icon: iconCurve,
-          controls: {
-            optimizer: {
-              label: 'Optimizer',
-              default: 'lm',
-              options: optimizerOptions,
-            },
-            logTransform: {
-              label: 'Apply log-dose transform',
-              default: true,
-              type: 'toggle',
-            },
-          },
-        },
-      },
-    },
-  },
-})
-const modelSettings = ref<Record<string, unknown>>({})
-
-const sizes: Array<'md' | 'lg' | 'xl'> = ['md', 'lg', 'xl']
-const layouts: SettingsModalLayout[] = ['horizontal', 'vertical']
-</script>
-
-<template>
-  <Story title="Layout/SettingsModal">
-    <Variant title="Playground">
-      <template #default="{ state }">
-        <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
-          <button
-            type="button"
-            style="padding: 0.5rem 1rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; background: var(--bg-card, #fff); color: var(--text-primary, #1e293b); cursor: pointer; font-size: 0.875rem;"
-            @click="basicOpen = true"
-          >
-            Open Settings
-          </button>
-          <SettingsModal
-            v-model="basicOpen"
-            :title="state.title"
-            :show-appearance="state.showAppearance"
-            :size="state.size"
-            :layout="state.layout"
-          />
-        </div>
-      </template>
-
-      <template #controls="{ state }">
-        <HstText v-model="state.title" title="Title" />
-        <HstCheckbox v-model="state.showAppearance" title="Show Appearance" />
-        <HstSelect
-          v-model="state.size"
-          title="Size"
-          :options="sizes.map(s => ({ label: s, value: s }))"
-        />
-        <HstSelect
-          v-model="state.layout"
-          title="Layout"
-          :options="layouts.map(l => ({ label: l, value: l }))"
-        />
-      </template>
-    </Variant>
-
-    <Variant title="Appearance Only">
-      <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
-        <button
-          type="button"
-          style="padding: 0.5rem 1rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; background: var(--bg-card, #fff); color: var(--text-primary, #1e293b); cursor: pointer; font-size: 0.875rem;"
-          @click="appearanceOnlyOpen = true"
-        >
-          Appearance Settings
-        </button>
-        <SettingsModal
-          v-model="appearanceOnlyOpen"
-          title="Appearance"
-          :show-appearance="true"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="With Custom Tabs">
-      <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
-        <button
-          type="button"
-          style="padding: 0.5rem 1rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; background: var(--bg-card, #fff); color: var(--text-primary, #1e293b); cursor: pointer; font-size: 0.875rem;"
-          @click="customOpen = true"
-        >
-          Open Settings (Custom Tabs)
-        </button>
-        <SettingsModal
-          v-model="customOpen"
-          title="Plugin Settings"
-          :tabs="customTabs"
-          :show-appearance="true"
-          size="lg"
-        >
-          <template #tab-general>
-            <div style="display: flex; flex-direction: column; gap: 1rem;">
-              <FormField label="Plugin Name">
-                <BaseInput v-model="customForm.pluginName" />
-              </FormField>
-              <FormField label="Default Model">
-                <BaseSelect v-model="customForm.defaultModel" :options="modelOptions" />
-              </FormField>
-            </div>
-          </template>
-          <template #tab-notifications>
-            <div style="display: flex; flex-direction: column; gap: 0.625rem;">
-              <BaseCheckbox v-model="customForm.emailComplete" label="Email on analysis complete" />
-              <BaseCheckbox v-model="customForm.emailQc" label="Email on QC failure" />
-              <BaseCheckbox v-model="customForm.inApp" label="In-app notifications" />
-            </div>
-          </template>
-          <template #tab-advanced>
-            <div style="display: flex; flex-direction: column; gap: 1rem;">
-              <p style="margin: 0; font-size: 0.8125rem; color: var(--text-muted);">
-                Advanced settings for curve fitting and data processing.
-              </p>
-              <FormField label="Max Iterations">
-                <NumberInput v-model="customForm.maxIterations" :step="100" :min="1" />
-              </FormField>
-              <FormField label="Convergence Threshold">
-                <NumberInput v-model="customForm.threshold" :step="0.0001" />
-              </FormField>
-            </div>
-          </template>
-        </SettingsModal>
-      </div>
-    </Variant>
-
-    <Variant title="Vertical Layout (Complex Plugin)">
-      <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
-        <button
-          type="button"
-          style="padding: 0.5rem 1rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; background: var(--bg-card, #fff); color: var(--text-primary, #1e293b); cursor: pointer; font-size: 0.875rem;"
-          @click="verticalOpen = true"
-        >
-          Open Settings (Vertical)
-        </button>
-        <SettingsModal
-          v-model="verticalOpen"
-          title="IC50 Plugin Settings"
-          :tabs="verticalTabs"
-          :show-appearance="true"
-          size="xl"
-          layout="vertical"
-        >
-          <template #tab-general>
-            <div style="display: flex; flex-direction: column; gap: 1rem;">
-              <FormField label="Plugin Display Name" hint="Shown in the platform's plugin list and breadcrumbs.">
-                <BaseInput v-model="vForm.pluginName" />
-              </FormField>
-              <FormField label="Locale">
-                <BaseSelect v-model="vForm.locale" :options="localeOptions" />
-              </FormField>
-            </div>
-          </template>
-
-          <template #tab-model>
-            <div style="display: flex; flex-direction: column; gap: 1rem;">
-              <FormField label="Default Curve Model">
-                <BaseSelect v-model="vForm.curveModel" :options="curveModelOptions" />
-              </FormField>
-              <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;">
-                <FormField label="Bottom bound">
-                  <NumberInput v-model="vForm.bottom" :step="1" />
-                </FormField>
-                <FormField label="Top bound">
-                  <NumberInput v-model="vForm.top" :step="1" />
-                </FormField>
-              </div>
-            </div>
-          </template>
-
-          <template #tab-fitting>
-            <div style="display: flex; flex-direction: column; gap: 1rem;">
-              <FormField label="Optimizer">
-                <BaseSelect v-model="vForm.optimizer" :options="optimizerOptions" />
-              </FormField>
-              <BaseToggle v-model="vForm.logTransform" label="Apply log-dose transform" />
-              <BaseToggle v-model="vForm.inverseVariance" label="Weight by inverse variance" />
-            </div>
-          </template>
-
-          <template #tab-qc>
-            <div style="display: flex; flex-direction: column; gap: 1rem;">
-              <FormField label="Outlier method">
-                <BaseSelect v-model="vForm.outlier" :options="outlierOptions" />
-              </FormField>
-              <FormField label="Min R² to accept fit" hint="Fits below this threshold are flagged for review.">
-                <NumberInput v-model="vForm.minR2" :step="0.01" :min="0" :max="1" />
-              </FormField>
-            </div>
-          </template>
-
-          <template #tab-notifications>
-            <div style="display: flex; flex-direction: column; gap: 0.625rem;">
-              <BaseCheckbox v-model="vForm.emailComplete" label="Email on analysis complete" />
-              <BaseCheckbox v-model="vForm.emailQc" label="Email on QC failure" />
-              <BaseCheckbox v-model="vForm.inApp" label="In-app notifications" />
-              <BaseCheckbox v-model="vForm.slack" label="Slack mentions" />
-            </div>
-          </template>
-
-          <template #tab-advanced>
-            <div style="display: flex; flex-direction: column; gap: 1rem;">
-              <FormField label="Max iterations">
-                <NumberInput v-model="vForm.maxIterations" :step="100" :min="1" />
-              </FormField>
-              <FormField label="Convergence threshold">
-                <NumberInput v-model="vForm.threshold" :step="0.0001" />
-              </FormField>
-              <BaseToggle v-model="vForm.bayesian" label="Enable experimental Bayesian fitting" />
-            </div>
-          </template>
-        </SettingsModal>
-      </div>
-    </Variant>
-
-    <Variant title="Model Driven Settings">
-      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1rem; align-items: center;">
-        <button
-          type="button"
-          style="padding: 0.5rem 1rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; background: var(--bg-card, #fff); color: var(--text-primary, #1e293b); cursor: pointer; font-size: 0.875rem;"
-          @click="modelOpen = true"
-        >
-          Open Settings (from model)
-        </button>
-        <details style="font-size: 0.75rem; color: var(--text-secondary); max-width: 36rem; width: 100%;">
-          <summary style="cursor: pointer; user-select: none;">Live values</summary>
-          <pre style="margin: 0.5rem 0 0; padding: 0.75rem; background: var(--bg-tertiary); border-radius: 0.375rem; font-size: 0.6875rem; overflow-x: auto;">{{ JSON.stringify(modelSettings, null, 2) }}</pre>
-        </details>
-        <SettingsModal
-          v-model="modelOpen"
-          v-model:values="modelSettings"
-          title="IC50 Plugin Settings"
-          :model="settingsModel"
-          :show-appearance="true"
-          size="xl"
-          layout="vertical"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Schema-Driven (Auto-Render)">
-      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1rem; align-items: center;">
-        <button
-          type="button"
-          style="padding: 0.5rem 1rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; background: var(--bg-card, #fff); color: var(--text-primary, #1e293b); cursor: pointer; font-size: 0.875rem;"
-          @click="schemaOpen = true"
-        >
-          Open Settings (from schema)
-        </button>
-        <p style="margin: 0; font-size: 0.75rem; color: var(--text-muted); max-width: 32rem; text-align: center; line-height: 1.5;">
-          Plugin authors declare a <code style="font-size: 0.6875rem; padding: 0.125rem 0.25rem; background: var(--bg-tertiary); border-radius: 0.25rem;">SettingsModalSchema</code> once; the modal auto-renders SDK form components for every field. No per-tab template needed.
-        </p>
-        <details style="font-size: 0.75rem; color: var(--text-secondary); max-width: 36rem; width: 100%;">
-          <summary style="cursor: pointer; user-select: none;">Live values</summary>
-          <pre style="margin: 0.5rem 0 0; padding: 0.75rem; background: var(--bg-tertiary); border-radius: 0.375rem; font-size: 0.6875rem; overflow-x: auto;">{{ JSON.stringify(schemaSettings, null, 2) }}</pre>
-        </details>
-        <SettingsModal
-          v-model="schemaOpen"
-          v-model:values="schemaSettings"
-          title="IC50 Plugin Settings"
-          :schema="settingsSchema"
-          :show-appearance="true"
-          size="xl"
-          layout="vertical"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>