search

themesberg / flowbite-react

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

feat(component): add `<MegaMenu/>` #1331

Closed tulup-conner closed 5 months ago

tulup-conner commented 6 months ago

Implements https://flowbite.com/docs/components/mega-menu/ for flowbite-react

This time, use the new monorepo!

No breaking changes.

Summary by CodeRabbit

stackblitz[bot] commented 6 months ago

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

changeset-bot[bot] commented 6 months ago

⚠️ No Changeset found

Latest commit: ad5bff25e4b136b3940d9e39a513276f39e70750

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 6 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:57pm
flowbite-react-storybook ❌ Failed (Inspect) Apr 16, 2024 10:57pm
coderabbitai[bot] commented 6 months ago

Walkthrough

The update brings a significant enhancement to the Flowbite UI library with the introduction of a versatile Mega Menu component. This Mega Menu enriches website navigation by offering full-width dropdowns, responsive layouts, and diverse styles. Seamlessly integrated with Flowbite-React components, it provides customizable dropdowns, navigation links, and visual improvements for a more engaging user experience.

Changes

Files Changes
megaMenu.mdx, megaMenu.fullWidth.tsx, megaMenu.fullWidthCTA.tsx, megaMenu.fullWidthImage.tsx, megaMenu.root.tsx Introduced new Mega Menu components with various styles and functionalities.
docs-sidebar.ts, index.ts, megaMenu/index.ts, .../src/index.ts Updated and added new entries for Mega Menu in various index and sidebar configurations.
MegaMenu.tsx, MegaMenuDropdown.tsx, MegaMenuDropdownToggle.tsx New components for Mega Menu functionalities including dropdowns and toggle mechanisms.
MegaMenu.spec.tsx, MegaMenu.stories.tsx Added test cases and storybook entries for the new Mega Menu components.
FlowbiteTheme.ts, theme.ts, theme.ts Updated theme configurations to include styles and settings for the new Mega Menu components.

🐰✨
In the land of code, where the bits align,
A Mega Menu blooms, design so fine.
Dropdowns dance, links in a row,
Navigating the web, with a seamless flow.
Cheers to the devs, with a hop and a cheer, 🎉
For making our web much nicer to steer!
🐰✨

Recent Review Details **Configuration used: CodeRabbit UI**
Commits Files that changed from the base of the PR and between 1ffd9dc284df6c0aae47f0c78a7fa338faf9726a and ad5bff25e4b136b3940d9e39a513276f39e70750.
Files ignored due to path filters (1) * `apps/web/public/dashboard-overview.png` is excluded by `!**/*.png`
Files selected for processing (19) * apps/web/content/docs/components/mega-menu.mdx (1 hunks) * apps/web/data/docs-sidebar.ts (1 hunks) * apps/web/examples/index.ts (1 hunks) * apps/web/examples/megaMenu/index.ts (1 hunks) * apps/web/examples/megaMenu/megaMenu.fullWidth.tsx (1 hunks) * apps/web/examples/megaMenu/megaMenu.fullWidthCTA.tsx (1 hunks) * apps/web/examples/megaMenu/megaMenu.fullWidthImage.tsx (1 hunks) * apps/web/examples/megaMenu/megaMenu.icons.tsx (1 hunks) * apps/web/examples/megaMenu/megaMenu.root.tsx (1 hunks) * packages/ui/src/components/Flowbite/FlowbiteTheme.ts (2 hunks) * packages/ui/src/components/MegaMenu/MegaMenu.spec.tsx (1 hunks) * packages/ui/src/components/MegaMenu/MegaMenu.stories.tsx (1 hunks) * packages/ui/src/components/MegaMenu/MegaMenu.tsx (1 hunks) * packages/ui/src/components/MegaMenu/MegaMenuDropdown.tsx (1 hunks) * packages/ui/src/components/MegaMenu/MegaMenuDropdownToggle.tsx (1 hunks) * packages/ui/src/components/MegaMenu/index.ts (1 hunks) * packages/ui/src/components/MegaMenu/theme.ts (1 hunks) * packages/ui/src/index.ts (1 hunks) * packages/ui/src/theme.ts (2 hunks)
Files not summarized due to errors (1) * apps/web/examples/megaMenu/megaMenu.icons.tsx: Error: Message exceeds token limit
Files skipped from review as they are similar to previous changes (16) * apps/web/data/docs-sidebar.ts * apps/web/examples/index.ts * apps/web/examples/megaMenu/index.ts * apps/web/examples/megaMenu/megaMenu.fullWidth.tsx * apps/web/examples/megaMenu/megaMenu.fullWidthCTA.tsx * apps/web/examples/megaMenu/megaMenu.fullWidthImage.tsx * apps/web/examples/megaMenu/megaMenu.root.tsx * packages/ui/src/components/Flowbite/FlowbiteTheme.ts * packages/ui/src/components/MegaMenu/MegaMenu.spec.tsx * packages/ui/src/components/MegaMenu/MegaMenu.tsx * packages/ui/src/components/MegaMenu/MegaMenuDropdown.tsx * packages/ui/src/components/MegaMenu/MegaMenuDropdownToggle.tsx * packages/ui/src/components/MegaMenu/index.ts * packages/ui/src/components/MegaMenu/theme.ts * packages/ui/src/index.ts * packages/ui/src/theme.ts
Additional Context Used
GitHub Check Runs (1)
🕵 Lint success (10)
packages/ui/src/components/MegaMenu/MegaMenu.stories.tsx: [warning] 35-35: Classname 'hover:text-primary-600' is not a Tailwind CSS class! --- packages/ui/src/components/MegaMenu/MegaMenu.stories.tsx: [warning] 35-35: Classname 'dark:hover:text-primary-500' is not a Tailwind CSS class! --- packages/ui/src/components/MegaMenu/MegaMenu.stories.tsx: [warning] 40-40: Classname 'hover:text-primary-600' is not a Tailwind CSS class! --- packages/ui/src/components/MegaMenu/MegaMenu.stories.tsx: [warning] 40-40: Classname 'dark:hover:text-primary-500' is not a Tailwind CSS class! --- packages/ui/src/components/MegaMenu/MegaMenu.stories.tsx: [warning] 45-45: Classname 'hover:text-primary-600' is not a Tailwind CSS class!
Additional comments not posted (3)
apps/web/examples/megaMenu/megaMenu.icons.tsx (3)
`17-107`: Consolidate repeated `Component` function definitions. As previously noted, the multiple definitions of the `Component` function are redundant and could lead to confusion. Consider consolidating these into a single, well-documented function or clearly differentiate them if they serve distinct purposes. --- `110-316`: Consolidate repeated `Component` function definitions. As previously noted, the multiple definitions of the `Component` function are redundant and could lead to confusion. Consider consolidating these into a single, well-documented function or clearly differentiate them if they serve distinct purposes. --- `319-513`: Consolidate repeated `Component` function definitions. As previously noted, the multiple definitions of the `Component` function are redundant and could lead to confusion. Consider consolidating these into a single, well-documented function or clearly differentiate them if they serve distinct purposes.
--- 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.