[framework] add ember support

.circleci/config.yml

@@ -4,7 +4,7 @@ aliases:
   - &defaults
     working_directory: /tmp/storybook
     docker:
-      - image: circleci/node:8
+      - image: circleci/node:8.12.0
 
 dependencies:
   pre:
@@ -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: |

.eslintignore

@@ -6,6 +6,7 @@ docs/public
 storybook-static
 built-storybooks
 lib/cli/test
+examples/ember-cli
 *.bundle.js
 *.js.map
 

.teamcity/OpenSourceProjects_Storybook/buildTypes/StorybookApp.kt

@@ -9,6 +9,7 @@ import jetbrains.buildServer.configs.kotlin.v2017_2.failureConditions.failOnMetr
 enum class StorybookApp(val appName: String, val exampleDir: String, val merged: Boolean = true) {
     CRA("CRA", "cra-kitchen-sink"),
     VUE("Vue", "vue-kitchen-sink"),
+    EMBER("Ember", "ember-cli"),
     ANGULAR("Angular", "angular-cli"),
     POLYMER("Polymer", "polymer-cli"),
     MITHRIL("Mithril", "mithril-kitchen-sink"),

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

addons/storyshots/storyshots-core/.eslintrc.js

@@ -2,6 +2,7 @@ module.exports = {
   settings: {
     'import/core-modules': [
       '@storybook/angular',
+      '@storybook/ember',
       '@storybook/html',
       '@storybook/react',
       '@storybook/react-native',

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
+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.
+
+## 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",
+    "babel-plugin-ember-modules-api-polyfill": "^2.4.0",
+    "common-tags": "^1.8.0",
+    "ember-cli-htmlbars-inline-precompile": "^1.0.3",
+    "ember-source": "^3.4.0",
+    "global": "^4.3.2"
+  },
+  "peerDependencies": {
+    "babel-loader": "^7.0.0 || ^8.0.0 || ^8.0.0-beta.6"
+  }
+}

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,18 @@
+import { precompile } from 'ember-source/dist/ember-template-compiler';
+
+export function babel(config) {
+  // Ensure plugins are defined or fallback to an array to avoid empty values.
+  const babelConfigPlugins = config.plugins || [];
+
+  const extraPlugins = [
+    [require.resolve('babel-plugin-htmlbars-inline-precompile'), { precompile }],
+    [require.resolve('babel-plugin-ember-modules-api-polyfill')],
+  ];
+
+  // If `babelConfigPlugins` is not an `Array`, calling `concat` will inject it
+  // as a single value, if it is an `Array` it will be spreaded.
+  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')],
+};

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

examples/ember-cli/.storybook/addons.js

@@ -0,0 +1,9 @@
+import '@storybook/addon-a11y/register';
+import '@storybook/addon-storysource/register';
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';
+import '@storybook/addon-notes/register';
+import '@storybook/addon-knobs/register';
+import '@storybook/addon-viewport/register';
+import '@storybook/addon-options/register';
+import '@storybook/addon-backgrounds/register';

examples/ember-cli/.storybook/config.js

@@ -0,0 +1,15 @@
+import { configure } from '@storybook/ember';
+import { setOptions } from '@storybook/addon-options';
+
+setOptions({
+  hierarchyRootSeparator: /\|/,
+});
+
+function loadStories() {
+  require('../stories/index.stories');
+
+  const req = require.context('../stories', true, /\.stories\.js$/);
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

examples/ember-cli/.storybook/preview-head.html

@@ -0,0 +1,10 @@
+<meta name="ember-example/config/environment" content="%7B%22modulePrefix%22%3A%22ember-example%22%2C%22environment%22%3A%22test%22%2C%22rootURL%22%3A%22/%22%2C%22locationType%22%3A%22auto%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%2C%22EXTEND_PROTOTYPES%22%3A%7B%22Date%22%3Afalse%7D%7D%2C%22APP%22%3A%7B%22name%22%3A%22ember-example%22%2C%22version%22%3A%224.0.0-alpha.23+4f61a2fb%22%7D%7D" />
+
+<link integrity="" rel="stylesheet" href="./assets/vendor.css">
+<link integrity="" rel="stylesheet" href="./assets/ember-example.css">
+
+<script src="./assets/vendor.js"></script>
+<script>
+  runningTests = true;
+</script>
+<script src="./assets/ember-example.js"></script>

examples/ember-cli/.storybook/webpack.config.js

@@ -0,0 +1,12 @@
+const path = require('path');
+
+module.exports = (storybookBaseConfig, configType, defaultConfig) => {
+  defaultConfig.module.rules.push({
+    test: [/\.stories\.js$/, /index\.js$/],
+    loaders: [require.resolve('@storybook/addon-storysource/loader')],
+    include: [path.resolve(__dirname, '../')],
+    enforce: 'pre',
+  });
+
+  return defaultConfig;
+};

examples/ember-cli/README.md

@@ -0,0 +1,3 @@
+# Storybook Demo
+
+This is a demo app to test Ember integration with Storybook. Run `npm install` to sync Storybook module with the source code and run `npm run storybook` to start the Storybook.