init

6 files changed, 313 insertions, 0 deletions

diff --git a/src/About.tsx b/src/About.tsx
new file mode 100644
index 0000000..9aae40c
--- /dev/null
+++ b/src/About.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import { Theme, withStyles, StyleRules } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Link from '@material-ui/core/Link';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+
+const styles = (theme: Theme): StyleRules => ({
+    infoField: {
+        fontWeight: theme.typography.fontWeightMedium,
+        paddingRight: 14,
+    },
+    body: {
+        margin: '0 auto',
+        width: 800,
+        fontSize: 16
+    },
+    pre: {
+        fontFamily: "Monospace"
+    }
+});
+
+type AboutProps = {
+    classes: {
+        infoField: string,
+        body: string,
+        pre: string
+    }
+};
+
+function About(props: AboutProps) {
+    const { classes } = props;
+    return (
+        <div className={classes.body}>
+        <article>
+        The MIT License (MIT)
+        <p>Copyright 2019 Maofan "Ted" Yin</p>
+        
+        <p>Permission is hereby granted, free of charge, to any person obtaining a copy
+        of this software and associated documentation files (the "Software"), to deal
+        in the Software without restriction, including without limitation the rights
+        to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+        copies of the Software, and to permit persons to whom the Software is
+        furnished to do so, subject to the following conditions:</p>
+        
+        <p>The above copyright notice and this permission notice shall be included in
+        all copies or substantial portions of the Software.</p>
+        
+        <p>THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+        IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+        FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+        AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+        LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+        OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+        THE SOFTWARE.</p>
+        </article>
+        <List disablePadding>
+            <ListItem>
+            <span className={classes.infoField}>Email:</span>
+            73d at tedyin dot com
+            </ListItem>
+            <ListItem>
+            <span className={classes.infoField}>GitHub:</span>
+            <Link href="https://github.com/Determinant/chromicle" target="_blank" rel="noopener">
+                Determinant/chromicle
+            </Link>
+            </ListItem>
+            <ListItem>
+                <span className={classes.infoField}>About Me:</span>
+                <Link href="https://www.cs.cornell.edu/~tedyin/" target="_blank" rel="noopener">
+                    https://www.cs.cornell.edu/~tedyin/
+                </Link>
+            </ListItem>
+            <ListItem>
+                <span className={classes.infoField}>Buy me a cup of coffee:</span>
+                <List className={classes.pre} disablePadding>
+                <ListItem>Ether: 0xFEeed0f0BA87824819aabfa789f41FA2dd9ad81e</ListItem>
+                <ListItem>Bitcoin: 1CbVBB6Gv7WP4u39wsN416SJrjmvQDjggw</ListItem>
+                </List>
+            </ListItem>
+        </List>
+        </div>
+    );
+}
+
+export default withStyles(styles)(About);
diff --git a/src/Grid.tsx b/src/Grid.tsx
new file mode 100644
index 0000000..65cf2ec
--- /dev/null
+++ b/src/Grid.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import 'typeface-roboto';
+import MGrid from '@material-ui/core/Grid';
+
+
+interface GridProps {
+    classes: {}
+}
+
+class Grid extends React.Component<GridProps> {
+    render() {
+        const { classes } = this.props;
+        return (<div></div>);
+    }
+}
+
+export default Grid;
diff --git a/src/Snow.tsx b/src/Snow.tsx
new file mode 100644
index 0000000..47a1c06
--- /dev/null
+++ b/src/Snow.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import MGrid from '@material-ui/core/Grid';
+import { Theme, withStyles } from '@material-ui/core/styles';
+
+interface SnowProps {
+    classes: {}
+}
+
+const styles = (theme: Theme) => ({
+    buttonSpacer: {
+        marginBottom: theme.spacing.unit * 4,
+    },
+});
+
+class Snow extends React.Component<SnowProps> {
+    render() {
+        const { classes } = this.props;
+
+        return (
+            <MGrid container spacing={16} style={{minWidth: 700}}>
+            </MGrid>
+        );
+    }
+}
+
+export default withStyles(styles)(Snow);
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..a51779c
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <link rel="stylesheet" href="/fonts/TypoPRO-FantasqueSansMono-Regular.css" />
+    <title>Chromicle</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/src/index.tsx b/src/index.tsx
new file mode 100644
index 0000000..da751ca
--- /dev/null
+++ b/src/index.tsx
@@ -0,0 +1,149 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import 'typeface-roboto';
+import { Theme, withStyles, MuiThemeProvider } from '@material-ui/core/styles';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import Tabs from '@material-ui/core/Tabs';
+import Tab, { TabProps } from '@material-ui/core/Tab';
+import { LinkProps } from '@material-ui/core/Link';
+import Grid from '@material-ui/core/Grid';
+import { HashRouter as Router, RouteComponentProps, withRouter, Route, Link, Redirect, Switch } from "react-router-dom";
+import { TransitionGroup, CSSTransition } from "react-transition-group";
+
+import { theme } from './theme';
+import Snow from './Snow';
+import About from './About';
+
+const styles = (theme: Theme) => ({
+    root: {
+        display: 'flex',
+        height: '100vh',
+    },
+    appBar: {
+        zIndex: theme.zIndex.drawer + 1,
+        transition: theme.transitions.create(['width', 'margin'], {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+        }),
+    },
+    title: {
+        flexGrow: 1,
+        display: 'inline-block'
+    },
+    appBarSpacer: theme.mixins.toolbar,
+    contentWrapper: {
+        position: 'relative' as 'relative',
+        flexGrow: 1,
+        padding: theme.spacing.unit * 3,
+        overflow: 'auto',
+    },
+    content: {
+        position: 'absolute' as 'absolute',
+        left: theme.spacing.unit * 3,
+        right: theme.spacing.unit * 3,
+        paddingBottom: theme.spacing.unit * 3,
+    },
+    indicator: {
+        backgroundColor: theme.palette.primary.contrastText
+    },
+    fadeEnter: {
+        opacity: 0.001
+    },
+    fadeEnterActive: {
+        opacity: 1,
+        transition: 'opacity 300ms ease-in'
+    },
+    fadeExit: {
+        opacity: 1
+    },
+    fadeExitActive: {
+        opacity: 0.001,
+        transition: 'opacity 300ms ease-in'
+    }
+});
+
+interface MainTabsProps extends RouteComponentProps {
+    classes: {
+        root: string,
+        appBar: string,
+        appBarSpacer: string,
+        toolbar: string,
+        title: string,
+        indicator: string,
+        content: string,
+        contentWrapper: string,
+        fadeEnter: string,
+        fadeEnterActive: string,
+        fadeExit: string,
+        fadeExitActive: string,
+    }
+}
+
+class MainTabs extends React.Component<MainTabsProps> {
+    handleChangeTab = (event: React.SyntheticEvent<{}>, currentTab: any) => {
+        this.props.history.push(currentTab);
+    }
+
+    render() {
+        const { classes, location } = this.props;
+        return (
+            <div className={classes.root}>
+                <AppBar
+                    position="absolute"
+                    className={classes.appBar}>
+                    <Toolbar className={classes.toolbar}>
+                        <Typography component="h1" variant="h6" color="inherit" noWrap className={classes.title}>
+                            Snow
+                        </Typography>
+                        <Tabs
+                            classes={{ indicator: classes.indicator }}
+                            value={this.props.history.location.pathname}
+                            onChange={this.handleChangeTab}>
+                            <Tab label="Snow" {...{component: Link, to: "/snow"} as any} value="/snow" />
+                            <Tab label="About" {...{component: Link, to: "/about"} as any} value="/about" />
+                        </Tabs>
+                    </Toolbar>
+                </AppBar>
+                <CssBaseline />
+                <main className={classes.contentWrapper}>
+                    <div className={classes.appBarSpacer} />
+                    <TransitionGroup>
+                        <CSSTransition
+                                key={location.pathname}
+                                timeout={{ enter: 300, exit: 300 }}
+                                classNames={{
+                                    enter: classes.fadeEnter,
+                                    enterActive: classes.fadeEnterActive,
+                                    exit: classes.fadeExit,
+                                    exitActive: classes.fadeExitActive
+                                }}>
+                            <div className={classes.content}>
+                            <Switch location={location}>
+                            {console.log(location)}
+                            <Route exact path="/snow" component={Snow} />
+                            <Route exact path="/about" component={About} />
+                            <Route exact path="/" render={() => <Redirect to="/settings" />}/>
+                            </Switch>
+                            </div>
+                        </CSSTransition>
+                    </TransitionGroup>
+                </main>
+            </div>
+        );
+    }
+}
+
+class Main extends React.Component {
+    render() {
+        let Tabs = withRouter(withStyles(styles)(MainTabs));
+        return (
+            <MuiThemeProvider theme={theme}>
+                <Router><Tabs /></Router>
+            </MuiThemeProvider>);
+    }
+}
+
+ReactDOM.render(<Main />, document.getElementById('root'));
diff --git a/src/theme.ts b/src/theme.ts
new file mode 100644
index 0000000..0269fd3
--- /dev/null
+++ b/src/theme.ts
@@ -0,0 +1,18 @@
+import { createMuiTheme } from '@material-ui/core/styles';
+import orange from '@material-ui/core/colors/orange';
+import deepOrange from '@material-ui/core/colors/deepOrange';
+
+export const defaultChartColor = deepOrange[300];
+export const theme = createMuiTheme({
+    palette: {
+        primary: {
+            light: orange[300],
+            main: orange[500],
+            dark: orange[700],
+            contrastText: "#fff"
+        }
+    },
+    typography: {
+        useNextVariants: true,
+    }
+});