feat: configure Storybook to use package README.md as documentation s…#745
Merged
tomaszpacior merged 4 commits intomainfrom Feb 26, 2026
Merged
Conversation
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review infoConfiguration used: Organization UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
WalkthroughAdds Storybook autodocs integration (imports package READMEs into story metadata and a custom docs.page), updates npm toolchain version, adds Vite ambient types to TypeScript config, introduces a story generator/template, and records package changes via a changeset. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/blocks/ticket-summary/src/frontend/TicketSummary.client.stories.tsx (1)
71-73:⚠️ Potential issue | 🟡 MinorMalformed JWT token in story args.
The JWT token appears to have a typo in its payload. The base64 segment contains
fSWiaWF0which decodes to}"iat- there's a missing comma before"iat"in the JSON payload. This produces invalid JSON.Compare with the valid tokens in other story files (e.g., TicketList) which have
fSwiaWF0(lowercase 'w') that correctly decodes to},"iat.🔧 Suggested fix
accessToken: - 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiSmFuZSBEb2UiLCJlbWFpbCI6ImphbmVAZXhhbXBsZS5jb20iLCJyb2xlIjoic2VsZnNlcnZpY2Vfb3JnX2FkbWluIiwiY3VzdG9tZXIiOnsiaWQiOiJjdXN0LTAwMSIsInJvbGVzIjpbInNlbGZzZXJ2aWNlX29yZ191c2VyIiwic2VsZnNlcnZpY2Vfb3JnX3VzZXIiLCJzZWxmc2VydmljZV9vcmdfYWRtaW4iXSwibmFtZSI6IkFjbWUgQ29ycG9yYXRpb24ifSWiaWF0IjoxNzU2MzI0NTg0fQ.wFAXi1DbgN67z8xQcqZdGz9YeAolbim3lecVIzV2rv0', + 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiSmFuZSBEb2UiLCJlbWFpbCI6ImphbmVAZXhhbXBsZS5jb20iLCJyb2xlIjoic2VsZnNlcnZpY2Vfb3JnX2FkbWluIiwiY3VzdG9tZXIiOnsiaWQiOiJjdXN0LTAwMSIsInJvbGVzIjpbInNlbGZzZXJ2aWNlX29yZ191c2VyIiwic2VsZnNlcnZpY2Vfb3JnX3VzZXIiLCJzZWxmc2VydmljZV9vcmdfYWRtaW4iXSwibmFtZSI6IkFjbWUgQ29ycG9yYXRpb24ifSwiaWF0IjoxNzU2MzI0NTg0fQ.SIGNATURE_HERE',Note: You'll need to regenerate the signature after fixing the payload.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/blocks/ticket-summary/src/frontend/TicketSummary.client.stories.tsx` around lines 71 - 73, The accessToken string in the story args is a malformed JWT (payload base64 contains `fSWiaWF0` -> `}"iat` missing a comma) causing invalid JSON; update the payload segment to match the correct encoding used in other stories (replace the uppercase typo with the correct lowercase sequence, e.g., make it consistent with `fSwiaWF0`) so the payload decodes to `},"iat`, then re-sign/regenerate the JWT signature and replace accessToken in the TicketSummary.story args (look for the accessToken property in TicketSummary.client.stories.tsx) with the newly signed token.
🧹 Nitpick comments (4)
packages/blocks/payments-history/src/frontend/PaymentsHistory.client.stories.tsx (1)
13-25: Consider extracting shared Storybook docs config to a helper.This
parameters.docsblock is duplicated across many stories in this PR. A shared helper (e.g.,createReadmeDocs(readme)) would reduce drift and make future docs-page changes one-line updates.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/blocks/payments-history/src/frontend/PaymentsHistory.client.stories.tsx` around lines 13 - 25, Extract the duplicated Storybook docs config (the parameters.docs block that renders Title/Markdown and sets description.component to readme) into a reusable helper (e.g., createReadmeDocs(readme)) and replace the inline block in PaymentsHistory.client.stories.tsx (and other stories) with parameters: { docs: createReadmeDocs(readme) }; implement createReadmeDocs to return the same shape used currently (page rendering Title/Markdown and description.component) so all stories import and reuse it, reducing duplication and making future doc changes one-line updates.packages/blocks/pricing-section/src/frontend/PricingSection.client.stories.tsx (1)
13-25: Consider extracting shared README docs config to avoid drift.This
parameters.docsblock is duplicated across many stories in this PR; a small shared helper would make future updates safer.♻️ Example refactor
+import { withReadmeDocs } from '../../../.storybook/withReadmeDocs'; import readme from '../../README.md?raw'; const meta = { title: 'Blocks/PricingSection', component: PricingSectionPure, tags: ['autodocs'], - parameters: { - docs: { - page: () => ( - <> - <Title /> - <Markdown>{readme}</Markdown> - </> - ), - description: { - component: readme, - }, - }, - }, + parameters: withReadmeDocs(readme), } satisfies Meta<typeof PricingSectionPure>;// .storybook/withReadmeDocs.tsx import React from 'react'; import { Markdown, Title } from '@storybook/addon-docs/blocks'; export const withReadmeDocs = (readme: string) => ({ docs: { page: () => ( <> <Title /> <Markdown>{readme}</Markdown> </> ), description: { component: readme }, }, });🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/blocks/pricing-section/src/frontend/PricingSection.client.stories.tsx` around lines 13 - 25, The duplicated parameters.docs block (using Title, Markdown and readme) should be extracted into a shared helper (e.g., withReadmeDocs) and imported into story files like PricingSection.client.stories.tsx; create a .storybook/withReadmeDocs.tsx that exports a function taking readme and returning the docs object, then replace the inline parameters.docs in this file (and other stories) with parameters: withReadmeDocs(readme) to centralize the README docs config and avoid drift.packages/blocks/article/src/frontend/Article.client.stories.tsx (1)
32-116: Consider moving this large mock payload into a fixture module.The inline args are very large; extracting them (e.g.,
articleStoryArgs) would keep the story file easier to scan and maintain.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/blocks/article/src/frontend/Article.client.stories.tsx` around lines 32 - 116, The Default story currently embeds a very large mock payload directly in Default.args; extract that object into a separate fixture (e.g., export const articleStoryArgs) in a new module (e.g., article.fixtures.ts) and replace the inline object by importing and assigning articleStoryArgs to Default.args; update any referenced fields (slug, locale, routing) as part of the exported fixture and ensure the story file imports articleStoryArgs and uses it in the Default constant (reference symbols: Default, Default.args, articleStoryArgs).packages/blocks/user-account/src/frontend/UserAccount.client.stories.tsx (1)
12-25: Consider centralizing the repeated README docs config.This
parameters.docsblock is duplicated across many story files in this PR. Extracting a shared helper will reduce drift and future maintenance cost.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/blocks/user-account/src/frontend/UserAccount.client.stories.tsx` around lines 12 - 25, Extract the repeated docs JSX and settings into a shared helper (e.g., export a createReadmeDocs(readme) function or README_DOCS constant) that returns the parameters.docs object used by stories; then in UserAccount.client.stories.tsx replace the inline parameters.docs block with an import of that helper and assign parameters: { ...existingParameters, docs: createReadmeDocs(readme) } (or parameters = { ...README_DOCS }), keeping Title, Markdown and readme usage inside the shared helper so all stories can import and reuse the same configuration.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Outside diff comments:
In
`@packages/blocks/ticket-summary/src/frontend/TicketSummary.client.stories.tsx`:
- Around line 71-73: The accessToken string in the story args is a malformed JWT
(payload base64 contains `fSWiaWF0` -> `}"iat` missing a comma) causing invalid
JSON; update the payload segment to match the correct encoding used in other
stories (replace the uppercase typo with the correct lowercase sequence, e.g.,
make it consistent with `fSwiaWF0`) so the payload decodes to `},"iat`, then
re-sign/regenerate the JWT signature and replace accessToken in the
TicketSummary.story args (look for the accessToken property in
TicketSummary.client.stories.tsx) with the newly signed token.
---
Nitpick comments:
In `@packages/blocks/article/src/frontend/Article.client.stories.tsx`:
- Around line 32-116: The Default story currently embeds a very large mock
payload directly in Default.args; extract that object into a separate fixture
(e.g., export const articleStoryArgs) in a new module (e.g.,
article.fixtures.ts) and replace the inline object by importing and assigning
articleStoryArgs to Default.args; update any referenced fields (slug, locale,
routing) as part of the exported fixture and ensure the story file imports
articleStoryArgs and uses it in the Default constant (reference symbols:
Default, Default.args, articleStoryArgs).
In
`@packages/blocks/payments-history/src/frontend/PaymentsHistory.client.stories.tsx`:
- Around line 13-25: Extract the duplicated Storybook docs config (the
parameters.docs block that renders Title/Markdown and sets description.component
to readme) into a reusable helper (e.g., createReadmeDocs(readme)) and replace
the inline block in PaymentsHistory.client.stories.tsx (and other stories) with
parameters: { docs: createReadmeDocs(readme) }; implement createReadmeDocs to
return the same shape used currently (page rendering Title/Markdown and
description.component) so all stories import and reuse it, reducing duplication
and making future doc changes one-line updates.
In
`@packages/blocks/pricing-section/src/frontend/PricingSection.client.stories.tsx`:
- Around line 13-25: The duplicated parameters.docs block (using Title, Markdown
and readme) should be extracted into a shared helper (e.g., withReadmeDocs) and
imported into story files like PricingSection.client.stories.tsx; create a
.storybook/withReadmeDocs.tsx that exports a function taking readme and
returning the docs object, then replace the inline parameters.docs in this file
(and other stories) with parameters: withReadmeDocs(readme) to centralize the
README docs config and avoid drift.
In `@packages/blocks/user-account/src/frontend/UserAccount.client.stories.tsx`:
- Around line 12-25: Extract the repeated docs JSX and settings into a shared
helper (e.g., export a createReadmeDocs(readme) function or README_DOCS
constant) that returns the parameters.docs object used by stories; then in
UserAccount.client.stories.tsx replace the inline parameters.docs block with an
import of that helper and assign parameters: { ...existingParameters, docs:
createReadmeDocs(readme) } (or parameters = { ...README_DOCS }), keeping Title,
Markdown and readme usage inside the shared helper so all stories can import and
reuse the same configuration.
ℹ️ Review info
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (39)
.changeset/rare-paths-leave.mdpackage.jsonpackages/blocks/article-list/src/frontend/ArticleList.client.stories.tsxpackages/blocks/article-search/src/frontend/ArticleSearch.client.stories.tsxpackages/blocks/article/src/frontend/Article.client.stories.tsxpackages/blocks/bento-grid/src/frontend/BentoGrid.client.stories.tsxpackages/blocks/category-list/src/frontend/CategoryList.client.stories.tsxpackages/blocks/category/src/frontend/Category.client.stories.tsxpackages/blocks/cta-section/src/frontend/CtaSection.client.stories.tsxpackages/blocks/document-list/src/frontend/DocumentList.client.stories.tsxpackages/blocks/faq/src/frontend/Faq.client.stories.tsxpackages/blocks/feature-section-grid/src/frontend/FeatureSectionGrid.client.stories.tsxpackages/blocks/feature-section/src/frontend/FeatureSection.client.stories.tsxpackages/blocks/featured-service-list/src/frontend/FeaturedServiceList.client.stories.tsxpackages/blocks/hero-section/src/frontend/HeroSection.client.stories.tsxpackages/blocks/invoice-list/src/frontend/InvoiceList.client.stories.tsxpackages/blocks/media-section/src/frontend/MediaSection.client.stories.tsxpackages/blocks/notification-details/src/frontend/NotificationDetails.client.stories.tsxpackages/blocks/notification-list/src/frontend/NotificationList.client.stories.tsxpackages/blocks/notification-summary/src/frontend/NotificationSummary.client.stories.tsxpackages/blocks/order-details/src/frontend/OrderDetails.client.stories.tsxpackages/blocks/order-list/src/frontend/OrderList.client.stories.tsxpackages/blocks/orders-summary/src/frontend/OrdersSummary.client.stories.tsxpackages/blocks/payments-history/src/frontend/PaymentsHistory.client.stories.tsxpackages/blocks/payments-summary/src/frontend/PaymentsSummary.client.stories.tsxpackages/blocks/pricing-section/src/frontend/PricingSection.client.stories.tsxpackages/blocks/product-details/src/frontend/ProductDetails.client.stories.tsxpackages/blocks/product-list/src/frontend/ProductList.client.stories.tsxpackages/blocks/quick-links/src/frontend/QuickLinks.client.stories.tsxpackages/blocks/recommended-products/src/frontend/RecommendedProducts.client.stories.tsxpackages/blocks/service-details/src/frontend/ServiceDetails.client.stories.tsxpackages/blocks/service-list/src/frontend/ServiceList.client.stories.tsxpackages/blocks/surveyjs-form/src/frontend/SurveyJs.client.stories.tsxpackages/blocks/ticket-details/src/frontend/TicketDetails.client.stories.tsxpackages/blocks/ticket-list/src/frontend/TicketList.client.stories.tsxpackages/blocks/ticket-recent/src/frontend/TicketRecent.client.stories.tsxpackages/blocks/ticket-summary/src/frontend/TicketSummary.client.stories.tsxpackages/blocks/user-account/src/frontend/UserAccount.client.stories.tsxpackages/configs/typescript-config/frontend.json
Contributor
Coverage Report for packages/configs/vitest-config
File CoverageNo changed files found. |
marcinkrasowski
approved these changes
Feb 26, 2026
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
What does this PR do?
-Use package-level README.md files as Storybook documentation
Summary by CodeRabbit
New Features
Chores