2c9c39a8a1
- Batch 6: FAB, FormField, FloatingInput, AvatarUpload - Batch 7: Modal, ConfirmationDialog, ImageViewerModal, ErrorDisplay, LoadingState - Batch 8: DataList, WaveformVisualizer, OptimizedImage, VirtualizedList - Batch 9: ImageCropper, LoadingSpinner, FocusTrap - Achieved total coverage for src/components/ui
63 lines
1.5 KiB
TypeScript
63 lines
1.5 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react';
|
|
import { ErrorDisplay } from './ErrorDisplay';
|
|
|
|
const meta = {
|
|
title: 'UI/ErrorDisplay',
|
|
component: ErrorDisplay,
|
|
tags: ['autodocs'],
|
|
argTypes: {
|
|
variant: {
|
|
control: 'select',
|
|
options: ['inline', 'banner', 'modal', 'card'],
|
|
},
|
|
severity: {
|
|
control: 'select',
|
|
options: ['error', 'warning', 'info'],
|
|
},
|
|
size: {
|
|
control: 'select',
|
|
options: ['sm', 'md', 'lg'],
|
|
},
|
|
},
|
|
} satisfies Meta<typeof ErrorDisplay>;
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
export const Default: Story = {
|
|
args: {
|
|
error: 'An unexpected error occurred.',
|
|
severity: 'error',
|
|
},
|
|
};
|
|
|
|
export const WarningBanner: Story = {
|
|
args: {
|
|
error: 'Your subscription is expiring soon.',
|
|
severity: 'warning',
|
|
variant: 'banner',
|
|
title: 'Payment Alert',
|
|
},
|
|
};
|
|
|
|
export const WithDetails: Story = {
|
|
args: {
|
|
error: {
|
|
message: 'Failed to fetch user data',
|
|
code: 'USER_NOT_FOUND',
|
|
status: 404,
|
|
details: { userId: '123' }
|
|
},
|
|
showDetails: true,
|
|
},
|
|
};
|
|
|
|
export const WithActions: Story = {
|
|
args: {
|
|
error: 'Network connection lost',
|
|
onRetry: () => console.log('Retrying...'),
|
|
actions: [
|
|
{ label: 'Check Status', onClick: () => console.log('Checking status') }
|
|
],
|
|
},
|
|
};
|