@morscherlab/mint-sdk 1.0.0-alpha.2

package/src/components/AppTopBar.story.vue

@@ -0,0 +1,304 @@
+<script setup lang="ts">
+import AppTopBar from './AppTopBar.vue'
+import { ExperimentProvider } from '../__stories__/experiment-helpers'
+import type {
+  TopBarVariant,
+  TopBarPage,
+  TopBarTab,
+  PillNavItem,
+  PageSelectorItem,
+  AccountMenuItem,
+} from '../types'
+
+const variants: TopBarVariant[] = ['card', 'default']
+
+const samplePillNav: PillNavItem[] = [
+  { id: 'workspace', label: 'Workspace' },
+  { id: 'experiments', label: 'Experiments' },
+  { id: 'projects', label: 'Projects' },
+  { id: 'admin', label: 'Admin' },
+]
+
+const samplePageSelector: PageSelectorItem[] = [
+  { id: 'workspace', label: 'Workspace', hint: 'Home' },
+  { id: 'experiments', label: 'Experiments', hint: '28 mine · 142 total' },
+  { id: 'projects', label: 'Projects', hint: '12 projects' },
+  { id: 'plugins', label: 'Plugins', hint: '4 installed' },
+  { id: 'admin', label: 'Admin', hint: 'Platform settings' },
+]
+
+// Theme is now surfaced as a top-level icon button (show-theme-toggle),
+// not as an account-menu item. Menu holds identity-level actions only.
+const sampleAccountMenu: AccountMenuItem[] = [
+  { id: 'profile', label: 'Profile' },
+  { id: 'settings', label: 'Settings' },
+  { id: 'admin', label: 'Admin', to: '/admin' },
+]
+
+const samplePages: TopBarPage[] = [
+  { id: 'dashboard', label: 'Dashboard', description: 'Overview and statistics' },
+  { id: 'experiments', label: 'Experiments', description: 'Manage experiments' },
+  { id: 'analysis', label: 'Analysis', description: 'Run analysis pipelines' },
+  { id: 'settings', label: 'Settings', disabled: true },
+]
+
+const sampleTabs: TopBarTab[] = [
+  { id: 'overview', label: 'Overview' },
+  { id: 'results', label: 'Results' },
+  {
+    id: 'export',
+    label: 'Export',
+    children: [
+      { id: 'export-csv', label: 'CSV', description: 'Comma-separated values' },
+      { id: 'export-xlsx', label: 'Excel', description: 'Microsoft Excel format' },
+      { id: 'export-pdf', label: 'PDF', description: 'Portable Document Format' },
+    ],
+  },
+]
+
+</script>
+
+<template>
+  <Story title="Layout/AppTopBar">
+    <!-- ─────────────── NEW DESIGN (v5) — Estrella-approved layout ─────────────── -->
+
+    <Variant title="Refresh · Experiments-view layout">
+      <!-- Exact layout used by the platform's Experiments and Projects pages:
+           title+subtitle on the left, pill-nav centered, theme-toggle +
+           avatar-with-name on the right. -->
+      <div style="padding: 2rem; background: var(--bg-primary); min-height: 12rem;">
+        <AppTopBar
+          variant="card"
+          title="Experiments"
+          subtitle="Manage and track your experiments"
+          :pill-nav="samplePillNav.slice(1, 3)"
+          current-pill-id="experiments"
+          show-theme-toggle
+          :show-standalone-label="false"
+          :account-menu="sampleAccountMenu"
+          user-name="Estrella"
+          user-initial="ES"
+          user-email="estrella@morscher.lab"
+          home-path=""
+        >
+          <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>
+          </template>
+        </AppTopBar>
+      </div>
+    </Variant>
+
+    <Variant title="Refresh · Workspace">
+      <div style="padding: 2rem; background: var(--bg-primary); min-height: 12rem;">
+        <AppTopBar
+          :page-selector="samplePageSelector"
+          current-page-selector-id="workspace"
+          :pill-nav="samplePillNav"
+          current-pill-id="workspace"
+          show-theme-toggle
+          :account-menu="sampleAccountMenu"
+          user-name="Estrella"
+          user-initial="ES"
+          user-email="estrella@morscher.lab"
+          :show-notifications="true"
+          :has-notification-dot="true"
+          home-path=""
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Refresh · Experiments">
+      <div style="padding: 2rem; background: var(--bg-primary); min-height: 12rem;">
+        <ExperimentProvider>
+          <AppTopBar
+            :page-selector="samplePageSelector"
+            current-page-selector-id="experiments"
+            :pill-nav="samplePillNav"
+            current-pill-id="experiments"
+            show-theme-toggle
+            :account-menu="sampleAccountMenu"
+            user-name="Estrella"
+            user-initial="ES"
+            user-email="estrella@morscher.lab"
+            :show-notifications="true"
+            home-path=""
+          />
+        </ExperimentProvider>
+      </div>
+    </Variant>
+
+    <Variant title="Refresh · Inside plugin">
+      <div style="padding: 2rem; background: var(--bg-primary); min-height: 12rem;">
+        <ExperimentProvider>
+          <AppTopBar
+            :page-selector="samplePageSelector"
+            current-page-selector-id="plugins"
+            :pill-nav="samplePillNav"
+            current-pill-id="experiments"
+            show-theme-toggle
+            :account-menu="sampleAccountMenu"
+            user-name="Estrella"
+            user-initial="ES"
+            user-email="estrella@morscher.lab"
+            :show-notifications="true"
+            home-path=""
+          />
+        </ExperimentProvider>
+      </div>
+    </Variant>
+
+    <Variant title="Refresh · Admin">
+      <div style="padding: 2rem; background: var(--bg-primary); min-height: 12rem;">
+        <AppTopBar
+          :page-selector="samplePageSelector"
+          current-page-selector-id="admin"
+          :pill-nav="samplePillNav"
+          current-pill-id="admin"
+          show-theme-toggle
+          :account-menu="sampleAccountMenu"
+          user-name="Estrella"
+          user-initial="ES"
+          user-email="estrella@morscher.lab"
+          :show-notifications="true"
+          home-path=""
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Refresh · Empty experiment state">
+      <div style="padding: 2rem; background: var(--bg-primary); min-height: 12rem;">
+        <ExperimentProvider :preselect="false">
+          <AppTopBar
+            :page-selector="samplePageSelector"
+            current-page-selector-id="workspace"
+            :pill-nav="samplePillNav"
+            current-pill-id="workspace"
+            show-theme-toggle
+            :account-menu="sampleAccountMenu"
+            user-name="Estrella"
+            user-initial="ES"
+            user-email="estrella@morscher.lab"
+            :show-notifications="true"
+            home-path=""
+          />
+        </ExperimentProvider>
+      </div>
+    </Variant>
+
+    <Variant title="Refresh · Avatar without username (signed-out / dev)">
+      <!-- When no `user-name` is passed, the trigger collapses to the avatar
+           circle only. Matches platform's dev-mode (auth disabled) state. -->
+      <div style="padding: 2rem; background: var(--bg-primary); min-height: 12rem;">
+        <AppTopBar
+          variant="card"
+          title="Experiments"
+          subtitle="Manage and track your experiments"
+          :pill-nav="samplePillNav.slice(1, 3)"
+          current-pill-id="experiments"
+          show-theme-toggle
+          :show-standalone-label="false"
+          :account-menu="sampleAccountMenu"
+          home-path=""
+        />
+      </div>
+    </Variant>
+
+    <!-- ─────────────── LEGACY VARIANTS (backward compat) ─────────────── -->
+
+    <Variant title="Legacy · Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem;">
+          <AppTopBar
+            :title="state.title"
+            :subtitle="state.subtitle"
+            :variant="state.variant"
+            :show-logo="state.showLogo"
+            :show-theme-toggle="state.showThemeToggle"
+            :home-path="state.homePath"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.title" title="Title" />
+        <HstText v-model="state.subtitle" title="Subtitle" />
+        <HstSelect
+          v-model="state.variant"
+          title="Variant"
+          :options="variants.map(v => ({ label: v, value: v }))"
+        />
+        <HstCheckbox v-model="state.showLogo" title="Show Logo" />
+        <HstCheckbox v-model="state.showThemeToggle" title="Show Theme Toggle" />
+        <HstText v-model="state.homePath" title="Home Path" />
+      </template>
+    </Variant>
+
+    <Variant title="Legacy · Title + Subtitle">
+      <div style="padding: 2rem;">
+        <AppTopBar
+          title="Dose-Response Analysis"
+          subtitle="Experiment EXP-2024-001"
+          :show-theme-toggle="true"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Legacy · Breadcrumb with pages">
+      <div style="padding: 2rem;">
+        <AppTopBar
+          plugin-name="IC50 Calculator"
+          title="Results"
+          :pages="samplePages"
+          current-page-id="analysis"
+          variant="card"
+          :show-theme-toggle="true"
+          home-path=""
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Legacy · Tabs">
+      <div style="padding: 2rem;">
+        <AppTopBar
+          plugin-name="Plate Analyzer"
+          title="Experiment View"
+          :tabs="sampleTabs"
+          current-tab-id="overview"
+          variant="card"
+          home-path=""
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Legacy · Minimal (logo only)">
+      <div style="padding: 2rem;">
+        <AppTopBar :show-logo="true" home-path="/" />
+      </div>
+    </Variant>
+
+    <Variant title="Legacy · Experiment selector integration">
+      <div style="padding: 2rem;">
+        <ExperimentProvider>
+          <AppTopBar
+            plugin-name="IC50 Calculator"
+            title="Analysis"
+            variant="card"
+            :show-theme-toggle="true"
+            home-path=""
+          />
+        </ExperimentProvider>
+      </div>
+    </Variant>
+  </Story>
+</template>