@morscherlab/mint-sdk 1.4.0-beta.2 → 1.4.0-beta.20

package/src/components/AppTopBar.onboarding.story.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { defineComponent, h, ref } from 'vue'
+import AppTopBar from './AppTopBar.vue'
+import BaseButton from './BaseButton.vue'
+import { defineOnboarding, provideOnboarding, useOnboarding } from '../composables/useOnboarding'
+import type { PillNavItem } from '../types'
+
+const pills: PillNavItem[] = [
+  { id: 'home', label: 'Home' },
+  { id: 'experiments', label: 'Experiments' },
+  { id: 'instruments', label: 'Instruments' },
+]
+
+const onboarding = defineOnboarding({
+  tours: [
+    {
+      id: 'intro',
+      title: 'The top bar',
+      steps: [
+        { id: 'pages', anchor: 'topbar-pills', title: 'Move between pages', body: 'Home, Experiments and Instruments are one click away on every page.' },
+        { id: 'new', anchor: 'story-new', title: 'Create an experiment', body: 'Click New experiment to go on.', placement: 'bottom-start', advanceOn: 'click' },
+        { id: 'help', anchor: 'topbar-help', title: 'Help', body: 'Open the checklist, play a tour again, or see what is new.', placement: 'bottom-end' },
+      ],
+    },
+  ],
+  checklist: [
+    { id: 'create', title: 'Create an experiment', action: { label: 'Open', run: () => {} } },
+    { id: 'project', title: 'Create a project', action: { label: 'Open', run: () => {} } },
+    { id: 'theme', title: 'Pick a theme' },
+  ],
+  whatsNew: [
+    { id: 'settings', anchor: 'topbar-settings', title: 'Palettes in Settings', body: 'Pick an accent color in Settings → Appearance.', placement: 'bottom-end' },
+  ],
+})
+
+// The stories are returning users with no state yet, so the news shows too.
+const OnboardingProvider = defineComponent({
+  props: { appId: { type: String, required: true }, news: Boolean },
+  setup(props, { slots }) {
+    const key = `mint.onboarding.${props.appId}.local`
+    if (props.news && localStorage.getItem(key) === null) localStorage.setItem(key, '["task:theme"]')
+    provideOnboarding(onboarding, { appId: props.appId, userId: 'local' })
+    return () => slots.default?.()
+  },
+})
+
+const PageBody = defineComponent({
+  setup() {
+    const state = useOnboarding()
+    return () => h('div', { style: 'padding: 1.5rem; display: flex; gap: 0.5rem' }, [
+      h(BaseButton, { 'data-onboarding': 'story-new', onClick: () => state?.complete('create') }, () => 'New experiment'),
+      h(BaseButton, { variant: 'secondary', onClick: () => { localStorage.clear(); location.reload() } }, () => 'Reset onboarding'),
+    ])
+  },
+})
+
+const pill = ref('home')
+</script>
+
+<template>
+  <Story title="Layout/AppTopBar/Onboarding" :layout="{ type: 'single', iframe: true }">
+    <Variant title="Tour, checklist and news">
+      <OnboardingProvider app-id="story-onboarding" news>
+        <AppTopBar v-model:pill="pill" :spec="{ pills, settings: { tabs: [] }, standaloneLabel: false }" title="MINT" />
+        <PageBody />
+      </OnboardingProvider>
+    </Variant>
+  </Story>
+</template>

package/src/components/AppTopBar.story.vue

@@ -1,14 +1,29 @@
 <script setup lang="ts">
 import AppTopBar from './AppTopBar.vue'
 import Avatar from './Avatar.vue'
+import PluginIcon from './PluginIcon.vue'
 import { ExperimentProvider } from '../__stories__/experiment-helpers'
+import { providePluginIdentity } from '../composables/pluginIdentity'
+import { ref, type App } from 'vue'
 import type {
   TopBarVariant,
   PillNavItem,
   PageSelectorItem,
   PluginInfo,
+  TopBarJob,
 } from '../types'
 
+const runSlotJobs: { label: string; job: TopBarJob | null }[] = [
+  { label: 'Idle', job: null },
+  { label: 'Running', job: { status: 'running', label: 'Extracting', percent: 40 } },
+  { label: 'Needs input', job: { status: 'awaiting_input', label: 'Decoding', percent: 62 } },
+  { label: 'Saved', job: { status: 'completed', label: 'Saved to EXP-0142' } },
+  { label: 'Failed', job: { status: 'failed', label: '1 failed' } },
+]
+
+// An index, not the job object: Histoire merges object state across updates.
+const liveRow = ref(0)
+
 const variants: TopBarVariant[] = ['card', 'default']
 
 const samplePillNav: PillNavItem[] = [
@@ -40,10 +55,12 @@ const samplePageSelector: PageSelectorItem[] = [
   { id: 'admin', label: 'Admin' },
 ]
 
+// The menu shows each hint as a second line; a page without one stays a single line.
 const samplePluginPages: PageSelectorItem[] = [
-  { id: 'peaks', label: 'Peak integration' },
-  { id: 'calibration', label: 'Calibration' },
-  { id: 'report', label: 'Report' },
+  { id: 'peaks', label: 'Peak integration', hint: 'Integrate peaks and review the fits per sample' },
+  { id: 'calibration', label: 'Calibration', hint: 'Fit standard curves and check their residuals' },
+  { id: 'report', label: 'Report', hint: 'Export concentrations for the experiment' },
+  { id: 'settings', label: 'Settings' },
 ]
 
 const samplePlugin: PluginInfo = {
@@ -59,6 +76,25 @@ const samplePlugin: PluginInfo = {
   settings_api: 'platform',
 }
 
+const samplePluginWithSubtitle: PluginInfo = {
+  ...samplePlugin,
+  id: 'ms-planner',
+  name: 'ms-planner',
+  display_name: 'MS Planner',
+  subtitle: 'Experiment Scheduler',
+  icon: 'calendar',
+  route_prefix: '/ms-planner',
+  api_prefix: '/api/ms-planner',
+}
+
+// The seed is module state: clear it when the variant unmounts.
+function seedIdentity({ app }: { app: App }) {
+  providePluginIdentity({
+    plugin: { name: 'ms-planner', displayName: 'MS Planner', subtitle: 'Experiment Scheduler', icon: 'calendar' },
+  })
+  app.onUnmount(() => providePluginIdentity({ plugin: { name: '' } }))
+}
+
 </script>
 
 <template>
@@ -82,18 +118,7 @@ const samplePlugin: PluginInfo = {
           pill="experiments"
         >
           <template #icon>
-            <div
-              style="width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #F97316 0%, #FB923C 100%);"
-            >
-              <svg
-                style="width: 1.25rem; height: 1.25rem; color: white;"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
-              </svg>
-            </div>
+            <PluginIcon size="topbar" />
           </template>
         </AppTopBar>
       </div>
@@ -136,6 +161,47 @@ const samplePlugin: PluginInfo = {
       </div>
     </Variant>
 
+    <Variant title="Run slot · Experiment and job">
+      <!-- The plugin picks the viewer's own job; the bar joins it to the experiment chip. Like LEAF Extract: no Save. -->
+      <div style="padding: 2rem; background: var(--bg-primary); display: grid; gap: 0.75rem;">
+        <ExperimentProvider :plugin="samplePlugin" :save="false">
+          <AppTopBar
+            v-for="row in runSlotJobs"
+            :key="row.label"
+            :spec="{ themeToggle: true, homePath: '' }"
+            :page-selector="samplePluginPages"
+            current-page-selector-id="peaks"
+            :job="row.job"
+          />
+        </ExperimentProvider>
+      </div>
+    </Variant>
+
+    <Variant title="Run slot · Animation">
+      <div style="padding: 2rem; background: var(--bg-primary); display: grid; gap: 0.75rem;">
+        <div style="display: flex; gap: 0.5rem;">
+          <button
+            v-for="(row, index) in runSlotJobs"
+            :key="row.label"
+            type="button"
+            data-run-slot-state
+            style="padding: 0.25rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-primary); cursor: pointer;"
+            @click="liveRow = index"
+          >
+            {{ row.label }}
+          </button>
+        </div>
+        <ExperimentProvider :plugin="samplePlugin" :save="false">
+          <AppTopBar
+            :spec="{ themeToggle: true, homePath: '' }"
+            :page-selector="samplePluginPages"
+            current-page-selector-id="peaks"
+            :job="runSlotJobs[liveRow].job"
+          />
+        </ExperimentProvider>
+      </div>
+    </Variant>
+
     <Variant title="Refresh · Admin">
       <div style="padding: 2rem; background: var(--bg-primary); min-height: 12rem;">
         <AppTopBar
@@ -223,6 +289,20 @@ const samplePlugin: PluginInfo = {
       </div>
     </Variant>
 
+    <Variant title="Identity · Integrated with subtitle">
+      <div style="padding: 2rem; background: var(--bg-primary); min-height: 12rem;">
+        <ExperimentProvider :plugin="samplePluginWithSubtitle">
+          <AppTopBar :spec="{ pills: samplePillNav, homePath: '' }" pill="workspace" />
+        </ExperimentProvider>
+      </div>
+    </Variant>
+
+    <Variant title="Identity · Standalone seeded" :setup-app="seedIdentity">
+      <div style="padding: 2rem;">
+        <AppTopBar :spec="{ pills: samplePillNav, homePath: '' }" pill="workspace" />
+      </div>
+    </Variant>
+
     <Variant title="Navigation · Page selector">
       <div style="padding: 2rem;">
         <AppTopBar
@@ -244,6 +324,16 @@ const samplePlugin: PluginInfo = {
       </div>
     </Variant>
 
+    <Variant title="Navigation · Pill nav overflow (More)">
+      <div style="padding: 2rem; min-height: 14rem;">
+        <AppTopBar
+          :spec="{ pills: ['Queue', 'Calendar', 'Utilization', 'Instruments', 'Reports', 'Settings', 'Logs'], homePath: '' }"
+          title="MS Planner"
+          pill="Reports"
+        />
+      </div>
+    </Variant>
+
     <Variant title="Navigation · Pill nav with dropdown and dot">
       <div style="padding: 2rem;">
         <AppTopBar