├── .babelrc ├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── __assets ├── Gallery1.jpg ├── Gallery2.jpg ├── Gallery3.jpg ├── Gallery4.jpg ├── Icon.jpg ├── PromoMarquee.jpg ├── ScreenshotTrackerPromo.gif ├── ScreenshotTrackerPromo.mp4 ├── ScreenshotTrackerPromo.prd └── for_github_readme │ ├── Gallery1.jpg │ ├── Gallery2.jpg │ ├── Gallery3.jpg │ ├── Gallery4.jpg │ └── PromoMarquee.jpg ├── __tests ├── config │ ├── componentsMock.js │ ├── fileMock.js │ └── setupTests.js └── src │ ├── components │ ├── @shared │ │ ├── Footer.test.js │ │ └── Header.test.js │ └── Home │ │ ├── HelloWorld.test.js │ │ └── Path.test.js │ ├── layouts │ └── App.test.js │ ├── routes │ └── index.test.js │ └── screens │ └── Home │ └── Home.test.js ├── build └── entitlements.mac.plist ├── main.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── appicon_256.png ├── appicon_512.png └── index.html ├── scripts └── notarize.js ├── sentry.js ├── src ├── .nomad-codecheckrc.js ├── actions.js ├── constants.js ├── electron_listeners.js ├── index.js ├── layout.js ├── reducers.js ├── routes.js ├── screens │ ├── about.js │ ├── home.js │ ├── new_run.js │ ├── run_list.js │ └── run_result.js ├── store.js └── styles │ ├── ant.vars.scss │ └── app.global.scss ├── storage.js └── webpack.config.babel.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/env", "@babel/react"], 3 | "plugins": [ 4 | [ 5 | "import", 6 | { 7 | "libraryName": "antd", 8 | "style": true 9 | }, 10 | "ant" 11 | ], 12 | "@babel/plugin-proposal-class-properties", 13 | "@babel/transform-runtime", 14 | "react-hot-loader/babel", 15 | [ 16 | "babel-plugin-root-import", 17 | { 18 | "rootPathPrefix": "@", 19 | "rootPathSuffix": "./src" 20 | } 21 | ] 22 | ], 23 | "env": { 24 | "development": { 25 | "plugins": ["@babel/plugin-transform-modules-commonjs"] 26 | }, 27 | "test": { 28 | "plugins": ["@babel/plugin-transform-modules-commonjs"] 29 | }, 30 | "production": { 31 | "plugins": ["transform-react-remove-prop-types"] 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | end_of_line = crlf 8 | indent_size = 2 9 | indent_style = space 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | trim_trailing_whitespace = false 15 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "plugins": ["react"], 3 | "parser": "babel-eslint", 4 | "parserOptions": { 5 | "ecmaVersion": 6, 6 | "sourceType": "module", 7 | "ecmaFeatures": { 8 | "jsx": true 9 | } 10 | }, 11 | "env": { 12 | "es6": true, 13 | "browser": true, 14 | "node": true, 15 | "mocha": true 16 | }, 17 | "extends": [ 18 | "@nomadinteractive", 19 | // "eslint:recommended", 20 | // "plugin:react/recommended" 21 | ], 22 | // "rules": { 23 | // "no-console": "off", 24 | // "no-undef": "warn", 25 | // "no-undefined": "warn", 26 | // "no-unused-vars": "warn", 27 | // "no-extra-parens": ["error", "all", { "ignoreJSX": "all" }], 28 | // "no-constant-condition": "warn", 29 | // "react/prop-types": "warn" 30 | // }, 31 | "settings": { 32 | "react": { 33 | "version": "16" 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .env 2 | 3 | # Build folder and files # 4 | ########################## 5 | release/ 6 | 7 | # Development folders and files # 8 | ################################# 9 | .tmp/ 10 | dist/ 11 | node_modules/ 12 | docs/ 13 | __snapshots__ 14 | *.compiled.* 15 | 16 | # Folder config file # 17 | ###################### 18 | Desktop.ini 19 | 20 | # Folder notes # 21 | ################ 22 | _ignore/ 23 | 24 | # Log files & folders # 25 | ####################### 26 | logs/ 27 | *.log 28 | npm-debug.log* 29 | .npm 30 | 31 | # Packages # 32 | ############ 33 | # it's better to unpack these files and commit the raw source 34 | # git has its own built in compression methods 35 | *.7z 36 | *.dmg 37 | *.gz 38 | *.iso 39 | *.jar 40 | *.rar 41 | *.tar 42 | *.zip 43 | 44 | # Photoshop & Illustrator files # 45 | ################################# 46 | *.ai 47 | *.eps 48 | *.psd 49 | 50 | # Windows & Mac file caches # 51 | ############################# 52 | .DS_Store 53 | Thumbs.db 54 | ehthumbs.db 55 | 56 | # Windows shortcuts # 57 | ##################### 58 | *.lnk 59 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | _ignore/ 2 | docs/ 3 | release/ 4 | dist/ 5 | .editorconfig 6 | __snapshots__ 7 | 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Nomad Interactive 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Screenshot Tracker Desktop App 2 | 3 | ![Screenshot Tracker Hero](./__assets/for_github_readme/PromoMarquee.jpg) 4 | 5 | A simple screenshot tarcking tool based on electron's embedded chromium and pupeteer. 6 | 7 | 8 | ## Screenshots 9 | 10 | [![Screenshot 1: Result Screen](./__assets/for_github_readme/Gallery1.jpg)](./__assets/for_github_readme/Gallery1.jpg) 11 | 12 | [![Screenshot 2: New Run](./__assets/for_github_readme/Gallery2.jpg)](./__assets/for_github_readme/Gallery2.jpg) 13 | 14 | [![Screenshot 3: Previews](./__assets/for_github_readme/Gallery3.jpg)](./__assets/for_github_readme/Gallery3.jpg) 15 | 16 | [![Screenshot 4: Dark Mode](./__assets/for_github_readme/Gallery4.jpg)](./__assets/for_github_readme/Gallery4.jpg) 17 | 18 | 19 | ### Features / Tech Used 20 | 21 | - Electron 22 | - Webpack 8 23 | - Babel 7 24 | - React 16 25 | - ES6 26 | - PostCSS 27 | - Sass (Injection by modules and in the traditional way) 28 | - Ant Design (Global theme based on the Less Ant variables) 29 | - Jest 30 | - Enzyme 31 | - Eslint 32 | - Hot realod 33 | - Friendly architecture 34 | - Export for Mac, Linux, Windows 35 | 36 | 37 | ### Known issues 38 | 39 | Looking for support for the following known issues: 40 | 41 | - Ability to capture cookie/session and use in screenshot sessions 42 | - True mobile device emulation (right now just the resolution/width is simulated) 43 | - App is not working on Linux and Windows Operating Systems due to puppeteer and 44 | electron/chromium connection 45 | ([#8](https://github.com/nomadinteractive/screenshot-tracker/issues/8), 46 | [#11](https://github.com/nomadinteractive/screenshot-tracker/issues/11)) 47 | - Testing on Wimdows 48 | - Testing on Linux 49 | - Writing proper react component tests. Right now tests folder only contains 50 | tests from original boilerplate code. They are not in proper use. 51 | 52 | 53 | ### Table of contents 54 | 55 | * [Install](#install) 56 | * [Usage](#usage) 57 | * [License](#license) 58 | 59 | ### Install 60 | 61 | #### Clone this repo 62 | 63 | ``` 64 | git clone https://github.com/nomadinteractive/screenshot-tracker 65 | ``` 66 | 67 | #### Install dependencies 68 | 69 | ``` 70 | npm install 71 | ``` 72 | or 73 | ``` 74 | yarn 75 | ``` 76 | 77 | ### Usage 78 | 79 | #### Run 80 | 81 | ``` 82 | npm start 83 | ``` 84 | or 85 | ``` 86 | yarn start 87 | ``` 88 | 89 | #### Build (manual) 90 | 91 | ``` 92 | npm run build 93 | ``` 94 | or 95 | ``` 96 | yarn build 97 | ``` 98 | 99 | #### Prod (Preview in Production) 100 | 101 | ``` 102 | npm run prod 103 | ``` 104 | or 105 | ``` 106 | yarn prod 107 | ``` 108 | 109 | #### Build package (Current OS) 110 | 111 | ``` 112 | npm run package 113 | ``` 114 | or 115 | ``` 116 | yarn package 117 | ``` 118 | 119 | #### Build package (Mac, Linux, Windows) 120 | 121 | ``` 122 | npm run package:all 123 | ``` 124 | or 125 | ``` 126 | yarn package:all 127 | ``` 128 | 129 | #### Test 130 | 131 | ``` 132 | npm test 133 | ``` 134 | or 135 | ``` 136 | yarn test 137 | ``` 138 | 139 | #### Docs 140 | 141 | ``` 142 | npm run docs 143 | ``` 144 | or 145 | ``` 146 | yarn docs 147 | ``` 148 | 149 | ### License 150 | 151 | MIT © [Nomad Interactive](https://github.com/nomadinteractive/screenshot-tracker/blob/master/LICENSE) 152 | 153 | Boilerplate derived from 154 | [Leonardo Rico](https://github.com/kevoj/electron-react-ant-boilerplate/blob/master/LICENSE) 155 | via MIT license 156 | -------------------------------------------------------------------------------- /__assets/Gallery1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nomadinteractive/screenshot-tracker/50079b2538cac992c046f9ef0da827fe95d5fa27/__assets/Gallery1.jpg -------------------------------------------------------------------------------- /__assets/Gallery2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nomadinteractive/screenshot-tracker/50079b2538cac992c046f9ef0da827fe95d5fa27/__assets/Gallery2.jpg -------------------------------------------------------------------------------- /__assets/Gallery3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nomadinteractive/screenshot-tracker/50079b2538cac992c046f9ef0da827fe95d5fa27/__assets/Gallery3.jpg -------------------------------------------------------------------------------- /__assets/Gallery4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nomadinteractive/screenshot-tracker/50079b2538cac992c046f9ef0da827fe95d5fa27/__assets/Gallery4.jpg -------------------------------------------------------------------------------- /__assets/Icon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nomadinteractive/screenshot-tracker/50079b2538cac992c046f9ef0da827fe95d5fa27/__assets/Icon.jpg -------------------------------------------------------------------------------- /__assets/PromoMarquee.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nomadinteractive/screenshot-tracker/50079b2538cac992c046f9ef0da827fe95d5fa27/__assets/PromoMarquee.jpg -------------------------------------------------------------------------------- /__assets/ScreenshotTrackerPromo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nomadinteractive/screenshot-tracker/50079b2538cac992c046f9ef0da827fe95d5fa27/__assets/ScreenshotTrackerPromo.gif -------------------------------------------------------------------------------- /__assets/ScreenshotTrackerPromo.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nomadinteractive/screenshot-tracker/50079b2538cac992c046f9ef0da827fe95d5fa27/__assets/ScreenshotTrackerPromo.mp4 -------------------------------------------------------------------------------- /__assets/ScreenshotTrackerPromo.prd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nomadinteractive/screenshot-tracker/50079b2538cac992c046f9ef0da827fe95d5fa27/__assets/ScreenshotTrackerPromo.prd -------------------------------------------------------------------------------- /__assets/for_github_readme/Gallery1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nomadinteractive/screenshot-tracker/50079b2538cac992c046f9ef0da827fe95d5fa27/__assets/for_github_readme/Gallery1.jpg -------------------------------------------------------------------------------- /__assets/for_github_readme/Gallery2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nomadinteractive/screenshot-tracker/50079b2538cac992c046f9ef0da827fe95d5fa27/__assets/for_github_readme/Gallery2.jpg -------------------------------------------------------------------------------- /__assets/for_github_readme/Gallery3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nomadinteractive/screenshot-tracker/50079b2538cac992c046f9ef0da827fe95d5fa27/__assets/for_github_readme/Gallery3.jpg -------------------------------------------------------------------------------- /__assets/for_github_readme/Gallery4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nomadinteractive/screenshot-tracker/50079b2538cac992c046f9ef0da827fe95d5fa27/__assets/for_github_readme/Gallery4.jpg -------------------------------------------------------------------------------- /__assets/for_github_readme/PromoMarquee.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nomadinteractive/screenshot-tracker/50079b2538cac992c046f9ef0da827fe95d5fa27/__assets/for_github_readme/PromoMarquee.jpg -------------------------------------------------------------------------------- /__tests/config/componentsMock.js: -------------------------------------------------------------------------------- 1 | // Libs 2 | import React from "react"; 3 | import PropTypes from "prop-types"; 4 | 5 | module.exports = new Proxy( 6 | {}, 7 | { 8 | get: (target, property) => { 9 | const Mock = ({ children }) => {children}; 10 | 11 | Mock.displayName = property; 12 | Mock.propTypes = { 13 | children: PropTypes.any 14 | }; 15 | 16 | return Mock; 17 | } 18 | } 19 | ); 20 | -------------------------------------------------------------------------------- /__tests/config/fileMock.js: -------------------------------------------------------------------------------- 1 | export default 'file' 2 | -------------------------------------------------------------------------------- /__tests/config/setupTests.js: -------------------------------------------------------------------------------- 1 | // Libs 2 | import { configure } from "enzyme"; 3 | import Adapter from "enzyme-adapter-react-16"; 4 | // Adapter 5 | configure({ adapter: new Adapter() }); 6 | -------------------------------------------------------------------------------- /__tests/src/components/@shared/Footer.test.js: -------------------------------------------------------------------------------- 1 | // Libs 2 | import React from "react"; 3 | import { shallow } from "enzyme"; 4 | import toJson from "enzyme-to-json"; 5 | // Module 6 | import Footer from "@/components/@shared/Footer"; 7 | 8 | describe("Component Footer", () => { 9 | it('should render correctly in "debug" mode', () => { 10 | const component = shallow(