Initial blank thing

.gitignore

@@ -5,3 +5,4 @@
 /node_modules
 /umd
 npm-debug.log*
+package-lock.json

demo/src/index.css

@@ -0,0 +1,6 @@
+html { box-sizing: border-box }
+*, *:before, *:after { box-sizing: inherit }
+
+body {
+ margin: 0;
+}

demo/src/index.js

@@ -1,15 +1,20 @@
-import React, {Component} from 'react'
-import {render} from 'react-dom'
+import React, { Component } from "react";
+import { render } from "react-dom";
 
-import Example from '../../src'
+import "./index.css";
+
+import { Deck, Slide } from "../../src";
+import { IFrame, Title } from "../../src/templates";
+
+const slides = [
+ <Title>1</Title>,
+ <IFrame src="https://brnbw.com">Caption</IFrame>
+];
 
 class Demo extends Component {
  render() {
- return <div>
- <h1>maximum-overbusiness Demo</h1>
- <Example/>
- </div>
+ return <Deck slides={slides} />;
  }
 }
 
-render(<Demo/>, document.querySelector('#demo'))
+render(<Demo />, document.querySelector("#demo"));

package.json

@@ -18,7 +18,9 @@
  "test:coverage": "nwb test-react --coverage",
  "test:watch": "nwb test-react --server"
  },
- "dependencies": {},
+ "dependencies": {
+ "react-router-dom": "^4.2.2"
+ },
  "peerDependencies": {
  "react": "16.x"
  },

src/Deck.js

@@ -0,0 +1,43 @@
+import React, { Component } from "react";
+import P from "prop-types";
+import {
+ BrowserRouter as Router,
+ Switch,
+ Route,
+ Redirect
+} from "react-router-dom";
+import Navigation from "./Navigation";
+import theme from "./themes/blank";
+
+export default class Deck extends Component {
+ static defaultProps = {
+ theme: theme
+ };
+
+ static childContextTypes = {
+ slides: P.array.isRequired,
+ deckProps: P.object.isRequired,
+ theme: P.object.isRequired
+ };
+
+ getChildContext() {
+ const { theme, slides, ...props } = this.props;
+
+ return {
+ slides,
+ deckProps: props,
+ theme
+ };
+ }
+
+ render() {
+ return (
+ <Router>
+ <Switch>
+ <Route path="/:slide" component={Navigation} />
+ <Redirect from="/" to="/1" />
+ </Switch>
+ </Router>
+ );
+ }
+}

src/Navigation.js

@@ -0,0 +1,61 @@
+import React, { Component } from "react";
+import P from "prop-types";
+import Viewport from './Viewport'
+
+export default class Navigation extends Component {
+ static contextTypes = {
+ slides: P.array.isRequired,
+ deckProps: P.object.isRequired
+ };
+
+ componentDidMount() {
+ window.addEventListener("keydown", this.handleKeyDown);
+ window.addEventListener("touchend", this.handleTouchEnd);
+ }
+
+ componentWillUnmount() {
+ window.removeEventListener("keydown", this.handleKeyDown);
+ window.removeEventListener("touchend", this.handleTouchEnd);
+ }
+
+ handleKeyDown = event => {
+ switch (event.keyCode) {
+ case 8: // bckspc
+ case 33: // pg up
+ case 37: // left arr
+ this.navigate(-1);
+ break;
+ case 32: // space
+ case 34: // pg dwn
+ case 39: // right arr
+ this.navigate(1);
+ break;
+ default:
+ break;
+ }
+ };
+
+ handleTouchEnd = event => {
+ this.navigate(1);
+ };
+
+ navigate = direction => {
+ const { history, match: { params } } = this.props;
+ const { slides } = this.context;
+
+ const nextSlide = Math.max(
+ 1,
+ Math.min(slides.length, parseInt(params.slide, 10) + direction)
+ );
+
+ history.push(`/${nextSlide}`);
+ };
+
+ render() {
+ const { match: { params } } = this.props;
+ const { slides, deckProps } = this.context;
+ const slideIndex = parseInt(params.slide, 10) - 1;
+
+ return <Viewport {...deckProps}>{slides[slideIndex]}</Viewport>;
+ }
+}

src/Slide.js

@@ -0,0 +1,12 @@
+import React from "react";
+import P from "prop-types";
+
+const Slide = ({ style, ...props }, { theme: { slide: slideTheme } }) => (
+ <div style={{ ...slideTheme.style, ...style }} {...props} />
+);
+
+Slide.contextTypes = {
+ theme: P.object.isRequired
+};
+
+export default Slide;

src/Slides.js

@@ -0,0 +1,3 @@
+import React, { Fragment } from 'react'
+
+export default ({ children }, { slideNum }) => <Fragment />

src/Viewport.js

@@ -0,0 +1,12 @@
+import React from "react";
+import P from "prop-types";
+
+const Viewport = ({ style, ...props }, { theme: { deck } }) => (
+ <div style={{ ...deck.style, ...style }} {...props} />
+);
+
+Viewport.contextTypes = {
+ theme: P.object.isRequired
+};
+
+export default Viewport;

src/clicker.js

@@ -0,0 +1,36 @@
+function Clicker(window) {
+ this.listeners = {
+ next: [],
+ prev: []
+ }
+
+ window.addEventListener('keydown', this._keyDown)
+ window.removeEventListener('keydown', this._keyDown)
+}
+
+Clicker.prototype.on = function(event, cb) {
+ this.listeners[event].push(cb)
+
+ return function off () {
+ this.listeners[event].remove(cb)
+ }
+}
+
+Clicker.prototype._keyDown = function(event) {
+ switch (event.keyCode) {
+ case 8: // bckspc
+ case 33: // pg up
+ case 37: // left arr
+ this.listeners['next'].forEach(cb => cb(event))
+ break;
+ case 32: // space
+ case 34: // pg dwn
+ case 39: // right arr
+ this.listeners['prev'].forEach(cb => cb(event))
+ break;
+ default:
+ break;
+ }
+}
+
+module.exports = new Clicker(window)

src/index.js

@@ -1,9 +1,3 @@
-import React, {Component} from 'react'
-
-export default class extends Component {
- render() {
- return <div>
- <h2>Welcome to React components</h2>
- </div>
- }
-}
+export const Deck = require('./Deck').default
+export const Slide = require('./Slide').default
+export const Slides = require('./Slides').default

src/templates.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { Slide } from "./";
+
+export const Title = ({ children, ...props }) => (
+ <Slide {...props}>
+ <h1>{children}</h1>
+ </Slide>
+);
+
+export const IFrame = ({ src, children, style, ...props }) => (
+ <Slide style={{ ...style, flexFlow: "column" }} {...props}>
+ <header style={{ flex: "0 0 auto" }}>
+ <input type="text" value={src} readOnly />
+ {children}
+ </header>
+ <iframe
+ src={src}
+ title="slide"
+ {...props}
+ style={{ flex: "1 1 auto", width: "100%", border: "0" }}
+ />
+ </Slide>
+);

src/themes/blank.js

@@ -0,0 +1,13 @@
+export default {
+ deck: {
+ style: { height: "100vh", display: "flex" }
+ },
+ slide: {
+ style: {
+ width: "100%",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center"
+ }
+ }
+};