React Component Storybook Architect

Storybook architecture complete

Component
src/components/UserProfileCard/UserProfileCard.tsx

Storybook framework
@storybook/react-vite

Story format
CSF3

Props detected
11

Required props
4

Literal-union variants
2

Boolean UI states
3

Existing fixtures reused
2

Generated deterministic mock objects
3

Dark-mode support
DETECTED

Stories generated
9

Story matrix

1. Default
2. Compact
3. Detailed
4. Loading
5. Error
6. Disabled
7. EmptyBio
8. LongContent
9. Dark

Prop analysis

variant:
"compact" | "detailed"

status:
"online" | "offline" | "away"

loading:
boolean

disabled:
boolean

error:
string | undefined

user:
UserProfile

onMessage:
(userId: string) => void

Generated CSF3 structure

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

import { UserProfileCard } from './UserProfileCard';

const meta = {
  component: UserProfileCard,
  parameters: {
    layout: 'centered',
  },
} satisfies Meta<typeof UserProfileCard>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: {
    user: defaultUser,
    variant: 'detailed',
    status: 'online',
  },
};

export const Compact: Story = {
  args: {
    ...Default.args,
    variant: 'compact',
  },
};

export const Loading: Story = {
  args: {
    ...Default.args,
    loading: true,
  },
};

Dark-mode handling

The component contains dark-mode utilities and the repository already defines Storybook dark-preview support.

A dedicated Dark story was generated without introducing a new theme provider.

Mock-data strategy

Reused

• src/test/fixtures/users.ts
• src/test/fixtures/avatars.ts

Generated

• longBioUser
• userWithoutBio
• offlineUser

Mock values are deterministic.

No production data or credentials were used.

Validation

TypeScript
PASS

Storybook build
PASS

Component source modified
NO

New runtime dependencies added
NO

Files generated

• src/components/UserProfileCard/UserProfileCard.stories.tsx
• .storybook-architect/props.json
• .storybook-architect/story_matrix.json
• .storybook-architect/mock_data.ts
• .storybook-architect/generation_report.md

The generated stories are typed against the component and prioritize meaningful UI states over exhaustive prop combinations. Review product-specific edge cases and providers before merging.