create app/mithril by copying app/react

app/mithril/.npmignore

@@ -0,0 +1,2 @@
+docs
+.babelrc

app/mithril/README.md

@@ -0,0 +1,48 @@
+# Storybook for React
+
+[![Build Status on CircleCI](https://circleci.com/gh/storybooks/storybook.svg?style=shield)](https://circleci.com/gh/storybooks/storybook)
+[![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)
+[![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
+[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)  
+[![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](https://now-examples-slackin-rrirkqohko.now.sh/)
+[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#sponsors)
+
+* * *
+
+Storybook for React is a UI development environment for your React components.
+With it, you can visualize different states of your UI components and develop them interactively.
+
+![Storybook Screenshot](docs/demo.gif)
+
+Storybook runs outside of your app.
+So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
+
+## Getting Started
+
+```sh
+npm i -g @storybook/cli
+cd my-react-app
+getstorybook
+```
+
+For more information visit: [storybook.js.org](https://storybook.js.org)
+
+* * *
+
+Storybook also comes with a lot of [addons](https://storybook.js.org/addons/introduction) and a great API to customize as you wish.
+You can also build a [static version](https://storybook.js.org/basics/exporting-storybook) of your storybook and deploy it anywhere you want.
+
+Here are some featured storybooks that you can reference to see how Storybook works:
+
+-   [Demo of React Dates](http://airbnb.io/react-dates/) - [source](https://github.com/airbnb/react-dates)
+-   [Demo of React Native Web](http://necolas.github.io/react-native-web/storybook/) - [source](https://github.com/necolas/react-native-web)
+
+## Typescript
+
+If you are using Typescript, make sure you have the type definitions installed via `yarn add @types/node @types/react @types/storybook__react --dev`.
+
+## Docs
+
+-   [Basics](https://storybook.js.org/basics/introduction)
+-   [Configurations](https://storybook.js.org/configurations/default-config)
+-   [Addons](https://storybook.js.org/addons/introduction)

app/mithril/addons.js

@@ -0,0 +1,6 @@
+import deprecate from 'util-deprecate';
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';
+
+deprecate(() => {},
+'@storybook/react/addons is deprecated. See https://storybook.js.org/addons/using-addons/')();

app/mithril/bin/build.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+require('../dist/server/build');

app/mithril/bin/index.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+require('../dist/server');

app/mithril/demo.js

@@ -0,0 +1,5 @@
+/* eslint-disable global-require */
+module.exports = {
+  Welcome: require('./dist/demo/Welcome').default,
+  Button: require('./dist/demo/Button').default,
+};

app/mithril/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@storybook/react",
+  "version": "3.4.0-rc.3",
+  "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
+  "homepage": "https://github.com/storybooks/storybook/tree/master/app/react",
+  "bugs": {
+    "url": "https://github.com/storybooks/storybook/issues"
+  },
+  "license": "MIT",
+  "main": "dist/client/index.js",
+  "jsnext:main": "src/client/index.js",
+  "bin": {
+    "build-storybook": "./bin/build.js",
+    "start-storybook": "./bin/index.js",
+    "storybook-server": "./bin/index.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybooks/storybook.git"
+  },
+  "scripts": {
+    "dev": "cross-env DEV_BUILD=1 nodemon --watch ./src --exec \"yarn prepare\"",
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@storybook/addon-actions": "3.4.0-rc.3",
+    "@storybook/addon-links": "3.4.0-rc.3",
+    "@storybook/addons": "3.4.0-rc.3",
+    "@storybook/channel-postmessage": "3.4.0-rc.3",
+    "@storybook/client-logger": "3.4.0-rc.3",
+    "@storybook/core": "3.4.0-rc.3",
+    "@storybook/node-logger": "3.4.0-rc.3",
+    "@storybook/ui": "3.4.0-rc.3",
+    "airbnb-js-shims": "^1.4.1",
+    "babel-loader": "^7.1.4",
+    "babel-plugin-macros": "^2.2.0",
+    "babel-plugin-react-docgen": "^1.8.3",
+    "babel-plugin-transform-regenerator": "^6.26.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-minify": "^0.3.0",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
+    "babel-runtime": "^6.26.0",
+    "case-sensitive-paths-webpack-plugin": "^2.1.2",
+    "common-tags": "^1.7.2",
+    "core-js": "^2.5.3",
+    "dotenv-webpack": "^1.5.5",
+    "find-cache-dir": "^1.0.0",
+    "glamor": "^2.20.40",
+    "glamorous": "^4.12.1",
+    "global": "^4.3.2",
+    "html-loader": "^0.5.5",
+    "html-webpack-plugin": "^2.30.1",
+    "json5": "^0.5.1",
+    "lodash.flattendeep": "^4.4.0",
+    "markdown-loader": "^2.0.2",
+    "prop-types": "^15.6.1",
+    "react-dev-utils": "^5.0.0",
+    "redux": "^3.7.2",
+    "uglifyjs-webpack-plugin": "^1.2.4",
+    "util-deprecate": "^1.0.2",
+    "webpack": "^3.11.0",
+    "webpack-hot-middleware": "^2.21.2"
+  },
+  "devDependencies": {
+    "nodemon": "^1.17.2"
+  },
+  "peerDependencies": {
+    "babel-core": "^6.26.0 || ^7.0.0-0",
+    "babel-runtime": ">=6.0.0",
+    "react": ">=15.0.0 || ^16.0.0",
+    "react-dom": ">=15.0.0 || ^16.0.0"
+  }
+}

app/mithril/src/client/index.js

@@ -0,0 +1,24 @@
+import deprecate from 'util-deprecate';
+
+// NOTE export these to keep backwards compatibility
+import { action as deprecatedAction } from '@storybook/addon-actions';
+import { linkTo as deprecatedLinkTo } from '@storybook/addon-links';
+
+export {
+  storiesOf,
+  setAddon,
+  addDecorator,
+  configure,
+  getStorybook,
+  forceReRender,
+} from './preview';
+
+export const action = deprecate(
+  deprecatedAction,
+  '@storybook/react action is deprecated. See: https://github.com/storybooks/storybook/tree/master/addons/actions'
+);
+
+export const linkTo = deprecate(
+  deprecatedLinkTo,
+  '@storybook/react linkTo is deprecated. See: https://github.com/storybooks/storybook/tree/master/addons/links'
+);

app/mithril/src/client/preview/element_check.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import flattenDeep from 'lodash.flattendeep';
+
+// return true if the element is renderable with react fiber
+export const isValidFiberElement = element =>
+  typeof element === 'string' || typeof element === 'number' || React.isValidElement(element);
+
+export const isPriorToFiber = version => {
+  const [majorVersion] = version.split('.');
+
+  return Number(majorVersion) < 16;
+};
+
+// accepts an element and return true if renderable else return false
+const isReactRenderable = element => {
+  // storybook is running with a version prior to fiber,
+  // run a simple check on the element
+  if (isPriorToFiber(React.version)) {
+    return React.isValidElement(element);
+  }
+
+  // the element is not an array, check if its a fiber renderable element
+  if (!Array.isArray(element)) {
+    return isValidFiberElement(element);
+  }
+
+  // the element is in fact a list of elements (array),
+  // loop on its elements to see if its ok to render them
+  const elementsList = element.map(isReactRenderable);
+
+  // flatten the list of elements (possibly deep nested)
+  const flatList = flattenDeep(elementsList);
+
+  // keep only invalid elements
+  const invalidElements = flatList.filter(elementIsRenderable => elementIsRenderable === false);
+
+  // it's ok to render this list if there is no invalid elements inside
+  return !invalidElements.length;
+};
+
+export default isReactRenderable;

app/mithril/src/client/preview/element_check.test.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import isReactRenderable, { isValidFiberElement, isPriorToFiber } from './element_check';
+
+describe('element_check.utils.isValidFiberElement', () => {
+  it('should accept to render a string', () => {
+    const string = 'react is awesome';
+
+    expect(isValidFiberElement(string)).toBe(true);
+  });
+
+  it('should accept to render a number', () => {
+    const number = 42;
+
+    expect(isValidFiberElement(number)).toBe(true);
+  });
+
+  it('should accept to render a valid React element', () => {
+    const element = <button>Click me</button>;
+
+    expect(isValidFiberElement(element)).toBe(true);
+  });
+
+  it("shouldn't accept to render an arbitrary object", () => {
+    const object = { key: 'bee bop' };
+
+    expect(isValidFiberElement(object)).toBe(false);
+  });
+
+  it("shouldn't accept to render a function", () => {
+    const noop = () => {};
+
+    expect(isValidFiberElement(noop)).toBe(false);
+  });
+
+  it("shouldn't accept to render undefined", () => {
+    expect(isValidFiberElement(undefined)).toBe(false);
+  });
+});
+
+describe('element_check.utils.isPriorToFiber', () => {
+  it('should return true if React version is prior to Fiber (< 16)', () => {
+    const oldVersion = '0.14.5';
+    const version = '15.5.4';
+
+    expect(isPriorToFiber(oldVersion)).toBe(true);
+    expect(isPriorToFiber(version)).toBe(true);
+  });
+
+  it('should return false if React version is using Fiber features (>= 16)', () => {
+    const alphaVersion = '16.0.0-alpha.13';
+    const version = '18.3.1';
+
+    expect(isPriorToFiber(alphaVersion)).toBe(false);
+    expect(isPriorToFiber(version)).toBe(false);
+  });
+});
+
+describe('element_check.isReactRenderable', () => {
+  const string = 'yo';
+  const number = 1337;
+  const element = <span>what's up</span>;
+  const array = [string, number, element];
+  const object = { key: null };
+
+  it('allows rendering React elements only prior to React Fiber', () => {
+    // mutate version for the purpose of the test
+    React.version = '15.5.4';
+
+    expect(isReactRenderable(string)).toBe(false);
+    expect(isReactRenderable(number)).toBe(false);
+    expect(isReactRenderable(element)).toBe(true);
+    expect(isReactRenderable(array)).toBe(false);
+    expect(isReactRenderable(object)).toBe(false);
+  });
+
+  it('allows rendering string, numbers, arrays and React elements with React Fiber', () => {
+    // mutate version for the purpose of the test
+    React.version = '16.0.0-alpha.13';
+
+    expect(isReactRenderable(string)).toBe(true);
+    expect(isReactRenderable(number)).toBe(true);
+    expect(isReactRenderable(element)).toBe(true);
+    expect(isReactRenderable(array)).toBe(true);
+    expect(isReactRenderable(object)).toBe(false);
+  });
+});

app/mithril/src/client/preview/error_display.js

@@ -0,0 +1,49 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const mainStyle = {
+  position: 'fixed',
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0,
+  padding: 20,
+  backgroundColor: 'rgb(187, 49, 49)',
+  color: '#FFF',
+  WebkitFontSmoothing: 'antialiased',
+};
+
+const headingStyle = {
+  fontSize: 20,
+  fontWeight: 600,
+  letterSpacing: 0.2,
+  margin: '10px 0',
+  fontFamily: `
+    -apple-system, ".SFNSText-Regular", "San Francisco", Roboto, "Segoe UI",
+    "Helvetica Neue", "Lucida Grande", sans-serif
+    `,
+};
+
+const codeStyle = {
+  fontSize: 14,
+  width: '100vw',
+  overflow: 'auto',
+};
+
+const ErrorDisplay = ({ error }) => (
+  <div style={mainStyle}>
+    <div style={headingStyle}>{error.message}</div>
+    <pre style={codeStyle}>
+      <code>{error.stack}</code>
+    </pre>
+  </div>
+);
+
+ErrorDisplay.propTypes = {
+  error: PropTypes.shape({
+    message: PropTypes.string,
+    stack: PropTypes.string,
+  }).isRequired,
+};
+
+export default ErrorDisplay;