Merge pull request #118 from skellock/more-refactoring

♻️ Moves main-window and menu up to src

Author: skellock

README.md

@@ -10,15 +10,13 @@ This is a `TypeScript` and `React` starter kit for building Electron apps.
 
 [Check out the docs](https://skellock.github.io/typescript-with-electron-react-kit) for some of the choices and motivations.
 
-
 ### Example
 
-You have to bring your own awesome.  But here's a picture* after `npm i` and `npm start` and `npm storybook`...
+You have to bring your own awesome. But here's a picture\* after `npm i` and `npm start` and `npm storybook`...
 
 <img src='./docs/demo.gif' width='450' />
 
-><small>* What it looks like moments before you hit the delete button to nuke all the staged features..</small>
-
+> <small>\* What it looks like moments before you hit the delete button to nuke all the staged features..</small>
 
 # Out of the Box
 
@@ -33,7 +31,7 @@ You have to bring your own awesome.  But here's a picture* after `npm i` and `np
 * persist application data as JSON
 * sane styling defaults on windows, mac, and linux
 
-### Devs Like Nice Things Too  🔨
+### Devs Like Nice Things Too 🔨
 
 * super-fast hot reloading 🔥
 * lean production bundles
@@ -42,24 +40,22 @@ You have to bring your own awesome.  But here's a picture* after `npm i` and `np
 * storybook snapshot testing
 * code linting & formatting
 
-### Documentation & Samples  🖨
+### Documentation & Samples 🖨
 
 * how to quickly jettison parts you don't want
 * why we chose the stack we did
 * how to structure your electron app
 * a simple & co-located approach to building your components
 
-### Not Included  💣
+### Not Included 💣
 
 * lock in... keep what works for you, ditch the rest
-* state management... `mobx`? / `redux`? ... both awesome.  both excluded.
+* state management... `mobx`? / `redux`? ... both awesome. both excluded.
 * a component toolkit
 
+# License 🎤
 
-# License  🎤 
-
-You down with MIT? 
-
+You down with MIT?
 
 # Contributors
 

docs/README.md

@@ -8,14 +8,12 @@
 
 This is a `TypeScript` and `React` starter kit for building Electron apps.
 
-
 ### Why?
 
 I've got dozens of Electron apps started and not finished. They die before they can leave the bikeshed.
 
 This is my attempt to fix that.
 
-
 ### Why Not?
 
 Most other starter kits use things like WebPack, Babel, Flow, and Redux.
@@ -31,10 +29,8 @@ Honestly, these are pretty pro.
 * https://github.com/bitjson/typescript-starter
 * https://github.com/alexjoverm/typescript-library-starter
 
-They have been influential and instructional.  Pretty cool people at the helm too.
-
+They have been influential and instructional. Pretty cool people at the helm too.
 
 ### License
 
 MIT. A tip of the hat is always nice, but I'm more interested in hearing what you do with it.
-

docs/_sidebar.md

@@ -1,4 +1,3 @@
-- [Home](/)
-- [Using](/using)
-- [The Stack](/stack)
-
+* [Home](/)
+* [Using](/using)
+* [The Stack](/stack)

docs/stack.md

@@ -2,7 +2,6 @@
 
 Hey, so everyone has their favourites right? Here's a few of mine.
 
-
 ## Language
 
 > **typescript**
@@ -11,7 +10,6 @@ Hey, so everyone has their favourites right? Here's a few of mine.
 
 Such a well polished and wonderful typing system. I know this is a stepping stone to a better language, but JavaScript is really comfortable at this point. TypeScript dials the safety part in.
 
-
 ## Language Support
 
 > **tslint**
@@ -28,7 +26,6 @@ A linter with a great set of rules is awesome.
 
 Some automation so I stop checking in crap-looking code.
 
-
 ## Rendering
 
 > **react**, **react-dom**
@@ -37,9 +34,9 @@ Some automation so I stop checking in crap-looking code.
 
 Can't imagine doing web differently to be honest. I'm sure we will soon, but for mid-2017, this is dominating.
 
-I like `preact` as well.  I feel like the switching over will be pretty simple and I probably will.
+I like `preact` as well. I feel like the switching over will be pretty simple and I probably will.
 
-## Components ##
+## Components
 
 > **glamor**
 
@@ -65,17 +62,17 @@ I've flip-flopped on this quite a bit. We're spoiled by awesome options.
 
 `glamor` nails what I'm looking for:
 
-* ✅  objects are first class
-* ✅  strong on composibility
-* ✅  performant out of the box (without configuration)
-* ✅  works well with global styles and things like keyframes
-* ✅  friendly devs
-* ✅  a DSL that is true to CSS (especially with child selectors)
-* ✅  built-in escape hatches
-* ✅  clear docs with examples, patterns, and advice
-* ✅  stable-ish API
-* ✅  TypeScript-friendly
-* ✅  testability without flushing caches or buffers
+* ✅ objects are first class
+* ✅ strong on composibility
+* ✅ performant out of the box (without configuration)
+* ✅ works well with global styles and things like keyframes
+* ✅ friendly devs
+* ✅ a DSL that is true to CSS (especially with child selectors)
+* ✅ built-in escape hatches
+* ✅ clear docs with examples, patterns, and advice
+* ✅ stable-ish API
+* ✅ TypeScript-friendly
+* ✅ testability without flushing caches or buffers
 
 My advice? **Don't listen to my advice**. Explore & pick your own. Much, if not most, of your app is UI.
 
@@ -105,7 +102,6 @@ Brings enter + leave lifecycle events for animations.
 
 Power animation & tweening library.
 
-
 ## Keyboard Support
 
 > **mousetrap**
@@ -116,7 +112,6 @@ The main menu in electron has keyboard accelators, but we still need one in the
 
 Mousetrap fills that gap. It's a pretty decent little library despite not being maintained any more (lol@js). Does the job though. I've tried a couple of others but keep coming back to this one.
 
-
 ## Utilities
 
 > **ramda**
@@ -125,7 +120,6 @@ Mousetrap fills that gap. It's a pretty decent little library despite not being
 
 There's so much awesome packed in here. `pipe` for days. I'll be honest, it took me a long time get comfortable with `ramda`. Nowadays, you can pry it from my cold dead hands. PRECIOUS!!!
 
-
 ## Electron Things
 
 > **electron-builder**
@@ -157,7 +151,6 @@ Persist JSON to the file system.
 
 Persist window coordinates & dimensions to disk to survive restarts.
 
-
 ## Bundler
 
 > **fuse-box**
@@ -168,15 +161,13 @@ Yes, you read that right. Not WebPack. WebPack always rubbed me wrong. Maybe it'
 
 What I do know is, once I started playing with FuseBox, I was sold. I like the devs behind this too.
 
-
 ## Testing
 
 > **jest**
 
 [jest - github](https://github.com/facebook/jest)
 
-Because we're using TypeScript, Jest makes this much easier.  Jest comes with mocking and coverage as well.
-
+Because we're using TypeScript, Jest makes this much easier. Jest comes with mocking and coverage as well.
 
 ## Compile Time Utilities
 
@@ -187,7 +178,6 @@ Because we're using TypeScript, Jest makes this much easier.  Jest comes with mo
 
 Quality-of-life utilities for npm.
 
-
 ## Docs
 
 > **docsify**

docs/using.md

@@ -1,6 +1,6 @@
 ## Test Drive
 
-Want to try this out? Clone & run.  There's a small sample project included.
+Want to try this out? Clone & run. There's a small sample project included.
 
 ```sh
 git clone --depth 1 git@github.com:skellock/typescript-with-electron-react-kit.git
@@ -9,37 +9,58 @@ npm i
 npm start
 ```
 
-_Requires `node@>=8.2` and `npm@>=5.3`._ (NOTE: not really, but ya, upgrade ... there's some pretty big bugs in earlier versions)
+_Requires `node@>=8.6` and `npm@>=5.4`._ (NOTE: not really, but ya, upgrade ... there's some pretty big bugs in earlier versions)
 
 ## Start Your Own Project
 
 Ready to start your project?
 
-I'm still deciding on a simple way, but there will be a script you can run.
+This sample app has a few things that should be swapped out for your settings.
 
-```sh
-# this does exist yet
-npm run time-to-shine
-```
+#### Reset git
 
+You'll want to start from a fresh source control history.
 
-## Strip It Down to the Bones
+* delete the `.git` directory
+* re-initialize git by running `git init`
+
+#### Change App Settings
+
+Open `package.json` and change these keys to be your own:
+
+* name
+* productName
+* description
+* license
+* author
+* repository
+* build.mac.category
+* build.publish
 
-You can keep the Electron parts but lose the rendering opinions.
+#### Change Web Site Menu Item
 
-* delete the directories under `src/renderer`
-* change `src/renderer/index.tsx` to point to your new component
+Open `src/menu/shared-menu.ts` and change the visit menu item to point to your web site.
 
+## Strip It Down to the Bones
+
+If you're looking for a really fresh start:
+
+* delete the `src/views` directory
+* delete the `src/models` directory
+* delete the `src/services` directory
+* delete the `src/i18n` directory
+* delete the `src/app/root-component.tsx` file
+* change `src/app/index.tsx` to point to your new root component
 
 ## Keep the Meat, Ditch the Fluff
 
 If you want to just remove the examples and continue with the app layout:
 
-* delete `src/renderer/features/example-using-tabs`
-* remove corresponding lines from `src/renderer/index.ts`
-* remove the same from `src/renderer/app/app.tsx`
-* remove the `src/shared/models`
-* remove the `src/main/database`
+* delete the `src/views/example` directory
+* delete the contents of `src/models`
+* delete the contents of `src/services`
+* create a new react component under `src/views` (i prefer a sub-directory under here)
+* open `src/app/root-component.tsx` and point to your new component
 
 Now you're ready to start adding your own features.
 
@@ -61,7 +82,7 @@ It'll:
 * compile the app in production mode
 * clean 1 last time.
 
-This is hooked up to a `pre-push` build script. This will help you not check in mistakes.  Trust me.
+This is hooked up to a `pre-push` build script. This will help you not check in mistakes. Trust me.
 
 If you want to run in `watch` mode for testing while you develop (quite nice!):
 
@@ -73,7 +94,7 @@ npm run watch:compile
 npm run watch:tests
 ```
 
-Now when you edit your files, it'll recompile & re-run the relevant tests on the fly.  And it's quick!
+Now when you edit your files, it'll recompile & re-run the relevant tests on the fly. And it's quick!
 
 If you are ready to see how much of your codebase is covered simply run:
 
@@ -83,7 +104,6 @@ npm run coverage
 
 and check out the output in the coverage folder.
 
-
 ## Writing Components
 
 When you are adding new components to your app you typically will want to write stories in `storybook`. You do this by simply creating a `<component name>.story.tsx` file along side your component and then writing stories that outline the different prop usage and put it in all the states that it could be in. While you are working on the component you will want to run
@@ -94,8 +114,6 @@ npm run storybook
 
 and then switch to the storybook view from the `view` menu in your app so you can get a live preview of the component you are working on.
 
-
-
 ## Building
 
 To build your apps, first bundle it:

src/app/main.ts

@@ -4,11 +4,11 @@
 // It is responsible for launching a renderer window.
 
 import { app, dialog, ipcMain } from "electron"
-import { createMainWindow, loadURL } from "../views/main-window"
+import { createMainWindow, loadURL } from "../main-window"
 import * as log from "electron-log"
 import * as isDev from "electron-is-dev"
 import { createUpdater } from "../lib/updater"
-import { createMenu } from "../views/menu"
+import { createMenu } from "../menu"
 
 // set proper logging level
 log.transports.file.level = isDev ? false : "info"

src/app/root-component.tsx

@@ -2,7 +2,7 @@
 import * as React from "react"
 import { compose } from "glamor"
 import { styles, colors } from "../views/theme"
-import { WelcomeScreen } from "../views/example-using-tabs/welcome-screen"
+import { WelcomeScreen } from "../views/example/welcome-screen"
 
 const ROOT = compose(styles.fullScreen, {
   background: colors.window.background,

src/views/main-window/index.ts renamed to src/main-window/index.ts

@@ -2,7 +2,7 @@ import { Menu } from "electron"
 import { createMacMenu } from "./macos-menu"
 import { createLinuxMenu } from "./linux-menu"
 import { createWindowsMenu } from "./windows-menu"
-import { isMac, isLinux, isWindows } from "../../lib/platform"
+import { isMac, isLinux, isWindows } from "../lib/platform"
 
 /**
  * Attaches the menu to the appropriate place.

src/views/main-window/load-url.test.ts renamed to src/main-window/load-url.test.ts

@@ -2,7 +2,7 @@ import { shell, ipcMain } from "electron"
 
 export function createSharedMenuItems(window: Electron.BrowserWindow) {
   const visit: Electron.MenuItemConstructorOptions = {
-    label: "Visit on Github",
+    label: "On The Web",
     click() {
       shell.openExternal("https://github.com/skellock/typescript-with-electron-react-kit")
     },