feat(storybook): add stories for 9 UI components

[devin-ai-integration]

Description

Adds comprehensive Storybook stories for 9 UI components as part of a codebase audit. Each story file includes a Default story, multiple variation stories showcasing different states, and context stories showing real-world usage.

Components covered:

• Badge - UI badge with variants (default, secondary, destructive, outline) and icon support
• Carousel - Horizontally scrollable container with navigation buttons
• HotkeyLabel - Keyboard shortcut display component
• Kbd - Styled keyboard key indicator
• MotionCard - Animated card using Framer Motion
• NodeIcon - HTML element type icons for the layers panel
• ProgressWithInterval - Animated progress bar with configurable speed
• SquareProjectCard - Project card with square aspect ratio
• TemplateCard - Template selection card with star/favorite functionality

Related Issues

N/A - This was an audit task to improve Storybook coverage.

Type of Change

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

Testing

• TypeScript compilation passes (bun run typecheck)
• Note: Storybook could not be run locally due to Node.js version requirements (needs 20.19+ or 22.12+). Visual verification in Storybook is recommended during review.

Human Review Checklist

• Verify stories render correctly in Storybook
• Check that argTypes and controls are appropriate for each component's props
• Verify import paths resolve correctly (@/app/... and @onlook/ui/...)
• Review mock data in SquareProjectCard stories for appropriateness

Additional Notes

• Stories follow the patterns from the Storybook playbook with proper argTypes, descriptions, and default args
• Pre-existing type errors in src/utils/supabase/middleware.ts and src/utils/supabase/server.ts are unrelated to this PR

Link to Devin run: https://app.devin.ai/sessions/0513c42d5ef3464e882aa3c9dca26d74
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

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

[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 7:18pm

1 Skipped Deployment

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

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