feat: add Storybook stories for UI components

[devin-ai-integration]

Description

Adds Storybook stories for 13 UI components from @onlook/ui and updates existing stories to use the correct Storybook import.

New stories added:

• Alert, Avatar, Badge, Card, Checkbox, Input, Progress, Separator, Skeleton, Switch, Textarea, Toggle, Tooltip

Existing stories updated:

• Button, ProjectCard, SelectProject, TopBar, ProjectsPage - changed import from @storybook/react to @storybook/nextjs-vite

Each story file includes a Default story, variant showcases, and common use case examples following the existing patterns in the codebase.

Related Issues

N/A - Audit task to improve Storybook coverage

Type of Change

• Bug fix
• New feature
• Documentation
• Refactor
• Other (please describe):

Testing

Note: Storybook could not be run locally due to Node.js version requirements (requires 20.19+ or 22.12+). Please verify stories render correctly by running bun run storybook in apps/web/client.

Screenshots (if applicable)

N/A - Storybook stories need to be verified locally

Additional Notes

Human Review Checklist:

• Verify the import change from @storybook/react to @storybook/nextjs-vite works correctly
• Run Storybook locally and verify all 18 story files render without errors
• Spot-check that argTypes match actual component props (especially for Badge, Toggle, Switch which have variant/size props)

---

Link to Devin run: https://app.devin.ai/sessions/d1343885028346b3bc055064f4d2e1f8
Requested by: unknown ()

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
web	Ready	Preview	Comment	Dec 5, 2025 6:30pm

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
docs	Skipped			Dec 5, 2025 6:30pm

[coderabbitai]

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[supabase]

This pull request has been ignored for the connected project wowaemfasoptxrdjhilu because there are no changes detected in apps/backend/supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.