Course Rating Package

Required course rating modal and display components for ReactJS and React Native.

Entrypoints

import { 
  CourseRating, 
  CourseRatingSummary, 
  CourseRatingScore,
  StarRating 
} from "@imamasari1/course-rating/reactjs";

import { CourseRating as NativeCourseRating } from "@imamasari1/course-rating/reactnative";

Shared helpers and types:

import type { 
  CourseRatingSubmitPayload,
  CourseRatingSummaryData 
} from "@imamasari1/course-rating/shared";

Components

1. CourseRating (Modal)

The main modal for submitting course ratings.

<CourseRating
  data={needRatingData}
  onSubmitRating={async (payload) => {
    await api.submit(payload);
  }}
/>

2. CourseRatingSummary

Display component for rating distribution (perfect for Rating Tabs).

<CourseRatingSummary
  data={{
    averageRating: 4.8,
    totalRatings: 153,
    distribution: [
      { stars: 5, percentage: 78 },
      { stars: 4, percentage: 18 },
      { stars: 3, percentage: 3 },
      { stars: 2, percentage: 1 },
      { stars: 1, percentage: 1 },
    ]
  }}
/>

3. CourseRatingScore

Compact display for stars and numeric score (perfect for Course Lists/Cards).

<CourseRatingScore 
  score={4.8} 
  totalRatings={153} 
  size={18} 
/>

CSS Requirement

For ReactJS, ensure you import the styles:

import "@imamasari1/course-rating/reactjs.css";

See PRD.md for product behavior and TODO.md for implementation progress.