# Course Rating Package TODO

## Phase 1 - Package Setup

- [x] Decide package name and npm scope.
- [x] Initialize package in `react-rating`.
- [x] Add TypeScript config.
- [x] Add build tool, preferably `tsup`.
- [x] Configure package exports:
  - [x] `./reactjs`
  - [x] `./reactnative`
  - [x] `./shared`
- [x] Add linting and formatting setup.
- [x] Add test runner.
- [x] Add basic README.

## Phase 2 - Shared Core

- [x] Define shared types:
  - [x] `CourseRatingData`
  - [x] `CourseRatingProps`
  - [x] `CourseRatingSubmitPayload`
  - [x] `CourseRatingLabels`
  - [x] `CourseRatingTheme`
  - [x] `CourseRatingAssets`
- [x] Create default theme.
- [x] Create default labels for `id`.
- [x] Create default labels for `en`.
- [x] Create default feedback options.
- [x] Implement feedback option normalization.
- [x] Ensure `Others` always exists.
- [x] Implement rating sentiment helper.
- [x] Implement validation helper.
- [x] Implement submit payload builder.
- [x] Add unit tests for shared helpers.

## Phase 3 - ReactJS Component

- [x] Create ReactJS entrypoint.
- [x] Implement modal visibility based on `data`.
- [x] Implement non-closeable modal by default.
- [x] Implement optional close button via `enableClose`.
- [x] Implement rating star selector.
- [x] Implement course title pill.
- [x] Implement feedback question switching:
  - [x] `rating >= 4`: impressive question.
  - [x] `rating < 4`: improvement question.
- [x] Implement feedback chips.
- [x] Implement required `Others` text input.
- [x] Implement disabled/enabled submit state.
- [x] Implement async submit loading state.
- [x] Implement submit error state.
- [x] Implement success screen.
- [x] Implement next-course flow.
- [x] Implement final auto-hide flow.
- [x] Call `onDone` after final item.
- [x] Call `onBackToHome` after final item when provided.
- [x] Add basic accessibility:
  - [x] Dialog semantics.
  - [x] Keyboard star rating.
  - [x] Focus trap.
  - [x] Accessible labels.
- [x] Add ReactJS tests.

## Phase 4 - React Native Component

- [ ] Create React Native entrypoint.
- [ ] Implement modal visibility based on `data`.
- [ ] Block close by default.
- [ ] Block Android hardware back while required modal is active.
- [ ] Implement optional close button via `enableClose`.
- [ ] Implement rating star selector.
- [ ] Implement course title pill.
- [ ] Implement feedback chips.
- [ ] Implement required `Others` text input.
- [ ] Implement disabled/enabled submit state.
- [ ] Implement async submit loading state.
- [ ] Implement submit error state.
- [ ] Implement success screen.
- [ ] Implement next-course flow.
- [ ] Implement final auto-hide flow.
- [ ] Call `onDone` after final item.
- [ ] Call `onBackToHome` after final item when provided.
- [ ] Add React Native accessibility labels and roles.
- [ ] Add React Native tests.

## Phase 5 - Styling and Assets

- [ ] Match mobile rating form with reference screenshots.
- [ ] Match desktop rating form with reference screenshots.
- [ ] Match mobile success screen with reference screenshots.
- [x] Prepare default background asset folder structure.
- [x] Support `primaryColor`.
- [x] Support `starColor`.
- [x] Support `inactiveStarColor`.
- [x] Support text and button colors.
- [x] Support `logoImage`.
- [x] Support `mascotImage`.
- [x] Support `ratingBackgroundImage`.
- [x] Support `ratingBackgroundImageMobile`.
- [x] Support `ratingBackgroundImageDesktop`.
- [x] Support `successBackgroundImage`.
- [x] Support `successBackgroundImageMobile`.
- [x] Support `successBackgroundImageDesktop`.
- [x] Implement background image priority fallback.
- [x] Implement default styled rating background.
- [x] Implement default styled success background.
- [x] Provide graceful fallback when images are not supplied.
- [ ] Verify responsive layout on small mobile.
- [ ] Verify responsive layout on desktop.

## Phase 6 - Examples

- [ ] Add ReactJS example app or demo page.
- [ ] Add React Native example app.
- [ ] Document minimal usage.
- [ ] Document custom theme usage.
- [ ] Document custom labels usage.
- [ ] Document custom feedback options usage.
- [ ] Document async submit behavior.
- [ ] Document multi-course list behavior.

## Phase 7 - Packaging and Release

- [x] Verify build output.
- [x] Verify type declarations.
- [x] Verify package exports.
- [ ] Verify peer dependencies.
- [ ] Add publishing guide.
- [ ] Add changelog.
- [x] Run full test suite.
- [ ] Prepare first alpha release.

## Future Enhancements

- [ ] Add analytics callbacks:
  - [ ] `onRatingStart`
  - [ ] `onRatingChange`
  - [ ] `onFeedbackChange`
  - [ ] `onSuccess`
- [ ] Add skip behavior when `enableClose=true`.
- [ ] Add custom success render prop.
- [ ] Add custom form render prop.
- [ ] Add per-rating feedback options.
- [ ] Add queue persistence.
- [ ] Add Storybook documentation.
