App for Mithril

.circleci/config.yml

@@ -35,6 +35,7 @@ jobs:
             - node_modules
             - examples/angular-cli/node_modules
             - examples/cra-kitchen-sink/node_modules
+            - examples/mithril-kitchen-sink/node_modules
             - examples/official-storybook/node_modules
             - examples/polymer-cli/node_modules
             - examples/vue-kitchen-sink/node_modules
@@ -100,6 +101,11 @@ jobs:
           command: |
             cd examples/official-storybook
             yarn build-storybook
+      - run:
+          name: "Build mithril kitchen-sink"
+          command: |
+            cd examples/mithril-kitchen-sink
+            yarn build-storybook
       - run:
           name: "Visually test storybook"
           command: |
@@ -148,6 +154,11 @@ jobs:
           command: |
             cd examples/official-storybook
             yarn storybook --smoke-test
+      - run:
+          name: "Run mithril kitchen-sink (smoke test)"
+          command: |
+            cd examples/mithril-kitchen-sink
+            yarn storybook --smoke-test
   react-native:
     <<: *defaults
     steps:

.github/autolabeler.yml

@@ -17,6 +17,7 @@
 'app: react-native': ["app/react-native/**"]
 'app: react': ["app/react/**"]
 'app: vue': ["app/vue/**"]
+'app: mithril': ["app/mithril/**"]
 'babel / webpack': ["webpack", "babel"]
 'cli': ["lib/cli/**"]
 'compatibility with other tools': []

ADDONS_SUPPORT.md

@@ -1,19 +1,19 @@
 ## Addon / Framework Support Table
 
-| |[React](app/react)|[React Native](app/react-native)|[Vue](app/vue)|[Angular](app/angular)| [Polymer](app/polymer)|
-| ----------- |:-------:|:-------:|:-------:|:-------:|:-------:|
-|[a11y](addons/a11y)              |+| | | | |
-|[actions](addons/actions)        |+|+|+|+|+|
-|[background](addons/background)  |+| | | | |
-|[centered](addons/centered)      |+| |+| | |
-|[events](addons/events)          |+| | | | |
-|[graphql](addons/graphql)        |+| | | | |
-|[info](addons/info)              |+| | | | |
-|[jest](addons/jest)              |+| | | | |
-|[knobs](addons/knobs)            |+|+|+|+|+|
-|[links](addons/links)            |+|+|+|+|+|
-|[notes](addons/notes)            |+| |+|+|+|
-|[options](addons/options)        |+|+|+|+|+|
-|[storyshots](addons/storyshots)  |+|+|+|+| |
-|[storysource](addons/storysource)|+| |+|+|+|
-|[viewport](addons/viewport)      |+| |+|+|+|
+| |[React](app/react)|[React Native](app/react-native)|[Vue](app/vue)|[Angular](app/angular)| [Polymer](app/polymer)| [Mithril](app/mithril)|
+| ----------- |:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|
+|[a11y](addons/a11y)              |+| | | | | |
+|[actions](addons/actions)        |+|+|+|+|+|+|
+|[background](addons/background)  |+| | | | |+|
+|[centered](addons/centered)      |+| |+| | |+|
+|[events](addons/events)          |+| | | | | |
+|[graphql](addons/graphql)        |+| | | | | |
+|[info](addons/info)              |+| | | | | |
+|[jest](addons/jest)              |+| | | | | |
+|[knobs](addons/knobs)            |+|+|+|+|+|+|
+|[links](addons/links)            |+|+|+|+|+|+|
+|[notes](addons/notes)            |+| |+|+|+|+|
+|[options](addons/options)        |+|+|+|+|+|+|
+|[storyshots](addons/storyshots)  |+|+|+|+| | |
+|[storysource](addons/storysource)|+| |+|+|+|+|
+|[viewport](addons/viewport)      |+| |+|+|+|+|

README.md

@@ -72,6 +72,7 @@ For additional help, join us [in our Slack](https://now-examples-slackin-rrirkqo
 -   [Vue](app/vue)
 -   [Angular](app/angular)
 -   [Polymer](app/polymer) <sup>alpha</sup>
+-   [Mithril](app/mithril)
 
 ### Sub Projects
 

addons/background/README.md

@@ -69,3 +69,10 @@ storiesOf("Button", module)
   .addDecorator(backgrounds)
   .add("with text", () => <button>Click me</button>);
 ```
+
+> In the case of Mithril, use these imports:
+>
+> ```js
+> import { storiesOf } from '@storybook/mithril';
+> import backgrounds from "@storybook/addon-backgrounds/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/README.md

@@ -49,11 +49,29 @@ storiesOf('MyComponent', module)
   .add('without props', () => ({
     components: { MyComponent },
     template: '<my-component />'
-  })
+  }))
   .add('with some props', () => ({
     components: { MyComponent },
     template: '<my-component text="The Comp"/>'
-  });
+  }));
+```
+
+example for Mithril:
+
+```js
+import { storiesOf } from '@storybook/mithril';
+import centered from '@storybook/addon-centered/mithril';
+
+import MyComponent from '../Component';
+
+storiesOf('MyComponent', module)
+  .addDecorator(centered)
+  .add('without props', () => ({
+    view: () => <MyComponent />
+  }))
+  .add('with some props', () => ({
+    view: () => <MyComponent text="The Comp"/>
+  }));
 ```
 
 Also, you can also add this decorator globally
@@ -84,6 +102,19 @@ configure(function () {
 }, module);
 ```
 
+example for Mithril:
+
+```js
+import { configure, addDecorator } from '@storybook/mithril';
+import centered from '@storybook/addon-centered/mithril';
+
+addDecorator(centered);
+
+configure(function () {
+  //...
+}, module);
+```
+
 #### As an extension
 
 ##### 1 - Configure the extension

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/README.md

@@ -95,6 +95,13 @@ stories.add('as dynamic variables', () => {
 > import { storiesOf } from '@storybook/angular';
 > import { withKnobs, text, boolean, number } from '@storybook/addon-knobs/angular';
 > ```
+>
+> In the case of Mithril, use these imports:
+>
+> ```js
+> import { storiesOf } from '@storybook/mithril';
+> import { withKnobs, text, boolean, number } from '@storybook/addon-knobs/mithril';
+> ```
 
 You can see your Knobs in a Storybook panel as shown below.
 

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');