<commit_before>import React from "react/addons";

import {
  Appear, BlockQuote, Cite, CodePane, Deck, Fill,
  Heading, Image, Layout, Link, ListItem, List, Quote, Slide, Text
} from "../src/spectacle";

import preloader from "../src/utils/preloader";

import Interactive from "./interactive";

const images = {
  dashboard: require("./images/poop_monitor_dashboard.png"),
  dashboardComponents: require("./images/poop_monitor_dashboard_components.png"),
  diaper: require("./images/poop_monitor_diaper.png"),
  diaperComponents: require("./images/poop_monitor_diaper_components.png")
};

preloader([
            images.dashboard, 
            images.dashboardComponents, 
            images.diaper, 
            images.diaperComponents
          ]);

const justifyCenter = {
  "-webkit-align-items": "center",
  "-webkit-box-align": "center",
  "align-items": "center"
};

export default class extends React.Component {
  render() {
    return (
      <Deck transition={["zoom", "slide"]} transitionDuration={800}>
        <Slide transition={["slide"]} bgColor="primary">
          <Heading size={1} fit caps textColor="black">
            React
          </Heading>
          <Heading size={1} fit caps margin="-20px 0px">
            A Presentation for OttawaJS
          </Heading>
        </Slide>

        <Slide transition={["slide"]} bgColor="black" notes="">
          <Heading size={2} textColor="tertiary">
            Hello
          </Heading>
          <Link href="https://twitter.com/brucelefebvre">
            <Text textColor="tertiary">@brucelefebvre</Text>
          </Link>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary" notes="">
          <Heading size={2} textColor="tertiary">
            Demo!
          </Heading>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Heading size={5} textColor="tertiary">
            Dashboard Components
          </Heading>
          <Layout>
            <Fill>
              <Image src={images.dashboard.replace('/','')} />
            </Fill>
            <Fill>
              
            </Fill>
          </Layout>
        </Slide>


        <Slide transition={["none"]} bgColor="primary">
          <Heading size={5} textColor="tertiary">
            Dashboard Components
          </Heading>
          <Layout>
            <Fill>
              <Image src={images.dashboardComponents.replace('/','')} />
            </Fill>
            <Fill>
              <List>
                <ListItem textColor="red">Dashboard</ListItem>
                <ListItem textColor="green"><Appear fid="2">Header</Appear></ListItem>
                <ListItem textColor="blue"><Appear fid="3">EventSelector</Appear></ListItem>
                <ListItem textColor="yellow"><Appear fid="4">EventTypeLink</Appear></ListItem>
                <ListItem textColor="pink"><Appear fid="5">EventHistory</Appear></ListItem>
                <ListItem textColor="orange"><Appear fid="6">Event</Appear></ListItem>
                <ListItem textColor="brown"><Appear fid="6">DiaperEvent</Appear></ListItem>
                <ListItem textColor="gray"><Appear fid="6">FormattedRelative</Appear></ListItem>
              </List>
            </Fill>
          </Layout>
        </Slide>


        <Slide transition={["slide"]} bgColor="primary">
          <Layout>
            <Fill>
              <Image src={images.diaper.replace('/','')} />
            </Fill>
            <Fill>
            </Fill>
          </Layout>
        </Slide>


        <Slide transition={["none"]} bgColor="primary" notes="what makes a good component">
          <Layout>
            <Fill>
              <Image src={images.diaperComponents.replace('/','')} />
            </Fill>
            <Fill>
              <List>
                <ListItem textColor="red">AddDiaperEvent</ListItem>
                <ListItem textColor="green"><Appear fid="1">Header</Appear></ListItem>
                <ListItem textColor="blue"><Appear fid="2">DiaperEventForm</Appear></ListItem>
                <ListItem textColor="orange"><Appear fid="3">TimeSelector</Appear></ListItem>
              </List>
            </Fill>
          </Layout>
        </Slide> 

        <Slide transition={["slide"]} bgColor="black">
          <BlockQuote>
            <Quote>..a component should ideally only do one thing.</Quote>
            <Cite><NAME>, <a href="https://facebook.github.io/react/docs/thinking-in-react.html">Thinking in React</a></Cite>
          </BlockQuote>
        </Slide>


        {/*
        <Slide transition={["slide"]} bgImage={images.city.replace("/", "")} bgDarken={0.75}>
          <Appear fid="1">
            <Heading size={1} caps fit textColor="primary">
              Full Width
            </Heading><commit_msg>Slides added<commit_after>import React from "react/addons";

import {
  Appear, BlockQuote, Cite, CodePane, Deck, Fill,
  Heading, Image, Layout, Link, ListItem, List, Quote, Slide, Text
} from "../src/spectacle";

import preloader from "../src/utils/preloader";

import Interactive from "./interactive";

const images = {
  dashboard: require("./images/poop_monitor_dashboard.png"),
  dashboardComponents: require("./images/poop_monitor_dashboard_components.png"),
  diaper: require("./images/poop_monitor_diaper.png"),
  diaperComponents: require("./images/poop_monitor_diaper_components.png")
};

preloader([
            images.dashboard, 
            images.dashboardComponents, 
            images.diaper, 
            images.diaperComponents
          ]);

const justifyCenter = {
  "-webkit-align-items": "center",
  "-webkit-box-align": "center",
  "align-items": "center"
};

const subListItem = {
  "font-size": "80%",
  "margin-left": "1em"
};

export default class extends React.Component {
  render() {
    return (
      <Deck transition={["slide"]} transitionDuration={800}>
        <Slide transition={["slide"]} bgColor="primary">
          <Heading size={1} fit caps textColor="black">
            React
          </Heading>
          <Heading size={1} fit caps margin="-20px 0px">
            A Presentation for OttawaJS
          </Heading>
        </Slide>

        <Slide transition={["slide"]} bgColor="black" notes="you've probably heard about it by now">
          <Heading size={2} textColor="tertiary">
            Hello
          </Heading>
          <Link href="https://twitter.com/brucelefebvre">
            <Text textColor="tertiary">@brucelefebvre</Text>
          </Link>
        </Slide>

        <Slide transition={["slide"]}>
            <Heading size={2} caps textColor="black">
              React: 
            </Heading>
            <Heading size={4} caps fit textColor="black">
              <Appear>a JavaScript library for creating user interfaces</Appear>
            </Heading>
        </Slide>

        <Slide transition={["slide"]}  bgColor="secondary" textColor="primary">
          <Heading size={2} textColor="primary">
            Why React?
          </Heading>
          <List>
            <ListItem><Appear>Component based</Appear></ListItem>
            <ListItem>
              <Appear>Fast</Appear>
              <List>
                <ListItem style={subListItem}><Appear>Performance</Appear></ListItem>
                <ListItem style={subListItem}><Appear>To learn</Appear></ListItem>
              </List>
            </ListItem>
            <ListItem><Appear>Simple</Appear></ListItem>
            <ListItem><Appear>No templates</Appear>
              <List >
                <ListItem style={subListItem}><Appear>Means no abstractions</Appear></ListItem>
                <ListItem style={subListItem}><Appear>Markup lives with its corresponding view logic</Appear></ListItem>
              </List>
            </ListItem>
          </List>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary" notes="">
          <Heading size={2} textColor="tertiary">
            Demo!
          </Heading>
        </Slide>


        <Slide transition={["slide"]} bgColor="black">
          <BlockQuote>
            <Quote>In fact, with React the only thing you do is build components.</Quote>
            <Cite><a href="https://facebook.github.io/react/docs/why-react.html">Why React?</a></Cite>
          </BlockQuote>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Heading size={5} textColor="tertiary">
            Dashboard Components
          </Heading>
          <Layout>
            <Fill>
              <Image src={images.dashboard.replace('/','')} />
            </Fill>
            <Fill>
              
            </Fill>
          </Layout>
        </Slide>


        <Slide transition={["none"]} bgColor="primary">
          <Heading size={5} textColor="tertiary">
            Dashboard Components
          </Heading>
          <Layout>
            <Fill>
              <Image src={images.dashboardComponents.replace('/','')} />
            </Fill>
            <Fill>
              <List>
                <ListItem textColor="red">Dashboard</ListItem>
                <ListItem textColor="green"><Appear fid="2">Header</Appear></ListItem>
                <ListItem textColor="blue"><Appear fid="3">EventSelector</Appear></ListItem>
                <ListItem textColor="yellow"><Appear fid="4">EventTypeLink</Appear></ListItem>
                <ListItem textColor="pink"><Appear fid="5">EventHistory</Appear></ListItem>
                <ListItem textColor="orange"><Appear fid="6">Event</Appear></ListItem>
                <ListItem textColor="brown"><Appear fid="6">DiaperEvent</Appear></ListItem>
                <ListItem textColor="gray"><Appear fid="6">FormattedRelative</Appear></ListItem>
              </List>
            </Fill>
          </Layout>
        </Slide>


        <Slide transition={["slide"]} bgColor="primary">
          <Layout>
            <Fill>
              <Image src={images.diaper.replace('/','')} />
            </Fill>
            <Fill>
            </Fill>
          </Layout>
        </Slide>


        <Slide transition={["none"]} bgColor="primary" notes="what makes a good component">
          <Layout>
            <Fill>
              <Image src={images.diaperComponents.replace('/','')} />
            </Fill>
            <Fill>
              <List>
                <ListItem textColor="red">AddDiaperEvent</ListItem>
                <ListItem textColor="green"><Appear fid="1">Header</Appear></ListItem>
                <ListItem textColor="blue"><Appear fid="2">DiaperEventForm</Appear></ListItem>
                <ListItem textColor="orange"><Appear fid="3">TimeSelector</Appear></ListItem>
              </List>
            </Fill>
          </Layout>
        </Slide> 

        <Slide transition={["slide"]} bgColor="black">
          <BlockQuote>
            <Quote>..a component should ideally only do one thing.</Quote>
            <Cite><NAME>, <a href="https://facebook.github.io/react/docs/thinking-in-react.html">Thinking in React</a></Cite>
          </BlockQuote>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Heading size={2} textColor="tertiary">
            Speed: at a price
          </Heading>
          {/* code sample of handleSubmit */}
        </Slide>



        <Slide transition={["slide"]} bgColor="primary">
          <Heading size={2} textColor="tertiary">
            Gotchas
          </Heading>
          {/*  */}
        </Slide>
        {/*
        <Slide transition={["slide"]} bgImage={images.city.replace("/", "")} bgDarken={0.75}>
          <Appear fid="1">
            <Heading size={1} caps fit textColor="primary">
              Full Width
            </Heading>
{'fraction_non_alphanumeric': 0.156509103342166, 'fraction_numerical': 0.005299598256261219, 'mean_word_length': 2.029518384256862, 'pattern_counts': {'":': 8, '<': 315, '<?xml version=': 0, '>': 315, 'https://': 5, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1032833', 'n_tokens_mistral': 3395, 'n_tokens_neox': 3319, 'n_words': 616}