Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 | import type { Meta, StoryObj } from '@storybook/react';
import { DashboardHeader } from './DashboardHeader';
const meta = {
title: 'Layout/DashboardHeader',
component: DashboardHeader,
parameters: {
layout: 'fullscreen',
inertia: {
auth: {
user: {
name: 'John Doe',
email: 'john@example.com',
role: 'admin',
avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=32&h=32&fit=crop&crop=face',
},
},
},
},
tags: ['autodocs'],
} satisfies Meta<typeof DashboardHeader>;
export default meta;
type Story = StoryObj<typeof meta>;
const sampleNotifications = [
{
id: '1',
title: 'New user registered',
message: 'Jane Smith has joined your organization',
time: '2 minutes ago',
read: false,
type: 'info' as const,
},
{
id: '2',
title: 'Payment received',
message: 'Monthly subscription payment processed successfully',
time: '1 hour ago',
read: false,
type: 'success' as const,
},
{
id: '3',
title: 'System maintenance',
message: 'Scheduled maintenance will begin in 30 minutes',
time: '2 hours ago',
read: true,
type: 'warning' as const,
},
{
id: '4',
title: 'Database backup failed',
message: 'Daily backup process encountered an error',
time: '1 day ago',
read: true,
type: 'error' as const,
},
{
id: '5',
title: 'Weekly report ready',
message: 'Your analytics report for this week is available',
time: '2 days ago',
read: true,
type: 'info' as const,
},
];
export const Default: Story = {
args: {
title: 'Dashboard',
notifications: sampleNotifications,
},
};
export const WithoutTitle: Story = {
args: {
notifications: sampleNotifications,
},
};
export const NoSearch: Story = {
args: {
title: 'Analytics',
showSearch: false,
notifications: sampleNotifications,
},
};
export const NoNotifications: Story = {
args: {
title: 'Settings',
showNotifications: false,
},
};
export const NoThemeToggle: Story = {
args: {
title: 'Profile',
showThemeToggle: false,
notifications: sampleNotifications,
},
};
export const MinimalHeader: Story = {
args: {
title: 'Simple Dashboard',
showSearch: false,
showNotifications: false,
showThemeToggle: false,
},
};
export const WithMobileMenu: Story = {
args: {
title: 'Mobile Dashboard',
onMenuClick: () => console.log('Menu clicked'),
notifications: sampleNotifications,
},
};
export const DarkMode: Story = {
args: {
title: 'Dark Dashboard',
isDarkMode: true,
onThemeToggle: () => console.log('Theme toggled'),
notifications: sampleNotifications,
},
};
export const LongTitle: Story = {
args: {
title: 'Very Long Dashboard Title That Should Truncate Properly',
notifications: sampleNotifications,
},
};
export const NoUnreadNotifications: Story = {
args: {
title: 'Dashboard',
notifications: sampleNotifications.map(n => ({ ...n, read: true })),
},
};
export const EmptyNotifications: Story = {
args: {
title: 'Dashboard',
notifications: [],
},
};
export const ManyUnreadNotifications: Story = {
args: {
title: 'Busy Dashboard',
notifications: [
...sampleNotifications,
...Array.from({ length: 10 }, (_, i) => ({
id: `extra-${i}`,
title: `Notification ${i + 6}`,
message: `This is notification number ${i + 6}`,
time: `${i + 3} hours ago`,
read: false,
type: 'info' as const,
})),
],
},
}; |