fix: solve compatibility with IE11 & round-to (#33)

* Remove round-to package and add custom function.

* Add tests on roundTo function.

* Add some documentation on roundTo method.

* Update roundTo to add some typehint.

Co-Authored-By: Pierre Tondereau <ptondereau@users.noreply.github.com>

package.json

@@ -44,9 +44,7 @@
   "files": [
     "dist"
   ],
-  "dependencies": {
-    "round-to": "^4.0.0"
-  },
+  "dependencies": {},
   "devDependencies": {
     "@akameco/tsconfig": "^0.2.0",
     "@types/jest": "^24.0.12",

src/Circle/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import roundTo from 'round-to'
-import { getRange } from '../util'
+import { getRange, roundTo } from '../util'
 import { SpinkitProps, DEFAULT_SIZE, DEFAULT_COLOR } from '../types'
 import { Child, StyledCircle } from './styles'
 

src/CubeGrid/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import roundTo from 'round-to'
 import { SpinkitProps, DEFAULT_SIZE, DEFAULT_COLOR } from '../types'
 import { Child, StyledCubeGrid } from './styles'
+import { roundTo } from '../util'
 
 const CubeGrid: React.FC<SpinkitProps> = ({
   size = DEFAULT_SIZE,

src/FadingCircle/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import roundTo from 'round-to'
-import { getRange } from '../util'
+import { getRange, roundTo } from '../util'
 import { SpinkitProps, DEFAULT_SIZE, DEFAULT_COLOR } from '../types'
 import { Child, StyledForldingCircle } from './styles'
 

src/FoldingCube/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import roundTo from 'round-to'
 import { SpinkitProps, DEFAULT_SIZE, DEFAULT_COLOR } from '../types'
 import { Child, StyledFoldingCube } from './styles'
+import { roundTo } from '../util'
 
 const FoldingCube: React.FC<SpinkitProps> = ({
   size = DEFAULT_SIZE,

src/WanderingCubes/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import roundTo from 'round-to'
 import { SpinkitProps, DEFAULT_SIZE, DEFAULT_COLOR } from '../types'
 import { Child, StyledWanderingCubes } from './styles'
+import { roundTo } from '../util'
 
 const WanderingCubes: React.FC<SpinkitProps> = ({
   size = DEFAULT_SIZE,

src/WanderingCubes/styles.tsx

@@ -1,12 +1,12 @@
 import styled, { keyframes } from 'styled-components'
-import roundTo from 'round-to'
 import {
   propSize,
   propBgColor,
   propDelay,
   SizeProps,
   DelayProps,
   BgColorProps,
+  roundTo
 } from '../util'
 
 const createAnim = (cubeDistance: number = 42) => keyframes`

src/WaveLoading/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import roundTo from 'round-to'
-import { getRange } from '../util'
+import { getRange, roundTo } from '../util'
 import { SpinkitProps, DEFAULT_SIZE, DEFAULT_COLOR } from '../types'
 import { Rect, StyledWave } from './styles'
 

src/util/index.test.tsx

@@ -0,0 +1,6 @@
+import { roundTo } from '../util'
+
+test('roundTo util function ', () => {
+    expect(roundTo(4, 1)).toEqual(4);
+    expect(roundTo(1.1337, 3)).toEqual(1.134);
+})

src/util/index.tsx

@@ -1,5 +1,9 @@
 import { css } from 'styled-components'
 
+// This is an improvement of Math.round.
+// It gives you the ability to round after a decimal.
+export const roundTo = (n: number, precision: number): number => (Math.round((n * Math.pow(10, precision))) / Math.pow(10, precision))
+
 export const size = (width: string, height: string = width) => css`
   width: ${width};
   height: ${height};