refactor: introduce shared code to manage description of story #703
Conversation
Add a new function taking an HTML content that will be used to display the description of the Story in a dedicated div.
WalkthroughThis pull request streamlines the creation of main div elements across multiple story files. The changes update import statements in four story files to include a new function, Changes
Sequence Diagram(s)sequenceDiagram
participant Template
participant GraphContainer as createGraphContainer
participant MainDivCreator as createMainDiv
Template->>GraphContainer: createGraphContainer(args)
Template->>MainDivCreator: createMainDiv(innerHTML)
MainDivCreator-->>Template: mainDiv element
Template->>GraphContainer: append(mainDiv)
Possibly related PRs
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 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: 0
🧹 Nitpick comments (2)
packages/html/stories/shared/configure.js (1)
58-60: Consider adding a CSS class instead of inline stylesUsing inline styles works, but for better maintainability, consider using a CSS class instead. This would allow for easier styling updates across all stories.
- divMessage.style.fontFamily = 'Arial,Helvetica,sans-serif'; - divMessage.style.marginBottom = '1rem'; + divMessage.classList.add('story-description');Then add the corresponding CSS class in a shared stylesheet.
packages/html/stories/Events.stories.ts (1)
68-74: Consider adding an ID to the main div for accessibilityFor better accessibility and potential DOM references, consider adding an ID to the main div element in the
createMainDivfunction or as an optional parameter.In
configure.js, you could modify the function to accept an optional ID:-export function createMainDiv(htmlDescription) { +export function createMainDiv(htmlDescription, id = null) { const mainDiv = document.createElement('div'); + if (id) mainDiv.id = id; // rest of the function remains the sameThen in the stories, you could optionally provide an ID when it might be useful:
-const div = createMainDiv(` +const div = createMainDiv(` Creating a graph container and using interaction on the graph, including marquee selection, custom tooltips, context menu. <p> It also demonstrates how to use an edge style in the default stylesheet, and handle the double click on the adjustment point. <br> See also the <code>Overlays</code> Story for click event handling. - `); + `, 'events-description');
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
packages/html/stories/CustomHandlesConfiguration.stories.ts(2 hunks)packages/html/stories/Events.stories.ts(2 hunks)packages/html/stories/Overlays.stories.ts(2 hunks)packages/html/stories/ShowRegion.stories.ts(2 hunks)packages/html/stories/shared/configure.js(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: build (windows-2022)
- GitHub Check: build (ubuntu-22.04)
🔇 Additional comments (9)
packages/html/stories/shared/configure.js (1)
46-63: Good implementation of shared functionality! ✅This function nicely encapsulates the previously duplicated code for creating and styling description divs across story files. The documentation is clear and the implementation is straightforward.
packages/html/stories/Overlays.stories.ts (2)
35-39: Good import organizationThe change to import
createMainDivalongside other configuration functions is well-organized and maintains code clarity.
56-63: Successfully simplified component creationThe refactoring successfully replaces the manual creation of div elements with the shared function, making the code more concise and consistent with other story files.
packages/html/stories/CustomHandlesConfiguration.stories.ts (2)
36-36: Clean import statementThe import statement is concise and properly includes the new shared function.
58-63: Improved code readabilityThe use of
createMainDivsimplifies the Template function and removes duplication, making the code more readable and maintainable.packages/html/stories/Events.stories.ts (2)
43-47: Consistent import patternThe imports are organized consistently with other files, using a multi-line import statement for better readability.
68-74: Enhanced consistency across story filesThe refactoring makes this file consistent with other story files by using the shared
createMainDivfunction, which improves maintainability and reduces duplication.packages/html/stories/ShowRegion.stories.ts (2)
44-44: Good addition of the createMainDiv import.The import statement correctly adds the new
createMainDivfunction alongside the existingcreateGraphContainerimport.
63-65: Well-implemented refactoring of the description div creation.This change successfully implements the shared code approach for managing story descriptions. Instead of manually creating and styling a div element, the code now uses the dedicated
createMainDivfunction, passing the HTML description directly as an argument. This refactoring:
- Centralizes the styling and structure of description divs
- Makes the code more maintainable
- Provides consistency across different story files
The HTML message content is preserved during this refactoring.
Add a new function taking an HTML content that will be used to display the description of the Story in a dedicated div.
Summary by CodeRabbit
New Features
Refactor