add nextjs example #4871
add nextjs example #4871
Conversation
WalkthroughThe changes in this pull request involve updates to several Storybook configuration files for different components within the UI package. Each file has been modified to change the type declaration for the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant App
participant Storybook
User->>Storybook: Request to view App story
Storybook->>App: Render App component with JOBS data
App->>Storybook: Return rendered component
Storybook->>User: Display App story
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (4)
packages/ui/src/app/app-home-assistant.stories.tsx (1)
37-44: Consider moving documentation comment above the type definition.While the content is good, consider moving the documentation comment above the type definition to maintain consistency with other story files. This would improve readability and maintain a consistent documentation pattern across the codebase.
Here's the suggested order:
+/** + * stack: Vite, yarn + * + * - GitHub: https://github.com/home-assistant/frontend + * - RelativeCI project: https://app.relative-ci.com/projects/ZyS69RCzSjYaQA6vUq06 + */ type Story = StoryObj<typeof App>; -/** - * stack: Vite, yarn - * - * - GitHub: https://github.com/home-assistant/frontend - * - RelativeCI project: https://app.relative-ci.com/projects/ZyS69RCzSjYaQA6vUq06 - */packages/ui/src/app/app-trans-masc-futures.stories.tsx (3)
5-9: Consider using path aliases for deep importsThe deep relative imports (../../../../fixtures) could be hard to maintain. Consider setting up path aliases in your TypeScript/webpack configuration for better maintainability.
Example configuration in
tsconfig.json:{ "compilerOptions": { "baseUrl": ".", "paths": { + "@fixtures/*": ["fixtures/*"] } } }Then imports could be simplified to:
-import currentData from '../../../../fixtures/trans-masc-futures/current.json'; +import currentData from '@fixtures/trans-masc-futures/current.json';
24-29: Consider enhancing documentation with additional metadataThe documentation provides good basic information, but could be enhanced with:
- Project description
- Development status
- Required Node.js version
36-38: Consider making version dynamicThe hardcoded version in args might become outdated. Consider:
- Importing version from package.json
- Using environment variables
- Using build-time constants
Example implementation:
+import { version } from '../../../package.json'; args: { - version: '1.0', + version, },
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (4)
packages/ui/src/app/app-gladys.stories.tsx(2 hunks)packages/ui/src/app/app-home-assistant.stories.tsx(1 hunks)packages/ui/src/app/app-outline.stories.tsx(2 hunks)packages/ui/src/app/app-trans-masc-futures.stories.tsx(1 hunks)
🔇 Additional comments (7)
packages/ui/src/app/app-outline.stories.tsx (2)
24-29: LGTM! Well-documented metadata.
The added documentation comment provides valuable context about the tech stack and relevant links.
43-43: LGTM! Improved type precision.
The type change from StoryObj<typeof meta> to StoryObj<typeof App> provides more precise typing by directly referencing the component being rendered.
packages/ui/src/app/app-gladys.stories.tsx (2)
24-29: LGTM! Consistent documentation format.
The documentation follows the established pattern while correctly identifying the unique tech stack for this project.
43-43: LGTM! Consistent type definition.
The type change maintains consistency with other story files while improving type precision.
packages/ui/src/app/app-trans-masc-futures.stories.tsx (3)
12-22: LGTM! Clear and well-structured data configuration
The source data configuration is clean and follows a consistent pattern.
43-47: LGTM! Well-structured story implementation
The story implementation follows Storybook best practices and properly handles component props.
6-8: Verify the existence of fixture files
Let's ensure the referenced fixture files exist in the correct location.
✅ Verification successful
Let me verify the existence of the meta fixtures since they are also imported in the code.
Let me check the content of the meta.js file since it's not a JSON file.
All required fixture files are present and properly structured
fixtures/trans-masc-futures/baseline.jsonandfixtures/trans-masc-futures/current.jsonexist with valid JSON structure containing assets, chunks, hash, and modulesfixtures/meta.jsexists and exports the requiredmetaBaselineandmetaCurrentobjects
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check if the required fixture files exist
# Check for fixture files
fd --type f --extension json "current.json|baseline.json" fixtures/trans-masc-futures/
# Verify JSON structure in fixture files
for file in $(fd --type f --extension json "current.json|baseline.json" fixtures/trans-masc-futures/); do
echo "Checking $file structure:"
jq 'keys' "$file"
done
Length of output: 936
Script:
#!/bin/bash
# Check for meta fixture files
fd --type f "meta" fixtures/
# If found, verify JSON structure
for file in $(fd --type f "meta" fixtures/); do
echo "Checking $file structure:"
jq 'keys' "$file"
done
Length of output: 288
Script:
#!/bin/bash
# Check the content of meta.js
cat fixtures/meta.js
Length of output: 511
#11733 Bundle Size — 380.84KiB (0%).4386d86(current) vs 74ef42d master#11731(baseline) Warning Bundle contains 2 duplicate packages – View duplicate packages Bundle metrics
|
| Current #11733 |
Baseline #11731 |
|
|---|---|---|
 Initial JS |
333.95KiB |
333.95KiB |
| Initial CSS |
46.89KiB |
46.89KiB |
 Cache Invalidation |
0% |
59.14% |
| Chunks |
3 |
3 |
| Assets |
4 |
4 |
| Modules |
700 |
700 |
| Duplicate Modules |
0 |
0 |
| Duplicate Code |
0% |
0% |
| Packages |
39 |
39 |
| Duplicate Packages |
1 |
1 |
Bundle size by type no changes
| Current #11733 |
Baseline #11731 |
|
|---|---|---|
| JS |
333.95KiB |
333.95KiB |
| CSS |
46.89KiB |
46.89KiB |
Bundle analysis report Branch add-nextjs-example Project dashboard
Generated by RelativeCI Documentation Report issue
Summary by CodeRabbit
New Features
TransMascFuturesapplication, allowing for enhanced visualization and testing of theAppcomponent.Improvements
Storyin multiple Storybook configurations to align more closely with theAppcomponent.These changes enhance the clarity and usability of the Storybook setup for developers and contributors.