load Markdown, Alert, render from core

Author: ShMcK

lib/components/SidePanel/SidePanel.js

@@ -24,12 +24,12 @@ var SidePanel = (function (_super) {
         _super.apply(this, arguments);
     }
     SidePanel.prototype.render = function () {
-        var windowToggle = this.props.windowToggle;
-        return (React.createElement("section", null, React.createElement(Drawer_1.default, {width: 400, openSecondary: true, open: windowToggle}, React.createElement("div", {className: 'cr-bg'}, React.createElement(index_1.AppMenu, null), React.createElement(Routes_1.default, null))), React.createElement(index_1.Alert, null)));
+        var isWindowOpen = this.props.isWindowOpen;
+        return (React.createElement("section", null, React.createElement(Drawer_1.default, {width: 400, openSecondary: true, open: isWindowOpen}, React.createElement("div", {className: 'cr-bg'}, React.createElement(index_1.AppMenu, null), React.createElement(Routes_1.default, null))), React.createElement(index_1.Alert, null)));
     };
     SidePanel = __decorate([
         react_redux_1.connect(function (state) { return ({
-            windowToggle: state.windowToggle,
+            isWindowOpen: state.window,
         }); }), 
         __metadata('design:paramtypes', [])
     ], SidePanel);

lib/components/Start/Welcome/index.js

@@ -27,6 +27,9 @@ var styles = {
         textShadow: '1px 1px 0px #000',
     },
 };
-var Welcome = function () { return (React.createElement("div", {style: styles.header, className: 'cr-bg'}, React.createElement("div", {style: styles.title}, "CodeRoad"), React.createElement("div", {style: styles.tagline}, "Tutorials in your Editor"), React.createElement("br", null), React.createElement("br", null), React.createElement(index_1.RouteButton, {label: 'Start', route: 'tutorials', style: styles.button}))); };
+var Welcome = function (_a) {
+    var title = _a.title, tagline = _a.tagline, firstRoute = _a.firstRoute;
+    return (React.createElement("div", {style: styles.header, className: 'cr-bg'}, React.createElement("div", {style: styles.title}, title), React.createElement("div", {style: styles.tagline}, tagline), React.createElement("br", null), React.createElement("br", null), React.createElement(index_1.RouteButton, {label: 'Start', route: firstRoute, style: styles.button})));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Welcome;

lib/components/Start/index.js

@@ -30,7 +30,9 @@ var Start = (function (_super) {
     }
     Start.prototype.render = function () {
         var ready = this.props.ready;
-        return (React.createElement("section", {className: 'cr-start'}, React.createElement("div", {style: headerStyles}, ready ? React.createElement(Welcome_1.default, null) : React.createElement(Checks_1.default, null))));
+        return (React.createElement("section", {className: 'cr-start'}, React.createElement("div", {style: headerStyles}, ready
+            ? React.createElement(Welcome_1.default, {title: 'CodeRoad', tagline: 'Tutorials in your Editor', firstRoute: 'tutorials'})
+            : React.createElement(Checks_1.default, null))));
     };
     Start = __decorate([
         react_redux_1.connect(function (state) { return ({

lib/components/index.js

@@ -1,6 +1,7 @@
 "use strict";
-var Alert_1 = require('./Alert');
-exports.Alert = Alert_1.default;
+var core_coderoad_1 = require('core-coderoad');
+exports.Alert = core_coderoad_1.Alert;
+exports.Markdown = core_coderoad_1.Markdown;
 var AppMenu_1 = require('./AppMenu');
 exports.AppMenu = AppMenu_1.default;
 var FinalPage_1 = require('./FinalPage');
@@ -15,9 +16,7 @@ var Start_1 = require('./Start');
 exports.Start = Start_1.default;
 var Tutorials_1 = require('./Tutorials');
 exports.Tutorials = Tutorials_1.default;
-var Markdown_1 = require('./common/Markdown');
-exports.Markdown = Markdown_1.default;
-var ContentCard_1 = require('./common/ContentCard');
-exports.ContentCard = ContentCard_1.default;
 var RouteButton_1 = require('./common/RouteButton');
 exports.RouteButton = RouteButton_1.default;
+var ContentCard_1 = require('./common/ContentCard');
+exports.ContentCard = ContentCard_1.default;

lib/reducers.js

@@ -13,5 +13,5 @@ exports.default = redux_1.combineReducers({
     alert: core_coderoad_1.alertReducer, checks: setup_1.checks, editor: core_coderoad_1.editorReducer, dir: core_coderoad_1.dirReducer, hintPosition: hints_1.reducer,
     packageJson: setup_1.packageJson, pagePosition: page_1.pagePosition, progress: progress_1.reducer, route: core_coderoad_1.routeReducer,
     tutorial: tutorial_1.reducer, tutorials: tutorials_1.reducer,
-    taskActions: page_1.taskActions, taskPosition: tests_1.taskPosition, taskTests: page_1.taskTests, testRun: tests_1.testRun, windowToggle: core_coderoad_1.windowToggle
+    taskActions: page_1.taskActions, taskPosition: tests_1.taskPosition, taskTests: page_1.taskTests, testRun: tests_1.testRun, window: core_coderoad_1.windowReducer
 });

package.json

@@ -32,8 +32,6 @@
     "atom-plugin-command-line": "1.0.2",
     "coderoad-cli": "0.6.0",
     "core-coderoad": "0.3.0",
-    "highlights": "1.3.1",
-    "marked": "0.3.5",
     "material-ui": "0.15.0",
     "node-file-exists": "1.1.0",
     "react": "15.1.0",

src/components/Alert/index.tsx

@@ -2,6 +2,18 @@ import * as React from 'react';
 import {connect} from 'react-redux';
 import {Page, Progress, Tutorials, Start, FinalPage} from '../index';
 
+// const createRouter = (routes: Object) => {
+//   return;
+// };
+//
+// const router = {
+//   page: <Page />,
+//   progress: <Progress />,
+//   start: <Start />,
+//   tutorials: <Tutorials />,
+//   final: <FinalPage />,
+// };
+
 @connect(state => ({ route: state.route }))
 export default class Routes extends React.Component<{
   route?: string

src/components/Routes/index.tsx

@@ -6,19 +6,19 @@ import Drawer from 'material-ui/Drawer';
 import Menu from 'material-ui/svg-icons/navigation/menu';
 
 @connect(state => ({
-  windowToggle: state.windowToggle,
+  isWindowOpen: state.window,
 }))
 export default class SidePanel extends React.Component<{
-  windowToggle?: boolean
+  isWindowOpen?: boolean
 }, {}> {
   render(): React.ReactElement<{}> {
-    const {windowToggle} = this.props;
+    const {isWindowOpen} = this.props;
     return (
       <section>
         <Drawer
           width={400}
           openSecondary={true}
-          open={windowToggle}
+          open={isWindowOpen}
         >
           <div className='cr-bg'>
             <AppMenu />

src/components/SidePanel/SidePanel.tsx

@@ -32,14 +32,16 @@ const styles = {
   },
 };
 
-const Welcome: React.StatelessComponent<{}> = () => (
+const Welcome: React.StatelessComponent<{
+  title: string, tagline: string, firstRoute: string
+}> = ({title, tagline, firstRoute}) => (
   <div style={styles.header} className='cr-bg'>
-      <div style={styles.title}>CodeRoad</div>
-      <div style={styles.tagline}>Tutorials in your Editor</div>
+      <div style={styles.title}>{title}</div>
+      <div style={styles.tagline}>{tagline}</div>
       <br /><br />
       <RouteButton
         label='Start'
-        route='tutorials'
+        route={firstRoute}
         style={styles.button}
       />
   </div>

src/components/Start/Welcome/index.tsx

@@ -21,7 +21,13 @@ export default class Start extends React.Component<{
     return (
       <section className='cr-start'>
         <div style={headerStyles}>
-        {ready ? <Welcome  /> : <Checks />}
+        {ready
+          ? <Welcome
+              title='CodeRoad'
+              tagline='Tutorials in your Editor'
+              firstRoute='tutorials'
+            />
+          : <Checks />}
         </div>
       </section>
     );

src/components/Start/index.tsx

@@ -1,4 +1,7 @@
-export {default as Alert} from './Alert';
+export {
+  Alert, Markdown
+} from 'core-coderoad';
+
 export {default as AppMenu} from './AppMenu';
 export {default as FinalPage} from './FinalPage';
 export {default as Page} from './Page';
@@ -7,6 +10,5 @@ export {default as Routes} from './Routes';
 export {default as Start} from './Start';
 export {default as Tutorials} from './Tutorials';
 
-export {default as Markdown} from './common/Markdown';
-export {default as ContentCard} from './common/ContentCard';
 export {default as RouteButton} from './common/RouteButton';
+export {default as ContentCard} from './common/ContentCard';

src/components/common/Markdown.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import render from './components/render';
 import sidePanelElement from './components/SidePanel/element';
-import {loadPolyfills} from 'core-coderoad';
+import sidePanelRoot from './components/SidePanel/root';
+import {loadPolyfills, render} from 'core-coderoad';
 import {onActivate, onDeactivate, addToStatusBar} from './subscriptions';
 // activate Redux
 import store from './store';
@@ -26,7 +26,7 @@ class Main {
     });
     onActivate();
     // render React component
-    render(this.root);
+    render(this.root, sidePanelRoot(store));
   }
   consumeStatusBar(statusBar) {
     this.statusBarTile = addToStatusBar(statusBar);

src/components/index.ts

@@ -14,12 +14,12 @@ import {
   editorReducer as editor,
   dirReducer as dir,
   routeReducer as route,
-  windowToggle
+  windowReducer as window
 } from 'core-coderoad';
 
 export default combineReducers({
   alert, checks, editor, dir, hintPosition,
   packageJson, pagePosition, progress, route,
   tutorial, tutorials,
-  taskActions, taskPosition, taskTests, testRun, windowToggle
+  taskActions, taskPosition, taskTests, testRun, window
 });

src/components/render.ts

@@ -80,7 +80,6 @@
         "src/store.ts",
         "src/subscriptions.ts",
         "src/typings.d.ts",
-        "src/components/Alert/index.tsx",
         "src/components/AppMenu/CloseWindow.tsx",
         "src/components/AppMenu/index.tsx",
         "src/components/AppMenu/issuesLink.tsx",
@@ -90,7 +89,6 @@
         "src/components/AppMenu/menuRightRouteOptions.tsx",
         "src/components/AppMenu/Quit/index.tsx",
         "src/components/common/ContentCard.tsx",
-        "src/components/common/Markdown.tsx",
         "src/components/common/RouteButton.tsx",
         "src/components/FinalPage/index.tsx",
         "src/components/Page/EditPage/index.tsx",