use @storybook/react (^5.1) with inferno & typescript

README.md

/**
 * Copyright 2019
 * @author Stephane M. Catala
 * @license Apache Version 2.0
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *  http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * Limitations under the License.
 */

first install @storybook/react as explained here, except that instead of react and react-dom, install inferno-compat and corresponding dependencies:

npm i -D @storybook/react babel-core inferno-compat inferno-clone-vnode inferno-create-class ts-loader@3

since storybook requires createContext from react, which is missing in inferno-compat, add it by first installing create-react-context for react, and by adding the following inferno-compat.js script in .storybook/:

import React from 'inferno-compat'
export default React
export * from 'inferno-compat'
// bypass export of React.createContext
import createContext from 'create-react-context/lib/implementation'
export { createContext }

finally, update storybook's webpack configuration with the following webpack.config.js script in .storybook/:

// https://storybook.js.org/docs/configurations/custom-webpack-config/#full-control-mode
const path = require('path')

// ignore `mode` parameter: storybook runs in dev mode
module.exports = (config) => {
  // example typescript configuration
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    include: path.resolve(__dirname, '../src'),
    loader: 'ts-loader',
    options: {
      configFile: path.resolve(__dirname, '../src/tsconfig.json'),
      logLevel: 'info',
      compilerOptions: {
        sourceMap: true // https://github.com/TypeStrong/ts-loader#devtool--sourcemaps
      }
    }
  })
  config.resolve.extensions = (config.resolve.extensions || []).concat('.ts', '.tsx')
  config.devtool = 'inline-source-map' // development only

  // inferno-compat setup
  config.resolve.alias = Object.assign({}, config.resolve.alias, {
    // use inferno dev builds
    inferno: 'inferno/dist/index.dev.esm.js',
    'inferno-create-element': 'inferno-create-element/dist/index.dev.esm.js',
    // replace react with inferno
    react: path.resolve(__dirname, './react-compat'),
    'react-devtools': 'inferno-devtools',
    'react-dom': 'inferno-compat',
  })

  return config
}