feat: adds storybook (#620)

* feat: adds storybook

* Remove yarn.lock from pr (too many conflicts)

* Copy yarn.lock from current master :)

.gitignore

@@ -5,4 +5,6 @@ compiled
 coverage
 .DS_Store
 next.d.ts
-legacy.d.ts
+legacy.d.ts
+.idea
+*.orig

.storybook/config.js

@@ -0,0 +1,7 @@
+import { configure} from '@storybook/react';
+
+function loadStories() {
+  require('./example.stories');
+}
+
+configure(loadStories, module);

.storybook/example.stories.js

@@ -0,0 +1,60 @@
+import {action, storiesOf, module} from '@storybook/react'
+import * as React from 'react'
+import AsyncValidation from '../examples/AsyncValidation'
+import Arrays from '../examples/Arrays'
+import Basic from '../examples/Basic.js'
+import CustomImputs from '../examples/CustomInputs'
+import MultistepWizard from '../examples/MultistepWizard'
+import SchemaValidation from '../examples/SchemaValidation'
+import SyncValidation from '../examples/SyncValidation'
+
+storiesOf('Example', module)
+  .add('Basic', () => {
+    return (
+      <div style={{}}>
+        <Basic />
+      </div>
+    )
+  })
+  .add('Arrays', () => {
+    return (
+      <div style={{}}>
+        <Arrays />
+      </div>
+    )
+  })
+  .add('AsyncValidation', () => {
+    return (
+      <div style={{}}>
+        <AsyncValidation />
+      </div>
+    )
+  })
+  .add('CustomImputs', () => {
+    return (
+      <div style={{}}>
+        <CustomImputs />
+      </div>
+    )
+  })
+  .add('MultistepWizard', () => {
+    return (
+      <div style={{}}>
+        <MultistepWizard />
+      </div>
+    )
+  })
+  .add('SchemaValidation', () => {
+    return (
+      <div style={{}}>
+        <SchemaValidation />
+      </div>
+    )
+  })
+  .add('SyncValidation', () => {
+    return (
+      <div style={{}}>
+        <SyncValidation />
+      </div>
+    )
+  })

.storybook/webpack.config.js

@@ -0,0 +1,23 @@
+const TsConfigPathsPlugin = require('awesome-typescript-loader').TsConfigPathsPlugin;
+
+module.exports = (storybookBaseConfig, configType, defaultConfig) => {
+
+
+  defaultConfig.module.rules.push(
+    {
+      test: /\.tsx?$/,
+      exclude: /node_modules/,
+      loader: 'awesome-typescript-loader',
+    },
+  )
+  defaultConfig.resolve.extensions = ['.ts', '.tsx', '.js', '.jsx']
+  defaultConfig.resolve.plugins = [
+    new TsConfigPathsPlugin({
+      tsconfig: 'tsconfig.json',
+      compiler: 'typescript'
+    })
+  ]
+
+  return defaultConfig
+
+}

examples/MultistepWizard.js

@@ -169,3 +169,5 @@ const App = () => (
     </Wizard>
   </div>
 );
+
+export default App

package.json

@@ -33,6 +33,7 @@
     "prepublish": "npm run build",
     "format": "prettier --trailing-comma es5 --single-quote --write 'src/**/*' 'test/**/*' 'README.md'",
     "precommit": "lint-staged",
+    "storybook": "start-storybook -p 9001",
     "addc": "all-contributors add",
     "start-website": "cd website && yarn start",
     "build-website": "cd website && yarn install && yarn build",
@@ -51,6 +52,7 @@
   },
   "optionalDependencies": {},
   "devDependencies": {
+    "@storybook/react": "^3.4.0",
     "@pisano/enzyme": "^3.3.0-pisano.public.1",
     "@pisano/enzyme-adapter-react-16": "^1.1.1-pisano.public.1",
     "@types/jest": "^22.2.3",
@@ -61,6 +63,7 @@
     "@types/react-test-renderer": "15.5.2",
     "@types/warning": "^3.0.0",
     "all-contributors-cli": "^4.4.0",
+    "awesome-typescript-loader": "^3.4.1",
     "cross-env": "5.0.5",
     "doctoc": "^1.3.0",
     "husky": "0.14.3",

tsconfig.json

@@ -1,4 +1,10 @@
 {
   "extends": "./tsconfig.base.json",
-  "include": ["src", "types", "test"]
+  "include": ["src", "./typings.d.ts", "types", "test"],
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "formik": ["src/"]
+    }
+  }
 }