Merge pull request #3504 from nm123github/addmarkosupport

Add marko support to storybooksJS

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)| [Mithril](app/mithril)| [HTML](app/html)|
+| |[React](app/react)|[React Native](app/react-native)|[Vue](app/vue)|[Angular](app/angular)| [Polymer](app/polymer)| [Mithril](app/mithril)| [HTML](app/html)| [Marko](app/marko)|
 | ----------- |:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|
-|[a11y](addons/a11y)              |+| | | | | |+|
-|[actions](addons/actions)        |+|+|+|+|+|+|+|
-|[backgrounds](addons/backgrounds)  |+| | | | |+|+|
-|[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)      |+| |+|+|+|+|+|
+|[a11y](addons/a11y)              |+| | | | | |+| |
+|[actions](addons/actions)        |+|+|+|+|+|+|+|+|
+|[backgrounds](addons/backgrounds)  |+| | | | |+|+| |
+|[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

@@ -74,6 +74,7 @@ For additional help, join us [in our Slack](https://now-examples-slackin-rrirkqo
 -   [Angular](app/angular)
 -   [Polymer](app/polymer)
 -   [Mithril](app/mithril) <sup>alpha</sup>
+-   [Marko](app/marko) <sup>alpha</sup>
 -   [HTML](app/html) <sup>alpha</sup>
 
 ### Sub Projects
@@ -111,6 +112,7 @@ See [Addon / Framework Support Table](ADDONS_SUPPORT.md)
 - [Angular](https://storybooks-angular.netlify.com/)
 - [Polymer](https://storybooks-polymer.netlify.com/)
 - [Mithril](https://storybooks-mithril.netlify.com/)
+- [Marko](https://storybooks-marko.netlify.com/)
 - [HTML](https://storybooks-html.netlify.com/)
 
 ### 3.4

addons/knobs/marko.js

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

addons/knobs/src/marko/WrapStory.marko

@@ -0,0 +1,70 @@
+class {
+
+  onCreate(input) {
+    this.props = input.props;
+    this.knobChanged = this.knobChanged.bind(this);
+    this.knobClicked = this.knobClicked.bind(this);
+    this.resetKnobs = this.resetKnobs.bind(this);
+    this.setPaneKnobs = this.setPaneKnobs.bind(this);
+  }
+
+  onMount() {
+    // 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();
+  }
+
+  onDestroy() {
+    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.
+    var knobOptions = knobStore.get(name);
+    knobOptions.value = value;
+    knobStore.markAllUnused();
+    
+    this.renderElement(storyFn(context));
+  }
+
+  knobClicked(clicked) {
+    let knobOptions = this.props.knobStore.get(clicked.name);
+    knobOptions.callback();
+  }
+
+  resetKnobs() {
+    const { knobStore, storyFn, context } = this.props;
+    knobStore.reset();
+    this.renderElement(storyFn(context));
+    this.setPaneKnobs(false);
+  }
+
+  renderElement(storyContent) {
+    var WrapperElm = document.getElementById('Wrapper');
+    if(this.currLoadedComponent) {
+      this.currLoadedComponent.destroy();
+      this.currLoadedComponent = null;
+    }
+    this.currLoadedComponent = storyContent.appendTo(WrapperElm).getComponent();
+  }
+}
+
+<div id="Wrapper"></div>

addons/knobs/src/marko/index.js

@@ -0,0 +1,43 @@
+import addons from '@storybook/addons';
+import WrapStory from './WrapStory.marko';
+
+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 markoHandler = (channel, knobStore) => getStory => context => {
+  const initialContent = getStory(context);
+  const props = { context, storyFn: getStory, channel, knobStore, initialContent };
+
+  return WrapStory.renderSync({ props });
+};
+
+function wrapperKnobs(options) {
+  const channel = addons.getChannel();
+  manager.setChannel(channel);
+
+  if (options) channel.emit('addon:knobs:setOptions', options);
+
+  return markoHandler(channel, manager.knobStore);
+}
+
+export function withKnobs(storyFn, context) {
+  return wrapperKnobs()(storyFn)(context);
+}
+
+export function withKnobsOptions(options = {}) {
+  return (storyFn, context) => wrapperKnobs(options)(storyFn)(context);
+}

app/marko/.npmignore

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

app/marko/README.md

@@ -0,0 +1,41 @@
+# Storybook for Marko
+
+[![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 Marko is a UI development environment for your Marko 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-marko-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:
+
+## Docs
+
+-   [Basics](https://storybook.js.org/basics/introduction)
+-   [Configurations](https://storybook.js.org/configurations/default-config)
+-   [Addons](https://storybook.js.org/addons/introduction)

app/marko/bin/build.js

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

app/marko/bin/index.js

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

app/marko/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@storybook/marko",
+  "version": "4.0.0-alpha.4",
+  "description": "Storybook for Marko: Develop Marko Component in isolation with Hot Reloading.",
+  "homepage": "https://github.com/storybooks/storybook/tree/master/app/marko",
+  "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": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@storybook/addons": "4.0.0-alpha.4",
+    "@storybook/channel-postmessage": "4.0.0-alpha.4",
+    "@storybook/client-logger": "4.0.0-alpha.4",
+    "@storybook/core": "4.0.0-alpha.4",
+    "@storybook/node-logger": "4.0.0-alpha.4",
+    "@storybook/ui": "4.0.0-alpha.4",
+    "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.4",
+    "dotenv-webpack": "^1.5.5",
+    "glamor": "^2.20.40",
+    "glamorous": "^4.12.1",
+    "global": "^4.3.2",
+    "html-webpack-plugin": "^3.2.0",
+    "marko-loader": "^1.3.3",
+    "raw-loader": "^0.5.1",
+    "lodash.flattendeep": "^4.4.0",
+    "prop-types": "^15.6.1",
+    "webpack": "^4.5.0",
+    "webpack-hot-middleware": "^2.21.2"
+  },
+  "peerDependencies": {
+    "babel-core": "^6.26.0 || ^7.0.0-0",
+    "babel-runtime": ">=6.0.0"
+  }
+}

app/marko/src/client/index.js

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

app/marko/src/client/preview/index.js

@@ -0,0 +1,17 @@
+import { start } from '@storybook/core/client';
+
+import render from './render';
+
+const { clientApi, configApi, forceReRender } = start(render);
+
+export const {
+  storiesOf,
+  setAddon,
+  addDecorator,
+  addParameters,
+  clearDecorators,
+  getStorybook,
+} = clientApi;
+
+export const { configure } = configApi;
+export { forceReRender };

app/marko/src/client/preview/render.js

@@ -0,0 +1,28 @@
+import { document } from 'global';
+import { stripIndents } from 'common-tags';
+
+const rootEl = document.getElementById('root');
+let currLoadedComponent = null; // currently loaded marko widget!
+
+export default function renderMain({ story, selectedKind, selectedStory, showMain, showError }) {
+  const element = story();
+
+  // We need to unmount the existing set of components in the DOM node.
+  if (currLoadedComponent) {
+    currLoadedComponent.destroy();
+  }
+
+  if (!element || !element.out) {
+    showError({
+      title: `Expecting a Marko element from the story: "${selectedStory}" of "${selectedKind}".`,
+      description: stripIndents`
+        Did you forget to return the Marko element from the story?
+        Use "() => MyComp.renderSync({})" or "() => { return MyComp.renderSync({}); }" when defining the story.
+      `,
+    });
+    return;
+  }
+
+  showMain();
+  currLoadedComponent = element.appendTo(rootEl).getComponent();
+}

app/marko/src/demo/Button.marko

@@ -0,0 +1,9 @@
+class {
+    handleStartClick() {
+      alert('hi')
+    }
+}
+
+<div>
+  <button type="button" on-click("handleStartClick")>Hello!</button>
+</div>

app/marko/src/demo/Welcome.marko

@@ -0,0 +1,32 @@
+<style>
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+
+h1, h2 {
+  font-weight: normal;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+
+a {
+  color: #42b983;
+}
+</style>
+
+<div id="app">
+  <h1>Welcome to Storybook for Marko</h1>
+</div>

app/marko/src/server/build.js

@@ -0,0 +1,12 @@
+import { buildStatic } from '@storybook/core/server';
+import path from 'path';
+import packageJson from '../../package.json';
+import getBaseConfig from './config/webpack.config.prod';
+import loadConfig from './config';
+
+buildStatic({
+  packageJson,
+  getBaseConfig,
+  loadConfig,
+  defaultFavIcon: path.resolve(__dirname, 'public/favicon.ico'),
+});