Skip to content

feat: add Storybook stories for UI components #3072

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
devin-ai-integration wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat: add Storybook stories for UI components #3072

devin-ai-integration wants to merge 2 commits into from

Conversation

@devin-ai-integration
Copy link
Contributor

@devin-ai-integration devin-ai-integration bot commented Dec 18, 2025 •
edited by ellipsis-dev bot
Loading

Description

Adds Storybook stories for 12 @onlook/ui components that were missing story coverage. Each story file follows the project's Storybook conventions with a Default story as the first export, proper argTypes with descriptions, and multiple variants/states.

Components covered:

  • Alert (with variants and icons)
  • Avatar (with fallback, sizes, and groups)
  • Badge (with all 4 variants)
  • Checkbox (with labels and groups)
  • Input (with types and states)
  • Kbd (keyboard shortcuts display)
  • Progress (with value steps)
  • Separator (horizontal and vertical)
  • Skeleton (loading state patterns)
  • Switch (with labels and groups)
  • Textarea (with states)
  • Toggle (with variants and sizes)

Related Issues

Part of Storybook audit to improve component documentation coverage.

Type of Change

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

Testing

  • Lint checks pass (bun run lint returns 0)
  • Stories follow the established patterns from existing story files (Button.stories.tsx, ProjectCard.stories.tsx, etc.)

Note: Stories were not visually verified in Storybook during development. Recommend running bun run storybook to verify all stories render correctly.

Human Review Checklist

  • Verify stories render correctly by running bun run storybook
  • Check that @onlook/ui/label import works in Checkbox and Switch stories
  • Confirm component props in argTypes match actual component interfaces

Additional Notes

Important

Adds Storybook stories for 12 @onlook/ui components, enhancing documentation and testing coverage with multiple variants and states.

  • Behavior:
    • Adds Storybook stories for 12 @onlook/ui components: Alert, Avatar, Badge, Checkbox, Input, Kbd, Progress, Separator, Skeleton, Switch, Textarea, Toggle.
    • Each story includes a Default export, argTypes with descriptions, and multiple variants/states.
  • Components:
    • Alert.stories.tsx: Includes variants like Default, Destructive, Success, Warning, TitleOnly, DescriptionOnly, Variants.
    • Avatar.stories.tsx: Covers Default, WithImage, Fallback, SingleLetter, CustomSize, AvatarGroup.
    • Badge.stories.tsx: Features Default, Secondary, Destructive, Outline, WithIcon, Variants, WithIcons.
    • Checkbox.stories.tsx: Includes Default, Checked, Disabled, DisabledChecked, WithLabel, CheckboxGroup.
    • Input.stories.tsx: Contains Default, WithValue, Password, Email, Number, Search, Disabled, DisabledWithValue, Types.
    • Kbd.stories.tsx: Displays Default, Enter, Escape, CommandK, CtrlShiftP, CommonShortcuts, ArrowKeys.
    • Progress.stories.tsx: Shows Default, Empty, Quarter, Half, ThreeQuarters, Complete, ProgressSteps.
    • Separator.stories.tsx: Demonstrates Default, Horizontal, Vertical, InList, InNavigation.
    • Skeleton.stories.tsx: Illustrates Default, Circle, Square, Text, Card, Avatar, Table, Form.
    • Switch.stories.tsx: Presents Default, Checked, Disabled, DisabledChecked, WithLabel, SwitchGroup.
    • Textarea.stories.tsx: Offers Default, WithValue, WithRows, Disabled, DisabledWithValue, LongContent.
    • Toggle.stories.tsx: Provides Default, Pressed, Outline, Disabled, WithIcon, Variants, Sizes, TextFormatting.
  • Testing:
    • Lint checks pass.
    • Stories follow established patterns from existing story files.
    • Visual verification in Storybook recommended.

This description was created by Ellipsis for 78a0943. You can customize this summary. It will automatically update as commits are pushed.

@devin-ai-integration
feat: add Storybook stories for UI components
83170c9 
Add stories for the following @onlook/ui components:
- Alert (with variants and icons)
- Avatar (with fallback and groups)
- Badge (with variants)
- Checkbox (with labels and groups)
- Input (with types and states)
- Kbd (keyboard shortcuts)
- Progress (with steps)
- Separator (horizontal and vertical)
- Skeleton (loading states)
- Switch (with labels)
- Textarea (with states)
- Toggle (with variants and sizes)

Each story follows the Storybook playbook conventions with:
- Default story as the first export
- ArgTypes with descriptions
- Multiple variants and states
- Proper use of fn() for callbacks

Co-Authored-By: unknown <>
@devin-ai-integration
Copy link
Contributor Author

devin-ai-integration bot commented Dec 18, 2025

🤖 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
Copy link

vercel bot commented Dec 18, 2025 •
edited
Loading

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

Project Deployment Review Updated (UTC)
web-onlook Ready Ready Preview, Comment Dec 18, 2025 10:33am
1 Skipped Deployment
Project Deployment Review Updated (UTC)
docs-onlook Skipped Skipped Dec 18, 2025 10:33am

@supabase
Copy link

supabase bot commented Dec 18, 2025

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
Copy link

coderabbitai bot commented Dec 18, 2025

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.

@devin-ai-integration
fix: add args to render stories in Kbd.stories.tsx to satisfy TypeScript
78a0943 
The Kbd component has a required children prop, so stories using render()
must also provide args to satisfy the StoryObj type requirements.

Co-Authored-By: unknown <>
@vercel vercel bot temporarily deployed to Preview – docs-onlook December 18, 2025 10:29 Inactive
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant