Merge pull request #58 from rmevans9/storybook-ify

Storybook-ify this thing!

Author: skellock

.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register'
+import '@storybook/addon-links/register'

.storybook/config.js

@@ -0,0 +1,9 @@
+import { configure } from '@storybook/react'
+
+const req = require.context('../src', true, /story\.tsx?$/)
+
+function loadStories() {
+  req.keys().forEach((filename) => req(filename))
+}
+
+configure(loadStories, module)

.storybook/webpack.config.js

@@ -0,0 +1,18 @@
+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',
+        exclude: /node_modules/,
+        include: path.resolve(__dirname, '..', 'src')
+    })
+
+    myConfig.resolve.extensions.unshift('.tsx')
+    myConfig.resolve.extensions.unshift('.ts')
+
+    return myConfig
+}

package.json

@@ -4,7 +4,9 @@
     "name": "Steve Kellock"
   },
   "ava": {
-    "require": ["./out-test/main/test/setup.js"]
+    "require": [
+      "./out-test/main/test/setup.js"
+    ]
   },
   "build": {
     "appId": "com.example.electron-starter",
@@ -19,7 +21,9 @@
       "!globals.d.ts"
     ],
     "linux": {
-      "target": ["tar.gz"]
+      "target": [
+        "tar.gz"
+      ]
     },
     "mac": {
       "category": "public.app-category.developer-tools"
@@ -31,7 +35,10 @@
       "repo": "electron-starter"
     },
     "win": {
-      "target": ["zip", "nsis"]
+      "target": [
+        "zip",
+        "nsis"
+      ]
     }
   },
   "dependencies": {
@@ -52,13 +59,15 @@
   },
   "description": "An electron starter project.",
   "devDependencies": {
+    "@storybook/react": "^3.2.4",
     "@types/electron-store": "1.2.0",
     "@types/mockery": "1.4.29",
     "@types/mousetrap": "1.5.34",
     "@types/react": "15.0.38",
     "@types/react-dom": "15.5.2",
     "@types/react-test-renderer": "15.5.2",
     "@types/sinon": "2.3.3",
+    "@types/storybook__react": "^3.0.3",
     "ava": "0.21.0",
     "babel-preset-react": "6.24.1",
     "electron": "1.7.5",
@@ -72,6 +81,7 @@
     "prettier": "1.5.3",
     "react-test-renderer": "15.6.1",
     "sinon": "3.2.0",
+    "ts-loader": "^2.3.2",
     "ts-node": "3.3.0",
     "tslint": "5.6.0",
     "tslint-eslint-rules": "4.1.1",
@@ -112,7 +122,9 @@
     "test:compile": "tsc -p tsconfig.test.json",
     "test:unit": "ava out-test/**/*.test.js",
     "watch:compile": "npm run test:compile -- -w",
-    "watch:tests": "npm run test:unit -- --watch"
+    "watch:tests": "npm run test:unit -- --watch",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "version": "0.12.0"
 }

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

@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { storiesOf } from '@storybook/react'
+
+import { FunDog } from './index'
+
+storiesOf('Fun Dog', module).add('default', () => <FunDog />)

src/renderer/platform/components/text/text.story.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react'
+import { storiesOf } from '@storybook/react'
+
+import { Text } from './index'
+
+storiesOf('Text', module).add('default', () => <Text>Hello World!</Text>).add('with children', () =>
+  <Text>
+    <strong>I am STRONG</strong>
+  </Text>,
+)

tsconfig.json

@@ -5,7 +5,7 @@
     "moduleResolution": "node",
     "jsx": "react",
     "experimentalDecorators": true,
-    "allowSyntheticDefaultImports": false,
+    "allowSyntheticDefaultImports": true,
     "strict": true,
     "noUnusedLocals": true
   }

tsconfig.test.json

@@ -5,7 +5,7 @@
     "moduleResolution": "node",
     "jsx": "react",
     "experimentalDecorators": true,
-    "allowSyntheticDefaultImports": false,
+    "allowSyntheticDefaultImports": true,
     "strict": true,
     "noUnusedLocals": true,