Base Theming

examples/js/test-js.js

@@ -1,32 +1,22 @@
 import React from 'react';
-import Deck from '../../src/components/deck.js';
-import Slide from '../../src/components/slide.js';
-import SlideElementWrapper from '../../src/components/slide-element-wrapper';
-import CodePane from '../../src/components/code-pane';
-
-const reactJSCodeBlock = `export default function CodePane(props) {
-  return (
-    <Highlight
-      {...defaultProps}
-      code={props.children}
-      language={props.language}
-      theme={theme}
-    >
-      {({ className, style, tokens, getLineProps, getTokenProps }) => (
-        <pre className={className} style={style}>
-          {tokens.map((line, i) => (
-            <div key={i} {...getLineProps({ line, key: i })}>
-              {line.map((token, key) => (
-                <span key={key} {...getTokenProps({ token, key })} />
-              ))}
-            </div>
-          ))}
-        </pre>
-      )}
-    </Highlight>
-  );
-}`;
+import {
+  Deck,
+  Slide,
+  SlideElementWrapper,
+  CodePane,
+  FlexBox,
+  Box,
+  Image,
+  Heading,
+  ListItem,
+  OrderedList,
+  Quote,
+  Text,
+  UnorderedList,
+  Grid
+} from '../../src/components';
 
+const formidableLogo = require('./formidable.png');
 const cppCodeBlock = `#include <iostream>
 
 int main()
@@ -42,34 +32,75 @@ int main()
 const TestJs = () => (
   <Deck>
     <Slide slideNum={1}>
-      <CodePane language="jsx">{reactJSCodeBlock}</CodePane>
+      <Heading>Spectacle</Heading>
+      <Text>Hello There 🤗</Text>
+      <Quote>This is a Formidaquote!</Quote>
+      <OrderedList>
+        <ListItem>This is an</ListItem>
+        <ListItem>ordered list</ListItem>
+      </OrderedList>
+      <UnorderedList>
+        <ListItem>This is an</ListItem>
+        <ListItem>unordered list</ListItem>
+      </UnorderedList>
     </Slide>
     <Slide slideNum={2}>
       <CodePane fontSize={18} language="cpp">
         {cppCodeBlock}
       </CodePane>
     </Slide>
     <Slide slideNum={3}>
-      <p> Slide 3! </p>
+      <Text fontSize="subHeader">Slide 3!</Text>
       <SlideElementWrapper elementNum={1}>
-        <div>{`Hey, just one "animated" slide element here`}</div>
+        <Text>{`Hey, just one "animated" slide element here`}</Text>
       </SlideElementWrapper>
     </Slide>
     <Slide slideNum={4}>
-      <p>{`I'm a static slide element that should always show`}</p>
-      <p>{`This means that we don't need a SlideElementWrapper`}</p>
+      <Text>{`I'm a static slide element that should always show`}</Text>
+      <Text>{`This means that we don't need a SlideElementWrapper`}</Text>
       <SlideElementWrapper elementNum={1}>
-        <p> ZERO Slide 4 x 3! </p>
+        <Text> ZERO Slide 4 x 3! </Text>
       </SlideElementWrapper>
       <SlideElementWrapper elementNum={2}>
-        <p> ONE Slide 4 x 3! </p>
+        <Text> ONE Slide 4 x 3! </Text>
       </SlideElementWrapper>
       <SlideElementWrapper elementNum={3}>
-        <p> TWO Slide 4 x 3! </p>
+        <Text> TWO Slide 4 x 3! </Text>
       </SlideElementWrapper>
-      <p>{`I'm also a static non-animated "slide element"!`}</p>
+      <Text>{`I'm also a static non-animated "slide element"!`}</Text>
+    </Slide>
+    <Slide slideNum={5}>
+      <FlexBox>
+        <Text>These</Text>
+        <Text>Text</Text>
+        <Text color="secondary">Items</Text>
+        <Text fontWeight="bold">Flex</Text>
+      </FlexBox>
+      <Grid gridTemplateColumns="1fr 2fr" gridColumnGap={15}>
+        <Box backgroundColor="primary">
+          <Text color="secondary">Single-size Grid Item</Text>
+        </Box>
+        <Box backgroundColor="secondary">
+          <Text>Double-size Grid Item</Text>
+        </Box>
+      </Grid>
+      <Heading>Lots of Formidables!</Heading>
+      <Grid
+        gridTemplateColumns="1fr 1fr 1fr"
+        gridTemplateRows="1fr 1fr 1fr"
+        alignItems="center"
+        justifyContent="center"
+        gridRowGap={15}
+      >
+        {Array(9)
+          .fill('')
+          .map(index => (
+            <FlexBox key={`formidable-logo-${index}`}>
+              <Image src={formidableLogo} width={100} />
+            </FlexBox>
+          ))}
+      </Grid>
     </Slide>
-    <div>HEY PHIL. YOU DOUBTED US???</div>
   </Deck>
 );
 

package.json

@@ -51,7 +51,7 @@
     "eslint-plugin-import": "^2.9.0",
     "eslint-plugin-react": "^7.13.0",
     "eslint-plugin-react-hooks": "^1.6.0",
-    "file-loader": "^4.1.0",
+    "file-loader": "^4.2.0",
     "html-webpack-plugin": "^3.2.0",
     "prettier": "^1.15.3",
     "prop-types": "^15.7.2",
@@ -76,7 +76,8 @@
     "query-string": "^6.8.2",
     "react-spring": "^8.0.25",
     "react-typography": "^0.16.19",
-    "styled-components": "^4.3.1",
+    "styled-components": "^4.3.2",
+    "styled-system": "^5.1.1",
     "wonka": "^3.2.0"
   }
 }

src/components/Image.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import { compose, layout, position } from 'styled-system';
+
+const Image = styled('img')(
+  compose(
+    layout,
+    position
+  )
+);
+
+export { Image };

src/components/code-pane.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import Highlight, { defaultProps } from 'prism-react-renderer';
 import propTypes from 'prop-types';
 import theme from 'prism-react-renderer/themes/vsDark';
+import { ThemeContext } from 'styled-components';
 
 const spaceSearch = /\S|$/;
 
@@ -16,10 +17,11 @@ const lineNumberStyles = {
 export default function CodePane(props) {
   const canvas = React.useRef(document.createElement('canvas'));
   const context = React.useRef(canvas.current.getContext('2d'));
+  const themeContext = React.useContext(ThemeContext);
 
   const font = React.useMemo(() => {
-    if (props.font && props.font.trim().length > 0) {
-      return props.font;
+    if (themeContext && themeContext.fonts && themeContext.fonts.monospace) {
+      return themeContext.fonts.monospace;
     }
     const { platform } = navigator;
     if (platform.toLowerCase().search('win') !== -1) {
@@ -29,7 +31,7 @@ export default function CodePane(props) {
     } else {
       return 'monospace';
     }
-  }, [props.font]);
+  }, [themeContext]);
 
   const preStyles = React.useMemo(
     () => ({
@@ -103,7 +105,6 @@ export default function CodePane(props) {
 
 CodePane.propTypes = {
   children: propTypes.string.isRequired,
-  font: propTypes.string,
   fontSize: propTypes.number,
   language: propTypes.string.isRequired,
   theme: propTypes.object

src/components/deck.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { ThemeContext, ThemeProvider } from 'styled-components';
 
+import defaultTheme from '../theme/default-theme';
 import useDeck, { DeckContext } from '../hooks/use-deck';
 import isComponentType from '../utils/is-component-type';
 import { animated, useTransition } from 'react-spring';
@@ -82,6 +84,7 @@ const Deck = ({ children, loop, keyboardControls, ...rest }) => {
     rest.animationsWhenGoingBack,
     slideElementMap
   );
+  const themeContext = React.useContext(ThemeContext);
 
   const {
     navigateToNextSlide,
@@ -111,7 +114,15 @@ const Deck = ({ children, loop, keyboardControls, ...rest }) => {
 
   React.useLayoutEffect(() => {
     document.body.style.margin = '0';
-  }, []);
+    document.body.style.background =
+      themeContext.colors[rest.backgroundColor] ||
+      rest.backgroundColor ||
+      themeContext.colors.tertiary;
+    document.body.style.color =
+      themeContext.colors[rest.textColor] ||
+      rest.textColor ||
+      themeContext.colors.primary;
+  }, [rest.backgroundColor, rest.textColor, themeContext.colors]);
 
   React.useEffect(() => {
     if (!transitionRef.current) {
@@ -139,7 +150,7 @@ const Deck = ({ children, loop, keyboardControls, ...rest }) => {
   ));
 
   return (
-    <div>
+    <>
       <DeckContext.Provider
         value={{
           state,
@@ -154,27 +165,33 @@ const Deck = ({ children, loop, keyboardControls, ...rest }) => {
       >
         {slides}
       </DeckContext.Provider>
-    </div>
+    </>
   );
 };
 
 Deck.propTypes = {
   animationsWhenGoingBack: PropTypes.bool.isRequired,
+  backgroundColor: PropTypes.string,
   children: PropTypes.node.isRequired,
   keyboardControls: PropTypes.oneOf(['arrows', 'space']),
-  loop: PropTypes.bool.isRequired
+  loop: PropTypes.bool.isRequired,
+  textColor: PropTypes.string,
+  theme: PropTypes.object
 };
 
-Deck.defaultProps = {
+const ConnectedDeck = props => (
+  <ThemeProvider theme={defaultTheme}>
+    <TransitionPipeProvider>
+      <Deck {...props} />
+    </TransitionPipeProvider>
+  </ThemeProvider>
+);
+
+ConnectedDeck.propTypes = Deck.propTypes;
+ConnectedDeck.defaultProps = {
   loop: false,
   keyboardControls: 'arrows',
   animationsWhenGoingBack: false
 };
 
-export default function ConnectedDeck(props) {
-  return (
-    <TransitionPipeProvider>
-      <Deck {...props} />
-    </TransitionPipeProvider>
-  );
-}
+export default ConnectedDeck;

src/components/index.js

@@ -0,0 +1,31 @@
+import Deck from './deck';
+import Slide from './slide';
+import SlideElementWrapper from './slide-element-wrapper';
+import CodePane from './code-pane';
+import {
+  OrderedList,
+  Quote,
+  Heading,
+  ListItem,
+  UnorderedList,
+  Text
+} from './typography';
+import { FlexBox, Grid, Box } from './layout';
+import { Image } from './Image';
+
+export {
+  Deck,
+  Slide,
+  SlideElementWrapper,
+  CodePane,
+  Box,
+  FlexBox,
+  Grid,
+  Image,
+  OrderedList,
+  Quote,
+  Heading,
+  ListItem,
+  UnorderedList,
+  Text
+};

src/components/layout.js

@@ -0,0 +1,38 @@
+import styled from 'styled-components';
+import { compose, grid, flexbox, layout, position, color } from 'styled-system';
+
+const Box = styled('div')(
+  compose(
+    layout,
+    position,
+    color
+  )
+);
+
+const FlexBox = styled('div')(
+  compose(
+    layout,
+    flexbox,
+    position
+  )
+);
+
+FlexBox.defaultProps = {
+  alignItems: 'center',
+  justifyContent: 'center',
+  display: 'flex'
+};
+
+const Grid = styled('div')(
+  compose(
+    layout,
+    grid,
+    position
+  )
+);
+
+Grid.defaultProps = {
+  display: 'grid'
+};
+
+export { Box, FlexBox, Grid };