Initial Commit ⭐

.compilerc

@@ -0,0 +1,46 @@
+{
+  "env": {
+    "development": {
+      "text/typescript": {
+        "removeComments": false,
+        "preserveConstEnums": true,
+        "declaration": true,
+        "noImplicitAny": true,
+        "noImplicitReturns": true,
+        "suppressImplicitAnyIndexErrors": true,
+        "strictNullChecks": true,
+        "noUnusedLocals": true,
+        "noImplicitThis": true,
+        "noUnusedParameters": true,
+        "inlineSourceMap": true,
+        "inlineSources": true,
+        "importHelpers": true,
+        "noEmitHelpers": true,
+        "experimentalDecorators": true,
+        "target": "es2015",
+        "module": "commonjs",
+        "jsx": "react"
+      }
+    },
+    "production": {
+      "text/typescript": {
+        "removeComments": false,
+        "preserveConstEnums": true,
+        "declaration": true,
+        "noImplicitAny": true,
+        "noImplicitReturns": true,
+        "suppressImplicitAnyIndexErrors": true,
+        "strictNullChecks": true,
+        "noUnusedLocals": true,
+        "noImplicitThis": true,
+        "noUnusedParameters": true,
+        "sourceMap": false,
+        "importHelpers": true,
+        "noEmitHelpers": true,
+        "experimentalDecorators": true,
+        "target": "es2015",
+        "jsx": "react"
+      }
+    }
+  }
+}

.gitignore

@@ -0,0 +1,6 @@
+node_modules
+out
+secrets.ts
+.idea
+misrcon.db
+logs

README.md

@@ -0,0 +1,13 @@
+# Electron TS React Redux
+> Electron React Redux Typescript Boilerplate to quickly launch apps
+
+It's mostly based off of electron-forge with a few of my custom changes for react-typescript-redux development
+
+# Scripts
+* start `electron-forge start`
+* package `electron-forge package`
+* make `electron-forge make`
+* publish `electron-forge publish`
+* repl `ts-node src/repl.ts`
+    * Handy for development when checking out ideas
+* lint `tslint --project tsconfig.json --type-check --force`

jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+};

package.json

@@ -0,0 +1,120 @@
+{
+  "name": "batch-create-items",
+  "productName": "Batch Create XMLs",
+  "version": "0.0.1",
+  "description": "Batch create items from XML",
+  "main": "src/index.ts",
+  "scripts": {
+    "start": "electron-forge start",
+    "package": "electron-forge package",
+    "make": "electron-forge make",
+    "publish": "electron-forge publish",
+    "repl": "ts-node src/repl.ts",
+    "lint": "tslint --project tsconfig.json --type-check --force",
+    "test": "jest"
+  },
+  "keywords": [
+    "batch-create-items"
+  ],
+  "author": {
+    "name": "Chris Sprance",
+    "email": "chrissprance@gmail.com",
+    "url": "https://github.com/csprance"
+  },
+  "license": "MIT",
+  "config": {
+    "forge": {
+      "make_targets": {
+        "win32": [
+          "wix"
+        ],
+        "darwin": [
+          "zip"
+        ],
+        "linux": [
+          "deb",
+          "rpm"
+        ]
+      },
+      "electronPackagerConfig": {
+        "packageManager": "yarn",
+        "icon": "src/resources/icon"
+      },
+      "electronWinstallerConfig": {
+        "name": "Batch Create XMLs"
+      },
+      "electronWixMSIConfig": {
+
+      },
+      "electronInstallerDebian": {},
+      "electronInstallerRedhat": {},
+      "github_repository": {
+        "owner": "csprance",
+        "name": "batch-create-items"
+      },
+      "windowsStoreConfig": {
+        "packageName": "batch-create-items",
+        "name": "Batch Create XMLs"
+      }
+    }
+  },
+  "dependencies": {
+    "@material-ui/core": "^3.3.2",
+    "@material-ui/icons": "^3.0.1",
+    "@trodi/electron-splashscreen": "^0.3.1",
+    "@types/react-responsive": "^3.0.2",
+    "brace": "^0.11.1",
+    "csv-parse": "^3.1.3",
+    "electron": "3.0.2",
+    "electron-compile": "^6.4.3",
+    "electron-devtools-installer": "^2.2.4",
+    "history": "^4.7.2",
+    "react": "^16.5.2",
+    "react-ace": "^6.2.0",
+    "react-dom": "^16.5.2",
+    "react-hot-loader": "^4.3.11",
+    "react-redux": "^5.1.0",
+    "react-responsive": "^6.0.0",
+    "react-router": "^4.3.1",
+    "react-router-dom": "^4.3.1",
+    "react-router-redux": "^4.0.8",
+    "redux": "^4.0.0",
+    "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.3.0",
+    "reflect-metadata": "^0.1.12",
+    "reselect": "^4.0.0",
+    "store": "^2.0.12",
+    "styled-components": "^4.0.1",
+    "sweetalert": "^2.1.2",
+    "tslib": "^1.9.3",
+    "typesafe-actions": "^2.0.4",
+    "winston": "^3.1.0"
+  },
+  "devDependencies": {
+    "@types/electron-devtools-installer": "^2.2.0",
+    "@types/history": "^4.7.0",
+    "@types/jest": "^23.3.8",
+    "@types/node": "^10.11.4",
+    "@types/react": "^16.4.16",
+    "@types/react-dom": "^16.0.8",
+    "@types/react-hot-loader": "^4.1.0",
+    "@types/react-redux": "^6.0.9",
+    "@types/react-router": "^4.0.31",
+    "@types/react-router-dom": "^4.3.1",
+    "@types/react-router-redux": "^5.0.16",
+    "@types/redux-logger": "^3.0.6",
+    "@types/store": "^2.0.0",
+    "@types/styled-components": "^4.0.3",
+    "electron-forge": "^5.2.2",
+    "electron-prebuilt-compile": "3.0.2",
+    "electron-squirrel-startup": "^1.0.0",
+    "electron-wix-msi": "^2.1.1",
+    "jest": "^23.6.0",
+    "ts-jest": "^23.10.4",
+    "ts-node": "^7.0.1",
+    "tslint": "^5.11.0",
+    "tslint-config-prettier": "^1.15.0",
+    "tslint-react": "^3.6.0",
+    "typescript": "^3.1.4"
+  }
+}

src/@types/global.d.ts

@@ -0,0 +1,6 @@
+interface Window {
+  __REDUX_DEVTOOLS_EXTENSION__: any;
+  __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: any;
+  __REACT_DEVTOOLS_GLOBAL_HOOK__: any;
+  wcs: any;
+}

src/app.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { MemoryRouter as Router, Route, Switch } from 'react-router';
+import { Store } from 'redux';
+
+// Functions
+// Containers
+import HomePage from './containers/HomePage';
+// Redux
+import { Dispatch } from './redux/redux-types';
+
+type Props = {
+  dispatch: Dispatch;
+  store: Store;
+};
+type State = {};
+class WrappedApp extends React.Component<Props, State> {
+  public async componentDidMount() {
+    // Dispatch initial app load actions here
+    // const { dispatch } = this.props;
+  }
+
+
+  public render() {
+    return (
+      <Router>
+        <Switch>
+          <Route exact path={'/'} component={HomePage} />
+        </Switch>
+      </Router>
+    );
+  }
+}
+export const App = WrappedApp;

src/components/MonacoEditor.tsx

@@ -0,0 +1,152 @@
+import * as monaco from 'monaco-editor';
+import * as React from 'react';
+
+export function processSize(size: string) {
+  return !/^\d+$/.test(size) ? size : `${size}px`;
+}
+
+type State = {};
+type Props = {
+  language: string;
+  height: string;
+  width: string;
+  theme: any;
+  editorDidMount: any;
+  editorWillMount: any;
+  onChange: any;
+  defaultValue: any;
+  options: any;
+  value: string | null;
+};
+class MonacoEditor extends React.Component<Props, State> {
+  static defaultProps: Props = {
+    width: '100%',
+    height: '100%',
+    value: null,
+    defaultValue: '',
+    language: 'javascript',
+    theme: null,
+    options: {},
+    editorDidMount: () => false,
+    editorWillMount: () => false,
+    onChange: () => false
+  };
+  containerElement: HTMLElement | undefined;
+  __current_value: string | null;
+  editor: any;
+  __prevent_trigger_change_event: any;
+
+  constructor(props: Props) {
+    super(props);
+    this.containerElement = undefined;
+    this.__current_value = props.value;
+  }
+
+  componentDidMount() {
+    this.initMonaco();
+  }
+
+  componentDidUpdate(prevProps: Props) {
+    if (this.props.value !== this.__current_value) {
+      // Always refer to the latest value
+      this.__current_value = this.props.value;
+      // Consider the situation of rendering 1+ times before the editor mounted
+      if (this.editor) {
+        this.__prevent_trigger_change_event = true;
+        this.editor.setValue(this.__current_value);
+        this.__prevent_trigger_change_event = false;
+      }
+    }
+    if (prevProps.language !== this.props.language) {
+      monaco.editor.setModelLanguage(
+        this.editor.getModel(),
+        this.props.language
+      );
+    }
+    if (prevProps.theme !== this.props.theme) {
+      monaco.editor.setTheme(this.props.theme);
+    }
+    if (
+      this.editor &&
+      (this.props.width !== prevProps.width ||
+        this.props.height !== prevProps.height)
+    ) {
+      this.editor.layout();
+    }
+  }
+
+  componentWillUnmount() {
+    this.destroyMonaco();
+  }
+
+  editorWillMount() {
+    const { editorWillMount } = this.props;
+    const options = editorWillMount(monaco);
+    return options || {};
+  }
+
+  editorDidMount(editor: any) {
+    this.props.editorDidMount(editor, monaco);
+    editor.onDidChangeModelContent((event: any) => {
+      const value = editor.getValue();
+
+      // Always refer to the latest value
+      this.__current_value = value;
+
+      // Only invoking when user input changed
+      if (!this.__prevent_trigger_change_event) {
+        this.props.onChange(value, event);
+      }
+    });
+  }
+
+  initMonaco() {
+    const value =
+      this.props.value !== null ? this.props.value : this.props.defaultValue;
+    const { language, theme, options } = this.props;
+    if (this.containerElement) {
+      // Before initializing monaco editor
+      Object.assign(options, this.editorWillMount());
+      this.editor = monaco.editor.create(this.containerElement, {
+        value,
+        language,
+        ...options
+      });
+      if (theme) {
+        monaco.editor.setTheme(theme);
+      }
+      // After initializing monaco editor
+      this.editorDidMount(this.editor);
+    }
+  }
+
+  destroyMonaco() {
+    if (typeof this.editor !== 'undefined') {
+      this.editor.dispose();
+    }
+  }
+
+  assignRef = (component: any) => {
+    this.containerElement = component;
+  };
+
+  render() {
+    const { width, height } = this.props;
+    const fixedWidth = processSize(width);
+    const fixedHeight = processSize(height);
+    const style = {
+      width: fixedWidth,
+      height: fixedHeight
+    };
+
+    return (
+      <div
+        ref={this.assignRef}
+        style={style}
+        className="react-monaco-editor-container"
+      />
+    );
+  }
+}
+
+export default MonacoEditor;