71 lines
1.7 KiB
TypeScript
71 lines
1.7 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
|
import { orgA, userFixture, withPinia } from '@/stories/v2/_helpers'
|
|
import AppTopbar from '@/components-v2/layout/AppTopbar.vue'
|
|
import { useAuthStore } from '@/stores/useAuthStore'
|
|
import { useShellUiStore } from '@/stores/useShellUiStore'
|
|
|
|
/**
|
|
* AppTopbar reads useShellUiStore (theme / density), useAuthStore (user +
|
|
* currentOrganisation) and useBreadcrumb (route-driven — router is global
|
|
* in preview.ts). Each story seeds both stores on a fresh Pinia.
|
|
*/
|
|
function seedAuth(): void {
|
|
const auth = useAuthStore()
|
|
|
|
auth.user = userFixture
|
|
auth.organisations = [orgA]
|
|
}
|
|
|
|
const meta: Meta<typeof AppTopbar> = {
|
|
title: 'v2 Shell/AppTopbar',
|
|
component: AppTopbar,
|
|
tags: ['autodocs'],
|
|
render: () => ({
|
|
components: { AppTopbar },
|
|
template: `
|
|
<div class="min-h-[200px]">
|
|
<AppTopbar />
|
|
</div>
|
|
`,
|
|
}),
|
|
}
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof AppTopbar>
|
|
|
|
export const Default: Story = {
|
|
decorators: [withPinia(seedAuth)],
|
|
}
|
|
|
|
/**
|
|
* Dark mode is scoped to the story's own subtree via a `.dark` wrapper
|
|
* (Aura darkModeSelector is the `.dark` class — see plugins/primevue).
|
|
* Mutating <html> instead would leak into every other story stacked on
|
|
* the same autodocs page.
|
|
*/
|
|
export const DarkTheme: Story = {
|
|
decorators: [
|
|
withPinia(() => {
|
|
seedAuth()
|
|
useShellUiStore().setTheme('dark')
|
|
}),
|
|
],
|
|
render: () => ({
|
|
components: { AppTopbar },
|
|
template: `
|
|
<div class="dark min-h-[200px] bg-[var(--p-content-background)]">
|
|
<AppTopbar />
|
|
</div>
|
|
`,
|
|
}),
|
|
}
|
|
|
|
export const CompactDensity: Story = {
|
|
decorators: [
|
|
withPinia(() => {
|
|
seedAuth()
|
|
useShellUiStore().setDensity('compact')
|
|
}),
|
|
],
|
|
}
|