add emotion + bugfixes

Author: prasannamestha

build/index.css

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { CircleProgress } from '../src/index'
+import { CircleProgress } from '../src/index.js'
 
 export default class App extends React.Component {
   render () {

build/index.js

@@ -1,15 +1,17 @@
 {
   "name": "react-gradient-progress",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Simple and light gradient-enabled circular progressbar for reactjs/nextjs",
   "author": "Prasanna Mestha",
-  "main": "build/index.js",
+  "main": "src/index.js",
   "scripts": {
     "start": "parcel ./example/index.html",
-    "build": "rm -rf build && parcel build src/index.js -d build --no-source-maps"
+    "build": "rm -rf build && parcel build src/index.js -d build --no-source-maps --no-minify"
   },
   "repository": "https://github.com/prasannamestha/react-gradient-progress",
   "dependencies": {
+    "@emotion/react": "^11.1.4",
+    "@emotion/styled": "^11.0.0",
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
@@ -32,4 +34,4 @@
     "percentage",
     "indicator"
   ]
-}
+}

example/App.js

@@ -1,13 +1,30 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import styled from '@emotion/styled'
 
-import './circle.css'
+const CircleContainer = styled.div`
+  display: inline-block;
+  border-radius: 100%;
+  position: relative;`
 
-const CircleContainer = ({ children, style }) => <div className="react-super-progressbar__base" style={style}>{children}</div>
+const PercentageContainer = styled.div`
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  text-align: center,`
 
-const PercentageContainer = ({ children }) => <div className="react-super-progressbar__percentage-container">{children}</div>
-
-const StyledCircle = ({ children, ...props }) => <circle className="react-super-progressbar__styled-circle" {...props}>{children}</circle>
+const StyledCircle = styled.circle`
+  transform: rotate(-90deg);
+  transform-origin: 50% 50%;`
+// const CircleContainer = ({ children, style }) => <div className="react-super-progressbar__base" style={style}>{children}</div>
+// const PercentageContainer = ({ children }) => <div className="react-super-progressbar__percentage-container">{children}</div>
+// const StyledCircle = ({ children, ...props }) => <circle className="react-super-progressbar__styled-circle" {...props}>{children}</circle>
 
 const GradientCircleProgressbar = ({
   percentage,
@@ -31,13 +48,14 @@ const GradientCircleProgressbar = ({
 
   return (
     <CircleContainer
+      className="react-super-progressbar__base"
       style={{
         height: `${width}px`,
         width: `${width}px`,
       }}
     >
       {!hidePercentageText ?
-        <PercentageContainer>
+        <PercentageContainer className="react-super-progressbar__percentage-container">
           <span
             className="react-super-progressbars__percentage"
             style={{

package.json

@@ -1 +1 @@
-export { default as CircleProgress } from './GradientCircleProgressbar'
+export { default as CircleProgress } from './GradientCircleProgressbar.js'