Re-Skin Existing Application with new design using React components #76…

… (#104)

* new design
* changes to support the new design
* some more cleanup to align with react app
* dependency updates
* package cleanup
* convert to using electron-webpack
* get HMR working with render and main processes
* remove static sidebar entries
* get react-router working
* switch over to hashrouter
* setup a watcher that runs every sec watching for ddev list changes
* 1st draft error/alert handler
* update build steps to include yarn compile
* makefile updates to simplify build steps
* update readme to better reflect existing state
* linting fixes
* install jest and cypress


New App Components:
* Alert
* Alerts
* App
* AppTitle
* CreateProjectWizard
* CreateProjectWizard/CMSSettings
* CreateProjectWizard/ContainerSettings
* CreateProjectWizard/ProjectSettings
* CreateProjectWizard/Steps
* Dashboard
* Footer
* Header
* ProjectCount
* ProjectDetail
* ProjectHeader
* ProjectInfo
* ProjectList
* ProjectNavItem
* ProjectStatusIcon
* ProjectTab
* ProjectTabItem
* ProjectTypeIcon
* RouterStatus
* Sidebar
* Status
* ViewRouter

.babelrc

@@ -1,3 +1,8 @@
 {
-  "presets" : ["es2015", "react"]
-}
+  "plugins": [
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-object-rest-spread",
+    "babel-plugin-root-import"
+  ]
+}

.circleci/generate_artifacts.sh

@@ -8,11 +8,11 @@ ARTIFACTS=$1
 sudo mkdir $ARTIFACTS && sudo chmod 777 $ARTIFACTS
 
 cd dist
-cp ddev-ui* $ARTIFACTS
+cp DDEV\ UI* $ARTIFACTS
 
 # Create the sha256 files
 cd $ARTIFACTS
-for item in ddev-ui*; do
+for item in DDEV\ UI*; do
   shasum -a 256 "$item" > "$item.sha256.txt"
 done
 

.eslintrc

@@ -1,8 +1,119 @@
 {
+  "extends": ["airbnb", "prettier", "prettier/react"],
   "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 8,
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "impliedStrict": true,
+      "classes": true
+    }
+  },
   "env": {
     "browser": true,
-    "node": true
+    "node": true,
+    "jquery": true,
+    "jest": true
+  },
+  "rules": {
+    "no-debugger": 0,
+    "no-alert": 0,
+    "no-unused-vars": [
+      1,
+      {
+        "argsIgnorePattern": "res|next|^err"
+      }
+    ],
+    "prefer-const": [
+      "error",
+      {
+        "destructuring": "all"
+      }
+    ],
+    "arrow-body-style": [2, "as-needed"],
+    "no-unused-expressions": [
+      2,
+      {
+        "allowTaggedTemplates": true
+      }
+    ],
+    "no-param-reassign": [
+      2,
+      {
+        "props": false
+      }
+    ],
+    "no-console": 0,
+    "import/prefer-default-export": 0,
+    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
+    "import": 0,
+    "func-names": 0,
+    "space-before-function-paren": 0,
+    "comma-dangle": 0,
+    "max-len": 0,
+    "import/extensions": 0,
+    "no-underscore-dangle": 0,
+    "consistent-return": 0,
+    "react/display-name": 1,
+    "react/no-array-index-key": 0,
+    "react/react-in-jsx-scope": 0,
+    "react/prefer-stateless-function": 0,
+    "react/forbid-prop-types": 0,
+    "react/prop-types": 0,
+    "react/destructuring-assignment": 0,
+    "react/no-unescaped-entities": 0,
+    "react/no-did-update-set-state": 0,
+    "jsx-a11y/accessible-emoji": 0,
+    "react/jsx-filename-extension": [
+      1,
+      {
+        "extensions": [".js", ".jsx"]
+      }
+    ],
+    "radix": 0,
+    "no-shadow": [
+      2,
+      {
+        "hoist": "all",
+        "allow": ["resolve", "reject", "done", "next", "err", "error"]
+      }
+    ],
+    "quotes": [
+      2,
+      "single",
+      {
+        "avoidEscape": true,
+        "allowTemplateLiterals": true
+      }
+    ],
+    "prettier/prettier": [
+      "error",
+      {
+        "trailingComma": "es5",
+        "singleQuote": true,
+        "printWidth": 100
+      }
+    ],
+    "jsx-a11y/href-no-hash": "off",
+    "jsx-a11y/anchor-is-valid": [
+      "warn",
+      {
+        "aspects": ["invalidHref"]
+      }
+    ],
+    "jsx-a11y/label-has-for": [
+      2,
+      {
+        "components": [],
+        "required": {
+          "every": ["nesting", "id"]
+        },
+        "allowChildren": true
+      }
+    ]
   },
-  "extends": "airbnb"
-}
+  "plugins": [
+    // "html",
+    "prettier"
+  ]
+}

.gitignore

@@ -1,18 +1,19 @@
-node_modules/
-.DS_Store
-dist/
-.idea/
-
-
-# Temporary build-tools artifacts to be ignored
-/.go/
-/.gotmp/
-/bin/
-/.container*
-/.push*
-/linux
-/darwin
-/windows
-/.dockerfile
-/VERSION.txt
-/.docker_image
+node_modules
+out
+.eslintcache
+.DS_Store
+dist/
+.idea/
+
+# Temporary build-tools artifacts to be ignored
+/.go/
+/.gotmp/
+/bin/
+/.container*
+/.push*
+/linux
+/darwin
+/windows
+/.dockerfile
+/VERSION.txt
+/.docker_image

.yarnclean

@@ -0,0 +1,39 @@
+# test directories
+__tests__
+node_modules/*/test
+node_modules/*/tests
+powered-test
+
+# asset directories
+docs
+doc
+website
+images
+
+# examples
+example
+examples
+
+# code coverage directories
+coverage
+.nyc_output
+
+# build scripts
+Makefile
+Gulpfile.js
+Gruntfile.js
+
+# configs
+.tern-project
+.gitattributes
+.editorconfig
+.*ignore
+.eslintrc
+.jshintrc
+.flowconfig
+.documentup.json
+.yarn-metadata.json
+
+# misc
+*.gz
+*.md

Makefile

@@ -65,13 +65,13 @@ all: darwin linux windows
 # Build requirements
 # - wine and mono must be available to build Windows on another platform (brew install wine mono )
 
-npmstart: appstart
-
-npmsetup: appsetup
-
 appstart: appsetup
 	yarn run start
 
+package: appsetup
+	@echo "Building $@"
+	yarn run dist
+
 linux: appsetup
 	@echo "Building $@"
 	yarn run build-linux
@@ -86,10 +86,11 @@ windows: appsetup
 
 appsetup: package.json
 	yarn install
-	yarn run webpack
 
-clean:
+clean: package.json
 	rm -rf js/dist node_modules
+	yarn install
 
 test:
-	yarn run test
+	# yarn run test
+	@echo "Skipping $@ for Now 🙈"

README.md

@@ -4,22 +4,67 @@ A Graphical User Interface for the DDEV CLI (https://github.com/drud/ddev)
 
 ## Prerequisites
 
-- DDEV CLI is installed and properly working.
-- Yarn is installed globally `npm install -g yarn`.
+If you are looking to contribute to the project you will need to make sure you have the below prerequisites.
+
+#### DDEV CLI
+
+DDEV CLI is installed and properly working.
+
+#### Yarn
+
+Yarn is installed globally `npm install -g yarn`.
+
+#### Node
+
+Node -lts (v8.11.3) is installed and configured in your path.
+
+NVM - Node version manager https://github.com/creationix/nvm
+
+To install NVM
+
+```sh
+curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
+```
+
+<sub>The script clones the nvm repository to `~/.nvm` and adds the source line to your profile (`~/.bash_profile`, `~/.zshrc`, `~/.profile`, or `~/.bashrc`).</sub>
+
+```sh
+export NVM_DIR="$HOME/.nvm"
+[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
+```
+
+To Install Node -lts
+
+```sh
+nvm install --lts
+nvm use lts/*
+nvm alias default lts/*
+```
+
+To Verify
+
+```sh
+node -v
+npm -v
+```
+
+<sub>Should be **node** = `v8.11.x` and **npm** = `5.6.x`</sub>
 
 ## Run Instructions
 
 - Ensure DDEV is installed and properly working via CLI and you have valid projects installed.
+  - `make clean package` - To test with packaged app.
+  - `make clean appstart` - To test with DevTools and HMR.
 
 ## Build Instructions
 
 DDEV UI has been tested on macOS, Win7/8/10, Ubuntu 16.04+ and Fedora 25+. The following commands will output the compiled binary to /release-builds .
 
-- macOS: `make darwin`
-- windows: `make windows`
-- linux: `make linux`
+- macOS: `make clean darwin`
+- windows: `make clean windows`
+- linux: `make clean linux`
 
-While developing and testing casually locally (not for formal reviews), you may wish to skip building the full binary by running `yarn install && yarn start` in the main ddev-ui directory.
+While developing and testing casually locally (not for formal reviews), you may wish to skip building the full binary by running `make clean appstart` or using yarn `yarn install && yarn start` in the main ddev-ui directory.
 
 This will launch the ddev-ui electron app without requiring building disk images and closing/reopening the binary.
 
@@ -28,4 +73,4 @@ This will launch the ddev-ui electron app without requiring building disk images
 The planned roadmap can be found at
 https://github.com/drud/ddev-ui/wiki/Roadmap.
 
-DDEV-UI is currently at V0.2, with the exception of "Add an app from a starting distribution" from release v0.1 and "Add an app from a local repo" from release v0.2 being non-functional.
+DDEV-UI is currently at V0.3.0