Merge pull request #5 from igorwessel/develop

v0.0.2

Author: igorwessel

lib/__tests__/dynamic-star.test.tsx

@@ -5,13 +5,13 @@ describe('Without pass props optional props', () => {
   test('should render five star', () => {
     const { container } = render(<DynamicStar rating={5} />)
 
-    expect(container.querySelectorAll('.star-container')).toHaveLength(5)
+    expect(container.querySelectorAll('.dynamic-star-container')).toHaveLength(5)
   })
 
   test('should render five star filled', () => {
     const { container } = render(<DynamicStar rating={5} />)
 
-    const stars = container.querySelectorAll('.star-svg')
+    const stars = container.querySelectorAll('.dynamic-star-svg')
 
     stars.forEach((star) => {
       expect(star).toHaveAttribute(
@@ -25,7 +25,7 @@ describe('Without pass props optional props', () => {
     const rating = 2.5
     const { container } = render(<DynamicStar rating={rating} />)
 
-    const stars = container.querySelectorAll('.star-svg')
+    const stars = container.querySelectorAll('.dynamic-star-svg')
 
     expect(stars[0]).toHaveAttribute(
       'style',
@@ -52,7 +52,7 @@ describe('Without pass props optional props', () => {
   test('when rerender with a new rating, should correcty update in screen stars filled', () => {
     const { container, rerender } = render(<DynamicStar rating={0} />)
 
-    const stars = container.querySelectorAll('.star-svg')
+    const stars = container.querySelectorAll('.dynamic-star-svg')
 
     stars.forEach((star) => {
       expect(star).toHaveAttribute(
@@ -97,7 +97,7 @@ describe('Passing optional props', () => {
       <DynamicStar rating={1} width={50} height={50} />,
     )
 
-    const stars = container.querySelectorAll('.star-svg')
+    const stars = container.querySelectorAll('.dynamic-star-svg')
 
     stars.forEach((star) => {
       expect(star).toHaveAttribute(
@@ -112,15 +112,15 @@ describe('Passing optional props', () => {
       <DynamicStar rating={6.5} totalStars={7} />,
     )
 
-    expect(container.querySelectorAll('.star-svg')).toHaveLength(7)
+    expect(container.querySelectorAll('.dynamic-star-svg')).toHaveLength(7)
   })
 
   test('should outlined a star when pass outlined', () => {
     const { container } = render(
       <DynamicStar rating={5} outlined />,
     )
 
-    const stars = container.querySelectorAll('.star-svg')
+    const stars = container.querySelectorAll('.dynamic-star-svg')
 
     stars.forEach((star) => {
       expect(star).toHaveAttribute('style', expect.not.stringMatching(/stroke: none/))
@@ -130,7 +130,7 @@ describe('Passing optional props', () => {
   test("should use outlined color, when pass outlined with a color (outlined='black')", () => {
     const { container } = render(<DynamicStar rating={5} outlined='black' />)
 
-    const stars = container.querySelectorAll('.star-svg')
+    const stars = container.querySelectorAll('.dynamic-star-svg')
 
     stars.forEach((star) => {
       expect(star).toHaveAttribute(
@@ -143,7 +143,7 @@ describe('Passing optional props', () => {
   test('should change outline width, when pass outlineWidth', () => {
     const { container } = render(<DynamicStar rating={5} outlined='black' outlineWidth={2} />)
 
-    const stars = container.querySelectorAll('.star-svg')
+    const stars = container.querySelectorAll('.dynamic-star-svg')
 
     stars.forEach((star) => {
       expect(star).toHaveAttribute(
@@ -156,14 +156,14 @@ describe('Passing optional props', () => {
   test('when rerender with new totalStars, need to render all stars (removing or adding)', () => {
     const { container, rerender } = render(<DynamicStar rating={6.5} totalStars={7} />)
 
-    expect(container.querySelectorAll('.star-svg')).toHaveLength(7)
+    expect(container.querySelectorAll('.dynamic-star-svg')).toHaveLength(7)
 
     rerender(<DynamicStar rating={3} totalStars={6} />)
 
-    expect(container.querySelectorAll('.star-svg')).toHaveLength(6)
+    expect(container.querySelectorAll('.dynamic-star-svg')).toHaveLength(6)
 
     rerender(<DynamicStar rating={3} totalStars={8} />)
 
-    expect(container.querySelectorAll('.star-svg')).toHaveLength(8)
+    expect(container.querySelectorAll('.dynamic-star-svg')).toHaveLength(8)
   })
 })

lib/main.tsx

@@ -1,7 +1,11 @@
 import * as React from 'react'
 import { useId } from '@/hooks/useId'
 import { IDynamicStarProps, IStar } from '@/types'
-import { createEmptyStar, emptyStar, createFullStar, createStarWithPercentageFilled } from '@/utils'
+import {
+  createEmptyStar,
+  emptyStar,
+} from '@/utils'
+import { reducer } from '@/reducer'
 import './style.css'
 
 function DynamicStar ({
@@ -16,8 +20,10 @@ function DynamicStar ({
   fullStarColor = '#FFBC00',
 }: IDynamicStarProps) {
   const id = useId('star')
-  const [stars, setStars] = React.useState<IStar[]>(
-    Array(totalStars).fill(createEmptyStar()),
+  const internalTotalStars = totalStars < 0 ? 0 : totalStars
+  const [stars, dispatch] = React.useReducer(
+    reducer,
+    Array(internalTotalStars).fill(createEmptyStar()),
   )
 
   const getFullFillColor = (starData: IStar) =>
@@ -64,51 +70,44 @@ function DynamicStar ({
    * Responsible to remove a star when star count changes.
    */
   React.useEffect(() => {
-    const removeStars = totalStars - stars.length
-
-    if (totalStars - stars.length < 0) {
-      setStars((prevState) => [...prevState.slice(0, removeStars)])
+    const removeStars = internalTotalStars - stars.length
+    if (removeStars < 0) {
+      dispatch({
+        type: 'REMOVE_STAR',
+        payload: removeStars,
+      })
     }
-  }, [totalStars, stars.length])
+  }, [internalTotalStars, stars.length])
 
   /**
    * Responsible to add a new star when star count changes.
    */
   React.useEffect(() => {
-    if (totalStars - stars.length > 0) {
-      setStars((prevState) => [
-        ...prevState,
-        ...Array(totalStars - prevState.length).fill(createEmptyStar()),
-      ])
+    const addStars = internalTotalStars - stars.length
+    if (addStars > 0) {
+      dispatch({
+        type: 'ADD_STAR',
+        payload: addStars,
+      })
     }
-  }, [totalStars, stars.length])
+  }, [internalTotalStars, stars.length])
 
   /**
    * Responsible to fill stars
    */
   React.useEffect(() => {
-    const fullStarsCounter = Math.floor(rating)
-
-    const surplus = Math.round((rating % 1) * 10) / 10
-    const roundedOneDecimalPoint = Math.round(surplus * 10) / 10
-
-    setStars((prevState) =>
-      prevState.map((_, index) =>
-        fullStarsCounter >= index + 1
-          ? createFullStar()
-          : rating === index + roundedOneDecimalPoint
-            ? createStarWithPercentageFilled(roundedOneDecimalPoint)
-            : createEmptyStar(),
-      ),
-    )
+    dispatch({
+      type: 'FILL_STAR',
+      payload: typeof rating === 'string' ? parseFloat(rating) : rating,
+    })
   }, [rating, stars.length])
 
   return (
-    <div className='star-rating' aria-label={`${rating} of 5`}>
+    <div className='dynamic-star-rating' aria-label={`${rating} of 5`}>
       {stars.map((star, index) => (
-        <div key={`${id}_${index}`} className='star-container'>
+        <div key={`${id}_${index}`} className='dynamic-star-container'>
           <svg
-            className='star-svg'
+            className='dynamic-star-svg'
             style={{
               fill: `url(#${id}_gradient${star.raw})`,
               stroke:

lib/reducer.tsx

@@ -0,0 +1,55 @@
+import { IStar } from '@/types'
+import {
+  createEmptyStar,
+  createFullStar,
+  createStarWithPercentageFilled,
+} from '@/utils'
+
+type Actions = 'REMOVE_STAR' | 'ADD_STAR' | 'FILL_STAR';
+
+type Action = {
+  type: Actions;
+  payload?: number;
+};
+
+type ReducerFunction = (state: IStar[], action: Action) => IStar[];
+
+const reducer: ReducerFunction = (state, action) => {
+  switch (action.type) {
+    case 'ADD_STAR': {
+      if (action.payload === undefined) {
+        return state
+      }
+
+      return [
+        ...state,
+        ...Array(action.payload).fill(createEmptyStar()),
+      ]
+    }
+    case 'FILL_STAR': {
+      if (action.payload === undefined) {
+        return state
+      }
+
+      const fullStarsCounter = Math.floor(action.payload)
+
+      const surplus = Math.round((action.payload % 1) * 10) / 10
+      const roundedOneDecimalPoint = Math.round(surplus * 10) / 10
+
+      return state.map((_, index) =>
+        fullStarsCounter >= index + 1
+          ? createFullStar()
+          : action.payload === index + roundedOneDecimalPoint
+            ? createStarWithPercentageFilled(roundedOneDecimalPoint)
+            : createEmptyStar(),
+      )
+    }
+    case 'REMOVE_STAR': {
+      return [...state.slice(0, action.payload)]
+    }
+    default:
+      return state
+  }
+}
+
+export { reducer }

lib/style.css

@@ -1,12 +1,12 @@
-.star-rating {
+.dynamic-star-rating {
   display: flex;
   align-items: center;
 }
 
-.star-container {
+.dynamic-star-container {
   display: flex;
 }
 
-.star-container:not(:last-child) {
+.dynamic-star-container:not(:last-child) {
   margin-right: 5px;
 }

lib/types/index.ts

@@ -1,5 +1,5 @@
  type IDynamicStarProps = {
-  rating: number;
+  rating: string | number;
   outlined?: string | boolean;
   outlineWidth?: number;
   sharpnessStar?: number;

package.json

@@ -75,6 +75,7 @@
     "typescript": "4.4.4",
     "vite": "2.6.4",
     "vite-plugin-dts": "0.9.2",
+    "vite-plugin-libcss": "1.0.5",
     "vite-plugin-linter": "1.0.1",
     "vite-tsconfig-paths": "3.3.17"
   }