Icon paths

.eslintignore

@@ -1,3 +1,3 @@
-node_modules
-dist
-out
+node_modules
+dist
+out

package.json

@@ -16,6 +16,7 @@
     "build:main": "webpack --config webpack.main.config.js --mode production",
     "build:renderer": "webpack --config webpack.renderer.config.js --mode production",
     "build:dev-renderer": "webpack --mode development --config webpack.renderer.config.js",
+    "generate:imgPaths": "ts-node scripts/createImgConstFiles.ts && npm run eslint:fix",
     "watch": "nf start",
     "watch:main": "webpack --mode development --watch --config webpack.main.config",
     "watch:renderer": "webpack-dev-server --config webpack.renderer.config.js",
@@ -33,6 +34,7 @@
     "time tracking"
   ],
   "devDependencies": {
+    "@types/lodash": "^4.14.136",
     "@types/node": "^12.6.8",
     "@types/react": "^16.8.23",
     "@types/react-dom": "^16.8.5",
@@ -53,6 +55,7 @@
     "lint-staged": "^9.2.1",
     "nodemon": "^1.19.1",
     "prettier": "^1.18.2",
+    "ts-node": "^8.3.0",
     "typescript": "^3.5.3",
     "typescript-eslint-parser": "^22.0.0",
     "uglifyjs-webpack-plugin": "^2.1.3",
@@ -65,6 +68,7 @@
     "electron-devtools-installer": "^2.2.4",
     "foreman": "^3.0.1",
     "html-webpack-plugin": "^3.2.0",
+    "lodash": "^4.17.15",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-redux": "^7.1.0",
@@ -81,4 +85,4 @@
       ]
     }
   }
-}
+}

scripts/createImgConstFiles.ts

@@ -0,0 +1,54 @@
+/**
+ * A quick utility file to create a constants file for importing each icon
+ * This is designed to be re-ran when new icons are added
+ */
+const fs = require("fs");
+const path = require("path");
+const fp = require("lodash/fp");
+const _ = require("lodash");
+
+const imgPaths = path.join(__dirname, "..", "src", "imgs");
+const constantsFile = path.join(
+  __dirname,
+  "..",
+  "src",
+  "constants",
+  "imgPaths.ts"
+);
+const editorIcons = path.join(imgPaths, "editor-icons");
+
+const dir: Array<string> = fs.readdirSync(editorIcons);
+const getFileVarName = fp.compose(
+  _.camelCase,
+  filename =>
+    filename
+      .split(".")
+      .slice(0, -1)
+      .join(".")
+);
+
+const getFileRelPath = filename => `../imgs/editor-icons/${filename}`;
+const importStatements = dir
+  .map(
+    filename =>
+      `import ${getFileVarName(filename)} from "${getFileRelPath(filename)}";`
+  )
+  .join("\n");
+const exportStatements = dir
+  .map(
+    filename =>
+      `export const ${getFileVarName(filename)}Path = ${getFileVarName(
+        filename
+      )}`
+  )
+  .join(";\n");
+const fileOutput = `${importStatements}
+
+${exportStatements}
+
+`;
+
+if (fs.existsSync(constantsFile)) {
+  fs.unlinkSync(constantsFile);
+}
+fs.writeFileSync(constantsFile, fileOutput, "UTF8");

src/components/AllIconImgs.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import * as allIconImgs from "../constants/imgPaths";
+
+function AllIconImgs() {
+  const style = {
+    height: 50,
+    width: 50,
+    padding: 10
+  };
+  const disabledStyle = {
+    ...style,
+    opacity: 0.3
+  };
+  return (
+    <div>
+      {Object.keys(allIconImgs).map(iconName => (
+        <div key={iconName}>
+          <img style={style} src={allIconImgs[iconName]} alt={iconName} />
+          <img
+            style={disabledStyle}
+            src={allIconImgs[iconName]}
+            alt={iconName}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default AllIconImgs;

src/constants/imgPaths.ts

@@ -0,0 +1,121 @@
+import androidStudio128 from "../imgs/editor-icons/android-studio-128.png";
+import appcode128 from "../imgs/editor-icons/appcode-128.png";
+import aptana128 from "../imgs/editor-icons/aptana-128.png";
+import atom128 from "../imgs/editor-icons/atom-128.png";
+import blender128 from "../imgs/editor-icons/blender-128.png";
+import brackets128 from "../imgs/editor-icons/brackets-128.png";
+import chrome128 from "../imgs/editor-icons/chrome-128.png";
+import clion128 from "../imgs/editor-icons/clion-128.png";
+import cloud9128 from "../imgs/editor-icons/cloud9-128.png";
+import coda128 from "../imgs/editor-icons/coda-128.png";
+import codeblocks128 from "../imgs/editor-icons/codeblocks-128.png";
+import codetasty128 from "../imgs/editor-icons/codetasty-128.png";
+import datagrip128 from "../imgs/editor-icons/datagrip-128.png";
+import eclipse128 from "../imgs/editor-icons/eclipse-128.png";
+import emacs128 from "../imgs/editor-icons/emacs-128.png";
+import embarcaderoDelphi128 from "../imgs/editor-icons/embarcadero-delphi-128.png";
+import emeditor128 from "../imgs/editor-icons/emeditor-128.png";
+import eric128 from "../imgs/editor-icons/eric-128.png";
+import firefox128 from "../imgs/editor-icons/firefox-128.png";
+import flashBuilder128 from "../imgs/editor-icons/flash-builder-128.png";
+import geany128 from "../imgs/editor-icons/geany-128.png";
+import gedit128 from "../imgs/editor-icons/gedit-128.png";
+import goland128 from "../imgs/editor-icons/goland-128.png";
+import intellijIdea128 from "../imgs/editor-icons/intellij-idea-128.png";
+import kakoune128 from "../imgs/editor-icons/kakoune-128.png";
+import kate128 from "../imgs/editor-icons/kate-128.png";
+import komodo128 from "../imgs/editor-icons/komodo-128.png";
+import lightTable128 from "../imgs/editor-icons/light-table-128.png";
+import macrabbitEspresso128 from "../imgs/editor-icons/macrabbit-espresso-128.png";
+import monodevelop128 from "../imgs/editor-icons/monodevelop-128.png";
+import netbeans128 from "../imgs/editor-icons/netbeans-128.png";
+import notepad128 from "../imgs/editor-icons/notepad++-128.png";
+import notepadPlus256 from "../imgs/editor-icons/notepad-plus-256.png";
+import photoshop128 from "../imgs/editor-icons/photoshop-128.png";
+import phpstorm128 from "../imgs/editor-icons/phpstorm-128.png";
+import processing128 from "../imgs/editor-icons/processing-128.png";
+import pycharm128 from "../imgs/editor-icons/pycharm-128.png";
+import pymakr128 from "../imgs/editor-icons/pymakr-128.png";
+import qtcreator128 from "../imgs/editor-icons/qtcreator-128.png";
+import rider128Light from "../imgs/editor-icons/rider-128.light.png";
+import rider128 from "../imgs/editor-icons/rider-128.png";
+import rstudio128 from "../imgs/editor-icons/rstudio-128.png";
+import rubymine128 from "../imgs/editor-icons/rubymine-128.png";
+import sketch128 from "../imgs/editor-icons/sketch-128.png";
+import sqlOperationsStudio128 from "../imgs/editor-icons/sql-operations-studio-128.png";
+import sqlServerManagementStudio128 from "../imgs/editor-icons/sql-server-management-studio-128.png";
+import sublimeText128 from "../imgs/editor-icons/sublime-text-128.png";
+import terminal128 from "../imgs/editor-icons/terminal-128.png";
+import texstudio128 from "../imgs/editor-icons/texstudio-128.png";
+import textmate128 from "../imgs/editor-icons/textmate-128.png";
+import unity128 from "../imgs/editor-icons/unity-128.png";
+import vim128 from "../imgs/editor-icons/vim-128.png";
+import visualStudio128 from "../imgs/editor-icons/visual-studio-128.png";
+import visualStudio470 from "../imgs/editor-icons/visual-studio-470.png";
+import visualStudioForMac128 from "../imgs/editor-icons/visual-studio-for-mac-128.png";
+import vsCode128 from "../imgs/editor-icons/vs-code-128.png";
+import webmatrix128 from "../imgs/editor-icons/webmatrix-128.png";
+import webstorm128 from "../imgs/editor-icons/webstorm-128.png";
+import xamarin128 from "../imgs/editor-icons/xamarin-128.png";
+import xcode128 from "../imgs/editor-icons/xcode-128.png";
+
+export const androidStudio128Path = androidStudio128;
+export const appcode128Path = appcode128;
+export const aptana128Path = aptana128;
+export const atom128Path = atom128;
+export const blender128Path = blender128;
+export const brackets128Path = brackets128;
+export const chrome128Path = chrome128;
+export const clion128Path = clion128;
+export const cloud9128Path = cloud9128;
+export const coda128Path = coda128;
+export const codeblocks128Path = codeblocks128;
+export const codetasty128Path = codetasty128;
+export const datagrip128Path = datagrip128;
+export const eclipse128Path = eclipse128;
+export const emacs128Path = emacs128;
+export const embarcaderoDelphi128Path = embarcaderoDelphi128;
+export const emeditor128Path = emeditor128;
+export const eric128Path = eric128;
+export const firefox128Path = firefox128;
+export const flashBuilder128Path = flashBuilder128;
+export const geany128Path = geany128;
+export const gedit128Path = gedit128;
+export const goland128Path = goland128;
+export const intellijIdea128Path = intellijIdea128;
+export const kakoune128Path = kakoune128;
+export const kate128Path = kate128;
+export const komodo128Path = komodo128;
+export const lightTable128Path = lightTable128;
+export const macrabbitEspresso128Path = macrabbitEspresso128;
+export const monodevelop128Path = monodevelop128;
+export const netbeans128Path = netbeans128;
+export const notepad128Path = notepad128;
+export const notepadPlus256Path = notepadPlus256;
+export const photoshop128Path = photoshop128;
+export const phpstorm128Path = phpstorm128;
+export const processing128Path = processing128;
+export const pycharm128Path = pycharm128;
+export const pymakr128Path = pymakr128;
+export const qtcreator128Path = qtcreator128;
+export const rider128LightPath = rider128Light;
+export const rider128Path = rider128;
+export const rstudio128Path = rstudio128;
+export const rubymine128Path = rubymine128;
+export const sketch128Path = sketch128;
+export const sqlOperationsStudio128Path = sqlOperationsStudio128;
+export const sqlServerManagementStudio128Path = sqlServerManagementStudio128;
+export const sublimeText128Path = sublimeText128;
+export const terminal128Path = terminal128;
+export const texstudio128Path = texstudio128;
+export const textmate128Path = textmate128;
+export const unity128Path = unity128;
+export const vim128Path = vim128;
+export const visualStudio128Path = visualStudio128;
+export const visualStudio470Path = visualStudio470;
+export const visualStudioForMac128Path = visualStudioForMac128;
+export const vsCode128Path = vsCode128;
+export const webmatrix128Path = webmatrix128;
+export const webstorm128Path = webstorm128;
+export const xamarin128Path = xamarin128;
+export const xcode128Path = xcode128;

src/containers/index.tsx

@@ -1,13 +1,11 @@
 import * as React from "react";
 import { render } from "react-dom";
-import imgPath from "../imgs/editor-icons/blender-128.png";
+import AllIconImgs from "../components/AllIconImgs";
 
 const div = document.getElementById("container");
-
 render(
   <div>
-    Hello World
-    <img src={imgPath} alt="Test example of a png imported" />
+    <AllIconImgs />
   </div>,
   div
 );

tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "esModuleInterop": true,
     "module": "commonjs",
     "target": "ES5",
     "outDir": "out",

webpack.main.config.js

@@ -22,7 +22,10 @@ module.exports = {
         exclude: /node_modules/,
         use: [
           {
-            loader: "ts-loader"
+            loader: "ts-loader",
+            options: {
+              configFile: "webpack.tsconfig.json"
+            }
           }
         ]
       }

webpack.renderer.config.js

@@ -25,10 +25,7 @@ module.exports = {
         exclude: /node_modules/,
         use: [
           {
-            loader: "ts-loader",
-            options: {
-              configFile: "webpack.tsconfig.json"
-            }
+            loader: "ts-loader"
           }
         ]
       },

webpack.tsconfig.json

@@ -1,6 +1,5 @@
 {
   "compilerOptions": {
-    "esModuleInterop": true,
     "module": "commonjs",
     "target": "ES5",
     "outDir": "out",