addon-centered for Angular

ADDONS_SUPPORT.md

@@ -5,7 +5,7 @@
 |[a11y](addons/a11y)              |+| | | | | |+| |
 |[actions](addons/actions)        |+|+|+|+|+|+|+|+|
 |[backgrounds](addons/backgrounds)  |+| | | | |+|+| |
-|[centered](addons/centered)      |+| |+| | |+|+| |
+|[centered](addons/centered)      |+| |+|+| |+|+| |
 |[events](addons/events)          |+| | | | | |+| |
 |[graphql](addons/graphql)        |+| | | | | | | |
 |[info](addons/info)              |+| | | | | | | |

addons/centered/README.md

@@ -74,6 +74,50 @@ storiesOf('MyComponent', module)
   }));
 ```
 
+example for Angular with component:
+
+```ts
+import { ngCentered } from '@storybook/addon-centered';
+import { storiesOf } from '@storybook/angular';
+import { AppComponent } from '../app/app.component';
+
+storiesOf('Addon|Centered', module)
+  .addDecorator(ngCentered)
+  .add('centered component', () => ({
+    component: AppComponent,
+    props: {},
+  }));
+
+```
+
+example for Angular with template:
+
+```ts
+import { ngCentered } from '@storybook/addon-centered';
+import { moduleMetadata, storiesOf } from '@storybook/angular';
+import { AppComponent } from '../app/app.component';
+
+storiesOf('Addon|Centered', module)
+  .addDecorator(
+    moduleMetadata({
+      declarations: [Button],
+    })
+  )
+  .addDecorator(ngCentered)
+  .add('centered template', () => ({
+    template: `<storybook-button-component 
+        [text]="text" (onClick)="onClick($event)">
+      </storybook-button-component>`,
+    props: {
+      text: 'Hello Button',
+      onClick: event => {
+        console.log('some bindings work');
+        console.log(event);
+      },
+    },
+  }));
+```
+
 Also, you can also add this decorator globally
 
 example for React:

addons/centered/src/angular.js

@@ -0,0 +1,58 @@
+import styles from './styles';
+
+function getComponentSelector(component) {
+  // eslint-disable-next-line no-underscore-dangle
+  return component.__annotations__[0].selector;
+}
+
+function getTemplate(metadata) {
+  let tpl = '';
+  if (metadata.component) {
+    const selector = getComponentSelector(metadata.component);
+    tpl = `<${selector}></${selector}>`;
+  }
+
+  if (metadata.template) {
+    tpl = metadata.template;
+  }
+
+  return `      
+      <div [ngStyle]="styles.style">
+        <div [ngStyle]="styles.innerStyle">
+          ${tpl}
+        </div>
+      </div>`;
+}
+
+function getModuleMetadata(metadata) {
+  const { moduleMetadata, component } = metadata;
+
+  if (component && !moduleMetadata) {
+    return {
+      declarations: [metadata.component],
+    };
+  }
+
+  if (component && moduleMetadata) {
+    return {
+      ...moduleMetadata,
+      declarations: [...moduleMetadata.declarations, metadata.component],
+    };
+  }
+
+  return moduleMetadata;
+}
+
+export default function(metadataFn) {
+  const metadata = metadataFn();
+
+  return {
+    ...metadata,
+    template: getTemplate(metadata),
+    moduleMetadata: getModuleMetadata(metadata),
+    props: {
+      ...metadata.props,
+      styles,
+    },
+  };
+}

addons/centered/src/index.js

@@ -1,7 +1,9 @@
 import { window } from 'global';
 import ReactCentered from './react';
 import VueCentered from './vue';
+import AngularCentered from './angular';
 
 const Centered = window.STORYBOOK_ENV === 'vue' ? VueCentered : ReactCentered;
-
 export default Centered;
+
+export const ngCentered = AngularCentered;

examples/angular-cli/package.json

@@ -37,6 +37,7 @@
     "@storybook/addon-links": "4.0.0-alpha.4",
     "@storybook/addon-notes": "4.0.0-alpha.4",
     "@storybook/addon-options": "4.0.0-alpha.4",
+    "@storybook/addon-centered": "4.0.0-alpha.4",
     "@storybook/addon-storyshots": "4.0.0-alpha.4",
     "@storybook/addon-storysource": "4.0.0-alpha.4",
     "@storybook/addons": "4.0.0-alpha.4",

examples/angular-cli/src/stories/__snapshots__/addon-centered.stories.storyshot

@@ -0,0 +1,172 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Centered centered component 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <ng-component>
+
+
+    <div
+      ng-reflect-ng-style="[object Object]"
+      style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; overflow: auto;"
+    >
+
+
+      <div
+        ng-reflect-ng-style="[object Object]"
+        style="margin: auto;"
+      >
+
+
+        <storybook-app-root>
+
+
+          <div
+            class="hide"
+            style="color: red; font-size: 30px; text-align: center;"
+          >
+
+    This should be hidden, if not - scss is not loaded as needed.
+
+          </div>
+
+
+          <div
+            style="text-align:center"
+          >
+
+
+            <h1>
+
+      Welcome to app!
+
+            </h1>
+
+
+            <img
+              src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
+              width="300"
+            />
+
+
+          </div>
+
+
+          <h2>
+            Here are some links to help you start: 
+          </h2>
+
+
+          <ul>
+
+
+            <li>
+
+
+              <h2>
+                <a
+                  href="https://angular.io/tutorial"
+                  target="_blank"
+                >
+                  Tour of Heroes
+                </a>
+              </h2>
+
+
+            </li>
+
+
+            <li>
+
+
+              <h2>
+                <a
+                  href="https://github.com/angular/angular-cli/wiki"
+                  target="_blank"
+                >
+                  CLI Documentation
+                </a>
+              </h2>
+
+
+            </li>
+
+
+            <li>
+
+
+              <h2>
+                <a
+                  href="https://blog.angular.io//"
+                  target="_blank"
+                >
+                  Angular blog
+                </a>
+              </h2>
+
+
+            </li>
+
+
+          </ul>
+
+
+
+        </storybook-app-root>
+
+
+      </div>
+
+
+    </div>
+  </ng-component>
+</storybook-dynamic-app-root>
+`;
+
+exports[`Storyshots Addon|Centered centered template 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <ng-component>
+
+
+    <div
+      ng-reflect-ng-style="[object Object]"
+      style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; overflow: auto;"
+    >
+
+
+      <div
+        ng-reflect-ng-style="[object Object]"
+        style="margin: auto;"
+      >
+
+
+        <storybook-button-component
+          _nghost-c5=""
+          ng-reflect-text="Hello Button"
+        >
+
+
+          <button
+            _ngcontent-c5=""
+          >
+            Hello Button
+          </button>
+
+
+        </storybook-button-component>
+
+
+      </div>
+
+
+    </div>
+  </ng-component>
+</storybook-dynamic-app-root>
+`;

examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot

@@ -7,12 +7,12 @@ exports[`Storyshots Addon|Links button with link to another story 1`] = `
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-c5=""
+    _nghost-c6=""
   >
 
 
     <button
-      _ngcontent-c5=""
+      _ngcontent-c6=""
     >
       Go to Welcome Story
     </button>

examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot

@@ -7,12 +7,12 @@ exports[`Storyshots Addon|Notes Note with HTML 1`] = `
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-c7=""
+    _nghost-c8=""
   >
 
 
     <button
-      _ngcontent-c7=""
+      _ngcontent-c8=""
     >
       Notes with HTML
     </button>
@@ -29,12 +29,12 @@ exports[`Storyshots Addon|Notes Simple note 1`] = `
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-c6=""
+    _nghost-c7=""
   >
 
 
     <button
-      _ngcontent-c6=""
+      _ngcontent-c7=""
     >
       Notes on some Button
     </button>

examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot

@@ -7,12 +7,12 @@ exports[`Storyshots Core|Parameters passed to story 1`] = `
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-c8=""
+    _nghost-c9=""
   >
 
 
     <button
-      _ngcontent-c8=""
+      _ngcontent-c9=""
     >
       Parameters are {"globalParameter":"globalParameter","chapterParameter":"chapterParameter","storyParameter":"storyParameter"}
     </button>