config.js

import React from "react"
import { configure } from "@storybook/react";
import "../src/styles.scss"

const req = require.context("../src", true, /.*\.(stories|story).(js|tsx)$/)

function loadStories() {
  req.keys().forEach(filename => req(filename))
}

configure(loadStories, module);

package.json

{
  "name": "formbuilder",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "@storybook/addon-actions": "^3.2.12",
    "@storybook/react": "^3.2.12",
    "@types/storybook__addon-actions": "^3.0.1",
    "@types/storybook__react": "^3.0.5"
  },
  "dependencies": {
    "@types/classnames": "2.2.3",
    "@types/core-decorators": "0.10.32",
    "@types/enzyme": "2.7.7",
    "@types/flat": "0.0.28",
    "@types/google-map-react": "0.23.0",
    "@types/googlemaps": "3.26.20",
    "@types/humps": "1.1.2",
    "@types/jest": "19.2.2",
    "@types/jquery": "2.0.41",
    "@types/lodash": "4.14.74",
    "@types/node": "^8.0.34",
    "@types/qs": "6.5.0",
    "@types/radium": "0.18.20",
    "@types/react": "15.0.39",
    "@types/react-dnd": "2.0.34",
    "@types/react-dnd-html5-backend": "2.1.7",
    "@types/react-dom": "0.14.23",
    "@types/react-dropzone": "0.0.32",
    "@types/react-input-mask": "0.7.7",
    "@types/react-paginate": "4.3.1",
    "@types/react-redux": "4.4.38",
    "@types/react-router-dom": "4.0.8",
    "@types/react-select": "1.0.45",
    "@types/react-sortable-hoc": "0.6.0",
    "@types/reactstrap": "4.6.1",
    "@types/recompose": "0.23.1",
    "@types/redux-actions": "2.2.2",
    "@types/redux-mock-store": "0.0.7",
    "@types/toastr": "2.1.34",
    "@types/uuid": "2.0.29",
    "@types/validatorjs": "3.7.0",
    "ajv": "5.1.0",
    "ajv-i18n": "1.6.3",
    "awesome-typescript-loader": "3.1.2",
    "axios": "0.16.1",
    "axios-mock-adapter": "1.9.0",
    "babel-core": "6.22.1",
    "babel-eslint": "7.1.1",
    "babel-loader": "6.2.10",
    "babel-plugin-transform-class-properties": "6.22.0",
    "babel-plugin-transform-decorators-legacy": "1.3.4",
    "babel-plugin-transform-object-rest-spread": "6.22.0",
    "babel-preset-es2015": "6.22.0",
    "babel-preset-react": "6.22.0",
    "bootstrap": "4.0.0-beta",
    "bootstrap-datepicker": "1.6.4",
    "camelcase": "4.1.0",
    "chance": "1.0.6",
    "classnames": "2.2.5",
    "clean-webpack-plugin": "0.1.15",
    "colors": "1.1.2",
    "copy-webpack-plugin": "4.0.1",
    "core-decorators": "0.17.0",
    "css-loader": "0.26.2",
    "debug": "2.6.3",
    "decamelize": "1.2.0",
    "dotenv": "4.0.0",
    "enzyme": "2.7.1",
    "eslint": "3.14.1",
    "eslint-config-airbnb": "14.0.0",
    "eslint-import-resolver-webpack": "0.8.1",
    "eslint-plugin-import": "2.2.0",
    "eslint-plugin-jsx-a11y": "3.0.2",
    "eslint-plugin-react": "6.9.0",
    "extract-text-webpack-plugin": "2.1.2",
    "file-loader": "0.9.0",
    "flat": "2.0.1",
    "flightplan": "0.6.17",
    "flow": "0.2.3",
    "flow-bin": "0.47.0",
    "font-awesome": "4.7.0",
    "generator-generator": "2.1.0",
    "google-map-react": "0.24.0",
    "hot-formula-parser": "^2.3.0",
    "html-webpack-plugin": "2.28.0",
    "humps": "2.0.1",
    "husky": "0.14.3",
    "jest": "19.0.2",
    "jquery": "3.1.1",
    "jquery-modal": "0.8.0",
    "js-cookie": "2.1.3",
    "lint-staged": "4.0.1",
    "lodash": "4.17.4",
    "moment": "2.17.1",
    "node-sass": "4.5.0",
    "object-path-immutable": "0.5.1",
    "prettier": "1.5.2",
    "qs": "6.5.0",
    "react": "15.4.2",
    "react-addons-css-transition-group": "15.4.2",
    "react-addons-test-utils": "15.4.2",
    "react-addons-transition-group": "15.4.2",
    "react-datetime": "2.8.6",
    "react-dev-utils": "0.5.2",
    "react-dnd": "2.2.4",
    "react-dnd-html5-backend": "2.2.4",
    "react-dom": "15.4.2",
    "react-dropzone": "3.13.1",
    "react-input-mask": "1.0.7",
    "react-input-range": "1.2.1",
    "react-mentions": "^1.2.1",
    "react-numeric-input": "2.0.7",
    "react-paginate": "4.4.3",
    "react-redux": "5.0.2",
    "react-router-dom": "4.1.1",
    "react-select": "1.0.0-rc.3",
    "react-shared-state": "0.1.2",
    "react-sortable-hoc": "0.6.6",
    "reactstrap": "5.0.0-alpha.0",
    "recompose": "0.23.5",
    "redux": "3.6.0",
    "redux-actions": "2.0.1",
    "redux-mock-store": "1.2.3",
    "redux-persist": "4.4.2",
    "redux-test-utils": "0.1.2",
    "redux-thunk": "2.2.0",
    "reflect-metadata": "0.1.10",
    "replaceall": "0.1.6",
    "resolve-url-loader": "2.0.2",
    "sass-loader": "6.0.2",
    "sift": "3.2.7",
    "sort-by": "1.2.0",
    "style-loader": "0.13.2",
    "styled-components": "2.1.1",
    "toastr": "2.1.2",
    "ts-jest": "19.0.7",
    "tslint": "5.2.0",
    "tslint-react": "3.0.0",
    "typescript": "2.5.3",
    "uuid": "3.0.1",
    "validatorjs": "https://github.com/skaterdav85/validatorjs#e6717aa01bf553b2ff5ee91006467e13a138f16e",
    "webpack": "2.2",
    "webpack-dev-server": "2.4.1",
    "webpack-hot-middleware": "2.17.0",
    "webpack-visualizer-plugin": "0.1.11",
    "yup": "0.21.3"
  },
  "scripts": {
    "start": "webpack-dev-server --config ./webpack/main.config.js --inline --progress --colors --hot",
    "start-embedded": "webpack-dev-server --config ./webpack/embedded.config.js --inline --progress --colors --hot",
    "test": "jest",
    "build": "webpack -p --config ./webpack/main.config.js",
    "build-embedded": "webpack -p --config ./webpack/embedded.config.js",
    "build-storybook": "build-storybook; pwd; mv ./storybook-static ./dist/storybook/;",
    "build-beta": "yarn build -- --define process.env.API_HOST=\\\"https://beta.rater.triplepointdemo.com\\\";",
    "build-dev": "yarn build -- --define process.env.API_HOST=\\\"https://rater.triplepointdemo.com\\\"; yarn build-storybook",
    "build-embedded-beta": "yarn build-embedded -- --define process.env.API_HOST=\\\"https://beta.rater.triplepointdemo.com\\\";",
    "build-embedded-dev": "yarn build-embedded -- --define process.env.API_HOST=\\\"https://rater.triplepointdemo.com\\\"",
    "lint": "eslint --ext .jsx --ext .js .",
    "storybook": "start-storybook -p 6006",
    "pretty-ts": "prettier --write --print-width=120 --parser=typescript --single-quote --no-semi --trailing-comma all \"src/**/*.{ts,tsx}\"",
    "pretty-ts-once": "prettier --write --print-width=120 --parser=typescript --single-quote --no-semi --trailing-comma all",
    "pretty-js": "prettier --write --print-width=120 --single-quote --no-semi --trailing-comma all \"src/**/*.{js,jsx}\""
  },
  "jest": {
    "modulePaths": [
      "<rootDir>/src"
    ],
    "transform": {
      ".+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
      ".+\\.(ts|tsx)$": "<rootDir>/scripts/preprocessor.js"
    },
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx"
    ],
    "testRegex": "(\\.(test|spec))\\.(ts|tsx|js|jsx)$",
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>./scripts/fileMock.js",
      "\\.(scss|css|less)$": "<rootDir>./scripts/styleMock.js"
    },
    "globals": {
      "__TS_CONFIG__": "./tsconfig.json"
    }
  },
  "eslintConfig": {
    "extends": "react-app"
  }
}

webpack.config.js

const path = require('path');
const webpack = require('@storybook/react/node_modules/webpack');

const isBuild = process.argv.find(arg => arg.indexOf('build-storybook') > 0);

module.exports = {
  devtool: 'eval',
  entry: {
    vendors: ['react', 'react-dom'],
    client: './client.tsx',
  },
  resolve: {
    modules: [path.resolve(__dirname, '../', 'src'), "node_modules"],
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'awesome-typescript-loader'
      },
      {
        test: /\.scss$/,
        loaders: ['style-loader', 'css-loader', 'sass-loader'],
        include: path.resolve(__dirname, '../', 'src'),
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader',
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'file-loader',
      },
    ],
  },
  plugins: isBuild ? [] : [new webpack.HotModuleReplacementPlugin()],
};