App for Mithril

addons/background/mithril.js

@@ -0,0 +1 @@
+module.exports = require('./dist/mithril');

addons/background/src/mithril.js

@@ -0,0 +1,39 @@
+/** @jsx m */
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import m from 'mithril';
+
+import addons from '@storybook/addons';
+
+export class BackgroundDecorator {
+  constructor(vnode) {
+    this.props = vnode.attrs;
+
+    const { channel, story } = vnode.attrs;
+
+    // A channel is explicitly passed in for testing
+    if (channel) {
+      this.channel = channel;
+    } else {
+      this.channel = addons.getChannel();
+    }
+
+    this.story = story();
+  }
+
+  oncreate() {
+    this.channel.emit('background-set', this.props.backgrounds);
+  }
+
+  onremove() {
+    this.channel.emit('background-unset');
+  }
+
+  view() {
+    return m(this.story);
+  }
+}
+
+export default backgrounds => story => ({
+  view: () => <BackgroundDecorator story={story} backgrounds={backgrounds} />,
+});

addons/centered/mithril.js

@@ -0,0 +1 @@
+module.exports = require('./dist/mithril');

addons/centered/src/mithril.js

@@ -0,0 +1,30 @@
+/** @jsx m */
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import m from 'mithril';
+
+const style = {
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  overflow: 'auto',
+};
+
+const innerStyle = {
+  margin: 'auto',
+};
+
+export default function(storyFn) {
+  return {
+    view: () => (
+      <div style={style}>
+        <div style={innerStyle}>{m(storyFn())}</div>
+      </div>
+    ),
+  };
+}

addons/knobs/mithril.js

@@ -0,0 +1 @@
+module.exports = require('./dist/mithril');

addons/knobs/src/mithril/WrapStory.js

@@ -0,0 +1,68 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import m from 'mithril';
+
+export default class WrapStory {
+  constructor(vnode) {
+    this.knobChanged = this.knobChanged.bind(this);
+    this.knobClicked = this.knobClicked.bind(this);
+    this.resetKnobs = this.resetKnobs.bind(this);
+    this.setPaneKnobs = this.setPaneKnobs.bind(this);
+    this.props = vnode.attrs;
+    this.storyContent = vnode.attrs.initialContent;
+  }
+
+  oncreate() {
+    // Watch for changes in knob editor.
+    this.props.channel.on('addon:knobs:knobChange', this.knobChanged);
+    // Watch for clicks in knob editor.
+    this.props.channel.on('addon:knobs:knobClick', this.knobClicked);
+    // Watch for the reset event and reset knobs.
+    this.props.channel.on('addon:knobs:reset', this.resetKnobs);
+    // Watch for any change in the knobStore and set the panel again for those
+    // changes.
+    this.props.knobStore.subscribe(this.setPaneKnobs);
+    // Set knobs in the panel for the first time.
+    this.setPaneKnobs();
+  }
+
+  onremove() {
+    this.props.channel.removeListener('addon:knobs:knobChange', this.knobChanged);
+    this.props.channel.removeListener('addon:knobs:knobClick', this.knobClicked);
+    this.props.channel.removeListener('addon:knobs:reset', this.resetKnobs);
+    this.props.knobStore.unsubscribe(this.setPaneKnobs);
+  }
+
+  setPaneKnobs(timestamp = +new Date()) {
+    const { channel, knobStore } = this.props;
+    channel.emit('addon:knobs:setKnobs', { knobs: knobStore.getAll(), timestamp });
+  }
+
+  knobChanged(change) {
+    const { name, value } = change;
+    const { knobStore, storyFn, context } = this.props;
+    // Update the related knob and it's value.
+    const knobOptions = knobStore.get(name);
+
+    knobOptions.value = value;
+    knobStore.markAllUnused();
+    this.storyContent = storyFn(context);
+    m.redraw();
+  }
+
+  knobClicked(clicked) {
+    const knobOptions = this.props.knobStore.get(clicked.name);
+    knobOptions.callback();
+  }
+
+  resetKnobs() {
+    const { knobStore, storyFn, context } = this.props;
+    knobStore.reset();
+    this.storyContent = storyFn(context);
+    m.redraw();
+    this.setPaneKnobs(false);
+  }
+
+  view() {
+    return m(this.storyContent);
+  }
+}

addons/knobs/src/mithril/index.js

@@ -0,0 +1,49 @@
+/** @jsx m */
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import m from 'mithril';
+import addons from '@storybook/addons';
+
+import WrapStory from './WrapStory';
+
+import {
+  knob,
+  text,
+  boolean,
+  number,
+  color,
+  object,
+  array,
+  date,
+  select,
+  selectV2,
+  button,
+  manager,
+} from '../base';
+
+export { knob, text, boolean, number, color, object, array, date, select, selectV2, button };
+
+export const mithrilHandler = (channel, knobStore) => getStory => context => {
+  const initialContent = getStory(context);
+  const props = { context, storyFn: getStory, channel, knobStore, initialContent };
+  return {
+    view: () => <WrapStory {...props} />,
+  };
+};
+
+function wrapperKnobs(options) {
+  const channel = addons.getChannel();
+  manager.setChannel(channel);
+
+  if (options) channel.emit('addon:knobs:setOptions', options);
+
+  return mithrilHandler(channel, manager.knobStore);
+}
+
+export function withKnobs(storyFn, context) {
+  return wrapperKnobs()(storyFn)(context);
+}
+
+export function withKnobsOptions(options = {}) {
+  return (storyFn, context) => wrapperKnobs(options)(storyFn)(context);
+}

app/mithril/.npmignore

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

app/mithril/README.md

@@ -0,0 +1,33 @@
+# Storybook for Mithril
+
+[![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 Mithril is a UI development environment for your Mithril 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-mithril-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.

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,70 @@
+{
+  "name": "@storybook/mithril",
+  "version": "3.4.0-rc.3",
+  "description": "Storybook for Mithril: Develop Mithril Component in isolation.",
+  "homepage": "https://github.com/storybooks/storybook/tree/master/app/mithril",
+  "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-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-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-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",
+    "global": "^4.3.2",
+    "html-loader": "^0.5.5",
+    "html-webpack-plugin": "^2.30.1",
+    "json5": "^0.5.1",
+    "markdown-loader": "^2.0.2",
+    "react": "^16.2.0",
+    "react-dev-utils": "^5.0.0",
+    "react-dom": "^16.2.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": {
+    "mithril": "^1.1.6",
+    "nodemon": "^1.17.2"
+  },
+  "peerDependencies": {
+    "babel-core": "^6.26.0 || ^7.0.0-0",
+    "babel-runtime": ">=6.0.0",
+    "mithril": "^1.1.6"
+  }
+}

app/mithril/src/client/index.js

@@ -0,0 +1,8 @@
+export {
+  storiesOf,
+  setAddon,
+  addDecorator,
+  configure,
+  getStorybook,
+  forceReRender,
+} from './preview';

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

@@ -0,0 +1,45 @@
+/** @jsx m */
+
+import m from 'mithril';
+
+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 = {
+  view: vnode => (
+    <div style={mainStyle}>
+      <div style={headingStyle}>{vnode.attrs.error.message}</div>
+      <pre style={codeStyle}>
+        <code>{vnode.attrs.error.stack}</code>
+      </pre>
+    </div>
+  ),
+};
+
+export default ErrorDisplay;