Merge pull request #2518 from storybooks/angular-support-custom-pipes

Angular Add custom pipes support
storybookjs · Dec 20, 2017 · cb34518 · cb34518
2 parents 20828c6 + 4d8e769
commit cb34518
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 6 deletions.
diff --git a/addons/knobs/src/angular/helpers.js b/addons/knobs/src/angular/helpers.js
@@ -2,7 +2,7 @@
 
 import { Component, SimpleChange, ChangeDetectorRef } from '@angular/core';
 
-const getComponentMetadata = ({ component, props = {} }) => {
+const getComponentMetadata = ({ component, props = {}, pipes = [] }) => {
   if (!component || typeof component !== 'function') throw new Error('No valid component provided');
 
   const componentMeta = component.__annotations__[0] || component.annotations[0];
@@ -11,6 +11,7 @@ const getComponentMetadata = ({ component, props = {} }) => {
   return {
     component,
     props,
+    pipes,
     componentMeta,
     propsMeta,
     params: paramsMetadata,
@@ -95,7 +96,7 @@ const resetKnobs = (knobStore, channel) => {
 
 export function prepareComponent({ getStory, context, channel, knobStore }) {
   resetKnobs(knobStore, channel);
-  const { component, componentMeta, props, propsMeta, params } = getComponentMetadata(
+  const { component, componentMeta, props, pipes, propsMeta, params } = getComponentMetadata(
     getStory(context)
   );
 
@@ -112,6 +113,7 @@ export function prepareComponent({ getStory, context, channel, knobStore }) {
   return {
     component: AnnotatedComponent,
     props,
+    pipes,
     propsMeta,
   };
 }
diff --git a/app/angular/src/client/preview/angular/app.token.ts b/app/angular/src/client/preview/angular/app.token.ts
@@ -1,9 +1,10 @@
-import { InjectionToken } from "@angular/core";
+import { InjectionToken, PipeTransform } from "@angular/core";
 
 export const STORY = new InjectionToken<Data>("story");
 
 export type Data = {
   component: any;
   props: object;
   propsMeta: object;
+  pipes: PipeTransform[];
 }
diff --git a/app/angular/src/client/preview/angular/helpers.ts b/app/angular/src/client/preview/angular/helpers.ts
@@ -33,7 +33,7 @@ const debounce = (func, wait = 100, immediate = false) => {
 	};
 };
 
-const getComponentMetadata = ({ component, props = {}, propsMeta = {} }) => {
+const getComponentMetadata = ({ component, props = {}, propsMeta = {}, pipes = [] }) => {
   if (!component || typeof component !== "function")
     throw new Error("No valid component provided");
 
@@ -50,6 +50,7 @@ const getComponentMetadata = ({ component, props = {}, propsMeta = {} }) => {
   return {
     component,
     props,
+    pipes,
     componentMeta: componentMetadata,
     propsMeta: propsMetadata,
     params: paramsMetadata
@@ -88,6 +89,7 @@ const initModule = (currentStory, context, reRender) => {
     component,
     componentMeta,
     props,
+    pipes,
     propsMeta,
     params
   } = getComponentMetadata(currentStory(context));
@@ -107,7 +109,7 @@ const initModule = (currentStory, context, reRender) => {
     propsMeta
   };
   const Module = getModule(
-    [AppComponent, AnnotatedComponent],
+    [AppComponent, AnnotatedComponent, ...pipes],
     [AnnotatedComponent],
     [AppComponent],
     story

diff --git a/examples/angular-cli/src/stories/custom.pipe.ts b/examples/angular-cli/src/stories/custom.pipe.ts
@@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'customPipe'
+})
+export class CustomPipePipe implements PipeTransform {
+  transform(value: any, args?: any): any {
+    return `CustomPipe: ${value}`;
+  }
+}
diff --git a/examples/angular-cli/src/stories/index.ts b/examples/angular-cli/src/stories/index.ts
@@ -20,6 +20,27 @@ import { Welcome, Button } from '@storybook/angular/demo';
 import { SimpleKnobsComponent } from './knobs.component';
 import { AllKnobsComponent } from './all-knobs.component';
 import { AppComponent } from '../app/app.component';
+import { NameComponent } from './name.component';
+import { CustomPipePipe } from './custom.pipe';
+
+storiesOf('Custom Pipe', module)
+  .add('Default', () => ({
+    component: NameComponent,
+    props: {
+      field: 'foobar',
+    },
+    pipes: [ CustomPipePipe ],
+  }));
+
+storiesOf('Custom Pipe/With Knobs', module)
+  .addDecorator(withKnobs)
+  .add('NameComponent', () => ({
+    component: NameComponent,
+    props: {
+      field: text('field', 'foobar'),
+    },
+    pipes: [ CustomPipePipe ],
+  }));
 
 storiesOf('Welcome', module)
   .add('to Storybook', () => ({

diff --git a/examples/angular-cli/src/stories/name.component.ts b/examples/angular-cli/src/stories/name.component.ts
@@ -0,0 +1,9 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'name',
+  template: `<h1>{{ field | customPipe }}</h1>`
+})
+export class NameComponent {
+  @Input() field;
+}
diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
     "docs:dev": "npm --prefix docs run dev",
     "github-release": "github-release-from-changelog",
     "lint": "yarn lint:js . && yarn lint:md .",
-    "lint:js": "NODE_ENV=production eslint --cache --cache-location=.cache/eslint --ext .js,.jsx,.json",
+    "lint:js": "cross-env NODE_ENV=production eslint --cache --cache-location=.cache/eslint --ext .js,.jsx,.json",
     "lint:md": "remark",
     "publish": "lerna publish",
     "test": "./scripts/test.js",