codebase update

.eslintrc

@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": "turbocharge"
+}

.gitignore

@@ -11,3 +11,4 @@ tests/test-project/*
 !tests/test-project/.gitkeep
 tsconfig.tsbuildinfo
 .cache
+eslint-config*

.prettierrc

@@ -0,0 +1 @@
+"eslint-config-turbocharge/prettier"

.travis.yml

@@ -6,18 +6,18 @@ os:
   - windows
 
 node_js:
-  - "15"
+  - '15'
   # - "15.1" #windows error on 15.0.0 invalid version
-  - "14"
-  - "14.14"
-  - "14.1"
-  - "12"
-  - "12.12"
-  - "12.0.0"
-  - "11"
-  - "11.0.0"
-  - "10"
-  - "10.13"
+  - '14'
+  - '14.14'
+  - '14.1'
+  - '12'
+  - '12.12'
+  - '12.0.0'
+  - '11'
+  - '11.0.0'
+  - '10'
+  - '10.13'
   # - "10.0.0"
   # - "9.11" # temporary disable older version in CI
   # - "8.12"
@@ -39,7 +39,7 @@ before_install:
 
 cache:
   directories:
-    - "node_modules"
+    - 'node_modules'
 
 env:
   - YARN_GPG=no

.vscode/settings.json

@@ -1,6 +1,8 @@
 {
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
-  },
-  "eslint.run": "onSave"
+    "source.fixAll": true
+  }
 }

README.md

@@ -1,42 +1,57 @@
 # [npm-gui](http://q-nick.github.io/npm-gui/)
 
 [![Build Status](https://travis-ci.org/q-nick/npm-gui.svg)](https://travis-ci.org/q-nick/npm-gui) <a href="https://www.npmjs.com/package/npm-gui"><img src="https://img.shields.io/npm/dm/npm-gui.svg" alt="Downloads"></a> <a href="https://www.npmjs.com/package/npm-gui"><img src="https://img.shields.io/npm/v/npm-gui.svg" alt="Version"></a> <a href="https://www.npmjs.com/package/npm-gui"><img src="https://img.shields.io/npm/l/npm-gui.svg" alt="License"></a>
+
 #
+
 ![npm-gui main screen](https://github.com/q-nick/npm-gui/raw/gh-pages/screen-1-0-0.png)
+
 #
+
 ## About
-`npm-gui` is a handy tool for managing javascript project dependencies, which are listed in `package.json`. Under the hood it will use transparently `npm`, `bower` or `yarn` commands to install, remove or update dependencies
-(*to use **yarn** it requires **yarn.lock** file to be present in project folder.*)
 
+`npm-gui` is a handy tool for managing javascript project dependencies, which are listed in `package.json`. Under the hood it will use transparently `npm`, `bower` or `yarn` commands to install, remove or update dependencies
+(_to use **yarn** it requires **yarn.lock** file to be present in project folder._)
 
 ### **npm-gui** key features:
+
 - global dependencies management
 - project dependencies management
 - project scripts runner
 - npm, yarn, bower support
 
 #
+
 ## Getting Started
+
 Simplest way to run `npm-gui` is by using <a href="https://www.npmjs.com/package/npx">`npx`</a>:
+
 ```
 ~/$ npx npm-gui
 ```
+
 It will run the newest version of `npm-gui` without installing it on your system.
 
 ### Installation
+
 `npm-gui` could also be installed as global dependency:
+
 ```
 npm install -g npm-gui
 ```
+
 or locally:
+
 ```
 npm install npm-gui
 ```
 
 ### How to use
+
 `npm-gui` app will be accessible in browser under address http://localhost:1337/. Remember to first use a command below:
 
 When installed as global dependency you could run `npm-gui` with command line:
+
 ```
 ~/$ npm-gui
 ```
@@ -45,53 +60,65 @@ Then you could navigate to folder containing your javascript project (including
 ![](https://raw.githubusercontent.com/q-nick/npm-gui/gh-pages/video/navigation.gif)
 
 Or you could run `npm-gui` command in you desired folder:
+
 ```
 ~/workspace/project1$ npm-gui
 ```
+
 If you need to start app on another `host/port`, you could add `host:port` argument to command for example:
+
 ```
 ~/$ npm-gui localhost:9000
 ```
 
 #### Starting
 
 #### Navigating between projects
+
 To change project press **folder icon** in top-right corner. Navigation panel will allow you to change folder - it must contain **yarn.lock, package.json or bower.json** file to be choosen.
 
 ![](https://raw.githubusercontent.com/q-nick/npm-gui/gh-pages/video/navigation.gif)
 
 #### Installing new dependencies
+
 To install new dependency you can use **search/add button**. After typing name of the dependency in input - press search button - results will appear on list below. You can switch here between **npm/bower** repository. You must also decide will dependency be installed as production or development. After successful installation of new dependency it will appear on project list.
 
 ![](https://raw.githubusercontent.com/q-nick/npm-gui/gh-pages/video/installing.gif)
 
 #### Removing dependencies
+
 To remove dependency from your project simply press **trash icon** on the right.
 
 ![](https://raw.githubusercontent.com/q-nick/npm-gui/gh-pages/video/removing.gif)
 
 #### Updating selected dependencies
+
 - TODO
 
 #### Updating all dependencies as...
-To do a batch dependencies update and save new versions to package.json, for example *wanted*, press one of the green button above list of project dependencies.
+
+To do a batch dependencies update and save new versions to package.json, for example _wanted_, press one of the green button above list of project dependencies.
 
 ![](https://raw.githubusercontent.com/q-nick/npm-gui/gh-pages/video/batch-update.gif)
 
 #### Running scripts
+
 - TODO
 
 #### Removing scripts
+
 - TODO
 
 #### Enlarging console log
+
 To get more readable log you can use enlarge button which will change width of console.
 
 Consoles are not self-closing they will be visible until you close them with **remove button**
 
 ![](https://raw.githubusercontent.com/q-nick/npm-gui/gh-pages/video/console.gif)
 
-
 #
+
 ## Authors and Contributors
+
 @q-nick

TODO

@@ -1,6 +1,6 @@
-WATCH FILE CHANGES IN NODE_MODULES / BOWER_COMPONENTS and update cache
-
+WATCH FILE CHANGES IN NODE_MODULES and update cache
 
+Updates history (in browser)
 
 
 new project initialization - later

client/.eslintrc

@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": "turbocharge/react"
+}

client/app/App.tsx

@@ -1,17 +1,23 @@
+import 'open-iconic/font/css/open-iconic.css';
+
 import {
-  Route, Switch,
   BrowserRouter as Router,
   Redirect,
+  Route,
+  Switch,
 } from 'react-router-dom';
-import 'open-iconic/font/css/open-iconic.css';
-import { Project } from '../components/Project';
+
 import { Global } from '../components/Global';
-import { StoreContext, useStoreContextValue } from './StoreContext';
-import { ScheduleContext, useScheduleContextValue } from '../components/Schedule/ScheduleContext';
 import { Info } from '../components/Info';
+import { Project } from '../components/Project';
 import { Schedule } from '../components/Schedule/Schedule';
+import {
+  ScheduleContext,
+  useScheduleContextValue,
+} from '../components/Schedule/ScheduleContext';
+import { StoreContext, useStoreContextValue } from './StoreContext';
 
-export function App(): JSX.Element {
+export const App: React.FC = () => {
   const storeContextValue = useStoreContextValue();
   const scheduleContextValue = useScheduleContextValue();
 
@@ -40,4 +46,4 @@ export function App(): JSX.Element {
       <Info />
     </>
   );
-}
+};