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.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
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.
1 participant
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