Rating component

src/packages/Rating/index.tsx

@@ -0,0 +1,81 @@
+import React, { ChangeEvent, useEffect, useState } from 'react'
+import { RatingContainer } from './style'
+
+export type RatingProps = {
+  name: string
+  value: number
+  onChange: (newValue: number) => void
+}
+
+const Rating = ({ name, value, onChange }: RatingProps) => {
+  const [selectedValue, setSelectedValue] = useState(value)
+  const onOptionChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const newValue = +event.target.value
+    onChange(newValue)
+    setSelectedValue(newValue)
+  }
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  useEffect(() => {}, [selectedValue])
+
+  return (
+    <RatingContainer>
+      <input
+        type="radio"
+        id="star5"
+        name={name}
+        value="5"
+        checked={selectedValue >= 5}
+        onChange={onOptionChange}
+      />
+      <label htmlFor="star5" title="5 stars">
+        5 stars
+      </label>
+      <input
+        type="radio"
+        id="star4"
+        name={name}
+        value="4"
+        checked={selectedValue === 4}
+        onChange={onOptionChange}
+      />
+      <label htmlFor="star4" title="4 stars">
+        4 stars
+      </label>
+      <input
+        type="radio"
+        id="star3"
+        name={name}
+        value="3"
+        checked={selectedValue === 3}
+        onChange={onOptionChange}
+      />
+      <label htmlFor="star3" title="3 stars">
+        3 stars
+      </label>
+      <input
+        type="radio"
+        id="star2"
+        name={name}
+        value="2"
+        checked={selectedValue === 2}
+        onChange={onOptionChange}
+      />
+      <label htmlFor="star2" title="2 stars">
+        2 stars
+      </label>
+      <input
+        type="radio"
+        id="star1"
+        name={name}
+        value="1"
+        checked={selectedValue === 1}
+        onChange={onOptionChange}
+      />
+      <label htmlFor="star1" title="1 star">
+        1 star
+      </label>
+    </RatingContainer>
+  )
+}
+
+export default Rating

src/packages/Rating/stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { StoryFn, Meta } from '@storybook/react'
+import Rating, { RatingProps } from '.'
+
+export default {
+  title: 'Rating',
+  component: Rating,
+  args: {
+    name: 'Rating',
+    value: 1,
+    onChange: (newValue: number) => console.log(newValue)
+  }
+} as Meta
+
+export const Default: StoryFn<RatingProps> = (args) => <Rating {...args} />

src/packages/Rating/style.ts

@@ -0,0 +1,35 @@
+import styled from 'styled-components'
+
+export const RatingContainer = styled.div`
+  float: left;
+
+  :not(:checked) > input {
+    display: none;
+  }
+
+  :not(:checked) > label {
+  float: right;
+  width: 1em;
+  overflow: hidden;
+  white-space: nowrap;
+  cursor: pointer;
+  font-size: 30px;
+  color: #ccc;
+  }
+  :not(:checked) > label:before {
+    content: '★';
+  }
+  > input:checked ~ label{
+  color: #ffc700;
+}
+  :not(:checked) > label:hover,
+  :not(:checked) > label:hover ~ label{
+    color: #ffc700;
+  }
+
+  . > input:checked + label:hover,
+  . > input:checked + label:hover ~ label{
+    color: #ffdc00;
+  }
+}
+`

src/packages/Rating/test.tsx

@@ -0,0 +1,25 @@
+import Rating from './index'
+import React from 'react'
+import { fireEvent, render } from '@testing-library/react'
+
+describe('Rating', () => {
+  const onChangeMock = jest.fn()
+  it('should render rating component', function () {
+    const { container } = render(
+      <Rating onChange={onChangeMock} name="rating" value={1} />
+    )
+    expect(container).toBeInTheDocument()
+  })
+
+  it('should invoke onChange function when a star is clicked', function () {
+    const { container } = render(
+      <Rating onChange={onChangeMock} name="rating" value={1} />
+    )
+    const twoStarButton = container.querySelector('#star2')
+
+    twoStarButton && fireEvent.click(twoStarButton)
+
+    expect(onChangeMock).toHaveBeenCalled()
+    expect(onChangeMock).toHaveBeenCalledWith(2)
+  })
+})