Merge pull request #3233 from storybooks/example-with-ngrx-store

Add example for @ngrx/store

examples/angular-cli/package.json

@@ -19,6 +19,7 @@
     "@angular/forms": "^5.2.9",
     "@angular/platform-browser": "^5.2.9",
     "@angular/platform-browser-dynamic": "^5.2.9",
+    "@ngrx/store": "^5.2.0",
     "core-js": "^2.4.1",
     "rxjs": "^5.5.7",
     "zone.js": "^0.8.20"

examples/angular-cli/src/stories/__snapshots__/ngrx-store.stories.storyshot

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots ngrx|Store With component 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-comp-with-store>
+    <div>
+      Store is injected
+    </div>
+  </storybook-comp-with-store>
+</storybook-dynamic-app-root>
+`;
+
+exports[`Storyshots ngrx|Store With template 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <ng-component>
+    <storybook-comp-with-store>
+      <div>
+        Store is injected
+      </div>
+    </storybook-comp-with-store>
+  </ng-component>
+</storybook-dynamic-app-root>
+`;

examples/angular-cli/src/stories/ngrx-store.stories.ts

@@ -0,0 +1,17 @@
+import { StoreModule } from '@ngrx/store';
+import { storiesOf, moduleMetadata } from '@storybook/angular';
+import { WithStoreComponent } from './ngrx/WithStoreComponent';
+
+storiesOf('ngrx|Store', module)
+  .addDecorator(
+    moduleMetadata({
+      imports: [StoreModule.forRoot({})],
+      declarations: [WithStoreComponent],
+    })
+  )
+  .add('With component', () => ({
+    component: WithStoreComponent,
+  }))
+  .add('With template', () => ({
+    template: `<storybook-comp-with-store></storybook-comp-with-store>`,
+  }));

examples/angular-cli/src/stories/ngrx/WithStoreComponent.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+
+@Component({
+  selector: 'storybook-comp-with-store',
+  template: '<div>{{this.getSotreState()}}</div>',
+})
+export class WithStoreComponent {
+  private store: Store<any>;
+
+  constructor(store: Store<any>) {
+    this.store = store;
+  }
+
+  getSotreState() {
+    return this.store === undefined ? 'Store is NOT injected' : 'Store is injected';
+  }
+}

yarn.lock

@@ -214,6 +214,10 @@
     lodash "^4.2.0"
     to-fast-properties "^2.0.0"
 
+"@ngrx/store@^5.2.0":
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/@ngrx/store/-/store-5.2.0.tgz#627ed74c9cd95462930485d912a557117b23903e"
+
 "@ngtools/json-schema@1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@ngtools/json-schema/-/json-schema-1.2.0.tgz#06e5ecd29e9a37d260a447dd873ea2becd228c4f"