refactor: migrate the Wrapping story to TypeScript #720
Conversation
This facilitates maintenance and enables errors to be detected earlier. Also - add a Storybook argument to disable `Graph.htmlLabels` to show its impact on wrapping and rendering of HTML markup - display a description at the top of the Graph to help understand what the story is doing.
WalkthroughThis change updates the Storybook story for graph labels by introducing a new boolean argument, Changes
Sequence Diagram(s)sequenceDiagram
participant S as Storybook
participant T as Template Function
participant M as createMainDiv
participant G as Graph Renderer
S->>T: Call Template({ ..., useHtmlLabels })
T->>M: Create main div with description and instructions
M-->>T: Return div element
T->>G: Configure graph\n- Set HTML labels using Boolean(args.useHtmlLabels)\n- Update edge with HTML content and style
G-->>T: Graph configured
T-->>S: Return populated div for rendering
Possibly related PRs
Tip ⚡🧪 Multi-step agentic review comment chat (experimental)
✨ 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:
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: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/html/stories/Wrapping.stories.ts(2 hunks)
🔇 Additional comments (10)
packages/html/stories/Wrapping.stories.ts (10)
20-20: Import addition looks good.Adding the
createMainDivimport makes sense as it's used to create the descriptive container for the story.
26-29: Good addition of useHtmlLabels control.Adding this boolean argument allows users to toggle HTML labels support in the story, which aligns with the PR objectives.
33-33: Default argument value is consistent.Setting the default to true maintains the existing behavior while allowing it to be toggled off.
38-44: Great addition of descriptive content.The addition of explanatory text at the top of the story helps users understand its purpose and how to use the controls. This improves the documentation aspect of the story.
47-47: Correct DOM structure update.Appending the container to the new div maintains the proper hierarchy with the added description.
53-53: Dynamic HTML labels configuration implemented correctly.Using the argument value to control the HTML labels feature works correctly, though the
Boolean()conversion could be avoided with proper typing in the function signature.
82-84: Good example of HTML markup in edge label.Adding the bold text element to the edge label provides a clear demonstration of HTML formatting in labels, which aligns with the story's purpose.
86-89: Style properties properly defined.Explicitly setting the fontColor to 'black' ensures consistent rendering across different themes or environments.
91-91: TypeScript non-null assertion used appropriately.The non-null assertion operator (
!) is used correctly here since the geometry object should always exist after edge insertion.
94-94: Return value properly updated.Returning the main div instead of just the container ensures the descriptive content is included in the story output.
This facilitates maintenance and enables errors to be detected earlier.
Also
Graph.htmlLabelsto show its impact on wrapping and rendering of HTML markupSummary by CodeRabbit