storybookjs · shilman · Oct 16, 2017 · Jul 14, 2017 · Jul 14, 2017 · Jul 14, 2017
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -60,6 +60,12 @@ jobs:
             cd examples/vue-kitchen-sink
             yarn build-storybook
             yarn storybook --smoke-test
+      - run:
+          name: "Build angular kitchen-sink"
+          command: |
+            cd examples/angular-cli
+            yarn build-storybook
+            yarn storybook --smoke-test
   example-react-native:
     <<: *defaults
     steps:
@@ -219,4 +225,4 @@ workflows:
       #     requires:
       #       - lint
       #       - unit-test
-      #       - docs
+      #       - docs
diff --git a/addons/knobs/README.md b/addons/knobs/README.md
@@ -78,6 +78,13 @@ stories.add('as dynamic variables', () => {
 > import { storiesOf } from '@storybook/react-native';
 > import { withKnobs, text, boolean, number } from '@storybook/addon-knobs/react';
 > ```
+>
+> In the case of Angular, use these imports:
+>
+> ```js
+> import { storiesOf } from '@storybook/angular';
+> import { withKnobs, text, boolean, number } from '@storybook/addon-knobs/angular';
+> ```
 
 You can see your Knobs in a Storybook panel as shown below.
 

diff --git a/addons/knobs/angular.js b/addons/knobs/angular.js
@@ -0,0 +1 @@
+module.exports = require('./dist/angular');
diff --git a/addons/knobs/package.json b/addons/knobs/package.json
@@ -14,6 +14,7 @@
     "storybook": "start-storybook -p 9010"
   },
   "dependencies": {
+    "@angular/core": "^5.0.0-beta.7",
     "@storybook/addons": "^3.3.0-alpha.2",
     "babel-runtime": "^6.26.0",
     "deep-equal": "^1.0.1",
@@ -35,7 +36,7 @@
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
     "style-loader": "^0.19.0",
-    "typescript": "^2.2.2",
+    "typescript": "^2.4.0",
     "typescript-definition-tester": "^0.0.5",
     "vue": "^2.4.2"
   },

diff --git a/addons/knobs/src/angular/helpers.js b/addons/knobs/src/angular/helpers.js
@@ -0,0 +1,110 @@
+/* eslint no-underscore-dangle: 0 */
+
+import { Component, SimpleChange, ChangeDetectorRef } from '@angular/core';
+
+const getComponentMetadata = ({ component, props = {} }) => {
+  if (!component || typeof component !== 'function') throw new Error('No valid component provided');
+
+  const componentMeta = component.__annotations__[0] || component.annotations[0];
+  const propsMeta = component.__prop__metadata__ || component.propMetadata || {};
+  const paramsMetadata = component.__parameters__ || component.parameters || [];
+  return {
+    component,
+    props,
+    componentMeta,
+    propsMeta,
+    params: paramsMetadata,
+  };
+};
+
+const getAnnotatedComponent = ({ componentMeta, component, params, knobStore, channel }) => {
+  const NewComponent = function NewComponent(cd, ...args) {
+    component.call(this, ...args);
+    this.cd = cd;
+    this.knobChanged = this.knobChanged.bind(this);
+    this.setPaneKnobs = this.setPaneKnobs.bind(this);
+  };
+  NewComponent.prototype = Object.create(component.prototype);
+  NewComponent.__annotations__ = [new Component(componentMeta)];
+  NewComponent.__parameters__ = [[ChangeDetectorRef], ...params];
+
+  NewComponent.prototype.constructor = NewComponent;
+  NewComponent.prototype.ngOnInit = function onInit() {
+    if (component.prototype.ngOnInit) {
+      component.prototype.ngOnInit();
+    }
+
+    channel.on('addon:knobs:knobChange', this.knobChanged);
+    knobStore.subscribe(this.setPaneKnobs);
+    this.setPaneKnobs();
+  };
+
+  NewComponent.prototype.ngOnDestroy = function onDestroy() {
+    if (component.prototype.ngOnDestroy) {
+      component.prototype.ngOnDestroy();
+    }
+
+    channel.removeListener('addon:knobs:knobChange', this.knobChanged);
+    knobStore.unsubscribe(this.setPaneKnobs);
+  };
+
+  NewComponent.prototype.ngOnChanges = function onChanges(changes) {
+    if (component.prototype.ngOnChanges) {
+      component.prototype.ngOnChanges(changes);
+    }
+  };
+
+  NewComponent.prototype.setPaneKnobs = function setPaneKnobs(timestamp = +new Date()) {
+    channel.emit('addon:knobs:setKnobs', {
+      knobs: knobStore.getAll(),
+      timestamp,
+    });
+  };
+
+  NewComponent.prototype.knobChanged = function knobChanged(change) {
+    const { name, value } = change;
+    const knobOptions = knobStore.get(name);
+    const oldValue = knobOptions.value;
+    knobOptions.value = value;
+    knobStore.markAllUnused();
+    const lowercasedName = name.toLocaleLowerCase();
+    this[lowercasedName] = value;
+    this.cd.detectChanges();
+    this.ngOnChanges({
+      [lowercasedName]: new SimpleChange(oldValue, value, false),
+    });
+  };
+
+  return NewComponent;
+};
+
+const resetKnobs = (knobStore, channel) => {
+  knobStore.reset();
+  channel.emit('addon:knobs:setKnobs', {
+    knobs: knobStore.getAll(),
+    timestamp: false,
+  });
+};
+
+export function prepareComponent({ getStory, context, channel, knobStore }) {
+  resetKnobs(knobStore, channel);
+  const { component, componentMeta, props, propsMeta, params } = getComponentMetadata(
+    getStory(context)
+  );
+
+  if (!componentMeta) throw new Error('No component metadata available');
+
+  const AnnotatedComponent = getAnnotatedComponent({
+    componentMeta,
+    component,
+    params,
+    knobStore,
+    channel,
+  });
+
+  return {
+    component: AnnotatedComponent,
+    props,
+    propsMeta,
+  };
+}
diff --git a/addons/knobs/src/angular/index.js b/addons/knobs/src/angular/index.js
@@ -0,0 +1,27 @@
+import addons from '@storybook/addons';
+
+import { prepareComponent } from './helpers';
+
+import { knob, text, boolean, number, color, object, array, date, select, manager } from '../base';
+
+export { knob, text, boolean, number, color, object, array, date, select };
+
+export const angularHandler = (channel, knobStore) => getStory => context =>
+  prepareComponent({ getStory, context, channel, knobStore });
+
+function wrapperKnobs(options) {
+  const channel = addons.getChannel();
+  manager.setChannel(channel);
+
+  if (options) channel.emit('addon:knobs:setOptions', options);
+
+  return angularHandler(channel, manager.knobStore);
+}
+
+export function withKnobs(storyFn, context) {
+  return wrapperKnobs()(storyFn)(context);
+}
+
+export function withKnobsOptions(options = {}) {
+  return (storyFn, context) => wrapperKnobs(options)(storyFn)(context);
+}
diff --git a/addons/knobs/tsconfig.json b/addons/knobs/tsconfig.json
@@ -2,6 +2,8 @@
     "compilerOptions": {
         "module": "commonjs",
         "target": "es5",
+        "experimentalDecorators": true,
+        "emitDecoratorMetadata": true,
         "noImplicitAny": false,
         "sourceMap": false,
 		"lib": [

diff --git a/app/angular/.babelrc b/app/angular/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["env", "stage-0", "react"]
+}
diff --git a/app/angular/.npmignore b/app/angular/.npmignore
@@ -0,0 +1,3 @@
+docs
+src
+.babelrc
diff --git a/app/angular/README.md b/app/angular/README.md
@@ -0,0 +1,34 @@
+# Storybook for Angular
+
+Storybook for Angular is a UI development environment for your React components.
+With it, you can visualize different states of your UI components and develop them interactively.
+
+[![Greenkeeper badge](https://badges.greenkeeper.io/storybooks/storybook.svg)](https://greenkeeper.io/)
+[![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-nqnzoygycp.now.sh/badge.svg)](https://now-examples-slackin-nqnzoygycp.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 runs outside of your app.
+So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
+
+![Storybook Screenshot](https://github.com/storybooks/storybook/blob/master/app/react/docs/demo.gif)
+
+## Getting Started
+
+```sh
+npm i -g @storybook/cli
+cd my-angular-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.
diff --git a/app/angular/addons.js b/app/angular/addons.js
diff --git a/app/angular/bin/build.js b/app/angular/bin/build.js
@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+require('../dist/server/build');
diff --git a/app/angular/bin/index.js b/app/angular/bin/index.js
@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+require('../dist/server');
diff --git a/app/angular/demo.js b/app/angular/demo.js
@@ -0,0 +1,5 @@
+/* eslint-disable global-require */
+module.exports = {
+  Welcome: require('./dist/demo/welcome.component.ts').default,
+  Button: require('./dist/demo/button.component.ts').default,
+};
diff --git a/app/angular/docs/demo.gif b/app/angular/docs/demo.gif
diff --git a/app/angular/docs/react_storybook_screenshot.png b/app/angular/docs/react_storybook_screenshot.png
diff --git a/app/angular/docs/storybooks_io_logo.png b/app/angular/docs/storybooks_io_logo.png
diff --git a/app/angular/package.json b/app/angular/package.json
@@ -0,0 +1,94 @@
+{
+  "name": "@storybook/angular",
+  "version": "3.3.0-alpha.0",
+  "description": "Storybook for Anglar: Develop Angular Components in isolation with Hot Reloading.",
+  "homepage": "https://github.com/storybooks/storybook/tree/master/apps/angular",
+  "bugs": {
+    "url": "https://github.com/storybooks/storybook/issues"
+  },
+  "license": "MIT",
+  "main": "dist/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": {
+    "dev": "DEV_BUILD=1 nodemon -e js,ts --watch ./src --exec 'npm run prepublish'",
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@angular/common": "^5.0.0-beta.7",
+    "@angular/compiler": "^5.0.0-beta.7",
+    "@angular/core": "^5.0.0-beta.7",
+    "@angular/platform-browser": "^5.0.0-beta.7",
+    "@angular/platform-browser-dynamic": "^5.0.0-beta.7",
+    "@storybook/addon-actions": "^3.3.0-alpha.2",
+    "@storybook/addon-links": "^3.3.0-alpha.2",
+    "@storybook/addons": "^3.3.0-alpha.2",
+    "@storybook/channel-postmessage": "^3.3.0-alpha.2",
+    "@storybook/ui": "^3.3.0-alpha.2",
+    "airbnb-js-shims": "^1.1.1",
+    "angular2-template-loader": "^0.6.2",
+    "autoprefixer": "^7.1.1",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.0.0",
+    "babel-plugin-react-docgen": "^1.6.0",
+    "babel-preset-env": "^1.6.0",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-react-app": "^3.0.0",
+    "babel-preset-stage-0": "^6.24.1",
+    "babel-runtime": "^6.23.0",
+    "case-sensitive-paths-webpack-plugin": "^2.0.0",
+    "chalk": "^2.1.0",
+    "commander": "^2.11.0",
+    "common-tags": "^1.4.0",
+    "configstore": "^3.1.0",
+    "core-js": "^2.4.1",
+    "css-loader": "^0.28.1",
+    "express": "^4.15.3",
+    "file-loader": "^0.11.1",
+    "find-cache-dir": "^1.0.0",
+    "global": "^4.3.2",
+    "html-webpack-plugin": "^2.30.1",
+    "json-loader": "^0.5.4",
+    "json-stringify-safe": "^5.0.1",
+    "json5": "^0.5.1",
+    "lodash.pick": "^4.4.0",
+    "postcss-flexbugs-fixes": "^3.0.0",
+    "postcss-loader": "^2.0.5",
+    "prop-types": "^15.5.10",
+    "qs": "^6.4.0",
+    "raw-loader": "^0.5.1",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "react-modal": "^2.2.4",
+    "redux": "^3.6.0",
+    "request": "^2.81.0",
+    "rxjs": "^5.4.2",
+    "serve-favicon": "^2.4.3",
+    "shelljs": "^0.7.8",
+    "style-loader": "^0.17.0",
+    "ts-loader": "^2.2.2",
+    "url-loader": "^0.5.8",
+    "util-deprecate": "^1.0.2",
+    "uuid": "^3.1.0",
+    "webpack": "^2.5.1 || ^3.0.0",
+    "webpack-dev-middleware": "^1.10.2",
+    "webpack-hot-middleware": "^2.18.0",
+    "zone.js": "^0.8.14"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-plugin-transform-decorators": "^6.24.1",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "codelyzer": "^3.1.2",
+    "mock-fs": "^4.3.0",
+    "nodemon": "^1.12.0",
+    "typescript": "^2.4.0"
+  }
+}
diff --git a/app/angular/src/client/index.js b/app/angular/src/client/index.js
@@ -0,0 +1,7 @@
+import * as previewApi from './preview';
+
+export const storiesOf = previewApi.storiesOf;
+export const setAddon = previewApi.setAddon;
+export const addDecorator = previewApi.addDecorator;
+export const configure = previewApi.configure;
+export const getStorybook = previewApi.getStorybook;
diff --git a/app/angular/src/client/manager/index.js b/app/angular/src/client/manager/index.js
@@ -0,0 +1,6 @@
+import { document } from 'global';
+import renderStorybookUI from '@storybook/ui';
+import Provider from './provider';
+
+const rootEl = document.getElementById('root');
+renderStorybookUI(rootEl, new Provider());
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		#!/usr/bin/env node

		require('../dist/server/build');
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		#!/usr/bin/env node

		require('../dist/server');