User Profile Story with Async Data

Create Storybook stories for a UserProfile component that load data asynchronously before rendering.

Capabilities

Story-Level Data Fetching

• The Admin story fetches admin user data (id: 1, name: "Admin User", email: "admin@example.com", role: "admin") asynchronously before rendering @test
• The RegularUser story fetches regular user data (id: 2, name: "Jane Smith", email: "jane@example.com", role: "user") asynchronously before rendering @test

Component-Level Data Fetching

• Both stories have access to shared configuration data (apiBaseUrl: "https://api.example.com", theme: "light") loaded at the component level @test

Data Access in Stories

• The Admin story passes both the user data and theme from loaded data to the UserProfile component @test
• The RegularUser story passes both the user data and theme from loaded data to the UserProfile component @test

Error Handling

• When the RegularUser story's data fetch fails, it provides fallback guest user data (id: 0, name: "Guest", email: "guest@example.com", role: "guest") @test

Implementation

@generates

API

The story file should export:

import type { Meta, StoryObj } from '@storybook/react';

// Type definitions for the data structures
interface User {
  id: number;
  name: string;
  email: string;
  role: string;
}

interface Config {
  apiBaseUrl: string;
  theme: string;
}

// Default export: Meta configuration for the UserProfile component
// - Component: UserProfile (imported from './UserProfile')
// - Title: 'Components/UserProfile'
// - Must include async data fetching mechanism that provides Config data available to all stories

// Named export: Admin story
// - Must fetch User data asynchronously before rendering
// - Must render UserProfile component with user data and theme from loaded config

// Named export: RegularUser story
// - Must fetch User data asynchronously before rendering with error handling
// - On fetch failure, must provide fallback guest user data
// - Must render UserProfile component with user data and theme from loaded config

Dependencies { .dependencies }

@storybook/react { .dependency }

Provides React-specific Storybook types and rendering support, including Meta, StoryObj, and the loader context system.

@satisfied-by