use redux diff-logger

Author: ShMcK

lib/options/configureStore.js

@@ -32,15 +32,15 @@
     "atom-plugin-command-line": "1.0.2",
     "coderoad-cli": "0.10.0",
     "marked": "0.3.6",
-    "material-ui": "0.15.4",
+    "material-ui": "0.16.0",
     "node-file-exists": "1.1.0",
     "react": "15.3.2",
     "react-dom": "15.3.2",
     "react-redux": "4.4.5",
     "react-router-sans-urls": "0.1.2",
     "react-tap-event-plugin": "1.0.0",
     "redux": "3.6.0",
-    "redux-logger": "2.6.1",
+    "redux-logger": "2.7.0",
     "redux-thunk": "2.1.0",
     "reselect": "2.5.4"
   },
@@ -49,8 +49,8 @@
     "electron-chromedriver": "^1.4.0",
     "eslint": "^3.6.1",
     "eslint-plugin-react": "^6.3.0",
-    "jest": "^15.1.1",
-    "jest-cli": "^15.1.1",
+    "jest": "^16.0.1",
+    "jest-cli": "^16.0.1",
     "react-addons-test-utils": "15.3.2",
     "react-test-renderer": "15.3.2",
     "redux-mock-store": "^1.2.1",

lib/options/configureStore.js.map

@@ -0,0 +1,29 @@
+import Radium from 'radium';
+import * as React from 'react';
+
+import {Markdown} from '../index';
+import {Card, CardHeader, CardText} from 'material-ui/Card';
+
+const styles = {
+  card: {
+    margin: '5px',
+  },
+};
+
+@Radium()
+const ContentCard: React.StatelessComponent<{
+  title: string, content?: string
+}> = ({title, content}) => (
+  <Card style={styles.card}>
+    {title ? <CardHeader title={title} /> : null}
+    <CardText>
+      <Markdown children={content || ''} />
+    </CardText>
+  </Card>
+);
+export default ContentCard;
+
+// ContentCard.propTypes = {
+//   title: React.PropTypes.string,
+//   content: React.PropTypes.string.optional,
+// };

package.json

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import highlight from './syntax-highlighter';
+
+const CodeBlock: React.StatelessComponent<{
+  children: string, style?: React.CSSProperties, lang: string
+}> = ({style, children, lang}) => (
+  <pre>
+    <code
+      style={style ? style : {}}
+      dangerouslySetInnerHTML={{__html: highlight(children, lang)}}
+    />
+  </pre>
+);
+export default CodeBlock;

src/components/AppMenu/common/ContentCard.tsx

@@ -0,0 +1,16 @@
+import * as marked from 'marked';
+
+import highlight from './syntax-highlighter';
+
+const options = {
+  breaks: true,
+  gfm: true,
+  highlight,
+  tables: true,
+  sanitize: true,
+  smartLists: true,
+};
+
+export default function (text: string): string {
+  return typeof text !== 'string' ? '' : marked(text.toString(), options);
+}

src/components/AppMenu/common/Markdown/CodeBlock.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+import formatText from './formatText';
+
+const Markdown: React.StatelessComponent<{
+  children: string, style?: React.CSSProperties
+}> = ({style, children}) => (
+  <span
+    className='cr-markdown'
+    style={style ? style : {}}
+    dangerouslySetInnerHTML={{__html: formatText(children)}}
+  />
+);
+export default Markdown;

src/components/AppMenu/common/Markdown/formatText.ts

@@ -0,0 +1,42 @@
+import {editor} from '../../../index';
+
+export default function highlight(text: string, lang: string): string {
+  const scopeName = `source.${lang}`;
+  // get grammar
+  const grammar = editor.grammar.getFromScope(scopeName);
+  // no grammar, return text
+  if (!grammar) {
+    return text;
+  }
+  // get tokens
+  const lineTokens = editor.grammar.tokenizeLines(grammar, text);
+  if (lineTokens.length > 0) {
+    const lastLineTokens = lineTokens[lineTokens.length - 1];
+    if (lastLineTokens.length === 1 && lastLineTokens[0].value === '') {
+      lineTokens.pop();
+    }
+  }
+  let html = '<pre class="editor editor-colors">';
+
+  lineTokens.forEach(line => {
+    html += '<div class="line">';
+    line.forEach(({value, scopes}) => {
+      // account for spaces
+      if (!value) {
+        value = ' ';
+      }
+      // wrap text with class spans
+      scopes.forEach(scope => {
+        html += `<span class="${scope.replace(/\./g, ' ')}">`;
+      });
+      // text
+      html += `${value}`;
+      // closing tags
+      scopes.forEach(scope => {
+        html += '</span>';
+      });
+    });
+  });
+  html += '</div></pre>';
+  return html;
+}

src/components/AppMenu/common/Markdown/index.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import {connect} from 'react-redux';
+
+import {routeSet} from '../../actions';
+import RaisedButton from 'material-ui/RaisedButton';
+
+class RouteButton extends React.Component<{
+  label: string, route: string, routeSet: any, style: React.CSSProperties
+}, {}> {
+  public render() {
+    const {label, route, style, routeSet} = this.props;
+    return (
+        <RaisedButton
+          label={label}
+          style={style || {}}
+          onTouchTap={routeSet.bind(this, route)}
+          secondary={true}
+        />
+    );
+  }
+}
+
+// RouteButton.propTypes = {
+//   label: React.PropTypes.string,
+//   route: React.PropTypes.string,
+//   routeSet: React.PropTypes.func.optional,
+//   style: React.PropTypes.object.optional,
+// };
+
+const mapStateToProps = (state, props) => ({
+  label: props.label,
+  route: props.route,
+  style: props.style || {}
+});
+const mapDispatchToProps = {routeSet};
+
+export default connect(mapStateToProps, mapDispatchToProps)(RouteButton);

src/components/AppMenu/common/Markdown/syntax-highlighter.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+
+interface IStyles {
+  editor: React.CSSProperties;
+};
+
+const styles: IStyles = {
+  editor: {
+    textAlign: 'left',
+  },
+};
+
+export default class TextEditor extends React.Component<{
+  name: string, text?: string, lang: string, onSave?: () => any,
+  placeholder?: string,
+}, {}> {
+
+  // create a new TextEditor
+  public ed = atom.workspace.buildTextEditor();
+  public get(): string {
+    return this.ed.getText();
+  }
+  public render() {
+    return <div id={this.props.name} style={styles.editor} />;
+  }
+  private componentDidMount() {
+    const {name, text, lang, placeholder} = this.props;
+    // specify language
+    this.ed.setGrammar(
+      atom.grammars.grammarForScopeName(`source.${lang}`)
+    );
+    if (text) {
+      this.ed.setText(text || '');
+    }
+    if (placeholder) {
+      this.ed.setPlaceholderText(placeholder);
+    }
+    // append editor to rendered div
+    document.querySelector(`#${name}`).appendChild(this.ed.getElement());
+  }
+}