docs: display documentation with some stories - #816
Conversation
Sorry, something went wrong.
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 packages/html/stories/, each providing a title and a descriptive paragraph for the corresponding example. Additionally, a large explanatory comment was removed from Wires.stories.js, relocating its content to the new Wires.mdx documentation file. The Storybook configuration was updated to prioritize loading Introduction.mdx files before other stories and MDX files. The Introduction.mdx file had its Meta import and usage removed. 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 details Configuration used: CodeRabbit UI Reviewing files that changed from the base of the PR and between d772f89 and 287a603. 📒 Files selected for processing (6)
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. ❤️ Share 🪧 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 (.coderabbit.yaml)
Documentation and Community
|
Sorry, something went wrong.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (8)packages/html/stories/Boundary.mdx (1)📜 Review detailspackages/html/stories/ZoomAndFit.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/Anchors.mdx (3)8-8: Grammar refinement in description
The 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/Wires.mdx (1)2-4: Enhance import alias clarity.
The alias story is generic; consider renaming it to AnchorsStories (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/AutoLayout.mdx (2)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. Note4-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.
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Reviewing files that changed from the base of the PR and between 399d874 and d772f89.
📒 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)
- packages/html/stories/Wires.stories.js
- GitHub Check: build
- GitHub Check: build (ubuntu-22.04)
- GitHub Check: build (windows-2022)
- GitHub Check: build (macos-14)
packages/html/stories/Animation.mdx (3)1-3: Correct import for Storybook MDX blocks
Importing Meta from @storybook/blocks is 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 the Animation story
Using <Meta of={story} /> properly ties the MDX documentation to the Animation.stories definitions, providing seamless integration in Storybook.
6-8: Clear title and concise description
packages/html/stories/Boundary.mdx (2)
The # Animation heading 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.1-2: Imports correctly link MDX to the Storybook story metadata.
The Meta import from @storybook/blocks and the wildcard import of ./Boundary.stories ensure this MDX file is properly bound to its story configuration.
4-4: Meta block usage is correct.
packages/html/stories/ZoomAndFit.mdx (1)
Using <Meta of={story} /> properly attaches the story’s metadata to this documentation page.1-4: Import and Meta setup looks good
The import of Meta from @storybook/blocks and the <Meta of={story} /> component correctly configure the Storybook documentation for the ZoomAndFit story.
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 great
This new MDX file correctly imports Meta and the story, uses <Meta of={story} /> to hook into the existing Wrapping.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 that Wires.stories.js exports a default metadata object (including a title) 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 specifying title or other Meta props here.
6-15: Approve edge-to-edge connections documentation.
The description of how GraphView.updateFixedTerminalPoint stores 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 on updateFixedTerminalPoint and the use of state.absolutePoints. The prose is clear and the heading hierarchy is appropriate.
31-34: Approve source-/targetConstraint explanation.
The explanation of how sourceConstraint and targetConstraint styles indicate segment orientation is accurate and helpful for users.
37-44: Approve alternative solution documentation.
packages/html/stories/AutoLayout.mdx (1)
The description of the connection-constraint approach is well-written and the reference to the PortRefs story provides a clear next step for readers.1-2: Validate the MDX imports and story linkage
The MDX file imports Meta and the story module. Ensure that AutoLayout.stories.js exists alongside this MDX and exports the default metadata expected by Storybook. The of={story} prop will inherit the title and component from that file—confirm both the import path and the export signature.
Sorry, something went wrong.
|
Sorry, something went wrong.
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