nathan

lab-nathan/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "react"]
+}

lab-nathan/.eslintrc.json

@@ -0,0 +1,8 @@
+{
+    "extends": ["eslint:recommended", "plugin:react/recommended"],
+    "parser": "babel-eslint",
+    "env": {
+        "browser": true,
+        "node": true
+    }
+}

lab-nathan/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.vscode
+build

lab-nathan/README.md

@@ -0,0 +1,3 @@
+# Note Writer
+
+A web application built on React for creating and managing notes.

lab-nathan/index.js

@@ -0,0 +1,44 @@
+const {app, BrowserWindow} = require('electron')
+const path = require('path')
+const url = require('url')
+
+// Keep a global reference of the window object, if you don't, the window will
+// be closed automatically when the JavaScript object is garbage collected.
+let browserWindow
+
+function createWindow () {
+  browserWindow = new BrowserWindow();
+  browserWindow.loadURL(url.format({
+    pathname: path.join(__dirname, '/build/electron.html'),
+    protocol: 'file:',
+    slashes: true
+  }))
+  browserWindow.on('closed', () => {
+    // Dereference the window object, usually you would store windows
+    // in an array if your app supports multi windows, this is the time
+    // when you should delete the corresponding element.
+    browserWindow = null
+  })
+}
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.on('ready', createWindow)
+
+// Quit when all windows are closed.
+app.on('window-all-closed', () => {
+  // On macOS it is common for applications and their menu bar
+  // to stay active until the user quits explicitly with Cmd + Q
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', () => {
+  // On macOS it's common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (browserWindow === null) {
+    createWindow()
+  }
+})

lab-nathan/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "lab-nathan",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "build": "webpack",
+    "watch": "webpack-dev-server --inline --hot",
+    "electron": "webpack && electron ."
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "css-loader": "^0.28.5",
+    "electron": "^1.7.5",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "html-webpack-plugin": "^2.30.1",
+    "node-sass": "^4.5.3",
+    "prop-types": "^15.5.10",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "react-router-dom": "^4.1.2",
+    "react-scrollbar": "^0.5.1",
+    "sass-loader": "^6.0.6",
+    "uuid": "^3.1.0",
+    "webpack": "^3.5.5",
+    "webpack-dev-server": "^2.7.1"
+  },
+  "devDependencies": {
+    "babel-eslint": "^7.2.3",
+    "eslint": "^4.5.0",
+    "eslint-config-standard": "^10.2.1",
+    "eslint-plugin-import": "^2.7.0",
+    "eslint-plugin-node": "^5.1.1",
+    "eslint-plugin-promise": "^3.5.0",
+    "eslint-plugin-react": "^7.3.0",
+    "eslint-plugin-standard": "^3.0.1"
+  }
+}

lab-nathan/src/component/app-main/_app-main.scss

@@ -0,0 +1,11 @@
+#app-main {
+  background-color: #1E1E1E;
+  color: #f1f1f1;
+  flex: 1;
+}
+
+input[type=text] {
+  background-color: transparent;
+  display: block;
+  border: 0;
+}

lab-nathan/src/component/app-main/app-main.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Route } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import NoteEditor from '../note-editor/note-editor.js'
+import './_app-main.scss';
+
+class AppMain extends React.Component {
+  render() {
+    return (
+      <section id='app-main'>
+        <Route path='*' component={() => <NoteEditor app={this.props.app} />} />
+      </section>
+    );
+  }
+}
+
+AppMain.propTypes = {
+  app: PropTypes.object
+};
+
+export default AppMain;

lab-nathan/src/component/app-sidebar/_app-sidebar.scss

@@ -0,0 +1,84 @@
+.app-sidebar {
+  display: flex;
+  flex-direction: column;
+  background-color: #252526;
+  min-width: 300px;
+  width: 20%;
+}
+
+.area {
+  flex: 1;
+}
+
+.scrollarea-content {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  position: relative;
+}
+
+.scrollarea-content:focus {
+  outline: 0;
+}
+
+.scrollarea {
+  position: relative;
+  overflow: hidden;
+}
+
+.scrollbar-container:hover {
+  opacity: .4;
+}
+
+.vertical {
+  width: 15px;
+  height: 100%;
+  right: 0;
+  top: 0;
+}
+
+.vertical .scrollbar {
+  width: 15px;
+  height: 20px;
+  background: black;
+  margin-left: 1px;
+}
+
+.scrollbar-container {
+  position: absolute;
+  background: none;
+  opacity: 0.1;
+  z-index: 9999;
+  -webkit-transition: all .2s;
+  -moz-transition: all .2s;
+  -ms-transition: all .2s;
+  -o-transition: all .2s;
+  transition: all .2s;
+}
+
+.sidebar-header {
+  background: #333;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2);
+}
+
+.sidebar-header-title {
+  flex: 1;
+  margin: 0;
+  padding: 10px 15px 9px 15px;  
+  vertical-align: middle;
+  color: #888;
+}
+
+.sidebar-header-create {
+  display: inline-block;
+  margin: 0;
+  vertical-align: middle;
+  padding: 0 15px;
+}
+
+h3 {
+  margin: 0;
+}

lab-nathan/src/component/app-sidebar/app-sidebar.js

@@ -0,0 +1,41 @@
+import './_app-sidebar.scss';
+import React from 'react';
+import PropTypes from 'prop-types';
+import ScrollArea from 'react-scrollbar/dist/no-css';
+import { Link } from 'react-router-dom';
+import NoteList from '../note-list/note-list.js';
+
+class AppSidebar extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick() {
+    this.props.app.setState({ selectedNote: null });
+  }
+
+  render() {
+    return (
+      <section className='app-sidebar'>
+        <div className='sidebar-header'>
+          <h4 className='sidebar-header-title'>NOTES</h4>
+          <h2 className='sidebar-header-create' onClick={this.handleClick}>
+            <Link to='/'>+</Link>
+          </h2>
+        </div>
+        <ScrollArea
+          className="area">
+          <NoteList app={this.props.app} />
+        </ScrollArea>
+      </section>
+    );
+  }
+}
+
+AppSidebar.propTypes = {
+  app: PropTypes.object
+};
+
+export default AppSidebar;

lab-nathan/src/component/note-editor/_note-editor.scss

@@ -0,0 +1,35 @@
+.separator {
+  height: 1px;
+  background: #444;
+}
+
+.noteEditor {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;  
+}
+
+textarea {
+  width: 100%;
+  padding: 20px 35px;
+  font-size: 1.25rem;
+  background: transparent;
+  resize: none;
+  outline: none;
+  border-width: 0;
+  color: #ccc;
+  font-family: helvetica, sans-serif;
+  box-sizing: border-box;
+
+}
+
+input[name=name] {
+  color: #ccc;
+  padding: 0.5rem;
+  outline: none;
+  font-size: 2rem;
+  box-sizing: border-box;  
+  padding: 35px 35px 7px 35px;
+  font-weight: bold;
+  width: 100%;
+}