55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react';
|
|
import { ErrorBoundary } from './ErrorBoundary';
|
|
|
|
// Component that throws an error for testing
|
|
const ErrorThrower = ({ shouldThrow }: { shouldThrow?: boolean }) => {
|
|
if (shouldThrow) {
|
|
throw new Error('This is a test error for demonstrating ErrorBoundary');
|
|
}
|
|
return <div className="p-4 bg-green-100 text-green-800 rounded">Content rendered successfully!</div>;
|
|
};
|
|
|
|
const meta: Meta<typeof ErrorBoundary> = {
|
|
title: 'Components/ErrorBoundary',
|
|
component: ErrorBoundary,
|
|
parameters: {
|
|
layout: 'fullscreen',
|
|
// Prevent Storybook from re-rendering on error
|
|
chromatic: { disableSnapshot: true },
|
|
},
|
|
tags: ['autodocs'],
|
|
};
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof ErrorBoundary>;
|
|
|
|
export const NoError: Story = {
|
|
render: () => (
|
|
<ErrorBoundary>
|
|
<ErrorThrower shouldThrow={false} />
|
|
</ErrorBoundary>
|
|
),
|
|
};
|
|
|
|
export const WithError: Story = {
|
|
render: () => (
|
|
<ErrorBoundary>
|
|
<ErrorThrower shouldThrow={true} />
|
|
</ErrorBoundary>
|
|
),
|
|
};
|
|
|
|
export const WithCustomFallback: Story = {
|
|
render: () => (
|
|
<ErrorBoundary
|
|
fallback={
|
|
<div className="p-8 text-center bg-amber-100 text-amber-800 rounded-lg">
|
|
<h2 className="text-xl font-bold mb-2">Custom Fallback</h2>
|
|
<p>Something went wrong, but we have a custom fallback UI.</p>
|
|
</div>
|
|
}
|
|
>
|
|
<ErrorThrower shouldThrow={true} />
|
|
</ErrorBoundary>
|
|
),
|
|
};
|