ui Feat: add new `Ratings` component and examples

Feat: add new `Ratings` component and examples

Open jrTilak opened this issue 6 months ago • 18 comments

fixes #1107 , fixes #2235

Added Rating Star Component

Why?

The library lacks a rating component, and this addition aims to provide a valuable feature. Addressing community's demand: Two related issues, #1107 and #2235, highlighted the community's interest in having a rating component.

How?

Introduced a new component, Ratings, that displays a rating value as a series of stars or other custom icon.
Utilized the Lucide React library for star icons.
Provided customization options for total stars, size, fill behavior, and different variants.

Feedback is appreciated. 🔥❤️

Jan 09 '24 09:01 jrTilak

@jrTilak is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

Jan 09 '24 09:01 vercel[bot]

How can this component be edited to be used in a form with maybe ToggleGroupPrimitive?

Jan 09 '24 18:01 iansamz

How can this component be edited to be used in a form with maybe ToggleGroupPrimitive?

We can do like this :

<Ratings rating={1.5} />
<Ratings rating={2} variant="destructive" Icon={Heart} />
<Ratings rating={2.5} variant="yellow" totalStars={8} />

We can pass the following props and other native props as a html element like onClick, styles etc

Name	Type	Default	Description
rating	number (required)	-	Rating value.
totalStars	number	5	Total number of stars.
size	number	20	Size of each star.
fill	boolean	true	Whether to fill the stars or not.
Icon	React.ComponentType	Star	Custom icon instead of Star.
variant	enum	"default"	"default", "destructive", and "yellow".

That's it and i don't understand what you mean by ToggleGroupPrimitive 🫠

Jan 10 '24 01:01 jrTilak

How can this component be edited to be used in a form with maybe ToggleGroupPrimitive?

We can do like this :
<Ratings rating={1.5} />
<Ratings rating={2} variant="destructive" Icon={Heart} />
<Ratings rating={2.5} variant="yellow" totalStars={8} />
We can pass the following props and other native props as a html element like onClick, styles etc

Name Type Default Description rating number (required) - Rating value. totalStars number 5 Total number of stars. size number 20 Size of each star. fill boolean true Whether to fill the stars or not. Icon React.ComponentType Star Custom icon instead of Star. variant enum "default" "default", "destructive", and "yellow". That's it and i don't understand what you mean by ToggleGroupPrimitive 🫠

👋 awesome but I have a question, wouldn't it be better to use icon={<Heart/>} instead? imo that'd be more flexible in terms of DX?

Edit: by that I mean it'd allow customization of icon easily