test: add storybook to more easily test and show ui changes #95
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* Deleted app.css as it was no longer needed. * Updated various components to include focus styles for better accessibility, including DownloadButton, TextLink, and ButtonBase. * Cleaned up console log in PillBalance and improved styling in PillWrapper for focus states.
* Updated AccordionTrigger to include a cursor pointer for better interactivity. * Modified TextLink to add a hover effect for improved user experience. * Enhanced PillWallet with a hover background and cursor pointer for better accessibility. * Refactored PillWrapper to accept a className prop for more flexible styling.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
FilOzzy
added
team/filecoin-pin
…fix/add-storybook
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR adds Storybook and Vitest testing infrastructure to the project to enable component testing and visual documentation.
Key Changes:
- Storybook configuration with accessibility addon and Vitest integration
- Vitest browser testing with Playwright provider
- Example story files for
ProgressCardandTextWithCopyToClipboardcomponents
Reviewed Changes
Copilot reviewed 7 out of 10 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| vite.config.ts | Adds Vitest configuration with Storybook test plugin and browser testing setup |
| vitest.shims.d.ts | Type reference for Vitest browser-playwright |
| package.json | Adds Storybook, Vitest, and related testing dependencies with npm scripts |
| .storybook/main.ts | Storybook configuration defining stories location and addons |
| .storybook/preview.ts | Storybook preview configuration with a11y settings |
| .storybook/vitest.setup.ts | Vitest setup file for Storybook integration |
| src/components/upload/progress-card.stories.tsx | Story definitions for ProgressCard component covering various states |
| src/components/ui/text-with-copy-to-clipboard.stories.tsx | Story definitions for TextWithCopyToClipboard component |
| .gitignore | Adds Storybook build artifacts to gitignore |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
SgtPooki
commented
Nov 6, 2025
[UXIT-3454] Follow-up Dev Work
This commit introduces a new UploadButton component that allows users to upload files with error handling for file size limits. The component utilizes Radix UI for form control and includes a button with a loading state during uploads. It also provides user feedback for file size errors.
…and UploadButton components This commit updates the DragNDrop and UploadButton components to use a centralized MAX_FILE_SIZE constant instead of hardcoded values for maximum file size. Additionally, it improves the structure of the UploadButton component by adjusting the layout and error message handling for better user experience.
[UXIT-3481] Update upload steps
[UXIT-3464] Add compact Upload component
[UXIT-3605] Fix responsiveness issues on upload cards
Collaborator
|
YAY love storybook! |
Collaborator
|
Btw does this need fixing? It seems like it always generates the same UI? |
Collaborator
Author
I think that is the FYI this isn't being targeted as priorty for me for now, but we should probably get something in. If we can agree on the settings and clean up the diff we can merge with no stories added and slowly add them as we need |
* fix: make debugDump available on window object * chore: remove unnecessary debugDump check * chore: fix lint
* docs: update sidebar to link to new filecoin-pin docs * Incorporating feedback * applied lint
* deps: use filecoin-pin@0.12.0 * fix: ipniCheck passes expected provider
* fix: sidebar links and display * Update src/components/layout/sidebar-steps.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * chore: fix lint and spacing after car link --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
* fix: upload action properly waits for needed context * test: add unit tests * fix: remove currentStorageContext optional chaining
fix: update page title to 'Filecoin Pin Demo' in index.html
…step (#116) * fix: waits for synapse/storageContext/providerInfo show in uploading step * chore: add more logging checkpoints
* fix: optimized dataSet and storageContext details * fix: users without datasets dont scan all datasets
This reverts commit 109781a.
* Updated sidebar layout padding for better spacing. * Refactored CardHeader to enhance layout and visibility of status badge. * Modified Dialog component to allow overflow for better content handling. * Cleaned up UploadCompleted component by restructuring InfoRow and ButtonLink.
[UXIT-3670] UI Fixes
#123) * Removed unnecessary class for spinner visibility. * Adjusted text alignment for estimated time display to enhance readability.
* fix: optimized dataSet and storageContext details * fix: users without datasets dont scan all datasets * fix: use only active providers * chore: remove unnecessary null check * fix: only use approved providers * Update src/lib/filecoin-pin/storage-context-helper.ts * Update src/lib/filecoin-pin/storage-context-helper.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update src/lib/filecoin-pin/storage-context-helper.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update src/lib/filecoin-pin/storage-context-helper.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update src/hooks/use-dataset-pieces.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
adds storybook to the project, and sets up some commands for testing with vitest.
This should make it easier to test UI cahnges without having to re-upload pieces and test everything E2E.
Built on top of #94