Merge pull request #60 from skellock/inline-storybook

Inline Storybook + Storybook-focus components

Author: rmevans9

.storybook/webpack.config.js

@@ -2,17 +2,17 @@ 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)
+  const myConfig = genDefaultConfig(config, env)
 
-    myConfig.module.rules.push({
-        test: /\.tsx?$/,
-        loader: 'ts-loader',
-        exclude: /node_modules/,
-        include: path.resolve(__dirname, '..', 'src')
-    })
+  myConfig.module.rules.push({
+    test: /\.tsx?$/,
+    loader: 'ts-loader',
+    exclude: /node_modules/,
+    include: path.resolve(__dirname, '..', 'src'),
+  })
 
-    myConfig.resolve.extensions.unshift('.tsx')
-    myConfig.resolve.extensions.unshift('.ts')
+  myConfig.resolve.extensions.unshift('.tsx')
+  myConfig.resolve.extensions.unshift('.ts')
 
-    return myConfig
+  return myConfig
 }

fuse.ts

@@ -43,7 +43,7 @@ Sparky.task('default', ['copy-html'], () => {
     .bundle('renderer')
     .instructions('> [renderer/index.tsx] +fuse-box-css')
     .plugin(CSSPlugin())
-    .plugin(CopyPlugin({ useDefault: true, files: ASSETS, dest: 'assets', resolve: 'assets/' }))
+    .plugin(CopyPlugin({ useDefault: false, files: ASSETS, dest: 'assets', resolve: 'assets/' }))
 
   // and watch & hot reload unless we're bundling for production
   if (!isProduction) {

src/main/main-window/load-url.ts

@@ -0,0 +1,20 @@
+import { join } from 'path'
+import { format } from 'url'
+
+export function loadURL(
+  window: Electron.BrowserWindow,
+  appPath: string,
+  showStorybook: boolean = false,
+) {
+  if (showStorybook) {
+    window.loadURL('http://localhost:6006')
+  } else {
+    window.loadURL(
+      format({
+        pathname: join(appPath, 'out/index.html'),
+        protocol: 'file:',
+        slashes: true,
+      }),
+    )
+  }
+}

src/main/main-window/main-window.ts

@@ -1,7 +1,6 @@
 import { app, BrowserWindow } from 'electron'
-import { join } from 'path'
-import { format } from 'url'
 import WindowStateManager = require('electron-window-state-manager')
+import { loadURL } from './load-url'
 
 // default dimensions
 const DIMENSIONS = { width: 600, height: 500, minWidth: 450, minHeight: 450 }
@@ -52,13 +51,7 @@ export function createMainWindow(appPath: string) {
   window.on('resize', () => windowState.saveState(window))
 
   // load entry html page in the renderer.
-  window.loadURL(
-    format({
-      pathname: join(appPath, 'out/index.html'),
-      protocol: 'file:',
-      slashes: true,
-    }),
-  )
+  loadURL(window, appPath)
 
   // only appear once we've loaded
   window.webContents.on('did-finish-load', () => {

src/main/main.ts

@@ -1,5 +1,6 @@
-import { app } from 'electron'
+import { app, ipcMain } from 'electron'
 import { createMainWindow } from './main-window/main-window'
+import { loadURL } from './main-window/load-url'
 import * as log from 'electron-log'
 import * as isDev from 'electron-is-dev'
 import { createUpdater } from './updater/updater'
@@ -9,14 +10,25 @@ import { createMenu } from './menu/menu'
 log.transports.file.level = isDev ? false : 'info'
 log.transports.console.level = isDev ? 'debug' : false
 
+let window: Electron.BrowserWindow
+let showStorybook = false
+
 // usually we'd just use __dirname here, however, the FuseBox
 // bundler rewrites that, so we have to get it from Electron.
 const appPath = app.getAppPath()
 
 // fires when Electron is ready to start
 app.on('ready', () => {
-  const window = createMainWindow(appPath)
+  window = createMainWindow(appPath)
   createMenu(window)
+
+  if (isDev) {
+    ipcMain.on('storybook-toggle', () => {
+      log.info('toggle')
+      showStorybook = !showStorybook
+      loadURL(window, appPath, showStorybook)
+    })
+  }
 })
 
 // fires when all windows are closed

src/main/menu/linux-menu.ts

@@ -16,6 +16,7 @@ export function createLinuxMenu(
     submenu: isDev
       ? [
           { ...shared.reload, accelerator: 'Ctrl+R' },
+          { ...shared.storybook, accelerator: 'Ctrl+Shift+S' },
           { ...shared.toggleDevTools, accelerator: 'Ctrl+Alt+I' },
       ]
       : [{ ...shared.fullScreen, accelerator: 'Ctrl+Alt+F' }],

src/main/menu/macos-menu.ts

@@ -26,6 +26,7 @@ export function createMacMenu(
     submenu: isDev
       ? [
           { ...shared.reload, accelerator: 'Command+R' },
+          { ...shared.storybook, accelerator: 'Command+Shift+S' },
           { ...shared.toggleDevTools, accelerator: 'Alt+Command+I' },
       ]
       : [{ ...shared.fullScreen, accelerator: 'Ctrl+Command+F' }],

src/main/menu/shared-menu.ts

@@ -1,4 +1,5 @@
-import { shell } from 'electron'
+import * as log from 'electron-log'
+import { shell, ipcMain } from 'electron'
 
 export function createSharedMenuItems(window: Electron.BrowserWindow) {
   const visit: Electron.MenuItemConstructorOptions = {
@@ -15,6 +16,14 @@ export function createSharedMenuItems(window: Electron.BrowserWindow) {
     },
   }
 
+  const storybook: Electron.MenuItemConstructorOptions = {
+    label: 'Toggle Storybook',
+    click() {
+      log.info('gonna send')
+      ipcMain.emit('storybook-toggle')
+    },
+  }
+
   const quit: Electron.MenuItemConstructorOptions = { label: 'Quit', role: 'quit' }
 
   const toggleDevTools: Electron.MenuItemConstructorOptions = {
@@ -34,6 +43,7 @@ export function createSharedMenuItems(window: Electron.BrowserWindow) {
   return {
     visit,
     reload,
+    storybook,
     quit,
     toggleDevTools,
     fullScreen,

src/main/menu/windows-menu.ts

@@ -16,6 +16,7 @@ export function createWindowsMenu(
     submenu: isDev
       ? [
           { ...shared.reload, accelerator: 'Ctrl+R' },
+          { ...shared.storybook, accelerator: 'Ctrl+Shift+S' },
           { ...shared.toggleDevTools, accelerator: 'Ctrl+Alt+I' },
       ]
       : [{ ...shared.fullScreen, accelerator: 'Ctrl+Alt+F' }],

src/renderer/features/example-using-tabs/fun-dog/fun-dog.story.tsx

@@ -1,6 +1,18 @@
 import * as React from 'react'
 import { storiesOf } from '@storybook/react'
+import {
+  StorybookStory as Story,
+  StorybookGroup as Group,
+} from '../../../platform/components/storybook'
 
-import { FunDog } from './index'
+import { FunDog } from './fun-dog'
 
-storiesOf('Fun Dog', module).add('default', () => <FunDog />)
+storiesOf('Fun Dog', module).add('default', () =>
+  <Story>
+    <Group title='is a doggo'>
+      <div style={{ display: 'flex', flexDirection: 'row' }}>
+        <FunDog />
+      </div>
+    </Group>
+  </Story>,
+)