convert to typescript, use rollup to build, remove nwb

aholachek · Jan 2, 2019 · 23d60a6 · 23d60a6
1 parent f7ec387
commit 23d60a6
Show file tree

Hide file tree

Showing 97 changed files with 23,324 additions and 5,416 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,9 @@
+// just for tests + parcel demo
+{
+  "presets": [
+    "@babel/preset-typescript",
+    "@babel/preset-react",
+    "@babel/preset-env"
+  ],
+  "plugins": ["@babel/plugin-proposal-class-properties"]
+}
diff --git a/.eslintrc b/.eslintrc
diff --git a/.gitignore b/.gitignore
@@ -1,13 +1,16 @@
-/coverage
-/demo/dist
-/es
-/lib
-/node_modules
-/umd
+coverage
+demo/dist
+es
+lib
+node_modules
+umd
 npm-debug.log*
 yarn-error.log*
 TODO
 .cache
 dist
 stats.json
 .idea
+.DS_STORE
+.vscode
+.rpt2_cache/
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,4 @@
+{
+ "semi": false,
+ "singleQuote": true
+}
diff --git a/README.md b/README.md
@@ -417,7 +417,8 @@ That means any layout styles &mdash; padding, flexbox, etc&mdash;should be appli
 
 ## Library details
 - Requires React 16+
-- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11
+- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11.
+- For IE11 compatability, make sure you're polyfilling the `window.Promise` object.
 - Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of  [Rebound](https://github.com/facebook/rebound-js) for spring animations
 
 ## Troubleshooting

diff --git a/demo/src/CardsExample/Card.js b/demo/src/CardsExample/Card.js
@@ -1,33 +1,33 @@
-import React, { PureComponent } from "react"
-import { Flipped } from "../../../src"
-import anime from "animejs"
+import React, { PureComponent } from "react";
+import { Flipped } from "../../../src";
+import anime from "animejs";
 
 class Card extends PureComponent {
   hideElements = (el, prev, current) => {
-    if (prev !== this.props.i) return
-    const elements = [].slice.apply(el.querySelectorAll("*[data-fade-in]"))
-    elements.forEach(el => (el.style.opacity = "0"))
-    el.style.zIndex = 2
-  }
+    if (prev !== this.props.i) return;
+    const elements = [].slice.apply(el.querySelectorAll("*[data-fade-in]"));
+    elements.forEach(el => (el.style.opacity = "0"));
+    el.style.zIndex = 2;
+  };
   animateIn = (el, prev, current) => {
-    if (prev !== this.props.i) return
+    if (prev !== this.props.i) return;
     anime({
       targets: el.querySelectorAll("*[data-fade-in]"),
       translateY: [-30, 0],
       opacity: [0, 1],
       duration: 250,
       easing: "easeOutSine",
       delay: (d, i) => i * 75
-    })
-    el.style.zIndex = 1
-  }
+    });
+    el.style.zIndex = 1;
+  };
 
   shouldFlip = (prev, current) => {
-    if (prev === this.props.i) return true
-    return false
-  }
+    if (prev === this.props.i) return true;
+    return false;
+  };
   render() {
-    const { parentFlipId, d, i, setFocusedIndex } = this.props
+    const { parentFlipId, d, i, setFocusedIndex } = this.props;
     return (
       <li key={parentFlipId}>
         <Flipped
@@ -74,8 +74,8 @@ class Card extends PureComponent {
           </div>
         </Flipped>
       </li>
-    )
+    );
   }
 }
 
-export default Card
+export default Card;
diff --git a/demo/src/CardsExample/FocusedUser.js b/demo/src/CardsExample/FocusedUser.js
@@ -1,12 +1,12 @@
-import React, { Component } from "react"
-import { Flipped } from "../../../src"
-import anime from "animejs"
+import React, { Component } from "react";
+import { Flipped } from "../../../src";
+import anime from "animejs";
 
 class FocusedUser extends Component {
   hideElements = el => {
-    const elements = [].slice.apply(el.querySelectorAll("*[data-fade-in]"))
-    elements.forEach(el => (el.style.opacity = "0"))
-  }
+    const elements = [].slice.apply(el.querySelectorAll("*[data-fade-in]"));
+    elements.forEach(el => (el.style.opacity = "0"));
+  };
   animateIn = el => {
     anime({
       targets: el.querySelectorAll("*[data-fade-in]"),
@@ -15,14 +15,14 @@ class FocusedUser extends Component {
       duration: 250,
       easing: "easeOutSine",
       delay: (d, i) => i * 75
-    })
-  }
+    });
+  };
 
   render() {
-    const { data, index, close } = this.props
-    const parentFlipId = `card-${index}`
+    const { data, index, close } = this.props;
+    const parentFlipId = `card-${index}`;
 
-    if (typeof index !== "number") return null
+    if (typeof index !== "number") return null;
 
     return (
       <div className="focusedItemBackground" key={parentFlipId}>
@@ -75,8 +75,8 @@ class FocusedUser extends Component {
           </div>
         </Flipped>
       </div>
-    )
+    );
   }
 }
 
-export default FocusedUser
+export default FocusedUser;
diff --git a/demo/src/CardsExample/UserGrid.js b/demo/src/CardsExample/UserGrid.js
@@ -1,44 +1,44 @@
-import React, { Component } from "react"
-import Card from "./Card"
-import anime from "animejs"
+import React, { Component } from "react";
+import Card from "./Card";
+import anime from "animejs";
 
 class UserGrid extends Component {
   hideElements = (el, startId) => {
-    if (startId !== "focusedUser") return
-    const elements = [].slice.apply(el.querySelectorAll("*[data-fade-in]"))
-    elements.forEach(el => (el.style.opacity = "0"))
-    el.style.zIndex = 2
-  }
+    if (startId !== "focusedUser") return;
+    const elements = [].slice.apply(el.querySelectorAll("*[data-fade-in]"));
+    elements.forEach(el => (el.style.opacity = "0"));
+    el.style.zIndex = 2;
+  };
   animateIn = (el, startId) => {
-    if (startId !== "focusedUser") return
+    if (startId !== "focusedUser") return;
     anime({
       targets: el.querySelectorAll("*[data-fade-in]"),
       translateY: [-30, 0],
       opacity: [0, 1],
       duration: 250,
       easing: "easeOutSine",
       delay: (d, i) => i * 75
-    })
-    el.style.zIndex = 1
-  }
+    });
+    el.style.zIndex = 1;
+  };
   render() {
     return (
       <ul className="cardGrid">
         {this.props.data.map((d, i) => {
-          const parentFlipId = `card-${i}`
-          if (i === this.props.focusedIndex) return null
+          const parentFlipId = `card-${i}`;
+          if (i === this.props.focusedIndex) return null;
           return (
             <Card
               parentFlipId={parentFlipId}
               d={d}
               i={i}
               setFocusedIndex={this.props.setFocusedIndex}
             />
-          )
+          );
         })}
       </ul>
-    )
+    );
   }
 }
 
-export default UserGrid
+export default UserGrid;
diff --git a/demo/src/CardsExample/index.js b/demo/src/CardsExample/index.js
@@ -1,14 +1,14 @@
-import React, { Component } from "react"
-import { Flipper } from "../../../src"
-import userData from "./userData.json"
-import UserGrid from "./UserGrid"
-import FocusedUser from "./FocusedUser"
-import "./styles.css"
+import React, { Component } from 'react'
+import { Flipper } from '../../../src'
+import userData from './userData.json'
+import UserGrid from './UserGrid'
+import FocusedUser from './FocusedUser'
+import './styles.css'
 
 export default class CardsExample extends Component {
   state = {
     focusedIndex: undefined,
-    speed: "normal",
+    speed: 'normal',
     userData: userData
   }
   setFocusedIndex = index => {
@@ -22,7 +22,7 @@ export default class CardsExample extends Component {
       <Flipper
         className="cardsExample"
         flipKey={this.state.focusedIndex}
-        spring={this.state.speed !== "normal" && { stiffness: 5, damping: 4 }}
+        spring={this.state.speed !== 'normal' && { stiffness: 5, damping: 4 }}
         decisionData={this.state.focusedIndex}
       >
         <div className="header" ref={el => (this.el = el)}>
@@ -49,10 +49,10 @@ export default class CardsExample extends Component {
               <input
                 type="radio"
                 name="speed"
-                checked={this.state.speed === "normal"}
+                checked={this.state.speed === 'normal'}
                 onClick={() =>
                   this.setState({
-                    speed: "normal"
+                    speed: 'normal'
                   })
                 }
               />
@@ -62,10 +62,10 @@ export default class CardsExample extends Component {
               <input
                 type="radio"
                 name="speed"
-                checked={this.state.speed === "slow"}
+                checked={this.state.speed === 'slow'}
                 onClick={() =>
                   this.setState({
-                    speed: "slow"
+                    speed: 'slow'
                   })
                 }
               />
@@ -84,7 +84,7 @@ export default class CardsExample extends Component {
             this.setState({ focusedIndex: null })
           }}
           data={
-            typeof this.state.focusedIndex === "number"
+            typeof this.state.focusedIndex === 'number'
               ? userData[this.state.focusedIndex]
               : null
           }

diff --git a/demo/src/FlipMove/Card.js b/demo/src/FlipMove/Card.js
@@ -1,6 +1,6 @@
-import React, { PureComponent } from "react"
-import { Flipped } from "../../../src"
-import anime from "animejs"
+import React, { PureComponent } from "react";
+import { Flipped } from "../../../src";
+import anime from "animejs";
 
 const onElementAppear = (el, index) => {
   anime({
@@ -9,8 +9,8 @@ const onElementAppear = (el, index) => {
     duration: 400,
     delay: index * 50,
     easing: "easeOutSine"
-  })
-}
+  });
+};
 
 const onExit = type => (el, index, removeElement) => {
   anime({
@@ -20,27 +20,27 @@ const onExit = type => (el, index, removeElement) => {
     duration: 200,
     complete: removeElement,
     easing: "easeOutSine"
-  }).pause
+  }).pause;
 
   return () => {
-    el.style.opacity = ""
-    removeElement()
-  }
-}
+    el.style.opacity = "";
+    removeElement();
+  };
+};
 
-const onGridExit = onExit("grid")
-const onListExit = onExit("list")
+const onGridExit = onExit("grid");
+const onListExit = onExit("list");
 
 class Card extends PureComponent {
   shouldFlip = (prev, current) => {
     if (prev.type !== current.type) {
-      return true
+      return true;
     }
-    return false
-  }
+    return false;
+  };
   render() {
-    const { id, title, type, stagger, addToFilteredIds } = this.props
-    const flipId = `item-${id}`
+    const { id, title, type, stagger, addToFilteredIds } = this.props;
+    const flipId = `item-${id}`;
     return (
       <Flipped
         flipId={flipId}
@@ -59,8 +59,12 @@ class Card extends PureComponent {
                 shouldFlip={this.shouldFlip}
               >
                 <div>
-                  <h3>{title}</h3>
-                  <p>{title}</p>
+                  <h3>
+                    {title}
+                  </h3>
+                  <p>
+                    {title}
+                  </p>
                 </div>
               </Flipped>
 
@@ -76,8 +80,8 @@ class Card extends PureComponent {
           </Flipped>
         </li>
       </Flipped>
-    )
+    );
   }
 }
 
-export default Card
+export default Card;