Add bit

README.md

@@ -11,7 +11,9 @@ A collection of loading spinners built with [styled-components](https://styled-c
 
 ## Live Demo
 
--   To check out live examples visit https://dmitrymorozoff.github.io/react-spinners-kit/
+ To check out live examples visit                       https://dmitrymorozoff.github.io/react-spinners-kit/
+
+https://bitsrc.io/dmitrymorozoff/react-spinners-kit -  Disocver, play and install spinners. 
 
 ## Installation
 
@@ -23,6 +25,7 @@ or if you prefer yarn
 
 ### `yarn add react-spinners-kit`
 
+
 ## Usage
 
 ```jsx

bit.json

@@ -0,0 +1,8 @@
+{
+    "env": {
+        "compiler": "bit.envs/compilers/[email protected]"
+    },
+    "dependencies": {},
+    "componentsDefaultDirectory": "components/{name}",
+    "packageManager": "npm"
+}

package.json

@@ -70,17 +70,17 @@
         "path": "^0.12.7",
         "prettier": "^1.14.2",
         "react-addons-test-utils": "^15.6.2",
+        "react-syntax-highlighter": "^9.0.0",
         "rimraf": "^2.6.2",
         "webpack": "^4.19.0",
         "webpack-cli": "^3.1.0",
-        "webpack-node-externals": "^1.7.2",
-        "react-syntax-highlighter": "^9.0.0"
+        "webpack-node-externals": "^1.7.2"
     },
     "dependencies": {
         "polished": "^1.9.3",
         "prop-types": "^15.6.2",
-        "react": "^16.5.2",
-        "react-dom": "^16.5.1"
+        "react": ">= 16.3.0",
+        "react-dom": ">= 16.3.0"
     },
     "peerDependencies": {
         "styled-components": "^2.x"

src/components/ball/index.js

@@ -21,7 +21,8 @@ const motion = props => keyframes`
     }
 `;
 
-export const BallSpinner = ({ size, color, loading, sizeUnit }) => {
+
+const BallSpinner = ({ size, color, loading, sizeUnit }) => {
     return (
         loading && (
             <Wrapper size={size}>
@@ -61,3 +62,5 @@ BallSpinner.propTypes = {
     color: PropTypes.string,
     sizeUnit: PropTypes.string,
 };
+
+export default BallSpinner;

src/components/bars/index.js

@@ -31,7 +31,7 @@ const getBars = (countBars, color, size, sizeUnit) => {
     return bars;
 };
 
-export const BarsSpinner = ({ size, color, loading, sizeUnit }) => {
+const BarsSpinner = ({ size, color, loading, sizeUnit }) => {
     const countBars = 5;
     return (
         loading && (
@@ -75,3 +75,5 @@ BarsSpinner.propTypes = {
     color: PropTypes.string,
     sizeUnit: PropTypes.string,
 };
+
+export default BarsSpinner;

src/components/circle/index.js

@@ -11,7 +11,7 @@ const rotate = keyframes`
     }
 `;
 
-export const CircleSpinner = ({ size, color, loading, sizeUnit }) => {
+const CircleSpinner = ({ size, color, loading, sizeUnit }) => {
     return loading && <Wrapper size={size} color={color} sizeUnit={sizeUnit} />;
 };
 
@@ -41,3 +41,5 @@ CircleSpinner.propTypes = {
     color: PropTypes.string,
     sizeUnit: PropTypes.string,
 };
+
+export default CircleSpinner;

src/components/clap/index.js

@@ -67,7 +67,7 @@ const getBalls = ({
     return balls;
 };
 
-export const ClapSpinner = ({
+const ClapSpinner = ({
     size,
     frontColor,
     backColor,
@@ -136,3 +136,5 @@ ClapSpinner.propTypes = {
     backColor: PropTypes.string,
     sizeUnit: PropTypes.string,
 };
+
+export default ClapSpinner;

src/components/classic/index.js

@@ -39,7 +39,7 @@ const getBars = ({
     return bars;
 };
 
-export const ClassicSpinner = ({ size, color, loading, sizeUnit }) => {
+const ClassicSpinner = ({ size, color, loading, sizeUnit }) => {
     const radius = size / 2;
     const countBars = 16;
     return (
@@ -91,3 +91,5 @@ ClassicSpinner.propTypes = {
     color: PropTypes.string,
     sizeUnit: PropTypes.string,
 };
+
+export default ClassicSpinner;

src/components/comb/index.js

@@ -24,7 +24,7 @@ const getBars = ({ countBars, color, size, sizeUnit }) => {
     return bars;
 };
 
-export const CombSpinner = ({ size, color, loading, sizeUnit }) => {
+const CombSpinner = ({ size, color, loading, sizeUnit }) => {
     const countBars = size / 9;
     return (
         loading && (
@@ -72,3 +72,5 @@ CombSpinner.propTypes = {
     color: PropTypes.string,
     sizeUnit: PropTypes.string,
 };
+
+export default CombSpinner;

src/components/cube/index.js

@@ -7,7 +7,7 @@ const rotate = keyframes`
     to   { transform: rotateX(360deg) rotateY(360deg); }
 `;
 
-export const CubeSpinner = ({
+const CubeSpinner = ({
     size,
     backColor,
     frontColor,
@@ -138,3 +138,5 @@ CubeSpinner.propTypes = {
     backColor: PropTypes.string,
     sizeUnit: PropTypes.string,
 };
+
+export default CubeSpinner;

src/components/domino/index.js

@@ -92,7 +92,7 @@ const getBars = ({
     return bars;
 };
 
-export const DominoSpinner = ({ size, color, loading, sizeUnit }) => {
+const DominoSpinner = ({ size, color, loading, sizeUnit }) => {
     const countBars = 7;
     const rotatesPoints = [0, 0, 0, 10, 40, 60, 70];
     const translatesPoints = getTranslatePositions(countBars, size);
@@ -149,3 +149,5 @@ DominoSpinner.propTypes = {
     color: PropTypes.string,
     sizeUnit: PropTypes.string,
 };
+
+export default DominoSpinner;

src/components/fill/index.js

@@ -38,7 +38,7 @@ const fill = keyframes`
     }
 `;
 
-export const FillSpinner = ({ size, color, loading, sizeUnit }) => {
+const FillSpinner = ({ size, color, loading, sizeUnit }) => {
     return (
         loading && (
             <Wrapper size={size} color={color} sizeUnit={sizeUnit}>
@@ -78,3 +78,5 @@ FillSpinner.propTypes = {
     color: PropTypes.string,
     sizeUnit: PropTypes.string,
 };
+
+export default FillSpinner;

src/components/firework/index.js

@@ -16,7 +16,7 @@ const fire = keyframes`
     }
 `;
 
-export const FireworkSpinner = ({ size, color, loading, sizeUnit }) => {
+const FireworkSpinner = ({ size, color, loading, sizeUnit }) => {
     return loading && <Wrapper size={size} color={color} sizeUnit={sizeUnit} />;
 };
 
@@ -45,3 +45,5 @@ FireworkSpinner.propTypes = {
     color: PropTypes.string,
     sizeUnit: PropTypes.string,
 };
+
+export default FireworkSpinner;

src/components/flag/index.js

@@ -51,7 +51,7 @@ const getPlanes = ({ countPlaneInLine, color, size, sizeUnit }) => {
     return lines;
 };
 
-export const FlagSpinner = ({ size, color, loading, sizeUnit }) => {
+const FlagSpinner = ({ size, color, loading, sizeUnit }) => {
     const countPlaneInLine = 4;
     return (
         loading && (
@@ -101,3 +101,5 @@ FlagSpinner.propTypes = {
     color: PropTypes.string,
     sizeUnit: PropTypes.string,
 };
+
+export default FlagSpinner;

src/components/flapper/index.js

@@ -40,7 +40,7 @@ const getBalls = ({
     return balls;
 };
 
-export const FlapperSpinner = ({ size, color, loading, sizeUnit }) => {
+const FlapperSpinner = ({ size, color, loading, sizeUnit }) => {
     const radius = size / 2;
     const countBalls = 7;
     const ballSize = size / 1.5;
@@ -98,3 +98,5 @@ FlapperSpinner.propTypes = {
     color: PropTypes.string,
     sizeUnit: PropTypes.string,
 };
+
+export default FlapperSpinner;

src/components/goo/index.js

@@ -44,7 +44,7 @@ const getBalls = ({ countBalls, color, size, sizeUnit }) => {
     return balls;
 };
 
-export const GooSpinner = ({ size, color, loading, sizeUnit }) => {
+const GooSpinner = ({ size, color, loading, sizeUnit }) => {
     const countBalls = 2;
     return (
         loading && (
@@ -112,3 +112,6 @@ GooSpinner.propTypes = {
     color: PropTypes.string,
     sizeUnit: PropTypes.string,
 };
+
+
+export default GooSpinner;

src/components/grid/index.js

@@ -40,7 +40,7 @@ const getBalls = ({ countBallsInLine, color, size, sizeUnit }) => {
     return balls;
 };
 
-export const GridSpinner = ({ size, color, loading, sizeUnit }) => {
+const GridSpinner = ({ size, color, loading, sizeUnit }) => {
     const countBallsInLine = 3;
     return (
         loading && (
@@ -84,3 +84,5 @@ GridSpinner.propTypes = {
     color: PropTypes.string,
     sizeUnit: PropTypes.string,
 };
+
+export default GridSpinner;

src/components/guard/index.js

@@ -55,7 +55,7 @@ const getCubes = ({
     return cubes;
 };
 
-export const GuardSpinner = ({
+const GuardSpinner = ({
     size,
     backColor,
     frontColor,
@@ -130,3 +130,5 @@ GuardSpinner.propTypes = {
     backColor: PropTypes.string,
     sizeUnit: PropTypes.string,
 };
+
+export default GuardSpinner;

src/components/heart/index.js

@@ -23,7 +23,7 @@ const resize = keyframes`
     }
 `;
 
-export const HeartSpinner = ({ size, color, loading, sizeUnit }) => {
+const HeartSpinner = ({ size, color, loading, sizeUnit }) => {
     return loading && <Wrapper size={size} color={color} sizeUnit={sizeUnit} />;
 };
 
@@ -66,3 +66,5 @@ HeartSpinner.propTypes = {
     color: PropTypes.string,
     sizeUnit: PropTypes.string,
 };
+
+export default HeartSpinner;

src/components/hoop/index.js

@@ -38,7 +38,7 @@ const getBalls = ({ countBallsInLine, color, size, sizeUnit }) => {
     return balls;
 };
 
-export const HoopSpinner = ({ size, color, loading, sizeUnit }) => {
+const HoopSpinner = ({ size, color, loading, sizeUnit }) => {
     const countBallsInLine = 6;
     return (
         loading && (
@@ -88,3 +88,5 @@ HoopSpinner.propTypes = {
     color: PropTypes.string,
     sizeUnit: PropTypes.string,
 };
+
+export default HoopSpinner;

src/components/impulse/index.js

@@ -43,7 +43,7 @@ const getBalls = ({ countBalls, frontColor, backColor, size, sizeUnit }) => {
     return balls;
 };
 
-export const ImpulseSpinner = ({
+const ImpulseSpinner = ({
     size,
     frontColor,
     backColor,
@@ -102,3 +102,5 @@ ImpulseSpinner.propTypes = {
     backColor: PropTypes.string,
     sizeUnit: PropTypes.string,
 };
+
+export default ImpulseSpinner;

src/components/jellyfish/index.js

@@ -33,7 +33,7 @@ const getRings = ({ countBalls: countRings, color, size, sizeUnit }) => {
     return rings;
 };
 
-export const JellyfishSpinner = ({ size, color, loading, sizeUnit }) => {
+const JellyfishSpinner = ({ size, color, loading, sizeUnit }) => {
     const countRings = 6;
     return (
         loading && (
@@ -81,3 +81,5 @@ JellyfishSpinner.propTypes = {
     color: PropTypes.string,
     sizeUnit: PropTypes.string,
 };
+
+export default JellyfishSpinner;

src/components/magic/index.js

@@ -25,7 +25,7 @@ const getBalls = ({ countBalls, color, size, sizeUnit }) => {
     return balls;
 };
 
-export const MagicSpinner = ({ size, color, loading, sizeUnit }) => {
+const MagicSpinner = ({ size, color, loading, sizeUnit }) => {
     const countBalls = size / 12;
     return (
         loading && (
@@ -82,3 +82,5 @@ MagicSpinner.propTypes = {
     color: PropTypes.string,
     sizeUnit: PropTypes.string,
 };
+
+export default MagicSpinner;

src/components/pong/index.js

@@ -37,7 +37,7 @@ const motionBall = props => keyframes`
     }
 `;
 
-export const PongSpinner = ({ size, color, loading, sizeUnit }) => {
+const PongSpinner = ({ size, color, loading, sizeUnit }) => {
     return (
         loading && (
             <Wrapper size={size} sizeUnit={sizeUnit}>
@@ -98,3 +98,5 @@ PongSpinner.propTypes = {
     color: PropTypes.string,
     sizeUnit: PropTypes.string,
 };
+
+export default PongSpinner;

src/components/pulse/index.js

@@ -34,7 +34,7 @@ const getCubes = ({ countCubeInLine, color, size, sizeUnit }) => {
     return cubes;
 };
 
-export const PulseSpinner = ({ size, color, loading, sizeUnit }) => {
+const PulseSpinner = ({ size, color, loading, sizeUnit }) => {
     const countCubeInLine = 3;
     return (
         loading && (
@@ -78,3 +78,5 @@ PulseSpinner.propTypes = {
     color: PropTypes.string,
     sizeUnit: PropTypes.string,
 };
+
+export default PulseSpinner;

src/components/push/index.js

@@ -32,7 +32,7 @@ const getBars = ({ countBars, color, size, sizeUnit }) => {
     return bars;
 };
 
-export const PushSpinner = ({ size, color, loading, sizeUnit }) => {
+const PushSpinner = ({ size, color, loading, sizeUnit }) => {
     const countBars = 10;
     return (
         loading && (
@@ -78,3 +78,5 @@ PushSpinner.propTypes = {
     color: PropTypes.string,
     sizeUnit: PropTypes.string,
 };
+
+export default PushSpinner;