Merge pull request #4237 from gabrielcsapo/storybook-emberjs

[framework] add ember support

.circleci/config.yml

@@ -37,6 +37,7 @@ jobs:
           paths:
             - node_modules
             - examples/angular-cli/node_modules
+            - examples/ember-cli/node_modules
             - examples/cra-kitchen-sink/node_modules
             - examples/mithril-kitchen-sink/node_modules
             - examples/official-storybook/node_modules
@@ -78,6 +79,11 @@ jobs:
           command: |
             cd examples/angular-cli
             yarn build-storybook
+      - run:
+          name: Build ember-cli
+          command: |
+            cd examples/ember-cli
+            yarn build-storybook
       - run:
           name: Build polymer-cli
           command: |
@@ -140,6 +146,11 @@ jobs:
           command: |
             cd examples/angular-cli
             yarn storybook --smoke-test
+      - run:
+          name: Run ember-cli (smoke test)
+          command: |
+            cd examples/ember-cli
+            yarn storybook --smoke-test
       - run:
           name: Run polymer-cli (smoke test)
           command: |

.teamcity/OpenSourceProjects_Storybook/buildTypes/StorybookApp.kt

@@ -17,7 +17,7 @@ enum class StorybookApp(val appName: String, val exampleDir: String, val merged:
     SVELTE("Svelte", "svelte-kitchen-sink"),
     RIOT("Riot", "riot-kitchen-sink"),
     HYPERAPP("Hyperapp", "hyperapp-kitchen-sink", false),
-    EMBER("Ember", "ember-cli", false);
+    EMBER("Ember", "ember-cli");
 
     val lowerName = appName.toLowerCase()
 

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)| [Marko](app/marko)| [Svelte](app/svelte)| [Riot](app/riot)|
-| ----------- |:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|
-|[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)      |+| |+|+|+|+|+|+|+|+|
+| | [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)| [Svelte](app/svelte)| [Riot](app/riot)| [Ember](app/ember)|
+| ----------- |:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|
+|[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

@@ -91,6 +91,7 @@ For additional help, join us [in our Slack](https://now-examples-slackin-rrirkqo
 | [HTML](app/html) <sup>alpha</sup> | - | [v4.0.0-alpha](https://storybooks-html.netlify.com/) | [![HTML](https://img.shields.io/npm/dt/@storybook/html.svg)](app/html) |
 | [Svelte](app/svelte) <sup>alpha</sup> | - | [v4.0.0-alpha](https://storybooks-svelte.netlify.com/) | [![Svelte](https://img.shields.io/npm/dt/@storybook/svelte.svg)](app/svelte) |
 | [Riot](app/riot) <sup>alpha</sup> | - | [v4.0.0-alpha](https://storybooks-riot.netlify.com/) | [![Riot](https://img.shields.io/npm/dt/@storybook/riot.svg)](app/riot) |
+| [Ember](app/ember) | - | [v4.0.0-alpha](https://storybooks-ember.netlify.com/) | [![Ember](https://img.shields.io/npm/dt/@storybook/ember.svg)](app/ember) |
 
 ### Sub Projects
 

ROADMAP.md

@@ -11,7 +11,6 @@
 * [Supporting other frameworks and libraries](#supporting-other-frameworks-and-libraries)
   + [Polymer & Webcomponents](#polymer---webcomponents)
   + [Aurelia](#aurelia)
-  + [Ember](#ember)
 * [Breaking changes](#breaking-changes)
   + [Addon API](#addon-api)
   + [API for adding stories](#api-for-adding-stories)
@@ -69,10 +68,6 @@ Storybook for Polymer is currently in development, and will support custom eleme
 
 We're reaching out to the Aurelia maintainers to cooperate on this.
 
-### Ember
-
-We're reaching out to the Ember maintainers to cooperate on this.
-
 ## Breaking changes
 
 ### Addon API
@@ -92,7 +87,7 @@ We have a new logo, so next step is a overhaul of our documentation site.
 
 ### Record videos and write blog post on how to use, tweak & develop storybook
 
--   writing addons, 
+-   writing addons,
 -   choosing the right addons.
 -   how to start developing on our codebase.
 -   how to use storybook itself and the CLI.

addons/centered/ember.js

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

addons/centered/src/ember.js

@@ -0,0 +1,25 @@
+import { document } from 'global';
+import styles from './styles';
+
+export default function(storyFn) {
+  const { template, context } = storyFn();
+
+  const element = document.createElement('div');
+  Object.assign(element.style, styles.style);
+
+  const innerElement = document.createElement('div');
+  Object.assign(innerElement.style, styles.innerStyle);
+
+  element.appendChild(innerElement);
+
+  // the inner element should append the parent
+  innerElement.appendTo = function appendTo(el) {
+    el.appendChild(element);
+  };
+
+  return {
+    template,
+    context,
+    element: innerElement,
+  };
+}

app/ember/README.md

@@ -0,0 +1,30 @@
+# Storybook for Ember
+
+Storybook for Ember is a UI development environment for your Ember components.
+With it, you can visualize different states of your UI components and develop them interactively.
+
+![Storybook Screenshot](https://github.com/storybooks/storybook/blob/master/media/storybook-intro.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-ember-app
+storybook init
+```
+
+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.
+
+## Docs
+
+-   [Basics](https://storybook.js.org/basics/introduction)
+-   [Configurations](https://storybook.js.org/configurations/default-config)
+-   [Addons](https://storybook.js.org/addons/introduction)

app/ember/bin/build.js

@@ -0,0 +1,4 @@
+#!/usr/bin/env node
+
+process.env.NODE_ENV = process.env.NODE_ENV || 'production';
+require('../dist/server/build');

app/ember/bin/index.js

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

app/ember/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@storybook/ember",
+  "version": "4.0.0-alpha.23",
+  "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
+  "homepage": "https://github.com/storybooks/storybook/tree/master/app/ember",
+  "bugs": {
+    "url": "https://github.com/storybooks/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybooks/storybook.git"
+  },
+  "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"
+  },
+  "scripts": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.0.0",
+    "@ember/test-helpers": "^0.7.25",
+    "@storybook/core": "4.0.0-alpha.23",
+    "global": "^4.3.2"
+  },
+  "peerDependencies": {
+    "babel-plugin-ember-modules-api-polyfill": "^2.4.0",
+    "babel-loader": "^7.0.0 || ^8.0.0",
+    "common-tags": "^1.8.0",
+    "ember-cli-htmlbars-inline-precompile": "^1.0.3",
+    "ember-source": "^3.4.0"
+  }
+}

app/ember/src/client/index.js

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

app/ember/src/client/preview/globals.js

@@ -0,0 +1,4 @@
+import { window } from 'global';
+
+window.STORYBOOK_NAME = process.env.STORYBOOK_NAME;
+window.STORYBOOK_ENV = 'ember';

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

@@ -0,0 +1,18 @@
+import { start } from '@storybook/core/client';
+
+import './globals';
+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/ember/src/client/preview/render.js

@@ -0,0 +1,71 @@
+/* eslint-disable no-undef */
+import { window, document } from 'global';
+import { stripIndents } from 'common-tags';
+
+const rootEl = document.getElementById('root');
+
+const config = window.require(`${window.STORYBOOK_NAME}/config/environment`);
+const app = window.require(`${window.STORYBOOK_NAME}/app`).default.create({
+  autoboot: false,
+  rootElement: rootEl,
+  ...config.APP,
+});
+
+let lastPromise = app.boot();
+let hasRendered = false;
+
+function render(options, el) {
+  const { template, context = {}, element } = options;
+
+  if (hasRendered) {
+    lastPromise = lastPromise.then(instance => instance.destroy());
+  }
+
+  lastPromise = lastPromise
+    .then(() => {
+      const appInstancePrivate = app.buildInstance();
+      return appInstancePrivate.boot().then(() => appInstancePrivate);
+    })
+    .then(instance => {
+      instance.register(
+        'component:story-mode',
+        Ember.Component.extend({
+          layout: template || options,
+          ...context,
+        })
+      );
+
+      const component = instance.lookup('component:story-mode');
+
+      if (element) {
+        component.appendTo(element);
+
+        element.appendTo(el);
+      } else {
+        component.appendTo(el);
+      }
+      hasRendered = true;
+
+      return instance;
+    });
+}
+
+export default function renderMain({ story, selectedKind, selectedStory, showMain, showError }) {
+  const element = story();
+
+  if (!element) {
+    showError({
+      title: `Expecting a Ember element from the story: "${selectedStory}" of "${selectedKind}".`,
+      description: stripIndents`
+        Did you forget to return the Ember element from the story?
+        Use "() => hbs('{{component}}')" or "() => { return {
+          template: hbs\`{{component}}\`
+        } }" when defining the story.
+      `,
+    });
+    return;
+  }
+
+  showMain();
+  render(element, rootEl);
+}

app/ember/src/server/build.js

@@ -0,0 +1,4 @@
+import { buildStatic } from '@storybook/core/server';
+import options from './options';
+
+buildStatic(options);

app/ember/src/server/framework-preset-babel-ember.js

@@ -0,0 +1,15 @@
+import { precompile } from 'ember-source/dist/ember-template-compiler';
+
+export function babel(config) {
+  const babelConfigPlugins = config.plugins || [];
+
+  const extraPlugins = [
+    [require.resolve('babel-plugin-htmlbars-inline-precompile'), { precompile }],
+    [require.resolve('babel-plugin-ember-modules-api-polyfill')],
+  ];
+
+  return {
+    ...config,
+    plugins: [].concat(babelConfigPlugins, extraPlugins),
+  };
+}

app/ember/src/server/index.js

@@ -0,0 +1,5 @@
+import { buildDev } from '@storybook/core/server';
+
+import options from './options';
+
+buildDev(options);

app/ember/src/server/options.js

@@ -0,0 +1,7 @@
+import packageJson from '../../package.json';
+
+export default {
+  packageJson,
+  defaultConfigName: 'ember-cli',
+  frameworkPresets: [require.resolve('./framework-preset-babel-ember.js')],
+};