Skip to content

devex: Add Storybook for component development #2556

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.

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

Merged
merged 15 commits into from
Apr 21, 2025
Merged

Conversation

SuaYoo
Copy link
Member

@SuaYoo SuaYoo commented Apr 17, 2025

Related to #2497

Changes

Adds Storybook in preparation for UI component refactoring.

Manual testing

  1. Run yarn to install dependencies
  2. Run yarn storybook. Verify Storybook loads with button and table components

Screenshots

Page Image/video
Storybook - Introduction Screenshot 2025-04-16 at 6 21 19 PM
Storybook - Button Screenshot 2025-04-16 at 6 54 01 PM
Storybook - Table Screenshot 2025-04-16 at 7 29 17 PM

Follow-ups

  • Shoelace assets like icons aren't working yet.
  • We don't actually use btrix-button as much as btrix-navigation-button, but I added it since it has a simple enough component API and it'd be a step towards mergin the two components.

@SuaYoo SuaYoo marked this pull request as ready for review April 17, 2025 02:38
@SuaYoo SuaYoo requested review from ikreymer, emma-sg and tw4l April 17, 2025 02:38
@SuaYoo SuaYoo added the devex/tooling Tooling and developer experience work label Apr 17, 2025
@SuaYoo SuaYoo moved this to In Review in Webrecorder Projects Apr 17, 2025
@SuaYoo
Copy link
Member Author

SuaYoo commented Apr 21, 2025

Fixed linting errors not showing when running yarn storybook:

Screenshot 2025-04-21 at 10 22 21 AM

Copy link
Member

@emma-sg emma-sg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sweet, this is a great start! Very down to get this merged, though I think eventually I'd like to move this stuff into Hickory — but that's something I'll look into later.

@SuaYoo
Copy link
Member Author

SuaYoo commented Apr 21, 2025

Added documentation:

Screenshot 2025-04-21 at 12 11 30 PM

@SuaYoo
Copy link
Member Author

SuaYoo commented Apr 21, 2025

I'd like to move this stuff into Hickory — but that's something I'll look into later.

Yes, makes sense to me.

Copy link

Warning

Review the following alerts detected in dependencies.

According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.

Action Severity Alert (click for details)
Warn High
replaywebpage@2.2.4 has Obfuscated code.

Confidence: 0.91

Location: Package overview

Source: frontend/package.json

Source: frontend/yarn.lock

ℹ Read more on: This package | This alert | What is obfuscated code?

Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev.

Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code.

Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/replaywebpage@2.2.4. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report

@SuaYoo SuaYoo merged commit 78e2dad into main Apr 21, 2025
27 checks passed
@SuaYoo SuaYoo deleted the frontend-add-storybook branch April 21, 2025 20:06
@github-project-automation github-project-automation bot moved this from In Review to Done! in Webrecorder Projects Apr 21, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
devex/tooling Tooling and developer experience work
Projects
Status: Done!
Development

Successfully merging this pull request may close these issues.

2 participants