docs: display documentation with some stories #816
Conversation
This is a first step that introduces the usage of mdx page to display the documentation. The documentation of the "Wires" story includes valuable information that was previously only available in comments of the source of the Story.
WalkthroughSeveral new Storybook MDX documentation files were added for various story modules under Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Storybook
participant MDX_Doc
participant Story_Module
User->>Storybook: Open story documentation
Storybook->>MDX_Doc: Render MDX file (e.g., Wires.mdx)
MDX_Doc->>Story_Module: Import story metadata
MDX_Doc-->>User: Display title, description, and linked story
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (6)
💤 Files with no reviewable changes (1)
✅ Files skipped from review due to trivial changes (2)
🚧 Files skipped from review as they are similar to previous changes (3)
⏰ Context from checks skipped due to timeout of 90000ms (4)
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 (
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (8)
packages/html/stories/Boundary.mdx (1)
6-8: Content is clear but could be enriched.
The heading and description succinctly describe the boundary events example. Consider adding a live preview, prop tables, or usage notes for consistency with other MDX docs.packages/html/stories/ZoomAndFit.mdx (1)
8-8: Grammar refinement in descriptionThe phrase "demonstrates using how to:" is awkward. Consider rephrasing to improve clarity:
- This example demonstrates using how to: + This example demonstrates how to use:packages/html/stories/Anchors.mdx (3)
2-4: Enhance import alias clarity.The alias
storyis generic; consider renaming it toAnchorsStories(or similar) to clearly denote its purpose and maintain consistency across MDX docs. Update both the import and its usage in<Meta>.-import * as story from './Anchors.stories'; -<Meta of={story} /> +import * as AnchorsStories from './Anchors.stories'; +<Meta of={AnchorsStories} />
6-8: Enhance example explanation (optional).The description is concise but could be richer. For example, demonstrate how to configure anchor points via props or link to the relevant API section for deeper context and usability.
9-9: Add newline at end of file.Ensure a trailing newline to comply with POSIX text file conventions and avoid potential tooling warnings.
packages/html/stories/Wires.mdx (1)
25-29: Fix minor grammar in routing directions description.
Insert the missing verb "are" to improve readability. For example:-Possible values for this style horizontal and vertical. Note +Possible values for this style are horizontal and vertical. Notepackages/html/stories/AutoLayout.mdx (2)
4-4: Optionally override or extend story metadata
Using<Meta of={story} />is correct to inherit settings. If you need to customize the title or add parameters (e.g., layout, backgrounds), you can extend it like so:-<Meta of={story} /> +<Meta + title="AutoLayout" + of={story} + parameters={{ layout: 'centered', backgrounds: { default: 'light' } }} +/>
8-10: Enhance documentation with interactive preview and controls
The heading and description are concise. To further enrich the docs page, consider embedding the live story and args table:<Canvas> <Story name="Default" /> </Canvas> <ArgsTable of={story} />This will render the interactive example and expose its controls in the Docs tab.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
packages/html/stories/Anchors.mdx(1 hunks)packages/html/stories/Animation.mdx(1 hunks)packages/html/stories/AutoLayout.mdx(1 hunks)packages/html/stories/Boundary.mdx(1 hunks)packages/html/stories/Wires.mdx(1 hunks)packages/html/stories/Wires.stories.js(0 hunks)packages/html/stories/Wrapping.mdx(1 hunks)packages/html/stories/ZoomAndFit.mdx(1 hunks)
💤 Files with no reviewable changes (1)
- packages/html/stories/Wires.stories.js
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: build
- GitHub Check: build (ubuntu-22.04)
- GitHub Check: build (windows-2022)
- GitHub Check: build (macos-14)
🔇 Additional comments (14)
packages/html/stories/Animation.mdx (3)
1-3: Correct import for Storybook MDX blocks
ImportingMetafrom@storybook/blocksis in line with Storybook 7 standards and matches other MDX documentation files. Ensure this pattern remains consistent across all new MDX pages.
4-4: Link MDX to theAnimationstory
Using<Meta of={story} />properly ties the MDX documentation to theAnimation.storiesdefinitions, providing seamless integration in Storybook.
6-8: Clear title and concise description
The# Animationheading and the descriptive paragraph succinctly explain the SVG animation example. You could consider adding usage notes or a props table in future iterations to enrich this section.packages/html/stories/Boundary.mdx (2)
1-2: Imports correctly link MDX to the Storybook story metadata.
TheMetaimport from@storybook/blocksand the wildcard import of./Boundary.storiesensure this MDX file is properly bound to its story configuration.
4-4: Meta block usage is correct.
Using<Meta of={story} />properly attaches the story’s metadata to this documentation page.packages/html/stories/ZoomAndFit.mdx (1)
1-4: Import and Meta setup looks goodThe import of
Metafrom@storybook/blocksand the<Meta of={story} />component correctly configure the Storybook documentation for theZoomAndFitstory.packages/html/stories/Anchors.mdx (1)
4-4: Approve linking MDX to stories.The
<Meta of={story} />(or updated alias) correctly binds this documentation to your story definitions, ensuring controls and metadata are inherited.packages/html/stories/Wrapping.mdx (1)
1-9: MDX documentation looks greatThis new MDX file correctly imports
Metaand the story, uses<Meta of={story} />to hook into the existingWrapping.stories, and provides a clear H1 heading with a concise description. It aligns with the style of the other documentation files in this PR.packages/html/stories/Wires.mdx (5)
1-4: Ensure correct Storybook metadata import and configuration.
Verify thatWires.stories.jsexports a default metadata object (including atitle) so that<Meta of={story} />properly picks up and displays the story metadata in the docs. If the default export is missing or incomplete, consider explicitly specifyingtitleor otherMetaprops here.
6-15: Approve edge-to-edge connections documentation.
The description of howGraphView.updateFixedTerminalPointstores mouse release points and computes connection segments is clear and concise. The Markdown structure is correct and will render well.
17-23: Approve orthogonal router section.
This section accurately explains the edge style's reliance onupdateFixedTerminalPointand the use ofstate.absolutePoints. The prose is clear and the heading hierarchy is appropriate.
31-34: Approve source-/targetConstraint explanation.
The explanation of howsourceConstraintandtargetConstraintstyles indicate segment orientation is accurate and helpful for users.
37-44: Approve alternative solution documentation.
The description of the connection-constraint approach is well-written and the reference to thePortRefsstory provides a clear next step for readers.packages/html/stories/AutoLayout.mdx (1)
1-2: Validate the MDX imports and story linkage
The MDX file importsMetaand the story module. Ensure thatAutoLayout.stories.jsexists alongside this MDX and exports the default metadata expected by Storybook. Theof={story}prop will inherit the title and component from that file—confirm both the import path and the export signature.
|
This is a first step that introduces the usage of mdx page to display the documentation.
The documentation of the "Wires" story includes valuable information that was previously only available in comments of the source of the Story.
Summary by CodeRabbit