nextui icon indicating copy to clipboard operation
nextui copied to clipboard
verified publisher icon nextui-org

feat(rating): add rating component

Open macci001 opened this issue 1 year ago • 8 comments

Closes #3807

📝 Description

Adds a new component for rating.

⛳️ Current behavior (updates)

Currently NextUI does not have Rating component.

🚀 New behavior

The PR adds Rating Component.

  • Rating Component

https://github.com/user-attachments/assets/8a6b51ac-8c03-4ed9-8f0e-9d85168cd7e0

  • Controlled

https://github.com/user-attachments/assets/46a19189-ab39-417f-9340-ce8072cdb0da

  • singleSelection

https://github.com/user-attachments/assets/f65aa1eb-92de-484c-bea4-c9b964942d3f

  • Disabled Screenshot 2024-09-27 at 1 16 31 PM

  • Sizes Screenshot 2024-09-27 at 1 16 47 PM

  • fillColor Screenshot 2024-09-27 at 1 17 05 PM

  • customIcon Screenshot 2024-09-27 at 1 17 17 PM

💣 Is this a breaking change (Yes/No): No

Summary by CodeRabbit

Release Notes

  • New Features

    • Introduced a comprehensive Rating component with customizable icons and various configurations.
    • Added new RatingIcon and RatingSegment components for enhanced flexibility in rating displays.
    • Included new emoticon icons for improved user feedback in ratings.

  • Documentation

    • Added documentation for the @nextui-org/rating package detailing installation and usage.
    • Enhanced documentation for the Rating component with detailed API sections and examples.
    • Created Storybook stories to showcase various use cases of the Rating component.

  • Tests

    • Implemented unit tests for the Rating component to ensure functionality and integration with forms.

macci001 avatar Sep 26 '24 10:09 macci001

🦋 Changeset detected

Latest commit: 0e9f48ac4716082d81f9ad369024df6af6cb3f8c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 19 packages
Name Type
@nextui-org/rating Minor
@nextui-org/react Minor
@nextui-org/theme Minor
@nextui-org/shared-icons Minor
@nextui-org/accordion Patch
@nextui-org/alert Patch
@nextui-org/autocomplete Patch
@nextui-org/breadcrumbs Patch
@nextui-org/calendar Patch
@nextui-org/chip Patch
@nextui-org/date-picker Patch
@nextui-org/drawer Patch
@nextui-org/input Patch
@nextui-org/link Patch
@nextui-org/modal Patch
@nextui-org/pagination Patch
@nextui-org/select Patch
@nextui-org/snippet Patch
@nextui-org/table Patch

Not sure what this means? Click here to learn what changesets are.

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

changeset-bot[bot] avatar Sep 26 '24 10:09 changeset-bot[bot]

[!NOTE]

Reviews paused

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Walkthrough

The changes introduce a new Rating component to the project, allowing users to select ratings using icons. This component supports various configurations, including custom icons, precision ratings, and accessibility features. Additionally, comprehensive documentation, unit tests, and examples for the Rating component have been added, along with updates to the package configurations.

Changes

Files Change Summary
apps/docs/content/docs/components/rating.mdx Added documentation for the Rating component, detailing its usage, properties, and examples.
packages/components/rating/src/*.tsx Introduced multiple files defining various Rating components, including Rating, RatingSegment, and RatingIcon, along with hooks for state management.
packages/components/rating/stories/rating.stories.tsx Created Storybook stories for the Rating component, showcasing various configurations and functionalities.
packages/utilities/shared-icons/src/*.tsx Added new icon components for use in the Rating system, including AngryEmojicon and StarIcon.
packages/components/rating/package.json Added a new package.json for the @nextui-org/rating component, defining metadata and dependencies.

Assessment against linked issues

Objective Addressed Explanation
Create a new rating component (Feature Request #3807) ✅
Support for custom icons in the rating component (Feature Request #3807) ✅
Allow for precise value ratings (Feature Request #3807) ✅
Provide examples for usage and documentation (Feature Request #3807) ✅

Possibly related PRs

  • #3768: This PR addresses functionality related to the fullWidth property in input and select components, which may be relevant to the Rating component's handling of properties and user interactions.
  • #3815: Although primarily focused on updating branding from Twitter to X, this PR involves changes to components that may interact with or be styled similarly to the Rating component, particularly in terms of visual presentation and user interface consistency.

Suggested labels

👀 Status: In Review, 📋 Scope : Docs

Suggested reviewers

  • ryo-manba
  • wingkwong

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
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • 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 gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @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.
    • @coderabbitai help me debug CodeRabbit configuration file.

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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

coderabbitai[bot] avatar Sep 26 '24 10:09 coderabbitai[bot]

Someone is attempting to deploy a commit to the NextUI Inc Team on Vercel.

A member of the Team first needs to authorize it.

vercel[bot] avatar Sep 26 '24 10:09 vercel[bot]

Hi @ryo-manba, The current code uses the vanilla radio inputs which suffices the need of the rating component. Reference from rating-segment component:

<input
   className={`absolute top-0 inset-0 opacity-0 cursor-pointer`}
    name={name}
    type="radio"
    onBlur={onBlur}
    onChange={onChange}
 />

Just trying to understand more, why should we add a dependency of use-radio-group to the rating as vanilla input radio does the job?

macci001 avatar Oct 09 '24 08:10 macci001

@macci001 Using useRadioGroup can enhance the accessibility and semantics of native HTML radio elements. For more details, please refer to the React Aria documentation.

ryo-manba avatar Oct 09 '24 13:10 ryo-manba

@coderabbitai pause

macci001 avatar Oct 15 '24 10:10 macci001

:white_check_mark: Actions performed

Reviews paused.

coderabbitai[bot] avatar Oct 15 '24 10:10 coderabbitai[bot]

Applied the reviews in the commit 31632adfb83ff027b9c4815c20413ad22e689ae8 // cc @wingkwong @ryo-manba

macci001 avatar Oct 18 '24 09:10 macci001

Hey @macci001 please fix the conflicts

jrgarciadev avatar Nov 04 '24 21:11 jrgarciadev

@ryo-manba applied your suggestions here.

  • Keyboard Navigation Indicator

https://github.com/user-attachments/assets/cf086b7b-6a61-458f-a7cf-996322d8fdd4

https://github.com/user-attachments/assets/2a75ef12-a1ed-4362-b04c-205c8c95f0b2

macci001 avatar Nov 05 '24 19:11 macci001