ui Feat: add new `Ratings` component and examples

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 value={1.5} />
<Ratings value={2} variant="destructive" Icon={Heart} />
<Ratings value={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
value	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.ReactElement	`<Star />`	Custom icon instead of Star.
variant	enum	"default"	One of "default", "destructive", "yellow".
asInput	boolean	false	If true, makes the rating component interactive.
onValueChange	(value: number) => void	undefined	Callback function when the rating value changes.

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