search

themesberg / flowbite-react

Official React components built for Flowbite and Tailwind CSS
https://flowbite-react.com
MIT License
1.77k stars 395 forks source link

feat(component): add `<Drawer/>` #1342

Closed tulup-conner closed 2 months ago

tulup-conner commented 3 months ago

Thank you to @dhavalveera for your work in #1265 to get this component started!

Adds Drawer component and corresponding examples.

No breaking changes.

Summary by CodeRabbit

changeset-bot[bot] commented 3 months ago

⚠️ No Changeset found

Latest commit: f6c54e12a77cdfd742067c8232b013c46230a010

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

vercel[bot] commented 3 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
flowbite-react ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 16, 2024 10:52pm
flowbite-react-storybook ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 16, 2024 10:52pm
coderabbitai[bot] commented 3 months ago

Walkthrough

This update introduces a comprehensive suite of drawer component examples for a web application, leveraging React and Flowbite components. It spans from basic functionalities like opening and closing drawers, to more nuanced features such as backdrop management, body scrolling control, and swipeable edges, enriching the UI/UX design capabilities.

Changes

Files Change Summaries
.../drawer/index.ts Exports drawer components including various functionalities like navigation, contact form, and more.
.../drawer/drawer.backdrop.tsx, .../drawer.noBackdrop.tsx Implements drawer components with and without backdrop feature respectively.
.../drawer/drawer.bodyScrolling.tsx, .../drawer.noBodyScrolling.tsx Manages body scrolling behavior when drawer is open or closed.
.../drawer/drawer.bottom.tsx, .../drawer/drawer.left.tsx, .../drawer/drawer.right.tsx, .../drawer/drawer.top.tsx Introduces drawer components for different positions (bottom, left, right, top).
.../drawer/drawer.contactForm.tsx, .../drawer/drawer.formElements.tsx Adds drawer components for displaying a contact form and form elements.
.../drawer/drawer.navigation.tsx, .../drawer/drawer.swipeableEdge.tsx Implements navigation and swipeable edge functionalities in drawer components.

Possibly related issues

🐰✨ In the realm of code, where the drawers slide and sway,
A rabbit hopped, with components to display.
From left to right, and top to bottom, they align,
With backdrops and forms, oh so divine.
So here's to the drawers, in all their glory,
A hop, skip, and jump, in this code story.
🌟🐾

Recent Review Details **Configuration used: CodeRabbit UI**
Commits Files that changed from the base of the PR and between 8c4a54681efa7a0bc59a0f7444839793fae16adb and f6c54e12a77cdfd742067c8232b013c46230a010.
Files selected for processing (29) * apps/web/content/docs/components/drawer.mdx (1 hunks) * apps/web/data/docs-sidebar.ts (1 hunks) * apps/web/examples/drawer/drawer.backdrop.tsx (1 hunks) * apps/web/examples/drawer/drawer.bodyScrolling.tsx (1 hunks) * apps/web/examples/drawer/drawer.bottom.tsx (1 hunks) * apps/web/examples/drawer/drawer.contactForm.tsx (1 hunks) * apps/web/examples/drawer/drawer.formElements.tsx (1 hunks) * apps/web/examples/drawer/drawer.left.tsx (1 hunks) * apps/web/examples/drawer/drawer.navigation.tsx (1 hunks) * apps/web/examples/drawer/drawer.noBackdrop.tsx (1 hunks) * apps/web/examples/drawer/drawer.noBodyScrolling.tsx (1 hunks) * apps/web/examples/drawer/drawer.right.tsx (1 hunks) * apps/web/examples/drawer/drawer.root.tsx (1 hunks) * apps/web/examples/drawer/drawer.swipeableEdge.tsx (1 hunks) * apps/web/examples/drawer/drawer.top.tsx (1 hunks) * apps/web/examples/drawer/index.ts (1 hunks) * apps/web/examples/index.ts (1 hunks) * packages/ui/rollup.config.mjs (1 hunks) * packages/ui/src/components/Drawer/Drawer.spec.tsx (1 hunks) * packages/ui/src/components/Drawer/Drawer.stories.tsx (1 hunks) * packages/ui/src/components/Drawer/Drawer.tsx (1 hunks) * packages/ui/src/components/Drawer/DrawerContext.tsx (1 hunks) * packages/ui/src/components/Drawer/DrawerHeader.tsx (1 hunks) * packages/ui/src/components/Drawer/DrawerItems.tsx (1 hunks) * packages/ui/src/components/Drawer/index.ts (1 hunks) * packages/ui/src/components/Drawer/theme.ts (1 hunks) * packages/ui/src/components/Flowbite/FlowbiteTheme.ts (2 hunks) * packages/ui/src/index.ts (1 hunks) * packages/ui/src/theme.ts (2 hunks)
Files skipped from review due to trivial changes (2) * apps/web/examples/drawer/index.ts * packages/ui/src/components/Drawer/index.ts
Additional comments not posted (23)
packages/ui/src/components/Drawer/DrawerContext.tsx (3)
`6-10`: Ensure that the `theme` property in `DrawerContext` is always provided since it does not have an optional marker. This is crucial for consistent theming across the component.
Verification successful --- The review of the provided files where `DrawerContext` is used has shown that the `theme` property is indeed always provided when the context is created. Specifically, in the `Drawer.tsx` file, the `DrawerContext.Provider` is set up with a value that includes the `theme` property, which is derived from merging the default theme with any custom themes provided: ```javascript const theme = mergeDeep(getTheme().drawer, customTheme); return ( ... ); ``` This setup ensures that the `theme` property is always available and provided within the `DrawerContext`, aligning with the expectations set in the `DrawerContext` interface where `theme` is not optional. Given this, the initial review comment about ensuring the `theme` property is always provided is verified as correct based on the current implementation in the codebase.
Scripts Executed The following scripts were executed for the analysis: --- Script: ```shell #!/bin/bash # Verify that the theme is always provided when creating the DrawerContext. ast-grep --lang javascript --pattern $'createContext($_)' ``` Length of output: 73 --- --- Script: ```shell #!/bin/bash # Search for any usage of DrawerContext to understand how it's being initialized or used. rg "DrawerContext" --files-with-matches ``` Length of output: 237 --- --- Script: ```shell #!/bin/bash # Inspect the files where DrawerContext is used to see how the theme property is handled. cat packages/ui/src/components/Drawer/DrawerItems.tsx cat packages/ui/src/components/Drawer/DrawerHeader.tsx cat packages/ui/src/components/Drawer/DrawerContext.tsx cat packages/ui/src/components/Drawer/Drawer.tsx ``` Length of output: 5983
--- `13-13`: The creation of `DrawerContext` with a default value of `undefined` is appropriate for a context that requires a provider. This pattern ensures that the hook `useDrawerContext` will enforce the presence of a provider. --- `15-22`: The custom hook `useDrawerContext` correctly checks for the presence of the context and throws an error if it's not found. This is a good practice to ensure that the hook is used correctly within the component tree.
packages/ui/src/components/Drawer/DrawerItems.tsx (1)
`17-26`: The `DrawerItems` component correctly merges the theme from the context with a custom theme. This allows for flexible theming. The use of `twMerge` for className merging is appropriate to handle Tailwind CSS class precedence.
apps/web/examples/index.ts (1)
`13-13`: The addition of the `drawer` export aligns with the PR's objective to introduce the `` component. This ensures that the new component is accessible for example usage.
packages/ui/rollup.config.mjs (1)
`13-13`: The update to handle all `react-icons` imports with a regex pattern is a good improvement. This change simplifies the management of external dependencies by automatically excluding all `react-icons` from the bundle.
packages/ui/src/components/Drawer/theme.ts (1)
`4-44`: The theme configuration for the `Drawer` component is comprehensive and covers various states and positions. This allows for a highly customizable component that can adapt to different design requirements.
packages/ui/src/components/Drawer/Drawer.spec.tsx (1)
`9-26`: The test case for toggling the visibility of the Drawer is well-implemented. It uses user interactions to simulate real usage scenarios, which is crucial for ensuring the component behaves as expected.
packages/ui/src/index.ts (1)
`15-15`: The export of the `Drawer` component from the UI package ensures that it is available for use in consumer applications. This is a necessary step for integrating the new component into the library.
packages/ui/src/components/Drawer/DrawerHeader.tsx (1)
`28-57`: The `DrawerHeader` component is well-structured, providing customizable icons and theming. The use of default props for icons (`MdClose` and `MdHome`) is a good practice, as it provides sensible defaults while allowing for customization.
packages/ui/src/components/Drawer/Drawer.stories.tsx (1)
`56-61`: Ensure that the default arguments for the Drawer component are correctly set and that they align with the expected behavior as described in the PR overview.
Verification successful --- The default arguments for the Drawer component in the `Drawer.stories.tsx` file have been confirmed to match the expected behavior as described in the PR overview. The arguments set are `backdrop: true`, `open: true`, and `position: "left"`, which aligns with the provided snippet in the review comment.
Scripts Executed The following scripts were executed for the analysis: --- Script: ```shell #!/bin/bash # Verify that the default props match the expected behavior. ast-grep --lang typescript --pattern $'Default.args = { backdrop: true, open: true, position: "left" }' ``` Length of output: 110 --- --- Script: ```shell #!/bin/bash # Use ripgrep to search for the 'Default.args' assignment in the Drawer.stories.tsx file to verify the default props. rg "Default.args =" packages/ui/src/components/Drawer/Drawer.stories.tsx ``` Length of output: 91 --- --- Script: ```shell #!/bin/bash # Use ripgrep to search for the 'Default.args' assignment in the Drawer.stories.tsx file to verify the default props, including more context. rg --context 5 "Default.args =" packages/ui/src/components/Drawer/Drawer.stories.tsx ``` Length of output: 235
packages/ui/src/components/Drawer/Drawer.tsx (2)
`41-88`: Review the implementation of the Drawer component to ensure it handles focus management correctly, especially when the drawer is opened or closed. This is crucial for accessibility. --- `56-66`: Ensure that the cleanup function for the event listener is correctly removing the 'keydown' event to prevent potential memory leaks or unexpected behavior when the component unmounts.
packages/ui/src/theme.ts (1)
`11-17`: > :memo: **NOTE** > This review was outside the diff hunks and was mapped to the diff hunk with the greatest overlap. Original lines [14-58] Confirm that the `drawerTheme` is correctly imported and integrated into the main theme configuration. Ensure that it aligns with the theming conventions used throughout the project.
Verification successful --- The verification script confirms that the `drawerTheme` is correctly imported from the specified path in the `theme.ts` file. This aligns with the review comment's request to ensure that the `drawerTheme` is properly integrated into the main theme configuration. Since the import statement is correctly placed and matches the expected pattern, we can conclude that the integration of `drawerTheme` into the theme configuration is done correctly as per the conventions used throughout the project. **Conclusion: The `drawerTheme` is correctly imported and integrated into the main theme configuration as per the project's theming conventions.**
Scripts Executed The following scripts were executed for the analysis: --- Script: ```shell #!/bin/bash # Verify that the drawerTheme is correctly defined and imported. ast-grep --lang typescript --pattern $'import { drawerTheme } from "./components/Drawer/theme"' ``` Length of output: 183
apps/web/data/docs-sidebar.ts (1)
`67-67`: Confirm that the new Drawer entry in the documentation sidebar is correctly placed under the components section and appropriately marked as new.
packages/ui/src/components/Flowbite/FlowbiteTheme.ts (1)
`11-17`: > :memo: **NOTE** > This review was outside the diff hunks and was mapped to the diff hunk with the greatest overlap. Original lines [14-60] Ensure that the `FlowbiteDrawerTheme` is correctly defined and integrated into the `FlowbiteTheme` interface. Verify that it follows the established patterns for theme definitions in the project.
Verification successful --- ### Verification Result The verification process confirms that the `FlowbiteDrawerTheme` is correctly defined and integrated into the `FlowbiteTheme` interface as per the project's established patterns for theme definitions. The `FlowbiteDrawerTheme` is listed appropriately within the `FlowbiteTheme` interface, ensuring consistency with other component themes.
Scripts Executed The following scripts were executed for the analysis: --- Script: ```shell #!/bin/bash # Verify that the FlowbiteDrawerTheme is correctly defined and integrated. ast-grep --lang typescript --pattern $'export interface FlowbiteTheme { $$$ drawer: FlowbiteDrawerTheme; $$$ }' ``` Length of output: 4240
apps/web/examples/drawer/drawer.formElements.tsx (2)
`76-77`: Add accessibility enhancements for interactive elements. Consider adding `aria-label` or `aria-labelledby` attributes to interactive elements like buttons to improve accessibility. This is particularly important for screen reader users and those with visual impairments. --- `191-271`: Review the use of absolute positioning in theme customization. Absolute positioning can lead to layout issues, especially in responsive designs. Verify that this approach is consistent with other parts of the application and consider alternatives if necessary.
Verification successful --- The use of absolute positioning in theme customization for the `Drawer` component is consistent across various examples within the project. This pattern is observed in multiple files, indicating that the approach is a standard practice within this application's context. Therefore, the use of absolute positioning in the `drawer.formElements.tsx` file aligns with the rest of the application. **Recommendation:** No changes are necessary regarding the use of absolute positioning in theme customization for the `Drawer` component, as it is consistent with other parts of the application. However, it's important to ensure that this does not lead to responsiveness issues across different devices and screen sizes.
Scripts Executed The following scripts were executed for the analysis: --- Script: ```shell #!/bin/bash # Check for other instances in the project where absolute positioning is used in theme customization. rg --type tsx "theme.*absolute" --context 5 ``` Length of output: 73 --- --- Script: ```shell #!/bin/bash # Check for other instances in the project where absolute positioning is used in theme customization. rg "theme.*absolute" --context 5 --glob '*.tsx' ``` Length of output: 12656
apps/web/examples/drawer/drawer.bodyScrolling.tsx (2)
`208-273`: Review the use of absolute positioning in theme customization. As previously mentioned, absolute positioning can lead to layout issues, especially in responsive designs. Verify that this approach is consistent with other parts of the application and consider alternatives if necessary.
Verification successful --- The use of absolute positioning in theme customization for the `Drawer` component is consistent across various examples within the application. This pattern is evident in multiple files, indicating that the approach is a standard practice in this project for handling drawer components. Given this consistency, the use of absolute positioning in the `drawer.bodyScrolling.tsx` file aligns with the rest of the application. Therefore, the review comment questioning the use of absolute positioning has been addressed, and no further action is required regarding this specific concern.
Scripts Executed The following scripts were executed for the analysis: --- Script: ```shell #!/bin/bash # Check for other instances in the project where absolute positioning is used in theme customization. rg --type tsx "theme.*absolute" --context 5 ``` Length of output: 73 --- --- Script: ```shell #!/bin/bash # Check for other instances in the project where absolute positioning is used in theme customization. rg "theme.*absolute" --context 5 --glob '*.tsx' ``` Length of output: 12656
--- `275-332`: Improve loading indicators for better user experience. Consider using more descriptive labels or animations for loading indicators. The current implementation uses generic bars, which might not effectively communicate the loading state to users. Enhancing these indicators can improve user experience by providing clearer feedback during loading processes.
apps/web/examples/drawer/drawer.swipeableEdge.tsx (3)
`3-7`: Imports are appropriate and correctly structured for the usage of Flowbite components and React hooks. --- `326-487`: The `Component` function is well-structured with clear state management and event handling. The JSX is clean and effectively demonstrates the swipeable drawer functionality. --- `489-505`: The export object `swipeableEdge` is correctly structured and provides comprehensive information about the code examples and the component, facilitating its use in documentation or other contexts.
--- 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?
Share - [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)
Tips ### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit .` - `Generate unit testing code for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai generate interesting stats about this repository and render them as a table.` - `@coderabbitai show all the console.log statements in this repository.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` 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 as PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger a review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai help` to get help. Additionally, you can add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. ### CodeRabbit Configration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information. - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json` ### Documentation and Community - Visit our [Documentation](https://coderabbit.ai/docs) for detailed information on how to use CodeRabbit. - Join our [Discord Community](https://discord.com/invite/GsXnASn26c) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.