From 25240825cec9ea2ca8e9145ed48ba0bfa17ff101 Mon Sep 17 00:00:00 2001
From: Keerthana Ramakrishnan <keerthana.r@thoughtworks.com>
Date: Wed, 18 Oct 2023 18:00:25 +0530
Subject: [PATCH 1/3] Add rating component

---
 src/packages/Rating/index.tsx   | 84 +++++++++++++++++++++++++++++++++
 src/packages/Rating/stories.tsx | 15 ++++++
 src/packages/Rating/style.ts    | 35 ++++++++++++++
 src/packages/Rating/test.tsx    | 25 ++++++++++
 4 files changed, 159 insertions(+)
 create mode 100644 src/packages/Rating/index.tsx
 create mode 100644 src/packages/Rating/stories.tsx
 create mode 100644 src/packages/Rating/style.ts
 create mode 100644 src/packages/Rating/test.tsx

diff --git a/src/packages/Rating/index.tsx b/src/packages/Rating/index.tsx
new file mode 100644
index 0000000..fa0157f
--- /dev/null
+++ b/src/packages/Rating/index.tsx
@@ -0,0 +1,84 @@
+import React, { ChangeEvent, useEffect, useRef, 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)
+    console.log(value, selectedValue)
+  }
+  useEffect(() => {
+    console.log('useEffect', selectedValue)
+  },[selectedValue])
+  console.log('rerender', 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
diff --git a/src/packages/Rating/stories.tsx b/src/packages/Rating/stories.tsx
new file mode 100644
index 0000000..549982d
--- /dev/null
+++ b/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} />
diff --git a/src/packages/Rating/style.ts b/src/packages/Rating/style.ts
new file mode 100644
index 0000000..92f441e
--- /dev/null
+++ b/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;
+  }
+}
+`
diff --git a/src/packages/Rating/test.tsx b/src/packages/Rating/test.tsx
new file mode 100644
index 0000000..1c1d519
--- /dev/null
+++ b/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)
+  })
+})

From 87a869d1d2c2b1aaddc9ec1d373f2ae476650b8b Mon Sep 17 00:00:00 2001
From: Keerthana Ramakrishnan <keerthana.r@thoughtworks.com>
Date: Wed, 18 Oct 2023 18:08:57 +0530
Subject: [PATCH 2/3] Remove unwanted log in rating component

---
 src/packages/Rating/index.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/packages/Rating/index.tsx b/src/packages/Rating/index.tsx
index fa0157f..e0327b5 100644
--- a/src/packages/Rating/index.tsx
+++ b/src/packages/Rating/index.tsx
@@ -13,12 +13,9 @@ const Rating = ({ name, value, onChange }: RatingProps) => {
     const newValue = +event.target.value
     onChange(newValue)
     setSelectedValue(newValue)
-    console.log(value, selectedValue)
   }
   useEffect(() => {
-    console.log('useEffect', selectedValue)
   },[selectedValue])
-  console.log('rerender', selectedValue)
 
   return (
     <RatingContainer>

From 03999441188119091c3ece6df677c399655de408 Mon Sep 17 00:00:00 2001
From: Keerthana Ramakrishnan <keerthana.r@thoughtworks.com>
Date: Wed, 18 Oct 2023 18:13:10 +0530
Subject: [PATCH 3/3] Fix lint issues in rating component

---
 src/packages/Rating/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/packages/Rating/index.tsx b/src/packages/Rating/index.tsx
index e0327b5..2872057 100644
--- a/src/packages/Rating/index.tsx
+++ b/src/packages/Rating/index.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useEffect, useRef, useState } from "react";
+import React, { ChangeEvent, useEffect, useState } from 'react'
 import { RatingContainer } from './style'
 
 export type RatingProps = {
@@ -14,8 +14,8 @@ const Rating = ({ name, value, onChange }: RatingProps) => {
     onChange(newValue)
     setSelectedValue(newValue)
   }
-  useEffect(() => {
-  },[selectedValue])
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  useEffect(() => {}, [selectedValue])
 
   return (
     <RatingContainer>