@morscherlab/mint-sdk 1.0.0-alpha.9 → 1.0.0-beta.2

package/src/components/SettingsModal.story.vue

@@ -1,11 +1,24 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { reactive, ref } from 'vue'
 import SettingsModal from './SettingsModal.vue'
-import type { SettingsTab } from '../types'
+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 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 customTabs: SettingsTab[] = [
   { id: 'general', label: 'General' },
@@ -13,7 +26,190 @@ const customTabs: SettingsTab[] = [
   { 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's FormFieldRenderer 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 sizes: Array<'md' | 'lg' | 'xl'> = ['md', 'lg', 'xl']
+const layouts: SettingsModalLayout[] = ['horizontal', 'vertical']
 </script>
 
 <template>
@@ -33,6 +229,7 @@ const sizes: Array<'md' | 'lg' | 'xl'> = ['md', 'lg', 'xl']
             :title="state.title"
             :show-appearance="state.showAppearance"
             :size="state.size"
+            :layout="state.layout"
           />
         </div>
       </template>
@@ -45,6 +242,11 @@ const sizes: Array<'md' | 'lg' | 'xl'> = ['md', 'lg', 'xl']
           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>
 
@@ -83,63 +285,153 @@ const sizes: Array<'md' | 'lg' | 'xl'> = ['md', 'lg', 'xl']
         >
           <template #tab-general>
             <div style="display: flex; flex-direction: column; gap: 1rem;">
-              <div>
-                <label style="display: block; font-size: 0.875rem; font-weight: 500; color: var(--text-primary, #1e293b); margin-bottom: 0.25rem;">Plugin Name</label>
-                <input
-                  type="text"
-                  value="IC50 Calculator"
-                  style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
-                />
-              </div>
-              <div>
-                <label style="display: block; font-size: 0.875rem; font-weight: 500; color: var(--text-primary, #1e293b); margin-bottom: 0.25rem;">Default Model</label>
-                <select style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;">
-                  <option>4-Parameter Logistic</option>
-                  <option>3-Parameter Logistic</option>
-                  <option>Linear</option>
-                </select>
-              </div>
+              <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.75rem;">
-              <label style="display: flex; align-items: center; gap: 0.5rem; color: var(--text-primary, #1e293b); font-size: 0.875rem;">
-                <input type="checkbox" checked /> Email on analysis complete
-              </label>
-              <label style="display: flex; align-items: center; gap: 0.5rem; color: var(--text-primary, #1e293b); font-size: 0.875rem;">
-                <input type="checkbox" /> Email on QC failure
-              </label>
-              <label style="display: flex; align-items: center; gap: 0.5rem; color: var(--text-primary, #1e293b); font-size: 0.875rem;">
-                <input type="checkbox" checked /> In-app notifications
-              </label>
+            <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.875rem; color: var(--text-muted, #94a3b8);">
+              <p style="margin: 0; font-size: 0.8125rem; color: var(--text-muted);">
                 Advanced settings for curve fitting and data processing.
               </p>
-              <div>
-                <label style="display: block; font-size: 0.875rem; font-weight: 500; color: var(--text-primary, #1e293b); margin-bottom: 0.25rem;">Max Iterations</label>
-                <input
-                  type="number"
-                  value="1000"
-                  style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
-                />
-              </div>
-              <div>
-                <label style="display: block; font-size: 0.875rem; font-weight: 500; color: var(--text-primary, #1e293b); margin-bottom: 0.25rem;">Convergence Threshold</label>
-                <input
-                  type="number"
-                  value="0.0001"
-                  step="0.0001"
-                  style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
-                />
+              <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="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>