Rewrite slide display and transition logic.

.eslintrc

@@ -1,11 +1,8 @@
 {
   "root": true,
   "parser": "babel-eslint",
-  "extends": [
-    "formidable/configurations/es6-react",
-    "prettier",
-    "prettier/react"
-  ],
+  "extends": ["prettier", "prettier/react", "plugin:react/recommended"],
+  "plugins": ["react-hooks"],
   "env": {
     "browser": true,
     "commonjs": true,
@@ -25,6 +22,11 @@
       "experimentalObjectRestSpread": true
     }
   },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
   "rules": {
     "quotes": [
       "error",
@@ -33,6 +35,8 @@
         "allowTemplateLiterals": true
       }
     ],
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
     "comma-dangle": "off",
     "indent": "off",
     "space-before-function-paren": "off",
@@ -65,4 +69,4 @@
       }
     ]
   }
-}
+}

CONTRIBUTING.md

@@ -1,3 +1,5 @@
+# Contributing
+
 Thanks for contributing!
 
 ## Development
@@ -20,7 +22,7 @@ yarn
 
 @TODO
 
-### Before submitting a PR...
+### Before submitting a PR
 
 Thanks for taking the time to help us make Spectacle even better! Before you go ahead and submit a PR, make sure that you have done the following:
 

examples/JS/TestJS.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import Deck from '../../src/components/Deck.js';
+import Slide from '../../src/components/Slide.js';
+import SlideElementWrapper from '../../src/components/SlideElementWrapper';
+
+const TestJs = () => (
+  <Deck loop={true}>
+    <Slide>
+      <div>Hi</div>
+      <b>b</b>
+    </Slide>
+    <Slide>
+      <p> Slide 3! </p>
+      <SlideElementWrapper elementNum={0}>
+        <div>Hey, just one "animated" slide element here</div>
+      </SlideElementWrapper>
+    </Slide>
+    <Slide>
+      <p>I'm a static slide element that should always show</p>
+      <p>This means that we don't need a SlideElementWrapper</p>
+      <SlideElementWrapper elementNum={0}>
+        <p slide-element="true"> ZERO Slide 4 x 3! </p>
+      </SlideElementWrapper>
+      <SlideElementWrapper elementNum={1}>
+        <p slide-element="true"> ONE Slide 4 x 3! </p>
+      </SlideElementWrapper>
+      <SlideElementWrapper elementNum={2}>
+        <p slide-element="true"> TWO Slide 4 x 3! </p>
+      </SlideElementWrapper>
+      <p>I'm also a static non-animated "slide element"!</p>
+    </Slide>
+    <div>HEY PHIL. YOU DOUBTED US???</div>
+  </Deck>
+);
+
+export default TestJs;

examples/MDX/test.mdx

@@ -0,0 +1,100 @@
+<!-- This is an MDX file that is imported in index.js and transpiled to
+JSX and then rendered, feel free to change this! -->
+
+import Deck from '../../src/components/Deck.js';
+import Slide from '../../src/components/Slide.js';
+import SlideElementWrapper from '../../src/components/SlideElementWrapper.js';
+import { DeckContext } from '../../src/hooks/useDeck.js';
+
+# Hello, _world_!
+
+<div style={{ padding: '20px', backgroundColor: 'aliceblue' }}>
+  <h3>This is JSX</h3>
+</div>
+<Deck loop={true}>
+  <Slide transitionEffect={{
+          from: {
+            width: '100%',
+            position: 'absolute',
+            transform: 'translate(-100%, 0%)'
+          },
+          enter: {
+            width: '100%',
+            position: 'absolute',
+            transform: 'translate(0, 0%)'
+          },
+          leave: {
+            width: '100%',
+            position: 'absolute',
+            transform: 'translate(100%, 0%)'
+          }
+        }}>
+    <div>Hi</div>
+    <b>b</b>
+  </Slide>
+  <Slide>
+    <p> Slide 3! </p>
+    <SlideElementWrapper elementNum={1}>
+      Hey, just one "animated" slide element here
+    </SlideElementWrapper>
+  </Slide>
+  <Slide>
+    <p>I'm a static slide element that should always show</p>
+    <p>This means that we don't need a SlideElementWrapper</p>
+    <SlideElementWrapper elementNum={1} transitionEffect={{from: {transform: 'translate(-100vw)'}, to: {
+        transform: 'translate(0)'}
+    }}>
+      <p slide-element="true"> ZERO Slide 4 x 3! </p>
+    </SlideElementWrapper>
+    <SlideElementWrapper elementNum={2}>
+      <p slide-element="true"> ONE Slide 4 x 3! </p>
+    </SlideElementWrapper>
+    <SlideElementWrapper elementNum={3}>
+      <p slide-element="true"> TWO Slide 4 x 3! </p>
+    </SlideElementWrapper>
+    <p>I'm also a static non-animated "slide element"!</p>
+  </Slide>
+</Deck>
+
+- One ah ah ah
+- Two ah ah ah
+  - Two point five
+- Three
+
+## Code snippet test
+
+### Using tabs
+
+    function useDeck(initialState) {
+      function reducer(state, action) {
+        switch (action.type) {
+          case 'next slide':
+            return { currentSlide: state.currentSlide + 1 };
+          case 'prev slide':
+            return { currentSlide: state.currentSlide - 1 };
+          default:
+            return { ...state };
+        }
+      }
+      const [state, dispatch] = React.useReducer(reducer, initialState);
+      return [state, dispatch];
+    }
+
+### Using backticks
+
+```js
+function useDeck(initialState) {
+  function reducer(state, action) {
+    switch (action.type) {
+      case 'next slide':
+        return { currentSlide: state.currentSlide + 1 };
+      case 'prev slide':
+        return { currentSlide: state.currentSlide - 1 };
+      default:
+        return { ...state };
+    }
+  }
+  const [state, dispatch] = React.useReducer(reducer, initialState);
+  return [state, dispatch];
+}
+```

index.js

@@ -1,6 +1,10 @@
 import React from 'react';
 import { render } from 'react-dom';
-import MDXDocument from './test.mdx';
+
+// START: test components to try rendering:
+import MDXDocument from './examples/MDX/test.mdx';
+// import TestJs from './examples/JS/TestJS.js';
+// END: test components to try rendering
 
 /**
  * Experiment to test MDX -> JSX transpilation through babel.

package.json

@@ -7,7 +7,7 @@
   "types": "index.d.ts",
   "scripts": {
     "build": "",
-    "lint": "",
+    "lint": "eslint --ignore-path .gitignore .",
     "lint-fix": "",
     "prettier": "prettier \"**/*.{js,json,ts,css,md}\"",
     "prettier-fix": "npm run prettier -- --write",
@@ -38,17 +38,19 @@
     "@babel/preset-env": "^7.4.5",
     "@babel/preset-react": "^7.0.0",
     "@mdx-js/loader": "^1.0.0-rc.4",
+    "babel-eslint": "^10.0.2",
     "babel-loader": "^8.0.6",
     "builder": "^4.0.0",
-    "eslint": "^4.19.0",
+    "eslint": "^5.16.0",
     "eslint-config-formidable": "^3.0.0",
     "eslint-config-prettier": "^2.9.0",
     "eslint-plugin-filenames": "^1.2.0",
     "eslint-plugin-import": "^2.9.0",
-    "eslint-plugin-react": "^7.7.0",
+    "eslint-plugin-react": "^7.13.0",
+    "eslint-plugin-react-hooks": "^1.6.0",
     "html-webpack-plugin": "^3.2.0",
     "prettier": "^1.15.3",
-    "prop-types": "^15.6.2",
+    "prop-types": "^15.7.2",
     "raw-loader": "^1.0.0",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
@@ -57,5 +59,9 @@
     "webpack": "^4.33.0",
     "webpack-cli": "^3.3.4",
     "webpack-dev-server": "^3.7.1"
+  },
+  "dependencies": {
+    "react-spring": "^8.0.25",
+    "styled-components": "^4.3.1"
   }
 }

src/components/Deck.js

@@ -0,0 +1,120 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import useDeck, { DeckContext } from '../hooks/useDeck';
+import isComponentType from '../utils/isComponentType.js';
+import { useTransition, animated } from 'react-spring';
+
+/**
+ * Provides top level state/context provider with useDeck hook
+ * Should wrap all the presentation components (slides, etc)
+ *
+ * Props = {
+ *  loop: bool (pass in true if you want slides to loop)
+ * transitionEffect: based off of react sprint useTransition
+ * }
+ *
+ * Note: Immediate is a React-Spring property that we pass to the animations
+ * essentially it skips animations.
+ */
+
+const initialState = { currentSlide: 0, immediate: false };
+
+const Deck = ({ children, loop, keyboardControls, ...rest }) => {
+  // Our default effect for transitioning between slides
+  const defaultSlideEffect = {
+    from: {
+      width: '100%',
+      position: 'absolute',
+      transform: 'translate(100%, 0%)'
+    },
+    enter: {
+      width: '100%',
+      position: 'absolute',
+      transform: 'translate(0, 0%)'
+    },
+    leave: {
+      width: '100%',
+      position: 'absolute',
+      transform: 'translate(-100%, 0%)'
+    },
+    config: { precision: 0 }
+  };
+  // Check for slides and then number slides.
+  const filteredChildren = Array.isArray(children)
+    ? children
+        // filter if is a Slide
+        .filter(x => isComponentType(x, 'Slide'))
+    : console.error('No children passed') || [];
+
+  // return a wrapped slide with the animated.div + style prop curried
+  // and a slideNum prop based on iterator
+
+  const Slides = filteredChildren.map((
+    x,
+    i // eslint-disable-next-line react/display-name
+  ) => ({ style }) => (
+    <animated.div style={{ ...style }}>
+      {{
+        ...x,
+        props: { ...x.props, slideNum: i, keyboardControls }
+      }}
+    </animated.div>
+  ));
+
+  // Initialise useDeck hook and get state and dispatch off of it
+  const [state, dispatch] = useDeck(
+    initialState,
+    Slides.length,
+    loop ? true : false,
+    rest.animationsWhenGoingBack
+  );
+
+  const transitions = useTransition(state.currentSlide, p => p, {
+    ...(filteredChildren[state.currentSlide].props.transitionEffect ||
+      defaultSlideEffect),
+    unique: true,
+    immediate: state.immediate
+  });
+
+  return (
+    <div
+      style={{
+        position: 'relative',
+        height: '50vh',
+        width: '100%',
+        overflowX: 'hidden'
+      }}
+    >
+      <DeckContext.Provider
+        value={[
+          state,
+          dispatch,
+          Slides.length,
+          keyboardControls,
+          rest.animationsWhenGoingBack
+        ]}
+      >
+        {transitions.map(({ item, props, key }) => {
+          const Slide = Slides[item];
+          return <Slide key={key} style={props} />;
+        })}
+      </DeckContext.Provider>
+    </div>
+  );
+};
+
+Deck.propTypes = {
+  animationsWhenGoingBack: PropTypes.bool.isRequired,
+  children: PropTypes.node.isRequired,
+  keyboardControls: PropTypes.oneOf(['arrows', 'space']),
+  loop: PropTypes.bool.isRequired
+};
+
+Deck.defaultProps = {
+  loop: false,
+  keyboardControls: 'arrows',
+  animationsWhenGoingBack: false
+};
+
+export default Deck;