feat: updated filters dropdown and created stories for it #3174
Conversation
devilkiller-ag
requested review from
derberg,
akshatnema,
magicmatatjahu,
anshgoyalevil,
Mayaleeeee and
asyncapi-bot-eve
as code owners
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
akshatnema
added
the
gsoc
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-3174--asyncapi-website.netlify.app/ |
|
@devilkiller-ag Where are stories of dropdown? |
asyncapi-bot
requested review from
BhaswatiRoy,
J0SAL,
TRohit20 and
VaishnaviNandakumar
Added all the stories for filters dropdown. |
|
/update |
…ate-filters-dropdown
…ate-filters-dropdown
WalkthroughThe pull request introduces enhancements to the Changes
Assessment against linked issues
Poem
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
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
components/tools/FiltersDropdown.stories.tsx (2)
1-2: Consider importing directly from '@storybook/react'Since the
useArgshook is also available from@storybook/react, double-check if you want to rely on@storybook/preview-apior the more standard@storybook/react. Consistency across Storybook imports may simplify maintenance.
29-51: Use consistent story naming conventionsCurrently, the primary story is defined as
Dropdown. For clarity and discoverability, consider naming itDefaultDropdownor something similarly descriptive. This ensures better readability in the Storybook UI alongside your specialized stories.- const Dropdown: Story = { + const DefaultDropdown: Story = {components/tools/FiltersDropdown.tsx (1)
Line range hint
29-47: Ensure event usage is necessary
handleClickOptionincludes aneventparameter. Currently, the function references onlycheckedOptionsandoption. If you don’t needeventfor specific logic such as stopping propagation or preventing default behavior, it could be removed to simplify the function signature.- const handleClickOption = (event: React.MouseEvent<HTMLDivElement, MouseEvent>, option: string) => { + const handleClickOption = (_: React.MouseEvent<HTMLDivElement, MouseEvent>, option: string) => {
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
package-lock.jsonis excluded by!**/package-lock.jsonpublic/img/illustrations/icons/CheckedIcon.svgis excluded by!**/*.svgpublic/img/illustrations/icons/UncheckedIcon.svgis excluded by!**/*.svg
📒 Files selected for processing (3)
components/tools/FiltersDropdown.stories.tsx(1 hunks)components/tools/FiltersDropdown.tsx(3 hunks)package.json(1 hunks)
🧰 Additional context used
🪛 GitHub Actions: PR testing - if Node project
package.json
[error] Package lock file is out of sync. Missing dependencies in lock file: @storybook/[email protected] and @storybook/[email protected]
[warning] Package '@tisoap/[email protected]' has incompatible engine requirements. Required: node >= 16, npm ^8.0.0. Current: node v20.11.0, npm 10.2.4
⏰ Context from checks skipped due to timeout of 180000ms (3)
- GitHub Check: Redirect rules - asyncapi-website
- GitHub Check: Header rules - asyncapi-website
- GitHub Check: Pages changed - asyncapi-website
🔇 Additional comments (5)
components/tools/FiltersDropdown.stories.tsx (2)
9-25: Good use ofargTypesfor controlling props in StorybookDefining
argTypesfordataList,checkedOptions, andsetCheckedOptionshelps maintain clarity around how each prop is expected to be controlled. This is a beneficial setup for customizing story interactions.
53-75: Check for potential overlap between Language and Technology listsWhile the
LanguageDropdownandTechnologyDropdownstories provide separate data sets, confirm whether there's any overlap or potential naming collisions (e.g., a technology that is also a recognized language) that might produce confusion when searching or filtering. If so, consider unique naming or additional context in the UI.components/tools/FiltersDropdown.tsx (2)
8-8: ExportingFiltersDropdownPropsfacilitates reusabilityExporting the interface is valuable, especially if you plan to reuse this dropdown across multiple stories or even other components. This is a positive change in making the codebase more modular.
46-61: Good approach for toggling checked stateUsing a single click event and toggling the presence of
optionincheckedOptionsis concise. Maintaining a consistent, minimal approach to toggling states helps keep the UI responsive and straightforward.package.json (1)
58-58: Confirm Storybook addons integrationAdding
"@storybook/addons": "^7.6.17"helps expand Storybook's capabilities. However, ensure it aligns with the other Storybook packages’ versions. Mismatched versions can cause unexpected behavior or build conflicts.🧰 Tools
🪛 GitHub Actions: PR testing - if Node project
[error] Package lock file is out of sync. Missing dependencies in lock file: @storybook/[email protected] and @storybook/[email protected]
[warning] Package '@tisoap/[email protected]' has incompatible engine requirements. Required: node >= 16, npm ^8.0.0. Current: node v20.11.0, npm 10.2.4
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #3174 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 19 19
Lines 668 668
=========================================
Hits 668 668 ☔ View full report in Codecov by Sentry. |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
components/tools/FiltersDropdown.tsx (3)
38-40: Handle empty data list gracefully.While the styling updates look good, consider short-circuiting or providing a placeholder message when
dataListis empty to improve user feedback.return ( dataList.length === 0 ? ( + <div>No filter options available</div> ) : ( <div className={twMerge( `max-w-lg flex flex-col max-h-[40vh] gap-1 overflow-y-auto p-2 px-0 duration-200 delay-150 bg-gray-200 ${className}` )} data-testid='FiltersDropdown-div' > ... </div> ) );
46-53: Improve accessibility by using a semantically interactive element.It’s recommended to use a
<button>or at least add arole="button"to the clickable<div>elements. This ensures proper focus order and keyboard interaction for users relying on assistive technologies.-<div +<button key={index} - className={twMerge( - ... - )} - onClick={(event) => handleClickOption(event, data.name)} + role="button" + type="button" + onClick={(event) => handleClickOption(event, data.name)} > ... -</div> +</button>
54-61: Consider text alternatives for icons.Using images for checked/unchecked states is fine, but ensure meaningful alt text (e.g., “Selected option” and “Unselected option”) to enhance screen-reader support for accessible user experiences.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (1)
components/tools/FiltersDropdown.tsx(3 hunks)
🔇 Additional comments (2)
components/tools/FiltersDropdown.tsx (2)
8-8: Encapsulating props for broader usage.Exporting the
FiltersDropdownPropsinterface extends its utility across the codebase, promoting reusability and consistency.
29-29: Good practice: capturing mouse event details.Adding the
eventparameter allows more control over the user interaction, such as preventing default actions or stopping event propagation where necessary.
|
@akshatnema this PR is ready for review! |
Description
This PR updates the filters dropdown according to the design proposed in issue #1318 and creates stories for it.
Related issue(s)
Resolves #1318
Summary by CodeRabbit
New Features
Documentation
Dependency Updates
Improvements