♻️ Refactors the src structure

Author: skellock

src/renderer/platform/components/storybook/index.ts renamed to .storybook/views/index.ts

@@ -1,18 +1,18 @@
-const path = require('path')
-const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js')
+const path = require("path")
+const genDefaultConfig = require("@storybook/react/dist/server/config/defaults/webpack.config.js")
 
 module.exports = (config, env) => {
   const myConfig = genDefaultConfig(config, env)
 
   myConfig.module.rules.push({
     test: /\.tsx?$/,
-    loader: 'ts-loader',
+    loader: "ts-loader",
     exclude: /node_modules/,
-    include: path.resolve(__dirname, '..', 'src'),
+    include: [path.resolve(__dirname, "..", "src"), path.resolve(__dirname, "views")],
   })
-  
-  myConfig.resolve.extensions.unshift('.tsx')
-  myConfig.resolve.extensions.unshift('.ts')
+
+  myConfig.resolve.extensions.unshift(".tsx")
+  myConfig.resolve.extensions.unshift(".ts")
 
   return myConfig
 }

src/renderer/platform/components/storybook/storybook-group.tsx renamed to .storybook/views/storybook-group.tsx

@@ -10,7 +10,7 @@ const isProduction = process.env.NODE_ENV === "production"
 
 // copy the renderer's html file into the right place
 Sparky.task("copy-html", () => {
-  return Sparky.src("src/renderer/index.html").dest(`${OUTPUT_DIR}/$name`)
+  return Sparky.src("src/app/index.html").dest(`${OUTPUT_DIR}/$name`)
 })
 
 // the default task
@@ -32,7 +32,7 @@ Sparky.task("default", ["copy-html"], () => {
   }
 
   // bundle the electron main code
-  const mainBundle = fuse.bundle("main").instructions("> [main/main.ts]")
+  const mainBundle = fuse.bundle("main").instructions("> [app/main.ts]")
 
   // and watch unless we're bundling for production
   if (!isProduction) {
@@ -42,7 +42,7 @@ Sparky.task("default", ["copy-html"], () => {
   // bundle the electron renderer code
   const rendererBundle = fuse
     .bundle("renderer")
-    .instructions("> [renderer/index.tsx] +fuse-box-css")
+    .instructions("> [app/index.tsx] +fuse-box-css")
     .plugin(CSSPlugin())
     .plugin(CopyPlugin({ useDefault: false, files: ASSETS, dest: "assets", resolve: "assets/" }))
 

src/renderer/platform/components/storybook/storybook-label.tsx renamed to .storybook/views/storybook-label.tsx

@@ -2,7 +2,7 @@
   "name": "typescript-with-electron-react-kit",
   "productName": "Sweet Sweet App",
   "main": "out/main.js",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "An electron starter project.",
   "license": "MIT",
   "private": true,

src/renderer/platform/components/storybook/storybook-story.tsx renamed to .storybook/views/storybook-story.tsx

@@ -0,0 +1,46 @@
+// This is the entry point for the renderer process.
+//
+// Here we disable a few electron settings and mount the root component.
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import { RootComponent } from "./root-component"
+import { webFrame } from "electron"
+import { css } from "glamor"
+
+/**
+ * CSS reset
+ */
+import "glamor/reset"
+
+/**
+ * Electron-focused CSS resets
+ */
+css.global("html, body", {
+  // turn off text highlighting
+  userSelect: "none",
+
+  // reset the cursor pointer
+  cursor: "default",
+
+  // font
+  font: "caption",
+
+  // text rendering
+  WebkitFontSmoothing: "subpixel-antialiased",
+  textRendering: "optimizeLegibility",
+})
+
+/**
+ * Zooming resets
+ */
+webFrame.setVisualZoomLevelLimits(1, 1)
+webFrame.setLayoutZoomLevelLimits(0, 0)
+
+/**
+ * Drag and drop resets
+ */
+document.addEventListener("dragover", event => event.preventDefault())
+document.addEventListener("drop", event => event.preventDefault())
+
+// mount the root component
+ReactDOM.render(<RootComponent />, document.getElementById("root"))

.storybook/webpack.config.js

@@ -1,10 +1,14 @@
+// This is the main process entry point. It is the
+// first file that is run on startup.
+//
+// It is responsible for launching a renderer window.
+
 import { app, dialog, ipcMain } from "electron"
-import { createMainWindow } from "./main-window/main-window"
-import { loadURL } from "./main-window/load-url"
+import { createMainWindow, loadURL } from "../views/main-window"
 import * as log from "electron-log"
 import * as isDev from "electron-is-dev"
-import { createUpdater } from "./updater/updater"
-import { createMenu } from "./menu/menu"
+import { createUpdater } from "../lib/updater"
+import { createMenu } from "../views/menu"
 
 // set proper logging level
 log.transports.file.level = isDev ? false : "info"

fuse.ts

@@ -1,21 +1,17 @@
+// This is the top-most component in the app.
 import * as React from "react"
-import { WelcomeScreen } from ".."
-import { styles, colors } from "../../platform"
 import { compose } from "glamor"
+import { styles, colors } from "../views/theme"
+import { WelcomeScreen } from "../views/example-using-tabs/welcome-screen"
 
 const ROOT = compose(styles.fullScreen, {
   background: colors.window.background,
-  borderRadius: 0,
-  "& ::-webkit-scrollbar": {
-    backgroundColor: colors.scrollbar.base,
-    width: 12,
-    height: 12,
-  },
+  "& ::-webkit-scrollbar": { backgroundColor: colors.scrollbar.base, width: 12, height: 12 },
   "& ::-webkit-scrollbar-track": { backgroundColor: colors.scrollbar.track },
   "& ::-webkit-scrollbar-thumb": { backgroundColor: colors.scrollbar.thumb, borderRadius: 4 },
 })
 
-export class App extends React.Component<{}, {}> {
+export class RootComponent extends React.Component<{}, {}> {
   render() {
     return (
       <div {...ROOT}>

package.json

@@ -4,7 +4,7 @@ jest.mock("mousetrap", () => {
     unbind: jest.fn(),
   }
 })
-jest.mock("../../../../shared", () => {
+jest.mock("../platform", () => {
   return {
     isMac: jest.fn().mockReturnValueOnce(true),
   }
@@ -29,7 +29,7 @@ test("mac is command key", () => {
 
 test("non-mac is control", () => {
   // jest.resetModules()
-  const shared = require("../../../../shared")
+  const shared = require("../platform")
   shared.isMac = jest.fn().mockReturnValue(false)
   const { commandOrControlKey } = require("./keyboard")
   expect(commandOrControlKey()).toBe("ctrl")

src/renderer/index.html renamed to src/app/index.html

@@ -1,7 +1,7 @@
 // A straight thru wrapper with the intention to add contexts
 // which will swap out groups of keybinds at a time.
 import * as Mousetrap from "mousetrap"
-import { isMac } from "../../../../shared"
+import { isMac } from "../platform"
 
 export type KeyboardCallback = (e: ExtendedKeyboardEvent, combo: string) => any
 export type KeyboardAction = "keypress" | "keydown" | "keyup"

src/app/index.tsx

@@ -0,0 +1 @@
+export * from "./updater"

src/main/main.ts renamed to src/app/main.ts

@@ -1,11 +1,11 @@
-import { GithubRepo } from "../../shared/models/github-repo"
+import { Repo } from "../repo"
 import { Database } from "./database"
 
 /**
  * Creates a valid repo for use in tests.
  */
 export function createRepo() {
-  const repo: GithubRepo = {
+  const repo: Repo = {
     name: "typescript-with-electron-react-kit",
     fullName: "skellock/typescript-with-electron-react-kit",
     private: false,

src/renderer/features/app/app.tsx renamed to src/app/root-component.tsx

@@ -1,5 +1,5 @@
 // this example is here only to show how some testing could work.
-import { GithubRepo } from "../../shared/models/github-repo"
+import { Repo } from "../repo"
 
 interface DatabaseOptions {
   readonly directory: string
@@ -18,10 +18,10 @@ export class Database {
   /**
    * Loads something from the database
    */
-  load(fullName: string): Promise<GithubRepo> {
+  load(fullName: string): Promise<Repo> {
     return new Promise(resolve =>
       setTimeout(() => {
-        const repo: GithubRepo = {
+        const repo: Repo = {
           name: fullName.split("/")[1],
           fullName,
           private: false,
@@ -36,7 +36,7 @@ export class Database {
    *
    * @param repo The thing to save.
    */
-  save(repo: GithubRepo): Promise<boolean> {
+  save(repo: Repo): Promise<boolean> {
     return new Promise(resolve => setTimeout(() => resolve(repo.fullName !== "crap"), 10))
   }
 }

src/i18n/index.ts

@@ -0,0 +1 @@
+export * from "./repo"

src/renderer/platform/utils/keyboard/index.ts renamed to src/lib/keyboard/index.ts

@@ -1,4 +1,4 @@
-export interface GithubRepo {
+export interface Repo {
   name: string
   description?: string
   fullName: string

src/renderer/platform/utils/keyboard/keyboard.test.ts renamed to src/lib/keyboard/keyboard.test.ts

@@ -1,6 +1,8 @@
 import * as React from "react"
 import { CSSProperties } from "react"
-import { Text, CenteredContent, spacing, cssProps } from "../../../platform"
+import { spacing, cssProps } from "../../theme"
+import { Text } from "../../shared/text"
+import { CenteredContent } from "../../shared/centered-content"
 import { FunDog } from "../fun-dog"
 import { Logo } from "../logo"
 

src/renderer/platform/utils/keyboard/keyboard.ts renamed to src/lib/keyboard/keyboard.ts

@@ -1,9 +1,6 @@
 import * as React from "react"
 import { storiesOf } from "@storybook/react"
-import {
-  StorybookStory as Story,
-  StorybookGroup as Group,
-} from "../../../platform/components/storybook"
+import { StorybookStory as Story, StorybookGroup as Group } from "../../../../.storybook/views"
 
 import { FunDog } from "./fun-dog"
 

src/shared/utils/index.ts renamed to src/lib/platform/index.ts

@@ -1,6 +1,7 @@
 import * as React from "react"
 import { CSSProperties } from "react"
-import { colors, SpinAnimation } from "../../../platform"
+import { colors } from "../../theme"
+import { SpinAnimation } from "../../shared/spin-animation"
 import { css } from "glamor"
 const dogImage = require("./fun-dog.jpg")
 

src/shared/utils/platform/platform.test.ts renamed to src/lib/platform/platform.test.ts

@@ -1,6 +1,6 @@
 import * as React from "react"
 import { CSSProperties } from "react"
-import { cssProps, animations } from "../../../platform"
+import { cssProps, animations } from "../../theme"
 const icon = require("./electron-icon.svg")
 import { css } from "glamor"
 

src/shared/utils/platform/platform.ts renamed to src/lib/platform/platform.ts

@@ -1,6 +1,8 @@
 import * as React from "react"
 import { CSSProperties } from "react"
-import { Text, ScrollableContent, spacing, cssProps } from "../../../platform"
+import { spacing, cssProps } from "../../theme"
+import { Text } from "../../shared/text"
+import { ScrollableContent } from "../../shared/scrollable-content"
 import { css } from "glamor"
 
 const PADDED = cssProps({

src/lib/updater/index.ts

@@ -1,15 +1,8 @@
 import * as React from "react"
-import {
-  Tab,
-  bindKey,
-  unbindKey,
-  spacing,
-  colors,
-  styles,
-  cssProps,
-  commandOrControlKey,
-  EnterAnimation,
-} from "../../../platform"
+import { Tab } from "../../shared/tab"
+import { bindKey, unbindKey, commandOrControlKey } from "../../../lib/keyboard"
+import { spacing, colors, styles, cssProps } from "../../theme"
+import { EnterAnimation } from "../../shared/enter-animation"
 import { css } from "glamor"
 
 export type SampleTabType = "one" | "two" | "three"

src/main/updater/updater.ts renamed to src/lib/updater/updater.ts

@@ -2,7 +2,7 @@ import * as React from "react"
 import { SampleTabs, SampleTabType } from "./sample-tabs"
 import { LongTab } from "../long-tab"
 import { DogTab } from "../dog-tab"
-import { styles, cssProps } from "../../../platform"
+import { styles, cssProps } from "../../theme"
 import Store = require("electron-store")
 import { css } from "glamor"
 

src/main/database/database.fixtures.ts renamed to src/models/database/database.fixtures.ts

@@ -0,0 +1,2 @@
+export * from "./main-window"
+export * from "./load-url"

src/main/database/database.test.ts renamed to src/models/database/database.test.ts

@@ -0,0 +1 @@
+export * from "./menu"

src/main/database/database.ts renamed to src/models/database/database.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 "../../shared"
+import { isMac, isLinux, isWindows } from "../../lib/platform"
 
 /**
  * Attaches the menu to the appropriate place.

src/models/repo/index.ts

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { StorybookStory as Story, StorybookGroup as Group } from "../storybook"
+import { StorybookStory as Story, StorybookGroup as Group } from "../../../../.storybook/views"
 import { storiesOf } from "@storybook/react"
 import { CenteredContent } from "./index"