create: RatingStars Component

[TobiTRy]

Implement a Customizable Rating Stars Component

Objective: Create a versatile Rating Stars component, inspired by the visual design provided (see link). This component will be structured into three levels of complexity: Atom (RatingStar), Molecules, and Organisms, with specific functionalities and customization options detailed below.

Design Example:

Atom: RatingStar (Basic Component)

• Functionality: This component represents a single star, which will be the building block for the entire rating system.
• Size Variability: Must be available in three sizes - small (sm), medium (md), and large (lg). It's recommended to align these sizes with global standards (xxs, xs, s) for consistency.
• Customization:
  • The star should support partial filling, controlled by a floating-point number, to represent fractional ratings (e.g., filling from left to right or bottom to top).
  • Colors should be configurable, supporting all colors defined in the ThemeType (except transparent). Additionally, custom colors should be allowed, utilizing a getBackgroundColor function for implementation. Default color options are 'accent' or 'warning'; select based on preference.

Molecules: RatingStars Container (Intermediate Component)

• Prop Handling: This component should inherit and utilize props from the Atom level for flexible customization.
• Star Count Management: It must support a dynamic count of stars (e.g., 1 to 5 stars by default), with the ability to extend as per user preference.
• Rating Adjustment: Should accommodate floating-point values (e.g., 1.1, 2.3) to accurately reflect the rating by partially filling the stars accordingly. Additionally, provide options to adjust the granularity of the rating representation (e.g., handle all floating points, round to the nearest 0.5, or full stars).
• Interaction Handling: Incorporate functionality to identify and respond to specific star interactions, including touch gestures for mobile responsiveness (e.g., swiping to fill stars).

Organisms: RatingStars Component with State Management (Advanced Component)

• Prop Customization: Inherits properties from the Molecules level for further customization, ensuring a seamless integration.
• Default Configuration: The default setup should include 5 stars, but allow for adjustment as necessary.
• State Management: Efficiently tracks and updates the fill state of each star based on user interaction.
• Background Customization: Incorporates a customizable background (using a FancyBox component) that complements the rating stars. This background should be optional and configurable via props, supporting both ThemeType standards and custom colors (leveraging the getBackgroundColor function for implementation).