Split state from UI

package.json

@@ -10,6 +10,7 @@
     "start": "yarn workspace @mdx-deck/docs start",
     "analyze-bundle": "yarn workspace @mdx-deck/docs start --webpack bundle-analyzer.config.js",
     "build": "yarn workspace @mdx-deck/docs build",
+    "start-theme": "yarn workspace @mdx-deck/gatsby-theme start",
     "build-theme": "yarn workspace @mdx-deck/gatsby-theme build",
     "test": "jest && yarn build-theme"
   },

packages/components/src/MDXDeck.js

@@ -1,4 +1,4 @@
-import React, { useReducer, useMemo } from 'react'
+import React, { useContext, useReducer, useMemo } from 'react'
 import PropTypes from 'prop-types'
 import { Router, globalHistory, navigate } from '@reach/router'
 import { Global } from '@emotion/core'
@@ -58,15 +58,27 @@ const getWrapper = mode => {
   }
 }
 
-export const MDXDeck = props => {
-  const { slides, basepath } = props
+export const MDXDeckContext = React.createContext()
 
+export const State = ({ children }) => {
   const [state, setState] = useState({
     metadata: {},
     step: 0,
     mode: NORMAL,
   })
 
+  const context = {
+    state,
+    setState,
+  }
+
+  return <MDXDeckContext.Provider value={context} children={children} />
+}
+
+export const Deck = props => {
+  const { slides, basepath } = props
+  const { state, setState } = useContext(MDXDeckContext)
+
   const index = getIndex(props)
 
   const getMeta = i => {
@@ -160,6 +172,12 @@ export const MDXDeck = props => {
   )
 }
 
+export const MDXDeck = props => (
+  <State>
+    <Deck {...props} />
+  </State>
+)
+
 MDXDeck.propTypes = {
   slides: PropTypes.array.isRequired,
   headTags: PropTypes.array.isRequired,

packages/gatsby-theme/src/templates/deck.js

@@ -1,12 +1,22 @@
 import React from 'react'
 import MDXRenderer from 'gatsby-mdx/mdx-renderer'
 import { graphql } from 'gatsby'
-import Layout from '../layouts/deck'
+import { MDXDeck, splitSlides } from '@mdx-deck/components'
+
+const Wrapper = props => <MDXDeck {...splitSlides(props)} />
 
 export default props => {
   const { mdx } = props.data
-  const children = <MDXRenderer children={mdx.code.body} />
-  return <Layout {...props} children={children} />
+  const Component = props => <MDXRenderer {...props} children={mdx.code.body} />
+
+  return (
+    <Component
+      basepath={props.pageContext.basepath}
+      components={{
+        wrapper: Wrapper,
+      }}
+    />
+  )
 }
 
 export const query = graphql`