[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)      |+| |+|+|+|+|+|+|+|+|+|

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')],
+};

docs/src/pages/testing/automated-visual-testing/index.md

@@ -61,18 +61,18 @@ Here's a sample Storybook we'd like to visually test:
 
 The Storybook UI has a bunch of elements you wouldn't want to include in your visual test. Besides being extraneous, your tests could incorrectly fail when you add a new, unrelated story or state because it would show up in the side menu.
 
-Instead, we'll want to render a component's story by itself. Let's assume the above Storybook runs on port 9009 and we can access it via http://localhost:9009/.
+Instead, we'll want to render a component's story by itself. Let's assume the above Storybook runs on port 9009 and we can access it via [http://localhost:9009/](http://localhost:9009/).
 
 Now let's pick a single story: the "with text" story of the Button.
 
-The URL for that story contains a number of query parameters, but the first two are the most important: http://localhost:9009/?selectedKind=Button&selectedStory=with+text
+The URL for that story contains a number of query parameters, but the first two are the most important: [http://localhost:9009/?selectedKind=Button&selectedStory=with+text](http://localhost:9009/?selectedKind=Button&selectedStory=with+text)
 
 - selectedKind=Button
 - selectedStory=with+text
 
 Using these two parameters we can generate the URL to render the story by itself. Instead of the URL's path being the homepage/index we use `/iframe.html`:
 
-http://localhost:9009/iframe.html?selectedKind=Button&selectedStory=with+text
+[http://localhost:9009/iframe.html?selectedKind=Button&selectedStory=with+text](http://localhost:9009/iframe.html?selectedKind=Button&selectedStory=with+text)
 
 ![Storybook iframe Screenshot](../static/storybook-iframe-screenshot.png)
 

examples/ember-cli/.ember-cli

@@ -0,0 +1,9 @@
+{
+  /**
+    Ember CLI sends analytics information by default. The data is completely
+    anonymous, but there are times when you might want to disable this behavior.
+
+    Setting `disableAnalytics` to true will prevent any data from being sent.
+  */
+  "disableAnalytics": false
+}

examples/ember-cli/.env

@@ -0,0 +1,2 @@
+STORYBOOK_EXAMPLE_APP=true
+STORYBOOK_NAME=ember-example

examples/ember-cli/.eslintrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  rules: {
+    'import/extensions': 0,
+  },
+  settings: {
+    'import/core-modules': [
+      '@ember/component',
+      '@ember/routing/router',
+      '@ember/application',
+      './config/environment',
+      'htmlbars-inline-precompile',
+    ],
+  },
+};

examples/ember-cli/.gitignore

@@ -0,0 +1,15 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# testing
+coverage
+
+# production
+build
+
+# misc
+.DS_Store
+npm-debug.log
+tmp