Initial commit

.babelrc

@@ -0,0 +1,43 @@
+{
+  "ignore": ["node_modules/**"],
+  "env": {
+    "test": {
+      "presets": [
+        [
+          "env",
+          {
+            "targets": {
+              "node": "current"
+            }
+          }
+        ],
+        "react",
+        "stage-1"
+      ],
+      "plugins": [
+        "transform-object-rest-spread",
+        "transform-react-remove-prop-types"
+      ]
+    },
+    "development": {
+      "presets": [
+        [
+          "env",
+          {
+            "targets": {
+              "browsers": ["last 5 versions", "safari >= 7"]
+            },
+            "modules": false
+          }
+        ],
+        "react",
+        "stage-1"
+      ],
+      "plugins": [
+        "transform-object-rest-spread",
+        "external-helpers",
+        "transform-react-remove-prop-types"
+      ]
+    }
+  }
+}

.editorconfig

@@ -0,0 +1,18 @@
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+charset = utf-8
+
+[node_modules/**]
+end_of_line = unset
+insert_final_newline = unset
+indent_style = unset
+indent_size = unset
+trim_trailing_whitespace = unset

.gitignore

@@ -0,0 +1,6 @@
+.DS_Store
+node_modules
+package-lock.json
+.rpt2_cache
+*.log
+dist

LICENSE

@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) Bond Akinmade
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

jsConfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "jsx": "react",
+    "checkJs": true,
+    "lib": ["es2017", "dom"]
+  },
+  "include": ["src/**/*.js"]
+}

package.json

@@ -0,0 +1,50 @@
+{
+  "name": "react-epic-spinners",
+  "version": "0.1.0",
+  "main": "dist/react-epic-spinners.cjs.js",
+  "module": "dist/react-epic-spinners.esm.js",
+  "browser": "dist/react-epic-spinners.umd.js",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:bondz/react-epic-spinners.git"
+  },
+  "author": "Akinmade Bond <bond@max.ng>",
+  "typings": "./typings/index.d.ts",
+  "license": "MIT",
+  "keywords": ["react", "epic spinners"],
+  "sideEffects": false,
+  "dependencies": {
+    "react": ">=0.14.x",
+    "styled-components": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/react": "^16.0.34",
+    "babel-core": "^6.26.0",
+    "babel-plugin-external-helpers": "^6.22.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.12",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-1": "^6.24.1",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "jest": "^21.2.1",
+    "prop-types": "^15.6.0",
+    "raf": "^3.4.0",
+    "react-dom": "^16.0.0",
+    "rollup": "^0.54.1",
+    "rollup-plugin-babel": "^3.0.3",
+    "rollup-plugin-commonjs": "8.2.3",
+    "rollup-plugin-node-resolve": "^3.0.2"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "test": "jest",
+    "prepublish": "yarn build"
+  },
+  "files": ["dist"],
+  "jest": {
+    "setupFiles": ["raf/polyfill"]
+  }
+}

rollup.config.js

@@ -0,0 +1,43 @@
+import resolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+import babel from 'rollup-plugin-babel';
+import pkg from './package.json';
+
+export default [
+  // browser-friendly UMD build
+  {
+    input: 'src/index.js',
+    output: {
+      file: pkg.browser,
+      format: 'umd',
+      name: 'ReactEpicSpinners',
+    },
+    plugins: [
+      resolve(),
+      commonjs(),
+      babel({
+        exclude: ['node_modules/**'],
+      }),
+    ],
+    external: ['react', 'prop-types', 'styled-components'],
+  },
+
+  // CommonJS (for Node) and ES module (for bundlers) build.
+  // (We could have three entries in the configuration array
+  // instead of two, but it's quicker to generate multiple
+  // builds from a single configuration where possible, using
+  // the `targets` option which can specify `dest` and `format`)
+  {
+    input: 'src/index.js',
+    output: [
+      { file: pkg.main, format: 'cjs' },
+      { file: pkg.module, format: 'es' },
+    ],
+    plugins: [
+      babel({
+        exclude: ['node_modules/**'],
+      }),
+    ],
+    external: ['react', 'prop-types', 'styled-components'],
+  },
+];

src/components/AtomSpinner.js

@@ -0,0 +1,124 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+const Atom = styled.div`
+  height: ${props => props.size}px;
+  width: ${props => props.size}px;
+  overflow: hidden;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .spinner-inner {
+    position: relative;
+    display: block;
+    height: 100%;
+    width: 100%;
+  }
+
+  .spinner-circle {
+    display: block;
+    position: absolute;
+    color: ${props => props.color};
+    font-size: calc(${props => props.size}px * 0.24);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .spinner-line {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    animation-duration: ${props => props.animationDuration}ms;
+    border-left-width: calc(${props => props.size}px / 25);
+    border-top-width: calc(${props => props.size}px / 25);
+    border-left-color: ${props => props.color};
+    border-left-style: solid;
+    border-top-style: solid;
+    border-top-color: transparent;
+  }
+
+  .spinner-line:nth-child(1) {
+    animation: atom-spinner-animation-1 ${props => props.animationDuration}ms
+      linear infinite;
+    transform: rotateZ(120deg) rotateX(66deg) rotateZ(0deg);
+  }
+
+  .spinner-line:nth-child(2) {
+    animation: atom-spinner-animation-2 ${props => props.animationDuration}ms
+      linear infinite;
+    transform: rotateZ(240deg) rotateX(66deg) rotateZ(0deg);
+  }
+
+  .spinner-line:nth-child(3) {
+    animation: atom-spinner-animation-3 ${props => props.animationDuration}ms
+      linear infinite;
+    transform: rotateZ(360deg) rotateX(66deg) rotateZ(0deg);
+  }
+
+  @keyframes atom-spinner-animation-1 {
+    100% {
+      transform: rotateZ(120deg) rotateX(66deg) rotateZ(360deg);
+    }
+  }
+  @keyframes atom-spinner-animation-2 {
+    100% {
+      transform: rotateZ(240deg) rotateX(66deg) rotateZ(360deg);
+    }
+  }
+  @keyframes atom-spinner-animation-3 {
+    100% {
+      transform: rotateZ(360deg) rotateX(66deg) rotateZ(360deg);
+    }
+  }
+`;
+
+const propTypes = {
+  size: PropTypes.number,
+  animationDuration: PropTypes.number,
+  color: PropTypes.string,
+  className: PropTypes.string,
+  style: PropTypes.object,
+};
+
+const defaultProps = {
+  size: 60,
+  color: 'red',
+  animationDuration: 1000,
+  className: '',
+};
+
+export const AtomSpinner = ({
+  size,
+  animationDuration,
+  color,
+  className,
+  style,
+  ...props
+}) => (
+  <Atom
+    size={size}
+    color={color}
+    animationDuration={animationDuration}
+    className={`atom-spinner${className ? ' ' + className : ''}`}
+    style={style}
+    {...props}
+  >
+    <div className="spinner-inner">
+      <div className="spinner-line" />
+      <div className="spinner-line" />
+      <div className="spinner-line" />
+      {/* Chrome renders little circles malformed */}
+      <div className="spinner-circle">&#9679;</div>
+    </div>
+  </Atom>
+);
+
+AtomSpinner.propTypes = propTypes;
+AtomSpinner.defaultProps = defaultProps;
+
+export default AtomSpinner;