Fix FiveStarComponent

[nileshtrivedi]

I have implemented the first version of AJAX-powered FiveStarComponent.

Code is in: app/components/five_star_component.html.erb and a demo can be seen at /components.

<%= form_with(model: @review) do |form| %>
<div 
  x-data="{ val: <%= @review.overall_score.to_json %>, orig: <%= @review.overall_score.to_json %> }"
  class="flex ml-8 cursor-pointer text-orange-600" 
  @click="orig = val; $nextTick(() => { Rails.fire($el.parentElement,'submit') });"
>
  <input type="number" name="review[overall_score]" :value="orig" class="hidden"/>
  <span class="text-gray-400" @mouseenter="val = null" @mouseleave="val = orig">⨯</span>

  <template x-for="item in [1,2,3,4,5]">
    <span x-text="val >= item ? '★' : '☆'" @mouseenter="val = item" @mouseleave="val = orig"></span>
  </template>

</div>
<input type="hidden" name="review[item_id]" value="<%= @review.item_id %>" />
<% end %>

Listing down all remaining tasks for this here:

• Testing for all cases
• Test on browsers like IE11 (where AlpineJS requires polyfill)
• Test on touchscreen devices which may not support mouseenter or mouseleave events
• Fix styling