feat: add Storybook stories for UI components and update existing stories

[devin-ai-integration]

Description

Adds comprehensive Storybook stories for UI components from @onlook/ui and updates existing stories to follow the project's Storybook playbook conventions.

New stories created (16):

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

Existing stories updated (5):

• Button, ProjectCard, ProjectsPage, SelectProject, TopBar
• Changed imports from @storybook/react to @storybook/nextjs-vite
• Removed title property from meta objects per playbook guidelines

All stories follow the playbook pattern with:

• Default story as the first exported story
• ArgTypes with descriptions for controllable props
• Callback props using fn() in meta.args
• Width decorators where appropriate
• Multiple story variations (variants, sizes, states)

Related Issues

N/A - Audit mode task

Type of Change

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

Testing

• Lint checks pass (return code 0)
• Note: Storybook was not run to visually verify stories render correctly - reviewer should run bun run storybook in apps/web/client/ to verify

Human Review Checklist

• Verify @storybook/nextjs-vite is the correct import for this project's Storybook setup
• Run bun run storybook and verify all new stories render without errors
• Check that component imports from @onlook/ui/* resolve correctly
• Verify stories display expected UI variations

Additional Notes

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

---

Important

This PR adds new Storybook stories for 16 UI components and updates 5 existing ones, aligning them with the project's Storybook conventions.

• New Stories:
  • Added stories for 16 components: Alert, Avatar, Badge, Card, Checkbox, Input, Label, Progress, Separator, Skeleton, Slider, Switch, Tabs, Textarea, Toggle, Tooltip.
• Updated Stories:
  • Updated stories for 5 components: Button, ProjectCard, ProjectsPage, SelectProject, TopBar.
  • Changed imports from @storybook/react to @storybook/nextjs-vite.
  • Removed title property from meta objects in all updated stories.
• Storybook Conventions:
  • Ensured default story is the first exported.
  • Added argTypes with descriptions for controllable props.
  • Used fn() for callback props in meta.args.
  • Applied width decorators where appropriate.
  • Included multiple story variations (variants, sizes, states).

^{This description was created by for c8a41ab. You can customize this summary. It will automatically update as commits are pushed.}

[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-onlook	Ready	Preview	Comment	Dec 12, 2025 10:36am

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
docs-onlook	Skipped			Dec 12, 2025 10:36am

[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 ↗︎.

[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.}