feat: add Storybook stories for UI components

[devin-ai-integration]

Description

Adds Storybook stories for 13 UI components that were missing coverage. This PR is the result of a Storybook audit to identify components without stories and create comprehensive documentation for them.

New stories added:

• Form controls: Input, Textarea, Checkbox, Switch
• Feedback: Alert, Progress, Skeleton, Tooltip
• Display: Badge, Card, Avatar
• App-specific: HighlightText, TemplateCard

Each story includes:

• A Default story as the first export
• Multiple variant stories showing different states
• Proper argTypes with descriptions for controllable props
• fn() for callback props where applicable

Related Issues

N/A - Storybook audit task

Type of Change

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

Testing

• Ran bun run lint - passed
• Ran bun run typecheck - no story-related errors (pre-existing errors in middleware.ts/server.ts unrelated to this PR)
• Stories follow existing patterns from Button.stories.tsx and ProjectCard.stories.tsx

Human Review Checklist

• Verify stories render correctly in Storybook
• Check that @storybook/nextjs-vite imports work (existing stories use @storybook/react)
• Confirm argTypes match actual component props

Additional Notes

• Stories are placed in apps/web/client/src/stories/ to match existing repo structure
• External image URLs (Unsplash, DiceBear) are used for realistic preview content
• The audit identified these components as story-worthy based on having props and rendering UI

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

---

Important

Add Storybook stories for 13 UI components, enhancing documentation and testing with default and variant stories, argTypes, and callback props.

• New Stories Added:
  • Form Controls: Input, Textarea, Checkbox, Switch
  • Feedback: Alert, Progress, Skeleton, Tooltip
  • Display: Badge, Card, Avatar
  • App-specific: HighlightText, TemplateCard
• Story Details:
  • Each story includes a Default story and multiple variant stories.
  • Proper argTypes with descriptions for controllable props.
  • fn() used for callback props where applicable.
• Misc:
  • Stories are placed in apps/web/client/src/stories/ to match existing repo structure.
  • External image URLs used for realistic preview content.

^{This description was created by for 410a3d2. 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	Review	Updated (UTC)
docs-onlook	Ready	Preview, Comment	Dec 13, 2025 10:34am
web-onlook	Ready	Preview, Comment	Dec 13, 2025 10:34am

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